:root{
    --ink:#2F0155;--purple:#9534F8;--purple-lt:#B063FF;--coral:#EF8471;
    --cream:#FFF6EF;--lav:#EFF4FF;--pink:#FCB8FA;--rose:#C75C46;--rose-soft:#FDF3F1;
    --green:#35C791;--green-deep:#268C67;--green-soft:#EBF9F4;
    --blue:#3B82F6;--blue-soft:#EAF2FF;--line:#ece6f3;--muted:#8a7ca0;--grey:#cbc3d8
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{
    font-family:'Poppins',sans-serif;color:var(--ink);font-variant-numeric:tabular-nums;
    background:
      radial-gradient(900px 520px at 92% -10%, rgba(149,52,248,.14), transparent 60%),
      radial-gradient(700px 500px at -5% 110%, rgba(239,132,113,.20), transparent 55%),
      var(--cream);
    min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:34px 20px 70px
  }

  /* ── TOPBAR ── */
  .topbar{width:100%;max-width:1100px;display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
  .logo{font-weight:700;font-size:19px;display:flex;align-items:center;gap:9px}
  /* the real B4C butterfly mark (logo.png). The source PNG has a baked-in
     white ground — multiply blends it away on our light bands. */
  .logo .mark{width:42px;height:42px;display:block;object-fit:contain;mix-blend-mode:multiply}
  /* official wordmark SVG (Bond 07-15) — rendered as-is, never restyled */
  .logo .mark-full{height:44px;width:auto;display:block}
  .logo small{display:block;font-size:11px;font-weight:500;color:var(--muted);margin-top:-2px}
  .helppill{font-size:12px;font-weight:500;background:#fff;border:1px solid var(--line);padding:9px 16px;border-radius:100px;box-shadow:0 4px 14px rgba(47,1,85,.05)}

  /* ── APP CARD ── */
  .app{width:100%;max-width:1100px;background:#fff;border-radius:30px;box-shadow:0 40px 90px -38px rgba(47,1,85,.32);overflow:hidden}

  /* ── HEAD ── */
  .head{padding:32px 36px 6px}
  .kick{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--purple);text-transform:uppercase}
  h1{font-size:clamp(24px,3.2vw,36px);font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:8px 0 5px;max-width:28ch}
  h1 .h{font-family:'Caveat',cursive;color:var(--coral);font-size:1.3em}
  .sub{color:var(--muted);font-size:14px;max-width:72ch;line-height:1.55}

  /* ── INPUT BAR ── */
  .inputbar{
    position:relative;
    margin:26px 36px 0;
    background:
      radial-gradient(130% 150% at 0% 0%, rgba(149,52,248,.12), transparent 55%),
      linear-gradient(180deg,#fbf7ff,#f0e7ff);
    border:1.5px solid rgba(149,52,248,.22);border-radius:22px;
    padding:24px 26px;
    box-shadow:0 20px 46px -26px rgba(149,52,248,.5), inset 0 1px 0 rgba(255,255,255,.9);
    display:grid;grid-template-columns:.85fr 1.05fr .7fr 1.15fr 1.25fr;
    gap:18px;align-items:end;
    transition:box-shadow .2s,border-color .2s
  }
  /* purple→coral ribbon = the logo-mark gradient, so the bar reads as the main control */
  .inputbar::before{
    content:"";position:absolute;top:0;left:26px;right:26px;height:4px;
    border-radius:0 0 4px 4px;background:linear-gradient(90deg,var(--purple),var(--coral))
  }
  .inputbar:focus-within{
    border-color:rgba(149,52,248,.4);
    box-shadow:0 24px 54px -24px rgba(149,52,248,.6), inset 0 1px 0 rgba(255,255,255,.9)
  }
  @media(max-width:980px){.inputbar{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:560px){.inputbar{grid-template-columns:1fr 1fr}}
  .f label{display:block;font-size:12px;font-weight:700;color:var(--ink);margin-bottom:8px;letter-spacing:.01em}
  .f select,.f input[type=number]{
    width:100%;background:#fff;border:1.5px solid #e4d8f6;color:var(--ink);
    font-family:'Poppins';font-weight:600;font-size:15px;padding:13px 15px;
    border-radius:13px;appearance:none;
    box-shadow:0 2px 6px rgba(47,1,85,.05);transition:border-color .15s,box-shadow .15s
  }
  .f select{
    cursor:pointer;padding-right:34px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%239534F8' stroke-width='2.4'%3E%3Cpath d='M3.5 5l3.5 3.5L10.5 5'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 14px center
  }
  .f select:hover,.f input:hover{border-color:var(--purple-lt)}
  .f select:focus,.f input:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 4px rgba(149,52,248,.15)}
  /* assist toggles row */
  .togglebar{
    margin:10px 36px 0;
    background:linear-gradient(180deg,#f8fdf9,#f1fbf4);
    border:1px solid rgba(53,199,145,.22);border-radius:14px;
    padding:12px 20px;
    display:flex;gap:24px;align-items:center;flex-wrap:wrap
  }
  .togglebar .lbl{font-size:11px;font-weight:700;color:var(--green-deep);letter-spacing:.04em;text-transform:uppercase;margin-right:4px}
  .chk{display:flex;align-items:center;gap:8px;cursor:pointer}
  .chk input{width:16px;height:16px;accent-color:var(--green);cursor:pointer;flex-shrink:0}
  .chk span{font-size:12.5px;font-weight:600;color:var(--ink)}
  .chk small{display:block;font-size:10.5px;color:var(--muted);font-weight:400}

  /* ── SECTION WRAPPERS ── */
  .section{padding:28px 36px}
  .section + .section{padding-top:0}
  .divider{height:1px;background:var(--line);margin:0 36px}
  .wintag{
    display:inline-flex;align-items:center;gap:7px;
    font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    padding:5px 13px;border-radius:100px;margin-bottom:13px
  }
  .wintag.one{background:rgba(149,52,248,.1);color:var(--purple)}
  .wintag.two{background:var(--green-soft);color:var(--green-deep)}
  .secttl{font-size:16px;font-weight:700;letter-spacing:-.01em;margin-bottom:14px}
  .secttl .muted{color:var(--muted);font-weight:500;font-size:13px}

  /* ── PAY GRID ── */
  .gridwrap{display:grid;grid-template-columns:1fr 344px;gap:20px;align-items:start}
  @media(max-width:820px){.gridwrap{grid-template-columns:1fr}}
  .gridbox{background:linear-gradient(180deg,#fbf9ff,#f7f1ff);border:1px solid var(--line);border-radius:18px;padding:16px;overflow-x:auto}
  .gridhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:6px}
  .gridtitle{font-size:14px;font-weight:700}
  .legend{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);font-weight:500}
  .legend .ramp{width:100px;height:9px;border-radius:6px;background:linear-gradient(90deg,#EFF4FF,#cdb8ee,#9534F8)}
  table#grid{border-collapse:separate;border-spacing:5px;width:100%;min-width:480px}
  table#grid th{font-size:10.5px;font-weight:600;color:var(--muted);padding:3px;text-align:center}
  table#grid th.step{text-align:left;width:54px}
  table#grid th.lit{color:var(--purple)}
  table#grid td.steplbl{font-size:11px;color:var(--muted);font-weight:500;white-space:nowrap;padding-right:3px}
  table#grid td.cell{
    position:relative;text-align:center;border-radius:10px;padding:10px 5px;
    font-size:12.5px;font-weight:600;transition:transform .15s,box-shadow .2s;cursor:default
  }
  table#grid td.cell .amt{position:relative;z-index:2}
  table#grid td.cell.you{outline:2.5px solid var(--ink);outline-offset:-2px}
  table#grid td.cell.target{outline:2.5px solid var(--coral);outline-offset:-2px;animation:tp 1.2s ease-in-out infinite}
  @keyframes tp{0%,100%{box-shadow:0 0 0 3px rgba(239,132,113,.3)}50%{box-shadow:0 0 0 8px rgba(239,132,113,.5)}}
  table#grid td.cell .tag{
    position:absolute;top:-9px;left:50%;transform:translateX(-50%);
    font-size:8px;font-weight:700;letter-spacing:.07em;
    background:var(--ink);color:#fff;padding:2px 7px;border-radius:100px;z-index:3;white-space:nowrap
  }
  table#grid td.cell.target .tag{background:var(--coral);color:#5a1228}
  .lane-lit{background:rgba(149,52,248,.05);border-radius:12px}

  /* ── YOUR-ROW STRIP (default view) ── */
  .stripanchor{font-size:12px;color:var(--muted);font-weight:500}
  .jumplbl{font-family:'Caveat',cursive;color:var(--purple);font-weight:700;font-size:20px;text-align:center;margin:8px 0 12px}
  .lanestrip{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}
  .lane-tile{position:relative;background:#fff;border:1.5px solid var(--line);border-radius:15px;padding:16px 9px 13px;text-align:center}
  .lane-tile .ln{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .lane-tile .v{font-size:clamp(17px,2.3vw,23px);font-weight:800;letter-spacing:-.02em;margin-top:4px}
  .lane-tile .s{font-size:10px;color:var(--muted);margin-top:2px}
  .lane-tile.dim{opacity:.58}
  .lane-tile.you{border:2.5px solid var(--ink);box-shadow:0 8px 22px -10px rgba(47,1,85,.4)}
  /* target tile = money gained → GREEN (Bond, 07-13; was coral/orange) */
  .lane-tile.target{border:2.5px solid var(--green);background:#f4fbf7;box-shadow:0 10px 26px -10px rgba(53,199,145,.55)}
  .lane-tile.target .v{color:var(--green-deep)}
  .lane-tile .tag{position:absolute;top:-10px;left:50%;transform:translateX(-50%);font-size:8.5px;font-weight:800;letter-spacing:.08em;padding:3px 10px;border-radius:100px;color:#fff;white-space:nowrap;background:var(--ink)}
  .lane-tile.target .tag{background:var(--green-deep);color:#fff}
  @media(max-width:560px){.lanestrip{grid-template-columns:1fr 1fr;gap:10px;row-gap:18px}}

  /* ── FULL-SCHEDULE EXPANDER ── */
  .expander{margin-top:14px}
  .expbtn{width:100%;background:#fff;border:1.5px dashed rgba(149,52,248,.4);border-radius:13px;padding:12px;
    font-family:'Poppins';font-weight:600;font-size:13px;color:var(--purple);cursor:pointer;transition:background .15s}
  .expbtn:hover{background:rgba(149,52,248,.06)}
  .expbtn:focus-visible{outline:3px solid rgba(149,52,248,.35);outline-offset:2px}
  .gridfull{margin-top:12px;overflow-x:auto}
  .gridfullnote{font-size:11.5px;color:var(--muted);margin-bottom:10px;line-height:1.5}

  /* ── MINI-MAP + ZOOM (inside the expander) ── */
  .minimap-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:16px;align-items:start}
  @media(max-width:640px){.minimap-panel{grid-template-columns:1fr}}

  /* left — the whole-schedule "you are here" map */
  .mini-left{border:1px solid var(--line);border-radius:14px;background:#fff;padding:12px 12px 10px}
  .mini-caphd{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
  .mini-caphd-t{font-size:12.5px;font-weight:700;color:var(--ink)}
  .mini-tap{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--purple);background:rgba(149,52,248,.1);border-radius:100px;padding:4px 10px;white-space:nowrap;animation:minitap 1.6s ease-in-out infinite}
  @keyframes minitap{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
  @media(prefers-reduced-motion:reduce){.mini-tap{animation:none;opacity:1}}
  .mini-colhd{display:grid;grid-template-columns:46px repeat(4,1fr);gap:6px;align-items:end;padding:0 5.5px 6px;font-size:9.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);text-align:center}
  .mini-colhd .lit{color:var(--purple)}
  .mini-rows{display:flex;flex-direction:column;gap:3px}
  .mini-row{display:grid;grid-template-columns:46px repeat(4,1fr);gap:6px;align-items:end;width:100%;background:transparent;border:1.5px solid transparent;border-radius:9px;padding:4px;cursor:pointer;font-family:'Poppins';transition:background .12s,border-color .12s,transform .12s}
  .mini-row:hover{background:rgba(149,52,248,.06);transform:translateX(2px)}
  .mini-row:focus-visible{outline:3px solid rgba(149,52,248,.35);outline-offset:1px}
  .mini-row .mr-lbl{font-size:10.5px;font-weight:600;color:var(--muted);text-align:left;white-space:nowrap;align-self:center}
  .mini-row.sel{background:#fff;border-color:var(--purple)}
  .mini-row.sel .mr-lbl{color:var(--purple-text,#7A1FD0);font-weight:800}
  .mbar-wrap{display:flex;align-items:flex-end;justify-content:center;height:16px}
  .mbar{display:block;width:100%;max-width:20px;border-radius:3px;background:#EFE9F8}
  .mbar.climb{background:var(--purple-mid,#C99BF7)}
  .mbar.you{background:var(--ink)}
  .mbar.target{background:#C75C46}
  .mini-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;padding-top:9px;border-top:1px solid var(--line);font-size:10px;color:var(--muted);font-weight:600}
  .mini-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
  .mini-legend .lg-you{background:var(--ink)}
  .mini-legend .lg-ma{background:#C75C46}
  .mini-legend .lg-climb{background:var(--purple-mid,#C99BF7)}

  /* right — the zoom panel */
  .mini-right{border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,#fbf9ff,#f7f1ff);padding:14px}
  .miniz-head{font-size:12.5px;font-weight:700;color:var(--ink);text-align:center;line-height:1.35}
  .miniz-stepper{display:flex;align-items:center;justify-content:center;gap:10px;margin:10px 0 4px}
  .miniz-stepper button{width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(149,52,248,.35);background:#fff;color:var(--purple);font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s;flex-shrink:0}
  .miniz-stepper button:hover:not(:disabled){background:rgba(149,52,248,.1)}
  .miniz-stepper button:focus-visible{outline:3px solid rgba(149,52,248,.35);outline-offset:2px}
  .miniz-stepper button:disabled{opacity:.3;cursor:default}
  .miniz-steplbl{font-size:13px;font-weight:800;color:var(--ink);min-width:100px;text-align:center;background:var(--purple-soft,#F3EAFE);border-radius:100px;padding:7px 14px}
  /* zoom panel is a narrow half-column, so the 4 tiles sit 2×2 (as the default
     strip already does on mobile) — a 4-across row overflows this width */
  #miniStrip{margin-top:14px;grid-template-columns:1fr 1fr;row-gap:18px}
  .minigap{margin-top:14px;background:var(--purple-soft,#F3EAFE);border-radius:12px;padding:12px 14px;font-size:12.5px;line-height:1.55;color:var(--ink)}
  .minigap b{color:var(--purple-text,#7A1FD0);font-weight:800}

  /* ── DE-HEATED GRID CELLS (emphasis, not heat ramp) ── */
  table#grid td.cell{background:#faf8ff;color:var(--ink);font-weight:500}
  table#grid tr.yourrow td.cell{background:rgba(149,52,248,.12);font-weight:700}
  table#grid td.cell.path{background:rgba(149,52,248,.06)}

  /* ── PAY-STUB SIDE COLUMN (beside grid) ── */
  .paysidecol{display:flex;flex-direction:column;gap:12px}

  /* ── PROJECTED PAY STUB card ── */
  .paystub{position:relative;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 34px 74px -34px rgba(47,1,85,.42)}
  .ps-top{padding:24px 24px 22px;color:#fff;position:relative;
    background:radial-gradient(380px 220px at 84% -32%, rgba(239,132,113,.5), transparent 62%),linear-gradient(155deg,#3a0a6e,#2F0155 66%)}
  .ps-brandrow{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#d9c6f5}
  .ps-brandrow .b{color:#fff}
  .ps-brandrow span:last-child{text-align:right;letter-spacing:.02em;font-weight:700;color:#f4e9ff}
  .ps-freqlbl{font-size:12.5px;color:#e7d6ff;margin-top:20px;font-weight:500}
  .ps-hero{font-size:clamp(46px,11vw,64px);font-weight:800;letter-spacing:-.035em;line-height:.9;margin-top:3px;display:flex;align-items:flex-start;gap:2px}
  .ps-hero .sign{font-size:.42em;color:var(--coral);font-weight:700;margin-top:.18em}
  .ps-freqsub{font-size:13px;color:#cdb8ee;font-weight:500;margin-top:5px}
  .ps-toggle{display:inline-flex;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:100px;padding:4px;margin-top:18px;gap:3px}
  .ps-toggle button{border:none;background:none;cursor:pointer;font-family:'Poppins';font-weight:600;font-size:11.5px;padding:8px 13px;border-radius:100px;color:#e7d6ff;transition:.15s}
  .ps-toggle button.on{background:#fff;color:var(--ink)}
  /* perforation — the receipt "tear" between the hero and the stub */
  .ps-perf{position:relative;height:26px;background:#fff}
  .ps-perf::before,.ps-perf::after{content:"";position:absolute;top:50%;width:26px;height:26px;border-radius:50%;transform:translateY(-50%);background:#fff}
  .ps-perf::before{left:-13px;box-shadow:inset -2px 0 4px rgba(47,1,85,.08)}
  .ps-perf::after{right:-13px;box-shadow:inset 2px 0 4px rgba(47,1,85,.08)}
  .ps-perf .dash{position:absolute;top:50%;left:14px;right:14px;border-top:2px dashed #e2d8ef}
  .ps-stub{padding:16px 24px 24px}
  .ps-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}
  .ps-row:last-of-type{border-bottom:none}
  .ps-row .k{font-size:12.5px;color:var(--muted);font-weight:500}
  .ps-row .v{font-size:17px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
  .ps-row.total{border-top:2px solid var(--ink);margin-top:2px;padding-top:12px}
  .ps-row.total .k{color:var(--ink);font-weight:600}
  .ps-row.total .v{font-size:22px;color:var(--green-deep)}
  .ps-cta{display:block;width:100%;text-align:center;margin-top:18px;cursor:pointer;
    background:linear-gradient(135deg,var(--purple),var(--purple-lt));color:#fff;border:none;
    font-family:'Poppins';font-weight:700;font-size:15px;padding:15px;border-radius:100px;
    box-shadow:0 14px 30px -10px rgba(149,52,248,.6);transition:.15s}
  .ps-cta:hover{transform:translateY(-2px)}
  .ps-fine{font-size:10px;color:#a99fb8;line-height:1.55;margin-top:12px;text-align:center}

  /* ── STAT BLOCK (legacy; kept for the pension card styling) ── */
  .statblock{display:flex;flex-direction:column;gap:12px}
  .stat{border-radius:16px;padding:16px 18px}
  .stat.hero{background:linear-gradient(135deg,var(--ink),#491078);color:#fff}
  .stat.purple{background:var(--lav)}
  .stat.coral{background:#fff2f0}
  .stat.plain{background:#fbf9ff;border:1px solid var(--line)}
  .stat .k{font-size:11px;font-weight:500;color:var(--muted)}
  .stat.hero .k{color:#cdb8ee}
  .stat .v{font-size:clamp(22px,3vw,30px);font-weight:800;letter-spacing:-.02em;margin-top:4px}
  .stat.hero .v{color:#fff}
  .stat.purple .v{color:var(--purple)}
  .stat.coral .v{color:var(--rose)}
  .stat .s{font-size:11px;color:var(--muted);margin-top:4px}
  .stat.hero .s{color:#d0bfe8}
  /* headline result */
  .raise-headline{
    background:linear-gradient(135deg,#f3eeff,#ede4ff);
    border:1.5px solid rgba(149,52,248,.18);
    border-radius:18px;padding:18px 22px;margin-bottom:14px;
    display:flex;flex-direction:column;gap:4px
  }
  .raise-headline .main{font-size:clamp(14px,2vw,15px);font-weight:600;color:var(--ink);line-height:1.5}
  .raise-headline .main b{color:var(--purple)}
  .raise-headline .sub2{font-size:12px;color:var(--muted);margin-top:2px}

  /* ── LINE CHART ── */
  .chartcard{margin-top:18px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#fbfcff,#f6f4ff);padding:14px 12px 4px}
  svg.linechart{width:100%;height:auto;display:block;overflow:visible}
  .axislbl{font-size:10px;fill:#9bb0c4;font-family:'Poppins';font-weight:500}
  .chartlegend{display:flex;gap:18px;font-size:11px;color:var(--muted);margin:8px 4px 0;font-weight:500;flex-wrap:wrap}
  .chartlegend i{display:inline-block;width:22px;height:3px;border-radius:2px;margin-right:5px;vertical-align:middle;position:relative;top:-1px}

  /* ── AID / WHAT IT COSTS ── */
  /* Warm white card (was a dark-green gradient slab — the last surviving dark band).
     Green stays as an ACCENT rule, not the field. */
  .aid-hero{
    background:#fff;border:1px solid var(--line);
    border-radius:24px;padding:clamp(20px,2.6vw,30px);color:var(--ink);
    position:relative;overflow:hidden;
    box-shadow:0 26px 60px -30px rgba(47,1,85,.26);
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px
  }
  /* Cost card wears the cost colour (coral), not green — green means "money back". */
  .aid-hero::after{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--coral),var(--rose))}
  .aid-hero .blk{position:relative;flex:1;min-width:220px}
  .aid-hero .k{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
  .aid-hero .v{font-size:clamp(32px,5vw,48px);font-weight:800;letter-spacing:-.03em;line-height:1;margin-top:4px;color:var(--ink)}
  .aid-hero .s{font-size:12.5px;line-height:1.55;color:var(--muted);margin-top:8px;max-width:60ch}
  .aid-hero .mo .v{color:var(--ink)}
  .aid-hero .mo{text-align:right;border-left:1px solid var(--line);padding-left:20px;flex:0 0 auto;min-width:0}
  @media(max-width:560px){.aid-hero .mo{border-left:none;text-align:left;padding-left:0}}

  .aidrow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
  @media(max-width:560px){.aidrow{grid-template-columns:1fr}}
  .aidcard{border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;position:relative;transition:border-color .2s,background .2s}
  .aidcard.on{border-color:var(--green);background:linear-gradient(180deg,#fff,var(--green-soft))}
  .aidcard.muted{opacity:.55}
  .aidcard .nm{font-size:13px;font-weight:700;display:flex;align-items:center;gap:7px}
  .aidcard .nm .tick{color:var(--green);font-weight:800;font-size:15px}
  .aidcard .amt{font-size:22px;font-weight:800;color:var(--green-deep);margin-top:5px;letter-spacing:-.02em}
  .aidcard .amt.loan{color:var(--blue)}
  .aidcard .amt.na{color:var(--muted);font-size:16px}
  .aidcard .d{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.45}
  .secttl2{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--muted);text-transform:uppercase;margin:18px 0 8px;display:flex;align-items:center;gap:6px}

  .breakdown{margin-top:20px;border:1px solid var(--line);border-radius:16px;padding:16px 18px}
  .brow{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #f4f0fa;font-size:13px}
  .brow:last-of-type{border-bottom:none}
  .brow .lbl small{color:var(--muted);font-weight:400;font-size:10.5px;display:block}
  .brow.minus .amt{color:var(--green-deep);font-weight:700}
  .brow.total{border-top:2px solid var(--ink);margin-top:4px;padding-top:10px}
  .brow.total .lbl{font-weight:700}.brow.total .amt{font-size:18px;font-weight:800}

  /* Aid waterfall — full tuition carved down to net (bars you can watch shrink) */
  .wfall{margin-top:20px;border:1px solid var(--line);border-radius:16px;padding:14px 18px 6px;background:#fff}
  .wfrow{display:grid;grid-template-columns:minmax(150px,1.35fr) 1.55fr auto;align-items:center;gap:14px;padding:11px 0;border-bottom:1px dashed #ece3f8}
  .wfrow:last-child{border-bottom:none}
  .wfrow .wlbl{font-size:13px;font-weight:600;color:var(--ink);line-height:1.25}
  .wfrow .wlbl small{display:block;font-weight:400;font-size:10.5px;color:var(--muted);margin-top:2px;line-height:1.4}
  /* COLOUR LANGUAGE (page-wide): coral = money out · green = money back ·
     purple = the raise. This waterfall used to invert it — tuition (money out)
     was painted purple, and the deductions (money you save) were painted coral.
     Same $14,790 that sec-return draws as a coral "You pay" bar. Now aligned. */
  .wfrow .wtrack{position:relative;height:16px;border-radius:5px;background:var(--rose-soft,#FDF3F1)}
  .wfrow .wbar{position:absolute;top:0;height:16px;border-radius:5px;transition:left .4s ease,width .4s ease}
  .wfrow .wamt{font-size:15px;font-weight:800;color:var(--ink);text-align:right;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .wfrow.base .wbar{background:var(--coral,#EF8471)}
  .wfrow.minus .wbar{background:var(--green,#35C791)}
  .wfrow.minus .wamt{color:var(--green-deep,#268C67)}
  .wfrow.total{border-top:2px solid var(--ink);margin-top:2px;padding-top:12px}
  .wfrow.total .wlbl{font-weight:800}
  .wfrow.total .wbar{background:var(--rose,#C75C46)}
  .wfrow.total .wamt{font-size:19px}
  @media(max-width:560px){.wfrow{grid-template-columns:1fr auto}.wfrow .wtrack{display:none}}

  /* Compact aid checklist — replaces the six aid cards, keeps the honesty */
  .checklist{margin-top:14px;font-size:12.5px;line-height:1.65;color:#6a5c7d;background:var(--neutral-cell,#FBF8FF);border:1px solid var(--line);border-radius:12px;padding:12px 15px}
  .checklist b{color:var(--ink);font-weight:700}

  /* ── COST OF WAITING — honest 3-card model + interactive slider ── */
  .waitintro{font-size:13px;color:#5a4c72;line-height:1.6;margin-top:8px;max-width:78ch}
  .waitintro b{color:var(--ink);font-weight:700}
  .explain{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
  @media(max-width:720px){.explain{grid-template-columns:1fr}}
  .excard{border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;background:#fff}
  .excard.warn{background:#FFF6F4;border-color:#F6D5CD}
  .excard .n{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--purple-text,#7A1FD0);margin-bottom:6px}
  .excard.warn .n{color:var(--coral,#C75C46)}
  .excard p{font-size:12.5px;line-height:1.55;color:#5a4c72;margin:0}
  .excard b{color:var(--ink);font-weight:700}

  .waitcard{margin-top:18px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#fbfcff,#f6f4ff);padding:20px}
  .waithead{font-size:15px;font-weight:800;color:var(--ink)}
  .yourinfo{font-size:12px;color:var(--muted);margin-top:3px}
  .yourinfo b{color:var(--ink);font-weight:700}
  .wsliderrow{margin-top:16px}
  .wsl-lbl{font-size:13px;color:var(--ink);font-weight:600}
  .wsl-lbl b{color:var(--purple-text,#7A1FD0)}
  #wc_slider{width:100%;margin-top:9px;accent-color:#9534F8;height:6px;cursor:pointer}
  .wbig{margin-top:16px;border-radius:16px;padding:18px 20px;color:#fff;background:linear-gradient(135deg,#0E7A4A,#16995F);transition:background .3s ease}
  .wbig.cost{background:linear-gradient(135deg,#C75C46,#C9452F)}
  .wbig-k{font-size:12px;font-weight:600;opacity:.92}
  .wbig-v{font-size:clamp(34px,6vw,52px);font-weight:800;letter-spacing:-.03em;line-height:1;margin-top:5px;font-variant-numeric:tabular-nums}
  .wbig-s{font-size:12.5px;margin-top:9px;opacity:.96;line-height:1.5}
  .wbig-s b{font-weight:800}
  .wcap{font-size:11.5px;color:var(--muted);margin-top:16px;line-height:1.5}
  svg.werosion{width:100%;height:auto;display:block;overflow:visible;margin-top:6px}
  .wverdict{margin-top:14px;background:var(--purple-soft,#F3EAFE);border-radius:12px;padding:12px 14px;font-size:12.5px;line-height:1.55;color:var(--ink)}
  .wverdict b{font-weight:800}
  .wpennote{margin-top:10px;font-size:12px;line-height:1.5;padding:10px 13px;border-radius:10px}
  .wpennote.safe{background:var(--green-soft,#EAF7F0);color:var(--green-deep,#0E7A4A)}
  .wpennote.risk{background:#FFF6F4;color:var(--coral,#C75C46)}
  .wvetnote{margin-top:13px;padding-top:12px;border-top:1px dashed var(--line);font-size:11.5px;color:var(--muted);line-height:1.5}

  .payopts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
  @media(max-width:560px){.payopts{grid-template-columns:1fr}}
  .payopt{border:1.5px solid var(--line);border-radius:14px;padding:16px;text-align:center}
  .payopt.best{border-color:var(--green);background:var(--green-soft)}
  .payopt .lbl{font-size:11.5px;color:var(--muted);font-weight:600}
  .payopt .mo{font-size:28px;font-weight:800;color:var(--ink);letter-spacing:-.02em;margin-top:4px}
  .payopt.best .mo{color:var(--green-deep)}
  .payopt .mo span{font-size:13px;font-weight:600;color:var(--muted)}
  .payopt .d{font-size:10.5px;color:var(--muted);margin-top:4px;line-height:1.4}

  /* ── CTA ── */
  .ctarow{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:22px}
  .cta-email{
    font-family:'Poppins';font-size:15px;padding:14px 18px;border-radius:100px;
    border:1.5px solid var(--line);background:#fff;color:var(--ink);
    min-width:280px;flex:1 1 280px;transition:.15s
  }
  .cta-email::placeholder{color:#b0a5c2}
  .cta-email:hover{border-color:var(--purple-lt)}
  .cta-email:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 4px rgba(149,52,248,.15)}
  .cta-email:disabled{opacity:.6}
  .cta-btn{
    background:linear-gradient(135deg,var(--purple),var(--purple-lt));
    color:#fff;border:none;cursor:pointer;
    font-family:'Poppins';font-weight:700;font-size:15px;
    padding:15px 30px;border-radius:100px;
    box-shadow:0 14px 30px -10px rgba(149,52,248,.55);transition:.15s;
    display:inline-block;text-decoration:none;text-align:center
  }
  .cta-btn:hover{transform:translateY(-2px)}
  .cta-btn.sent{background:linear-gradient(135deg,var(--green),var(--green-deep));box-shadow:0 14px 30px -10px rgba(53,199,145,.55)}
  .proof{font-size:12px;color:var(--muted);max-width:32ch;line-height:1.4}
  .proof b{color:var(--ink)}

  /* Disclaimers do the legal work — they must be readable. #b0a5c2 / #9a93a9
     measured ~2.9:1 (WCAG AA needs 4.5:1); #6a5c7d is ~6.1:1 on the light bands. */
  .fine{font-size:11px;color:#6a5c7d;line-height:1.6;padding:0 36px 28px;max-width:90ch}
  /* Consent line under the lead-capture form (light cream CTA band). */
  .consent{flex-basis:100%;font-size:11.5px;line-height:1.55;color:#6a5c7d;margin:14px 0 0;text-align:center}
  .consent a{color:var(--purple);text-decoration:underline}

  /* ── LINK BACK TO THE REVEAL FLOW (plan.html head) ── */
  .backlink{display:inline-block;margin-top:10px;font-size:12.5px;font-weight:600;color:var(--purple);text-decoration:none}
  .backlink:hover{text-decoration:underline}

  /* ── PENSION BONUS STAT — no-Social-Security callout line ── */
  .stat .ssnote{margin-top:8px;background:var(--rose-soft);border-left:3px solid var(--rose);border-radius:8px;padding:8px 10px;font-size:11px;font-weight:600;line-height:1.45;color:var(--ink)}

  /* ── YEAR-BY-YEAR PAYBACK CHART ── */
  .cfcard{margin-top:20px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#fbfcff,#f6f4ff);padding:18px 18px 12px}
  .cfhead{font-size:14px;font-weight:700}
  .cfsub{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.5;max-width:70ch}
  svg.cfchart{width:100%;height:auto;display:block;overflow:visible;margin-top:12px}
  .cflegend{display:flex;gap:16px;font-size:11px;color:var(--muted);margin:8px 4px 0;font-weight:500;flex-wrap:wrap}
  .cflegend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:5px;vertical-align:-2px}
  .cflegend .cf-back{background:#C75C46}.cflegend .cf-gain{background:#35C791}.cflegend .cf-pen{background:#7FD1A8}
  /* Stat ladder — one hero (career total) + three supports (the same raise on four clocks) */
  .statladder{border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden}
  .sl-hero{background:var(--ink);color:#fff;padding:18px 20px}
  .sl-hero-k{font-size:12px;font-weight:600;color:#d9c9f5}
  .sl-hero-v{font-size:clamp(30px,5vw,42px);font-weight:800;letter-spacing:-.03em;line-height:1;margin-top:4px;font-variant-numeric:tabular-nums}
  .sl-hero-s{font-size:12px;color:#e7dcfb;margin-top:6px;line-height:1.4}
  .sl-supports{padding:4px 18px}
  .sl-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid #f4f0fa}
  .sl-row:last-child{border-bottom:none}
  .sl-txt{display:flex;flex-direction:column}
  .sl-k{font-size:13px;font-weight:700;color:var(--ink)}
  .sl-d{font-size:10.5px;color:var(--muted);margin-top:1px}
  .sl-v{font-size:18px;font-weight:800;color:var(--purple);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
  .sl-cta{display:block;width:calc(100% - 36px);margin:8px 18px 0;background:linear-gradient(90deg,var(--purple),#7A1FD0);color:#fff;border:none;border-radius:12px;padding:12px;font-weight:700;font-size:13.5px;cursor:pointer}
  .sl-fine{font-size:10px;color:var(--muted);line-height:1.4;padding:9px 18px 16px}

  /* Pension pay-slip — a second paycheck for life */
  .penslip{margin-top:16px;border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden}
  .penbanner{background:linear-gradient(135deg,#2F0155,#5a1a9e);color:#fff;font-size:12px;font-weight:600;line-height:1.45;padding:11px 16px}
  .penslip-top{background:var(--green-soft,#EAF7F0);padding:13px 18px;border-bottom:1px solid #dcefe4}
  .penslip-hdr{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
  .penslip-hdr .b{font-size:12.5px;font-weight:800;color:var(--green-deep,#0E7A4A)}
  .penslip-hdr #pen_sys{font-size:10.5px;color:var(--muted);text-align:right;white-space:nowrap}
  .penslip-body{padding:4px 18px 4px}
  .penrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid #f4f0fa}
  .penrow:last-of-type{border-bottom:none}
  .penrow-k{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.25}
  .penrow-k small{display:block;font-weight:400;font-size:10px;color:var(--muted);margin-top:2px;line-height:1.4}
  .penrow-v{font-size:16px;font-weight:800;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
  .penrow-v.purple{color:var(--purple)}
  .penrow-v .per{font-size:.62em;font-weight:600;color:var(--muted)}
  .penrow.big .penrow-v{font-size:22px}
  .penfoot{font-size:10.5px;color:var(--green-deep,#0E7A4A);line-height:1.45;padding:10px 0 14px;font-weight:500}

  .cfnote{margin:12px 0 2px;font-size:12px;line-height:1.55;color:#6a5c7d;background:var(--neutral-cell,#FBF8FF);border:1px solid var(--line);border-radius:10px;padding:10px 13px}
  .cfnote b{color:var(--ink);font-weight:700}
  /* (.cftally stat cells removed 07-13 — the payback story lives on the chart) */

  /* ── PAY-VS-GET-BACK + ROI ── */
  .roicard{margin-top:18px;border:1px solid var(--line);border-radius:18px;background:#fff;padding:20px 20px 18px}
  .roihead{font-size:14px;font-weight:700;margin-bottom:14px}
  .roibar{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:12.5px;font-weight:600}
  .roibar .v{font-weight:800;letter-spacing:-.01em}
  .roibar .v.pay{color:var(--rose);font-size:20px}
  .roibar .v.get{color:var(--green-deep);font-size:26px}
  .roibarline{height:22px;border-radius:7px;background:#faf7ff;overflow:hidden;margin-top:5px}
  .roibarline i{display:block;height:100%;border-radius:7px}
  .roibarline i.pay{background:var(--coral)}
  .roibarline i.get{background:linear-gradient(90deg,var(--green-deep),var(--green))}
  .roisliver{text-align:center;font-family:'Caveat',cursive;font-weight:700;font-size:20px;color:var(--green-deep);margin-top:14px}
  /* (legacy .roicmp block removed — the live rules live in the REDESIGN section below) */

  /* ═══════════════════════════════════════════════════════════════════ */
  /* REDESIGN 2026-07-08 · BANDED SECTIONS + RATIONED PALETTE             */
  /* Appended last so it overrides the legacy card layout. The legacy     */
  /* component rules above are still used (app.js paints .lane-tile,      */
  /* .wfrow, .penrow, .mini-*, .cf*, .wbig, .roi* by class) — only the    */
  /* page-level container / theming changes here.                         */
  /* ═══════════════════════════════════════════════════════════════════ */

  /* new tokens (values match the fallbacks already used in the legacy CSS,
     so defining them changes NOTHING in the existing components) */
  :root{
    --purple-text:#7A1FD0; --purple-soft:#F3EAFE; --purple-mid:#C99BF7;
    --coral-soft:#EF8471; --neutral-cell:#FBF8FF;
    /* note: legacy --coral (#EF8471) stays the soft peach it always was;
       strong coral for the redesign = the existing --rose (#C75C46) */
  }
  .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
  .hand{font-family:'Caveat',cursive;font-weight:700;line-height:1}

  /* body: drop the ambient purple/coral radials + the centered white card;
     each band now owns its own background */
  body{
    background:#fff;
    display:block;
    align-items:stretch;
    padding:0;
    overflow-x:hidden
  }
  main{display:block;width:100%}

  /* ---- band system ---- */
  .band{padding:clamp(30px,3.6vw,54px) 0;position:relative}
  .band .wrap{max-width:1080px;margin:0 auto;padding:0 24px}
  .band.narrow .wrap{max-width:920px}
  /* GROUND RHYTHM — content bands strictly alternate cream ↔ white so no two
     neighbours share a ground and the sections can't bleed together. Grey is
     reserved for the trust band, the gradient for the CTA. Order must stay:
     cream · white · cream · white · cream · white · cream · white · cta · grey
     (The old `band--ink` class was a dead relic of the dark-band era — it just
     meant "cream", and #sec-return carried a one-off patch to undo it. Both gone;
     `body` already sets color:var(--ink), so nothing needed those overrides.) */
  .band--cream{background:var(--cream)}
  .band--white{background:#fff}
  .band--grey{background:#F6F5F8}

  /* DB-failure state (set by app.js showLoadError): keep the hero + notice +
     back-link so the teacher still sees the RIGHT tool; hide the inert inputs
     and the all-dashes number sections. */
  body.load-error section:not(#sec-control){display:none}
  body.load-error .control{display:none}

  /* District-less pick mode (07-14, round 21): plan.html is the base URL.
     The sections STAY VISIBLE as grey, number-free ghosts — visitors see
     what the tool gives before picking (Peter: "not just nothing") — but no
     real-looking figure renders anywhere (no-state-averages rule). We don't
     point fresh visitors at the unfinished quiz. */
  body.pick-district .backlink{display:none}
  body.pick-district .chartlegend,
  body.pick-district .cflegend{filter:grayscale(1);opacity:.6}
  body.pick-district .wfall{filter:grayscale(1);opacity:.75}
  body.pick-district .lane-tile{opacity:.75}
  body.pick-district .raise-note{display:none}
  .ghostpill{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--purple-text,#7A1FD0);background:var(--purple-soft,#F3EAFE);border-radius:100px;padding:5px 12px;margin:8px 0 2px}

  .band .eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--accent,#7A1FD0);margin:0 0 12px}
  .band-title{font-size:clamp(23px,3vw,33px);font-weight:800;line-height:1.12;letter-spacing:-.02em;text-wrap:balance;max-width:16em;margin:0}
  .band-title .tqual{font-size:.52em;font-weight:600;color:var(--muted);letter-spacing:0;white-space:nowrap}

  /* ---- tuition comparison (Bond 07-15): mirrors the landing-page card design
     she shared — logo, feature rows, price; B4C middle card purple + lifted ---- */
  .tuitcmp{margin-top:30px}
  .tuitcmp-title{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
  .tuitcmp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
  @media(max-width:680px){.tuitcmp-cards{grid-template-columns:1fr}}
  .tc-card{display:flex;flex-direction:column;align-items:center;text-align:center;
    background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:22px 18px 16px}
  .tc-logo{font-weight:800;font-size:15px;line-height:1.12;min-height:46px;display:flex;align-items:center;justify-content:center}
  .tc-logo-uop{color:#D2232A}
  .tc-logo-wgu{color:#1B365D;font-size:23px;letter-spacing:.05em}
  .tc-logo-img{height:38px;width:auto;display:block;margin-bottom:2px}
  .tc-wj{font-size:9.5px;font-weight:600;color:#5b4a72;margin-bottom:2px}
  .tc-row{font-size:12px;color:var(--ink);line-height:1.45;padding:8px 0;border-top:1px solid rgba(47,1,85,.09);width:100%}
  .tc-row.tc-dur{font-weight:700}
  .tc-price{font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin-top:auto;padding-top:12px}
  .tc-avg{font-size:10px;color:var(--muted);margin-top:2px}
  /* 07-16 (Peter): the saturated purple gradient read too loud — quiet
     lavender tint + brand Radiant Purple border keeps the card the winner
     without shouting. */
  .tc-card.tc-b4c{background:#F8F1FE;border:2px solid #B063FF;
    box-shadow:0 20px 40px -22px rgba(122,31,208,.35);transform:scale(1.045)}
  @media(max-width:680px){.tc-card.tc-b4c{transform:none}}
  .tc-card.tc-b4c .tc-row{border-top-color:rgba(47,1,85,.12)}
  .tc-card.tc-b4c .tc-price{color:#7A1FD0}
  .tuitcmp .tc-foot{font-size:11.5px;color:var(--muted);margin:14px 0 0;line-height:1.5}
  .band-title.wide{max-width:22em}
  .rule{height:4px;width:60px;border-radius:2px;background:var(--accent,#7A1FD0);margin:20px 0 8px}
  .band-lead{color:var(--muted);max-width:62ch;margin-top:16px;font-size:16px;line-height:1.6}
  .band-lead b{color:var(--ink);font-weight:700}
  .band .caption{font-size:13px;color:var(--muted);margin-top:20px;max-width:64ch;line-height:1.55}

  /* ACCENT = MEANING, not decoration. ONE accent per section, and the colour
     tells the reader which story they're in — so consecutive sections that share
     a colour read as one chapter, while the alternating ground still separates them.
       coral  · cost, risk, urgency   → control (the ask), should-you-wait, what it costs
       purple · the raise itself      → your raise, what it adds up to, the CTA
       green  · value you gain        → pension, how fast it pays back, what you get back
       grey   · legal / trust         → is this accurate
     Purple was on 5 of 10 bands and meant nothing; it's now on 3 and means "the raise".
     (`acc-ink` was a dark-band relic aliasing purple — removed with `band--ink`.) */
  .acc-coral{--accent:var(--rose);--accent-lite:var(--coral-soft)}
  .acc-purple{--accent:var(--purple-text)}
  .acc-green{--accent:var(--green-deep)}
  .acc-grey{--accent:#7c7590}

  /* ---- topbar (now sits inside the first band's wrap) ---- */
  .band .topbar{max-width:none;width:100%;margin:0 0 30px;padding:0}

  /* ---- section 1: control ---- */
  .hero-h{font-size:clamp(28px,4.4vw,44px);font-weight:800;line-height:1.08;letter-spacing:-.025em;text-wrap:balance;max-width:16em;margin:6px 0 0}
  .hero-h .you{position:relative;white-space:nowrap;color:var(--rose)}
  .hero-h .you svg{position:absolute;left:-2%;bottom:-.34em;width:104%;height:.42em;overflow:visible}
  /* 07-16 (Peter): NO green in the form-fields section — full warm coral,
     all hexes brand (#EF8471 family, Jan-2026 guidelines). Green remains the
     money color in the charts below only. */
  .control{margin-top:34px;background:linear-gradient(150deg,#FDF3F1 0%,#FEF6F3 55%,#FFF6EF 100%);border:1.5px solid #F8D5CB;border-radius:22px;padding:22px;box-shadow:0 18px 44px rgba(239,132,113,.14)}
  .control-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:end}
  @media(max-width:820px){.control-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:520px){.control-grid{grid-template-columns:1fr}}
  .control .field label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--rose);margin-bottom:7px}
  .control .field input[type=number],.control .field select{
    width:100%;background:#fff;border:1.5px solid #F5D2C8;border-radius:12px;
    padding:12px 14px;font-size:15px;font-weight:600;color:var(--ink);
    font-family:'Poppins',sans-serif;min-height:48px;appearance:none;
    box-shadow:0 2px 6px rgba(239,132,113,.06);transition:border-color .15s,box-shadow .15s
  }
  .control .field select{
    cursor:pointer;padding-right:34px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23C75C46' stroke-width='2.4'%3E%3Cpath d='M3.5 5l3.5 3.5L10.5 5'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 14px center
  }
  .control .field input:hover,.control .field select:hover{border-color:var(--rose)}
  .control .field input:focus,.control .field select:focus{outline:none;border-color:var(--rose);box-shadow:0 0 0 4px rgba(239,132,113,.18)}
  .acc-coral .backlink{color:var(--rose);margin-top:16px}
  .acc-coral #qualNote,.acc-green #qualNote{max-width:70ch}

  /* ---- district switcher (round 17): typeahead over the same field chrome ---- */
  .locfield{position:relative}
  .control .field input#loc_search{
    width:100%;background:#fff;border:1.5px solid #F1CFC3;border-radius:12px;
    padding:12px 14px;font-size:15px;font-weight:600;color:var(--ink);
    font-family:'Poppins',sans-serif;min-height:48px;appearance:none;
    box-shadow:0 2px 6px rgba(199,92,70,.05);transition:border-color .15s,box-shadow .15s
  }
  .control .field input#loc_search:hover{border-color:var(--rose)}
  .control .field input#loc_search:focus{outline:none;border-color:var(--rose);box-shadow:0 0 0 4px rgba(199,92,70,.15)}
  .locresults{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;background:#fff;
    border:1.5px solid #F1CFC3;border-radius:12px;box-shadow:0 18px 44px rgba(47,1,85,.14);
    max-height:280px;overflow-y:auto}
  .locresults[hidden]{display:none}
  .locopt{display:flex;justify-content:space-between;gap:10px;width:100%;text-align:left;
    padding:11px 14px;border:none;background:#fff;cursor:pointer;font-family:'Poppins',sans-serif;
    font-size:14px;font-weight:600;color:var(--ink);border-bottom:1px solid #F7ECE6}
  .locopt:last-child{border-bottom:none}
  .locopt:hover,.locopt:focus{background:rgba(239,132,113,.12);outline:none}
  .locopt .lst{color:var(--muted);font-weight:500;font-size:12.5px;flex:0 0 auto}
  .locnote{padding:12px 14px;font-size:12.5px;line-height:1.55;color:var(--ink)}
  .locnote b{font-weight:700}
  .locnote a{color:var(--rose);font-weight:700}

  /* ---- section 2: raise (two-col) ---- */
  .two{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;margin-top:36px;align-items:start}
  @media(max-width:860px){.two{grid-template-columns:1fr;gap:34px}}
  .stripanchor{font-size:12px;color:var(--muted);font-weight:500;margin-bottom:10px;text-align:right}
  /* the handwritten "+$X a year" annotation rides the YOU → MASTER'S arrow.
     Green: it's money gained (Bond, 07-13). */
  .raise-note{margin:10px 0 4px;font-size:clamp(17px,2.2vw,21px);color:var(--green-deep);display:flex;align-items:center;justify-content:flex-end;gap:8px;padding-right:4px}
  .raise-note:empty{display:none}
  @media(max-width:620px){.raise-note{justify-content:flex-start;margin-top:12px}}
  /* ── YOU → MASTER'S arrow (07-16, Peter): a drawn arc linking the two tiles,
     the cursive amount riding its crest. Desktop only — on narrow screens the
     tiles wrap 2×2, the svg hides, and .raise-note falls back to the flow
     placement above. The strip reserves headroom for the arc via padding. */
  .lw-side{position:relative}
  #stripArcSvg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;display:block}
  @media(min-width:561px){.lanewrap .lanestrip{padding-top:58px}}
  @media(max-width:560px){#stripArcSvg{display:none}}
  .raise-note.arcmode{position:absolute;margin:0;padding:0;justify-content:flex-end;transform:translateX(-100%);white-space:nowrap;z-index:2}
  body.pick-district #stripArcSvg{display:none}
  .chart-label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:22px 0 6px}
  .chart-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .chart-scroll > svg{display:block;width:100%;height:auto;max-width:100%}
  #sec-raise .chartlegend{margin-top:8px}

  /* ---- raise graphic (07-13 revert): ONE layout — horizontal lane boxes on
     top, the gap chart below. The every-lane chart, its step slider, and the
     vertical tile stack are gone. ---- */
  .lanewrap{display:flex;flex-direction:column;margin-top:24px}
  .lanewrap > *{min-width:0}
  .lanewrap .stripanchor{margin-bottom:10px}

  /* ---- mini-map: ONE schedule graphic (stepper + grid + readout in one card) ---- */
  .mmwrap{background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:16px;box-shadow:0 14px 40px rgba(47,1,85,.07)}
  .mmwrap .mini-left{border:none;border-radius:0;background:none;padding:0;box-shadow:none}
  .mini-nav{display:flex;align-items:center;justify-content:center;gap:8px;margin:10px 0 12px}
  .mini-nav button{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--purple-text,#7A1FD0);font-size:11px;cursor:pointer;font-family:'Poppins',sans-serif;line-height:1;transition:background .12s,border-color .12s}
  .mini-nav button:hover:not(:disabled){background:rgba(149,52,248,.08);border-color:var(--purple)}
  .mini-nav button:disabled{opacity:.35;cursor:default}
  .mini-steplbl{font-size:12.5px;font-weight:800;color:var(--ink);min-width:104px;text-align:center;background:var(--purple-soft,#F3EAFE);border-radius:100px;padding:6px 12px}
  /* lanes scroll horizontally INSIDE the card when a district posts more than ~4.
     min-width:0 down the grid-item chain, or `min-width:auto` lets the wide grid
     inflate its column and the whole page scrolls sideways instead. */
  .two > *{min-width:0}
  .mmwrap,.mmwrap .mini-left{min-width:0}
  .mini-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;max-width:100%}
  .mini-grid{min-width:calc(46px + var(--mini-cols,4) * 54px)}
  /* cap the ladder so the card tracks the left column instead of running the section long */
  .mmwrap .mini-rows{max-height:clamp(230px,32vh,340px);overflow-y:auto;scrollbar-width:thin;padding-right:2px}
  .mini-grid .mini-colhd,.mini-grid .mini-row{grid-template-columns:46px repeat(var(--mini-cols,4),minmax(48px,1fr))}
  .mini-colhd .youcol{color:var(--ink);font-weight:800}
  .mbar.other{opacity:.4}
  /* keep "Step N" pinned while the lanes scroll under it */
  .mini-grid .mini-row .mr-lbl,.mini-grid .mini-colhd > span:first-child{position:sticky;left:0;z-index:2;background:#fff}
  .mini-row.sel .mr-lbl{background:#fff}
  .mini-readout{margin-top:12px;background:var(--purple-soft,#F3EAFE);border-radius:12px;padding:11px 13px;font-size:12.5px;line-height:1.55;color:var(--ink)}
  .mini-hedge{display:block;margin-top:5px;font-size:10.5px;font-weight:500;color:var(--muted);line-height:1.4}

  /* ---- "as an investment, per year" — restored graphic (was flattened to a paragraph) ---- */
  .roicmp{margin-top:18px;border-top:1px dashed var(--line);padding-top:16px}
  .roicmpt{font-size:11.5px;font-weight:600;color:var(--muted);text-align:center;margin-bottom:12px}
  .roicmprow{display:flex;align-items:center;justify-content:center;gap:12px}
  .roimini{flex:1;max-width:220px;border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;text-align:center;background:var(--cream)}
  .roimini.win{border-color:rgba(53,199,145,.5);background:var(--green-soft,#EAF7F0)}
  .roimini .k{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
  .roimini .v{font-size:clamp(22px,2.8vw,28px);font-weight:800;letter-spacing:-.02em;margin-top:3px;line-height:1.05}
  .roimini.win .v{color:var(--green-deep)}
  .roimini.mkt .v{color:var(--muted)}
  .roimini .s{font-size:9.5px;color:var(--muted);margin-top:3px;line-height:1.35}
  .roivs{font-size:11px;font-weight:800;color:var(--muted)}
  .roinote{font-size:10.5px;color:var(--muted);text-align:center;margin-top:12px;line-height:1.5;max-width:70ch;margin-left:auto;margin-right:auto}
  @media(max-width:520px){.roicmprow{flex-direction:column}.roimini{max-width:none;width:100%}}

  /* Ghost waterfall rows: the levers that COULD reduce the cost but are never subtracted. */
  .wfrow.ghost{opacity:.85}
  .wfrow.ghost .wlbl{color:var(--muted);font-weight:600}
  .wfrow.ghost .wbar{background:repeating-linear-gradient(45deg,rgba(47,1,85,.14) 0 5px,transparent 5px 10px);border:1px dashed rgba(47,1,85,.3)}
  .wfrow.ghost .wamt{color:var(--muted);font-weight:700}
  .wfrow.ghost .wamt small{display:block;font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:1px}

  /* Pension card: make the pay + pension = total addition visible once. */
  .pentotal{margin-top:14px;background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:10px 13px;font-size:12.5px;line-height:1.5;color:var(--muted)}
  .pentotal b{color:var(--ink);font-weight:800}

  /* Mini-map ladder: fade whichever edge has more content, so the scroll is discoverable. */
  .mmwrap .mini-rows.fade-top{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18px);mask-image:linear-gradient(180deg,transparent 0,#000 18px)}
  .mmwrap .mini-rows.fade-bot{-webkit-mask-image:linear-gradient(0deg,transparent 0,#000 18px);mask-image:linear-gradient(0deg,transparent 0,#000 18px)}
  .mmwrap .mini-rows.fade-top.fade-bot{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%)}

  .source-line{margin-top:18px;font-size:12.5px;line-height:1.6;color:var(--muted);max-width:70ch}
  .source-line b{color:var(--ink)}
  .source-line:empty{display:none}
  /* Primary: the teacher's own schedule. Secondary: everything else, quieter. */
  .sched-link{display:inline-block;font-size:14px;font-weight:800;color:var(--purple-text,#7A1FD0);text-decoration:none;
    background:#fff;border:1.5px solid rgba(149,52,248,.3);border-radius:100px;padding:10px 18px;margin-bottom:12px;
    box-shadow:0 8px 22px -14px rgba(149,52,248,.6);transition:transform .15s,border-color .15s}
  .sched-link:hover{transform:translateY(-1px);border-color:var(--purple)}
  .sched-link:focus-visible{outline:3px solid rgba(149,52,248,.35);outline-offset:2px}
  .src-sec{display:block}

  /* Recency/provenance footnote — the visible "we checked" trust signal */
  .fed-footnote{margin-top:14px;font-size:11px;line-height:1.55;color:var(--muted);background:var(--green-soft,#EAF7F0);border:1px solid rgba(53,199,145,.22);border-radius:10px;padding:9px 12px}
  .fed-footnote b{color:var(--green-deep,#0E7A4A);font-weight:800}
  .fed-footnote a{color:var(--green-deep,#0E7A4A);font-weight:700}

  .fafsa-link{display:inline-block;margin-top:10px;margin-right:16px;font-size:12.5px;font-weight:700;color:var(--purple-text,#7A1FD0);text-decoration:none;border-bottom:1.5px solid rgba(149,52,248,.35);padding-bottom:1px}
  .fafsa-link:hover{border-bottom-color:var(--purple)}
  .fafsa-link:focus-visible{outline:3px solid rgba(149,52,248,.35);outline-offset:2px;border-radius:3px}

  /* ---- section 3: what it adds up to (warm white card) ---- */
  .bigcard{background:#fff;border:1px solid var(--line);border-radius:24px;padding:clamp(20px,2.6vw,30px);margin-top:22px;box-shadow:0 26px 60px -30px rgba(47,1,85,.26)}
  .bigcard .sl-hero-k{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.01em}
  /* career total = money gained → GREEN (Bond, 07-13) */
  .addup-hero{font-size:clamp(38px,6vw,60px);font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--green-deep);margin-top:6px}
  .bigcard .herosub{color:var(--muted);font-size:15px;margin-top:10px}
  /* tiles hug their content; the numbers — not the boxes — carry the weight */
  .addrows{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:20px;background:none;border-radius:0;overflow:visible}
  @media(max-width:620px){.addrows{grid-template-columns:1fr}}
  .addrows .r{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:12px 16px}
  .addrows .r .k{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
  .addrows .r .v{font-size:clamp(28px,3.4vw,34px);font-weight:800;color:var(--green-deep);margin-top:2px;line-height:1.05;letter-spacing:-.02em}

  /* ---- section 4: pension — size parity with the adds-up card ---- */
  .acc-green .penslip{margin-top:22px;max-width:none;border-radius:24px;box-shadow:0 26px 60px -30px rgba(47,1,85,.26)}
  .penslip-body{padding-left:clamp(20px,2.6vw,30px);padding-right:clamp(20px,2.6vw,30px)}
  .penslip-top{padding-left:clamp(20px,2.6vw,30px);padding-right:clamp(20px,2.6vw,30px)}
  .penbanner{padding-left:clamp(20px,2.6vw,30px);padding-right:clamp(20px,2.6vw,30px)}
  /* the no-Social-Security callout was a dark purple band; make it a warm callout */
  .penbanner{background:var(--rose-soft,#FDF3F1);color:var(--ink);font-size:12.5px;font-weight:600;line-height:1.5;padding:12px 18px;border-bottom:1px solid rgba(199,92,70,.18)}
  .penstats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:16px 0 6px}
  @media(max-width:620px){.penstats{grid-template-columns:1fr}}
  .penstat{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:12px 16px}
  .penstat-k{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
  .penstat-v{font-size:clamp(28px,3.4vw,34px);font-weight:800;color:var(--ink);margin-top:2px;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
  .penstat-v.purple{color:var(--purple-text,#7A1FD0)}
  .penstat-v .per{font-size:.42em;font-weight:600;color:var(--muted)}
  /* the state is the proof this is customized — make it read, not hide at 10px */
  .penslip-hdr #pen_sys{font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--green-deep,#0E7A4A);background:#fff;border:1px solid rgba(53,199,145,.3);border-radius:100px;padding:6px 13px;white-space:nowrap;text-align:right}
  /* the dynamic, per-state variable we actually scraped */
  .penformula{margin-top:14px;font-size:12.5px;line-height:1.55;color:var(--muted);background:var(--green-soft,#EAF7F0);border:1px solid rgba(53,199,145,.22);border-radius:12px;padding:11px 14px}
  .penformula b{color:var(--green-deep,#0E7A4A);font-weight:800}
  .penslip-body .penfoot{font-size:12.5px;line-height:1.55;color:var(--muted);padding:12px 0 16px}

  /* ---- section 6: should you wait? — calmer readout ----
     NOTE: four rules here targeted `.sec-wait` (a CLASS) but the section is
     `id="sec-wait"`, so none of them ever applied — including a max-width:680px
     that would have shrunk the wait card by a third. Deleted rather than
     "fixed": activating never-live CSS is a silent layout change, not a bugfix.
     The slider accent is re-added correctly, matching sec-wait's coral accent. */
  #wc_slider{accent-color:var(--rose)}

  /* ---- section 7: real cost ---- */
  #sec-cost .aid-hero{margin-top:0}
  #sec-cost .togglebar{margin:22px 0 0}
  #sec-cost .togglebar .lbl{margin-right:6px}

  /* ---- section 8: split-screen (warm white cards) ---- */
  .split{display:grid;grid-template-columns:1.05fr .95fr;gap:20px;margin-top:32px;background:none;border-radius:0;overflow:visible}
  @media(max-width:820px){.split{grid-template-columns:1fr}}
  .split .half{background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(22px,3vw,30px);box-shadow:0 20px 50px -30px rgba(47,1,85,.22)}
  .split .half h3{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--purple-text);margin-bottom:20px}
  .split .rbar{margin:16px 0}
  .split .rbar .rl{display:flex;justify-content:space-between;gap:12px;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:7px}
  .split .rbar .rl .num{font-weight:800}
  .split .rbar .rl .get{color:var(--green-deep)}
  #roi_get{color:var(--green-deep)}
  .split .rbar .track{height:22px;border-radius:8px;background:#f4f0fa;overflow:hidden}
  .split .rbar .fill{display:block;height:100%;border-radius:8px;transition:width .5s ease}
  .split .rbar .fill.pay{background:var(--rose)}
  .split .rbar .fill.get{background:linear-gradient(90deg,var(--green-deep),var(--green))}
  .split .rcaveat{font-size:20px;color:var(--green-deep);margin:18px 0 12px;font-family:'Caveat',cursive;font-weight:700;line-height:1.2}
  .split .compare{font-size:14px;color:var(--muted);line-height:1.55}
  .split .compare b{color:var(--ink);font-weight:800}
  .split .pay-opt{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:12px}
  .split .pay-opt:last-child{margin-bottom:0}
  .split .pay-opt .k{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--purple-text)}
  .split .pay-opt .v{font-size:18px;font-weight:800;color:var(--ink);margin:7px 0 5px}
  .split .pay-opt .d{font-size:13px;color:var(--muted);line-height:1.45}
  /* master's-vs-market line chart (07-14, layout A per Peter): chart and ROI
     bars side by side at half width; below, the cost+pay full row (mockup 2,
     Peter's pick): deducting bars left, payment cards stacked right */
  .split .half.full{grid-column:1/-1}
  .costpay{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;align-items:start}
  @media(max-width:820px){.costpay{grid-template-columns:1fr}}
  .costpay .wfall{margin-top:0}
  .paycol{display:flex;flex-direction:column;gap:14px}
  .paycol .pay-opt{margin-bottom:0}
  svg.mktchart{width:100%;height:auto;display:block;overflow:visible}
  .split .chartlegend{margin-top:10px}
  /* Bond 07-14: the plain-words net line under the pay-vs-get-back bars */
  .roinet{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
    border-top:2px solid var(--ink);margin-top:4px;padding-top:12px}
  .roinet .k{font-size:13px;font-weight:700;color:var(--ink)}
  .roinet .v{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--green-deep)}

  /* ---- section 9: trust ---- */
  .trustlink{display:inline-flex;align-items:center;gap:8px;margin-top:22px;text-decoration:none;font-weight:700;font-size:15px;color:var(--purple-text);border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:12px 18px;transition:border-color .15s,box-shadow .15s}
  .trustlink:hover{border-color:var(--purple);box-shadow:0 6px 18px rgba(149,52,248,.12)}
  .band--grey .fine{padding:0;margin-top:24px;max-width:74ch;color:#6a5c7d}

  /* Trust band spans the SAME 1080px wrap as every other band — a narrower one
     reads as broken. Its three blocks each carried their own measure (62ch / 70ch
     / 74ch) and left-aligned, so they ended at three ragged right edges with a
     dead right half. Fixed with the page's own two-column idiom: full width, and
     each column keeps a readable measure. Left = the plain answer + this district's
     schedule; right = the legal. ID beats the class rules above; no !important. */
  #sec-accurate .acc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);align-items:start;margin-top:20px}
  #sec-accurate .acc-grid > *{min-width:0}
  #sec-accurate .band-lead,
  #sec-accurate .source-line,
  #sec-accurate .fine{max-width:100%}
  #sec-accurate .band-lead{margin-top:0}
  #sec-accurate .fine{margin-top:0;line-height:1.75}
  @media(max-width:820px){#sec-accurate .acc-grid{grid-template-columns:1fr;gap:26px}}

  /* ---- section 10: CTA (warm cream; the gradient pill is the climax) ---- */
  .band--cta{
    background:
      radial-gradient(680px 380px at 50% -25%, rgba(149,52,248,.10), transparent 62%),
      radial-gradient(560px 360px at 50% 125%, rgba(239,132,113,.20), transparent 60%),
      var(--cream);
    text-align:center
  }
  .cta-h{font-size:clamp(24px,3.4vw,34px);font-weight:800;color:var(--ink);letter-spacing:-.02em;text-wrap:balance;max-width:18em;margin:0 auto}
  .band--cta .ctarow{justify-content:center;align-items:center;margin-top:28px;gap:12px}
  .band--cta .cta-email{flex:0 1 340px;min-width:260px;background:#fff;border:1.5px solid var(--line)}
  .band--cta .cta-btn{
    background:linear-gradient(135deg,var(--purple),var(--rose));
    color:#fff;font-size:16px;font-weight:800;padding:16px 34px;
    box-shadow:0 18px 40px -12px rgba(149,52,248,.55)
  }
  .band--cta .cta-btn:hover{transform:translateY(-2px)}
  .band--cta .cta-btn.sent{background:linear-gradient(135deg,var(--green),var(--green-deep));color:#fff;box-shadow:0 18px 40px -12px rgba(53,199,145,.5)}
  .band--cta .proof{color:var(--muted);max-width:34ch}
  .band--cta .proof b{color:var(--ink)}

  @media(prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}