:root{
    --ink:#0e2434;
    --body:#2f3e49;
    --muted:#6d7d89;
    --faint:#93a1ab;
    --rule:#d7dee4;
    --rule-soft:#e8edf1;
    --head:#eef2f5;
    --panel:#f7f9fa;
    --green:#1d6f42;
    --green-soft:#e8f3ed;
    --red:#9c2a21;
    --white:#fff;

    --serif:"Iowan Old Style","Charter","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
    --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
    --mono:"SF Mono",ui-monospace,"Menlo","Consolas","Liberation Mono",monospace;

    --wrap:1140px;
  }

  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
  body{
    margin:0;font-family:var(--sans);font-size:16.5px;line-height:1.6;
    color:var(--body);background:var(--white);-webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}

  h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);font-weight:600;letter-spacing:-.015em;margin:0}
  h1{font-size:clamp(2.1rem,4.6vw,3.35rem);line-height:1.1;letter-spacing:-.025em}
  h2{font-size:clamp(1.5rem,2.5vw,2.05rem);line-height:1.18}
  h3{font-size:1.1rem;line-height:1.32}
  p{margin:0 0 1em}
  a{color:var(--ink)}

  .eyebrow{font-size:.69rem;letter-spacing:.17em;text-transform:uppercase;font-weight:700;color:var(--muted);font-family:var(--sans)}
  .lede{font-size:1.08rem;color:var(--body);max-width:56ch}
  .num{font-family:var(--mono);font-variant-numeric:tabular-nums}

  .btn{
    display:inline-block;background:var(--ink);color:var(--white);text-decoration:none;
    font-weight:600;font-size:.91rem;padding:13px 22px;border-radius:2px;
    border:1px solid var(--ink);transition:background .14s ease,border-color .14s ease;
  }
  .btn:hover{background:#17384f;border-color:#17384f}
  .btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--rule)}
  .btn-ghost:hover{background:var(--panel);border-color:var(--muted)}

  /* focus + selection */
  a:focus-visible,.btn:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:2px}
  ::selection{background:var(--green-soft);color:var(--ink)}
  .skip{
    position:absolute;left:-9999px;top:0;z-index:100;
    background:var(--ink);color:var(--white);padding:12px 18px;font-size:.88rem;text-decoration:none;
  }
  .skip:focus{left:12px;top:12px}

  /* ---------- utility ---------- */
  .util{background:var(--ink);color:#c6d4de;font-size:.775rem}
  .util .wrap{display:flex;justify-content:space-between;align-items:center;gap:18px;height:38px}
  .util a{color:#fff;text-decoration:none}
  .util .sep{color:#44627a;margin:0 10px}

  /* ---------- nav ---------- */
  .nav{border-bottom:1px solid var(--rule);background:var(--white);position:sticky;top:0;z-index:40}
  .nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
  .brand{display:flex;align-items:baseline;gap:11px;text-decoration:none}
  .brand .mark{
    font-family:var(--mono);font-size:.72rem;font-weight:700;color:var(--white);
    background:var(--green);padding:5px 7px;border-radius:2px;position:relative;top:-2px;
  }
  .brand .nm{font-family:var(--serif);font-size:1.2rem;color:var(--ink);font-weight:600}
  .brand .cred{font-size:.67rem;letter-spacing:.14em;color:var(--muted);font-weight:700}
  .navlinks{display:flex;gap:28px;align-items:center}
  .navlinks a{text-decoration:none;color:var(--body);font-size:.875rem;padding-bottom:3px;border-bottom:2px solid transparent}
  .navlinks a:hover{color:var(--ink);border-bottom-color:var(--green)}
  /* The button is also a .navlinks a, which would otherwise repaint its text
     dark on the dark fill and add an underline. Restate it with higher
     specificity rather than relying on source order. */
  .navlinks a.btn,
  .navlinks a.btn:hover{
    color:var(--white);border-bottom:1px solid var(--ink);padding:11px 20px;
  }
  .navlinks a.btn:hover{border-bottom-color:#17384f}

  /* ---------- formula bar ---------- */
  .fbar{border-bottom:1px solid var(--rule);background:var(--panel);font-family:var(--mono);font-size:.76rem;color:var(--muted)}
  .fbar .wrap{display:flex;align-items:stretch;height:35px}
  .fbar .cellref{display:flex;align-items:center;min-width:88px;border-right:1px solid var(--rule);color:var(--ink)}
  .fbar .fx{display:flex;align-items:center;padding:0 14px;border-right:1px solid var(--rule);font-style:italic;color:var(--faint)}
  .fbar .formula{display:flex;align-items:center;padding-left:14px;color:var(--green);white-space:nowrap;overflow:hidden}

  /* ================= HERO — CUT-OUT ON SPREADSHEET GRID ================= */
  /*
     The portrait is a background-removed cut-out, so the hero is LIGHT.
     White-on-white means the mask edge is never visible — on a dark
     background a white shirt would show a hard, pasted-looking outline.

     Save the image as a TRANSPARENT PNG at assets/david.png.
     If your file has a solid white background instead of transparency,
     set --grid to transparent below and the grid will disappear
     (the figure will still sit cleanly on white).
  */
  .hero{
    --grid:#e7edf1;
    position:relative;background:#fff;overflow:hidden;
    border-bottom:1px solid var(--rule);
  }
  .hero:before{
    content:"";position:absolute;inset:0;z-index:0;
    background-image:
      linear-gradient(to right, var(--grid) 1px, transparent 1px),
      linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
    background-size:92px 42px;
    -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
    mask-image:linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
  }
  .hero .wrap{
    position:relative;z-index:2;
    display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;
    padding-top:76px;
  }
  .hero-copy{padding-bottom:88px}
  .hero h1{margin:16px 0 20px}
  .hero .lede{font-size:1.16rem;margin-bottom:30px;max-width:40ch}
  .hero-cta{display:flex;gap:12px;flex-wrap:wrap}
  .hero-badge{
    margin-top:30px;padding-top:20px;border-top:1px solid var(--rule);
    display:flex;gap:26px;flex-wrap:wrap;font-size:.84rem;color:var(--muted);
  }
  .hero-badge b{color:var(--ink);font-weight:600}

  /* the cut-out figure */
  .figure{position:relative;display:flex;justify-content:center;align-items:flex-end}
  .figure:before{
    /* soft grounding shadow so he doesn't float */
    content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);
    width:62%;height:26px;border-radius:50%;
    background:radial-gradient(ellipse at center, rgba(14,36,52,.16) 0%, rgba(14,36,52,0) 70%);
  }
  .figure picture{position:relative;display:block;width:100%;max-width:420px}
  .figure img{
    position:relative;display:block;width:100%;height:auto;
    /* lift the subject slightly out of pure white */
    filter:contrast(1.03) saturate(.96) drop-shadow(0 18px 26px rgba(14,36,52,.10));
  }

  /* spreadsheet card sits below the hero in normal flow */
  .sheet-lift{margin-top:52px;margin-bottom:0;position:relative;z-index:5}
  .sheet{
    border:1px solid var(--rule);background:var(--white);
    box-shadow:0 2px 4px rgba(14,36,52,.06),0 26px 60px -24px rgba(14,36,52,.45);
  }
  .sheet-bar{
    display:flex;align-items:center;justify-content:space-between;padding:9px 14px;
    background:var(--head);border-bottom:1px solid var(--rule);
    font-family:var(--mono);font-size:.715rem;color:var(--muted);
  }
  .sheet-bar .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:7px}
  table.ss{border-collapse:collapse;width:100%;font-size:.82rem;table-layout:fixed}
  table.ss th,table.ss td{border:1px solid var(--rule-soft);padding:7px 12px;text-align:right}
  table.ss th{background:var(--head);color:var(--faint);font-family:var(--mono);font-weight:500;font-size:.68rem;text-align:center;padding:4px 0}
  table.ss td.rn{background:var(--head);color:var(--faint);font-family:var(--mono);font-size:.66rem;text-align:center;width:32px;padding:7px 0}
  table.ss td.lbl{text-align:left}
  table.ss td.val{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
  table.ss tr.rule td{border-top:1.5px solid var(--ink)}
  table.ss tr.bold td{font-weight:700;color:var(--ink)}
  table.ss td.pos{color:var(--green);font-family:var(--mono)}
  table.ss td.sel{outline:2px solid var(--green);outline-offset:-2px;background:var(--green-soft)}
  table.ss tr.sub td.lbl{padding-left:22px;color:var(--muted);font-size:.78rem}
  /* ---------- sections ---------- */
  /* the nav is sticky at 72px, so anchors must clear it */
  section[id]{scroll-margin-top:74px}
  section{padding:78px 0;border-bottom:1px solid var(--rule-soft)}
  .sec-head{max-width:60ch;margin-bottom:38px}
  .sec-head .eyebrow{display:block;margin-bottom:13px}
  .sec-head h2{margin-bottom:14px}

  /* ---------- stats ---------- */
  .band{background:var(--panel);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:0}
  .stats{display:grid;grid-template-columns:repeat(4,1fr)}
  .stat{padding:32px 26px;border-right:1px solid var(--rule)}
  .stat:last-child{border-right:none}
  .stat .f{font-family:var(--mono);font-size:1.9rem;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.1}
  .stat .f small{font-size:.95rem;color:var(--muted);font-weight:400}
  .stat .t{font-size:.84rem;color:var(--muted);margin-top:8px;line-height:1.4}
  .stat .t sup{font-size:.62rem;color:var(--green);font-weight:700}
  .bandnote{
    margin:0;padding:16px 26px 22px;font-size:.755rem;line-height:1.55;color:var(--faint);
    max-width:88ch;border-top:1px solid var(--rule);
  }
  .bandnote sup{color:var(--green);font-weight:700}

  /* ---------- services table ---------- */
  /* On a narrow phone the two remaining columns cannot both stay legible,
     so the table scrolls inside this box rather than widening the page. */
  .dt-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .dt{width:100%;border-collapse:collapse;border:1px solid var(--rule);font-size:.93rem}
  .dt thead th{
    background:var(--head);border:1px solid var(--rule);font-size:.69rem;letter-spacing:.13em;
    text-transform:uppercase;color:var(--muted);font-weight:700;text-align:left;padding:12px 16px;
  }
  .dt td{border:1px solid var(--rule-soft);padding:14px 16px;vertical-align:middle}
  .dt td.svc{width:32%;color:var(--ink);font-weight:600}
  .dt td.desc{color:var(--muted);font-size:.91rem}
  .dt tbody tr:hover td{background:#fbfcfd}

  /* The tier cell spans its group's rows, so the three levels read as three
     blocks rather than nine undifferentiated lines. */
  .dt thead th.h-tier,.dt .tcell{width:242px}
  .dt .tcell{
    background:var(--panel);border:1px solid var(--rule);
    vertical-align:top;text-align:left;padding:17px 16px;font-weight:400;
  }
  .dt .tcell em{
    display:block;font-style:normal;font-family:var(--mono);font-size:.655rem;
    letter-spacing:.11em;text-transform:uppercase;color:var(--green);font-weight:700;
  }
  .dt .tcell b{
    display:block;font-family:var(--serif);font-size:1.08rem;color:var(--ink);
    font-weight:600;margin:7px 0 5px;line-height:1.25;
  }
  .dt .tcell .inc{
    display:block;margin-top:8px;font-size:.715rem;line-height:1.35;color:var(--green);
  }
  /* Only the first row of a group carries the divider — a bare descendant
     selector here would rule every row in the group. */
  .dt tbody + tbody > tr:first-child > .tcell,
  .dt tbody + tbody > tr:first-child > td{border-top:2px solid var(--ink)}

  /* ---------- scope ---------- */
  .excl{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule)}
  .excl > div{padding:34px 32px}
  .excl .yes{border-right:1px solid var(--rule)}
  .excl .no{background:var(--panel)}
  .excl .cap{font-family:var(--mono);font-size:.69rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
  .excl h3{margin-bottom:16px}
  .excl ul{list-style:none;margin:0;padding:0}
  .excl li{padding:8px 0 8px 25px;border-bottom:1px solid var(--rule-soft);font-size:.92rem;position:relative}
  .excl li:last-child{border-bottom:none}
  .excl .yes li:before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:700}
  .excl .no li:before{content:"—";position:absolute;left:0;color:var(--faint)}
  .excl .no li{color:var(--muted)}

  /* ---------- pricing ---------- */
  .price{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--rule)}
  .pcol{border-right:1px solid var(--rule);display:flex;flex-direction:column}
  .pcol:last-child{border-right:none}
  .pcol.feat{background:var(--panel)}
  .pcol .ph{padding:26px 24px 22px;border-bottom:1px solid var(--rule)}
  .pcol .tag{font-family:var(--mono);font-size:.67rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:11px;display:block}
  .pcol.feat .tag{color:var(--green);font-weight:700}
  .pcol h3{margin-bottom:7px}
  .pcol .amt{font-family:var(--mono);font-size:2rem;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-top:18px;line-height:1}
  .pcol .amt small{font-size:.78rem;color:var(--muted);font-family:var(--sans);letter-spacing:0}
  .pcol .per{font-size:.76rem;color:var(--faint);margin-top:6px;font-family:var(--mono)}
  /* Every tier carries this band, including Account, so the bullet lists below
     stay on the same baseline across the three columns. */
  .incl{
    padding:11px 24px;border-bottom:1px solid var(--rule);
    background:var(--green-soft);font-family:var(--mono);
    font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--green);
  }
  .incl b{font-weight:700}
  .pcol ul{list-style:none;margin:0;padding:20px 24px;flex:1}
  .pcol li{font-size:.875rem;padding:7px 0 7px 21px;position:relative;color:var(--body);border-bottom:1px solid var(--rule-soft)}
  .pcol li:last-child{border-bottom:none}
  .pcol li:before{content:"✓";position:absolute;left:0;color:var(--green);font-size:.8rem}
  .pcol .pf{padding:0 24px 24px}
  .pcol .pf a{display:block;text-align:center}

  .oneoff{margin-top:22px;border:1px solid var(--rule);display:grid;grid-template-columns:1fr}
  .oneoff > div{padding:24px 26px;border-right:1px solid var(--rule)}
  .oneoff > div:last-child{border-right:none}
  .oneoff .tag{font-family:var(--mono);font-size:.67rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:8px}
  .oneoff h4{font-size:1rem;margin-bottom:6px}
  .oneoff p{font-size:.87rem;color:var(--muted);margin:0 0 10px}
  .oneoff .amt{font-family:var(--mono);font-size:1.2rem;color:var(--ink);font-variant-numeric:tabular-nums}
  .pnote{margin-top:18px;font-size:.84rem;color:var(--muted)}

  /* ---------- process ---------- */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--rule)}
  .step{padding:28px 24px;border-right:1px solid var(--rule)}
  .step:last-child{border-right:none}
  .step .n{font-family:var(--mono);font-size:.71rem;color:var(--white);background:var(--ink);width:23px;height:23px;display:flex;align-items:center;justify-content:center;border-radius:2px;margin-bottom:14px}
  .step h3{font-size:1rem;margin-bottom:7px}
  .step p{font-size:.875rem;color:var(--muted);margin:0}

  /* ---------- faq ---------- */
  .faq{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule)}
  .faq > div{border-right:1px solid var(--rule)}
  .faq > div:last-child{border-right:none}
  .faq details{border-bottom:1px solid var(--rule-soft)}
  .faq > div > details:last-child{border-bottom:none}
  .faq summary{
    cursor:pointer;list-style:none;padding:17px 44px 17px 22px;position:relative;
    font-weight:600;color:var(--ink);font-size:.93rem;
  }
  .faq summary::-webkit-details-marker{display:none}
  .faq summary:after{
    content:"+";position:absolute;right:20px;top:15px;
    font-family:var(--mono);font-weight:400;color:var(--green);font-size:1.05rem;
  }
  .faq details[open] summary:after{content:"\2013"}
  .faq details[open] summary{padding-bottom:4px}
  .faq summary:hover{background:#fbfcfd}
  .faq .ans{padding:0 44px 18px 22px;font-size:.89rem;color:var(--muted);margin:0}

  /* ---------- about ---------- */
  .about{display:grid;grid-template-columns:1.2fr 1fr;gap:54px;align-items:start}
  .card{border:1px solid var(--rule);background:var(--panel)}
  .card .ch{padding:13px 22px;background:var(--head);border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:.69rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  /* Head-and-shoulders crop of the same cut-out, used small in the About card.
     Values measured from the source image: head top at 11.7%, chin ~28%,
     shoulders from ~31%. Shows roughly y 8.5%-40% of the source. */
  .headshot{
    width:100%;aspect-ratio:3/2;border-bottom:1px solid var(--rule);
    background-color:#fff;
    /* Paths are relative to this stylesheet, which lives in assets/ */
    background-image:url('david.png');
    background-image:image-set(url('david.webp') type("image/webp"),
                               url('david.png') type("image/png"));
    background-size:139% auto;
    background-position:53% 12.5%;
    background-repeat:no-repeat;
  }
  .card dl{margin:0;padding:6px 22px 18px}
  .card dt{font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);margin-top:15px;font-weight:700}
  .card dd{margin:3px 0 0;color:var(--ink);font-size:.93rem}

  /* ---------- cta ---------- */
  .cta{background:var(--ink);color:#cfdbe4;border:none;padding:72px 0}
  .cta h2{color:var(--white);margin-bottom:14px}
  .cta .lede{color:#aec0ce;margin-bottom:26px}
  .cta .eyebrow{color:#7f99ac}
  .cta .btn{background:var(--white);color:var(--ink);border-color:var(--white)}
  .cta .btn:hover{background:#e9eef2}
  .cta .btn-ghost{background:transparent;color:var(--white);border-color:#3c5b72}
  .cta .btn-ghost:hover{background:#17384f}
  .cta-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:52px;align-items:center}
  .cta-list{list-style:none;margin:0;padding:0;border-top:1px solid #27465c}
  .cta-list li{padding:12px 0;border-bottom:1px solid #27465c;font-size:.89rem;display:flex;justify-content:space-between;gap:16px}
  .cta-list li span:last-child{color:var(--white);font-family:var(--mono);font-size:.83rem}

  /* ---------- footer ---------- */
  footer{padding:48px 0 38px;font-size:.85rem;color:var(--muted)}
  .fgrid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:42px;padding-bottom:30px;border-bottom:1px solid var(--rule-soft)}
  footer h4{font-size:.69rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);margin-bottom:13px;font-family:var(--sans);font-weight:700}
  footer ul{list-style:none;margin:0;padding:0}
  footer li{padding:4px 0}
  footer a{color:var(--muted);text-decoration:none}
  footer a:hover{color:var(--ink)}
  .fbot{padding-top:22px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:.78rem;color:var(--faint)}
  .reg{margin-top:12px;font-size:.77rem;color:var(--faint);max-width:50ch;line-height:1.5}

  /* =====================================================================
     MOTION SYSTEM
     Three rules, applied everywhere:
       1. Motion is short (<=.8s) and eased, never bouncy.
       2. Nothing important is hidden until JS runs — .reveal is only
          applied by script, so the page is fully readable without JS.
       3. All of it collapses under prefers-reduced-motion.
     ===================================================================== */
  @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @keyframes gridDrift{from{background-position:0 0,0 0}to{background-position:92px 42px,92px 42px}}
  @keyframes aurora{
    0%  {transform:translate3d(-4%,2%,0) scale(1)}
    50% {transform:translate3d(5%,-4%,0) scale(1.14)}
    100%{transform:translate3d(-4%,2%,0) scale(1)}
  }
  @keyframes cellPulse{0%,100%{opacity:0}10%{opacity:1}38%{opacity:1}55%{opacity:0}}
  @keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}

  /* Hero entrance — staggered 110ms.
     Scoped to html.js so the headline is never hidden unless scripting is
     live to un-hide it. A frozen or blocked animation would otherwise leave
     the most important text on the page invisible. */
  .js .enter{opacity:0;animation:rise .74s cubic-bezier(.22,.7,.3,1) forwards}
  .enter.d1{animation-delay:.11s}
  .enter.d2{animation-delay:.22s}
  .enter.d3{animation-delay:.33s}
  .enter.d4{animation-delay:.44s}
  .enter.d5{animation-delay:.55s}

  /* scroll reveal — class added by script only */
  .reveal{opacity:0;transform:translateY(20px);
    transition:opacity .72s cubic-bezier(.22,.7,.3,1),transform .72s cubic-bezier(.22,.7,.3,1)}
  .reveal.in{opacity:1;transform:none}
  .reveal.s1{transition-delay:.07s}
  .reveal.s2{transition-delay:.14s}
  .reveal.s3{transition-delay:.21s}

  /* scroll progress */
  .progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;pointer-events:none}
  .progress i{display:block;height:100%;width:0;background:var(--green)}

  .nav{transition:box-shadow .22s ease}
  .nav.stuck{box-shadow:0 1px 0 rgba(14,36,52,.05),0 14px 30px -22px rgba(14,36,52,.55)}
  .navlinks a.active{color:var(--ink);border-bottom-color:var(--green)}

  /* living hero background */
  .hero:before{animation:gridDrift 44s linear infinite}
  .aurora{position:absolute;inset:-12% -6% 0 -6%;z-index:0;pointer-events:none;filter:blur(46px)}
  .aurora i{position:absolute;display:block;border-radius:50%}
  .aurora i:nth-child(1){width:46%;height:72%;left:45%;top:-10%;
    background:radial-gradient(circle,rgba(29,111,66,.17),rgba(29,111,66,0) 66%);
    animation:aurora 27s ease-in-out infinite}
  .aurora i:nth-child(2){width:42%;height:64%;left:1%;top:8%;
    background:radial-gradient(circle,rgba(14,36,52,.13),rgba(14,36,52,0) 66%);
    animation:aurora 36s ease-in-out infinite reverse}
  /* pulsing cell selections, sized and positioned to the 92x42 grid so they
     land exactly on cell boundaries. Top two rows only — above the headline. */
  .hero-cell{
    position:absolute;z-index:1;width:92px;height:42px;opacity:0;
    background:var(--green-soft);outline:1px solid rgba(29,111,66,.3);
    animation:cellPulse 9s ease-in-out infinite;
  }
  .hero-cell.c1{left:calc(92px * 3);top:0}
  .hero-cell.c2{left:calc(92px * 7);top:42px;animation-delay:3s}
  .hero-cell.c3{left:calc(92px * 11);top:0;animation-delay:6s}

  .fbar .formula:after{
    content:"";display:inline-block;width:7px;height:13px;margin-left:8px;
    background:var(--green);vertical-align:-2px;animation:caret 1.1s step-end infinite;
  }

  /* ---------- interactive sheet tabs ---------- */
  .tabs{display:flex;border-top:1px solid var(--rule);background:var(--panel);padding:0 8px;overflow-x:auto}
  .tabs button{
    appearance:none;background:none;border:none;border-right:1px solid var(--rule);
    font-family:var(--mono);font-size:.7rem;color:var(--muted);padding:8px 15px;
    cursor:pointer;white-space:nowrap;border-top:2px solid transparent;margin-top:-1px;
    transition:background .14s ease,color .14s ease;
  }
  .tabs button:hover{color:var(--ink);background:#fff}
  .tabs button[aria-selected="true"]{
    background:var(--white);color:var(--green);font-weight:700;border-top-color:var(--green);
  }
  .tabs button:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
  table.ss td.neg{color:var(--red);font-family:var(--mono)}
  table.ss td.hd{color:var(--faint);font-size:.72rem}
  table.ss tbody{transition:opacity .18s ease}
  table.ss tbody.swap{opacity:0}

  /* ---------- cash flow chart ---------- */
  .chart-wrap{
    border:1px solid var(--rule);background:var(--white);margin-top:22px;
    box-shadow:0 2px 4px rgba(14,36,52,.05);
  }
  .chart-head{
    display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap;
    padding:12px 16px;background:var(--head);border-bottom:1px solid var(--rule);
    font-family:var(--mono);font-size:.715rem;color:var(--muted);
  }
  .chart-head b{color:var(--ink);font-weight:600}
  .chart-head .lowtag{color:var(--red)}
  .chart-body{position:relative;padding:16px 14px 8px}
  .chart-body svg{display:block;width:100%;height:auto;overflow:visible}
  .ax-line{stroke:var(--rule-soft);stroke-width:1}
  .ax-base{stroke:var(--rule);stroke-width:1}
  .ax-lbl{fill:var(--faint);font-family:var(--mono);font-size:10px}
  .ax-lbl.r{text-anchor:end}
  .ax-lbl.c{text-anchor:middle}
  .cf-area{fill:url(#cfGrad)}
  .cf-line{fill:none;stroke:var(--green);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
  .cf-line.anim{stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.7s cubic-bezier(.3,.72,.3,1)}
  .cf-line.drawn{stroke-dashoffset:0}
  .cf-low{stroke:var(--red);stroke-width:1;stroke-dasharray:3 4}
  .cf-lowdot{fill:var(--red)}
  .cf-lowlbl{fill:var(--red);font-family:var(--mono);font-size:10px;font-weight:700}
  .cf-cursor{stroke:var(--ink);stroke-width:1;stroke-dasharray:2 3;opacity:0;transition:opacity .12s}
  .cf-cursor.on{opacity:.45}
  .cf-dot{fill:#fff;stroke:var(--green);stroke-width:2.5;opacity:0;transition:opacity .12s}
  .cf-dot.on{opacity:1}
  .cf-hit{fill:transparent}
  .tip{
    position:absolute;left:0;top:0;pointer-events:none;z-index:4;
    background:var(--ink);color:#fff;font-family:var(--mono);font-size:.7rem;line-height:1.45;
    padding:8px 11px;border-radius:2px;white-space:nowrap;
    opacity:0;transition:opacity .12s ease;box-shadow:0 8px 20px -8px rgba(14,36,52,.6);
  }
  .tip.on{opacity:1}
  .tip b{color:#fff;font-weight:700}
  .tip s{display:block;text-decoration:none;color:#8fa7b8;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase}
  .chart-note{
    margin:0;padding:10px 16px 14px;border-top:1px solid var(--rule-soft);
    font-size:.755rem;color:var(--faint);
  }

  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .enter,.reveal{animation:none !important;transition:none !important;opacity:1 !important;transform:none !important}
    .hero:before,.aurora i,.hero-cell,.fbar .formula:after{animation:none !important}
    .hero-cell{display:none}
    .cf-line.anim{transition:none !important;stroke-dashoffset:0 !important}
    table.ss tbody{transition:none}
  }

  /* ---------- responsive ---------- */
  @media (max-width:980px){
    .hero .wrap{grid-template-columns:1fr;gap:0;padding-top:56px}
    .hero-copy{padding-bottom:30px}
    .hero:before{background-size:70px 38px}
    .figure picture{max-width:300px}
    .about,.cta-grid{grid-template-columns:1fr;gap:38px}
    .stats{grid-template-columns:repeat(2,1fr)}
    .stat:nth-child(2){border-right:none}
    .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--rule)}
    .price,.steps{grid-template-columns:1fr}
    .pcol,.step{border-right:none;border-bottom:1px solid var(--rule)}
    .pcol:last-child,.step:last-child{border-bottom:none}
    .excl,.oneoff{grid-template-columns:1fr}
    .excl .yes{border-right:none;border-bottom:1px solid var(--rule)}
    .oneoff > div{border-right:none;border-bottom:1px solid var(--rule)}
    .oneoff > div:last-child{border-bottom:none}
    .fgrid{grid-template-columns:1fr 1fr}
    .navlinks{gap:20px}
    .navlinks a{font-size:.83rem}
    .faq{grid-template-columns:1fr}
    .faq > div{border-right:none;border-bottom:1px solid var(--rule)}
    .faq > div:last-child{border-bottom:none}
    /* the pulsing cells are positioned off the left edge in grid units and
       would collide with the headline once the hero stacks */
    .hero-cell{display:none}
    .aurora{filter:blur(34px)}
  }
  @media (max-width:760px){
    .navlinks a:not(.btn){display:none}
    .nav .wrap{height:64px}
    .fbar{display:none}
  }
  @media (max-width:620px){
    section{padding:54px 0}
    .wrap{padding:0 20px}
    .util .wrap{height:auto;padding:8px 20px;flex-direction:column;align-items:flex-start;gap:2px}
    .util .hide-s{display:none}
    .sheet-lift{margin-top:30px}
    .band{margin-top:48px !important}
    .stats{grid-template-columns:1fr}
    .stat{border-right:none;border-bottom:1px solid var(--rule)}
    .stat:last-child{border-bottom:none}
    .dt{min-width:560px}
    .dt thead th.h-tier,.dt .tcell{width:132px}
    .dt .tcell{padding:13px 12px}
    .dt .tcell b{font-size:.95rem}
    .dt td{padding:11px 12px}
    .dt td.svc{width:34%}
    /* at this width the brand and the CTA both wrap onto two lines and the
       nav bar grows to double height. The ACCA tag comes off the nav rather
       than let the name break — it still appears in the bar above and the
       footer. */
    .brand .nm{white-space:nowrap;font-size:1.08rem}
    .brand .cred{display:none}
    .brand{gap:8px}
    .nav .wrap{gap:14px}
    .navlinks a.btn{padding:9px 14px;font-size:.82rem;white-space:nowrap}
    .fgrid{grid-template-columns:1fr}
    table.ss{font-size:.75rem}
    table.ss th,table.ss td{padding:6px 8px}
    .chart-body{padding:12px 4px 4px}
    .chart-head{font-size:.68rem;gap:8px}
    .tip{font-size:.66rem;padding:6px 9px}
  }