@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/space-grotesk-600.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-400.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-600.woff2) format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jetbrains-mono-400.woff2) format('woff2');}
  h1,h2,h3,.brand{font-family:'Space Grotesk','Inter',"Segoe UI",sans-serif}
  :root{
    --bg:#0B1220; --ink:#EDEFF4; --muted:#8A93A6; --hair:rgba(237,239,244,.10);
    --panel:#121B2E; --panel-edge:rgba(237,239,244,.12); --brass:#C9A227; --brass-dim:rgba(201,162,39,.35);
    --good:#4ADE9C;
    --glass:rgba(18,27,46,.34); --bar:rgba(11,18,32,.78); --bar2:rgba(11,18,32,.55);
    --pill:rgba(10,16,30,.28); --on-accent:#141001;
    --glow:rgba(201,162,39,.15);
    --mini:rgba(0,0,0,.28); --brass-ghost:rgba(201,162,39,.10); --inset:rgba(9,15,27,.90);
    --red:#F87171;
  }
  /* light mode — the alabaster-bronze colorway */
  html.light{
    --bg:#F5F1EA; --ink:#26211A; --muted:#635B49; --hair:rgba(38,33,26,.12);
    --panel:#FCFAF5; --panel-edge:rgba(38,33,26,.16); --brass:#7A5D24; --brass-dim:rgba(122,93,36,.4);
    --good:#176B41;
    --glass:rgba(252,250,245,.34); --bar:rgba(236,230,219,.78); --bar2:rgba(236,230,219,.55);
    --pill:rgba(236,230,219,.28); --on-accent:#FCF8F0;
    --glow:rgba(122,93,36,.15);
    --mini:rgba(38,33,26,.07); --brass-ghost:rgba(122,93,36,.10); --inset:rgba(246,243,236,.95);
    --red:#A32431;
  }
  *{box-sizing:border-box}
  section[id],#top{scroll-margin-top:82px}
  body{margin:0;background:var(--bg);color:var(--ink);
    font-family:'Inter',"Segoe UI",system-ui,-apple-system,Arial,sans-serif;font-size:16.5px;line-height:1.65;
    -webkit-font-smoothing:antialiased}
  .mono{font-family:'JetBrains Mono',"Cascadia Code",Consolas,ui-monospace,monospace}
  a{color:inherit}
  a:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:3px}
  .wrap{max-width:1040px;margin:0 auto;padding:0 28px}
  .label{font-family:'JetBrains Mono',"Cascadia Code",Consolas,ui-monospace,monospace;font-size:11px;
    letter-spacing:.2em;text-transform:uppercase;color:var(--brass);font-weight:600}

  header{position:sticky;top:0;z-index:50;background:var(--bar);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--hair)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:66px}
  .brand{font-weight:750;letter-spacing:-.015em;font-size:17.5px;text-decoration:none}
  .brand span{color:var(--brass)}
  .nav-links{display:flex;gap:28px;align-items:center}
  .nav-links a{text-decoration:none;font-size:14px;color:var(--muted)}
  .nav-links a:hover{color:var(--ink)}
  .btn{display:inline-block;background:var(--brass);color:var(--on-accent);text-decoration:none;
    padding:11px 22px;border-radius:6px;font-size:14px;font-weight:700}
  .btn:hover{filter:brightness(1.08)}
  .btn-line{background:transparent;color:var(--ink);border:1px solid var(--panel-edge)}
  .btn-line:hover{border-color:var(--brass)}
  .theme-btn{width:38px;height:38px;border-radius:999px;border:1px solid var(--panel-edge);
    background:transparent;color:var(--ink);font-size:17px;line-height:1;cursor:pointer;flex:none;padding:0}
  .theme-btn:hover{border-color:var(--brass)}
  .theme-btn:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

  /* top/bottom only — the shorthand's side zeros overrode .wrap's 28px and
     left phone text flush against the screen edge */
  .hero{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
    padding-top:110px;padding-bottom:60px;position:relative;perspective:1200px}
  .hero > *{position:relative;z-index:1}
  #bgfield{position:fixed;inset:0;z-index:0;opacity:.5;pointer-events:none}
  .hero,section,footer,.quote,.marquee{position:relative;z-index:1}

  .marquee{overflow:hidden;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
    padding:16px 0;background:var(--bar2)}
  .marquee .track{display:flex;gap:52px;white-space:nowrap;width:max-content;animation:slide 55s linear infinite}
  @keyframes slide{to{transform:translateX(-50%)}}
  .marquee span{font-family:'JetBrains Mono',"Cascadia Code",Consolas,ui-monospace,monospace;font-size:11.5px;
    letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
  @media (prefers-reduced-motion:reduce){ .marquee .track{animation:none} }
  h1{font-size:56px;font-size:clamp(38px,5.6vw,64px);line-height:1.05;letter-spacing:-.03em;font-weight:750;
    margin:18px 0 0;text-wrap:balance}
  h1 span{color:var(--brass)}
  .hero p{color:var(--muted);font-size:18px;max-width:44ch;margin:22px 0 0}
  .hero .actions{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap}

  .console{background:var(--panel);border:1px solid var(--panel-edge);border-radius:14px;
    box-shadow:0 20px 60px rgba(0,0,0,.5);overflow:hidden}
  .console .top{display:flex;justify-content:space-between;align-items:center;
    padding:14px 20px;border-bottom:1px solid var(--hair);font-size:12.5px;color:var(--muted)}
  .console .top .live{color:var(--good)}
  .console .body{padding:18px 20px 20px}
  .console .top .dot{display:inline-block;width:8px;height:8px;border-radius:99px;
    background:var(--brass);margin-right:9px;vertical-align:1px}
  /* the Shell's own chat, at website fidelity */
  .ask{background:var(--brass);color:var(--on-accent);font-weight:600;font-size:13.5px;
    border-radius:12px 12px 3px 12px;padding:9px 14px;margin:0 0 12px auto;max-width:88%;width:fit-content}
  .act{font-family:'JetBrains Mono',"Cascadia Code",Consolas,ui-monospace,monospace;
    font-size:11.5px;letter-spacing:.03em;color:var(--muted);margin:0 0 5px}
  .said{font-size:13.5px;line-height:1.6;margin:9px 0 14px;max-width:92%}
  .chatlet{margin-top:16px}
  .chatlet .said{margin-bottom:0}
  .chatlet .hcard{margin-top:10px}
  .hcard .cdetail{font-size:12.5px;color:var(--muted);margin:6px 0 0;line-height:1.5}
  /* matches shell.css .card exactly: brass left edge, outlined mono pill badge */
  .hcard{border:1px solid var(--panel-edge);border-left:3px solid var(--brass);
    border-radius:12px;padding:13px 15px;background:var(--inset)}
  .hcard .chead{display:flex;align-items:center;gap:10px;margin-bottom:6px}
  .hcard .badge{font-family:'JetBrains Mono',"Cascadia Code",Consolas,ui-monospace,monospace;
    font-size:10px;letter-spacing:.14em;background:transparent;color:var(--brass);
    padding:3px 9px;border-radius:999px;border:1px solid var(--brass);flex:none}
  .hcard .ctitle{font-size:13px;font-weight:700;color:var(--ink)}
  .hcard .cnote{font-size:12.5px;color:var(--muted);margin:0;line-height:1.5}
  .hcard .cbtns{display:flex;gap:9px;margin-top:12px}
  .hcard .cbtn{font-size:12px;font-weight:700;padding:7px 13px;border-radius:7px;
    border:1px solid var(--brass);background:var(--brass);color:var(--on-accent)}
  .hcard .cbtn.ghost{background:transparent;color:var(--ink);border-color:var(--panel-edge)}

  section{border-top:1px solid var(--hair)}
  /* .wrap's shorthand padding zeroes the element rule, so section spacing
     must outrank the class — even above/below gaps around each hairline */
  section.wrap{padding-top:60px;padding-bottom:60px}
  section.wrap > .label{font-size:13px;letter-spacing:.24em}
  h2{font-size:40px;font-size:clamp(28px,3.9vw,44px);letter-spacing:-.025em;line-height:1.12;margin:14px 0 0;
    font-weight:750;text-wrap:balance;max-width:26ch}
  .sub{color:var(--muted);max-width:56ch;margin:16px 0 0}

  /* always a 2+2 split — auto-fit used to wrap 3+1 at tablet/phone widths */
  .stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;margin-top:52px}
  .stat{background:var(--panel);border:1px solid var(--panel-edge);border-radius:12px;padding:28px 26px}
  .stat b{font-size:34px;letter-spacing:-.02em;display:block;font-variant-numeric:tabular-nums}
  .stat b i{color:var(--brass);font-style:normal}
  .stat span{color:var(--muted);font-size:14px;display:block;margin-top:8px;line-height:1.55}

  .grid{display:grid;grid-template-columns:repeat(6,1fr);gap:26px;margin-top:52px}
  .cell{background:var(--panel);border:1px solid var(--panel-edge);border-radius:14px;padding:28px 26px;
    transition:border-color .3s ease}
  .cell:hover{border-color:var(--brass-dim)}
  .cell h3{margin:12px 0 8px;font-size:19px;font-weight:700;letter-spacing:-.01em}
  .cell p{margin:0;color:var(--muted);font-size:14.5px}
  .c3{grid-column:span 3}.c2{grid-column:span 2}
  /* ---- Calculator tiles: measured money (mirrors Cost Calc Tool .tiles/.tile) ---- */
  .tiles{display:grid;grid-template-columns:1fr;gap:1px;background:var(--hair);
    border:1px solid var(--hair);border-radius:10px;overflow:hidden;margin-top:16px}
  html.light .tiles{background:var(--panel-edge);border-color:var(--panel-edge)}
  .tile{background:var(--inset);padding:13px 16px 14px}
  .tile .tlab{color:var(--muted);font-size:12.5px;line-height:1.35}
  .tile .tval{font-weight:600;font-size:16px;line-height:1.2;margin-top:3px;
    white-space:nowrap;font-variant-numeric:tabular-nums}
  .tile .tval .pos{color:var(--good)}
  .tile .tval .neg{color:var(--red)}
  .tile .tsub{color:var(--muted);font-size:12px;line-height:1.4;margin-top:2px}
  /* ---- Shell cards: state and consequence (mirrors shell.css .card) ---- */
  .factcards{margin-top:16px}
  .factcard{background:var(--inset);border:1px solid var(--panel-edge);
    border-left:3px solid var(--brass);border-radius:12px;padding:13px 16px}
  .factcard + .factcard{margin-top:10px}
  .factcard .fbadge{display:inline-block;font-family:'JetBrains Mono',"Cascadia Code",Consolas,ui-monospace,monospace;
    font-size:10px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
    padding:3px 8px;border-radius:999px;border:1px solid var(--brass);color:var(--brass);
    background:transparent}
  .factcard .fbadge.is-mark{background:var(--brass-ghost)}
  .factcard .ftitle{font-family:'Space Grotesk','Inter',"Segoe UI",sans-serif;font-weight:600;
    font-size:15px;line-height:1.35;margin:7px 0 0;color:var(--ink)}
  .factcard .fnote{font-size:12.5px;line-height:1.45;color:var(--muted);margin:6px 0 0}
  .factcard .fnote.is-good{color:var(--good)}

  .sectors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;margin-top:52px}
  @media (max-width:800px){ .sectors{grid-template-columns:1fr} }
  .sector{background:var(--panel);border:1px solid var(--panel-edge);border-radius:14px;padding:26px;
    cursor:pointer;transition:border-color .25s ease,transform .18s ease-out;will-change:transform}
  .sector:hover{border-color:var(--brass-dim)}
  .sector:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
  .sector h3{margin:0 0 8px;font-size:18px;font-weight:700;color:var(--brass)}
  .sector .hook,.cell .hook{margin:0;color:var(--ink);font-size:14px;
    display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
  .cell p.desc{max-height:0;overflow:hidden;margin:0;transition:max-height .4s ease}
  .cell.open p.desc{max-height:520px;margin-top:8px}
  /* the three-tool triangle: same wireframe language as the canvas world */
  .triad{display:block;width:100%;max-width:230px;margin:16px auto 0}
  .triad .edge{stroke:var(--ink);stroke-opacity:.35;stroke-width:1}
  .triad .node{fill:var(--inset);stroke:var(--panel-edge)}
  .triad .icon{stroke:var(--brass);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .triad .dot{fill:var(--brass)}
  .triad .fleck{fill:var(--ink);opacity:.4}
  .sector p.desc{margin:0;color:var(--muted);font-size:14px;
    max-height:0;overflow:hidden;transition:max-height .4s ease}
  .sector.open p.desc{margin-top:8px;max-height:400px}
  /* when a row partner expands, the collapsed card centers its content in the extra height */
  .sector{display:flex;flex-direction:column;justify-content:center}
  .sector.open{justify-content:flex-start}
  .sector .tools{display:none;margin-top:16px;border-top:1px solid var(--hair);padding-top:14px}
  .sector.open .tools{display:block}
  .sector .tlabel{font-family:'JetBrains Mono',"Cascadia Code",Consolas,ui-monospace,monospace;
    font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:11px}
  .sector .tool{margin-top:11px}
  .sector .tool:first-of-type{margin-top:0}
  .sector .tool b{display:block;color:var(--brass);font-weight:700;font-size:13.5px;letter-spacing:-.005em}
  .sector .tool span{display:block;color:var(--muted);font-size:12.5px;line-height:1.5;margin-top:3px}
  .sector .hint,.mathcard .hint,.cell .hint{margin-top:10px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--brass)}

  .quote{padding:60px 0;text-align:center;border-top:1px solid var(--hair)}
  .quote blockquote{font-family:Georgia,serif;font-style:italic;font-weight:400;
    font-size:30px;font-size:clamp(22px,3.2vw,36px);line-height:1.4;max-width:26ch;margin:0 auto;text-wrap:balance;
    align-content:center}
  .quote cite{display:block;margin-top:24px;font-style:normal}

  .tiers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;margin-top:52px}
  @media (max-width:700px){ .tiers{grid-template-columns:1fr} }
  .math3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:52px}
  @media (max-width:900px){ .math3{grid-template-columns:1fr} }
  .mathcard{background:var(--panel);border:1px solid var(--panel-edge);border-radius:14px;padding:28px 26px;
    cursor:pointer;transition:border-color .25s ease,transform .18s ease-out;will-change:transform}
  .mathcard:hover{border-color:var(--brass-dim)}
  .mathcard:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
  .mathcard h3{margin:12px 0 8px;font-size:19px;font-weight:700;letter-spacing:-.01em}
  .mathcard p{margin:0;color:var(--muted);font-size:14.5px}
  /* collapsed: label + title + info tiles; the prose reveals on click */
  .mathcard > p{max-height:0;overflow:hidden;margin:0;transition:max-height .4s ease}
  .mathcard.open > p{max-height:600px;margin-top:10px}
  /* when a sibling expands the row, collapsed cards center their content
     in the extra height instead of leaving it empty at the bottom */
  .mathcard{display:flex;flex-direction:column;justify-content:center}
  .mathcard.open{justify-content:flex-start}
  .price-note{border-left:3px solid var(--brass);padding:4px 0 4px 16px;margin-top:26px;max-width:62ch}
  .price-note .pn-label{font-family:'JetBrains Mono',"Cascadia Code",Consolas,ui-monospace,monospace;
    font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);font-weight:600;
    display:block;margin-bottom:4px}
  .price-note p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
  .tier{background:var(--panel);border:1px solid var(--panel-edge);border-radius:14px;padding:28px 26px}
  .tier.hl{border-color:var(--brass);box-shadow:0 0 50px var(--glow)}
  .tier .t{font-family:'JetBrains Mono',"Cascadia Code",Consolas,ui-monospace,monospace;font-size:11px;
    letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
  .tier b{font-size:32px;letter-spacing:-.02em;display:block;margin:12px 0 2px;font-variant-numeric:tabular-nums}
  .tier .for{color:var(--brass);font-size:13.5px;font-weight:600}
  .tier p{color:var(--muted);font-size:14px;margin:12px 0 0}
  .fine{color:var(--muted);font-size:14px;margin-top:24px;max-width:74ch}

  /* frosted glass panels — same effect as the sticky top bar */
  .console,.stat,.cell,.sector,.mathcard,.tier{background:var(--glass);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  .center-head .label,.center-head h2{text-align:center}
  .center-head h2{margin-left:auto;margin-right:auto}
  .center-head .sub{text-align:center;margin-left:auto;margin-right:auto}
  .cta{border:1px solid var(--panel-edge);border-radius:14px;padding:60px 48px;text-align:center;
    background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  .cta h2{margin:12px auto 0;max-width:none}
  .cta p{color:var(--muted);max-width:52ch;margin:16px auto 0}
  /* demo section: risk strip, composer form, contact ramps */
  .risks{list-style:none;margin:22px auto 0;padding:0;max-width:56ch;text-align:left}
  .risks li{padding:8px 0 8px 18px;border-bottom:1px dashed var(--hair);color:var(--muted);
    font-size:14px;line-height:1.55;position:relative}
  .risks li::before{content:'';position:absolute;left:0;top:16px;width:7px;height:7px;
    border-radius:99px;border:1px solid var(--brass)}
  .risks li:last-child{border-bottom:none}
  .risks b{color:var(--ink);font-weight:600}
  .dform{max-width:560px;margin:26px auto 0;text-align:left;background:var(--inset);
    border:1px solid var(--panel-edge);border-radius:14px;padding:22px 22px 20px}
  .dform .frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  @media (max-width:620px){ .dform .frow{grid-template-columns:1fr} }
  .dform .f{margin-bottom:12px}
  .dform label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px;
    letter-spacing:.04em}
  .dform label b{color:var(--brass);font-weight:600}
  .dform input,.dform select{width:100%;background:var(--panel);border:1px solid var(--panel-edge);
    border-radius:8px;color:var(--ink);font:inherit;font-size:14px;padding:9px 11px}
  .dform input:focus-visible,.dform select:focus-visible{outline:2px solid var(--brass);outline-offset:1px}
  .dform input.bad{border-color:var(--red)}
  .dform .fcap{font-size:12px;color:var(--muted);margin:10px 0 0;line-height:1.5}
  .dout{display:none;margin-top:16px;border-top:1px solid var(--hair);padding-top:16px}
  .dout.show{display:block}
  .dout .obtns{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:12px}
  .dout textarea{width:100%;min-height:150px;background:var(--panel);border:1px solid var(--panel-edge);
    border-radius:8px;color:var(--muted);font-family:'JetBrains Mono',"Cascadia Code",Consolas,ui-monospace,monospace;
    font-size:12px;line-height:1.6;padding:11px 12px;resize:vertical}
  .dout .addr{font-family:'JetBrains Mono',"Cascadia Code",Consolas,ui-monospace,monospace;
    font-size:12.5px;color:var(--ink);word-break:break-all}
  /* handoff panel — shown after Approve & send; wording holds true whether or not
     the mail program actually opened */
  .handoff{margin-top:14px;border-top:1px solid var(--hair);padding-top:14px}
  .handoff[hidden]{display:none}
  .handoff .hmain{font-size:13px;color:var(--ink);margin:0 0 8px;line-height:1.6}
  .handoff .halt{font-size:12.5px;color:var(--muted);margin:0 0 10px;line-height:1.55}
  .handoff .obtns{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:0}
  /* focus never left the page: most likely nothing opened, so lead with the fallback */
  .handoff.stalled{border-top:none;border-left:3px solid var(--brass);background:var(--inset);
    border-radius:12px;padding:14px 16px}
  .handoff.stalled .halt{color:var(--ink);font-weight:600}
  .btn2s{font-size:12.5px;font-weight:700;padding:8px 13px;border-radius:7px;cursor:pointer;
    border:1px solid var(--panel-edge);background:transparent;color:var(--ink);font-family:inherit}
  .btn2s:hover{border-color:var(--brass)}
  .btn2s:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
  .btn2s.primary{background:var(--brass);border-color:var(--brass);color:var(--on-accent)}
  .cta .next{font-size:13.5px;max-width:56ch}
  .cta .fence{font-size:13.5px;color:var(--ink)}
  .cta .gnote{font-size:12.5px;max-width:56ch}

  footer{border-top:1px solid var(--hair);padding:60px 0;color:var(--muted);font-size:13.5px;
    display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

  .reveal{opacity:0;transform:translateY(20px);transition:opacity .75s ease,transform .75s ease}
  .reveal.in{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){ .reveal{opacity:1 !important;transform:none !important;transition:none} }
  h1,h2,h3,.brand{font-family:'Space Grotesk','Inter',"Segoe UI",sans-serif}
  @media (max-width:1080px){
    .nav-links a:not(.btn){display:none}
  }
  @media (max-width:920px){
    .hero{grid-template-columns:1fr;padding-top:60px}
    .c3,.c2{grid-column:span 6}
  }
  @media (max-width:620px){
    .cta{padding:44px 16px}
    .dform{padding:16px 12px 14px}
  }
  @media (max-width:480px){
    .nav{gap:10px}
    .nav-links{gap:10px}
    .brand{font-size:15px}
    .nav-links a.btn{padding:9px 13px;font-size:13px;white-space:nowrap}
    .theme-btn{width:34px;height:34px}
  }
  /* ---- phone pass: desktop keeps its scale; under 700px the type, card
     padding and section rhythm all step down together so the page reads as
     one continuous story instead of one full-screen card per swipe ---- */
  @media (max-width:699px){
    body{font-size:15.5px}
    .wrap{padding:0 20px}
    section[id],#top{scroll-margin-top:72px}
    .hero{padding-top:40px;padding-bottom:34px;gap:34px}
    h1{font-size:36px;font-size:clamp(33px,9.4vw,40px)}
    .hero p{font-size:16px;margin-top:16px}
    .hero .actions{margin-top:24px}
    section.wrap{padding-top:44px;padding-bottom:44px}
    section.wrap > .label{font-size:12px}
    h2{font-size:27px;font-size:clamp(25px,7vw,30px)}
    .sub{margin-top:12px;font-size:15px}
    /* stats stay 2+2, restyled as compact tiles so four fit in ~1.5 screens */
    .stats{gap:12px;margin-top:30px}
    .stat{padding:16px 14px;border-radius:10px}
    .stat b{font-size:23px}
    .stat span{font-size:12px;margin-top:6px;line-height:1.5}
    .grid{gap:14px;margin-top:30px}
    .cell{padding:20px 18px}
    .cell h3{font-size:17px}
    .cell p{font-size:13.5px}
    .sectors{gap:12px;margin-top:30px}
    .sector{padding:18px 16px}
    .sector h3{font-size:16px}
    .math3{gap:12px;margin-top:30px}
    .mathcard{padding:20px 18px}
    .mathcard h3{font-size:17px}
    .tiers{gap:14px;margin-top:30px}
    .tier{padding:22px 18px}
    .tier b{font-size:26px}
    .quote{padding:44px 0}
    .cta{padding:38px 18px}
    footer{padding:44px 0}
    .console{border-radius:12px}
    .console .body{padding:14px 14px 16px}
    .price-note{margin-top:20px}
    .fine{font-size:13px;margin-top:18px}
  }
  .qArrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;
    border-radius:999px;background:var(--pill);backdrop-filter:blur(8px);
    border:1px solid var(--hair);color:var(--muted);font-size:22px;line-height:1;
    cursor:pointer;opacity:.45;transition:opacity .25s ease,border-color .25s ease,color .25s ease;
    display:flex;align-items:center;justify-content:center;padding:0}
  .qArrow:hover{opacity:1;border-color:var(--brass);color:var(--ink)}
  .qArrow:focus-visible{outline:2px solid var(--brass);outline-offset:3px;opacity:1}
  #qPrev{left:max(12px,6vw)} #qNext{right:max(12px,6vw)}
/* ---- fullscreen layout tweaks (hero-left, stats 2+2) ---- */
body{overflow-x:hidden}
@media (min-width:1100px){
  .wrap.hero{max-width:none;padding-left:4vw;padding-right:4vw}
  .hero{gap:7vw}
  .stats{grid-template-columns:1fr 1fr;column-gap:120px;column-gap:clamp(60px,14vw,240px);row-gap:26px;
    width:92vw;max-width:1180px;margin-left:calc(50% - 46vw);
    width:min(92vw,1180px);margin-left:calc(50% - min(46vw,590px))}
}
/* Pre-min() browsers (Chrome/Edge<79, Firefox<75, Safari<11.1) drop any
   declaration containing min(), so the two break-out blocks here and below
   carry a plain width/max-width pair first — exactly equivalent — plus a
   breakpoint that re-centers them past the vw/px crossover, where the
   fallback calc(50% - 46vw) would otherwise drag them off to the left. */
@media (min-width:1283px){ .stats{margin-left:calc(50% - 590px)} }
/* ---- EXPERIMENTAL: capability ring carousel (delete this block + the
        capRing script below to restore the original grid) ---- */
#capRing.ring{display:block;position:relative;height:676px;cursor:grab;
  width:92vw;max-width:1240px;margin-left:calc(50% - 46vw);
  width:min(92vw,1240px);margin-left:calc(50% - min(46vw,620px));margin-top:20px}
@media (min-width:1348px){ #capRing.ring{margin-left:calc(50% - 620px)} }
#capRing.ring:active{cursor:grabbing}
#capRing.ring .cell{position:absolute;left:50%;top:50%;width:330px;max-width:82vw;width:min(330px,82vw);margin:0;
  user-select:none;-webkit-user-select:none;touch-action:pan-y}#capRing.ring .label{background:var(--brass);color:var(--on-accent);padding:8px 18px;
  border-radius:999px;display:inline-block;font-size:14.5px;font-weight:700;
  letter-spacing:.15em}
/* phones + small tablets: the orbit becomes a native edge-to-edge swipe row —
   snap-centered cards with the neighbors peeking in, native scroll physics,
   dots below. The capRing script adds .flat and parks its layout loop.
   760px matches the width where the ring (92vw) clears its own 700px
   vertical-wheel branch, so that wheel can never engage. */
@media (max-width:760px){
  #capRing.ring.flat{display:flex;position:static;height:auto;gap:14px;cursor:default;
    width:100vw;margin:22px calc(50% - 50vw) 0;padding:6px 9vw 14px;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;align-items:flex-start}
  #capRing.ring.flat::-webkit-scrollbar{display:none}
  #capRing.ring.flat:active{cursor:default}
  #capRing.ring.flat .cell{position:static;flex:0 0 min(82vw,340px);width:auto;
    scroll-snap-align:center;touch-action:auto}
  #capRing.ring.flat .label{font-size:12.5px;padding:6px 14px}
}
.ringdots{display:none}
@media (max-width:760px){
  .ringdots{display:flex;justify-content:center;gap:8px;margin-top:2px}
  .ringdots button{width:7px;height:7px;border-radius:999px;border:1px solid var(--brass);
    background:transparent;padding:0;cursor:pointer;opacity:.45}
  .ringdots button.on{background:var(--brass);opacity:1}
}
/* ---- accessibility + privacy chrome ---- */
.nav-links a.btn{color:var(--on-accent)}
.skiplink{position:fixed;top:-52px;left:16px;z-index:100;background:var(--brass);color:var(--on-accent);
  padding:10px 18px;border-radius:0 0 10px 10px;font-weight:700;text-decoration:none;transition:top .2s ease}
.skiplink:focus-visible{top:0;outline:2px solid #fff;outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
#capRing.ring .cell:focus-visible{outline:2px solid var(--brass);outline-offset:4px}
.privacy-list{margin:24px 0 0;padding:0;list-style:none;color:var(--muted);font-size:14.5px;max-width:72ch}
.privacy-list li{padding:12px 0 12px 26px;position:relative;border-top:1px dashed var(--hair);line-height:1.6}
.privacy-list li:first-child{border-top:none}
.privacy-list li::before{content:"§";position:absolute;left:2px;color:var(--brass)}
.privacy-list b{color:var(--ink)}
.privacy-list a{color:var(--brass)}
.footlinks{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
/* padded tap targets (24px+ high) without changing the visual rhythm */
.footlinks a,.footlinks button{background:none;border:none;padding:6px 4px;font:inherit;font-size:13px;
  color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.footlinks a:hover,.footlinks button:hover{color:var(--ink)}
.footlinks a:focus-visible,.footlinks button:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.ck{position:fixed;left:18px;bottom:18px;z-index:80;width:440px;max-width:calc(100vw - 36px);width:min(440px,calc(100vw - 36px));
  background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--panel-edge);border-radius:14px;padding:20px 22px;
  box-shadow:0 20px 60px rgba(0,0,0,.55)}
.ck[hidden]{display:none}
.ck h2{font-size:16px;margin:6px 0 8px;letter-spacing:-.01em}
.ck p{color:var(--muted);font-size:13px;margin:0 0 14px;line-height:1.55}
.ck .row2{display:flex;gap:10px;flex-wrap:wrap}
.ck .btn2{border-radius:8px;padding:9px 14px;font-size:13px;font-weight:700;cursor:pointer;
  border:1px solid var(--panel-edge);background:transparent;color:var(--ink)}
.ck .btn2.primary{background:var(--brass);border-color:var(--brass);color:var(--on-accent)}
.ck .btn2:hover{border-color:var(--brass)}
.ck .btn2:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.ck .opt{display:flex;align-items:flex-start;gap:12px;border-top:1px solid var(--hair);padding:12px 0}
.ck .opt input{width:18px;height:18px;accent-color:var(--brass);margin-top:2px;flex:none}
.ck .opt label{font-size:13px;color:var(--ink)}
.ck .opt label b{display:block;font-size:13.5px;margin-bottom:2px}
.ck .opt label span{color:var(--muted);font-size:12.5px;line-height:1.5}
@media (max-width:480px){
  .ck{left:10px;bottom:10px;width:calc(100vw - 20px);padding:14px 16px}
  .ck p{font-size:12.5px;margin-bottom:10px}
  .ck .btn2{padding:8px 11px;font-size:12.5px}
}

/* ---------------------------------------------------------------------------
   Multi-page additions. site.css is regenerated verbatim from the single-file
   source by tools/split_source.py, so anything hand-written lives here instead
   and the build concatenates the two. Keep this file small: if a rule belongs
   to a component that already exists, it belongs upstream.
   --------------------------------------------------------------------------- */

/* ---- home page: the six teaser cards ---- */
.teasers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:52px}
@media (max-width:980px){ .teasers{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .teasers{grid-template-columns:1fr;gap:14px;margin-top:30px} }

/* the whole card is the link, so strip the anchor styling and let .cell show */
a.teaser{display:flex;flex-direction:column;text-decoration:none;color:inherit}
a.teaser h3{margin:12px 0 8px;font-size:19px;font-weight:700;letter-spacing:-.01em;
  text-wrap:balance}
a.teaser p{margin:0;color:var(--muted);font-size:14.5px;flex:1 1 auto}
a.teaser .hint{margin-top:14px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brass)}
a.teaser:hover{border-color:var(--brass-dim)}
a.teaser:hover .hint{color:var(--ink)}
a.teaser:focus-visible{outline:2px solid var(--brass);outline-offset:4px}

/* ---- quote-rotor arrows: pre-max() fallback ----
   #qPrev/#qNext are positioned with max(12px,6vw), which browsers before Chrome 79 /
   Firefox 75 / Safari 11.1 drop entirely, leaving both arrows stacked at left:0.
   Same treatment as the min() pairs: a plain value first, the enhanced one after. */
#qPrev{left:12px;left:max(12px,6vw)}
#qNext{right:12px;right:max(12px,6vw)}

/* ---- nav: mark the page you are on ---- */
.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]::after{content:"";display:block;height:1px;margin-top:4px;
  background:var(--brass)}
/* the CTA is a filled button — it gets a ring instead of an underline */
.nav-links a.btn[aria-current="page"]::after{display:none}
.nav-links a.btn[aria-current="page"]{box-shadow:0 0 0 2px var(--brass-dim)}

/* ---- subpage headers ----
   On the one-page site every section carried its own top hairline and 60px of
   padding because it followed another section. As a page of its own it is the
   first thing under the fixed bar, so it needs the bar's height cleared and no
   leading rule. */
body.subpage main > section.wrap:first-child{border-top:0;padding-top:40px}

/* ===========================================================================
   Shell fidelity: make the website's chat look like the product's chat.

   Measured against the real stylesheet at
   Homestead-AI-repo/shell/src/homestead_shell/static/shell.css — not from memory.
   The palettes were already identical (--bg, --panel, --ink, --muted, --brass,
   --good all match to the hex), so what was left were structural differences.
   These three variables exist in the Shell and were missing here.
   =========================================================================== */
:root{
  --panel-2:#16223A; --hair-strong:rgba(237,239,244,.18); --brass-lift:#E3BE47;
  /* brass at low alpha, for the nav pills. Kept as its own variable rather than a
     literal rgba() because the brass hue itself changes between themes — a hardcoded
     rgba(201,162,39,…) is the dark-mode gold painted onto a cream page. */
  --brass-wash:rgba(201,162,39,.12); --brass-wash-2:rgba(201,162,39,.22);
  /* Form fields need their own border, separate from --panel-edge. Panel trim can be a
     whisper; the boundary of a control cannot — WCAG 1.4.11 asks for 3:1, and the shared
     value gave 1.33:1 in dark and 1.37:1 in light. .40 alpha clears it here at 3.45:1. */
  --field-edge:rgba(237,239,244,.40);
}
/* The Shell is dark-only, so these three had no light-mode counterpart to copy. Without
   them the human's chat bubble was #16223A navy behind #26211A near-black text — the
   prompts were effectively invisible in light mode. Light values are derived from the
   existing light palette: --panel-2 sits a shade darker than --bg so the bubble reads
   against the page, and --brass-lift is a step BRIGHTER than the light --brass #7A5D24
   rather than darker, because it is a hover state. */
html.light{
  /* #E3DAC6 rather than something nearer the page: the bubble has to read as a SHAPE,
     not just carry legible text. At 1.23:1 against --bg it is a visible surface, and
     still 11.5:1 behind --ink. A lighter tone passed the text check and left the bubble
     invisible, which is most of what was wrong here. */
  --panel-2:#E3DAC6; --hair-strong:rgba(38,33,26,.22); --brass-lift:#96742D;
  --brass-wash:rgba(122,93,36,.10); --brass-wash-2:rgba(122,93,36,.20);
  /* Light needs a SOLID value, not an alpha. The light panel is #FCFAF5 — so close to
     white that a translucent dark border tops out at 2.82:1 even at .46 and can never
     reach 3:1. #8E8579 is a solid warm grey: 3.48:1 on the panel, 3.23:1 on the page. */
  --field-edge:#8E8579;
}

/* User turns. The Shell draws these as a quiet panel bubble with a hairline and one
   squared corner (shell.css .msg--user .msg__bubble) — NOT the solid brass slab the
   site was using. Brass is reserved in the product for things the machine is telling
   you, so a brass bubble reads as the wrong speaker. */
.ask{background:var(--panel-2);color:var(--ink);border:1px solid var(--hair);
  font-weight:400;font-size:13.5px;line-height:1.5;
  border-radius:14px 14px 4px 14px;padding:10px 14px;
  margin:0 0 12px auto;max-width:78%;width:fit-content}

/* Tool activity. The Shell hangs these off a 2px brass rail and prefixes each with a
   brass ◈ while the step runs, swapping to a green ✓ when it finishes
   (shell.css .activity, .activity.is-ok). That running/finished distinction is the
   single most useful thing to carry over — it is what makes the panel look like work
   happening rather than text appearing. */
.act{font-family:'JetBrains Mono',"Cascadia Code",Consolas,ui-monospace,monospace;
  font-size:11.8px;letter-spacing:.02em;color:var(--muted);
  border-left:2px solid var(--brass);padding:3px 0 3px 12px;margin:8px 0}
/* The default is the FINISHED marker, because everywhere except the animated hero
   these lines describe work that already happened — the worked examples on the
   Capabilities page would otherwise all sit there claiming to be mid-flight. The
   brass ◈ appears only while the animation has that line running. */
.act::before{content:"✓ ";color:var(--good)}
.console.anim .act.busy::before{content:"◈ ";color:var(--brass)}

/* Bot turns are plain text with no bubble and no left padding, as in the Shell. */
.said{font-size:13.5px;line-height:1.6;margin:9px 0 14px;max-width:92%}

/* Safety cards already matched closely; these are the last two differences. */
.hcard{border-color:var(--hair-strong);max-width:34rem}

/* Card actions. The Shell's buttons are 9px-radius rectangles, not pills, and the
   confirm is brass-filled with near-black text (shell.css .card__btn--confirm). */
.hcard .cacts{display:flex;gap:8px;margin-top:12px}
/* Base is the quiet outline button — this is what Send looks like at rest. */
.hcard .cbtn{font:600 12.5px/1 'Inter',"Segoe UI",system-ui,sans-serif;
  padding:8px 14px;border-radius:9px;border:1px solid var(--hair-strong);
  background:transparent;color:var(--ink);display:inline-block;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,opacity .2s ease}
/* Brass goes to whichever action is being encouraged — Review, not Send. */
.hcard .cbtn--primary{background:var(--brass);border-color:var(--brass);color:var(--on-accent)}

/* Which button LOOKS primary and which button the animation PRESSES are now two
   different things, so they get two different hooks. Keying the pressed state off
   .cbtn--confirm used to work only because the brass button happened to be the one
   being pressed; the moment Review took the brass, that coupling would have lit up
   the wrong control. --send marks the action, --primary marks the emphasis. */
.hcard.hit .cbtn--send{background:var(--brass-lift);border-color:var(--brass-lift);
  color:var(--on-accent)}
.hcard.hit .cbtn--primary{opacity:.45}

/* The Shell's caret, to its own measurements (shell.css .cursor). It sits on the bot
   line while that line is arriving, and inside the person's bubble while they type. */
.console.anim .said.busy::after,
.console.anim .ask.typing::after{content:"";display:inline-block;
  width:.55em;height:1.05em;margin-left:3px;background:var(--brass);
  vertical-align:text-bottom;animation:concaret 1.1s steps(1) infinite}
@keyframes concaret{50%{opacity:0}}
/* an empty bubble is a nub for one frame otherwise, and the caret needs somewhere
   to stand while the first character is still on its way */
.console.anim .ask{min-width:2.4em}

/* ---- hero console: a fixed window the transcript scrolls inside ----
   The console used to grow to fit its content. Four turns would have made it tall
   enough to shove the whole hero down the page, so the body is now a fixed window and
   the transcript scrolls within it — measured at 353px, which is exactly the height
   the three-turn version rendered at on a desktop, so the panel is the same size it
   has always been. */
.console .body{height:353px;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--panel-edge) transparent}
.console .body::-webkit-scrollbar{width:6px}
.console .body::-webkit-scrollbar-track{background:transparent}
.console .body::-webkit-scrollbar-thumb{background:var(--panel-edge);border-radius:999px}
@media (max-width:920px){ .console .body{height:300px} }

/* the animation itself — every row starts hidden and is revealed on a timer */
.console.anim .body > *{opacity:0;transform:translateY(6px);
  transition:opacity .34s ease,transform .34s ease}
.console.anim .body > *.on{opacity:1;transform:none}
/* the running/finished marker on activity lines is the ◈ / ✓ swap defined above,
   exactly as the Shell does it — no trailing caret here, that belongs on bot text */

/* ---- replay control ----
   .wrap.hero is a two-column grid, so this button arrived as a THIRD grid item: it
   wrapped onto a new row, stretched to the full 809px of column one, and landed under
   the hero copy instead of under the console it belongs to — where the cookie banner
   then sat on top of it. Give it a row of its own and let it shrink to its content at
   the right-hand edge, which is where the console ends. */
.hero > .replay{grid-column:1/-1;justify-self:end}
@media (max-width:920px){ .hero > .replay{justify-self:start} }
.replay{display:inline-block;margin-top:14px;padding:8px 16px;font:inherit;font-size:12.5px;
  font-weight:600;cursor:pointer;border-radius:999px;color:var(--ink);
  border:1px solid var(--brass-dim);background:var(--brass-wash);
  transition:border-color .25s ease,background-color .25s ease}
.replay:hover{border-color:var(--brass);background:var(--brass-wash-2)}
.replay:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.replay[hidden]{display:none}

/* Reduced motion gets the finished transcript, no reveal, no caret, no smooth scroll.
   The script also bails before adding .anim, so this is belt and braces. */
@media (prefers-reduced-motion:reduce){
  .console.anim .body > *{opacity:1;transform:none;transition:none}
  .console.anim .said.busy::after{animation:none;opacity:0}
}

/* ---- workshop cards: click to expand ----
   Label, heading and the summary paragraph stay up front; the three fact rows are what
   opens. Driven by the same script as the math tiles, so the hint and the keyboard
   behaviour come along with it. max-height has to be generous — these rows are taller
   than the math ones and a short cap clips the last card mid-sentence. */
.workcard{cursor:pointer}
.workcard .factcards{max-height:0;overflow:hidden;margin:0;transition:max-height .45s ease}
.workcard.open .factcards{max-height:900px;margin-top:14px}
.workcard:focus-visible{outline:2px solid var(--brass);outline-offset:4px}

/* ---- form fields: a boundary you can actually see ----
   Applies to every control on the demo form. --panel-edge stays what it is for panels. */
.dform input,.dform select,.dform textarea{border-color:var(--field-edge)}

/* ---- hero subtitle ----
   This sits directly over the wireframe canvas, whose strokes are --ink drawn at .5
   canvas opacity — which composites to about rgb(124,128,138) in dark. --muted is
   #8A93A6. Those are 1.27:1 apart, so the sentence was landing on top of lines of
   nearly its own value and dissolving into them. --ink puts it at 3.42:1 against the
   wireframe and 16.27:1 against the page. Hierarchy against the h1 is carried by size
   and weight (18px/400 under 64px/750), which is enough without also dimming it — and
   this is the paragraph that explains what the product actually is. */
.hero p{color:var(--ink)}

/* ---- subpage backdrop: quieter ----
   On the home page the building is small in frame and then dissolves, so 0.5 reads as
   atmosphere. On a subpage it stands still behind a wall of copy for the whole visit,
   where the same value competes with the text instead of sitting under it. */
body.subpage #bgfield{opacity:.3}

/* ---- page-to-page pills ----
   One shape for all three moves out of a subpage: back to the teaser grid, and on to
   the neighbours either side. Brass-tinted rather than glass so they read as controls
   at a glance — the old versions sat so quietly against the panels that you had to go
   looking for them. Still short of the filled brass of the demo CTA, which has to stay
   the loudest thing on the page. */
.pill{display:inline-block;padding:9px 18px;border:1px solid var(--brass-dim);
  border-radius:999px;background:var(--brass-wash);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:var(--ink);text-decoration:none;font-size:13.5px;font-weight:600;
  letter-spacing:.02em;white-space:nowrap;
  transition:border-color .25s ease,background-color .25s ease,color .25s ease}
.pill:hover{border-color:var(--brass);background:var(--brass-wash-2);color:var(--ink)}
.pill:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
/* arrows carry the direction; the brass on them is what catches the eye first */
.pill-back::before,.pn-prev::before{content:"\2190";margin-right:9px;color:var(--brass);
  font-weight:700}
.pn-next::after{content:"\2192";margin-left:9px;color:var(--brass);font-weight:700}
/* the way out of the section ranks above the way along it */
/* The way out ranks a little above the way along, but only a little. It was reading as
   a filled brass button — closer to the demo CTA than to its own neighbours — so it now
   carries the same wash as the other two and is distinguished by a solid brass edge
   instead of a solid brass fill. `color` is stated outright rather than left to inherit
   from .pill: the computed value and the painted pixels disagreed here, and an explicit
   declaration is worth more than the diagnosis. */
.pill-back{background:var(--brass-wash);border-color:var(--brass);color:var(--ink)}
.pill-back:hover{background:var(--brass-wash-2);border-color:var(--brass);color:var(--ink)}

.backlink{margin:0 0 26px}

/* the anchor it lands on sits under the fixed bar, so clear the bar's height */
#explore{scroll-margin-top:88px}

/* ---- next/previous page footer nav ---- */
.pagenav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
  margin:60px 0 0;padding-top:26px;border-top:1px solid var(--hair)}
.pagenav .pn-prev{justify-self:start}
.pagenav .pn-back{justify-self:center}
.pagenav .pn-next{justify-self:end}
@media (max-width:640px){
  .pagenav{grid-template-columns:1fr;justify-items:center;gap:16px}
  .pagenav .pn-prev,.pagenav .pn-next{justify-self:center}
  .pagenav .pn-slot{display:none}
}