/* ============================================================
   Zero to One Academy — Sections II
   AI Workflow · Career Transformation · Mentors · Comparison
   ============================================================ */

/* ============== AI WORKFLOW ============== */
.flow { border-top: 1px solid var(--line); position: relative; }
.flow-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
}
.flow-copy .quote {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.25;
  margin: 28px 0 30px;
}
.flow-copy .quote .grad-text { font-weight: 600; }
.flow-list { display: grid; gap: 2px; }
.flow-list .fl-item {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 0; border-top: 1px solid var(--line);
}
.flow-list .fl-item:last-child { border-bottom: 1px solid var(--line); }
.fl-step { font-family: var(--mono); font-size: 12px; color: var(--blue-bright); flex: none; width: 34px; padding-top: 2px; }
.fl-body h4 { font-size: 16px; font-weight: 560; letter-spacing: -0.015em; margin-bottom: 4px; }
.fl-body p { font-size: 14px; color: var(--ink-mute); line-height: 1.5; }

/* canvas / ecosystem */
.flow-canvas {
  position: relative;
  border-radius: var(--r-xl);
  border: 1px solid var(--glass-stroke);
  background:
    radial-gradient(120% 100% at 50% 0%, oklch(0.26 0.05 264 / 0.6), oklch(0.17 0.02 264 / 0.55));
  backdrop-filter: blur(18px);
  padding: clamp(26px, 3vw, 40px);
  overflow: hidden;
  min-height: 440px;
  display: flex; flex-direction: column; gap: 16px;
  box-shadow: var(--shadow-card);
}
.flow-canvas .fc-orb { position: absolute; width: 320px; height: 320px; right: -90px; top: -90px; border-radius: 50%; background: radial-gradient(circle, oklch(0.55 0.18 270 / 0.5), transparent 70%); filter: blur(40px); pointer-events: none; }

.fc-stage { position: relative; z-index: 1; }
.fc-stage-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.fc-stage-head .badge { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--glass-stroke-2); background: oklch(0.99 0.01 264 / 0.04); }
.fc-stage-head .badge.core { background: var(--accent-grad); color: oklch(0.99 0.01 264); border-color: transparent; }
.fc-stage-head .hint { font-size: 12.5px; color: var(--ink-mute); }
.tool-grid { display: flex; flex-wrap: wrap; gap: 9px; }
.tool {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 13px; border-radius: 12px;
  border: 1px solid var(--glass-stroke-2);
  background: oklch(0.99 0.01 264 / 0.045);
  font-size: 13.5px; font-weight: 480; letter-spacing: -0.01em;
  transition: transform .4s var(--ease), border-color .4s, background .4s;
  cursor: default;
}
.tool:hover { transform: translateY(-3px); border-color: oklch(0.70 0.19 252 / 0.5); background: oklch(0.70 0.19 252 / 0.10); }
.tool .td { width: 20px; height: 20px; border-radius: 6px; background: var(--accent-grad-soft); border: 1px solid var(--glass-stroke); display: grid; place-items: center; font-family: var(--mono); font-size: 10px; color: var(--blue-bright); }
.fc-core {
  position: relative; z-index: 1;
  border-radius: var(--r-md);
  border: 1px solid oklch(0.70 0.19 252 / 0.4);
  background: linear-gradient(120deg, oklch(0.40 0.12 258 / 0.35), oklch(0.38 0.12 285 / 0.35));
  padding: 18px 20px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: 0 0 0 1px oklch(0.70 0.19 252 / 0.15), 0 20px 50px -24px oklch(0.55 0.18 262 / 0.7);
}
.fc-core .core-ico { width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--accent-grad); display: grid; place-items: center; box-shadow: 0 1px 0 oklch(1 0 0 / 0.3) inset; }
.fc-core .core-ico svg { width: 22px; height: 22px; stroke: oklch(0.99 0.01 264); fill: none; }
.fc-core .core-txt b { font-size: 15.5px; font-weight: 580; letter-spacing: -0.015em; display: block; }
.fc-core .core-txt span { font-size: 13px; color: var(--ink-soft); }
.fc-connector { display: flex; justify-content: center; z-index: 1; position: relative; }
.fc-connector svg { width: 24px; height: 26px; stroke: oklch(0.70 0.19 252 / 0.6); fill: none; }

/* ============== CAREER TRANSFORMATION ============== */
.career { position: relative; text-align: center; border-top: 1px solid var(--line); }
.career .career-head { max-width: 820px; margin: 0 auto clamp(48px, 7vh, 76px); }
.career-head .eyebrow { margin-bottom: 24px; }
.career-head h2 { margin-bottom: 22px; }
.career-head .lede { margin-inline: auto; text-align: center; }

.transform {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(16px, 3vw, 32px);
  align-items: stretch;
  max-width: 880px; margin: 0 auto clamp(48px, 7vh, 72px);
  text-align: left;
}
.tcard {
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-stroke);
  padding: 28px;
  position: relative; overflow: hidden;
}
.tcard.from { background: oklch(0.20 0.015 264 / 0.5); }
.tcard.to {
  background: linear-gradient(150deg, oklch(0.34 0.10 262 / 0.45), oklch(0.30 0.10 285 / 0.4));
  border-color: oklch(0.70 0.19 252 / 0.4);
  box-shadow: 0 24px 60px -30px oklch(0.55 0.18 262 / 0.8);
}
.tcard .tlabel { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 16px; display: block; }
.tcard.from .tlabel { color: var(--ink-faint); }
.tcard.to .tlabel { color: var(--blue-bright); }
.tcard ul { list-style: none; display: grid; gap: 12px; }
.tcard li { font-size: 14.5px; display: flex; gap: 11px; align-items: center; letter-spacing: -0.01em; }
.tcard.from li { color: var(--ink-mute); }
.tcard.to li { color: var(--ink); }
.tcard li .mk { width: 18px; height: 18px; flex: none; border-radius: 50%; display: grid; place-items: center; }
.tcard.from li .mk { border: 1px solid var(--line-strong); }
.tcard.from li .mk::before { content: ""; width: 7px; height: 1.5px; background: var(--ink-faint); border-radius: 2px; }
.tcard.to li .mk { background: var(--accent-grad); }
.tcard.to li .mk svg { width: 11px; height: 11px; stroke: oklch(0.99 0.01 264); fill: none; }
.transform-arrow { display: grid; place-items: center; }
.transform-arrow .ring { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--glass-stroke-2); background: var(--glass-fill); display: grid; place-items: center; backdrop-filter: blur(10px); }
.transform-arrow svg { width: 22px; height: 22px; stroke: var(--blue-bright); fill: none; }

.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 980px; margin: 0 auto; text-align: left; }
.pillar { padding: 24px; border-radius: var(--r-md); border: 1px solid var(--glass-stroke); background: var(--glass-fill); transition: transform .4s var(--ease), border-color .4s; }
.pillar:hover { transform: translateY(-4px); border-color: var(--glass-stroke-2); }
.pillar .p-ico { width: 40px; height: 40px; border-radius: 11px; background: var(--accent-grad-soft); border: 1px solid var(--glass-stroke); display: grid; place-items: center; margin-bottom: 16px; }
.pillar .p-ico svg { width: 20px; height: 20px; stroke: var(--blue-bright); fill: none; }
.pillar h4 { font-size: 15.5px; font-weight: 560; letter-spacing: -0.015em; margin-bottom: 6px; }
.pillar p { font-size: 13.5px; color: var(--ink-mute); line-height: 1.5; }

/* ============== INDUSTRY PROFESSIONALS ============== */
.mentors { border-top: 1px solid var(--line); }
.mentor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mentor {
  border-radius: var(--r-lg); border: 1px solid var(--glass-stroke);
  background: linear-gradient(180deg, oklch(0.215 0.022 264 / 0.55), oklch(0.175 0.02 264 / 0.5));
  padding: 26px; position: relative; overflow: hidden;
  transition: transform .5s var(--ease), border-color .5s, box-shadow .5s;
}
.mentor:hover { transform: translateY(-4px); border-color: var(--glass-stroke-2); box-shadow: var(--shadow-card); }
.mentor .m-top { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.m-avatar {
  width: 54px; height: 54px; flex: none; border-radius: 16px; position: relative; overflow: hidden;
  background: conic-gradient(from 140deg, oklch(0.55 0.18 258), oklch(0.52 0.18 285), oklch(0.6 0.16 230), oklch(0.55 0.18 258));
  display: grid; place-items: center;
  box-shadow: 0 1px 0 oklch(1 0 0 / 0.2) inset;
}
.m-avatar::after { content: ""; position: absolute; inset: 0; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.m-avatar .m-init { position: relative; z-index: 1; font-family: var(--mono); font-weight: 600; font-size: 16px; color: oklch(0.99 0.01 264); letter-spacing: 0.02em; }
.mentor .m-role { font-size: 16px; font-weight: 580; letter-spacing: -0.015em; }
.mentor .m-domain { font-size: 13px; color: var(--blue-bright); font-family: var(--mono); letter-spacing: 0.02em; margin-top: 3px; }
.mentor .m-bio { font-size: 14px; color: var(--ink-mute); line-height: 1.55; margin-bottom: 18px; }
.mentor .m-creds { display: flex; flex-wrap: wrap; gap: 8px; }
.m-cred { font-size: 11.5px; font-family: var(--mono); padding: 5px 10px; border-radius: 999px; border: 1px solid var(--glass-stroke-2); background: oklch(0.99 0.01 264 / 0.04); color: var(--ink-soft); letter-spacing: 0.02em; }
.mentor-note { margin-top: 26px; font-size: 13.5px; color: var(--ink-faint); display: flex; align-items: center; gap: 10px; justify-content: center; text-align: center; }
.mentor-note svg { width: 15px; height: 15px; stroke: var(--ink-faint); fill: none; flex: none; }

/* ============== COMPARISON ============== */
.compare { border-top: 1px solid var(--line); }
.cmp {
  border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid var(--line);
  background: var(--glass-fill); backdrop-filter: blur(14px);
}
.cmp-head { display: grid; grid-template-columns: 1.4fr 1fr 1fr; }
.cmp-head > div { padding: 26px clamp(20px, 2.5vw, 32px); }
.cmp-head .ch-crit { display: flex; align-items: flex-end; }
.cmp-head .ch-crit span { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.cmp-head .ch-col { border-left: 1px solid var(--line); }
.cmp-head .ch-trad .ct-name { font-size: 16px; font-weight: 540; color: var(--ink-soft); }
.cmp-head .ch-trad .ct-sub { font-size: 12.5px; color: var(--ink-faint); margin-top: 3px; }
.cmp-head .ch-us {
  background: linear-gradient(160deg, oklch(0.34 0.10 262 / 0.4), oklch(0.28 0.09 285 / 0.3));
  border-left: 1px solid oklch(0.70 0.19 252 / 0.3);
  position: relative;
}
.cmp-head .ch-us .ct-name { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 9px; }
.cmp-head .ch-us .ct-name .dotmk { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-grad); box-shadow: 0 0 10px oklch(0.70 0.19 252 / 0.9); }
.cmp-head .ch-us .ct-sub { font-size: 12.5px; color: var(--blue-bright); margin-top: 3px; font-family: var(--mono); }

.cmp-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; border-top: 1px solid var(--line); transition: background .35s; }
.cmp-row:hover { background: oklch(0.99 0.01 264 / 0.018); }
.cmp-row > div { padding: 20px clamp(20px, 2.5vw, 32px); display: flex; align-items: center; }
.cmp-row .cr-crit { font-size: 15px; font-weight: 480; letter-spacing: -0.015em; }
.cmp-row .cr-col { border-left: 1px solid var(--line); font-size: 14px; gap: 11px; }
.cmp-row .cr-trad { color: var(--ink-mute); }
.cmp-row .cr-us { color: var(--ink); background: oklch(0.55 0.18 262 / 0.045); border-left: 1px solid oklch(0.70 0.19 252 / 0.18); }
.cmp-mk { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; }
.cmp-mk.no { border: 1px solid var(--line-strong); }
.cmp-mk.no svg { width: 11px; height: 11px; stroke: var(--ink-faint); }
.cmp-mk.yes { background: var(--accent-grad); box-shadow: 0 4px 12px -4px oklch(0.64 0.20 258 / 0.7); }
.cmp-mk.yes svg { width: 12px; height: 12px; stroke: oklch(0.99 0.01 264); }

/* ============== RESPONSIVE (II) ============== */
@media (max-width: 920px) {
  .flow-layout { grid-template-columns: 1fr; }
  .flow-canvas { order: 2; min-height: auto; }
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .mentor-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .transform { grid-template-columns: 1fr; }
  .transform-arrow { transform: rotate(90deg); margin: -4px 0; }
  .mentor-grid { grid-template-columns: 1fr; }
  /* comparison: hide traditional column, keep crit + us */
  .cmp-head, .cmp-row { grid-template-columns: 1fr 1fr; }
  .cmp-head .ch-trad, .cmp-row .cr-trad { display: none; }
}
@media (max-width: 520px) {
  .pillars { grid-template-columns: 1fr; }
}