/* =================== landing (the app's front page) =================== */
  .empty{position:fixed; inset:0; z-index:50; background:var(--canvas); display:block;
    overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch}
  body:not(.no-doc) .empty{display:none}
  .site{width:min(1280px,100%); margin:0 auto; padding:0 var(--s-lg) var(--s-xxl)}

  .site-nav{display:flex; align-items:center; gap:var(--s-sm); height:72px}
  .wordmark{font-size:17px; font-weight:700; letter-spacing:-.4px; color:var(--on-dark);
    display:inline-flex; align-items:center; gap:7px}
  /* The mark is favicon.svg itself, not a copy of it — the browser has already
     fetched that file for the tab, so this costs nothing and the header can
     never drift from the icon. */
  .wordmark img{width:20px; height:20px; display:block; flex:0 0 auto}
  .wordmark.small{font-size:14px; color:var(--muted)}
  .lang-inline{display:inline-flex; gap:2px; background:var(--surface-card);
    border:1px solid var(--hairline); border-radius:var(--r-md); padding:3px}
  .lang-inline button{height:28px; padding:0 10px; border:0; border-radius:var(--r-sm);
    background:transparent; color:var(--muted); font-family:var(--mono); font-size:12px;
    font-weight:600; cursor:pointer}
  .lang-inline button:hover{color:var(--on-dark)}
  .lang-inline button[aria-pressed="true"]{background:var(--surface-elevated); color:var(--primary)}
  .nav-link{height:34px; padding:0 12px; border:0; background:transparent; color:var(--muted);
    font-size:14px; font-weight:500; cursor:pointer; border-radius:var(--r-md)}
  .nav-link:hover{color:var(--on-dark); background:var(--surface-card)}

  /* --- hero --- */
  .hero{display:grid; grid-template-columns:7fr 5fr; gap:var(--s-xxl); align-items:center;
    padding:var(--s-xxl) 0 96px}
  .hero-copy{min-width:0}
  .kick.mono-kick{display:inline-flex; align-items:center; gap:10px; margin-bottom:var(--s-lg);
    padding:0; background:transparent; border-radius:0; color:var(--muted);
    font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:2px; text-transform:uppercase}
  .kick.mono-kick::before{content:''; width:22px; height:1px; background:var(--primary)}
  .hero-copy h1{margin:0 0 var(--s-md); font-family:var(--display);
    font-size:72px; font-weight:700; line-height:1.08;
    letter-spacing:-1.4px; color:var(--on-dark); word-break:keep-all}
  .hero-copy p{margin:0 0 var(--s-xl); font-size:18px; line-height:1.55; color:var(--body);
    word-break:keep-all; max-width:52ch}
  .cta-row{display:flex; gap:var(--s-sm); flex-wrap:wrap}
  .btn-kick{height:44px; padding:0 24px; border:0; border-radius:var(--r-md);
    background:var(--primary); color:var(--on-primary); font-size:15px; font-weight:600; cursor:pointer}
  .btn-kick:hover{background:var(--primary-active)}
  .btn-ghost{height:44px; padding:0 22px; border:1px solid var(--hairline-strong);
    border-radius:var(--r-md); background:var(--surface-card); color:var(--on-dark);
    font-size:15px; font-weight:600; cursor:pointer}
  .btn-ghost:hover{border-color:var(--primary); color:var(--primary)}
  .link-sample{height:44px; padding:0 6px; border:0; background:transparent; color:var(--muted);
    font-size:15px; font-weight:500; cursor:pointer; text-decoration:underline;
    text-underline-offset:5px; text-decoration-color:var(--hairline-strong)}
  .link-sample:hover{color:var(--primary); text-decoration-color:var(--primary)}
  .proof{margin-top:var(--s-lg); font-family:var(--mono); font-size:12px;
    color:var(--muted-soft); line-height:1.9}

  /* --- live demo: the product itself, rendering in the hero --- */
  .hero-art{min-width:0}
  .demo{position:relative; border:1px solid var(--hairline); border-radius:var(--r-lg);
    background:var(--surface-card); overflow:hidden; cursor:pointer;
    transition:border-color .18s}
  .demo:hover, body.dragover .demo{border-color:var(--primary)}
  .demo-stage{position:relative; background:#000; line-height:0; min-height:200px}
  #demoCanvas{width:100%; height:auto; display:block; transition:opacity .32s var(--ez)}
  #demoCanvas.swap{opacity:0}
  .demo-laser{position:absolute; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%;
    background:radial-gradient(circle, rgba(239,68,68,.95) 0 4px, rgba(239,68,68,.4) 5px 8px, transparent 9px);
    left:30%; top:40%; opacity:0; transition:left 1.4s var(--ez), top 1.4s var(--ez), opacity .3s}
  .demo-laser.on{opacity:1}
  .demo-tag{position:absolute; top:8px; right:8px; padding:3px 9px; border-radius:var(--r-pill);
    font-family:var(--sans); font-size:10px; font-weight:700; letter-spacing:.2px; line-height:1.5;
    opacity:0; transform:translateY(-4px); transition:opacity .25s, transform .25s}
  .demo-tag.on{opacity:1; transform:none}
  .demo-tag.ok{background:var(--emerald); color:#04120a}
  .demo-tag.hold{background:var(--blue); color:#04101f}
  .demo-tag.fix{background:var(--rose); color:#1c0505}
  .demo-rail{display:flex; gap:2px; align-items:flex-end; height:16px; padding:0 var(--s-sm);
    margin-top:var(--s-xs)}
  .demo-rail i{flex:1; height:5px; border-radius:1px; background:var(--hairline-strong);
    transition:background .3s, height .3s}
  .demo-rail i.ok{background:var(--emerald); height:10px}
  .demo-rail i.hold{background:var(--blue); height:10px}
  .demo-rail i.fix{background:var(--rose); height:10px}
  .demo-rail i.cur{background:var(--primary); height:16px}
  .demo-foot{display:flex; align-items:center; justify-content:space-between;
    padding:var(--s-sm); border-top:1px solid var(--hairline); margin-top:var(--s-xs)}
  .demo-live{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono);
    font-size:10.5px; letter-spacing:.2px; color:var(--muted)}
  .demo-live i{width:6px; height:6px; border-radius:50%; background:var(--emerald); flex:0 0 auto;
    animation:live-blink 1.8s ease-in-out infinite}
  @keyframes live-blink{0%,100%{opacity:1}50%{opacity:.3}}
  .demo-cta{font-size:12.5px; font-weight:600; color:var(--on-dark); white-space:nowrap}
  .demo:hover .demo-cta{color:var(--primary)}
  .demo-drop{margin:var(--s-sm) 0 0; font-family:var(--mono); font-size:12px;
    color:var(--muted-soft); text-align:center}
  @media (prefers-reduced-motion:reduce){
    .demo-laser{transition:opacity .3s}
    .demo-live i{animation:none}
  }

  /* --- how to: numbered row on the canvas, no cards (the next band is cards) --- */
  .howto{padding-bottom:96px}
  .step-list{list-style:none; margin:0 0 var(--s-xxl); padding:0;
    display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-xl)}
  .step-n{font-family:var(--mono); font-size:40px; font-weight:700; letter-spacing:-2px;
    color:var(--primary); display:block; line-height:1}
  .step-list h3{margin:var(--s-sm) 0 var(--s-xs); font-size:20px; font-weight:700;
    letter-spacing:-.4px; word-break:keep-all}
  .step-list p{margin:0; font-size:15px; line-height:1.7; color:var(--body); word-break:keep-all}
  .how-split{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-xxl);
    padding-top:var(--s-xl); border-top:1px solid var(--hairline)}
  .how-split h3{margin:0 0 var(--s-sm); font-size:12px; font-weight:600; letter-spacing:1.5px;
    text-transform:uppercase; color:var(--muted)}
  .how-split ul{margin:0; padding:0; list-style:none}
  .how-split li{padding:var(--s-sm) 0; border-bottom:1px solid var(--hairline);
    font-size:15px; line-height:1.6; color:var(--body); word-break:keep-all}
  .how-split li:last-child{border-bottom:0}

  .band-eyebrow{margin:0 0 var(--s-lg); font-size:12px; font-weight:600; letter-spacing:1.5px;
    text-transform:uppercase; color:var(--muted)}

  /* --- three modes: an index, not a card grid --- */
  .modes{padding-bottom:96px}
  .mode-index{border-top:1px solid var(--hairline)}
  .mode-row{border-bottom:1px solid var(--hairline)}
  .mode-row summary{display:grid; grid-template-columns:64px 130px 1fr 32px; gap:var(--s-md);
    align-items:baseline; padding:var(--s-lg) 0; cursor:pointer; list-style:none}
  .mode-row summary::-webkit-details-marker{display:none}
  .mode-n{font-family:var(--mono); font-size:14px; font-weight:700; color:var(--muted);
    grid-column:1}
  .mode-row.accent .mode-n{color:var(--primary)}
  .mode-t{font-size:26px; font-weight:700; letter-spacing:-.5px; color:var(--on-dark);
    grid-column:2}
  .mode-l{font-size:15px; line-height:1.6; color:var(--body); word-break:keep-all;
    align-self:center; grid-column:3}
  .mode-x{font-family:var(--mono); font-size:20px; color:var(--muted); text-align:right;
    transition:transform .2s var(--ez); align-self:center; grid-column:4}
  .mode-row[open] .mode-x{transform:rotate(45deg); color:var(--primary)}
  .mode-row summary:hover .mode-t{color:var(--primary)}
  .mode-row ul{margin:0 0 var(--s-lg); padding:0 32px 0 calc(64px + var(--s-md));
    list-style:none}
  .mode-row li{padding:var(--s-xs) 0; font-size:14.5px; line-height:1.6; color:var(--body);
    word-break:keep-all; position:relative; padding-left:18px}
  .mode-row li::before{content:''; position:absolute; left:0; top:1.05em; width:8px; height:1px;
    background:var(--primary)}

  /* --- trust band: no cards here. The section above is cards, so this one sits
     directly on the canvas and is divided by hairlines, like a spec sheet. --- */
  .trust{padding-bottom:96px}
  .trust-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0;
    border-top:1px solid var(--hairline)}
  .trust-card{padding:var(--s-xl) var(--s-xl) 0 0}
  .trust-card + .trust-card{border-left:1px solid var(--hairline); padding-left:var(--s-xl)}
  .trust-card h3{margin:0 0 var(--s-sm); font-size:20px; font-weight:700; letter-spacing:-.4px;
    line-height:1.35; word-break:keep-all}
  .trust-card>p{margin:0; font-size:15px; line-height:1.7; color:var(--body); word-break:keep-all}
  .trust-proof{margin-top:var(--s-md) !important; font-family:var(--mono);
    font-size:12px !important; line-height:1.75 !important; color:var(--muted-soft) !important}

  /* --- keycap strip: the product is keyboard-driven, so let the page prove it --- */
  .keysrow{padding-bottom:96px}
  .keycaps{display:flex; flex-wrap:wrap; gap:var(--s-xs)}
  .keycaps span{
    min-width:52px; height:52px; padding:0 14px; display:inline-flex; align-items:center;
    justify-content:center; border:1px solid var(--hairline-strong); border-bottom-width:3px;
    border-radius:var(--r-md); background:var(--surface-card); color:var(--on-dark);
    font-family:var(--mono); font-size:17px; font-weight:700;
    transition:transform .08s, border-color .08s, color .08s, background .08s;
  }
  .keycaps span.hit{transform:translateY(2px); border-bottom-width:1px;
    border-color:var(--primary); color:var(--primary); background:var(--surface-elevated)}
  .keys-note{margin:var(--s-md) 0 0; font-family:var(--mono); font-size:12px;
    line-height:1.8; color:var(--muted-soft); word-break:keep-all}

  /* --- faq: a list, not a card wall ---
     These ten used to be numbered 01–10. Nothing about them is ordered:
     nobody needs question seven, and reading them in sequence buys you
     nothing, so the numerals were decoration sitting in a 64px column that
     could have been silence. The step list keeps its numbers because those
     really are steps. The question leads the row now. */
  .faq{padding-bottom:96px}
  .faq-list{border-top:1px solid var(--hairline)}
  .faq-item{border-bottom:1px solid var(--hairline); padding:var(--s-lg) 0}
  .faq-item h3{margin:0 0 var(--s-xs); font-size:18px; font-weight:600; letter-spacing:-.2px;
    color:var(--on-dark); word-break:keep-all}
  .faq-item p{margin:0; font-size:14.5px; line-height:1.75; color:var(--body);
    word-break:keep-all; max-width:70ch}

  /* --- closer: type on the canvas, one action --- */
  .closer{padding:64px 0 96px}
  .closer h2{margin:0 0 var(--s-sm); font-family:var(--display);
    font-size:64px; font-weight:700; letter-spacing:-1.4px;
    line-height:1.1; color:var(--primary); word-break:keep-all}
  .closer p{margin:0 0 var(--s-xl); font-size:17px; color:var(--body); word-break:keep-all}
  .btn-kick.big{height:52px; padding:0 34px; font-size:16px}

  /* --- footer --- */
  .site-foot{display:flex; align-items:center; gap:var(--s-md); flex-wrap:wrap;
    padding:var(--s-xl) 0 0; margin-top:64px; border-top:1px solid var(--hairline)}
  .foot-note{font-family:var(--mono); font-size:12px; color:var(--muted-soft)}
  .foot-legal{font-family:var(--mono); font-size:12px; color:var(--muted-soft); width:100%;
    padding-top:var(--s-sm); margin-top:var(--s-sm); border-top:1px solid var(--hairline)}

  /* Hidden only once we know scripting is on to un-hide it — see the html.js
     flag set in index.html. Without JS these blocks (the whole FAQ, the trust
     cards, the closer) would otherwise sit at opacity:0 forever: present in
     the markup, invisible to a reader and discountable by a renderer. */
  html.js .reveal{opacity:0}

  /* landing only — the scrollbar is hidden, so the page needs to say "there is more" */
  .scroll-cue{
    position:fixed; left:50%; bottom:22px; z-index:51; width:44px; height:44px;
    transform:translateX(-50%); border:1px solid var(--hairline); border-radius:var(--r-pill);
    background:color-mix(in srgb, var(--surface-card) 88%, transparent);
    color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:opacity .3s var(--ez), color .15s, border-color .15s;
    animation:cue-bob 2.4s ease-in-out infinite;
  }
  .scroll-cue:hover{color:var(--primary); border-color:var(--primary)}
  .scroll-cue svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2;
    stroke-linecap:round; stroke-linejoin:round}
  body:not(.no-doc) .scroll-cue,
  body.scrolled .scroll-cue{opacity:0; pointer-events:none}
  @keyframes cue-bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(5px)}}
  @media (prefers-reduced-motion:reduce){ .scroll-cue{animation:none} }
  @media (max-width:768px){ .scroll-cue{bottom:calc(14px + env(safe-area-inset-bottom))} }

  /* keyboard / gesture hints live in the shortcuts sheet now, not on the page */
  .keys{display:none}
  .touch-hints{display:none}