/* Root landing page — the paper half of the same system the lane page uses in ink.
   Tokens, fonts and the two themes come from app.css; nothing is redefined here.
   One accent (signal) and it is spent on the CTA. One object (the empty tile) and it is the
   signature. Everything else is type and space. */
@import url("/public/app.css");

body[data-theme="basic"]{
  --tile:var(--ink); --tile-fg:rgba(250,245,240,.55); --rule:rgba(6,12,10,.12);
  --accent:var(--signal); --on-accent:var(--ink);
  --t-display:clamp(44px,7.4vw,96px);
}
body{background:var(--paper);color:var(--ink)}

.hero,main,.foot{max-width:1080px;margin:0 auto;padding-left:var(--s-4);padding-right:var(--s-4)}

/* HERO */
.hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-6);align-items:end;
  padding-top:var(--s-6);padding-bottom:var(--s-7)}
.eyebrow{display:flex;align-items:center;gap:var(--s-2);margin:0 0 var(--s-5);
  font-size:var(--t-meta);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hero .mark{border-radius:6px}
.hero .display{font-weight:900;line-height:.94;letter-spacing:-.02em;margin:0 0 var(--s-4);max-width:13ch}
.lede{font-size:clamp(19px,2.1vw,24px);font-weight:400;line-height:1.4;margin:0 0 var(--s-4);max-width:34ch}
.when{margin:0 0 var(--s-5);font-weight:700;font-size:var(--t-h3);letter-spacing:.02em}
.cta{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  font:inherit;font-weight:800;font-size:var(--t-h3);min-height:56px;padding:0 var(--s-5);
  background:var(--accent);color:var(--on-accent);border-radius:999px;
  transition:transform var(--d-1) var(--ease),box-shadow var(--d-1) var(--ease)}
.cta:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(115,250,125,.35)}
.cta-note{margin:var(--s-3) 0 0;font-size:var(--t-meta);color:var(--muted)}

/* THE TILE — a video window with nobody in it. */
.tile{margin:0;display:flex;flex-direction:column;gap:var(--s-3)}
.tile-screen{position:relative;aspect-ratio:4/3;background:var(--tile);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.tile-screen::before{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 55% at 50% 45%,rgba(195,186,255,.14),transparent 70%)}
.tile-cam{position:absolute;top:var(--s-4);left:var(--s-4);width:18px;height:12px;border:2px solid var(--tile-fg);
  border-radius:3px}
.tile-cam::after{content:"";position:absolute;left:-6px;top:4px;width:28px;height:2px;background:var(--tile-fg);transform:rotate(-40deg)}
.tile-name{position:relative;font-weight:700;font-size:var(--t-h2);color:var(--tile-fg);letter-spacing:.04em}
.tile-cap{display:flex;gap:var(--s-2);flex-wrap:wrap;font-size:var(--t-meta);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.tile-cap span{padding:var(--s-1) var(--s-3);border:1px solid var(--rule);border-radius:999px}

/* SECTIONS */
main > section{padding:var(--s-6) 0;border-top:1px solid var(--rule)}
.h2{font-size:clamp(28px,3.4vw,40px);font-weight:800;line-height:1.05;margin:0 0 var(--s-5);letter-spacing:-.01em}
.h2-quiet{font-size:var(--t-meta);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin-bottom:var(--s-4)}

.blocks{list-style:none;margin:0 0 var(--s-5);padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}
.blocks li{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-4);border:1px solid var(--rule);
  border-radius:var(--radius);background:rgba(255,255,255,.55)}
.block-min{font-size:var(--t-meta);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.block-t{font-size:var(--t-h3);font-weight:700;line-height:1.15}
.format-prose{max-width:60ch;font-size:19px;line-height:1.5}
.format-prose p{margin:0 0 var(--s-3)}

.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6)}
.promise-who{margin:0 0 var(--s-2);font-size:var(--t-meta);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--care);
  filter:brightness(.62)}
.promise-line{margin:0 0 var(--s-3);font-size:clamp(24px,2.8vw,34px);font-weight:800;line-height:1.08;letter-spacing:-.01em}
.promise-body{margin:0;max-width:40ch;color:var(--muted)}

.figures{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-6);margin:0;padding:0}
.figures li{display:flex;flex-direction:column;gap:var(--s-1);min-width:9ch}
.fig{font-size:clamp(44px,6vw,72px);font-weight:900;line-height:1}
.cap{font-size:var(--t-meta);color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.proof-note{margin:var(--s-4) 0 0;color:var(--muted);max-width:56ch}

.qa{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
.qa div{padding-top:var(--s-3);border-top:2px solid var(--ink)}
.qa dt{font-size:var(--t-h3);font-weight:800;margin:0 0 var(--s-2)}
.qa dd{margin:0;color:var(--muted);max-width:32ch}

.close{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-4)}
.close-line{margin:0;font-size:clamp(26px,3.2vw,40px);font-weight:900;line-height:1.05;letter-spacing:-.01em;max-width:22ch}

.foot{padding-top:var(--s-5);padding-bottom:var(--s-6);border-top:1px solid var(--rule);color:var(--muted);
  font-size:var(--t-meta);display:flex;gap:var(--s-2);flex-wrap:wrap}

@media (max-width:820px){
  .hero{grid-template-columns:1fr;gap:var(--s-5);padding-bottom:var(--s-6)}
  .tile{max-width:420px}
  .blocks,.qa{grid-template-columns:1fr}
  .two{grid-template-columns:1fr;gap:var(--s-5)}
}
@media (prefers-reduced-motion:reduce){ .cta:hover{transform:none;box-shadow:none} }