/* Comparison pages: the homepage styles (copied from marketing/index.html) plus the comparison components. */
  :root {
    --bg: #FAF8F2;
    --bg-deep: #F0EDE3;
    --bg-elevated: #FFFFFF;
    --bg-tinted: #F6F2E8;
    --navy-deep: #061A2E;
    --navy-rich: #08243D;
    --navy-alpine: #0B355C;
    --blue-bright: #0077C8;
    --blue-cyan: #22A7D8;
    --blue-icy: #8EC8C3;
    --blue-wash: #E9F5FA;
    --teal-text: #3B746D;
    --gold: #FFC247;
    --amber: #FFAA32;
    --orange: #FF8A2A;
    --orange-deep: #E96F1E;
    --orange-text: #E96F1E;
    --text: #050A12;
    --text-soft: #08243D;
    --text-muted: #5F6B76;
    --inv-bg: #050A12;
    --inv-bg-elevated: #0A1D30;
    --inv-text: #F7F4EC;
    --inv-text-soft: #EDE9DF;
    --border: rgba(8, 36, 61, 0.11);
    --border-bright: rgba(8, 36, 61, 0.24);
    --shadow-paper: 0 18px 50px rgba(8, 36, 61, 0.12), 0 3px 10px rgba(8, 36, 61, 0.08);
    --shadow-card: 0 12px 35px rgba(8, 36, 61, 0.075);
    --max-content: 760px;
    --max-wide: 1160px;
    --max-hero: 1240px;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  body::selection { background: rgba(255, 170, 50, 0.35); }
  img, svg { max-width: 100%; }
  a, button, summary { -webkit-tap-highlight-color: transparent; }
  button, input, select { font: inherit; }
  :focus-visible { outline: 3px solid var(--blue-bright); outline-offset: 3px; }

  h1, h2, h3, h4 {
    margin: 0;
    color: var(--text);
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    letter-spacing: -0.028em;
    text-wrap: balance;
  }
  h1 { font-size: clamp(44px, 5.2vw, 72px); line-height: 1.01; font-weight: 700; letter-spacing: -0.042em; }
  h2 { font-size: clamp(34px, 4.2vw, 56px); line-height: 1.06; }
  h3 { font-size: clamp(21px, 2.1vw, 28px); line-height: 1.18; letter-spacing: -0.02em; }
  h4 { font-size: 19px; line-height: 1.3; }
  p { margin: 0 0 1.08em; color: var(--text-soft); text-wrap: pretty; }
  p:last-child { margin-bottom: 0; }
  strong { color: var(--text); font-weight: 650; }

  .sr-only {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
  }
  .visual-only { user-select: none; pointer-events: none; }
  .container { max-width: var(--max-content); margin: 0 auto; }
  .container-wide { max-width: var(--max-wide); margin: 0 auto; }
  .container-hero { max-width: var(--max-hero); margin: 0 auto; }
  section { position: relative; padding: 84px 28px 72px; }
  section.tinted { background: var(--bg-tinted); }
  #how-it-works, #plans, #why-akros, #faq, #results, #the-science, #founder { scroll-margin-top: 84px; }

  .label, .eyebrow, .card-label, .step-num, .result-key, .result-sub, .stat-key,
  .plan-flag, .plan-cadence, .kid-selector-q, .testimonial-name {
    font-family: 'Outfit', sans-serif;
  }
  .label, .eyebrow {
    display: block;
    margin-bottom: 14px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .19em;
    text-transform: uppercase;
  }
  .label-orange { color: var(--orange-text); }
  .label-blue { color: var(--blue-bright); }
  .section-head { max-width: 850px; margin: 0 auto 46px; text-align: center; }
  .section-head .deck { max-width: 700px; margin: 18px auto 0; color: var(--text-muted); font-size: 18px; }
  .section-head h2 { max-width: 17ch; margin-inline: auto; }

  .climb-strip {
    height: 3px; border-radius: 999px;
    background: linear-gradient(90deg, var(--blue-bright), var(--blue-icy) 34%, var(--gold) 68%, var(--orange));
  }

  /* NAV */
  .site-nav {
    position: sticky; inset: 0 0 auto; z-index: 200;
    background: rgba(250, 248, 242, 0.82);
    border-bottom: 1px solid transparent;
    backdrop-filter: saturate(160%) blur(16px);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
  }
  .site-nav.scrolled {
    background: rgba(250, 248, 242, 0.96);
    border-color: var(--border);
    box-shadow: 0 8px 28px rgba(8, 36, 61, .065);
  }
  .nav-inner {
    min-height: 70px; max-width: var(--max-hero); margin: 0 auto; padding: 8px 28px;
    display: flex; align-items: center; justify-content: space-between; gap: 30px;
  }
  .nav-logo { display: flex; align-items: center; flex: 0 0 auto; }
  .nav-logo img { display: block; width: auto; height: 50px; }
  .nav-links { display: flex; align-items: center; gap: 28px; }
  .nav-links a {
    position: relative; color: var(--text-soft); text-decoration: none; font-size: 14px; font-weight: 550;
    transition: color .18s ease;
  }
  .nav-links a:not(.btn)::after {
    content: ''; position: absolute; left: 0; right: 100%; bottom: -9px; height: 2px;
    background: var(--orange); border-radius: 2px; transition: right .2s ease;
  }
  .nav-links a:not(.btn):hover, .nav-links a.active { color: var(--orange-text); }
  .nav-links a.active::after, .nav-links a:not(.btn):hover::after { right: 0; }
  .nav-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; }
  .nav-progress > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blue-bright), var(--gold), var(--orange)); }

  /* BUTTONS */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
    padding: 13px 24px; border: 1px solid transparent; border-radius: var(--radius-sm);
    font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 650; letter-spacing: .005em;
    text-align: center; text-decoration: none; cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
  }
  .btn-primary {
    color: var(--navy-deep); background: linear-gradient(135deg, var(--orange), var(--gold));
    box-shadow: 0 9px 22px rgba(255, 138, 42, .20);
  }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 13px 30px rgba(255, 138, 42, .30); }
  .btn-secondary { color: var(--text); background: rgba(255,255,255,.42); border-color: var(--border-bright); }
  .btn-secondary:hover { transform: translateY(-2px); color: var(--blue-bright); border-color: var(--blue-bright); background: #fff; }
  .btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
  .btn-row.center { justify-content: center; }
  .site-nav .btn { min-height: 42px; padding: 10px 18px; font-size: 14px; }

  /* HERO */
  .hero {
    padding: 54px 28px 36px; overflow: hidden;
    background:
      radial-gradient(circle at 88% 12%, rgba(255, 170, 50, .11), transparent 30%),
      radial-gradient(circle at 18% 88%, rgba(0, 119, 200, .08), transparent 26%),
      var(--bg);
  }
  .hero::before, .final-cta::before, .engine-section::before {
    content: ''; position: absolute; inset: 0; opacity: .26; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 500'%3E%3Cg fill='none' stroke='%2308243D' stroke-opacity='.12' stroke-width='1'%3E%3Cpath d='M-20 420 C180 250 320 490 520 300 S870 100 1240 260'/%3E%3Cpath d='M-30 455 C170 285 330 525 530 335 S880 135 1250 295'/%3E%3Cpath d='M-40 490 C160 320 340 560 540 370 S890 170 1260 330'/%3E%3C/g%3E%3C/svg%3E");
    background-size: cover; background-position: center bottom;
  }
  .hero-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(420px,.92fr); align-items: center; gap: clamp(34px, 5vw, 66px); }
  /* The eyebrow line is the page’s main heading (h1, the search topic); the big
     headline is a paragraph styled exactly as the old h1 was, so nothing changes on screen. */
  .hero h1.eyebrow { line-height: inherit; text-wrap: inherit; }
  .hero .hero-title { margin: 0; color: var(--text); font-family: 'Outfit', sans-serif; font-size: clamp(42px, 4.6vw, 64px); font-weight: 700; line-height: 1.01; letter-spacing: -0.042em; text-wrap: balance; }
  .hero-inner { max-width: 690px; }
  .hero .eyebrow { margin-bottom: 20px; color: var(--text-soft); }
  .hero .hero-title span { color: var(--orange-text); }
  .hero-claim { margin: 18px 0 20px; color: var(--orange-text); font-family: 'Outfit', sans-serif; font-size: clamp(19px,1.8vw,23px); line-height: 1.3; font-weight: 650; }
  .hero-loop { display: grid; gap: 7px; margin: 0 0 18px; padding: 0; list-style: none; }
  .hero-loop li { position: relative; padding-left: 28px; color: var(--text-soft); font-size: 15.5px; line-height: 1.46; }
  .hero-loop li::before { content: ''; position: absolute; left: 0; top: .62em; width: 10px; height: 10px; border-radius: 50%; background: var(--blue-bright); box-shadow: 0 0 0 5px rgba(0,119,200,.09); }
  .hero-loop li:nth-child(2)::before { background: var(--blue-icy); }
  .hero-loop li:nth-child(3)::before { background: var(--gold); }
  .hero-loop li:nth-child(4)::before { background: var(--orange); }
  .hero-kicker { margin: 0 0 22px; color: var(--text); font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 650; }

  /* Hero graphic: the daily loop (real email, real lesson page, the photo). Drawn on a
     540x640 design grid; --u is one design pixel, so the whole scene scales with its column.
     Hover: the pieces lift, the loop draws back to the email, and four numbered steps appear. */
  .hero-visual { position: relative; aspect-ratio: 540 / 640; container-type: inline-size; }
  .hs { --u: calc(100cqw / 540); position: absolute; inset: 0; -webkit-user-select: none; user-select: none; }
  .hs-obj { position: absolute; transition: transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s cubic-bezier(.2,.7,.2,1); }
  .hs-halo { position: absolute; left: calc(40*var(--u)); top: calc(90*var(--u)); width: calc(470*var(--u)); height: calc(470*var(--u)); border-radius: 50%; background: radial-gradient(closest-side, rgba(142,200,195,.22), rgba(142,200,195,0)); pointer-events: none; }
  .hs-floor { position: absolute; left: calc(60*var(--u)); right: calc(30*var(--u)); bottom: calc(24*var(--u)); height: calc(46*var(--u)); border-radius: 50%; background: radial-gradient(closest-side, rgba(8,36,61,.13), rgba(8,36,61,0)); filter: blur(calc(4*var(--u))); pointer-events: none; }
  .hs-mail { left: calc(2*var(--u)); top: calc(92*var(--u)); width: calc(204*var(--u)); height: calc(318*var(--u)); z-index: 1; border-radius: calc(14*var(--u)); background: #fff; overflow: hidden; transform: rotate(-5deg); box-shadow: 0 calc(1*var(--u)) calc(2*var(--u)) rgba(8,36,61,.08), 0 calc(16*var(--u)) calc(36*var(--u)) rgba(8,36,61,.12); font-family: 'Inter', sans-serif; line-height: 1.2; color: #1f2a36; }
  .hs-mail-top { display: flex; align-items: center; gap: calc(7*var(--u)); padding: calc(10*var(--u)) calc(12*var(--u)) calc(9*var(--u)); border-bottom: calc(1*var(--u)) solid #EEF0F2; font-size: calc(9.5*var(--u)); color: #5B6672; }
  .hs-mail-top svg { flex: none; width: calc(16*var(--u)); height: calc(12*var(--u)); }
  .hs-mail-top b { color: #0B1620; font-weight: 600; }
  .hs-mail-top i { margin-left: auto; font-style: normal; color: #8A939C; }
  .hs-mail-body { padding: calc(12*var(--u)) calc(14*var(--u)) 0; }
  .hs-mail-logo { display: block; width: calc(58*var(--u)); height: auto; margin: 0 auto calc(8*var(--u)); }
  .hs-mail-rule { height: calc(3*var(--u)); margin-bottom: calc(10*var(--u)); border-radius: calc(2*var(--u)); background: linear-gradient(90deg, #0077C8, #8EC8C3 34%, #FFC247 68%, #FF8A2A); }
  .hs-mail-meta { font-size: calc(7.5*var(--u)); line-height: 1.4; letter-spacing: .14em; font-weight: 600; color: #6b7480; white-space: nowrap; }
  .hs-mail-h { max-width: calc(152*var(--u)); margin: calc(5*var(--u)) 0 calc(10*var(--u)); font-size: calc(15*var(--u)); line-height: 1.18; font-weight: 600; letter-spacing: -.015em; color: #0b0f14; }
  .hs-mail-k { font-size: calc(7.5*var(--u)); line-height: 1.4; letter-spacing: .14em; font-weight: 600; color: #08243D; }
  .hs-mail-k::before { content: ''; display: inline-block; width: calc(10*var(--u)); height: calc(3*var(--u)); margin-right: calc(6*var(--u)); border-radius: calc(2*var(--u)); background: #08243D; vertical-align: middle; }
  .hs-mail-p { max-width: calc(166*var(--u)); margin: calc(4*var(--u)) 0 calc(10*var(--u)); font-size: calc(10.5*var(--u)); line-height: 1.45; }
  .hs-mail-ask { max-width: calc(148*var(--u)); padding: calc(8*var(--u)) calc(9*var(--u)); border-radius: calc(8*var(--u)); background: #F6F2E8; font-size: calc(10*var(--u)); line-height: 1.4; }
  .hs-mail-ask b { display: block; margin-bottom: calc(2*var(--u)); font-size: calc(7.5*var(--u)); letter-spacing: .14em; font-weight: 600; color: #08243D; }
  .hs-mail-pdf { max-width: calc(160*var(--u)); display: flex; align-items: center; gap: calc(7*var(--u)); margin-top: calc(10*var(--u)); padding: calc(7*var(--u)) calc(8*var(--u)); border: calc(1*var(--u)) solid #E6E8EB; border-radius: calc(8*var(--u)); font-size: calc(9.5*var(--u)); font-weight: 600; color: #0B1620; }
  .hs-mail-pdf span { display: grid; place-items: center; width: calc(20*var(--u)); height: calc(24*var(--u)); border-radius: calc(3*var(--u)); background: #E8F2FA; color: #0077C8; font-size: calc(6.5*var(--u)); line-height: 1; font-weight: 600; letter-spacing: .04em; }
  .hs-paper { left: calc(170*var(--u)); top: calc(34*var(--u)); width: calc(292*var(--u)); height: calc(378*var(--u)); z-index: 2; background: #fff; transform: rotate(2deg); box-shadow: 0 calc(1*var(--u)) calc(2*var(--u)) rgba(8,36,61,.10), 0 calc(18*var(--u)) calc(40*var(--u)) rgba(8,36,61,.14), 0 calc(2*var(--u)) calc(6*var(--u)) rgba(8,36,61,.06); }
  .hs-paper img, .hs-paper svg { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; max-width: none; }
  .hs-check { fill: none; stroke: #0077C8; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 80; stroke-dashoffset: 80; transition: stroke-dashoffset .45s ease-out; }
  .hs-cam { left: calc(378*var(--u)); top: calc(270*var(--u)); width: calc(158*var(--u)); height: calc(322*var(--u)); z-index: 3; padding: calc(8*var(--u)); border-radius: calc(30*var(--u)); background: #15181D; transform: rotate(7deg); box-shadow: inset 0 0 0 calc(1.5*var(--u)) #2B3038, 0 calc(2*var(--u)) calc(4*var(--u)) rgba(8,36,61,.16), 0 calc(20*var(--u)) calc(44*var(--u)) rgba(8,36,61,.22); }
  .hs-cam-scr { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: calc(23*var(--u)); background: radial-gradient(120% 90% at 30% 20%, #E9DCC6, #CDBB9D 70%, #B9A584); }
  .hs-cam-isl { position: absolute; left: 50%; top: calc(8*var(--u)); z-index: 3; width: calc(50*var(--u)); height: calc(15*var(--u)); margin-left: calc(-25*var(--u)); border-radius: calc(10*var(--u)); background: #000; }
  .hs-cam-page, .hs-cam-frame { position: absolute; left: calc(12*var(--u)); top: calc(46*var(--u)); width: calc(118*var(--u)); height: calc(153*var(--u)); transform: rotate(-3deg); }
  .hs-cam-page { background: #fff; box-shadow: 0 calc(2*var(--u)) calc(6*var(--u)) rgba(40,30,15,.25); }
  .hs-cam-page img { display: block; width: 100%; height: 100%; max-width: none; }
  .hs-cam-frame i { position: absolute; width: calc(14*var(--u)); height: calc(14*var(--u)); border: calc(2.5*var(--u)) solid #FFC247; }
  .hs-cam-frame i:nth-child(1) { left: calc(-5*var(--u)); top: calc(-5*var(--u)); border-right: 0; border-bottom: 0; border-radius: calc(4*var(--u)) 0 0 0; }
  .hs-cam-frame i:nth-child(2) { right: calc(-5*var(--u)); top: calc(-5*var(--u)); border-left: 0; border-bottom: 0; border-radius: 0 calc(4*var(--u)) 0 0; }
  .hs-cam-frame i:nth-child(3) { left: calc(-5*var(--u)); bottom: calc(-5*var(--u)); border-right: 0; border-top: 0; border-radius: 0 0 0 calc(4*var(--u)); }
  .hs-cam-frame i:nth-child(4) { right: calc(-5*var(--u)); bottom: calc(-5*var(--u)); border-left: 0; border-top: 0; border-radius: 0 0 calc(4*var(--u)) 0; }
  .hs-cam-bar { position: absolute; left: 0; right: 0; bottom: 0; height: calc(72*var(--u)); display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(10,12,15,0), rgba(10,12,15,.42)); }
  .hs-cam-shutter { display: grid; place-items: center; width: calc(42*var(--u)); height: calc(42*var(--u)); border: calc(3*var(--u)) solid #fff; border-radius: 50%; }
  .hs-cam-shutter i { width: calc(32*var(--u)); height: calc(32*var(--u)); border-radius: 50%; background: #fff; transition: transform .2s; }
  .hs-cam-thumb { position: absolute; left: calc(18*var(--u)); top: 50%; width: calc(26*var(--u)); height: calc(34*var(--u)); margin-top: calc(-17*var(--u)); overflow: hidden; border: calc(1.5*var(--u)) solid rgba(255,255,255,.85); border-radius: calc(4*var(--u)); background: #fff; }
  .hs-cam-thumb img { display: block; width: 100%; height: 100%; max-width: none; }
  .hs-cam-flash { position: absolute; inset: 0; z-index: 2; background: #fff; opacity: 0; pointer-events: none; }
  .hs-arc { position: absolute; left: 0; top: 0; z-index: 0; width: calc(540*var(--u)); height: calc(640*var(--u)); max-width: none; overflow: visible; pointer-events: none; }
  .hs-arc path { fill: none; stroke: url(#hsArcGradient); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 640; stroke-dashoffset: 640; transition: stroke-dashoffset 1s cubic-bezier(.4,0,.2,1) .15s; }
  .hs-arc circle { fill: #0077C8; opacity: 0; transition: opacity .3s 1s; }
  .hs-cap { position: absolute; z-index: 5; display: flex; align-items: center; gap: calc(7*var(--u)); padding: calc(5*var(--u)) calc(11*var(--u)) calc(5*var(--u)) calc(5*var(--u)); border-radius: calc(999*var(--u)); background: rgba(255,255,255,.94); box-shadow: 0 calc(1*var(--u)) calc(2*var(--u)) rgba(8,36,61,.08), 0 calc(8*var(--u)) calc(22*var(--u)) rgba(8,36,61,.12); font-family: 'Outfit', sans-serif; font-size: calc(12*var(--u)); line-height: 1; font-weight: 600; letter-spacing: .005em; color: #061A2E; white-space: nowrap; opacity: 0; transform: translateY(calc(6*var(--u))); transition: opacity .35s, transform .35s; pointer-events: none; }
  .hs-cap b { display: grid; place-items: center; width: calc(19*var(--u)); height: calc(19*var(--u)); border-radius: 50%; font-size: calc(10.5*var(--u)); font-weight: 700; color: #061A2E; }
  .hs-c1 { left: calc(8*var(--u)); top: calc(46*var(--u)); }
  .hs-c2 { left: calc(346*var(--u)); top: calc(2*var(--u)); }
  .hs-c3 { left: calc(392*var(--u)); top: calc(606*var(--u)); }
  .hs-c4 { left: calc(56*var(--u)); top: calc(560*var(--u)); }
  .hs-c1 b { background: #0077C8; color: #fff; }
  .hs-c2 b { background: #8EC8C3; }
  .hs-c3 b { background: #FFC247; }
  .hs-c4 b { background: #FF8A2A; }
  .hs:hover .hs-mail { transform: translate(calc(-6*var(--u)),calc(-4*var(--u))) rotate(-6.5deg); }
  .hs:hover .hs-paper { transform: translateY(calc(-6*var(--u))) rotate(1.2deg); box-shadow: 0 calc(1*var(--u)) calc(2*var(--u)) rgba(8,36,61,.10), 0 calc(26*var(--u)) calc(54*var(--u)) rgba(8,36,61,.16), 0 calc(3*var(--u)) calc(8*var(--u)) rgba(8,36,61,.06); }
  .hs:hover .hs-cam { transform: translate(calc(6*var(--u)),calc(2*var(--u))) rotate(8.5deg); }
  .hs:hover .hs-check { stroke-dashoffset: 0; }
  .hs:hover .hs-check:nth-of-type(2) { transition-delay: .12s; }
  .hs:hover .hs-check:nth-of-type(3) { transition-delay: .24s; }
  .hs:hover .hs-check:nth-of-type(4) { transition-delay: .36s; }
  .hs:hover .hs-arc path { stroke-dashoffset: 0; }
  .hs:hover .hs-arc circle { opacity: 1; }
  .hs:hover .hs-cap { opacity: 1; transform: none; }
  .hs:hover .hs-c2 { transition-delay: .12s; }
  .hs:hover .hs-c3 { transition-delay: .24s; }
  .hs:hover .hs-c4 { transition-delay: .9s; }
  .hs:hover .hs-mail:hover { transform: translate(calc(-10*var(--u)),calc(-12*var(--u))) rotate(-7deg); box-shadow: 0 calc(1*var(--u)) calc(2*var(--u)) rgba(8,36,61,.08), 0 calc(26*var(--u)) calc(50*var(--u)) rgba(8,36,61,.16); }
  .hs:hover .hs-cam:hover { transform: translate(calc(8*var(--u)),calc(-6*var(--u))) rotate(9deg); }
  .hs-cam:hover .hs-cam-flash { animation: hs-flash .5s ease-out; }
  .hs-cam:hover .hs-cam-shutter i { transform: scale(.88); }
  @keyframes hs-flash { 0% { opacity: 0; } 18% { opacity: .9; } 100% { opacity: 0; } }

  /* HERO PROOF */
  .hero-proof { position: relative; z-index: 3; max-width: var(--max-wide); margin: 0 auto 14px; padding: 0 28px; }
  .stat-band, .testimonial-wrap { max-width: none; margin: 0; padding: 0; }
  .stat-grid {
    display: grid; grid-template-columns: repeat(4,1fr); overflow: hidden;
    border: 1px solid var(--border); border-radius: 16px; background: #fff; box-shadow: var(--shadow-card);
  }
  .stat-cell { min-height: 105px; padding: 22px 18px; text-align: center; border-right: 1px solid var(--border); display: flex; flex-direction: column; justify-content: center; }
  .stat-cell:last-child { border-right: 0; }
  .stat-value { color: var(--navy-deep); font-family: 'Outfit', sans-serif; font-size: 30px; font-weight: 700; letter-spacing: -.035em; line-height: 1.05; }
  .stat-key { margin-top: 7px; color: var(--text-muted); font-size: 10.5px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
  .stat-key-top { margin: 0 0 5px; }
  .stat-note { margin-top: 5px; color: var(--text-muted); font-size: 12px; line-height: 1.35; }
  .stat-cell:nth-child(1) { box-shadow: inset 0 3px 0 var(--blue-bright); }
  .stat-cell:nth-child(2) { box-shadow: inset 0 3px 0 var(--blue-icy); }
  .stat-cell:nth-child(3) { box-shadow: inset 0 3px 0 var(--gold); background: linear-gradient(180deg,rgba(255,194,71,.07),#fff 55%); }
  .stat-cell:nth-child(4) { box-shadow: inset 0 3px 0 var(--orange); }
  .testimonial-wrap { margin-top: 22px; }
  .testimonial {
    display: grid; grid-template-columns: 1fr 225px; overflow: hidden;
    border: 1px solid var(--border); border-radius: 16px; background: #fff; box-shadow: 0 8px 28px rgba(8,36,61,.055);
  }
  .testimonial-quote { position: relative; padding: 27px 30px; color: var(--text-soft); font-size: 17px; font-style: italic; }
  
  .testimonial-attr { padding: 24px 24px; border-left: 1px solid var(--border); background: linear-gradient(135deg,var(--bg-tinted),#fff); display: flex; flex-direction: column; justify-content: center; }
  .testimonial-name { color: var(--text); font-size: 12px; font-weight: 750; letter-spacing: .15em; text-transform: uppercase; }
  .testimonial-src { margin-top: 6px; color: var(--text-muted); font-size: 12.5px; }

  /* GENERAL CARDS */
  .grid-2 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
  .grid-3 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
  .grid-4 { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }
  .card { position: relative; padding: 28px 26px; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; box-shadow: 0 8px 26px rgba(8,36,61,.045); }
  .card-rail { position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: var(--radius-md) var(--radius-md) 0 0; }
  .rail-blue { background: var(--blue-bright); }
  .rail-gold { background: var(--gold); }
  .rail-orange { background: var(--orange); }
  .card-label { display: block; margin-bottom: 12px; color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
  .step-num { display: block; margin-bottom: 12px; color: var(--orange-text); font-size: 12px; font-weight: 750; letter-spacing: .15em; text-transform: uppercase; }
  .card h3 { margin-bottom: 12px; }
  .card p { color: var(--text-soft); font-size: 15px; line-height: 1.62; }
  .tick-list, .prose-list { margin: 0; padding: 0; list-style: none; }
  .tick-list { display: grid; gap: 12px; }
  .tick-list li { position: relative; padding-left: 23px; color: var(--text-soft); font-size: 15px; line-height: 1.52; }
  .tick-list li::before { content: '✓'; position: absolute; left: 0; top: .02em; color: var(--blue-bright); font-weight: 800; }
  .prose-list { display: grid; gap: 17px; }
  .prose-list li { position: relative; padding-left: 24px; color: var(--text-soft); }
  .prose-list li::before { content: ''; position: absolute; left: 0; top: .68em; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
  .dark-bar, .quiet-bar {
    border-radius: 14px; padding: 22px 26px; font-family: 'Outfit', sans-serif; font-weight: 550; line-height: 1.55;
  }
  .dark-bar { color: var(--inv-text); background: linear-gradient(135deg,var(--navy-deep),var(--navy-alpine)); box-shadow: 0 12px 30px rgba(6,26,46,.14); }
  .dark-bar p { color: var(--inv-text-soft); }
  .quiet-bar { color: var(--text); background: var(--bg-tinted); border: 1px solid var(--border); }

  /* RESULTS */
  .results-section { padding-top: 88px; }
  .results-grid { position: relative; }
  .results-grid::before { content: ''; position: absolute; left: 15%; right: 15%; top: 38px; height: 3px; background: linear-gradient(90deg,var(--blue-bright),var(--gold),var(--orange)); z-index: 0; opacity: .7; }
  .result-card { z-index: 1; min-height: 390px; padding-top: 58px; overflow: visible; }
  .result-card::after { content: ''; position: absolute; width: 118px; height: 118px; right: -18px; bottom: -18px; border-radius: 50%; background: radial-gradient(circle,var(--stage-wash,rgba(0,119,200,.10)),transparent 70%); }
  .result-card[data-stage='repair'] { --stage-wash: rgba(255,194,71,.19); }
  .result-card[data-stage='sustain'] { --stage-wash: rgba(255,138,42,.16); }
  .result-symbol { position: absolute; left: 50%; top: -25px; transform: translateX(-50%); width: 50px; height: 50px; margin: 0; border: 1px solid var(--border); border-radius: 50%; background: #fff; box-shadow: 0 7px 18px rgba(8,36,61,.12); display: grid; place-items: center; color: var(--stage,var(--blue-bright)); }
  .result-symbol svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .result-card[data-stage='repair'] { --stage: var(--orange-text); }
  .result-card[data-stage='sustain'] { --stage: var(--teal-text); }
  .result-figure { color: var(--navy-deep); font-family: 'Outfit', sans-serif; font-size: 74px; font-weight: 750; letter-spacing: -.055em; line-height: .95; }
  .result-key { margin-top: 15px; color: var(--text); font-size: 13px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
  .result-sub { min-height: 42px; margin: 7px 0 16px; color: var(--text-muted); font-size: 13px; font-weight: 600; line-height: 1.45; }
  .result-card p { font-size: 15px; }
  .results-closer { margin-top: 25px !important; padding: 27px 32px; display: grid; grid-template-columns: 1.4fr .8fr; gap: 32px; align-items: center; }
  .results-closer p:last-child { padding-left: 30px; border-left: 1px solid rgba(255,255,255,.20); font-family: 'Outfit', sans-serif; font-size: 18px; font-weight: 650; }

  /* PROBLEM */
  .problem-section { overflow: hidden; background: var(--bg-tinted); }
  .problem-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
  .problem-copy .section-head { margin: 0 0 32px; text-align: left; }
  .problem-copy .section-head h2 { margin: 0; max-width: 13ch; }
  .problem-visual { min-height: 470px; position: relative; }
  .grade-orbit { position: absolute; inset: 0; }
  .grade-card { position: absolute; left: 6%; top: 6%; width: 225px; height: 280px; padding: 28px; border-radius: 18px; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-paper); transform: rotate(-4deg); }
  .grade-letter { color: var(--navy-deep); font-family: 'Outfit',sans-serif; font-size: 96px; font-weight: 750; line-height: .9; letter-spacing: -.06em; }
  .grade-rule { height: 7px; margin-top: 30px; background: #D6DEE3; border-radius: 3px; }
  .grade-rule.short { width: 70%; }
  .skill-map { position: absolute; right: 2%; top: 18%; width: 330px; padding: 24px; border-radius: 20px; background: var(--navy-rich); box-shadow: 0 24px 55px rgba(6,26,46,.25); transform: rotate(2deg); }
  .skill-map-head { display: flex; gap: 7px; margin-bottom: 18px; }
  .skill-map-head i { width: 9px; height: 9px; border-radius: 50%; background: var(--blue-icy); }
  .skill-map-head i:nth-child(2) { background: var(--gold); }
  .skill-map-head i:nth-child(3) { background: var(--orange); }
  .skill-tiles { display: grid; grid-template-columns: repeat(5,1fr); gap: 9px; }
  .skill-tile { aspect-ratio: 1; border-radius: 6px; background: rgba(247,244,236,.75); position: relative; }
  .skill-tile.open { background: var(--gold); }
  .skill-tile.gap { background: rgba(247,244,236,.18); border: 2px dashed rgba(255,194,71,.95); }
  .skill-tile.gap::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; transform: translate(-50%,-50%) rotate(-25deg); background: var(--orange); }
  .dependency-line { position: absolute; left: 40%; bottom: 3%; width: 48%; height: 130px; }
  .dependency-line svg { width: 100%; height: 100%; overflow: visible; }
  .dependency-line path { fill: none; stroke: var(--orange); stroke-width: 3; stroke-dasharray: 7 8; }
  .dependency-line circle { fill: #fff; stroke: var(--blue-bright); stroke-width: 3; }
  .algebra-block { position: absolute; right: 6%; bottom: 2%; width: 120px; height: 90px; display: grid; place-items: center; border-radius: 14px; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-card); color: var(--navy-rich); font: 700 34px/1 'Outfit',sans-serif; }

  /* SOLUTION */
  .solution-section { background: #fff; }
  .solution-section .section-head { max-width: var(--max-wide); margin-bottom: 34px; }
  .solution-section .section-head h2.solution-headline { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; width: 100%; max-width: none; text-align: left; font-size: clamp(34px,3.25vw,48px); line-height: 1.08; }
  .solution-headline span { display: block; padding: 8px 26px 10px; }
  .solution-headline .solution-ai-head { border-left: 3px solid var(--blue-bright); }
  .solution-headline .solution-paper-head { border-left: 3px solid var(--orange); color: var(--orange-text); }
  .solution-section .section-head .deck { margin-top: 18px; }
  .solution-card { overflow: hidden; padding-top: 210px; min-height: 550px; }
  .solution-visual { position: absolute; left: 0; right: 0; top: 0; height: 180px; border-bottom: 1px solid var(--border); background: var(--bg-tinted); overflow: hidden; }
  .solution-visual svg { width: 100%; height: 100%; }
  .solution-card.ai-card .solution-visual { background: linear-gradient(135deg,#EAF5FA,#F8FBFC); }
  .solution-card.paper-card .solution-visual { background: linear-gradient(135deg,#FFF9EB,#FBF8F0); }
  .solution-card .card-label { color: var(--orange-text); }
  .science-copy { margin-top: 46px !important; padding: 30px 34px; border-left: 3px solid var(--blue-bright); background: var(--bg-tinted); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
  .science-copy h3 { text-align: left !important; }
  .solution-section > .container-wide > .dark-bar { margin-top: 30px !important; }
  .science-principles { margin-top: 25px !important; padding: 15px 20px; border: 1px solid var(--border); border-radius: 999px; background: #fff; }

  /* ENGINE */
  .engine-section { overflow: hidden; color: var(--inv-text); background: linear-gradient(180deg,var(--inv-bg),var(--navy-deep)); }
  .engine-section::before { opacity: .55; filter: invert(1); }
  .engine-section .section-head { position: relative; z-index: 1; }
  .engine-section .label { color: var(--gold); }
  .engine-section h2, .engine-section h3, .engine-section strong { color: var(--inv-text); }
  .engine-section .section-head .deck, .engine-section p, .engine-section li { color: var(--inv-text-soft); }
  .engine-tracks { position: relative; z-index: 1; gap: 24px; }
  .engine-track { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.15); box-shadow: none; padding: 32px; }
  .engine-track .card-label { color: var(--gold); }
  .engine-track .tick-list { gap: 0; }
  .engine-track .tick-list li { min-height: 78px; padding: 17px 14px 17px 58px; border-top: 1px solid rgba(255,255,255,.10); }
  .engine-track .tick-list li:first-child { border-top: 0; }
  .engine-track .tick-list li::before { content: ''; left: 6px; top: 21px; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.24); border-radius: 9px; background:
    linear-gradient(135deg,rgba(0,119,200,.35),rgba(255,194,71,.18)); box-shadow: inset 0 0 0 7px rgba(255,255,255,.04); }
  .engine-track.advance .tick-list li::before { background: linear-gradient(135deg,rgba(142,200,195,.35),rgba(255,138,42,.20)); }
  .engine-section .dark-bar { position: relative; z-index: 1; margin-top: 25px !important; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); box-shadow: none; text-align: center; }
  .engine-section .label.center { color: var(--gold); }
  .loop-strip { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
  .loop-strip::before { content: ''; position: absolute; left: 14%; right: 14%; top: 50%; height: 2px; background: linear-gradient(90deg,var(--blue-bright),var(--gold),var(--orange)); opacity: .85; }
  .loop-strip .card { min-height: 180px; background: var(--bg-elevated); box-shadow: 0 14px 36px rgba(0,0,0,.18); }
  .loop-strip .step-num { color: var(--orange-text); }
  .loop-strip p { color: var(--text-soft); }

  /* HOW IT WORKS */
  .how-section { background: var(--bg-tinted); }
  .steps-grid { gap: 20px; }
  .step-card { min-height: 455px; padding-top: 235px; overflow: hidden; }
  .step-visual { position: absolute; inset: 0 0 auto; height: 205px; display: grid; place-items: center; background: linear-gradient(180deg,#fff,var(--bg-tinted)); border-bottom: 1px solid var(--border); }
  .step-visual svg { width: 84%; height: 82%; overflow: visible; }
  .step-card:nth-child(2) .step-visual { background: linear-gradient(180deg,#FFF8E9,var(--bg-tinted)); }
  .step-card:nth-child(3) .step-visual { background: linear-gradient(180deg,#EAF5FA,var(--bg-tinted)); }

  /* FOUNDATION */
  .foundation-section { padding-top: 64px; padding-bottom: 64px; background: #fff; }
  .foundation-section .section-head { margin-bottom: 30px; }
  .feature-rail { gap: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: var(--border); box-shadow: var(--shadow-card); }
  .feature-rail .card { min-height: 190px; border: 0; border-radius: 0; box-shadow: none; padding: 27px 24px 23px 67px; }
  .feature-rail .card::before { content: ''; position: absolute; left: 23px; top: 27px; width: 29px; height: 29px; border-radius: 8px; background: linear-gradient(135deg,rgba(0,119,200,.13),rgba(255,194,71,.18)); border: 1px solid var(--border); }
  .feature-rail .card::after { content: '✓'; position: absolute; left: 31px; top: 27px; color: var(--blue-bright); font-weight: 800; }
  .feature-rail .card-label { margin-bottom: 6px; }

  /* PARENT PROOF */
  .parent-proof-section { background: var(--bg-tinted); }
  .proof-layout { display: grid; grid-template-columns: .88fr 1.12fr; gap: 70px; align-items: center; }
  .proof-copy .section-head { margin: 0 0 30px; text-align: left; }
  .proof-copy .section-head h2 { margin: 0; max-width: 13ch; }
  .proof-copy .prose-list { gap: 11px; }
  .proof-visual { position: relative; min-height: 560px; }
  .email-mock, .dashboard-mock { position: absolute; border: 1px solid var(--border); border-radius: 17px; background: #fff; box-shadow: var(--shadow-paper); overflow: hidden; }
  .email-mock { left: 2%; top: 4%; width: 63%; height: 430px; transform: rotate(-2.5deg); z-index: 2; }
  .dashboard-mock { right: 0; bottom: 3%; width: 65%; height: 360px; transform: rotate(2deg); z-index: 3; }
  .mock-window-head { height: 48px; border-bottom: 1px solid var(--border); background: var(--bg-tinted); display: flex; align-items: center; gap: 7px; padding: 0 17px; }
  .mock-window-head i { width: 9px; height: 9px; border-radius: 50%; background: var(--blue-icy); }
  .mock-window-head i:nth-child(2) { background: var(--gold); }
  .mock-window-head i:nth-child(3) { background: var(--orange); }
  .email-body { padding: 25px; }
  .email-body .hero-line { width: 78%; height: 13px; background: var(--navy-rich); border-radius: 3px; margin-bottom: 15px; }
  .email-body span { display: block; height: 6px; margin: 9px 0; border-radius: 3px; background: #D4DDE2; }
  .email-body span:nth-child(3n) { width: 70%; }
  .email-callout { margin-top: 24px; padding: 18px; border-radius: 11px; background: #F1F8FB; border-left: 4px solid var(--blue-bright); }
  .email-callout b { display: block; width: 55%; height: 8px; background: var(--blue-bright); border-radius: 3px; margin-bottom: 12px; }
  .dashboard-body { padding: 22px; }
  .dash-ring { width: 92px; height: 92px; margin: 0 auto 18px; border-radius: 50%; background: conic-gradient(var(--orange) 0 65%, #E8ECEF 65%); position: relative; }
  .dash-ring::after { content: ''; position: absolute; inset: 12px; border-radius: 50%; background: #fff; }
  .dash-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; }
  .dash-grid i { aspect-ratio: 1; border-radius: 5px; background: #E3E9ED; }
  .dash-grid i:nth-child(3n) { background: var(--blue-icy); }
  .dash-grid i:nth-child(5n) { background: var(--gold); }
  .proof-pin { position: absolute; z-index: 5; width: 19px; height: 19px; border-radius: 50%; background: var(--orange); border: 5px solid #fff; box-shadow: 0 5px 13px rgba(8,36,61,.22); }
  .proof-pin.one { left: 50%; top: 18%; }
  .proof-pin.two { right: 16%; top: 55%; background: var(--blue-bright); }
  .proof-pin.three { left: 30%; bottom: 6%; background: var(--gold); }

  /* SELF SUFFICIENCY */
  .self-section { overflow: hidden; background: linear-gradient(180deg,var(--navy-deep),var(--inv-bg)); color: var(--inv-text); }
  .self-section::before { content: ''; position: absolute; width: 650px; height: 650px; right: -260px; top: -260px; border-radius: 50%; background: radial-gradient(circle,rgba(255,138,42,.15),transparent 65%); }
  .self-layout { position: relative; display: grid; grid-template-columns: .95fr 1.05fr; gap: 70px; align-items: center; }
  .self-section .label { color: var(--gold); }
  .self-section h2, .self-section strong { color: var(--inv-text); }
  .self-section p { color: var(--inv-text-soft); }
  .self-copy .section-head { margin: 0 0 28px; text-align: left; }
  .self-copy .section-head h2 { margin: 0; max-width: 12ch; }
  .pull-quote { color: var(--gold); font-family: Georgia,serif; font-size: clamp(26px,3vw,40px); font-style: italic; line-height: 1.35; }
  .self-section .dark-bar { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); box-shadow: none; }
  .self-visual { min-height: 500px; position: relative; }
  .attempt-card { position: absolute; width: 260px; height: 330px; padding: 27px; border-radius: 12px; background: #fff; box-shadow: 0 24px 55px rgba(0,0,0,.28); }
  .attempt-card.before { left: 2%; top: 12%; transform: rotate(-7deg); }
  .attempt-card.after { right: 2%; bottom: 5%; transform: rotate(5deg); }
  .attempt-card .tiny-head { height: 8px; width: 65%; margin-bottom: 30px; background: var(--navy-rich); border-radius: 2px; }
  .attempt-card .problem { color: var(--navy-deep); font: 500 31px/1.2 Georgia,serif; text-align: center; margin-top: 42px; }
  .attempt-card .hand-answer { margin-top: 45px; color: #59646D; font: italic 38px/1 Georgia,serif; text-align: center; transform: rotate(-3deg); }
  .attempt-card.before::after { content: '×'; position: absolute; right: 25px; bottom: 64px; color: #C8392A; font: 58px/1 Georgia,serif; }
  .attempt-card.after::after { content: '✓'; position: absolute; right: 24px; bottom: 58px; color: var(--teal-text); font: 700 48px/1 'Outfit',sans-serif; }
  .attempt-hint { position: absolute; left: 36%; top: 43%; z-index: 5; width: 210px; padding: 14px 17px; border-radius: 10px; background: #FFF7E6; border: 1px solid rgba(255,194,71,.55); box-shadow: var(--shadow-card); transform: rotate(-2deg); }
  .attempt-hint i { display: block; height: 5px; margin: 7px 0; background: #C4A365; border-radius: 2px; opacity: .65; }
  .attempt-arrow { position: absolute; inset: 0; width: 100%; height: 100%; }
  .attempt-arrow path { fill: none; stroke: var(--orange); stroke-width: 4; stroke-dasharray: 7 9; }

  /* ENGAGEMENT */
  .engagement-section { background: var(--bg-tinted); }
  .engagement-body { display: grid; grid-template-columns: 1fr .95fr; gap: 64px; align-items: center; }
  .engagement-visual { min-height: 560px; position: relative; }
  .trail-card-stack { position: absolute; left: 5%; top: 8%; width: 305px; height: 420px; }
  .trail-card { position: absolute; inset: 0; padding: 22px; border-radius: 22px; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-paper); overflow: hidden; }
  .trail-card.back-one { transform: rotate(-10deg) translate(-20px,18px); background: #EAF5FA; }
  .trail-card.back-two { transform: rotate(8deg) translate(21px,14px); background: #FFF4DA; }
  .trail-card.front { transform: rotate(-1deg); }
  .trail-card.front::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: linear-gradient(90deg,var(--blue-bright),var(--blue-icy),var(--gold),var(--orange)); }
  .mascot-medallion { width: 190px; height: 190px; margin: 30px auto 22px; border-radius: 50%; background: radial-gradient(circle,#FFF8E8,#F0E9D7); display: grid; place-items: center; border: 1px solid var(--border); }
  .mascot-medallion svg { width: 145px; height: 145px; }
  .card-bars i { display: block; height: 7px; margin: 10px auto; border-radius: 3px; background: #D6DEE2; }
  .card-bars i:first-child { width: 65%; background: var(--navy-rich); }
  .card-bars i:nth-child(2) { width: 83%; }
  .card-bars i:nth-child(3) { width: 57%; }
  .mountain-progress { position: absolute; right: 0; bottom: 2%; width: 330px; height: 270px; padding: 20px; border-radius: 20px; background: var(--navy-rich); box-shadow: 0 22px 50px rgba(6,26,46,.25); }
  .mountain-progress svg { width: 100%; height: 100%; }
  .engagement-copy > .container { max-width: none; margin-bottom: 25px !important; }
  .engagement-copy .grid-3 { grid-template-columns: 1fr; gap: 12px; }
  .engagement-copy .card { min-height: auto; padding: 20px 22px 19px; }
  .engagement-copy .card h3 { font-size: 22px; }

  /* FAMILIES */
  .families-section { background: #fff; }
  .family-scene { position: relative; height: 380px; margin: -2px 0 34px; border: 1px solid var(--border); border-radius: 22px; background: linear-gradient(180deg,#FFFDF7,#F3EFE4); overflow: hidden; box-shadow: var(--shadow-card); }
  .family-scene svg { width: 100%; height: 100%; }
  .family-steps { position: relative; gap: 0; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: var(--border); }
  .family-steps .card { border: 0; border-radius: 0; box-shadow: none; min-height: 210px; }
  .family-steps .card:not(:last-child)::after { content: '→'; position: absolute; right: -13px; top: 50%; transform: translateY(-50%); z-index: 3; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--orange-text); box-shadow: 0 4px 10px rgba(8,36,61,.12); }

  /* FOUNDER */
  .founder-section { background: var(--bg); }
  .founder-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 74px; align-items: start; }
  .founder-portrait { position: sticky; top: 105px; min-height: 610px; border-radius: 24px; background: linear-gradient(155deg,#E5EDF1,#F6EEE0); border: 1px solid var(--border); overflow: hidden; box-shadow: var(--shadow-card); }
  .founder-portrait::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 30% 20%,rgba(255,194,71,.2),transparent 35%), linear-gradient(180deg,transparent 56%,rgba(8,36,61,.08)); }
  .founder-portrait svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .founder-copy .section-head { margin: 0 0 34px; text-align: left; }
  .founder-copy .section-head h2 { margin: 0; max-width: 13ch; }
  .founder-body p { font-size: 16px; line-height: 1.72; }
  .founder-sign { margin-top: 28px; color: var(--orange-text); font-family: 'Outfit',sans-serif; font-size: 24px; font-weight: 650; }
  .founder-name { color: var(--text); font-family: 'Outfit',sans-serif; font-weight: 600; }
  .patent-note { color: var(--text-muted); font-size: 13px !important; font-style: italic; }

  /* ALTERNATIVES */
  .alternatives-section { background: var(--bg-tinted); }
  .alt-card { min-height: 430px; padding-top: 200px; overflow: hidden; }
  .alt-visual { position: absolute; left: 0; right: 0; top: 0; height: 170px; display: grid; place-items: center; border-bottom: 1px solid var(--border); background: linear-gradient(180deg,#fff,var(--bg-tinted)); }
  .alt-visual svg { width: 120px; height: 120px; stroke: var(--navy-rich); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .alt-card:nth-child(2) .alt-visual { background: linear-gradient(180deg,#EAF5FA,var(--bg-tinted)); }
  .alt-card:nth-child(3) .alt-visual { background: linear-gradient(180deg,#FFF8E9,var(--bg-tinted)); }

  /* PRICING */
  .pricing-section { overflow: hidden; background: #fff; padding-top: 32px; padding-bottom: 62px; }
  .pricing-top-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 40px; align-items: center; max-width: 1040px; margin: 0 auto 20px; }
  .pricing-top-grid .section-head { margin: 0; text-align: left; }
  .pricing-top-grid .section-head h2 { margin: 0; max-width: 14ch; font-size: clamp(34px,3.5vw,46px); }
  .pricing-top-grid .section-head .deck { margin: 14px 0 0; font-size: 16px; }
  .pricing-controls { min-width: 0; }
  .pricing-section::before { content: ''; position: absolute; inset: 0; background:
    radial-gradient(circle at 0 25%,rgba(0,119,200,.06),transparent 30%),
    radial-gradient(circle at 100% 25%,rgba(255,138,42,.07),transparent 30%); pointer-events: none; }
  .pricing-section > .container-wide { position: relative; z-index: 1; }
  .pricing-family { display: grid; grid-template-columns: .72fr 1.28fr; gap: 16px; align-items: center; max-width: none !important; margin: 0 0 15px !important; padding: 13px 15px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-tinted); }
  .pricing-family h3 { margin-bottom: 0 !important; font-size: 21px; }
  .pricing-family p { margin: 0; font-size: 13px; line-height: 1.45; }
  .kid-selector { max-width: 650px; margin: 0 auto; padding: 23px; border: 1px solid transparent; border-radius: 12px; text-align: center; }
  .kid-selector-q { display: block; margin-bottom: 10px; color: var(--text); font-size: 17px; font-weight: 650; }
  .kid-btns { display: inline-flex; overflow: hidden; border: 1px solid var(--border-bright); border-radius: 12px; background: var(--bg); }
  .kid-btn { min-width: 72px; height: 46px; border: 0; border-left: 1px solid var(--border); color: var(--text); background: transparent; font-family: 'Outfit',sans-serif; font-size: 16px; font-weight: 650; cursor: pointer; }
  .kid-btn:first-child { border-left: 0; }
  .kid-btn:hover { background: var(--bg-deep); }
  .kid-btn.active { color: var(--navy-deep); background: linear-gradient(135deg,var(--orange),var(--gold)); }
  .kid-note { display: inline-block; margin: 0 0 0 12px; color: var(--text-muted); font-size: 12px; vertical-align: middle; }
  .kid-error { min-height: 21px; margin: 12px 0 0; color: var(--orange-text); font-size: 13px; font-weight: 700; text-align: center; }
  .kid-selector.needs-choice { border-color: var(--orange-text); border-radius: 12px; box-shadow: 0 0 0 4px rgba(233,111,30,.10); }
  .kid-stepper { display: flex; width: fit-content; margin: 12px 0 0; align-items: center; gap: 16px; padding: 6px 10px; border: 1px solid var(--border-bright); border-radius: 11px; background: var(--bg); }
  .kid-stepper button { width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text); cursor: pointer; }
  #kid-step-count { min-width: 105px; text-align: center; font-family: 'Outfit',sans-serif; font-weight: 700; }
  #kid-step-hint { max-width: 460px; min-height: 1.6em; margin: 7px 0 0; text-align: left; color: var(--text-muted); font-size: 13px; }
  .plan-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; align-items: stretch; max-width: var(--max-wide); margin: 22px auto 0; }
  .plan { position: relative; display: flex; flex-direction: column; min-height: 420px; padding: 23px 22px 18px; border: 1px solid var(--border); border-radius: 18px; background: #fff; box-shadow: var(--shadow-card); }
  .plan::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 18px 18px 0 0; background: var(--plan-accent,var(--blue-bright)); }
  .plan-daily { --plan-accent: linear-gradient(90deg,var(--orange),var(--gold)); z-index: 2; transform: translateY(-10px); border-color: rgba(233,111,30,.45); background: linear-gradient(180deg,rgba(255,194,71,.105),#fff 33%); box-shadow: 0 22px 50px rgba(233,111,30,.13); }
  .plan-premium { --plan-accent: var(--orange); }
  .plan-flag { align-self: flex-start; margin-bottom: 10px; color: var(--plan-label,var(--blue-bright)); font-size: 10.5px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
  .plan-daily .plan-flag { align-self: center; margin-top: -43px; padding: 7px 14px; border-radius: 999px; color: var(--navy-deep); background: linear-gradient(135deg,var(--orange),var(--gold)); box-shadow: 0 6px 15px rgba(233,111,30,.24); white-space: nowrap; }
  .plan-premium .plan-flag { color: var(--orange-text); }
  .plan-name { color: var(--text); font-family: 'Outfit',sans-serif; font-size: 25px; font-weight: 650; letter-spacing: -.025em; }
  .plan-cadence { margin-top: 4px; color: var(--text-muted); font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
  .plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; margin-top: 10px; color: var(--navy-deep); font-family: 'Outfit',sans-serif; }
  .plan-price > span:first-child { font-size: 39px; font-weight: 750; letter-spacing: -.05em; line-height: 1; }
  .plan-per { color: var(--text-muted); font-size: 16px; font-weight: 600; }
  .plan-qual { flex-basis: 100%; margin-top: 5px; color: var(--text-muted); font-size: 12px; }
  .plan-formula { min-height: 31px; margin-top: 4px; color: var(--text-soft); font-size: 12.5px; line-height: 1.45; }
  .plan-tagline { margin: 7px 0 9px; padding-top: 10px; border-top: 1px solid var(--border); color: var(--text); font-family: 'Outfit',sans-serif; font-size: 15.5px; font-weight: 600; line-height: 1.35; }
  .plan .tick-list { gap: 5px; }
  .plan .tick-list li { font-size: 12.5px; line-height: 1.32; }
  .plan-best { margin: 9px 0 10px; padding-top: 9px; border-top: 1px solid var(--border); font-size: 12px; line-height: 1.35; }
  .plan .btn { width: 100%; min-height: 46px; padding: 10px 18px; margin-top: auto; }
  .reassure { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 24px; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-tinted); }
  .reassure > div { padding: 16px; border-left: 1px solid var(--border); color: var(--text-soft); text-align: center; font-size: 13px; }
  .reassure > div:first-child { border-left: 0; }
  .reassure a { color: var(--blue-bright); font-weight: 650; }

  /* COMPARISONS */
  .comparison-section { background: var(--bg-tinted); padding-top: 68px; }
  .accordion, .tutoring-details { border: 1px solid var(--border); border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 0 7px 22px rgba(8,36,61,.04); }
  .accordion + .tutoring-details { margin-top: 22px; }
  .accordion summary, .tutoring-details summary { position: relative; display: block; padding: 22px 58px 22px 24px; list-style: none; color: var(--text); font-family: 'Outfit',sans-serif; font-size: 18px; font-weight: 650; cursor: pointer; }
  .accordion summary::-webkit-details-marker, .tutoring-details summary::-webkit-details-marker { display: none; }
  .accordion summary::after, .tutoring-details summary::after { content: '+'; position: absolute; right: 22px; top: 50%; width: 29px; height: 29px; transform: translateY(-50%); display: grid; place-items: center; border-radius: 50%; color: var(--orange-text); background: rgba(233,111,30,.08); transition: transform .2s ease, background .2s ease; }
  .accordion[open] summary::after, .tutoring-details[open] summary::after { transform: translateY(-50%) rotate(45deg); background: linear-gradient(135deg,var(--orange),var(--gold)); color: var(--navy-deep); }
  .accordion-body, .tutoring-body { padding: 0 20px 22px; }
  .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
  table.cmp { width: 100%; border-collapse: collapse; min-width: 700px; background: #fff; }
  table.cmp th, table.cmp td { padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--text-soft); font-size: 14px; text-align: left; vertical-align: middle; }
  table.cmp th { color: var(--text); background: var(--bg-tinted); font-family: 'Outfit',sans-serif; font-weight: 650; }
  table.cmp tr:last-child td { border-bottom: 0; }
  table.cmp .mid { text-align: center; }
  table.cmp td:nth-child(3), table.cmp th:nth-child(3) { background: rgba(255,194,71,.045); }
  .cmp-none { color: #8C959D !important; }

  /* FAQ */
  .faq-section { background: #fff; }
  .faq-item { border-top: 1px solid var(--border); }
  .faq-item:first-of-type { border-top: 0; }
  .faq-item > summary { position: relative; display: block; padding: 22px 58px 22px 4px; list-style: none; color: var(--text); font-family: 'Outfit',sans-serif; font-size: 19px; font-weight: 620; cursor: pointer; }
  .faq-item > summary::-webkit-details-marker { display: none; }
  .faq-item > summary::after { content: '+'; position: absolute; right: 7px; top: 50%; width: 30px; height: 30px; transform: translateY(-50%); display: grid; place-items: center; border-radius: 50%; background: rgba(0,119,200,.07); color: var(--blue-bright); transition: transform .2s ease; }
  .faq-item[open] > summary::after { transform: translateY(-50%) rotate(45deg); background: var(--blue-bright); color: #fff; }
  .faq-item > summary:hover { color: var(--blue-bright); }
  .faq-answer { padding: 0 52px 22px 4px; color: var(--text-soft); font-size: 15.5px; line-height: 1.72; }

  /* FINAL CTA */
  .final-cta { overflow: hidden; padding: 112px 28px 100px; color: var(--inv-text); text-align: center; background:
    radial-gradient(circle at 50% 110%,rgba(255,138,42,.22),transparent 42%),
    radial-gradient(circle at 15% 0,rgba(0,119,200,.16),transparent 35%),
    var(--inv-bg); }
  .final-cta::before { opacity: .55; filter: invert(1); }
  .final-cta .container { position: relative; z-index: 1; max-width: 880px; }
  .final-cta .label { color: var(--gold); }
  .final-cta h2 { max-width: 14ch; margin-inline: auto; color: var(--inv-text); font-size: clamp(42px,5vw,72px); }
  .final-cta p { color: var(--inv-text-soft); }
  .final-cta .btn-row { margin-top: 28px !important; }
  .final-cta .btn-secondary { color: var(--inv-text); border-color: rgba(255,255,255,.32); background: rgba(255,255,255,.04); }
  .final-note { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 25px !important; color: var(--inv-text-soft) !important; font-family: 'Outfit',sans-serif; font-size: 13px; font-weight: 550; }
  .final-note span { padding: 7px 11px; border: 1px solid rgba(255,255,255,.17); border-radius: 999px; background: rgba(255,255,255,.04); }

  footer { padding: 42px 28px 54px; text-align: center; background: var(--navy-deep); border-top: 1px solid rgba(255,255,255,.1); }
  footer p { margin-bottom: 6px; color: rgba(247,244,236,.75); font-size: 13px; }
  .footer-links { margin-top: 14px; color: rgba(247,244,236,.45); font-size: 13px; }
  .footer-links a { margin: 0 8px; color: rgba(247,244,236,.76); text-decoration: none; }
  .footer-links a:hover { color: var(--gold); }

  .mobile-plan-bar { display: none; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 190; padding: 8px 8px 8px 15px; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; background: rgba(6,26,46,.95); box-shadow: 0 16px 40px rgba(0,0,0,.28); backdrop-filter: blur(12px); align-items: center; justify-content: space-between; gap: 12px; transform: translateY(140%); opacity: 0; transition: transform .22s ease, opacity .22s ease; }
  .mobile-plan-bar.visible { transform: translateY(0); opacity: 1; }
  .mobile-price { color: var(--inv-text); font-family: 'Outfit',sans-serif; font-size: 17px; font-weight: 700; }
  .mobile-plan-bar .btn { min-height: 42px; padding: 10px 17px; }

  /* Content is visible by default and remains fully usable without JavaScript. */
  .reveal, .reveal.in-view { opacity: 1; transform: none; }

  @media (max-width: 1050px) {
    .hero-layout { grid-template-columns: 1fr; }
    .hero-inner { max-width: 800px; }
    .hero-visual { max-width: 540px; width: 100%; margin: 0 auto; }
    .problem-layout, .proof-layout, .self-layout, .engagement-body, .founder-layout { grid-template-columns: 1fr; gap: 46px; }
    .problem-copy .section-head, .proof-copy .section-head, .self-copy .section-head, .founder-copy .section-head { text-align: center; margin-inline: auto; }
    .problem-copy .section-head h2, .proof-copy .section-head h2, .self-copy .section-head h2, .founder-copy .section-head h2 { margin-inline: auto; }
    .problem-visual { max-width: 650px; width: 100%; margin: 0 auto; }
    .proof-visual, .self-visual, .engagement-visual { max-width: 680px; width: 100%; margin: 0 auto; }
    .founder-portrait { position: relative; top: auto; min-height: 480px; max-width: 580px; width: 100%; margin: 0 auto; }
    .grid-4 { grid-template-columns: repeat(2,1fr); }
    .family-steps .card:nth-child(2)::after { display: none; }
  }

  @media (max-width: 900px) {
    section { padding: 68px 22px 58px; }
    .nav-inner { padding-inline: 20px; min-height: 64px; }
    .nav-logo img { height: 44px; }
    .nav-section-link { display: none; }
    .nav-links { gap: 16px; }
    .hero { padding: 50px 22px 42px; }
    .hero-proof { padding-inline: 22px; }
    .grid-3 { grid-template-columns: 1fr; }
    .results-grid::before { left: 36px; right: auto; top: 65px; bottom: 65px; width: 3px; height: auto; background: linear-gradient(var(--blue-bright),var(--gold),var(--orange)); }
    .result-card { min-height: auto; padding-left: 92px; padding-top: 29px; }
    .result-symbol { position: absolute; left: 12px; top: 31px; margin: 0; }
    .results-closer { grid-template-columns: 1fr; }
    .results-closer p:last-child { padding: 19px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.2); }
    .feature-rail { grid-template-columns: repeat(2,1fr); }
    .plan-grid { grid-template-columns: 1fr; max-width: 640px; gap: 18px; }
    .plan-daily { order: -1; transform: none; margin-top: 18px; }
    .plan-daily .plan-flag { margin-top: -48px; }
    .plan { min-height: 0; }
    .reassure { grid-template-columns: repeat(2,1fr); }
    .reassure > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--border); }
    .reassure > div:nth-child(4) { border-top: 1px solid var(--border); }
    .pricing-top-grid { grid-template-columns: 1fr; gap: 24px; }
    .pricing-top-grid .section-head { text-align: center; }
    .pricing-top-grid .section-head h2, .pricing-top-grid .section-head .deck { margin-left: auto; margin-right: auto; }
    .pricing-family { grid-template-columns: 1fr; text-align: center; }
    .kid-selector { text-align: center; margin-inline: auto; }
    .kid-note { display: block; margin: 7px 0 0; }
    .kid-stepper { margin-inline: auto; }
    #kid-step-hint { margin-inline: auto; text-align: center; }
  }

  @media (max-width: 720px) {
    body { font-size: 16px; }
    h1 { font-size: clamp(40px,12vw,56px); }
    h2 { font-size: clamp(31px,9vw,44px); }
    .site-nav .nav-login { display: none; }
    .site-nav .btn { padding: 9px 14px; }
    .hero { padding-top: 40px; }
    .stat-grid { grid-template-columns: repeat(2,1fr); }
    .stat-cell { min-height: 94px; }
    .stat-cell:nth-child(2) { border-right: 0; }
    .stat-cell:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
    .testimonial { grid-template-columns: 1fr; }
    .testimonial-attr { border-left: 0; border-top: 1px solid var(--border); }
    .testimonial-quote { padding: 24px 22px; }
    .grid-2, .grid-4, .loop-strip { grid-template-columns: 1fr; }
    .solution-section .section-head h2.solution-headline { grid-template-columns: 1fr; text-align: left; font-size: clamp(31px,7.8vw,42px); }
    .solution-headline span { padding-inline: 18px; }
    .solution-card { min-height: auto; }
    .science-principles { border-radius: 14px; }
    .loop-strip::before { left: 28px; right: auto; top: 12%; bottom: 12%; width: 2px; height: auto; background: linear-gradient(var(--blue-bright),var(--gold),var(--orange)); }
    .feature-rail { grid-template-columns: 1fr; }
    .feature-rail .card { min-height: 0; }
    .problem-visual { min-height: 390px; }
    .grade-card { width: 180px; height: 230px; }
    .grade-letter { font-size: 76px; }
    .skill-map { width: 270px; }
    .proof-visual, .self-visual, .engagement-visual { min-height: 470px; }
    .email-mock { width: 75%; }
    .dashboard-mock { width: 72%; }
    .attempt-card { width: 210px; height: 285px; }
    .attempt-hint { width: 170px; left: 31%; }
    .trail-card-stack { transform: scale(.86); transform-origin: left top; }
    .mountain-progress { width: 270px; height: 230px; }
    .family-scene { height: 300px; }
    .family-steps .card::after { display: none !important; }
    .reassure { grid-template-columns: 1fr; }
    .reassure > div { border-left: 0; border-top: 1px solid var(--border); }
    .reassure > div:first-child { border-top: 0; }
    .mobile-plan-bar { display: flex; }
    .final-cta { padding: 90px 22px 84px; }
  }

  @media (max-width: 480px) {
    section { padding-inline: 18px; }
    .nav-inner { padding-inline: 14px; }
    .nav-logo img { height: 40px; }
    .site-nav .btn { font-size: 13px; min-height: 40px; }
    .hero { padding-inline: 18px; }
    .hero .btn-row { display: grid; grid-template-columns: 1fr; }
    .hero .btn { width: 100%; }
    .hero-visual { margin-top: 8px; }
    .hero-proof { padding-inline: 18px; }
    .stat-value { font-size: 26px; }
    .result-card { padding-left: 77px; }
    .result-figure { font-size: 60px; }
    .skill-map { width: 235px; right: 0; }
    .grade-card { left: 0; }
    .algebra-block { width: 92px; height: 72px; font-size: 25px; }
    .email-mock { width: 82%; }
    .dashboard-mock { width: 80%; }
    .attempt-card.before { left: -3%; }
    .attempt-card.after { right: -3%; }
    .attempt-hint { left: 27%; }
    .trail-card-stack { left: -4%; transform: scale(.78); }
    .mountain-progress { right: -4%; bottom: 0; transform: scale(.88); transform-origin: right bottom; }
    .kid-btn { min-width: 61px; }
    .plan { padding-inline: 22px; }
    .plan-price > span:first-child { font-size: 43px; }
    .faq-item > summary { font-size: 17px; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    .reveal { opacity: 1; transform: none; }
  }

/* V1.0.1 refinement patch */
.hero .hero-title span,
.hero-claim {
  background: linear-gradient(120deg, var(--orange) 0%, var(--orange-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero-loop { gap: 10px; }
.hero-loop li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding-left: 0;
  color: var(--text-soft);
}
.hero-loop li::before {
  content: '';
  position: relative;
  left: auto;
  top: .36em;
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 5px rgba(8,36,61,.08);
}
.hero-loop li:nth-child(2)::before,
.hero-loop li:nth-child(3)::before,
.hero-loop li:nth-child(4)::before {
  background: currentColor;
  box-shadow: 0 0 0 5px rgba(8,36,61,.08);
}
.problem-visual, .solution-visual, .self-visual, .family-scene,
.proof-pin { display: none !important; }
.result-card, .result-figure, .result-key, .result-sub { text-align: center; }
.result-card { padding-left: 34px; padding-right: 34px; }
.problem-layout, .self-layout { grid-template-columns: 1fr !important; }
.problem-copy .section-head, .self-copy .section-head {
  text-align: center;
  margin-inline: auto;
}
.problem-copy .section-head h2, .self-copy .section-head h2 { margin-inline: auto; }
.solution-card {
  min-height: auto !important;
  padding-top: 32px !important;
}
.solution-card .card-label { margin-bottom: 10px; }
.engine-section::before {
  z-index: 0;
  opacity: .18 !important;
  filter: none;
}
.engine-section > .container-wide { position: relative; z-index: 1; }
.engine-track, .loop-strip .card, .engine-section .dark-bar, .engine-section .quiet-bar {
  position: relative;
  z-index: 2;
}
.engine-track {
  background: rgba(13,45,72,.92);
  border-color: rgba(142,200,195,.22);
}
.loop-strip .card { background: #F9FBFC; }
.loop-strip .card h3, .engine-section .quiet-bar { color: var(--text); }
.loop-strip p { color: var(--text-soft); }
.engine-section .quiet-bar {
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(8,36,61,.08);
}
.engine-section .quiet-bar .label { color: var(--orange-deep); }
.step-card {
  min-height: 438px;
  padding-top: 214px;
}
.step-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(180deg, #fff, var(--bg-tinted));
}
.step-card:nth-child(1) .step-visual { background: linear-gradient(180deg,#FFFFFF,#F7FAFC); }
.step-card:nth-child(2) .step-visual { background: linear-gradient(180deg,#FFF8EC,#F6F2E8); }
.step-card:nth-child(3) .step-visual { background: linear-gradient(180deg,#EAF5FA,#F6F2E8); }
.email-preview, .worksheet-preview, .phone-upload-preview {
  width: 100%;
  max-width: 240px;
  position: relative;
}
.email-preview {
  background: #fff;
  border: 1px solid #D6E1E8;
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.email-preview .toolbar {
  height: 36px;
  background: #F2F6F9;
  border-bottom: 1px solid #E1E8ED;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
}
.email-preview .toolbar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #C7D2DB;
  display: block;
}
.email-preview .subject {
  height: 12px;
  width: 62%;
  background: var(--navy-rich);
  border-radius: 999px;
  margin: 18px 16px 14px;
}
.email-preview .line {
  height: 7px;
  background: #B7C3CB;
  border-radius: 999px;
  margin: 0 16px 10px;
}
.email-preview .line.short { width: 72%; }
.email-preview .chip {
  display: inline-block;
  margin: 10px 16px 18px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255,138,42,.14);
  color: var(--orange-deep);
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
}
.worksheet-preview {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.worksheet-sheet {
  width: 165px;
  height: 128px;
  background: #fff;
  border: 1px solid rgba(8,36,61,.14);
  border-radius: 6px;
  box-shadow: var(--shadow-card);
  transform: rotate(-4deg);
  padding: 16px;
}
.worksheet-sheet .top {
  height: 8px;
  width: 68%;
  background: var(--navy-rich);
  border-radius: 999px;
  margin-bottom: 12px;
}
.worksheet-sheet .line {
  height: 5px;
  background: #C5D0D7;
  border-radius: 999px;
  margin-bottom: 8px;
}
.worksheet-sheet .row {
  display: grid;
  grid-template-columns: 1fr 32px;
  gap: 8px;
  margin-top: 12px;
}
.worksheet-sheet .box {
  height: 28px;
  border: 1px solid #D1D9DE;
  border-radius: 6px;
}
.worksheet-pencil {
  position: absolute;
  right: 8px;
  bottom: 18px;
  width: 118px;
  height: 12px;
  border-radius: 7px;
  background: #FFAA32;
  transform: rotate(-28deg);
  box-shadow: 0 4px 12px rgba(8,36,61,.12);
}
.worksheet-pencil::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 12px;
  border-radius: 7px 0 0 7px;
  background: #E96F1E;
}
.worksheet-pencil::after {
  content: '';
  position: absolute;
  right: -18px;
  top: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 18px solid #E6D0AD;
}
.phone-upload-preview {
  width: 100%;
  max-width: 260px;
  display: flex;
  justify-content: center;
}
.smartphone {
  width: 118px;
  height: 236px;
  border-radius: 28px;
  background: #08243D;
  padding: 12px;
  box-shadow: 0 16px 30px rgba(8,36,61,.18);
  position: relative;
}
.smartphone::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 6px;
  border-radius: 999px;
  background: #223F5B;
}
.smartphone-screen {
  background: #fff;
  height: 100%;
  border-radius: 20px;
  padding: 18px 14px;
}
.capture-frame {
  height: 118px;
  border: 3px solid var(--blue-bright);
  border-radius: 14px;
  position: relative;
}
.capture-frame::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px dashed rgba(8,36,61,.22);
  border-radius: 9px;
}
.capture-line {
  height: 6px;
  background: #B9C4CC;
  border-radius: 999px;
  margin-top: 12px;
}
.capture-line.short { width: 72%; }
.capture-btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--orange);
  margin: 16px auto 0;
}
.mascot-medallion {
  background: #fff;
  overflow: hidden;
}
.mascot-medallion img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.plan-daily {
  transform: none !important;
  box-shadow: var(--shadow-card);
  border-color: var(--border);
  background: #fff;
  z-index: 1;
}
.plan-daily .plan-flag {
  align-self: flex-start;
  margin-top: 0 !important;
  padding: 0;
  border-radius: 0;
  color: var(--text-muted);
  background: none;
  box-shadow: none;
}
.plan-premium {
  z-index: 2;
  transform: translateY(-10px);
  border-color: rgba(233,111,30,.45);
  background: linear-gradient(180deg, rgba(255,194,71,.105), #fff 33%);
  box-shadow: 0 22px 50px rgba(233,111,30,.13);
}
.plan-premium .plan-flag {
  align-self: center;
  margin-top: -43px;
  padding: 7px 14px;
  border-radius: 999px;
  color: var(--navy-deep);
  background: linear-gradient(135deg, var(--orange), var(--gold));
  box-shadow: 0 6px 15px rgba(233,111,30,.24);
  white-space: nowrap;
}
.plan-premium .btn {
  color: var(--navy-deep);
  background: linear-gradient(135deg, var(--orange), var(--gold));
  border-color: transparent;
  box-shadow: 0 9px 22px rgba(255,138,42,.20);
}
.plan-premium .btn:hover { box-shadow: 0 13px 30px rgba(255,138,42,.30); }
.accordion, .tutoring-details, .premium-difference {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 7px 22px rgba(8,36,61,.04);
}
.premium-difference { margin-top: 22px; }
.accordion summary, .tutoring-details summary, .premium-difference summary {
  position: relative;
  display: block;
  padding: 22px 92px 22px 24px;
  list-style: none;
  color: var(--text);
  font-family: 'Outfit',sans-serif;
  font-size: 18px;
  font-weight: 650;
  cursor: pointer;
}
.accordion summary::-webkit-details-marker,
.tutoring-details summary::-webkit-details-marker,
.premium-difference summary::-webkit-details-marker { display: none; }
.accordion summary::before, .tutoring-details summary::before, .premium-difference summary::before {
  content: 'Expand';
  position: absolute;
  right: 72px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--orange-deep);
  font-family: 'Outfit', sans-serif;
  font-weight: 650;
}
.accordion[open] summary::before, .tutoring-details[open] summary::before, .premium-difference[open] summary::before {
  content: 'Collapse';
}
.accordion summary::after, .tutoring-details summary::after, .premium-difference summary::after {
  content: '+';
  position: absolute;
  right: 22px;
  top: 50%;
  width: 38px;
  height: 38px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(233,111,30,.2);
  box-shadow: 0 4px 12px rgba(8,36,61,.06);
  color: var(--orange-text);
  background: rgba(233,111,30,.08);
  font-size: 24px;
  font-weight: 700;
  transition: transform .2s ease, background .2s ease;
}
.accordion[open] summary::after, .tutoring-details[open] summary::after, .premium-difference[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
  background: linear-gradient(135deg,var(--orange),var(--gold));
  color: var(--navy-deep);
}
.premium-body { padding: 0 20px 24px; }
.premium-story-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.premium-story-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  background: linear-gradient(180deg,#fff,#fbfaf6);
}
.premium-story-card .step-num { margin-bottom: 10px; }
.premium-story-note {
  margin-top: 18px;
  padding: 18px 20px;
  border-left: 3px solid var(--orange);
  background: #FFF7EB;
  border-radius: 0 12px 12px 0;
}
@media (max-width: 960px) {
  .plan-premium { order: -1; transform: none; margin-top: 18px; }
  .plan-premium .plan-flag { margin-top: -48px; }
  .accordion summary::before, .tutoring-details summary::before, .premium-difference summary::before { display: none; }
  .premium-story-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .result-card { padding-left: 28px; padding-right: 28px; }
}



  /* V1.0.2 refinement patch ------------------------------------------------ */
  .btn-arrow::after {
    content: "→";
    margin-left: 6px;
    transition: transform .18s ease;
  }
  .btn-arrow:hover::after { transform: translateX(3px); }

  /* Hero claim: same hierarchy, distinct brand signal from the orange headline. */
  .hero-claim {
    background: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: var(--blue-bright) !important;
    color: var(--blue-bright) !important;
  }

  /* Results inherit the former Problem chapter's differentiated surface. */
  .results-section { background: var(--bg-tinted); }
  .results-grid::before { display: none; }
  .result-symbol { display: none !important; }
  .result-card {
    min-height: 360px;
    padding: 34px;
    text-align: center;
    overflow: hidden;
  }
  .result-card::after { opacity: .52; }
  .result-figure, .result-key, .result-sub, .result-card p { text-align: center; }
  .results-closer { text-align: center; }

  /* The Child Outcome: restored to the 09 Aug dark editorial treatment. */
  .self-section {
    background: linear-gradient(180deg, var(--inv-bg) 0%, var(--navy-deep) 100%);
    color: var(--inv-text);
    text-align: center;
    padding-top: 66px;
    padding-bottom: 82px;
  }
  .self-section::before {
    left: 50%;
    right: auto;
    top: -28%;
    width: 700px;
    height: 470px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(255, 138, 42, .12) 0%, transparent 62%);
  }
  .self-layout {
    display: block !important;
    max-width: 980px;
    margin: 0 auto;
  }
  .self-copy { max-width: 900px; margin: 0 auto; }
  .self-copy .section-head {
    max-width: none;
    margin: 0 auto 30px;
    text-align: center;
  }
  .self-copy .section-head h2,
  .self-headline {
    max-width: none !important;
    margin: 0 auto !important;
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1.2;
    letter-spacing: -.03em;
  }
  .self-line-one {
    display: block;
    white-space: nowrap;
    color: var(--inv-text);
  }
  .self-line-two {
    display: block;
    white-space: nowrap;
    margin-top: 4px;
    background: linear-gradient(120deg, var(--gold) 0%, var(--orange) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--gold);
    font-weight: 700;
  }
  .self-section .label { color: var(--gold); text-align: center; }
  .self-section p {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    color: var(--inv-text-soft);
    font-size: 18px;
    line-height: 1.72;
    text-align: center;
  }
  .self-pull {
    margin: 34px auto !important;
    padding: 21px 24px;
    border-top: 1px solid rgba(255,194,71,.26);
    border-bottom: 1px solid rgba(255,194,71,.26);
    color: var(--gold);
    font-family: 'Outfit', sans-serif;
    font-size: clamp(21px, 2.8vw, 30px);
    font-weight: 500;
    font-style: italic;
    line-height: 1.4;
    text-align: center;
  }
  .self-section .dark-bar {
    max-width: 860px;
    margin: 30px auto 0 !important;
    padding: 24px 28px;
    background: rgba(255,255,255,.065);
    border: 1px solid rgba(255,194,71,.18);
    box-shadow: none;
    color: var(--inv-text-soft);
    text-align: center;
  }

  /* Reversible Summer Tuesday narrative inside How It Works. */
  .summer-details {
    margin: 34px auto 0;
    border: 1px solid var(--border-bright);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(8,36,61,.055);
    overflow: hidden;
  }
  .summer-details > summary {
    position: relative;
    display: block;
    padding: 23px 78px 23px 24px;
    list-style: none;
    color: var(--text);
    font-family: 'Outfit', sans-serif;
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 650;
    letter-spacing: -.018em;
    text-align: center;
    cursor: pointer;
    user-select: none;
  }
  .summer-details > summary::-webkit-details-marker { display: none; }
  .summer-details > summary::marker { display: none; }
  .summer-details > summary::before {
    content: "Read the full routine";
    position: absolute;
    right: 70px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--orange-deep);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
  }
  .summer-details[open] > summary::before { content: "Hide the routine"; }
  .summer-details > summary::after {
    content: "+";
    position: absolute;
    right: 22px;
    top: 50%;
    width: 38px;
    height: 38px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    border: 1px solid rgba(233,111,30,.2);
    border-radius: 50%;
    background: rgba(233,111,30,.08);
    color: var(--orange-deep);
    box-shadow: 0 4px 12px rgba(8,36,61,.06);
    font-size: 24px;
    font-weight: 700;
    transition: transform .2s ease, background .2s ease;
  }
  .summer-details[open] > summary::after {
    transform: translateY(-50%) rotate(45deg);
    background: linear-gradient(135deg,var(--orange),var(--gold));
    color: var(--navy-deep);
  }
  .summer-content {
    max-width: 840px;
    margin: 0 auto;
    padding: 0 34px 36px;
  }
  .tuesday-block {
    padding: 26px 0;
    border-top: 1px solid var(--border);
  }
  .tuesday-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
    color: var(--orange-deep);
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .18em;
    text-align: center;
    text-transform: uppercase;
  }
  .tuesday-label::before {
    content: "→";
    font-size: 16px;
    line-height: 1;
  }
  .tuesday-statement {
    margin-bottom: 12px;
    color: var(--text);
    font-family: 'Outfit', sans-serif;
    font-size: clamp(20px, 2vw, 25px);
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -.018em;
    text-align: center;
  }
  .tuesday-body p {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    color: var(--text-soft);
    font-size: 16px;
    line-height: 1.7;
    text-align: left;
  }
  .tuesday-elevation { color: var(--orange-deep); }
  .summer-closer {
    margin-top: 24px;
    padding-top: 30px;
    border-top: 1px solid var(--border);
    text-align: center;
  }
  .summer-closer-italic {
    margin-bottom: 18px;
    color: var(--text-muted);
    font-style: italic;
  }
  .summer-closer-bold {
    color: var(--text);
    font-family: 'Outfit', sans-serif;
    font-size: clamp(23px, 3vw, 34px);
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -.022em;
  }

  /* Centering pass: centered where the content is comparative, sequential, or proof-led. */
  .steps-grid .step-card,
  .feature-rail .card,
  .engagement-copy .card,
  .family-steps .card,
  .alternatives-section .alt-card,
  .loop-strip .card,
  .premium-story-card { text-align: center; }

  .solution-card > .card-label,
  .solution-card > h3,
  .solution-card > p,
  .engine-track > .card-label { text-align: center; }

  .feature-rail .card {
    padding: 64px 24px 25px;
  }
  .feature-rail .card::before {
    left: 50%;
    top: 22px;
    transform: translateX(-50%);
  }
  .feature-rail .card::after {
    left: 50%;
    top: 22px;
    transform: translateX(-50%);
  }

  .plan-name,
  .plan-cadence,
  .plan-formula,
  .plan-tagline,
  .plan-best { text-align: center; }
  .plan-price { justify-content: center; text-align: center; }
  .plan .plan-flag { align-self: center; text-align: center; }
  .plan .tick-list { text-align: left; }

  .family-steps .step-num,
  .steps-grid .step-num,
  .loop-strip .step-num,
  .premium-story-card .step-num { text-align: center; }

  @media (max-width: 960px) {
    .self-copy .section-head h2,
    .self-headline { font-size: clamp(28px, 5.5vw, 46px); }
    .summer-details > summary::before { display: none; }
  }
  @media (max-width: 720px) {
    .self-section { padding-top: 54px; padding-bottom: 66px; }
    .self-line-one, .self-line-two { white-space: normal; }
    .summer-details > summary { padding: 20px 66px 20px 18px; }
    .summer-content { padding: 0 20px 28px; }
    .tuesday-body p { text-align: left; }
    .results-closer { grid-template-columns: 1fr; }
    .results-closer p:last-child { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.20); padding-top: 18px; }
  }


/* ====================================================================
     PREMIUM STUCK-MOMENT STORY -----------------------------------------
     ==================================================================== */
  .premium-story {
    position: relative;
    max-width: var(--max-wide);
    margin: 0 auto;
    background:
      radial-gradient(ellipse 700px 420px at 78% 88%, rgba(255, 138, 42, 0.10) 0%, transparent 62%),
      linear-gradient(180deg, #FDF7EC 0%, #FBF4E6 100%);
    border: 1px solid rgba(233, 111, 30, 0.22);
    border-radius: 20px;
    padding: 72px 64px;
    overflow: hidden;
  }
  .premium-story::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='xMidYMid slice'%3E%3Cpath d='M40 360 L220 300 L340 330 L360 250 L540 200 L560 130 L740 150 L900 70' fill='none' stroke='%23E96F1E' stroke-width='2' stroke-dasharray='5 9'/%3E%3C/svg%3E") center / cover no-repeat;
    opacity: 0.04;
    pointer-events: none;
  }
  .premium-story > * { position: relative; z-index: 1; }

  .premium-story-head { max-width: 800px; margin: 0 auto 52px; text-align: center; }
  .story-headline {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--text);
    margin-bottom: 22px;
  }
  .story-headline .warm-underline {
    background-image: linear-gradient(120deg, var(--orange), var(--gold));
    background-repeat: no-repeat;
    background-position: 0 88%;
    background-size: 100% 0.18em;
  }
  .story-sub {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: var(--text-soft);
    margin-bottom: 14px;
  }
  .story-sub strong { color: var(--orange-deep); font-weight: 600; }
  .story-body {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: var(--text-muted);
    max-width: 720px;
    margin: 0 auto;
  }

  .story-panels {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-top: 12px;
  }
  /* Dashed switchback route linking the three narrative panels. */
  .story-route {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
  }
  .story-panel {
    position: relative;
    z-index: 1;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px 24px 26px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 22px rgba(8, 36, 61, 0.05);
  }
  .story-stage {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin-bottom: 14px;
  }
  .story-stage-num {
    width: 26px; height: 26px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    color: #fff;
  }
  .story-panel-1 .story-stage-num { background: var(--blue-bright); }
  .story-panel-2 .story-stage-num { background: var(--blue-cyan); }
  .story-panel-3 .story-stage-num { background: var(--orange); color: var(--navy-deep); }
  .story-panel h3 {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: -0.015em;
    color: var(--text);
    margin-bottom: 16px;
  }
  .story-visual {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    min-height: 172px;
  }
  .story-visual svg { width: 100%; height: auto; display: block; }
  .story-caption {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
  }

  /* --- Two Premium system cards --- */
  .premium-systems {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    margin-top: 44px;
  }
  .system-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 13px;
    padding: 26px;
  }
  .system-illus {
    width: 100%;
    height: 72px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .system-illus svg { height: 100%; width: auto; }
  .system-card h4 {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.012em;
    color: var(--text);
    margin-bottom: 8px;
  }
  .system-card p {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
  }

  /* --- Premium price closer --- */
  .premium-closer {
    margin-top: 44px;
    background: rgba(255, 170, 50, 0.09);
    border-top: 2px solid rgba(233, 111, 30, 0.30);
    border-radius: 14px;
    padding: 34px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
  }
  .premium-closer-copy {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    line-height: 1.4;
    color: var(--text);
    font-weight: 500;
    max-width: 640px;
  }
  .premium-closer-copy .closer-lead {
    font-weight: 700;
    color: var(--orange-deep);
  }
  .premium-closer .btn { flex: none; }

  

  /* V1.0.3 refinement patch */
  .results-volume {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 4vw, 46px);
    margin-top: 16px;
    padding: 28px clamp(26px, 4vw, 46px);
    overflow: hidden;
    border: 1px solid var(--border-bright);
    border-radius: 18px;
    background: radial-gradient(circle at 92% 12%, rgba(255, 194, 71, .17), transparent 35%), linear-gradient(135deg, #FFFFFF 0%, #FBF9F2 100%);
    box-shadow: 0 14px 34px rgba(8, 36, 61, .075);
  }
  .results-volume::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--blue-bright), var(--blue-icy) 34%, var(--gold) 68%, var(--orange));
  }
  .results-volume::after {
    content: '';
    position: absolute;
    right: -35px;
    bottom: -54px;
    width: 250px;
    height: 160px;
    opacity: .07;
    transform: rotate(-8deg);
    background: repeating-linear-gradient(180deg, var(--navy-rich) 0 2px, transparent 2px 22px);
    pointer-events: none;
  }
  .results-volume-number {
    position: relative;
    z-index: 1;
    color: var(--navy-deep);
    font-family: 'Outfit', sans-serif;
    font-size: clamp(56px, 7vw, 82px);
    font-weight: 750;
    letter-spacing: -.055em;
    line-height: .95;
    white-space: nowrap;
  }
  .results-volume-number span { color: var(--orange-deep); }
  .results-volume-copy { position: relative; z-index: 1; padding-left: clamp(24px, 4vw, 44px); border-left: 1px solid var(--border-bright); }
  .results-volume-kicker { margin-bottom: 5px; color: var(--orange-deep); font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
  .results-volume-title { color: var(--text); font-family: 'Outfit', sans-serif; font-size: clamp(20px, 2.4vw, 28px); font-weight: 650; letter-spacing: -.018em; line-height: 1.18; }
  .results-volume-note { margin-top: 7px; color: var(--teal-text); font-size: 16px; font-weight: 600; }

  .engine-track .tick-list li::after {
    content: '✓';
    position: absolute;
    left: 15px;
    top: 25px;
    z-index: 3;
    color: var(--gold);
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
  }
  .engine-track.advance .tick-list li::after { color: var(--blue-icy); }

  .phone-upload-preview { max-height: 170px; align-items: center; }
  .smartphone { width: 82px; height: 164px; padding: 8px; border-radius: 20px; }
  .smartphone::before { top: 5px; width: 34px; height: 4px; }
  .smartphone-screen { padding: 12px 9px; border-radius: 14px; }
  .capture-frame { height: 77px; border-width: 2px; border-radius: 10px; }
  .capture-frame::before { inset: 7px; border-radius: 6px; }
  .capture-line { height: 4px; margin-top: 8px; }
  .capture-btn { width: 12px; height: 12px; margin-top: 10px; }

  .mascot-medallion { width: 250px; height: 330px; margin: 18px auto 0; border: 0; border-radius: 14px; background: #fff; }
  .mascot-medallion img { width: 100%; height: 100%; object-fit: contain; }
  .trail-card.front .card-bars { display: none; }
  .engagement-section .mountain-progress { width: 250px; height: 220px; right: -2%; bottom: 1%; }

  .alt-visual > svg:not(.alt-x) { position: relative; z-index: 1; }
  .alt-visual .alt-x {
    position: absolute;
    z-index: 4;
    width: 140px;
    height: 140px;
    transform: rotate(-3deg);
    stroke: #C8392A !important;
    stroke-width: 6 !important;
    stroke-linecap: round !important;
    fill: none !important;
    filter: drop-shadow(0 2px 2px rgba(200, 57, 42, .10));
  }

  .plan-premium .plan-flag { position: relative; z-index: 4; box-shadow: 0 0 0 9px #fff, 0 6px 15px rgba(233, 111, 30, .24); }

  .premium-difference .premium-body { padding: 22px; }
  .premium-difference .premium-story { max-width: none; }

  @media (max-width: 1059px) {
    .premium-difference .premium-story { padding: 56px 40px; }
  }
  @media (max-width: 719px) {
    .results-volume { grid-template-columns: 1fr; gap: 16px; text-align: center; }
    .results-volume-copy { padding: 17px 0 0; border-left: 0; border-top: 1px solid var(--border-bright); }
    /* Room for a longer live total: on the narrowest phones a 7-digit number is
       wider than its cell. The cell may reach into the box's side padding (at
       least 26px here), stopping 4px short of the clipping edge. Centered text
       that already fits renders exactly as before. */
    .results-volume-number { margin-inline: -22px; }
    .premium-difference .premium-body { padding: 12px; }
    .premium-difference .premium-story { padding: 42px 22px; border-radius: 16px; }
    .story-panels { grid-template-columns: 1fr; gap: 18px; padding-left: 26px; }
    .story-route { display: none; }
    .story-panels::before {
      content: '';
      position: absolute;
      left: 7px;
      top: 10px;
      bottom: 10px;
      width: 3px;
      border-radius: 3px;
      background: linear-gradient(180deg, var(--blue-bright) 0%, var(--blue-cyan) 42%, var(--gold) 72%, var(--orange) 100%);
      -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 7px, transparent 7px 15px);
      mask-image: repeating-linear-gradient(180deg, #000 0 7px, transparent 7px 15px);
      opacity: .75;
    }
    .story-panel { position: relative; }
    .story-panel::before { content: ''; position: absolute; left: -23px; top: 26px; width: 11px; height: 11px; border: 2px solid var(--bg-elevated); border-radius: 50%; background: var(--blue-bright); }
    .story-panel-2::before { background: var(--blue-cyan); }
    .story-panel-3::before { background: var(--orange); }
    .premium-systems { grid-template-columns: 1fr; gap: 16px; }
    .premium-closer { flex-direction: column; align-items: flex-start; gap: 18px; padding: 28px; }
    .premium-closer .btn { width: 100%; }
    .mascot-medallion { width: 240px; height: 320px; }
    .engagement-section .mountain-progress { width: 210px; height: 185px; right: -2%; bottom: 0; }
  }



  /* V1.0.4 refinement patch ------------------------------------------------ */
  /* B — keep the emoji upright inside the authentic italic quote. */
  .testimonial-quote .emoji { font-style: normal; display: inline-block; }

  /* C — the cohort-wide closer is one centered proof statement. */
  .results-closer {
    display: block;
    text-align: center;
  }
  .results-closer p,
  .results-closer p:last-child {
    max-width: 980px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    text-align: center;
  }

  /* D — paired AI / Paper headline with a disciplined double divider. */
  .solution-section .section-head h2.solution-headline {
    position: relative;
    gap: 58px;
    align-items: center;
    text-align: center;
  }
  .solution-headline::before,
  .solution-headline::after {
    content: '';
    position: absolute;
    top: 8%;
    bottom: 8%;
    width: 3px;
    border-radius: 999px;
    pointer-events: none;
  }
  .solution-headline::before { left: calc(50% - 5px); background: var(--blue-bright); }
  .solution-headline::after { left: calc(50% + 5px); background: linear-gradient(180deg, var(--orange), var(--orange-deep)); }
  .solution-headline .solution-ai-head,
  .solution-headline .solution-paper-head {
    border-left: 0 !important;
    padding: 10px 30px 12px;
    text-align: center;
  }
  .solution-headline .solution-ai-head { color: var(--text); }
  .solution-headline .solution-paper-head { color: var(--text); }
  .solution-key { font-weight: 780; }
  .solution-key-ai { color: var(--blue-bright); }
  .solution-key-paper { color: var(--orange-deep); }

  /* COF-A: locked AI/Paper refinements. */
  .solution-card .card-label { font-size: 15px; }
  .solution-card.ai-card .card-label { color: var(--blue-bright); }
  @media (max-width: 480px) { .solution-card .card-label { font-size: 14px; } }
  .solution-card .tick-list {
    width: min(100%, 430px);
    margin: 20px auto 0;
    text-align: left;
  }
  .solution-card .tick-list li { padding-left: 28px; }
  .solution-card.paper-card .tick-list li::before { color: var(--orange-text); }

  /* E — make the final category synthesis a deliberate second beat. */
  .solution-synthesis span { display: block; }
  .solution-synthesis .solution-combine {
    margin-top: 8px;
    color: var(--gold);
    font-family: 'Outfit', sans-serif;
    font-size: 19px;
    font-weight: 650;
  }

  /* F/H — better-centered checks and reversible Engine tracks. */
  .engine-track {
    padding: 0;
    overflow: hidden;
  }
  .engine-track > summary {
    position: relative;
    display: block;
    min-height: 92px;
    padding: 29px 76px 27px 30px;
    list-style: none;
    cursor: pointer;
    user-select: none;
  }
  .engine-track > summary::-webkit-details-marker { display: none; }
  .engine-track > summary::marker { display: none; }
  .engine-track > summary::after {
    content: '+';
    position: absolute;
    top: 50%;
    right: 26px;
    width: 38px;
    height: 38px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: var(--gold);
    font-size: 24px;
    font-weight: 750;
    line-height: 1;
    transition: transform .2s ease, background .2s ease;
  }
  .engine-track.advance > summary::after { color: var(--blue-icy); }
  .engine-track[open] > summary {
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .engine-track[open] > summary::after {
    transform: translateY(-50%) rotate(45deg);
    background: rgba(255,255,255,.15);
  }
  .engine-track > summary .card-label {
    margin: 0;
    color: var(--gold);
    font-size: 13px;
    line-height: 1.45;
    text-align: left;
  }
  .engine-track.advance > summary .card-label { color: var(--blue-icy); }
  .engine-track-body { padding: 0 32px 32px; }
  .engine-track .tick-list li { padding-left: 66px; }
  .engine-track .tick-list li::before {
    left: 10px;
    top: 26px;
  }
  .engine-track .tick-list li::after {
    left: 18px;
    top: 34px;
  }
  .engine-track .tick-list li strong {
    display: block;
    margin-bottom: 5px;
    color: var(--inv-text);
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: underline;
    text-decoration-color: var(--gold);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }
  .engine-track.advance .tick-list li strong { text-decoration-color: var(--blue-icy); }
  .engine-track .tick-list li > span { display: block; }

  /* G — section eyebrows carry slightly more presence. */
  .section-head > .label,
  .self-section .label,
  .final-cta .label { font-size: 13px; }

  @media (max-width: 720px) {
    .solution-section .section-head h2.solution-headline {
      gap: 28px;
      padding: 0 0 6px;
    }
    .solution-headline::before,
    .solution-headline::after {
      top: calc(50% - 5px);
      bottom: auto;
      width: 42%;
      height: 3px;
    }
    .solution-headline::before { left: 4%; }
    .solution-headline::after { left: auto; right: 4%; }
    .solution-headline .solution-ai-head,
    .solution-headline .solution-paper-head { padding: 8px 10px; }
    .engine-track > summary { padding: 24px 68px 23px 24px; }
    .engine-track-body { padding: 0 22px 25px; }
  }



  /* V1.0.5 convergence patch ----------------------------------------------- */
  /* The former How It Works artifacts now orient the reader inside Solution. */
  .solution-routine {
    margin: 8px 0 54px;
    padding-bottom: 48px;
    border-bottom: 1px solid var(--border);
  }
  .solution-steps {
    margin-top: 10px;
    gap: 18px;
  }
  .solution-steps .step-card {
    min-height: 405px;
    padding-top: 205px;
  }
  .solution-routine .summer-details { margin-top: 28px; }
  .solution-mediums { margin-top: 0; }
  .solution-mediums .solution-card { min-height: auto; }

  /* The parent-facing proof now closes the Engine instead of occupying a full chapter. */
  .engine-parent-proof {
    position: relative;
    z-index: 2;
    max-width: 880px;
    margin: 26px auto 0;
    padding: 28px 32px;
    border: 1px solid rgba(142,200,195,.34);
    border-radius: 16px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 14px 36px rgba(0,0,0,.16);
    text-align: center;
  }
  .engine-parent-proof .card-label { color: var(--blue-bright); }
  .engine-parent-proof h3 { color: var(--text); margin-bottom: 12px; }
  .engine-parent-proof p { max-width: 760px; margin-left: auto; margin-right: auto; color: var(--text-soft); }

  /* Shared plan foundations stay visually intact but become optional depth under pricing. */
  .foundation-details {
    margin: 30px auto 44px;
    border: 1px solid var(--border-bright);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 9px 28px rgba(8,36,61,.055);
    overflow: hidden;
  }
  .foundation-details > summary {
    position: relative;
    display: block;
    padding: 22px 76px 22px 24px;
    list-style: none;
    color: var(--text);
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 650;
    text-align: center;
    cursor: pointer;
  }
  .foundation-details > summary::-webkit-details-marker { display: none; }
  .foundation-details > summary::marker { display: none; }
  .foundation-details > summary::after {
    content: '+';
    position: absolute;
    top: 50%;
    right: 22px;
    width: 38px;
    height: 38px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    border: 1px solid rgba(233,111,30,.2);
    border-radius: 50%;
    background: rgba(233,111,30,.08);
    color: var(--orange-deep);
    font-size: 24px;
    font-weight: 750;
  }
  .foundation-details[open] > summary::after {
    transform: translateY(-50%) rotate(45deg);
    background: linear-gradient(135deg,var(--orange),var(--gold));
    color: var(--navy-deep);
  }
  .foundation-details-body {
    padding: 4px 22px 26px;
    border-top: 1px solid var(--border);
  }
  .foundation-details-body > .container-wide { max-width: none; }
  .foundation-details .section-head { margin-top: 28px; }

  /* The sibling-pricing headline now stands alone after its repeated paragraph was removed. */
  .pricing-family {
    display: block;
    padding: 15px 18px;
    text-align: center;
  }
  .pricing-family h3 { margin: 0 !important; }

  /* Without the duplicate chapter heading, the optional comparisons start cleanly. */
  .comparison-section { padding-top: 56px; }

  @media (max-width: 720px) {
    .solution-routine { margin-bottom: 42px; padding-bottom: 38px; }
    .solution-steps .step-card { min-height: 390px; }
    .engine-parent-proof { padding: 24px 20px; }
    .foundation-details-body { padding: 0 12px 18px; }
  }



  /* Final mobile placement: the paired rule sits fully between the AI and Paper statements. */
  @media (max-width: 720px) {
    .solution-headline::before,
    .solution-headline::after { display: none !important; }
    .solution-headline .solution-paper-head {
      position: relative;
      margin-top: 40px;
      padding-top: 38px !important;
    }
    .solution-headline .solution-paper-head::before,
    .solution-headline .solution-paper-head::after {
      content: '';
      position: absolute;
      left: 8%;
      right: 8%;
      height: 3px;
      border-radius: 999px;
    }
    .solution-headline .solution-paper-head::before {
      top: 8px;
      background: var(--blue-bright);
    }
    .solution-headline .solution-paper-head::after {
      top: 17px;
      background: linear-gradient(90deg, var(--orange), var(--orange-deep));
    }
  }



  /* V1.0.6 targeted refinement patch -------------------------------------- */
  /* Solution sequence: section label, daily flow, then the AI/Paper contrast. */
  .solution-label-head {
    margin-bottom: 26px !important;
  }
  .solution-label-head .label {
    margin-bottom: 0;
  }
  .solution-routine {
    margin-top: 0;
  }
  .solution-medium-head {
    margin: 48px auto 34px !important;
  }

  /* The two synthesis lines are one centered category statement. */
  .solution-synthesis {
    text-align: center;
  }
  .solution-synthesis span {
    text-align: center;
  }

  /* Independent, compact Engine disclosures; opening one does not stretch its peer. */
  .engine-tracks {
    align-items: start;
  }
  .engine-track {
    align-self: start;
    width: 100%;
  }

  /* Typical Tuesday now closes the Why Akros chapter. */
  .alternatives-section .summer-details {
    margin-top: 34px;
  }

  @media (max-width: 720px) {
    .solution-medium-head {
      margin-top: 38px !important;
    }
  }
/* Authorized landing changes only: dashboard-preview CTA and Plans selector choreography. */
.hero .btn-row{align-items:stretch;flex-wrap:nowrap}
.hero .btn-row .btn{min-height:48px;padding-inline:18px;white-space:nowrap;font-size:14px}
.btn-dashboard{color:var(--blue-bright);background:#fff;border-color:rgba(0,119,200,.48);box-shadow:0 9px 22px rgba(8,36,61,.09)}
.btn-dashboard:hover{transform:translateY(-2px);color:var(--blue-bright);border-color:var(--blue-bright);box-shadow:0 13px 28px rgba(8,36,61,.14)}
.btn-dashboard::after{content:"New";margin-left:9px;padding:3px 7px;border-radius:999px;background:linear-gradient(135deg,var(--orange),var(--gold));color:var(--navy-deep);font:750 10px Outfit,sans-serif;letter-spacing:.05em;text-transform:uppercase}
.pricing-centered-head{max-width:880px!important;margin:0 auto 26px!important;text-align:center!important}
.pricing-centered-head h2{max-width:none!important;margin-inline:auto!important}
.pricing-centered-head h2 span{display:block}
.pricing-centered-head .deck{margin:15px auto 0!important;max-width:720px!important}
.pricing-controls{max-width:760px;scroll-margin-top:92px;margin:22px auto 18px;padding:17px 22px 14px;border:1px solid var(--border);border-radius:16px;background:var(--bg-tinted);box-shadow:0 8px 26px rgba(8,36,61,.045);text-align:center;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.pricing-controls.needs-choice{border-color:var(--orange-text);background:#FFF9EF;box-shadow:0 0 0 4px rgba(233,111,30,.11),0 10px 28px rgba(8,36,61,.07)}
.pricing-family{display:block!important;max-width:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;text-align:center!important}
.pricing-family h3{margin:0 0 9px!important;font-size:22px!important}
.pricing-family p{margin:0!important}
.kid-selector{max-width:none!important;margin:0 auto!important;padding:0!important;border:0!important;box-shadow:none!important;text-align:center!important}
.kid-selector.needs-choice{border:0!important;box-shadow:none!important}
.kid-note{margin-left:12px}
.kid-error{min-height:20px;margin:10px 0 0}
.kid-stepper{margin:11px auto 0!important}
#kid-step-hint{margin:7px auto 0!important;text-align:center!important}
.plan-grid{scroll-margin-top:92px}
/* The featured-plan labels rise above their cards; reserve enough room so none can overlap the family selector. */
.pricing-controls + .plan-grid{margin-top:64px}
.plan-grid.next-step-hint .plan .btn{border-color:rgba(0,119,200,.55);box-shadow:0 0 0 3px rgba(0,119,200,.11),0 9px 22px rgba(8,36,61,.08)}
@media(max-width:900px){
  .pricing-centered-head{margin-bottom:22px!important}
  .pricing-controls{max-width:640px}
  .pricing-top-grid{display:block}
  .pricing-top-grid .section-head{text-align:center}
  .pricing-top-grid .section-head h2,.pricing-top-grid .section-head .deck{margin-left:auto;margin-right:auto}
  .pricing-controls + .plan-grid{margin-top:58px}
}
@media(max-width:760px){
  .hero .btn-row{display:grid;grid-template-columns:1fr}
  .hero .btn{width:100%}
}
@media(max-width:720px){
  .pricing-controls{padding:16px 14px 13px}
  .pricing-family h3{font-size:20px!important}
  .kid-selector-q{font-size:16px}
  .kid-note{display:block;margin:10px 0 0}
}
#plans>.container-wide{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-areas:"head controls" "foundation foundation" "plans plans" "reassure reassure";column-gap:40px;align-items:start;padding-top:34px}
.pricing-centered-head{grid-area:head;max-width:none!important;margin:0!important;text-align:left!important}
.pricing-centered-head .label{position:absolute;top:0;left:0;right:0;margin:0;text-align:center}
.pricing-centered-head h2{max-width:none!important;margin:0!important}
.pricing-centered-head h2 span{display:block;white-space:nowrap}
.pricing-centered-head .deck{max-width:600px!important;margin:15px 0 0!important}
.pricing-controls{grid-area:controls;align-self:start;max-width:none!important;margin:0!important}
.pricing-family h3{white-space:nowrap}
.foundation-details{grid-area:foundation;width:100%;margin:30px auto 0}
.plan-grid{grid-area:plans}
.reassure{grid-area:reassure}
@keyframes plan-choice-pulse{0%,100%{box-shadow:0 0 0 3px rgba(0,119,200,.16),0 9px 22px rgba(8,36,61,.08)}50%{box-shadow:0 0 0 6px rgba(0,119,200,.24),0 12px 28px rgba(8,36,61,.12)}}
.plan-grid.next-step-hint .plan .btn{border-color:var(--blue-bright);box-shadow:0 0 0 3px rgba(0,119,200,.16),0 9px 22px rgba(8,36,61,.08);animation:plan-choice-pulse 1s ease-in-out 2}
@media(max-width:1100px){
  #plans>.container-wide{display:block;padding-top:34px}
  .pricing-centered-head{max-width:920px!important;margin:0 auto 26px!important;text-align:center!important}
  .pricing-centered-head .deck{max-width:720px!important;margin:15px auto 0!important}
  .pricing-controls{max-width:760px!important;margin:22px auto 18px!important}
  .foundation-details{margin:30px auto 44px}
}
@media(max-width:560px){
  .pricing-centered-head h2{font-size:clamp(26px,7.1vw,34px)!important}
  .pricing-family h3{font-size:clamp(14px,4.5vw,20px)!important}
}
@media(prefers-reduced-motion:reduce){.plan-grid.next-step-hint .plan .btn{animation:none}}
/* Pricing V4 — two plans, each with its own Monthly / Yearly switch. The pair
   sits in a 920px track (two ~450px cards read as a pair; stretched to the wide
   container they read as banners) and stacks at the existing 900px breakpoint. */
.plan-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:920px}
/* Akros Daily takes the blue accent the retired Core card wore, so the pair reads as
   two distinct plans: blue for Akros Daily, the orange climb for Premium. */
.plan-daily{--plan-accent:var(--blue-bright)}
.plan-daily .plan-flag{color:var(--blue-bright)}
@media(max-width:900px){.plan-grid{grid-template-columns:1fr;max-width:640px}}
.plan-billing{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin:14px 0 2px;padding:3px;border:1px solid var(--border-bright);border-radius:11px;background:var(--bg)}
.plan-billing-btn{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;height:38px;padding:0 6px;border:0;border-radius:8px;background:transparent;color:var(--text-muted);font-family:'Outfit',sans-serif;font-size:13.5px;font-weight:700;cursor:pointer;transition:background .15s,color .15s}
.plan-billing-btn:hover{background:var(--bg-deep);color:var(--text)}
.plan-billing-btn:focus-visible{outline:3px solid var(--blue-bright);outline-offset:-3px}
.plan-billing-btn.active{color:var(--navy-deep);background:linear-gradient(135deg,var(--orange),var(--gold));box-shadow:0 2px 6px rgba(233,111,30,.18)}
.plan-billing-save{padding:2px 7px;border-radius:999px;background:rgba(255,194,71,.26);color:var(--navy-deep);font-size:10px;font-weight:750;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.plan-billing-btn.active .plan-billing-save{background:rgba(8,36,61,.12)}
.plan-yearly-note{min-height:19px;margin-top:2px;color:var(--teal-text,#1F6F6A);font-size:12.5px;font-weight:650;text-align:center}
.plan-billing-save .save-short{display:none}
@media(max-width:400px){.plan-billing-btn{font-size:12.5px;gap:4px;padding:0 3px}.plan-billing-save{padding:2px 5px;letter-spacing:.02em}.plan-billing-save .save-long{display:none}.plan-billing-save .save-short{display:inline}}
/* ===== Landing page rework, Oct 2026: How it works, Why it works, How Akros adapts, School Help,
   Comparing your options, and the edited production sections ===== */
/* ==========================================================================
   Proposed rework (Oct 2026). Built only from the live site's own tokens
   (--navy-*, --blue-*, --gold, --orange*, --teal-text, --border*, shadows)
   and its type pair (Outfit for headings and labels, Inter for body).
   ========================================================================== */
:root {
  --green: #2E795C;
  --green-soft: #E7F3ED;
  --amber-soft: #FFF2D9;
  --amber-ink: #965C12;
  --red-ink: #A8444B;
  --red-soft: #FAE6E7;
}

/* Headlines: the live cap of 17ch forced 3–4 line wraps. */
.section-head h2 { max-width: 23ch; }

/* Tab panels, tips and the lightbox use the hidden attribute; component display rules must not override it. */
[hidden] { display: none !important; }

/* ---------- Hero additions ---------- */
.hero-school { display: flex; align-items: center; gap: 12px; margin: -4px 0 22px; padding: 12px 16px; border: 1px solid rgba(0,119,200,.22); border-radius: 12px; background: linear-gradient(135deg, rgba(233,245,250,.95), rgba(255,255,255,.9)); color: var(--text-soft); font-size: 15px; line-height: 1.45; text-decoration: none; transition: border-color .15s, transform .15s; }
.hero-school:hover { border-color: var(--blue-bright); transform: translateY(-1px); }
.hero-school strong { color: var(--navy-deep); font-family: 'Outfit', sans-serif; font-weight: 650; }
.hero-school-tag { flex: none; padding: 3px 8px; border-radius: 6px; background: var(--blue-bright); color: #fff; font: 700 10.5px/1.3 'Outfit', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.hero-school-arrow { flex: none; margin-left: auto; color: var(--blue-bright); font-weight: 700; }

/* ---------- C1: Learning effectiveness data ---------- */
.proof-section .section-head { margin-bottom: 38px; }
.effect-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.effect-card { display: flex; flex-direction: column; gap: 14px; padding: 30px 26px 24px; }
.effect-card .card-rail.rail-green { background: var(--green); }
.effect-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.effect-title { display: grid; gap: 5px; }
.effect-title small { color: var(--tone); font: 750 11px/1.2 'Outfit', sans-serif; letter-spacing: .15em; text-transform: uppercase; }
.effect-title .et-name { color: var(--navy-deep); font: 750 21px/1.15 'Outfit', sans-serif; letter-spacing: -.015em; }
.effect-info { flex: none; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 1.5px solid currentColor; border-radius: 50%; background: transparent; color: var(--text-muted); font: italic 700 13px/1 Georgia, serif; cursor: pointer; }
.effect-info:hover, .effect-info[aria-expanded="true"] { color: var(--blue-bright); }
.effect-tip { margin: -4px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--bg-tinted); color: var(--text-soft); font-size: 13.5px; line-height: 1.5; }
.effect-headline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 2px 0 0; }
.effect-value { font: 750 66px/.95 'Outfit', sans-serif; letter-spacing: -.05em; color: var(--tone); }
.effect-tail { color: var(--navy-deep); font: 700 19px/1.25 'Outfit', sans-serif; }
.effect-teach { --tone: var(--orange-deep); }
.effect-coach { --tone: var(--blue-bright); }
.effect-last { --tone: var(--green); }
.effect-context { margin: -6px 0 0; color: var(--text-muted); font-size: 13.5px; line-height: 1.45; font-weight: 550; }
.effect-bars { display: grid; gap: 6px; }
.effect-bar-row { display: flex; justify-content: space-between; gap: 10px; color: var(--text-soft); font-size: 13.5px; font-weight: 600; }
.effect-bar-row b { font-family: 'Outfit', sans-serif; font-size: 16px; color: var(--text-muted); }
.effect-bar-row b.tone { color: var(--tone); }
.effect-bar { height: 8px; border-radius: 999px; background: #E9ECEE; overflow: hidden; margin-bottom: 6px; }
.effect-bar i { display: block; height: 100%; border-radius: inherit; background: #A5ADB4; }
.effect-bar.tone i { background: var(--tone); }
.effect-points { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.effect-points li { position: relative; padding-left: 16px; color: var(--text-soft); font-size: 14.5px; line-height: 1.45; }
.effect-points li::before { content: ''; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--tone); }
.effect-points b { color: var(--tone); font-family: 'Outfit', sans-serif; font-size: 16px; }
.effect-points strong { color: var(--navy-deep); font-weight: 650; }
.effect-means { margin-top: auto; border-left: 3px solid var(--tone); border-radius: 0 10px 10px 0; background: var(--bg-tinted); }
.effect-means summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; list-style: none; cursor: pointer; color: var(--tone); font: 750 11px/1.3 'Outfit', sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.effect-means summary::-webkit-details-marker { display: none; }
.effect-means summary::after { content: '+'; flex: none; font: 700 18px/1 'Outfit', sans-serif; letter-spacing: 0; transition: transform .2s; }
.effect-means[open] summary::after { transform: rotate(45deg); }
.effect-means summary:focus-visible { outline: 3px solid var(--blue-bright); outline-offset: 2px; border-radius: 6px; }
.effect-means p { margin: 0; padding: 0 14px 13px; color: var(--text-soft); font-size: 14.5px; line-height: 1.5; }
.results-volume-fluency { margin-top: 2px; color: var(--text-soft); font-size: 15px; font-weight: 600; }
.proof-section .results-closer { margin-top: 18px; text-align: center; }
.proof-section .results-closer p { margin: 0; font-size: 16.5px; }
.proof-section .results-closer strong { color: var(--gold); font-weight: 650; }
.proof-link { margin: 10px 0 0; text-align: center; font-size: 15px; font-weight: 600; }
.proof-link a, .text-link { color: var(--blue-bright); text-decoration: none; }
.proof-link a:hover, .text-link:hover { text-decoration: underline; }

/* ---------- Showcase (How it works) ---------- */
.showcase-section { background: linear-gradient(180deg, var(--bg), #fff 60%); }
.showcase-tabs { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 22px; }
.showcase-tabs::before { content: ''; position: absolute; left: 6%; right: 6%; top: 27px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--blue-bright), var(--blue-icy), var(--gold), var(--orange)); opacity: .55; }
.sc-tab { position: relative; display: grid; justify-items: center; gap: 4px; padding: 0 8px 14px; border: 0; background: none; color: var(--text-muted); font-family: 'Outfit', sans-serif; text-align: center; cursor: pointer; }
.sc-num { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 6px; border: 2px solid var(--border-bright); border-radius: 50%; background: #fff; color: var(--text-muted); font-size: 21px; font-weight: 700; transition: all .2s; }
.sc-t { color: var(--text); font-size: 17px; font-weight: 650; line-height: 1.2; }
.sc-s { font-size: 13px; font-weight: 550; }
.sc-tab:hover .sc-num { border-color: var(--orange); color: var(--orange-deep); }
.sc-tab[aria-selected="true"] .sc-num { border-color: transparent; background: linear-gradient(135deg, var(--orange), var(--gold)); color: var(--navy-deep); box-shadow: 0 8px 20px rgba(255,138,42,.28); }
.sc-tab[aria-selected="true"]::after { content: ''; position: absolute; left: 30%; right: 30%; bottom: 0; height: 3px; border-radius: 3px; background: var(--orange); }
.sc-tab:focus-visible { outline: 3px solid var(--blue-bright); outline-offset: 4px; border-radius: 12px; }
.sc-panel { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; padding: 36px; border: 1px solid var(--border); border-radius: 20px; background: #fff; box-shadow: var(--shadow-card); }
.sc-copy .card-label { color: var(--orange-text); }
.sc-copy h3 { margin-bottom: 12px; }
.sc-copy p { color: var(--text-soft); font-size: 16px; }
.sc-copy .tick-list { margin-top: 18px; }
.sc-copy .btn { margin-top: 22px; }
.sc-visual { position: relative; min-width: 0; }
.sample-tag { position: absolute; z-index: 3; top: -12px; right: 14px; padding: 3px 10px; border-radius: 999px; background: var(--navy-deep); color: var(--inv-text); font: 700 10.5px/1.4 'Outfit', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
/* mail window */
.mail-frame { overflow: hidden; border: 1px solid var(--border-bright); border-radius: 14px; background: #fff; box-shadow: var(--shadow-paper); }
.mail-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg); }
.mail-dots { display: flex; gap: 6px; }
.mail-dots i { width: 10px; height: 10px; border-radius: 50%; background: #D9D4C8; }
.mail-meta { min-width: 0; font-size: 13px; line-height: 1.35; }
.mail-meta b { display: block; overflow: hidden; color: var(--text); font-family: 'Outfit', sans-serif; font-size: 14.5px; white-space: nowrap; text-overflow: ellipsis; }
.mail-meta span { color: var(--text-muted); }
.mail-scroll { height: 470px; overflow-y: auto; background: #EFEBE2; overscroll-behavior: contain; }
.mail-scroll img { display: block; width: 100%; height: auto; }
/* lesson gallery */
.lesson-fan { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.lesson-thumb { position: relative; padding: 0; border: 1px solid var(--border-bright); border-radius: 6px; background: #fff; box-shadow: 0 10px 24px rgba(8,36,61,.10); cursor: zoom-in; overflow: hidden; transition: transform .18s, box-shadow .18s; }
.lesson-thumb:nth-child(odd) { transform: rotate(-1.4deg); }
.lesson-thumb:nth-child(even) { transform: rotate(1.2deg) translateY(10px); }
.lesson-thumb:hover { transform: translateY(-6px); box-shadow: 0 18px 34px rgba(8,36,61,.16); }
.lesson-thumb img { display: block; width: 100%; aspect-ratio: 85 / 110; object-fit: cover; }
.lesson-thumb span { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 5px; background: rgba(8,36,61,.85); color: #fff; font: 650 11px/1.4 'Outfit', sans-serif; }
.lesson-caption { margin: 24px 0 0; color: var(--text-muted); font-size: 13.5px; text-align: center; }
.lightbox { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: max(20px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: rgba(5,10,18,.82); }
.lightbox img { max-width: min(760px, 100%); max-height: 86vh; border-radius: 8px; background: #fff; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.lightbox-close { position: absolute; top: max(16px, env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; color: var(--navy-deep); font-size: 22px; cursor: pointer; }
.lightbox-nav { display: flex; gap: 10px; margin-top: 14px; justify-content: center; }
.lightbox-nav button { min-height: 40px; padding: 8px 16px; border: 1px solid rgba(255,255,255,.4); border-radius: 8px; background: rgba(255,255,255,.1); color: #fff; font: 600 14px 'Outfit', sans-serif; cursor: pointer; }
/* browser frame */
.browser-frame { overflow: hidden; border: 1px solid var(--border-bright); border-radius: 14px; background: #fff; box-shadow: var(--shadow-paper); }
.browser-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--bg); }
.browser-url { flex: 1; min-width: 0; overflow: hidden; padding: 5px 12px; border-radius: 8px; background: #fff; border: 1px solid var(--border); color: var(--text-muted); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.browser-frame img { display: block; width: 100%; height: auto; }

/* ---------- Photo capture demo (built from the live upload page, v3) ------ */
.pd-wrap { display: grid; justify-items: center; gap: 12px; }
.pd-phone { position: relative; width: 274px; max-width: 100%; aspect-ratio: 300 / 610; padding: 12px; border-radius: 44px; background: linear-gradient(160deg, #102B45, #061A2E); box-shadow: 0 30px 60px rgba(8,36,61,.28), inset 0 0 0 2px rgba(255,255,255,.08); }
.pd-notch { position: absolute; z-index: 4; top: 18px; left: 50%; width: 92px; height: 22px; transform: translateX(-50%); border-radius: 0 0 14px 14px; background: #061A2E; }
.pd-screen { position: relative; height: 100%; overflow: hidden; border-radius: 33px; background: #FAF8F2; color: #050A12; font-family: 'Inter', sans-serif; }
.pd-scroll { position: absolute; inset: 0; overflow-y: auto; padding: 38px 14px 116px; scrollbar-width: none; }
.pd-scroll::-webkit-scrollbar { display: none; }
.pd-app { display: flex; align-items: center; gap: 8px; padding-bottom: 9px; border-bottom: 1px solid rgba(8,36,61,.11); }
.pd-app img { width: 30px; height: auto; }
.pd-app .pd-div { width: 1px; height: 18px; background: rgba(8,36,61,.18); }
.pd-app b { font: 650 12px 'Outfit', sans-serif; color: #08243D; }
.pd-app .pd-help { margin-left: auto; color: #5F6B76; font-size: 11px; font-weight: 600; }
.pd-journey { display: flex; align-items: center; gap: 6px; margin: 12px 0 14px; font: 500 10px 'Outfit', sans-serif; color: #5F6B76; white-space: nowrap; }
.pd-step { display: inline-flex; align-items: center; gap: 4px; }
.pd-step i { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(8,36,61,.24); font-style: normal; font-size: 9px; }
.pd-step.on { color: #061A2E; font-weight: 650; }
.pd-step.on i { border-color: transparent; background: linear-gradient(105deg, #FF8A2A, #FFC247); color: #061A2E; }
.pd-step.done i { border-color: transparent; background: #2E795C; color: #fff; }
.pd-rule { flex: 1; height: 1px; background: rgba(8,36,61,.18); }
.pd-eyebrow { margin: 0 0 4px; color: #3B746D; font: 600 9.5px 'Outfit', sans-serif; letter-spacing: .15em; text-transform: uppercase; }
.pd-title { margin: 0; font: 650 19px/1.2 'Outfit', sans-serif; letter-spacing: -.02em; color: #061A2E; }
.pd-title em { font-style: normal; color: #E96F1E; }
.pd-sub { margin: 6px 0 0; color: #5F6B76; font-size: 11.5px; line-height: 1.5; }
.pd-tag { display: inline-flex; gap: 6px; margin-top: 8px; color: #08243D; font-size: 11px; font-weight: 650; }
.pd-climb { height: 3px; margin: 12px 0; border-radius: 3px; background: linear-gradient(90deg, #0077C8, #8EC8C3 33%, #FFC247 66%, #FF8A2A); opacity: .9; }
.pd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.pd-slot { position: relative; display: grid; place-items: center; aspect-ratio: 85 / 110; padding: 0; border: 1.5px dashed rgba(8,36,61,.28); border-radius: 8px; background: #fff; color: #5F6B76; font: 600 11px/1.3 'Outfit', sans-serif; text-align: center; overflow: hidden; cursor: pointer; }
.pd-slot.next { border-style: solid; border-color: #E96F1E; box-shadow: 0 0 0 3px rgba(255,138,42,.16); color: #E96F1E; }
.pd-slot small { display: block; margin-top: 2px; font-size: 9px; color: #3B746D; letter-spacing: .08em; text-transform: uppercase; }
.pd-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pd-slot .pd-ok { position: absolute; right: 5px; top: 5px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #2E795C; color: #fff; font-size: 10px; font-weight: 800; }
.pd-slot .pd-pg { position: absolute; left: 5px; bottom: 5px; padding: 1px 6px; border-radius: 4px; background: rgba(8,36,61,.85); color: #fff; font-size: 9px; }
.pd-dock { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 11px 14px 16px; border-top: 1px solid rgba(8,36,61,.11); background: #fff; box-shadow: 0 -6px 18px rgba(8,36,61,.07); }
.pd-dock-copy { margin: 0 0 8px; font-size: 10.5px; line-height: 1.35; color: #5F6B76; }
.pd-dock-copy b { display: block; color: #061A2E; font: 650 12px 'Outfit', sans-serif; }
.pd-btn { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 8px; background: linear-gradient(105deg, #FF8A2A, #FFC247); color: #061A2E; font: 650 13px 'Outfit', sans-serif; cursor: pointer; box-shadow: 0 4px 10px rgba(233,111,30,.15); }
.pd-btn.secondary { background: #fff; border: 1px solid rgba(8,36,61,.24); box-shadow: none; }
.pd-btn:focus-visible { outline: 3px solid #0077C8; outline-offset: 2px; }
.pd-warn { margin: 6px 0 0; color: #965C12; font-size: 10px; text-align: center; }
.pd-cam { position: absolute; inset: 0; z-index: 5; display: grid; grid-template-rows: auto 1fr auto; background: #0B0F14; color: #fff; }
.pd-cam-top { padding: 40px 16px 8px; font: 600 11.5px 'Outfit', sans-serif; text-align: center; color: rgba(255,255,255,.85); }
.pd-view { position: relative; margin: 6px 14px; border-radius: 6px; overflow: hidden; background: #2A2F35; }
.pd-view img { position: absolute; inset: 4% 6%; width: 88%; height: 92%; object-fit: cover; transform: rotate(-1.6deg); box-shadow: 0 8px 20px rgba(0,0,0,.4); }
.pd-corner { position: absolute; width: 22px; height: 22px; border-color: #FFC247; border-style: solid; }
.pd-corner.tl { left: 8px; top: 8px; border-width: 3px 0 0 3px; }
.pd-corner.tr { right: 8px; top: 8px; border-width: 3px 3px 0 0; }
.pd-corner.bl { left: 8px; bottom: 8px; border-width: 0 0 3px 3px; }
.pd-corner.br { right: 8px; bottom: 8px; border-width: 0 3px 3px 0; }
.pd-cam-bottom { display: grid; justify-items: center; gap: 8px; padding: 12px 0 22px; }
.pd-cam-bottom small { color: rgba(255,255,255,.7); font-size: 10.5px; }
.pd-shutter { width: 58px; height: 58px; border: 4px solid #fff; border-radius: 50%; background: radial-gradient(circle, #fff 58%, transparent 60%); cursor: pointer; }
.pd-shutter:focus-visible { outline: 3px solid #FFC247; outline-offset: 3px; }
.pd-flash { position: absolute; inset: 0; z-index: 6; background: #fff; opacity: 0; pointer-events: none; }
.pd-flash.go { animation: pdFlash .35s ease-out; }
@keyframes pdFlash { 0% { opacity: .95; } 100% { opacity: 0; } }
.pd-progress { margin-top: 14px; padding: 12px; border: 1px solid rgba(8,36,61,.11); border-radius: 12px; background: #fff; }
.pd-progress-top { display: flex; justify-content: space-between; font-size: 11px; color: #5F6B76; }
.pd-progress-top b { color: #061A2E; font: 650 12px 'Outfit', sans-serif; }
.pd-track { height: 7px; margin: 9px 0 10px; border-radius: 999px; background: #EAF2F6; overflow: hidden; }
.pd-track i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #0077C8, #8EC8C3 40%, #FFC247 75%, #FF8A2A); transition: width .5s ease; }
.pd-rows { display: grid; gap: 6px; }
.pd-row { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; font-size: 11px; }
.pd-row img { width: 26px; height: 34px; object-fit: cover; border-radius: 3px; border: 1px solid rgba(8,36,61,.15); }
.pd-row em { font-style: normal; font-size: 10px; font-weight: 650; color: #5F6B76; }
.pd-row em.ok { color: #2E795C; }
.pd-done { display: grid; justify-items: center; gap: 6px; margin-top: 12px; padding: 16px 12px; border: 1px solid rgba(8,36,61,.11); border-radius: 14px; background: #fff; text-align: center; }
.pd-done-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #E7F3ED; color: #2E795C; font-size: 20px; font-weight: 800; }
.pd-done h4 { margin: 0; font: 650 17px 'Outfit', sans-serif; color: #061A2E; }
.pd-done p { margin: 0; font-size: 11px; line-height: 1.5; color: #5F6B76; }
.pd-sh { margin-top: 10px; padding: 11px 12px; border-radius: 12px; background: #EAF2F6; text-align: left; }
.pd-sh b { display: block; font: 650 12px 'Outfit', sans-serif; color: #061A2E; }
.pd-sh span { display: block; margin-top: 2px; font-size: 10.5px; color: #08243D; }
.pd-sh a { display: inline-block; margin-top: 6px; color: #0077C8; font-size: 11px; font-weight: 650; text-decoration: none; }
.pd-plan-line { margin: 10px 0 0; color: #3B746D; font-size: 10.5px; font-weight: 600; line-height: 1.45; }
.pd-mail { display: flex; gap: 6px; margin: 6px 0 10px; color: #5F6B76; font-size: 10.5px; line-height: 1.45; }
.pd-act { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; width: 100%; min-height: 54px; margin-top: 8px; padding: 9px 11px; border: 1px solid transparent; border-radius: 10px; background: linear-gradient(105deg, #FF8A2A, #FFC247); color: #061A2E; text-align: left; font-family: 'Inter', sans-serif; cursor: pointer; box-shadow: 0 4px 10px rgba(233,111,30,.14); }
.pd-act.secondary { border-color: rgba(8,36,61,.24); background: #fff; box-shadow: none; }
.pd-act:focus-visible, .pd-quiet:focus-visible { outline: 3px solid #0077C8; outline-offset: 2px; }
.pd-act .ic { font-size: 15px; line-height: 1; }
.pd-act b { display: block; font: 650 12.5px/1.25 'Outfit', sans-serif; }
.pd-act small { display: block; margin-top: 2px; color: #344F5F; font-size: 9.5px; line-height: 1.35; }
.pd-act .arr { font-weight: 700; }
.pd-quiet { display: block; width: 100%; margin-top: 6px; padding: 8px; border: 0; background: none; color: #08243D; font: 600 11.5px 'Outfit', sans-serif; cursor: pointer; }
.pd-proc { display: flex; gap: 9px; margin-top: 10px; padding: 10px 12px; border: 1px solid rgba(8,36,61,.11); border-radius: 10px; background: #fff; text-align: left; }
.pd-proc i { flex: none; width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: #FFC247; box-shadow: 0 0 0 4px rgba(255,194,71,.18); }
.pd-proc b { display: block; color: #061A2E; font: 650 11.5px 'Outfit', sans-serif; }
.pd-proc span { display: block; margin-top: 2px; color: #5F6B76; font-size: 10.5px; line-height: 1.45; }
.pd-close { margin: 10px 0 0; color: #5F6B76; font-size: 10.5px; text-align: center; }
.pd-restart { min-height: 38px; padding: 6px 14px; border: 1px solid var(--border-bright); border-radius: 8px; background: #fff; color: var(--text); font: 600 13.5px 'Outfit', sans-serif; cursor: pointer; }

/* ---------- Why it works (dark, consolidated) ---------- */
.why-section .split { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr); align-items: stretch; }
.split-card { padding: 30px 30px 26px; border-radius: 18px; }
.split-card .card-label { margin-bottom: 8px; }
.split-card h3 { margin-bottom: 16px; font-size: 25px; }
.split-card ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.split-card li { position: relative; padding-left: 26px; font-size: 15.5px; line-height: 1.5; }
.split-card li::before { content: '✓'; position: absolute; left: 0; top: 0; font-weight: 800; }
.split-paper { background: #FFFDF8; border: 1px solid rgba(255,255,255,.4); box-shadow: 0 18px 40px rgba(0,0,0,.25); background-image: repeating-linear-gradient(180deg, transparent 0 31px, rgba(0,119,200,.07) 31px 32px); }
.split-paper .card-label { color: var(--orange-text) !important; }
.engine-section .split-paper h3 { color: var(--text); }
.engine-section .split-paper li { color: var(--text-soft); }
.split-paper li::before { color: var(--orange-deep); }
.split-ai { background: linear-gradient(160deg, rgba(0,119,200,.22), rgba(255,255,255,.05)); border: 1px solid rgba(142,200,195,.35); }
.split-ai .card-label { color: var(--blue-icy) !important; }
.split-ai li::before { color: var(--gold); }
.engine-section .split-ai li { color: var(--inv-text-soft); }
.split-loop { display: grid; align-content: center; gap: 22px; justify-items: center; color: var(--inv-text-soft); font: 650 11.5px/1.3 'Outfit', sans-serif; letter-spacing: .08em; text-transform: uppercase; text-align: center; }
.split-loop span { display: grid; justify-items: center; gap: 6px; }
.split-loop i { display: block; width: 62px; height: 2px; background: linear-gradient(90deg, var(--gold), var(--orange)); position: relative; font-style: normal; }
.split-loop i::after { content: ''; position: absolute; right: -2px; top: -5px; border: 6px solid transparent; border-left: 9px solid var(--orange); border-right: 0; }
.split-loop .back i { background: linear-gradient(270deg, var(--blue-icy), var(--blue-bright)); }
.split-loop .back i::after { right: auto; left: -2px; border-left: 0; border-right: 9px solid var(--blue-icy); }
.why-section .split-synthesis { display: grid; gap: 4px; margin-top: 24px !important; text-align: center; }
.why-section .split-synthesis .solution-combine { color: var(--gold); }
.science-note { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; max-width: 900px; margin: 26px auto 0; padding: 24px 28px; border-radius: 16px; background: rgba(255,255,255,.94); box-shadow: 0 14px 36px rgba(0,0,0,.16); }
.science-note .sn-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--amber-soft); color: var(--orange-deep); font-size: 22px; }
.premium-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(255,194,71,.18); color: var(--gold); font: 700 10px/1.6 'Outfit', sans-serif; letter-spacing: .08em; text-transform: uppercase; vertical-align: 2px; }

/* ---------- B: School Help ---------- */
.school-section { overflow: hidden; background: radial-gradient(circle at 85% 0, rgba(0,119,200,.10), transparent 40%), linear-gradient(180deg, #fff, var(--bg)); }
.school-section .section-head .label { display: inline-flex; align-items: center; gap: 8px; }
.school-section .section-head .label b { padding: 2px 8px; border-radius: 6px; background: var(--blue-bright); color: #fff; font-weight: 700; letter-spacing: .12em; }
.moment-tabs { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 0 auto 26px; }
.moment-tab { display: grid; gap: 2px; min-width: 250px; padding: 12px 22px; border: 1.5px solid var(--border-bright); border-radius: 12px; background: #fff; color: var(--text); font-family: 'Outfit', sans-serif; text-align: left; cursor: pointer; transition: all .15s; }
.moment-tab small { color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.moment-tab b { font-size: 18px; font-weight: 650; }
.moment-tab[aria-selected="true"] { border-color: var(--blue-bright); background: var(--blue-wash); box-shadow: 0 8px 20px rgba(0,119,200,.12); }
.moment-tab[aria-selected="true"] small { color: var(--blue-bright); }
.moment-tab:focus-visible { outline: 3px solid var(--blue-bright); outline-offset: 3px; }
.school-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 34px; align-items: start; }
.school-steps { margin: 0; padding: 0; list-style: none; counter-reset: sh; display: grid; gap: 4px; }
.school-steps li { position: relative; padding: 14px 0 14px 54px; border-top: 1px solid var(--border); counter-increment: sh; }
.school-steps li:first-child { border-top: 0; }
.school-steps li::before { content: counter(sh); position: absolute; left: 0; top: 14px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--blue-wash); color: var(--blue-bright); font: 700 16px 'Outfit', sans-serif; }
.school-steps b { display: block; color: var(--text); font: 650 18px/1.3 'Outfit', sans-serif; }
.school-steps p { margin: 4px 0 0; color: var(--text-soft); font-size: 15px; line-height: 1.55; }
/* plan demo */
.plan-demo { position: relative; padding: 24px; border: 1px solid var(--border-bright); border-radius: 18px; background: #fff; box-shadow: var(--shadow-paper); }
.plan-demo .card-rail { background: linear-gradient(90deg, var(--blue-bright), var(--blue-icy), var(--gold), var(--orange)); border-radius: 18px 18px 0 0; }
.pdm-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.pdm-head small { display: block; color: var(--blue-bright); font: 700 11px 'Outfit', sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.pdm-head b { display: block; margin-top: 3px; color: var(--text); font: 650 20px/1.2 'Outfit', sans-serif; }
.pdm-head span { color: var(--text-muted); font-size: 13.5px; }
.pdm-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 18px 0 14px; }
.pdm-day { display: grid; gap: 1px; padding: 8px 4px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text-muted); font-family: 'Outfit', sans-serif; text-align: center; cursor: pointer; }
.pdm-day b { color: var(--text); font-size: 14px; }
.pdm-day small { font-size: 10.5px; font-weight: 600; }
.pdm-day[aria-pressed="true"] { border-color: var(--blue-bright); background: var(--blue-wash); }
.pdm-day:focus-visible { outline: 3px solid var(--blue-bright); outline-offset: 2px; }
.pdm-lesson { min-height: 66px; padding: 12px 14px; border-radius: 12px; background: var(--bg-tinted); color: var(--text-soft); font-size: 14.5px; line-height: 1.5; }
.pdm-lesson b { color: var(--text); font-family: 'Outfit', sans-serif; }
.pdm-ready { margin: 16px 0 6px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pdm-ready b { color: var(--text); font: 650 15px 'Outfit', sans-serif; }
.pdm-ready strong { color: var(--blue-bright); font: 750 30px/1 'Outfit', sans-serif; letter-spacing: -.03em; }
.pdm-bar { height: 10px; border-radius: 999px; background: #E6ECEF; overflow: hidden; }
.pdm-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--blue-bright), var(--blue-icy)); transition: width .45s ease; }
.pdm-topics { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: 13.5px; }
.pdm-topics th { padding: 0 0 6px; color: var(--text-muted); font: 700 10.5px 'Outfit', sans-serif; letter-spacing: .12em; text-transform: uppercase; text-align: left; }
.pdm-topics th:nth-child(2), .pdm-topics td:nth-child(2) { text-align: right; padding-right: 10px; white-space: nowrap; }
.pdm-topics td { padding: 7px 0; border-top: 1px solid var(--border); color: var(--text-soft); vertical-align: middle; }
.pdm-topics td:last-child { text-align: right; }
.st { display: inline-block; padding: 2px 9px; border-radius: 6px; font: 650 12px/1.5 'Outfit', sans-serif; white-space: nowrap; }
.st-ready { background: var(--green-soft); color: var(--green); }
.pdm-hist { display: block; margin-top: 1px; color: var(--green); font-size: 11.5px; font-weight: 600; }
.st-almost { background: var(--amber-soft); color: var(--amber-ink); }
.st-notyet { background: var(--red-soft); color: var(--red-ink); }
.st-unchecked { background: #EEF0F2; color: var(--text-muted); }
.st-taught { background: #EAF2F6; color: var(--navy-rich); }
.pdm-note { margin: 12px 0 0; color: var(--text-muted); font-size: 12.5px; line-height: 1.45; }
.pdm-extra { margin-top: 10px; padding: 9px 12px; border-radius: 10px; background: #FFF6E6; color: var(--amber-ink); font-size: 13px; font-weight: 600; }
.pdm-extra[hidden] { display: none !important; }
/* after-test panel */
.atc-card { padding: 22px; border: 1px solid var(--border-bright); border-radius: 18px; background: #fff; box-shadow: var(--shadow-paper); }
.atc-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.atc-head b { font: 650 18px 'Outfit', sans-serif; color: var(--text); }
.atc-head span { color: var(--red-ink); font: 700 22px 'Outfit', sans-serif; }
.atc-rows { display: grid; gap: 10px; margin-top: 14px; }
.atc-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--bg); }
.atc-row .q { display: grid; place-items: center; height: 36px; border-radius: 8px; background: var(--red-soft); color: var(--red-ink); font: 700 14px 'Outfit', sans-serif; }
.atc-row .why { color: var(--text-soft); font-size: 13.5px; line-height: 1.4; }
.atc-row .why b { display: block; color: var(--text); font-family: 'Outfit', sans-serif; font-size: 14.5px; }
.atc-row .act { padding: 4px 10px; border-radius: 8px; background: var(--blue-wash); color: var(--navy-rich); font: 650 12px/1.3 'Outfit', sans-serif; text-align: center; }
/* why School Help */
.sh-quote { max-width: 900px; margin: 46px auto 24px; text-align: center; color: var(--navy-deep); font: italic 500 clamp(22px, 2.4vw, 30px)/1.35 Georgia, serif; }
.sh-quote span { color: var(--blue-bright); }
.sh-cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 22px; margin-top: 30px; color: var(--text-soft); font-size: 15.5px; text-align: center; }
.sh-cta b { color: var(--text); }

/* ---------- C2: A tutor's job at an app's price ---------- */
.cost-panel { padding: 30px 32px; }
.cost-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 20px; }
.cost-top h3 { margin: 0; font-size: 24px; }
.cost-top h3 small { display: block; margin-top: 2px; color: var(--text-muted); font: 500 14px 'Inter', sans-serif; letter-spacing: 0; }
.cost-kids { display: inline-grid; grid-template-columns: auto repeat(4, 44px); align-items: center; gap: 6px; }
.cost-kids > span { margin-right: 6px; color: var(--text-muted); font-size: 13.5px; font-weight: 600; }
.cost-kid { height: 40px; border: 1.5px solid var(--border-bright); border-radius: 9px; background: #fff; color: var(--text); font: 650 16px 'Outfit', sans-serif; cursor: pointer; }
.cost-kid[aria-pressed="true"] { border-color: transparent; background: linear-gradient(135deg, var(--orange), var(--gold)); color: var(--navy-deep); }
.cost-kid:focus-visible { outline: 3px solid var(--blue-bright); outline-offset: 2px; }
.cost-rows { display: grid; gap: 14px; }
.cost-row { display: grid; grid-template-columns: 220px minmax(0, 1fr) 96px; gap: 16px; align-items: center; }
.cost-name { color: var(--text); font: 650 16px/1.25 'Outfit', sans-serif; }
.cost-name small { display: block; margin-top: 2px; color: var(--text-muted); font: 500 12.5px/1.35 'Inter', sans-serif; }
.cost-bar { height: 22px; border-radius: 6px; background: #F1EEE7; overflow: hidden; }
.cost-bar i { display: block; height: 100%; min-width: 6px; border-radius: 6px; transition: width .5s ease; }
.cost-row.tutor .cost-bar i { background: linear-gradient(90deg, #A5ADB4, #7D878F); }
.cost-row.daily .cost-bar i { background: var(--blue-bright); }
.cost-row.premium .cost-bar i { background: linear-gradient(90deg, var(--orange), var(--gold)); }
.cost-amt { color: var(--text); font: 750 20px 'Outfit', sans-serif; text-align: right; font-variant-numeric: tabular-nums; }
.cost-row.tutor .cost-amt { color: var(--text-muted); }
.cost-callout { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 22px; padding: 16px 20px; border-radius: 14px; background: linear-gradient(135deg, var(--navy-deep), var(--navy-alpine)); color: var(--inv-text); }
.cost-callout b { color: var(--gold); font: 750 40px/1 'Outfit', sans-serif; letter-spacing: -.03em; }
.cost-callout span { font: 600 17px/1.35 'Outfit', sans-serif; }
.cost-callout small { flex-basis: 100%; color: var(--inv-text-soft); font-size: 14px; }
.cost-others { margin: 14px 0 0; color: var(--text-muted); font-size: 13.5px; line-height: 1.5; }
.compare-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 22px; }
.vs-tile { padding: 24px; }
.vs-tile .card-label { margin-bottom: 14px; }
.vs-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 10px; }
.vs-pair div { display: grid; gap: 2px; }
.vs-pair small { color: var(--text-muted); font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.vs-pair .them b { color: var(--text-muted); font: 700 26px/1.1 'Outfit', sans-serif; text-decoration: line-through; text-decoration-color: rgba(168,68,75,.55); text-decoration-thickness: 2px; }
.vs-pair .us b { color: var(--blue-bright); font: 750 30px/1.1 'Outfit', sans-serif; }
.vs-pair .arrow { color: var(--orange-deep); font-size: 22px; padding-bottom: 4px; }
.vs-tile p { margin: 12px 0 0; color: var(--text-soft); font-size: 14px; line-height: 1.5; }
.tutor-job { margin-top: 34px; }
.tutor-job summary small { display: block; margin-top: 4px; color: var(--text-muted); font: 500 14px/1.4 'Inter', sans-serif; }
.tj-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 2px 20px 22px; }
.tj-card { display: flex; flex-direction: column; gap: 9px; padding: 16px 16px 14px; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(180deg, #fff, #FBFAF6); }
.tj-top { display: flex; align-items: flex-start; gap: 10px; }
.tj-n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--orange), var(--gold)); color: var(--navy-deep); font: 700 13px 'Outfit', sans-serif; }
.tj-top b { color: var(--text); font: 650 16px/1.3 'Outfit', sans-serif; }
.tj-how { margin: 0; color: var(--text-soft); font-size: 14px; line-height: 1.45; }
.tj-how::before { content: 'Akros: '; color: var(--navy-deep); font-weight: 700; }
.tj-proof { margin: auto 0 0; padding: 9px 11px; border-radius: 10px; background: var(--green-soft); color: var(--navy-deep); font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.tj-proof::before { content: '✓ '; color: var(--green); font-weight: 800; }
.tj-proof b { color: var(--green); font-family: 'Outfit', sans-serif; font-size: 15px; }
.tj-proof.muted { background: var(--bg-tinted); color: var(--text-muted); font-weight: 500; }
.tj-proof.muted::before { content: ''; }
.tradeoffs { margin-top: 34px; }
.tradeoffs h3 { margin-bottom: 14px; text-align: center; }
.tradeoff-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tradeoff { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; align-items: center; padding: 16px 18px; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.tradeoff svg { width: 58px; height: 58px; }
.tradeoff small { display: block; color: var(--text-muted); font: 700 10.5px 'Outfit', sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.tradeoff b { display: block; margin: 2px 0; color: var(--text); font: 650 16.5px/1.25 'Outfit', sans-serif; }
.tradeoff p { margin: 0; color: var(--text-soft); font-size: 13.5px; line-height: 1.45; }
.compare-section .testimonial-wrap { margin-top: 30px; }
.compare-foot { max-width: 900px; margin: 18px auto 0; color: var(--text-muted); font-size: 12.5px; line-height: 1.5; text-align: center; }

/* ---------- Plans additions ---------- */
.value-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 920px; margin: 0 auto 26px; padding: 0; list-style: none; }
.value-strip li { display: grid; gap: 1px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: #fff; text-align: center; color: var(--text-muted); font-size: 13px; line-height: 1.35; }
.value-strip li b { color: var(--navy-deep); font: 700 16px/1.25 'Outfit', sans-serif; }
.value-strip li:nth-child(1) { box-shadow: inset 0 3px 0 var(--green); }
.value-strip li:nth-child(2) { box-shadow: inset 0 3px 0 var(--gold); }
.value-strip li:nth-child(3) { box-shadow: inset 0 3px 0 var(--blue-bright); }
.kid-note-strong { color: var(--orange-text) !important; font-weight: 700 !important; }
#plans>.container-wide { grid-template-areas: "head controls" "values values" "plans plans" "pdiff pdiff" "reassure reassure" "firstweek firstweek"; }
.value-strip { grid-area: values; }
.first-week { grid-area: firstweek; }
.first-week { max-width: 820px; margin: 18px auto 0; padding: 14px 18px; border-radius: 12px; background: var(--green-soft); color: var(--navy-rich); font-size: 14.5px; line-height: 1.5; text-align: center; }
.founder-copy .section-head h2 { max-width: 18ch; }
.first-week b { color: var(--green); }
.premium-adds { margin-top: 34px; }
.premium-adds > h3 { margin-bottom: 6px; text-align: center; }
.premium-adds > p { margin: 0 auto 20px; max-width: 640px; color: var(--text-muted); text-align: center; font-size: 15.5px; }
.premium-adds .grid-3 .card-label { color: var(--orange-text); }
.premium-adds .grid-3 h4 { margin: 0 0 8px; font-size: 19px; }
.premium-adds .premium-closer { margin-top: 22px; }

/* ---------- Footer addition ---------- */
.footer-greek { opacity: .8; font-size: 13px; }

/* ---------- Responsive ---------- */
@media (max-width: 1050px) {
  .tj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-panel { grid-template-columns: 1fr; gap: 28px; padding: 28px; }
  .school-grid { grid-template-columns: 1fr; }
  .cost-row { grid-template-columns: 170px minmax(0, 1fr) 86px; }
}
@media (max-width: 900px) {
  .effect-grid, .compare-stats, .tradeoff-row { grid-template-columns: 1fr; }
  .why-section .split { grid-template-columns: 1fr; gap: 0; }
  .split-loop { grid-auto-flow: column; justify-content: center; gap: 28px; padding: 14px 0; }
  .split-loop i { width: 2px; height: 34px; }
  .split-loop i::after { right: -5px; top: auto; bottom: -2px; border: 6px solid transparent; border-top: 9px solid var(--orange); border-bottom: 0; }
  .split-loop .back i::after { left: -5px; right: auto; top: -2px; bottom: auto; border: 6px solid transparent; border-bottom: 9px solid var(--blue-icy); border-top: 0; }
}
@media (max-width: 720px) {
  .tj-grid { grid-template-columns: 1fr; padding: 0 14px 16px; }
  .tutor-job summary small { font-size: 13px; }
  .reads-work { grid-template-columns: 1fr; }
  .rw-big { font-size: 26px; }
  .rw-side { padding: 18px 18px; }
  .showcase-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .showcase-tabs::before { display: none; }
  .sc-tab { grid-template-columns: 40px minmax(0, 1fr); justify-items: start; align-items: center; column-gap: 10px; row-gap: 0; padding: 10px; border: 1.5px solid var(--border); border-radius: 12px; background: #fff; text-align: left; }
  .sc-tab[aria-selected="true"] { border-color: var(--orange); }
  .sc-tab[aria-selected="true"]::after { display: none; }
  .sc-num { grid-row: 1 / span 2; width: 40px; height: 40px; margin: 0; font-size: 17px; }
  .sc-t { font-size: 14.5px; }
  .sc-s { font-size: 11.5px; }
  .sc-panel { padding: 22px 18px; border-radius: 16px; }
  .mail-scroll { height: 400px; }
  .lesson-fan { grid-template-columns: 1fr 1fr; gap: 14px; }
  .moment-tab { min-width: 0; flex: 1 1 100%; }
  .pdm-days { gap: 4px; }
  .pdm-day small { font-size: 9.5px; }
  .cost-panel { padding: 22px 18px; }
  .cost-row { grid-template-columns: minmax(0, 1fr) 78px; gap: 6px 10px; }
  .cost-row .cost-bar { grid-column: 1 / -1; grid-row: 2; height: 16px; }
  .cost-kids { grid-template-columns: auto repeat(4, 40px); }
  .cost-callout b { font-size: 34px; }
  .science-note { grid-template-columns: 1fr; padding: 20px; }
  .split-card { padding: 24px 20px 20px; }
  .value-strip { grid-template-columns: 1fr; gap: 8px; }
  .value-strip li { grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; text-align: left; padding: 11px 14px 11px 16px; }
  .value-strip li:nth-child(1) { box-shadow: inset 3px 0 0 var(--green); }
  .value-strip li:nth-child(2) { box-shadow: inset 3px 0 0 var(--gold); }
  .value-strip li:nth-child(3) { box-shadow: inset 3px 0 0 var(--blue-bright); }
  .hero-school { font-size: 14px; }
  .atc-row { grid-template-columns: 44px minmax(0, 1fr); }
  .atc-row .act { grid-column: 2; justify-self: start; }
}
@media (max-width: 400px) {
  .pd-phone { width: 252px; }
  .vs-pair .them b { font-size: 22px; }
  .vs-pair .us b { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .lesson-thumb, .hero-school, .cost-bar i, .pdm-bar i, .pd-track i { transition: none; }
  .pd-flash.go { animation: none; }
}

/* Engagement visual: trail chart moved up for a more compact layout, plus a Math Superheroes card */
.engagement-section .engagement-visual { min-height: 500px; }
.engagement-section .mountain-progress { top: 258px; bottom: auto; }
.eng-hero-card { position: absolute; z-index: 2; right: 4%; top: 2%; width: 172px; padding: 9px 9px 8px; border: 1px solid var(--border); border-radius: 16px; background: #fff; box-shadow: var(--shadow-paper); transform: rotate(5deg); text-align: center; }
.eng-hero-card img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.eng-hero-card span { display: block; margin-top: 6px; color: var(--navy-deep); font: 650 12.5px 'Outfit', sans-serif; }
@media (max-width: 720px) {
  .engagement-section .engagement-visual { min-height: 420px; }
  .engagement-section .mountain-progress { top: 220px; }
  .eng-hero-card { width: 130px; right: 0; }
}
@media (max-width: 480px) {
  .engagement-section .engagement-visual { min-height: 390px; }
  .engagement-section .mountain-progress { top: 222px; right: -5%; transform: scale(.72); transform-origin: right top; }
  .eng-hero-card { width: 116px; right: -2%; }
}

/* =====================================================================
   Section additions: How it works loop, Why it works, School Help, comparison, plans
   ===================================================================== */

/* ---------- How it works: the step rail as a loop, return path above the steps ---------- */
.showcase-tabs.loop { --lt: 58px; padding-top: var(--lt); }
.showcase-tabs.loop::before { top: calc(var(--lt) + 27px); }
.sc-return { position: absolute; left: 12.5%; right: 12.5%; top: 14px; height: 33px; border: 2.5px dashed rgba(233,111,30,.6); border-bottom: 0; border-radius: 24px 24px 0 0; pointer-events: none; }
.sc-return::before { content: ''; position: absolute; left: -8.5px; bottom: -11px; border: 7px solid transparent; border-top: 11px solid var(--orange); border-bottom: 0; }
.sc-return span { position: absolute; left: 50%; top: -16px; transform: translateX(-50%); padding: 5px 14px; border: 1px solid rgba(233,111,30,.35); border-radius: 999px; background: #fff; color: var(--orange-deep); font: 650 14px/1.3 'Outfit', sans-serif; white-space: nowrap; box-shadow: 0 6px 16px rgba(8,36,61,.08); }
.lp-arrow { display: none; }
@media (max-width: 720px) {
  .showcase-tabs.loop { --lt: 58px; row-gap: 22px; column-gap: 22px; grid-auto-rows: 1fr; }
  .showcase-tabs.loop .sc-tab:nth-of-type(3) { order: 4; }
  .showcase-tabs.loop .sc-tab:nth-of-type(4) { order: 3; }
  .sc-return { left: 0; right: 0; top: 0; height: auto; border: 0; }
  .sc-return::before { display: none; }
  .sc-return span { position: static; display: block; transform: none; padding: 5px 12px; font-size: 13px; text-align: center; white-space: normal; }
  .lp-arrow { position: absolute; z-index: 2; display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid rgba(233,111,30,.55); border-radius: 50%; background: #fff; color: var(--orange-deep); font: 700 13px/1 'Outfit', sans-serif; font-style: normal; transform: translate(-50%, -50%); }
  .lp-arrow.a12 { left: 50%; top: calc(var(--lt) + (100% - var(--lt) - 22px) / 4); }
  .lp-arrow.a23 { left: 75%; top: calc(var(--lt) + (100% - var(--lt)) / 2); }
  .lp-arrow.a34 { left: 50%; top: calc(var(--lt) + (100% - var(--lt)) * 3 / 4 + 5px); }
  .lp-arrow.a41 { left: 25%; top: calc(var(--lt) + (100% - var(--lt)) / 2); }
}

/* ---------- Research notes (handwriting in Why it works; tutoring frequency in the comparison) ---------- */
.science-note h3 { margin: 0 0 6px; color: var(--text); font-size: 21px; }
.science-note p { margin: 0; color: var(--text-soft); font-size: 15px; }
.research-note { margin: 0 auto 24px; border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.research-note .sn-icon { font: 750 18px/1 'Outfit', sans-serif; letter-spacing: -.02em; }

/* ---------- How Akros adapts: its own light section, split from Why it works ---------- */
.adapt-section { background: var(--bg-tinted); padding-top: 76px; padding-bottom: 82px; }
.adapt-section .section-head { margin-bottom: 30px; }
.adapt-section .section-head .deck { max-width: 720px; }
.adapt-section .engine-track { background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.adapt-section .engine-track > summary::after { border-color: var(--border-bright); background: var(--bg); color: var(--orange-deep); }
.adapt-section .engine-track.advance > summary::after { color: var(--blue-bright); }
.adapt-section .engine-track[open] > summary { border-bottom-color: var(--border); }
.adapt-section .engine-track[open] > summary::after { background: var(--bg-tinted); }
.adapt-section .engine-track > summary .card-label { color: var(--orange-text); }
.adapt-section .engine-track.advance > summary .card-label { color: var(--blue-bright); }
.adapt-section .engine-track .tick-list li { border-top-color: var(--border); }
.adapt-section .engine-track .tick-list li > span { color: var(--text-soft); }
.adapt-section .engine-track .tick-list li::before { border-color: var(--border-bright); background: linear-gradient(135deg, rgba(0,119,200,.10), rgba(255,194,71,.20)); box-shadow: none; }
.adapt-section .engine-track.advance .tick-list li::before { background: linear-gradient(135deg, rgba(142,200,195,.28), rgba(255,138,42,.10)); }
.adapt-section .engine-track .tick-list li::after { color: var(--orange-deep); }
.adapt-section .engine-track.advance .tick-list li::after { color: var(--blue-bright); }
.adapt-section .engine-track .tick-list li strong { color: var(--text); text-decoration-color: var(--gold); }
.adapt-section .engine-track.advance .tick-list li strong { text-decoration-color: var(--blue-icy); }

/* ---------- Comparison: apps check the answer, Akros reads the work (moved here from Why it works) ---------- */
.reads-work { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 14px; margin: 22px 0 0; }
.rw-side { padding: 22px 24px; border-radius: 16px; }
.rw-app { border: 1px solid var(--border); background: #fff; color: var(--text-muted); }
.rw-akros { border: 1px solid rgba(255,194,71,.55); background: linear-gradient(135deg, var(--navy-deep), var(--navy-alpine)); color: #fff; box-shadow: var(--shadow-card); }
.rw-kicker { display: block; margin-bottom: 6px; font: 750 11px/1.2 'Outfit', sans-serif; letter-spacing: .15em; text-transform: uppercase; }
.rw-app .rw-kicker { color: var(--text-muted); }
.rw-akros .rw-kicker { color: var(--gold); }
.rw-big { margin: 0 0 8px; font: 750 30px/1.1 'Outfit', sans-serif; letter-spacing: -.02em; }
.rw-app .rw-big { color: var(--text-soft); }
.rw-akros .rw-big { color: #fff; }
.rw-app p:not(.rw-big) { margin: 0; font-size: 15px; line-height: 1.5; }
.rw-akros ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rw-akros li { position: relative; padding-left: 24px; color: rgba(255,255,255,.92); font-size: 15.5px; line-height: 1.45; }
.rw-akros li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--gold); font-weight: 800; }
.vs-tile p b { color: var(--orange-text); font-family: 'Outfit', sans-serif; }

/* ---------- School Help: your three jobs, and a clearer cue that the days are tappable ---------- */
.jobs-strip { margin-top: 18px; padding: 14px 16px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-tinted); }
.jobs-label { display: block; margin: 0 0 10px; color: var(--text-muted); font: 700 11px/1.2 'Outfit', sans-serif; letter-spacing: .14em; text-transform: uppercase; text-align: center; }
.jobs-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; }
.jobs-steps li { position: relative; display: grid; justify-items: center; gap: 2px; padding: 12px 6px 10px; border: 1px solid var(--border); border-radius: 12px; background: #fff; text-align: center; }
.jobs-steps li:not(:last-child)::after { content: '→'; position: absolute; right: -17px; top: 50%; transform: translateY(-50%); color: var(--orange-deep); font: 700 15px/1 'Outfit', sans-serif; }
.jobs-ic { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 4px; border-radius: 50%; background: var(--blue-wash); color: var(--blue-bright); }
.jobs-ic svg { width: 21px; height: 21px; }
.jobs-steps b { color: var(--navy-deep); font: 700 16px/1.2 'Outfit', sans-serif; }
.jobs-steps small { color: var(--text-muted); font-size: 12.5px; line-height: 1.3; }
.jobs-akros { margin: 12px 0 0; color: var(--navy-deep); font: 700 15px/1.3 'Outfit', sans-serif; text-align: center; }
.jobs-akros span { margin-right: 4px; color: var(--green); }
.pdm-tap { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 16px 0 -6px; color: var(--blue-bright); font: 650 13.5px/1.3 'Outfit', sans-serif; }
.pdm-tap-ic { position: relative; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--blue-bright); }
.pdm-tap-ic::after { content: ''; position: absolute; inset: -6px; border: 2px solid var(--blue-bright); border-radius: 50%; opacity: 0; animation: pdmTap 1.8s ease-out infinite; }
.pdm-day { box-shadow: 0 2px 0 var(--border); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.pdm-day:hover { border-color: var(--blue-bright); transform: translateY(-1px); box-shadow: 0 5px 12px rgba(0,119,200,.14); }
.pdm-day[aria-pressed="true"] { box-shadow: 0 2px 0 var(--blue-bright); }
.pdm-day.nudge { border-color: var(--blue-icy); animation: pdmNudge 1.8s ease-out infinite; }
@keyframes pdmTap { 0% { opacity: .85; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes pdmNudge { 0% { box-shadow: 0 0 0 0 rgba(0,119,200,.42); } 70% { box-shadow: 0 0 0 9px rgba(0,119,200,0); } 100% { box-shadow: 0 0 0 0 rgba(0,119,200,0); } }
@media (prefers-reduced-motion: reduce) {
  .pdm-tap-ic::after, .pdm-day.nudge { animation: none; }
  .pdm-day.nudge { box-shadow: 0 0 0 3px rgba(0,119,200,.3); }
}

/* ---------- Engagement: a few of the characters to collect, with rarity ---------- */
.guide-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 390px; margin: 18px auto 2px; padding: 0; list-style: none; }
.guide-row li { display: grid; justify-items: center; align-content: start; gap: 1px; min-width: 0; text-align: center; }
.g-img { position: relative; display: block; width: 100%; aspect-ratio: 1; margin-bottom: 6px; border: 1.5px solid var(--border); border-radius: 12px; background: #fff; }
.g-img img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.g-legendary .g-img { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,194,71,.30); }
.g-rare .g-img { border-color: var(--blue-icy); box-shadow: 0 0 0 3px rgba(0,119,200,.12); }
.g-img i { position: absolute; left: 50%; top: -9px; transform: translateX(-50%); padding: 1px 7px; border-radius: 999px; background: var(--navy-deep); color: var(--gold); font: 700 10px/1.45 'Outfit', sans-serif; font-style: normal; letter-spacing: .06em; white-space: nowrap; }
.g-rare .g-img i { color: #BFE3FF; }
.guide-row b { color: var(--navy-deep); font: 650 12px/1.2 'Outfit', sans-serif; }
.guide-row small { color: var(--text-muted); font: 700 9.5px/1.3 'Outfit', sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.g-legendary small { color: var(--amber-ink); }
.g-rare small { color: var(--blue-bright); }

/* ---------- Child outcome: novice executability paragraph ---------- */
.self-section .self-ne strong { color: var(--gold); font-weight: 650; }

/* ---------- Plans: room between the deck and the value strip ---------- */
.value-strip { margin-top: 30px; }
.adapt-section .section-head h2 { max-width: 30ch; text-wrap: balance; }
.adapt-section .et-peek { display: block; margin-top: 7px; color: var(--text-muted); font-size: 14.5px; line-height: 1.45; text-transform: none; letter-spacing: 0; }
.comparison-section .premium-adds { margin-top: 0; }
.premium-adds > h3 { margin-bottom: 20px; }
.jobs-steps li:not(:last-child)::after { right: -18px; font-size: 18px; }
@media (max-width: 720px) {
  .reads-work { grid-template-columns: 1fr; }
  .rw-big { font-size: 26px; }
  .rw-side { padding: 18px; }
}

/* ---------- Plans: what Premium adds lives in the Premium card ---------- */
.premium-diff { grid-area: pdiff; max-width: 820px; margin: 22px auto 0; color: var(--navy-rich); font: 550 16px/1.45 'Outfit', sans-serif; text-align: center; }
.premium-diff b { color: var(--orange-text); font-weight: 750; }
.plan-premium .tick-list li b { color: var(--navy-deep); font-weight: 700; }

/* ---------- Final touches: dark-bar gold line, comparison tiles, readiness tip, section spacing ---------- */
/* Child outcome: the bar's second line in gold, like the other two-line dark bars */
.self-section .dark-bar .bar-gold { color: var(--gold); }
/* Comparison tiles: both labels on one line, both values on the next, and the arrow on the value line right after the tutor value */
.vs-pair { grid-template-columns: auto auto minmax(0, 1fr); align-items: baseline; column-gap: 14px; row-gap: 2px; }
.vs-pair > div { display: contents; }
.vs-pair .them small { grid-column: 1; grid-row: 1; }
.vs-pair .them b { grid-column: 1; grid-row: 2; }
.vs-pair .arrow { grid-column: 2; grid-row: 2; padding: 0; }
.vs-pair .us small { grid-column: 3; grid-row: 1; }
.vs-pair .us b { grid-column: 3; grid-row: 2; }
/* School Help plan: the readiness definition lives in an "i" tip */
.pdm-ready-l { display: inline-flex; align-items: center; gap: 8px; }
.pdm-info { width: 20px; height: 20px; font-size: 11.5px; }
.pdm-tip { margin: 0 0 10px; font-size: 13px; }
/* Final call to action: "Akros is the math teacher." on one line on desktop; "math teacher." kept together on a phone */
.final-cta h2 { max-width: 24ch; }
.final-cta h2 .nowrap { white-space: nowrap; }
/* Even rhythm between sections: every content section shows 84px above its first line and 72px below its last
   (68px / 58px on phones), the base section padding. These sections had their own padding before. */
.results-section, .adapt-section, .self-section { padding-top: 84px; padding-bottom: 72px; }
.pricing-section { padding-top: 50px; padding-bottom: 72px; } /* its heading row already sits 34px down */
@media (max-width: 720px) {
  .results-section, .adapt-section, .self-section { padding-top: 68px; padding-bottom: 58px; }
  .pricing-section { padding-top: 34px; padding-bottom: 58px; }
}

#school-help { scroll-margin-top: 84px; }

/* comparison page components */
.cmp-hero { padding-top: 64px; padding-bottom: 56px; background: radial-gradient(circle at 88% 12%, rgba(255,170,50,.11), transparent 32%), radial-gradient(circle at 12% 90%, rgba(0,119,200,.08), transparent 28%), var(--bg); }
.cmp-hero .eyebrow { color: var(--orange-text); }
.cmp-hero h1 { font-size: clamp(40px, 5vw, 64px); }
.cmp-lede { margin: 20px 0 26px; font-size: 19px; line-height: 1.6; max-width: 62ch; }
.cmp-glance { background: #fff; }
.vs-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-card); background: #fff; }
.vs-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; }
.vs-table th, .vs-table td { padding: 16px 20px; text-align: left; vertical-align: top; border-top: 1px solid var(--border); color: var(--text-soft); }
.vs-table thead th { border-top: 0; font: 650 13px/1.2 'Outfit', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); background: var(--bg-tinted); }
.vs-table thead th.vs-akros { color: var(--orange-text); }
.vs-table tbody th { width: 24%; font-family: 'Outfit', sans-serif; font-weight: 650; color: var(--text); }
.vs-table td.vs-akros { background: rgba(255,194,71,.08); color: var(--text); font-weight: 520; }
.diff-list { display: grid; gap: 14px; }
.diff { padding: 24px 26px; border: 1px solid var(--border); border-left: 3px solid var(--blue-bright); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: #fff; }
.diff h3 { font-size: 21px; margin-bottom: 8px; }
.diff p { font-size: 16px; margin: 0; }
.cmp-faq { background: var(--bg); }
.cmp-sources { padding: 4px 28px 40px; }
.cmp-sources p { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.cmp-sources a { color: var(--blue-bright); }

.cmp-sub { margin: 14px 0 0; font: 650 clamp(21px,2.2vw,27px)/1.3 'Outfit', sans-serif; color: var(--orange-text); }
.cmp-guarantee { margin: 14px 0 0; font-size: 14px; color: var(--text-muted); }
.vs-table thead th.vs-why { color: var(--blue-bright); }
.vs-table td.vs-why { color: var(--text-soft); font-style: italic; }
.vs-table tbody th { width: 18%; }
.proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin-bottom: 26px; }
.proof-tile { padding: 26px 24px; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-card); text-align: center; }
.proof-num { display: block; color: var(--navy-deep); font: 750 52px/1 'Outfit', sans-serif; letter-spacing: -.04em; margin-bottom: 10px; }
.proof-tile p { margin: 0; font-size: 15px; }
.cmp-value { background: #fff; }
.value-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.value-cell { display: grid; gap: 6px; padding: 26px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-tinted); text-align: center; }
.value-akros { background: #fff; border-color: rgba(255,138,42,.45); box-shadow: 0 12px 30px rgba(255,138,42,.10); }
.value-k { font: 650 12px/1.2 'Outfit', sans-serif; letter-spacing: .15em; text-transform: uppercase; color: var(--text-muted); }
.value-akros .value-k { color: var(--orange-text); }
.value-num { font: 750 48px/1 'Outfit', sans-serif; color: var(--navy-deep); letter-spacing: -.04em; }
.value-cell:not(.value-akros) .value-num { text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: rgba(200,57,42,.6); }
.value-note { font-size: 14px; color: var(--text-soft); }
.value-foot { margin-top: 18px; text-align: center; font-size: 15px; }
@media (max-width: 700px) {
  .cmp-hero { padding-top: 44px; padding-bottom: 40px; }
  .proof-grid, .value-row { grid-template-columns: 1fr; }
  .vs-scroll { overflow: visible; border: 0; box-shadow: none; background: transparent; }
  .vs-table, .vs-table tbody, .vs-table tr, .vs-table th, .vs-table td { display: block; width: auto; min-width: 0; }
  .vs-table thead { display: none; }
  .vs-table tr { margin-bottom: 12px; border: 1px solid var(--border); border-radius: 14px; background: #fff; overflow: hidden; }
  .vs-table tbody th { width: auto !important; padding: 12px 16px 6px; border-top: 0; font-size: 16px; }
  .vs-table td { padding: 8px 16px 12px; border-top: 0; }
  .vs-table td::before { content: attr(data-col); display: block; margin-bottom: 2px; font: 650 11px/1.2 'Outfit', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
  .vs-table td.vs-akros::before { color: var(--orange-text); }
}