/* Dark-led warm world. The "mention" is illumination, not a highlighter.
     A name that gets mentioned lights up. That is the whole visual language. */
  :root {
    --ground: #0D0B09;
    --raise: #16130F;
    --card: #1D1913;
    --card-2: #241F18;
    --line: #322B22;
    --line-2: #453C30;
    --paper: #F7F3EC;
    --dim: #A4998A;
    --dimmer: #8B8175;
    --marigold: #FF9A2E;
    --marigold-deep: #E8850C;
    --ember: #FFC275;
    --good: #6FCF8F;
    --display: "Fraunces", Georgia, serif;
    --body: "Inter", system-ui, -apple-system, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
    color-scheme: dark;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--ground); color: var(--paper);
    font-family: var(--body); font-size: 1.0625rem; line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }
  .wrap { max-width: 1320px; margin: 0 auto; padding: 0 clamp(1.25rem, 3vw, 2.5rem); }
  h1,h2,h3 { font-family: var(--display); font-weight: 600; line-height: 1.06; letter-spacing: -0.022em; margin: 0; text-wrap: balance; }
  h2 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
  h3 { font-size: 1.3rem; letter-spacing: -0.01em; }
  p { margin: 0; }
  .lead { font-size: clamp(1.08rem, 1.5vw, 1.25rem); line-height: 1.6; color: var(--dim); }
  .eyebrow { font-family: var(--body); font-size:0.8rem; letter-spacing:0.07em; text-transform: uppercase; color: var(--marigold); font-weight: 500; }
  section { padding: clamp(3.25rem, 5.5vw, 5.5rem) 0; position: relative; }
  .divider { border-top: 1px solid var(--line); }

  /* ILLUMINATION: the mention device. */
  .lit { position: relative; color: #fff; font-weight: 600; white-space: nowrap;
         text-shadow: 0 0 18px rgba(255,154,46,0.55), 0 0 42px rgba(255,154,46,0.28); }
  /* The hero headline is too long to hold on one line. Let it wrap and drop the
     sweep underline, which cannot span multiple line boxes cleanly. */
  .heroleft h1 .lit { white-space: normal; }
  .heroleft h1 .lit::after { display: none; }
  .lit::after { content:""; position:absolute; left:-6%; right:-6%; bottom:-0.12em; height:2px;
                background: linear-gradient(90deg, transparent, var(--marigold), transparent);
                transform: scaleX(0); transform-origin:center; }
  .lit--load::after { animation: sweep .8s cubic-bezier(.22,1,.36,1) .55s both; }
  @supports (animation-timeline: view()) {
    .lit--scroll::after { animation: sweep linear both; animation-timeline: view(); animation-range: entry 25% cover 40%; }
  }
  @supports not (animation-timeline: view()) { .lit--scroll::after { transform: scaleX(1); } }
  @keyframes sweep { to { transform: scaleX(1); } }

  /* Buttons: marigold reserved for the one action. */
  .btn { display:inline-flex; align-items:center; gap:.55rem; min-height:54px; padding:0 1.8rem;
         background: var(--marigold); color:#1A1207; font-family:var(--body); font-weight:600; font-size:1.02rem;
         border:none; border-radius:8px; text-decoration:none; cursor:pointer;
         box-shadow: 0 0 0 rgba(255,154,46,0); transition: box-shadow .25s, transform .18s, background .18s; }
  .btn:hover { background: var(--ember); transform: translateY(-1px); box-shadow: 0 8px 30px rgba(255,154,46,.28); }
  .btn--ghost { background:transparent; color:var(--paper); border:1px solid var(--line-2); box-shadow:none; }
  .btn--ghost:hover { background:var(--card); color:var(--paper); box-shadow:none; }
  a { color: var(--ember); text-underline-offset:3px; }

  header.site { position:sticky; top:0; z-index:50; background:#100E0B; border-bottom:1px solid var(--line); }
  .nav { display:flex; align-items:center; justify-content:space-between; padding:.85rem 0; }
  .brand { font-family:var(--display); font-weight:600; font-size:1.28rem; color:var(--paper); text-decoration:none; letter-spacing:-.01em; }
  .navlinks { display:flex; gap:1.5rem; align-items:center; font-size:.95rem; }
  .navlinks a { color:var(--dim); text-decoration:none; }
  .navlinks a:hover { color:var(--paper); }
  .navlinks .btn { color:#1A1207; min-height:44px; padding:0 1.15rem; font-size:.95rem; }
  @media (max-width:820px){ .hidesm{display:none} }

  /* ============ HERO: the wow ============ */
  .hero { padding-top: clamp(2rem,3.5vw,3rem); padding-bottom: clamp(2.5rem,4vw,3.5rem); overflow:hidden; }
  .hero::before { content:""; position:absolute; inset:-40% -20% auto -20%; height:90%; pointer-events:none;
    background: radial-gradient(45% 55% at 22% 25%, rgba(255,154,46,.14), transparent 70%),
                radial-gradient(40% 50% at 78% 8%, rgba(255,154,46,.07), transparent 70%);
    animation: drift 26s ease-in-out infinite alternate; }
  @keyframes drift { to { transform: translate3d(-3%,2%,0) scale(1.1); } }
  .hero .wrap { position:relative; z-index:1; }
  .hero h1 { font-size: clamp(2.5rem, 5.6vw, 4.3rem); }
  .hero .lead { margin-top:1.2rem; max-width:56ch; }
  .herogrid { display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(1.8rem,3.5vw,3rem);
              align-items:center; margin-top:2.4rem; }
  @media (max-width:960px){ .herogrid{ grid-template-columns:1fr; align-items:start; } }

  /* The demo machine */
  .demo { background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
  .demohead { padding:1rem 1.2rem; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:.6rem; }
  .demohead .dots { display:flex; gap:.35rem; }
  .demohead .dots i { width:9px;height:9px;border-radius:50%;background:var(--line-2); display:block; }
  .demohead span { font-family:var(--body); font-size:0.8rem; color:var(--dimmer); letter-spacing:0.07em; text-transform:uppercase; font-weight:600;}
  .demobody { padding:1.3rem; }
  .fieldrow { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
  @media (max-width:520px){ .fieldrow{grid-template-columns:1fr} }
  .field label { display:block; font-family:var(--body); font-size:0.8rem; letter-spacing:0.07em; text-transform:uppercase; color:var(--dimmer); margin-bottom:.4rem; font-weight:600;}
  .field input { width:100%; background:var(--ground); border:1px solid var(--line-2); border-radius:8px;
    color:var(--paper); font-family:var(--body); font-size:1rem; padding:.75rem .85rem; }
  .field input:focus { outline:2px solid var(--marigold); outline-offset:1px; border-color:transparent; }
  .field input::placeholder { color:var(--dimmer); }
  .demobody .btn { width:100%; justify-content:center; margin-top:.9rem; }

  .qbox { margin-top:1.1rem; background:var(--ground); border:1px solid var(--line-2); border-radius:10px; padding:1rem 1.1rem; }
  .qlabel { font-family:var(--body); font-size:0.8rem; letter-spacing:0.07em; text-transform:uppercase; color:var(--dimmer); font-weight:600;}
  .qtext { margin-top:.45rem; font-size:1.02rem; color:var(--paper); line-height:1.45; }
  .copy { margin-top:.8rem; background:transparent; border:1px solid var(--line-2); color:var(--dim); font-family:var(--body);
          font-size:0.8rem; letter-spacing:0.07em; text-transform:uppercase; padding:.45rem .75rem; border-radius:6px; cursor:pointer; transition:.15s; font-weight:600;}
  .copy:hover { color:var(--paper); border-color:var(--dim); }
  .copy.done { color:var(--good); border-color:rgba(111,207,143,.45); }
  .engines { margin-top:.9rem; display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; }
  @media (max-width:520px){ .engines{grid-template-columns:1fr} }
  .eng-btn { display:flex; align-items:center; justify-content:space-between; gap:.5rem; text-decoration:none;
             background:var(--card-2); border:1px solid var(--line-2); border-radius:9px; padding:.8rem .95rem; transition:.18s; }
  .eng-btn:hover { border-color:var(--marigold); background:rgba(255,154,46,.07); transform:translateY(-1px); }
  .eng-btn .en { font-size:.94rem; color:var(--paper); font-weight:500; }
  .eng-btn .ea { font-family:var(--body); font-size:0.8rem; color:var(--marigold); }
  .outcomes { margin-top:clamp(2.5rem,5vw,4rem); padding-top:2rem; border-top:1px solid var(--line); }
  .olabel { font-family:var(--body); font-size:0.8rem; letter-spacing:0.07em; text-transform:uppercase;
            color:var(--dimmer); margin-bottom:1.2rem; font-weight:600;}
  .obar { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
  @media (max-width:860px){ .obar{ grid-template-columns:1fr; gap:.6rem; } }
  .o { display:flex; gap:.85rem; align-items:flex-start; background:var(--card); border:1px solid var(--line);
       border-radius:12px; padding:1.1rem 1.2rem; }
  .o .ok { flex:none; width:24px; height:24px; border-radius:7px; display:grid; place-items:center;
           font-family:var(--mono); font-size:.75rem; margin-top:.1rem; }
  .o .ok-no { background:rgba(194,84,63,.15); color:#E08A72; border:1px solid rgba(194,84,63,.35); }
  .o .ok-yes { background:rgba(111,207,143,.12); color:var(--good); border:1px solid rgba(111,207,143,.35); }
  .o p { font-size:.9rem; color:var(--dim); line-height:1.6; }
  .o p b { color:var(--paper); font-weight:600; display:block; margin-bottom:.2rem; }
  .demonote { margin-top:.9rem; font-size:.8rem; color:var(--dimmer); }

  /* ============ Assemble-it-yourself ============ */
  .ctrls { margin-top:2rem; display:flex; gap:.8rem; flex-wrap:wrap; }
  .seg { display:inline-flex; background:var(--card); border:1px solid var(--line); border-radius:9px; padding:3px; }
  .seg button { background:transparent; border:none; color:var(--dim); font-family:var(--body); font-size:.88rem;
                padding:.5rem .9rem; border-radius:6px; cursor:pointer; transition:.15s; white-space:nowrap; }
  .seg button:hover { color:var(--paper); }
  .seg button.on { background:var(--marigold); color:#1A1207; font-weight:600; }
  .seg button:focus-visible { outline:2px solid var(--marigold); outline-offset:2px; }
  .grouplab { font-family:var(--body); font-size:0.8rem; letter-spacing:0.07em; text-transform:uppercase; color:var(--dimmer); margin-bottom:.6rem; font-weight:600;}
  .stackgrid { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,4vw,3.5rem); align-items:start; margin-top:1.6rem; }
  @media (max-width:900px){ .stackgrid{grid-template-columns:1fr} }
  /* Grid and flex children default to min-width:auto, so one long line
     inside them pushes the whole column past the viewport. */
  .stackgrid > *, .roles, .role, .role .rn, .tally { min-width:0; }
  .roles { display:grid; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
  .role { display:flex; align-items:center; gap:.9rem; padding:.85rem 1rem; background:var(--card);
          border-bottom:1px solid var(--line); cursor:pointer; transition:background .15s,opacity .15s; }
  .role:last-child{border-bottom:none}
  .role:hover { background:var(--card-2); }
  .role.off { opacity:.4; }
  .role input { appearance:none; width:19px;height:19px;flex:none; border:1px solid var(--line-2); border-radius:5px;
                background:var(--ground); cursor:pointer; position:relative; }
  .role input:checked { background:var(--marigold); border-color:var(--marigold); }
  .role input:checked::after { content:"¹3"; position:absolute; inset:0; display:grid;place-items:center;
                               color:#1A1207; font-size:.8rem; font-weight:700; line-height:1; }
  .role input:focus-visible { outline:2px solid var(--marigold); outline-offset:2px; }
  .role .rn { flex:1; font-size:.95rem; line-height:1.35; }
  .role .rn small { display:block; color:var(--dimmer); font-size:.8rem; margin-top:.15rem; }
  .role .rc { font-family:var(--mono); font-size:.9rem; color:var(--paper); font-variant-numeric:tabular-nums; white-space:nowrap; }
  .peoplenote { margin-top:1.1rem; font-size:.9rem; color:var(--dimmer); line-height:1.6; }

  .tally { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.5rem; position:sticky; top:88px; }
  .tblock + .tblock { margin-top:1.1rem; }
  .tally .tl { font-family:var(--body); font-size:0.8rem; letter-spacing:0.07em; text-transform:uppercase; color:var(--dimmer); font-weight:600;}
  .tally .tv { font-family:var(--display); font-size:2.7rem; font-weight:600; letter-spacing:-.03em;
               font-variant-numeric:tabular-nums; line-height:1.05; margin-top:.2rem; }
  .tally .tv2 { font-family:var(--display); font-size:1.9rem; font-weight:600; letter-spacing:-.02em;
                font-variant-numeric:tabular-nums; margin-top:.2rem; color:var(--marigold); }
  .tally .tsub { color:var(--dimmer); font-size:.84rem; margin-top:.2rem; line-height:1.4; }
  .tally hr { border:none; border-top:1px solid var(--line); margin:1.3rem 0; }
  .tally .us .tv { color:var(--paper); }
  .upfront { margin-top:1rem; padding:.8rem .95rem; border-radius:9px; background:rgba(194,84,63,.1);
             border:1px solid rgba(194,84,63,.3); font-size:.88rem; color:var(--paper); line-height:1.5; }
  .upfront b { color:#E8927A; font-family:var(--mono); font-variant-numeric:tabular-nums; }
  .upfront .zero { color:var(--good); }
  .save { margin-top:1.2rem; padding:.9rem 1rem; border-radius:10px; background:rgba(111,207,143,.09);
          border:1px solid rgba(111,207,143,.25); font-size:.9rem; color:var(--paper); line-height:1.55; }
  .save b { color:var(--good); font-variant-numeric:tabular-nums; }
  .srcnote { margin-top:2.2rem; font-size:.82rem; color:var(--dimmer); line-height:1.6; max-width:82ch; }

  /* ============ Pricing ============ */
  .addon { display:inline-flex; align-items:center; gap:.6rem; background:var(--card); border:1px solid var(--line);
           border-radius:9px; padding:.55rem .9rem; cursor:pointer; font-size:.88rem; color:var(--dim); transition:.15s; }
  .addon:hover { border-color:var(--line-2); color:var(--paper); }
  .addon input { appearance:none; width:36px; height:20px; border-radius:999px; background:var(--line-2);
                 position:relative; cursor:pointer; flex:none; transition:.18s; }
  .addon input::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
                        background:var(--dim); transition:.18s; }
  .addon input:checked { background:rgba(255,154,46,.35); }
  .addon input:checked::after { transform:translateX(16px); background:var(--marigold); }
  .addon input:focus-visible { outline:2px solid var(--marigold); outline-offset:2px; }
  .addon b { color:var(--marigold); font-weight:600; }

  .tiers { margin-top:2rem; display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; align-items:start; }
  @media (max-width:900px){ .tiers{grid-template-columns:1fr} }
  .tier { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:1.8rem 1.6rem 2rem; position:relative; }
  .tier.feature { border-color:rgba(255,154,46,.4); background:linear-gradient(180deg, rgba(255,154,46,.05), transparent 40%), var(--card); }
  .ribbon { position:absolute; top:-11px; left:1.6rem; background:var(--marigold); color:#1A1207; font-family:var(--body);
            font-size:0.8rem; letter-spacing:0.07em; text-transform:uppercase; padding:.3rem .6rem; border-radius:5px; font-weight:600; }
  .th h3 { font-size:1.7rem; }
  .tfor { color:var(--dim); font-size:.95rem; margin-top:.4rem; line-height:1.5; }
  .tprice { margin-top:1.2rem; display:flex; align-items:baseline; gap:.4rem; }
  .tprice .amt { font-family:var(--display); font-size:3rem; font-weight:600; letter-spacing:-.03em;
                 font-variant-numeric:tabular-nums; line-height:1; transition:color .2s; }
  .tprice .per { color:var(--dimmer); font-size:1rem; }
  .tnote { font-size:.84rem; color:var(--dimmer); margin-top:.5rem; min-height:2.4em; line-height:1.4; }
  .tnote.fnd { color:var(--marigold); }
  .tlist { list-style:none; padding:0; margin:1.3rem 0 0; display:grid; gap:.6rem; border-top:1px solid var(--line); padding-top:1.3rem; }
  .tlist li { font-size:.93rem; color:var(--dim); padding-left:1.4rem; position:relative; line-height:1.55; }
  .tlist li::before { content:""; position:absolute; left:0; top:.6em; width:6px; height:6px; border-radius:50%; background:var(--marigold); }
  .tlist li b { color:var(--paper); font-weight:600; }

  .tracking-explain { margin-top:1.4rem; border:1px solid var(--line); border-radius:16px; padding:1.6rem;
                      background:var(--raise); transition:border-color .2s, background .2s; }
  .tracking-explain.on { border-color:rgba(255,154,46,.45); background:linear-gradient(180deg, rgba(255,154,46,.05), transparent 50%), var(--raise); }
  .tx-head { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap; }
  .tx-price { font-family:var(--mono); color:var(--marigold); font-size:1rem; }
  .tracking-explain > p { color:var(--dim); margin-top:.7rem; max-width:70ch; font-size:.96rem; }
  .tx-grid { margin-top:1.4rem; display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
  @media (max-width:820px){ .tx-grid{grid-template-columns:1fr; gap:1.4rem} }
  .tx-lab { font-family:var(--body); font-size:0.8rem; letter-spacing:0.07em; text-transform:uppercase; color:var(--dimmer); margin-bottom:.6rem; font-weight:600;}
  .tx-grid ul { list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
  .tx-grid li { font-size:.92rem; color:var(--dim); padding-left:1.3rem; position:relative; line-height:1.55; }
  .tx-grid li::before { content:"+"; position:absolute; left:0; color:var(--marigold); font-family:var(--mono); }
  .tx-grid div:last-child li::before { content:"-"; color:var(--dimmer); }
  .tx-grid li b { color:var(--paper); font-weight:600; }

  .custom { margin-top:1.4rem; border:1px dashed var(--line-2); border-radius:16px; padding:1.6rem;
            display:flex; justify-content:space-between; align-items:center; gap:2rem; flex-wrap:wrap; }

  /* ============ Founding explainer ============ */
  .steps { margin-top:2.6rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
  @media (max-width:860px){ .steps{grid-template-columns:1fr} }
  .step { background:var(--card); padding:1.6rem 1.4rem 1.8rem; }
  .step .sn { font-family:var(--body); font-size:0.8rem; color:var(--marigold); letter-spacing:0.07em; }
  .step h3 { margin:.75rem 0 .5rem; font-size:1.18rem; }
  .step p { font-size:.94rem; color:var(--dim); }
  .step .tag { display:inline-block; margin-top:.9rem; font-family:var(--body); font-size:0.8rem; padding:.28rem .6rem; border-radius:999px;
               border:1px solid var(--line-2); color:var(--dim); }
  .step .tag.hot { color:var(--marigold); border-color:rgba(255,154,46,.45); background:rgba(255,154,46,.08); }

  /* ============ Buyout ============ */
  .ladder { margin-top:2rem; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
  .lrow { display:flex; justify-content:space-between; align-items:center; padding:.95rem 1.2rem; background:var(--card); border-bottom:1px solid var(--line); }
  .lrow:last-child{border-bottom:none}
  .lrow span { color:var(--dim); font-size:.96rem; }
  .lrow b { font-family:var(--mono); font-size:1.05rem; color:var(--paper); font-variant-numeric:tabular-nums; }
  .lrow:last-child b { color:var(--good); }

  /* ============ Not for you ============ */
  .nope { background:var(--raise); }
  .nopegrid { margin-top:2.4rem; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,215px),1fr)); gap:.8rem; }
  .n { border:1px solid var(--line); border-radius:12px; padding:1rem 1.1rem; background:var(--card); position:relative; }
  .n .x { font-family:var(--mono); color:#E08A72; font-size:.9rem; }
  .n p { margin-top:.4rem; font-size:.94rem; color:var(--dim); }
  .n p b { color:var(--paper); font-weight:600; display:block; }
  .yes { margin-top:2.4rem; border:1px solid rgba(255,154,46,.3); background:rgba(255,154,46,.05); border-radius:14px; padding:1.5rem 1.6rem; }
  .yes h3 { color:var(--paper); }
  .yes ul { margin:.9rem 0 0; padding:0; list-style:none; display:grid; gap:.5rem; }
  .yes li { font-size:.96rem; color:var(--dim); padding-left:1.5rem; position:relative; }
  .yes li::before { content:"→"; position:absolute; left:0; color:var(--marigold); font-family:var(--mono); }

  /* ============ Proof ============ */
  .bignum { font-family:var(--display); font-size:clamp(3rem,7.5vw,5.2rem); font-weight:600; letter-spacing:-.035em; line-height:1; font-variant-numeric:tabular-nums; }
  .proofgrid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
  @media (max-width:860px){ .proofgrid{grid-template-columns:1fr} }
  .cites { display:grid; gap:.7rem; }
  .cite { display:flex; gap:.8rem; align-items:center; padding:.85rem 1rem; background:var(--card); border:1px solid var(--line); border-radius:11px; }
  .cite .eng { font-family:var(--mono); font-size:.7rem; color:var(--dimmer); flex:none; width:74px; }
  .cite .txt { font-size:.9rem; color:var(--dim); }

  /* Final */
  .final { text-align:center; }
  .final h2 { max-width:18ch; margin:0 auto; }
  .final .lead { margin:1.2rem auto 0; max-width:48ch; }
  .final .btn { margin-top:1.8rem; }
  .finalnote { margin-top:1rem; font-size:.86rem; color:var(--dimmer); }
  footer.site { border-top:1px solid var(--line); padding:2.4rem 0; }
  footer .wrap { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
  footer .tag { color:var(--dimmer); font-size:.9rem; }
  .note { max-width:1320px; margin:0 auto; padding:0 1.5rem 3rem; color:var(--dimmer); font-size:.82rem; text-align:center; }

  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
    .lit::after{ transform:scaleX(1) !important; }
  }