/* ============ NAUKRISALA — HOMEPAGE (Phase 3: Scaler anatomy) ============
   Light, predominantly white/off-white page. White nav + navy announcement
   bar, light hero with booking-form card, light stats row, white cards
   (12px radius, thin #E4E4E4 borders, hover-only shadows), tabbed
   curriculum. Dark reserved for: announcement bar, AI-tools band,
   final CTA, footer. Tokens live in styles.css :root. Homepage only. */

:root{
  --cream:#FAFAF9;
  --green:#178A4C;
  --green-bg:rgba(23,138,76,.10);
  --amber-bg:rgba(0,82,255,.13);
  --track-bg:rgba(33,33,33,.07);
}

/* ---------- shared bits ---------- */
[id]{scroll-margin-top:92px}
.h-eyebrow-note{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tchip{display:inline-flex;align-items:center;font-size:12.5px;font-weight:600;color:var(--ink2);background:var(--paper-2);border:1px solid var(--line-soft);border-radius:999px;padding:6px 12px}
.tchip.sm{font-size:12px;padding:4px 10px}
.sec-head-c{max-width:780px;margin:0 auto 52px;text-align:center}
.sec-head-c .lede-sm{margin:0 auto}
.sec-head-c .eyebrow{margin-bottom:16px}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15.5px;color:var(--amber);text-decoration:none;padding:14px 4px}
.link-arrow .arr{transition:transform .18s ease}
.link-arrow:hover{text-decoration:underline;text-underline-offset:4px}
.link-arrow:hover .arr{transform:translateX(4px)}

/* ---------- hero (LIGHT) ---------- */
.hero{background:radial-gradient(760px 420px at 92% -12%,rgba(0,82,255,.13),rgba(0,82,255,0) 60%),var(--paper-2);color:var(--ink);padding:58px 0 64px;overflow:visible}
.hero-grid{align-items:start}
.hero-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-ink);background:rgba(0,82,255,.13);border:1px solid rgba(0,82,255,.4);padding:8px 15px;border-radius:999px;margin-bottom:24px}
.hero-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--amber);flex:none}
.hero h1{font-size:clamp(2.8rem,5vw,3.4rem);line-height:1.07;letter-spacing:-.03em;color:var(--navy);margin-bottom:20px}
.hero .lede{color:var(--ink2);max-width:540px}
.hero .lede strong{color:var(--ink)}
.hero-ticks{list-style:none;display:flex;flex-direction:column;gap:13px;margin:28px 0 32px}
.hero-ticks li{display:flex;gap:11px;font-size:15.5px;color:var(--ink2);line-height:1.5}
.hero-ticks li svg{width:20px;height:20px;flex:none;color:var(--amber-strong);margin-top:2px}
.hero-ticks li b{color:var(--ink);font-weight:700}
.hero-ctas{display:flex;gap:10px 18px;flex-wrap:wrap;align-items:center}

/* booking form card */
.hero-form-col{min-width:0}
.demo-card{background:#fff;border:1px solid var(--line-soft);border-radius:16px;box-shadow:var(--shadow-md);padding:32px 32px 26px}
.demo-card h3{font-family:var(--font-d);font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--navy);margin-bottom:6px}
.demo-card-sub{font-size:14px;color:var(--muted);margin-bottom:22px}
.demo-card-sub strong{color:var(--ink)}
.hero .demo-form{background:none;border:none;box-shadow:none;border-radius:0;padding:0;gap:16px}
.hero-trust{margin-top:16px;text-align:center;font-size:13.5px;color:var(--muted)}
.hero-trust strong{font-family:var(--font-d);font-weight:800;color:var(--navy)}

/* live board strip — wide band under the hero */
.board-strip{margin-top:54px}
.board-card{position:relative;background:#fff;color:var(--ink);border:1px solid var(--line-soft);border-radius:12px;box-shadow:var(--shadow-md);padding:24px 28px 20px;overflow:hidden;display:grid;grid-template-columns:290px 1fr;grid-template-areas:"head head" "count jobs" "sub jobs" "foot jobs";column-gap:34px}
.board-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--amber)}
.bc-head{grid-area:head;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line-soft)}
.bc-title{display:flex;align-items:center;gap:10px;font-family:var(--font-d);font-weight:800;font-size:15.5px;letter-spacing:-.01em;color:var(--navy)}
.bc-live{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--green)}
.bc-live i{width:8px;height:8px;border-radius:50%;background:var(--green);animation:pulse-dot 2.2s ease-out infinite}
@keyframes pulse-dot{0%{box-shadow:0 0 0 0 rgba(23,138,76,.45)}70%{box-shadow:0 0 0 8px rgba(23,138,76,0)}100%{box-shadow:0 0 0 0 rgba(23,138,76,0)}}
.bc-count{grid-area:count;display:flex;align-items:baseline;gap:12px;padding:18px 0 6px}
.bc-count strong{font-family:var(--font-d);font-size:42px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--navy)}
.bc-count span{font-size:13.5px;font-weight:600;color:var(--muted)}
.bc-sub{grid-area:sub;font-size:13px;color:var(--muted);padding-bottom:14px}
.bc-sub strong{color:var(--amber-ink)}
.bc-jobs{grid-area:jobs;display:grid;grid-template-columns:1fr 1fr;gap:0 28px;align-content:start}
.bc-job{display:block;text-decoration:none;padding:13px 2px;border-top:1px solid var(--line-soft);transition:background .15s ease;min-width:0}
.bc-job:hover{background:var(--paper-2)}
.bc-job h4{font-family:var(--font-d);font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink);line-height:1.3;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.bc-job p{font-size:13px;color:var(--muted);font-weight:500;margin-top:2px}
.bc-job p b{color:var(--ink2);font-weight:600}
.bc-new{float:right;font-size:10.5px;font-weight:800;letter-spacing:.1em;color:var(--green);background:var(--green-bg);border-radius:6px;padding:3px 8px;margin-left:10px}
.bc-foot{grid-area:foot;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding-top:14px;border-top:1px solid var(--line-soft);align-self:end}
.bc-foot a{font-weight:700;font-size:14.5px;color:var(--amber-ink);text-decoration:none;white-space:nowrap}
.bc-foot a:hover{text-decoration:underline;text-underline-offset:3px}
.bc-foot span{font-size:12px;color:var(--muted);font-weight:500;text-align:left}

/* ---------- employer strip (light) ---------- */
.emp{background:#fff;border-bottom:1px solid var(--line-soft);padding:28px 0 30px;overflow:hidden}
.emp-label{text-align:center;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.emp-label b{color:var(--amber-ink);font-weight:700;letter-spacing:.14em}
.emp-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.emp-track{display:flex;width:max-content;animation:emp-scroll 38s linear infinite}
.emp-group{display:flex;gap:56px;padding-right:56px;align-items:center}
.emp-name{font-family:var(--font-d);font-size:20px;font-weight:700;letter-spacing:.01em;color:rgba(33,33,33,.52)}
.emp-name small{font-family:var(--font-b);font-size:12px;font-weight:600;color:rgba(33,33,33,.38);margin-left:7px}
.emp-item{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none}
.emp-logo{height:30px;width:auto;max-width:185px}
.emp-item small{font-family:var(--font-b);font-size:12px;font-weight:600;color:rgba(33,33,33,.42);white-space:nowrap}
.emp-fallback{font-family:var(--font-d);font-size:20px;font-weight:700;letter-spacing:.01em;color:rgba(33,33,33,.52)}
.emp-marquee:hover .emp-track{animation-play-state:paused}
.emp-note{text-align:center;font-size:12.5px;color:var(--muted);margin-top:16px;padding:0 16px}
@keyframes emp-scroll{to{transform:translateX(-50%)}}

/* ---------- stats row (light, Scaler-style) ---------- */
.proof{background:#fff;color:var(--ink)}
.proof .pstat strong{color:var(--navy)}
.proof .pstat span{color:var(--muted)}
@media(min-width:681px){
  .proof .pstat{padding:0 28px;border-left:1px solid var(--line-soft)}
  .proof .pstat:first-child{padding-left:0;border-left:none}
}
.proof-note{border-top:1px solid var(--line-soft);color:var(--muted)}
.proof-note a{color:var(--amber-ink)}

/* ---------- infographic charts ---------- */
.charts-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;margin-bottom:18px}
.chart-card{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:30px 30px 26px;min-width:0}
.chart-card h3{font-family:var(--font-d);font-size:19px;font-weight:800;letter-spacing:-.015em;margin-bottom:4px}
.chart-card .csub{font-size:13.5px;color:var(--muted);margin-bottom:22px}
.bars{display:flex;flex-direction:column;gap:13px}
.bar-row{display:grid;grid-template-columns:172px 1fr 52px;align-items:center;gap:14px}
.bar-name{font-size:13.5px;font-weight:600;color:var(--ink2);line-height:1.25}
.bar-track{height:10px;border-radius:99px;background:var(--track-bg);overflow:hidden}
.bar-fill{height:100%;border-radius:99px;background:var(--navy);width:0;transition:width 1s cubic-bezier(.22,.8,.3,1)}
.bar-fill.amber{background:var(--amber)}
.in .bar-fill{width:var(--w)}
.bar-val{font-family:var(--font-d);font-size:14.5px;font-weight:800;color:var(--navy);text-align:right}
.chart-note{font-size:12.5px;color:var(--muted);margin-top:18px;border-top:1px solid var(--line-soft);padding-top:13px}
.donut-flex{display:flex;align-items:center;gap:26px}
.donut-box{position:relative;width:148px;height:148px;flex:none}
.donut-box svg{transform:rotate(-90deg)}
.donut-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.donut-c strong{font-family:var(--font-d);font-size:29px;font-weight:800;letter-spacing:-.02em;color:var(--navy);line-height:1}
.donut-c span{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.donut-legend{font-size:14px;color:var(--ink2);display:flex;flex-direction:column;gap:11px}
.donut-legend li{list-style:none;display:flex;gap:10px;align-items:flex-start;line-height:1.45}
.donut-legend .sw{width:11px;height:11px;border-radius:3px;flex:none;margin-top:4px}
.src-list{display:flex;flex-direction:column;gap:11px}
.src-row{display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:baseline}
.src-row .sname{font-size:13.5px;font-weight:600;color:var(--ink2)}
.src-row .sval{font-family:var(--font-d);font-size:14px;font-weight:800;color:var(--navy)}
.src-row .strack{grid-column:1/-1;height:7px;border-radius:99px;background:var(--track-bg);overflow:hidden}
.src-row .sfill{height:100%;background:var(--amber);border-radius:99px;width:0;transition:width 1s cubic-bezier(.22,.8,.3,1)}
.in .sfill{width:var(--w)}

/* ---------- pipeline ---------- */
.pipe-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.pipe-step{position:relative;background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r);padding:26px 22px;min-width:0}
.pipe-step .p-ic{width:46px;height:46px;border-radius:12px;background:var(--navy);color:var(--amber);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.pipe-step .p-ic svg{width:24px;height:24px}
.pipe-step .p-n{position:absolute;top:20px;right:20px;font-family:var(--font-d);font-size:13px;font-weight:800;color:var(--amber-strong)}
.pipe-step h3{font-family:var(--font-d);font-size:16.5px;font-weight:700;letter-spacing:-.01em;margin-bottom:7px;line-height:1.25}
.pipe-step p{font-size:13.5px;color:var(--ink2);line-height:1.55}
.pipe-step:not(:last-child)::after{content:"";position:absolute;top:44px;right:-15px;width:16px;height:2px;background:var(--amber);z-index:2}
.pipe-step:not(:last-child)::before{content:"";position:absolute;top:40px;right:-19px;border:5px solid transparent;border-left-color:var(--amber);z-index:2}

/* ---------- personas ---------- */
.persona-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:18px}
.persona{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r);padding:32px 28px;min-width:0;transition:box-shadow .22s ease}
.persona:hover{box-shadow:var(--shadow-md)}
.per-ic{width:50px;height:50px;border-radius:12px;background:var(--amber-bg);color:var(--amber-ink);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.per-ic svg{width:26px;height:26px}
.persona h3{font-family:var(--font-d);font-size:21px;font-weight:800;letter-spacing:-.015em;margin-bottom:6px}
.persona .who{font-size:14px;color:var(--muted);margin-bottom:18px;line-height:1.55}
.gains{list-style:none;display:flex;flex-direction:column;gap:11px;border-top:1px solid var(--line-soft);padding-top:18px}
.gains li{display:flex;gap:11px;font-size:14.5px;color:var(--ink2);line-height:1.5}
.gains li svg{width:19px;height:19px;flex:none;color:var(--green);margin-top:1px}
.gains li b{color:var(--ink);font-weight:600}

/* ---------- flagship course (light feature card) ---------- */
.flagship{background:#fff;border:1px solid var(--line-soft);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm);margin-bottom:18px;color:var(--ink)}
.flag-grid{display:grid;grid-template-columns:1.12fr .88fr;min-width:0}
.flag-main{padding:42px 44px;min-width:0}
.flag-chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:20px}
.fchip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.03em;border-radius:999px;padding:7px 13px;background:var(--paper-2);border:1px solid var(--line-soft);color:var(--ink2)}
.fchip.hot{background:var(--amber);border-color:var(--amber);color:var(--navy)}
.flag-main h3{font-family:var(--font-d);font-size:clamp(1.7rem,3vw,2.35rem);font-weight:800;letter-spacing:-.025em;line-height:1.12;margin-bottom:12px;color:var(--navy)}
.flag-main h3 em{font-style:normal;color:var(--amber-strong)}
.flag-tag{font-size:15.5px;color:var(--ink2);line-height:1.6;margin-bottom:24px;max-width:520px}
.flag-tag strong{color:var(--ink)}
.topics-label{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-ink);margin-bottom:12px}
.topics{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.flag-meta{display:flex;flex-wrap:wrap;gap:12px 28px;border-top:1px solid var(--line-soft);padding-top:22px;margin-bottom:28px}
.fm{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--ink2)}
.fm svg{width:20px;height:20px;color:var(--amber-strong);flex:none}
.fm small{display:block;font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.flag-ctas{display:flex;gap:13px;flex-wrap:wrap;align-items:center}
.flag-main .btn-ghost{border-color:var(--line);color:var(--ink);background:#fff}
.flag-main .btn-ghost:hover{border-color:var(--navy);background:#fff}
.flag-pay{margin-left:auto;text-align:right}
.flag-pay strong{display:block;font-family:var(--font-d);font-size:25px;font-weight:800;color:var(--navy);letter-spacing:-.02em}
.flag-pay span{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.flag-side{background:var(--paper-2);border-left:1px solid var(--line-soft);padding:42px 38px;display:flex;flex-direction:column;gap:0;min-width:0}
.flag-side h4{font-family:var(--font-d);font-size:16px;font-weight:800;margin-bottom:6px;color:var(--navy)}
.flag-side .fs-sub{font-size:13px;color:var(--muted);margin-bottom:22px;line-height:1.55}
.fact-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:13px 0;border-top:1px solid var(--line-soft)}
.fact-row span{font-size:13.5px;color:var(--ink2)}
.fact-row strong{font-family:var(--font-d);font-size:17px;font-weight:800;color:var(--navy);white-space:nowrap}
.fact-row strong em{font-style:normal;color:var(--amber-strong)}
.flag-side .fs-cta{margin-top:auto;padding-top:26px}
.flag-side .fs-cta a{color:var(--amber-ink);font-weight:700;font-size:14.5px;text-decoration:none}
.flag-side .fs-cta a:hover{text-decoration:underline;text-underline-offset:3px}
.flag-side .fs-cta p{font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.55}

/* ---------- curriculum tabs ---------- */
.curr{display:grid;grid-template-columns:340px 1fr;gap:22px;max-width:1080px;margin:0 auto;align-items:start}
.curr-tabs{display:flex;flex-direction:column;gap:8px}
.curr-tab{display:flex;gap:14px;align-items:flex-start;text-align:left;width:100%;background:#fff;border:1px solid var(--line-soft);border-radius:12px;padding:16px 18px;cursor:pointer;font-family:var(--font-b);transition:border-color .15s ease,background .15s ease}
.curr-tab:hover{border-color:var(--line)}
.curr-tab:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.curr-tab.is-active{background:var(--amber-tint);border:1px solid rgba(0,82,255,.5);border-left:4px solid var(--amber)}
.ct-n{font-family:var(--font-d);font-weight:800;font-size:13px;color:var(--amber-strong);padding-top:3px;flex:none}
.ct-body{min-width:0}
.ct-t{display:block;font-family:var(--font-d);font-weight:700;font-size:15.5px;color:var(--ink);line-height:1.32}
.ct-m{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.curr-panel{background:#fff;border:1px solid var(--line-soft);border-radius:12px;box-shadow:var(--shadow-sm);padding:34px 36px;min-width:0}
.curr-panel[hidden]{display:none}
.cp-meta{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--amber-ink);margin-bottom:10px}
.curr-panel h3{font-family:var(--font-d);font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--navy);margin-bottom:10px;line-height:1.2}
.cp-out{font-size:16px;color:var(--ink2);line-height:1.6;margin-bottom:24px;max-width:560px}
.cp-tlabel{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.cp-topics{display:flex;flex-wrap:wrap;gap:8px}
.mentor-band{max-width:1080px;margin:22px auto 0;background:var(--paper-2);border:1px solid var(--line-soft);border-radius:12px;padding:26px 30px;display:flex;gap:20px;align-items:center;color:var(--ink)}
.mentor-band .p-ic{width:50px;height:50px;border-radius:12px;background:rgba(0,82,255,.16);color:var(--amber-ink);display:flex;align-items:center;justify-content:center;flex:none}
.mentor-band .p-ic svg{width:27px;height:27px}
.mentor-band h3{font-family:var(--font-d);font-size:18.5px;font-weight:800;letter-spacing:-.01em;margin-bottom:4px;color:var(--navy)}
.mentor-band p{font-size:14.5px;color:var(--ink2);line-height:1.6}

/* ---------- apply assistant product visual ---------- */
.aa-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:54px;align-items:center}
.aa-mock{background:#fff;border:1px solid var(--line-soft);border-radius:12px;box-shadow:var(--shadow-lg);overflow:hidden;min-width:0}
.aa-win{display:flex;align-items:center;gap:8px;background:var(--navy);padding:13px 18px}
.aa-win i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.25)}
.aa-win i:first-child{background:var(--amber)}
.aa-win span{margin-left:8px;font-size:12.5px;font-weight:600;color:#C9D5EA;letter-spacing:.02em}
.aa-body{padding:24px 26px 26px}
.aa-jobline{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding-bottom:16px;border-bottom:1px solid var(--line-soft)}
.aa-jobline h4{font-family:var(--font-d);font-size:16.5px;font-weight:800;letter-spacing:-.01em;line-height:1.3}
.aa-jobline p{font-size:13px;color:var(--muted);margin-top:3px}
.aa-tag{flex:none;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--amber-ink);background:var(--amber-bg);border-radius:6px;padding:4px 9px}
.aa-match{display:grid;grid-template-columns:104px 1fr;gap:22px;padding:20px 0 4px;align-items:center}
.aa-ring{position:relative;width:104px;height:104px}
.aa-ring svg{transform:rotate(-90deg)}
.aa-ring .rc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.aa-ring .rc strong{font-family:var(--font-d);font-size:24px;font-weight:800;color:var(--navy);line-height:1}
.aa-ring .rc span{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.aa-kw h5{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.aa-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.kw{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;border-radius:999px;padding:6px 12px}
.kw svg{width:13px;height:13px}
.kw-ok{background:var(--green-bg);color:#0E5C31;border:1px solid rgba(23,138,76,.3)}
.kw-add{background:var(--amber-bg);color:var(--amber-ink);border:1px solid rgba(0,82,255,.45)}
.kw-miss{background:#fff;color:var(--muted);border:1px dashed var(--line)}
.aa-out{display:flex;align-items:center;gap:12px;background:var(--paper-2);border:1px solid var(--line-soft);border-radius:12px;padding:13px 16px;margin-top:6px}
.aa-out svg{width:20px;height:20px;color:var(--navy);flex:none}
.aa-out p{font-size:13.5px;color:var(--ink2);line-height:1.45}
.aa-out p b{color:var(--ink)}
.aa-note{font-size:12px;color:var(--muted);margin-top:14px;text-align:center;letter-spacing:.02em}

/* ---------- AI tools band (the page's dark section) ---------- */
.tools-band{background:var(--navy-deep);color:#fff}
.tools-band .sec-head-c h2,.tools-band .sec-head-c h1{color:#fff}
.tools-band .sec-head-c .lede-sm{color:#C9D5EA}
.tools-band .eyebrow{color:var(--amber-light)}
.ait-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:16px}
.ait-card{display:flex;flex-direction:column;gap:11px;background:var(--navy);border:1px solid var(--line-on-navy);border-radius:12px;padding:28px 26px;text-decoration:none;color:#fff;min-width:0;transition:transform .22s ease,border-color .22s ease}
.ait-card:hover{transform:translateY(-4px);border-color:rgba(0,82,255,.55)}
.ait-ic{width:50px;height:50px;border-radius:12px;background:rgba(0,82,255,.15);color:var(--amber);display:flex;align-items:center;justify-content:center}
.ait-ic svg{width:26px;height:26px}
.ait-card h3{font-family:var(--font-d);font-size:19px;font-weight:800;letter-spacing:-.015em;line-height:1.25}
.ait-card p{font-size:14px;color:#C9D5EA;line-height:1.6;flex:1}
.ait-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--line-on-navy);padding-top:15px}
.ait-tag{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--amber-light)}
.ait-go{font-size:14px;font-weight:700;color:#fff;white-space:nowrap}

/* ---------- how-it-works icons ---------- */
#how .step-n{width:auto;height:auto;border-radius:0;background:none;color:var(--amber-strong);font-size:12.5px;letter-spacing:.14em;display:block;margin-bottom:14px}
.sic{width:48px;height:48px;border-radius:12px;background:var(--navy);color:var(--amber);display:flex;align-items:center;justify-content:center}
.sic svg{width:25px;height:25px}

/* ---------- fee flow + transparency ---------- */
.feeflow{display:grid;grid-template-columns:1fr 34px 1fr 34px 1fr;align-items:stretch;margin-bottom:18px}
.ff-step{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r);padding:30px 28px;min-width:0}
.ff-step.hot{background:var(--amber-tint);border-color:rgba(0,82,255,.55);color:var(--ink)}
.ff-step .mono{display:block;margin-bottom:14px;color:var(--amber-ink)}
.ff-amt{font-family:var(--font-d);font-size:36px;font-weight:800;letter-spacing:-.025em;line-height:1.08;margin-bottom:11px;color:var(--navy)}
.ff-amt.sm{font-size:27px}
.ff-step p{font-size:14.5px;color:var(--ink2);line-height:1.6}
.ff-arrow{display:flex;align-items:center;justify-content:center;color:var(--amber-strong)}
.ff-arrow svg{width:24px;height:24px}
.fee-table{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r);padding:10px 30px;margin-bottom:22px}
.ft-row{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:16px 0;border-bottom:1px solid var(--line-soft)}
.ft-row:last-child{border-bottom:none}
.ft-row span{font-size:15px;color:var(--ink2)}
.ft-row strong{font-family:var(--font-d);font-size:16.5px;font-weight:800;color:var(--navy);text-align:right;white-space:nowrap}
.ft-row.hl strong{color:var(--green)}


/* ---------- faq side card + after-you-book steps ---------- */
.online-card{margin-top:30px;background:#fff;border:1px solid var(--line-soft);border-radius:12px;padding:28px;color:var(--ink);box-shadow:var(--shadow-sm)}
.online-card .p-ic{width:46px;height:46px;border-radius:12px;background:rgba(0,82,255,.16);color:var(--amber-ink);display:flex;align-items:center;justify-content:center;margin-bottom:15px}
.online-card .p-ic svg{width:24px;height:24px}
.online-card h3{font-family:var(--font-d);font-size:18.5px;font-weight:800;letter-spacing:-.01em;margin-bottom:7px;color:var(--navy)}
.online-card p{font-size:14.5px;color:var(--ink2);line-height:1.6}
.next-steps{list-style:none;display:flex;flex-direction:column;max-width:760px}
.next-steps li{display:flex;gap:15px;padding:16px 0;border-top:1px solid var(--line-soft);align-items:flex-start}
.next-steps li:first-child{border-top:none;padding-top:4px}
.next-steps .ns-n{width:30px;height:30px;border-radius:50%;background:var(--amber);color:var(--navy);font-family:var(--font-d);font-size:13.5px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.next-steps p{font-size:15px;color:var(--ink2);line-height:1.55}
.next-steps p b{color:var(--ink)}

/* ---------- final cta (navy band, amber button) ---------- */
.final-cta{background:var(--navy);color:#fff;padding:76px 0;text-align:center}
.final-cta h2{margin-bottom:12px;color:#fff}
.final-cta h2 em{color:var(--amber)}
.final-cta p{font-size:16.5px;font-weight:500;color:#C9D5EA;max-width:560px;margin:0 auto 28px}

/* ---------- course cards (rich, Phase 2) ---------- */
.c-chips{display:flex;flex-wrap:wrap;gap:6px}
.c-chip{font-size:11.5px;font-weight:600;color:var(--ink2);background:var(--paper-2);border:1px solid var(--line-soft);border-radius:999px;padding:4px 10px}
.c-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.c-open{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:#0E5C31;background:var(--green-bg);border:1px solid rgba(23,138,76,.28);border-radius:999px;padding:5px 12px}
.c-open b{font-family:var(--font-d);font-weight:800}
.c-dur{font-size:12.5px;font-weight:600;color:var(--muted)}
.c-fee{font-size:13px;font-weight:600;color:var(--amber-ink);border-top:1px solid var(--line-soft);padding-top:12px}

/* ---------- responsive ---------- */
@media(max-width:1020px){
  .charts-grid{grid-template-columns:1fr}
  .pipe-steps{grid-template-columns:1fr 1fr}
  .pipe-step:not(:last-child)::after,.pipe-step:not(:last-child)::before{display:none}
  .flag-grid{grid-template-columns:1fr}
  .flag-side{border-left:none;border-top:1px solid var(--line-soft)}
  .aa-grid{grid-template-columns:1fr;gap:34px}
  .feeflow{grid-template-columns:1fr;gap:12px}
  .ff-arrow{transform:rotate(90deg);padding:2px 0}
  .curr{grid-template-columns:1fr}
}
@media(max-width:900px){
  .board-card{grid-template-columns:1fr;grid-template-areas:"head" "count" "sub" "jobs" "foot"}
  .bc-jobs{grid-template-columns:1fr}
}
@media(max-width:760px){
  .curr-tabs{flex-direction:row;overflow-x:auto;padding-bottom:8px;-webkit-overflow-scrolling:touch}
  .curr-tab{min-width:225px}
  .curr-panel{padding:26px 22px}
}
@media(max-width:680px){
  .hero{padding:42px 0 46px}
  .hero h1{font-size:clamp(2.35rem,11.5vw,2.8rem)}
  .demo-card{padding:26px 22px 22px}
  .board-strip{margin-top:38px}
  .board-card{padding:20px 18px 16px}
  .bc-count strong{font-size:36px}
  .bar-row{grid-template-columns:118px 1fr 44px;gap:10px}
  .bar-name{font-size:12.5px}
  .donut-flex{flex-direction:column;align-items:flex-start}
  .pipe-steps{grid-template-columns:1fr}
  .pipe-step:not(:last-child)::after,.pipe-step:not(:last-child)::before{display:none}
  .flag-main{padding:30px 24px}
  .flag-side{padding:30px 24px}
  .flag-pay{margin-left:0;text-align:left}
  .mentor-band{flex-direction:column;align-items:flex-start;padding:24px}
  .aa-match{grid-template-columns:1fr;justify-items:start}
  .fee-table{padding:4px 20px}
  .ft-row strong{white-space:normal}
  .emp-name{font-size:17px}
}
@media(prefers-reduced-motion:reduce){
  .emp-track{animation:none}
  .bc-live i{animation:none}
  .bar-fill,.src-row .sfill{transition:none;width:var(--w)}
}

/* ---------- AI-era live stats (added 2026-10-25) ---------- */
.ai-stats{display:flex;gap:36px;flex-wrap:wrap;margin-top:30px}
.ai-stats div b{display:block;font-family:var(--font-d);font-size:22px;font-weight:800;color:var(--navy)}
.ai-stats div b span{font-size:22px}
.ai-stats div span{font-size:13.5px;color:var(--muted)}

/* testimonials: dark before/after cards (Career Cracker format) */
.reviews-dark{background:var(--navy-deep);color:#fff}
.reviews-dark .eyebrow{background:#fff}
.reviews-dark h2{color:#fff}
.reviews-dark .lede-sm{color:rgba(255,255,255,.7)}
.sec-head-row{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.sec-head-row .sec-head{margin-bottom:0}
.btn-ghost-light{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:#fff;background:transparent;border:1.5px solid rgba(255,255,255,.35);border-radius:999px;padding:11px 20px;text-decoration:none;white-space:nowrap}
.btn-ghost-light:hover{border-color:#fff}
.review-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.review-marquee > .review-track{display:flex;width:max-content;animation:review-scroll 140s linear infinite}
.review-group{display:flex;gap:28px;padding-right:28px}
.review-marquee:hover > .review-track{animation-play-state:paused}
@keyframes review-scroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.review-track{animation:none}}
.review-card{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:24px;flex:none;width:min(204px,85vw)}
.review-top{display:flex;align-items:center;gap:14px}
.review-avatar{width:52px;height:52px;border-radius:50%;background:var(--amber);color:#fff;display:flex;align-items:center;justify-content:center;font:800 17px var(--font-d);flex:none}
.review-name{font:800 17px var(--font-d);color:#fff}
.review-track{font:600 10.5px var(--font-b);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:2px}
.review-mult{margin-left:auto;font:800 12px var(--font-b);color:#9DB8FF;border:1px solid rgba(157,184,255,.4);border-radius:999px;padding:5px 10px;white-space:nowrap}
.review-bar{margin-top:18px}
.review-bar .rb-label{display:flex;justify-content:space-between;font:700 10.5px var(--font-b);letter-spacing:.12em;color:rgba(255,255,255,.55)}
.review-bar .rb-track{height:5px;border-radius:99px;background:rgba(255,255,255,.14);margin:7px 0 5px;overflow:hidden}
.review-bar .rb-fill{display:block;height:100%;border-radius:99px;background:rgba(255,255,255,.55)}
.review-bar.after .rb-fill{background:linear-gradient(90deg,var(--amber),#7EA2FF)}
.review-bar .rb-role{font:600 13.5px var(--font-b);color:rgba(255,255,255,.9)}
.review-bar .rb-pay{font:800 13.5px var(--font-d);color:#fff}
.review-bar.after .rb-pay{color:#9DB8FF}
.review-quote{margin-top:18px;font:400 14.5px/1.65 var(--font-b);color:rgba(255,255,255,.88);border-left:2px solid rgba(157,184,255,.5);padding-left:14px}
/* hiring-partner name pills (text only, no logos) */
.partner-strip{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px}
.partner-strip span{display:inline-flex;align-items:center;gap:8px;font:700 14px var(--font-d);color:var(--navy);background:#fff;border:1px solid var(--line-soft);border-radius:999px;padding:12px 22px}
.partner-strip img{height:34px;width:auto;max-width:140px;object-fit:contain}
.review-avatar{padding:0;overflow:hidden}
.review-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.persona-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;display:block;margin-bottom:10px}
.partner-strip span.more{color:var(--ink2);border-style:dashed}

#testimonials{padding-bottom:56px}

/* marquee cards are narrow (5 across) so their top row is compacted */
.review-marquee .review-card{padding:18px}
.review-marquee .review-top{gap:10px}
.review-marquee .review-avatar{width:40px;height:40px}
.review-marquee .review-mult{padding:4px 8px}
.review-marquee .review-top>div{min-width:0}

/* marquee quotes clamp so narrow 5-across cards stay compact, not stretched */
.review-card .review-track{display:block;width:auto;animation:none}
.review-marquee .review-quote{display:-webkit-box;-webkit-line-clamp:5;line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;margin-top:14px}

/* testimonials band: full-width fluid marquee, small side margins (user order 2026-10-30) */
#testimonials .wrap{max-width:none;padding:0 16px}
.review-marquee{container-type:inline-size}
#testimonials .review-card{width:calc((100cqw - 112px)/5)}
@media(max-width:1023px){#testimonials .review-card{width:calc((100cqw - 56px)/3)}}
@media(max-width:639px){#testimonials .review-card{width:100cqw}}