/* Page CSS for the front page and Look inside. _shared.css holds the
   furniture lifted from the app; this holds what the two pages add. */

/* ── the opening ──────────────────────────────────────────────────────
   Words at a readable measure, then the thing itself. No picture of the
   product sitting above the product. */
.hero{padding-top:clamp(56px,9vh,110px)}
.hero .open{display:flex;flex-direction:column;gap:26px;max-width:none;
  margin-bottom:clamp(44px,6vh,76px)}
.hero .open h1{max-width:10ch}
.hero .open .lede{max-width:44ch}
.hero .open .under{display:flex;align-items:flex-start;gap:34px;flex-wrap:wrap;padding-top:10px}
.hero .open .fact{display:flex;flex-direction:column;gap:6px}
.hero .open .fact .v{font:500 13.5px var(--sans);color:var(--mid);letter-spacing:-.012em;
  white-space:nowrap}

/* ── the try-it ───────────────────────────────────────────────────────
   The product on the page, in the app's own furniture: one capsule for
   the control, the app's chip for what comes back. */
.try{padding:clamp(26px,3vw,40px)}
.tgrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(26px,4vw,64px)}
@media(max-width:900px){ .tgrid{grid-template-columns:1fr} }

.hold{position:relative;display:flex;align-items:center;justify-content:center;gap:16px;
  width:100%;height:76px;border:0;border-radius:999px;background:none;cursor:pointer;
  font:500 17px var(--sans);letter-spacing:-.02em;color:var(--soft);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow .5s var(--glide),color .5s var(--glide),background .5s var(--glide)}
.hold:hover:not(:disabled){color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2)}
.hold:disabled{cursor:default;color:var(--ghost)}
.hold.armed{color:var(--ink)}
.hold.live{background:var(--on);color:var(--ink);
  box-shadow:inset 0 1px 0 var(--w2),0 2px 14px var(--sh1)}
.hold .sz{font:400 11.5px/1 var(--mono);color:var(--ghost)}
.meter{display:flex;align-items:center;gap:4px;height:24px}
.meter i{width:4px;height:4px;border-radius:2px;background:var(--cr);opacity:.35;
  transition:height .08s linear,opacity .35s var(--glide)}
.hold.live .meter i{opacity:1}

.tstatus{display:flex;align-items:center;gap:10px;margin-top:16px;min-height:20px;
  font:400 13px var(--sans);color:var(--ghost)}
.tstatus .dot{width:5px;height:5px;border-radius:999px;background:var(--dim);flex:none;
  transition:background .5s var(--glide)}
.tstatus.go .dot{background:var(--cr)}
.tbar{height:2px;border-radius:2px;background:var(--w2);overflow:hidden;margin-top:14px;display:none}
.tbar.on{display:block}
.tbar i{display:block;height:100%;width:0;background:var(--soft);transition:width .25s linear}

.say{margin-top:clamp(28px,4vh,40px)}
.say .caps{color:var(--ghost);margin-bottom:6px}
.lines{display:flex;flex-direction:column}
.line{position:relative;display:block;width:100%;text-align:left;cursor:pointer;border:0;
  background:none;padding:15px 46px 15px 0;
  font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.45;
  color:var(--soft);letter-spacing:-.006em;transition:color .5s var(--glide)}
.line + .line{border-top:1px solid var(--w2)}
.line::after{content:"run it";position:absolute;right:2px;top:50%;transform:translateY(-50%);
  font:600 8.5px var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--dim);
  opacity:0;transition:opacity .4s var(--glide)}
.line:hover{color:var(--ink)}
.line:hover::after{opacity:1}

.typerow{display:flex;gap:10px;margin-top:22px}
.typerow input{flex:1;min-width:0;height:44px;border:0;border-radius:11px;padding:0 15px;
  font:400 14.5px var(--sans);color:var(--ink);background:var(--w1);
  box-shadow:inset 0 0 0 1px var(--w2);outline:none;transition:box-shadow .4s var(--glide)}
.typerow input::placeholder{color:var(--dim)}
.typerow input:focus{box-shadow:inset 0 0 0 1px var(--w4)}
.typerow button{height:44px;padding:0 18px;border:0;border-radius:11px;cursor:pointer;
  font:500 14px var(--sans);color:var(--soft);background:none;
  box-shadow:inset 0 0 0 1px var(--w3);transition:color .4s var(--glide),box-shadow .4s var(--glide)}
.typerow button:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--w4)}

.heard{min-height:74px;font-family:var(--serif);font-style:italic;font-size:21px;
  line-height:1.5;color:var(--soft);margin-bottom:26px}
.heard .w{opacity:0;transition:opacity .16s linear}
.heard .w.in{opacity:1}
.heard .t{color:var(--ink);
  background:linear-gradient(transparent 78%,rgba(200,110,62,.32) 78%,rgba(200,110,62,.32) 96%,transparent 96%)}
.heard.idle{color:var(--dim);font-family:var(--sans);font-style:normal;font-size:15px}
.hrow{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.tmr{font:400 11px var(--mono);color:var(--dim);font-variant-numeric:tabular-nums}
.filed .chip .tm{margin-left:auto;flex-shrink:0;font:11px/1 var(--mono);color:var(--ghost);
  font-variant-numeric:tabular-nums}

.lamps{display:flex;gap:24px;padding-bottom:15px;border-bottom:1px solid var(--w2)}
.lamps div{display:flex;align-items:center;gap:9px;
  font:600 9px var(--sans);letter-spacing:var(--tr);text-indent:var(--tr);
  text-transform:uppercase;color:var(--dim);transition:color .5s var(--glide)}
.lamps i{width:5px;height:5px;border-radius:999px;background:var(--dim);
  transition:background .5s var(--glide)}
.lamps div.lit{color:var(--soft)}
.lamps div.lit i{background:var(--ec)}

.filed{margin-top:20px;display:flex;flex-direction:column;gap:20px;min-height:184px}
.grp{display:flex;flex-direction:column;gap:8px}
.grp .caps{color:var(--dim)}
.blank{font:400 14.5px var(--sans);color:var(--dim);padding-top:30px;max-width:34ch}
.filed .chip{opacity:0;transform:translateX(10px);animation:land .6s var(--glide) forwards}
@keyframes land{to{opacity:1;transform:none}}
.filed .chip .hint{font:400 10px var(--mono);color:var(--dim)}

.wall{display:none;flex-direction:column;gap:18px}
.wall.on{display:flex}
.wall h3{max-width:14ch}
.wall p{font-size:15.5px;line-height:1.65;max-width:40ch}
.wall .go{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.wall .go a{display:inline-flex;align-items:center;height:44px;padding:0 22px;border-radius:999px;
  font:500 14.5px var(--sans);letter-spacing:-.014em;
  transition:box-shadow .5s var(--glide),background .5s var(--glide),color .5s var(--glide)}
.wall .go .primary{color:var(--paper);background:var(--ink)}
.wall .go .primary:hover{background:#fff}
.wall .go .quiet{color:var(--soft);box-shadow:inset 0 0 0 1px var(--w3)}
.wall .go .quiet:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--w4)}
.spent .hold,.spent .tstatus,.spent .say,.spent .typerow,.spent .tbar{display:none}

.tfoot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:30px;
  padding-top:20px;border-top:1px solid var(--w2);font:400 13px var(--sans);color:var(--ghost)}
.tfoot b{color:var(--soft);font-weight:500}

/* ── Time: the one picture, in a frame you can move around in ─────── */
.frame{position:relative;border-radius:20px;overflow:hidden;background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--line2),0 40px 100px var(--sh2)}
.fbar{position:relative;z-index:2;height:40px;display:flex;align-items:center;gap:8px;
  padding:0 16px;border-bottom:1px solid var(--w2);background:var(--card)}
.fbar i{width:9px;height:9px;border-radius:999px;background:var(--w3)}
.fbar .ft{margin-left:10px;font:500 11.5px var(--sans);color:var(--faint)}
.fbar .hint{margin-left:auto;font:400 10.5px var(--mono);color:var(--dim)}
.viewport{position:relative;container-type:inline-size;aspect-ratio:1240/660;
  overflow:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--w3) transparent}
.viewport::-webkit-scrollbar{width:9px;height:9px}
.viewport::-webkit-scrollbar-thumb{background:var(--w3);border-radius:8px}
.viewport::-webkit-scrollbar-track{background:transparent}
/* zoom, not transform: a transformed box keeps its unscaled layout and the
   scrollbar would lie about how much is left */
.scaled{position:relative;width:1240px;zoom:calc(100cqw / 1240px)}
@media (max-width:900px){ .viewport{aspect-ratio:auto;height:min(64vh,540px)} .scaled{zoom:.6} }

.win{overflow:hidden;background:var(--paper);
  display:grid;grid-template-columns:52px minmax(0,1fr) 300px;min-height:780px}
.strip{background:var(--sunk);border-right:1px solid var(--w2);padding:12px 0;
  display:flex;flex-direction:column;align-items:center;gap:6px}
.strip .s{position:relative;width:32px;height:32px;border-radius:9px;display:flex;
  align-items:center;justify-content:center;color:var(--dim)}
.strip .s svg{width:17px;height:17px}
.strip .s.on{color:var(--ink);background:var(--w1);box-shadow:inset 0 0 0 1px var(--w2)}
.strip .s .n{position:absolute;top:2px;right:2px;min-width:13px;height:13px;border-radius:999px;
  background:var(--cr);color:#180F09;font:600 9px/13px var(--sans);text-align:center}
.strip .sep{width:18px;height:1px;background:var(--w2);margin:6px 0}
.strip .grow{flex:1}
.pane{display:flex;flex-direction:column;min-width:0}
.pills{display:flex;align-items:center;gap:8px;padding:14px 16px;flex-wrap:nowrap;
  overflow:hidden;white-space:nowrap}
.pill{height:27px;padding:0 16px;border-radius:999px;font:600 9px/27px var(--sans);
  letter-spacing:var(--tr);text-indent:var(--tr);text-transform:uppercase;color:var(--faint);
  box-shadow:inset 0 0 0 1px var(--line)}
.pill.on{background:var(--on);color:var(--ink);box-shadow:inset 0 1px 0 var(--w2)}
.pill.wide{padding:0 32px}
.pills .gap{flex:1}
.pills .when{font:400 12px var(--mono);color:var(--faint)}
.head2{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:8px 18px 20px}
.head2 .ttl{display:flex;align-items:baseline;gap:12px}
.head2 .arrows{display:flex;gap:8px;color:var(--faint);font-size:17px;padding-right:4px}
.head2 h4{font:500 30px/1 var(--sans);letter-spacing:-.036em}
.head2 .yr{font:400 12.5px var(--mono);color:var(--ghost);margin-top:7px}
.counts{display:flex;gap:28px}
.counts div{display:flex;flex-direction:column;gap:3px}
.counts .n{font:500 20px var(--mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.counts .k{font:400 10px var(--sans);color:var(--ghost)}
.dn,.ad,.cols{display:grid;grid-template-columns:50px repeat(7,minmax(0,1fr))}
.dn{border-bottom:1px solid var(--g-col)}
.dn div{padding:8px 10px;font:400 12px var(--sans);color:var(--faint);
  border-left:1px solid var(--g-col)}
.dn div:first-child{border-left:0}
.dn .num{display:block;margin-top:4px;font:500 14px var(--mono);color:var(--soft)}
.dn .today .num{width:23px;height:23px;border-radius:999px;background:var(--on);color:var(--ink);
  text-align:center;line-height:23px;margin-top:2px}
.ad{border-bottom:1px solid var(--g-col);padding:5px 0;min-height:34px}
.ad .cell{border-left:1px solid var(--g-col);padding:0 5px;display:flex;flex-direction:column;gap:3px}
.ad .cell:first-child{border-left:0;font:600 9px/1.3 var(--sans);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ghost);padding:3px 7px}
.ad .chip{min-height:18px;padding:0 8px 0 10px;font-size:11.5px;line-height:18px;border-radius:5px}
.wbody{position:relative;flex:1;overflow:hidden}
.cols{height:100%}
.gut{position:relative}
.gut span{position:absolute;right:9px;font:400 10.5px var(--mono);color:var(--ghost);
  transform:translateY(-50%)}
.col{position:relative;border-left:1px solid var(--g-col)}
.col.today{background:var(--g-tod)}
.hr{position:absolute;left:0;right:0;height:1px;background:var(--g-hr)}
.ev{position:absolute;left:3px;right:3px;border-radius:9px;padding:6px 9px;overflow:hidden;
  background:var(--card);
  box-shadow:inset 3px 0 0 var(--ec,var(--line)),inset 0 0 0 1px var(--line)}
.ev .t{font:500 11.5px/1.3 var(--sans);letter-spacing:-.012em;color:var(--ink)}
.ev .s{font:400 10px var(--mono);color:var(--faint);margin-top:2px}
.nowline{position:absolute;left:50px;right:0;height:1px;background:var(--cr);z-index:3}
.nowline::before{content:"";position:absolute;left:-3px;top:-2.5px;width:6px;height:6px;
  border-radius:999px;background:var(--cr)}
.side{border-left:1px solid var(--w2);padding:16px;display:flex;flex-direction:column;gap:22px;
  min-width:0}
.side .grp{display:flex;flex-direction:column;gap:11px}
.side .day{font:500 13px var(--sans);color:var(--mid);letter-spacing:-.012em}
.side .row{display:grid;grid-template-columns:44px 12px minmax(0,1fr);gap:10px;align-items:start}
.side .row .h{font:400 12px var(--mono);color:var(--faint);padding-top:2px}
.side .row .d{width:7px;height:7px;border-radius:999px;background:var(--soft);margin-top:6px}
.side .row .d.hollow{background:transparent;box-shadow:inset 0 0 0 1.5px var(--faint)}
.side .row .n{font:400 13.5px/1.4 var(--sans);color:var(--ink);letter-spacing:-.01em}
.side .foot{margin-top:auto;display:flex;gap:24px;padding-top:16px;border-top:1px solid var(--w2)}
.side .foot div{display:flex;flex-direction:column;gap:2px}
.side .foot .n{font:500 17px var(--mono);font-variant-numeric:tabular-nums}
.side .foot .k{font:400 10px var(--sans);color:var(--ghost)}
.side .add{font:400 13.5px var(--sans);color:var(--faint)}
.caption{margin-top:20px;font:400 14px var(--sans);color:var(--ghost);max-width:56ch}

/* ── three beats: text with air, not three boxes ─────────────────── */
.beats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(26px,4vw,72px)}
.beat{display:flex;flex-direction:column;gap:12px;max-width:34ch}
.beat .n{font:400 12px var(--mono);color:var(--ghost);letter-spacing:.06em}
.beat p{font-size:15.5px;line-height:1.7}
.beat .demo{margin-top:8px;display:flex;flex-direction:column;gap:6px}
@media(max-width:900px){ .beats{grid-template-columns:1fr;gap:34px} }

/* ── two columns of plain words ──────────────────────────────────── */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,90px)}
.pair > div{display:flex;flex-direction:column;gap:13px;max-width:40ch}
.pair p{font-size:15.5px;line-height:1.72}
@media(max-width:900px){ .pair{grid-template-columns:1fr;gap:36px} }

/* ── the creatures ───────────────────────────────────────────────── */
.zoo{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
.zoo figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:26px 10px 16px;border-radius:16px;background:var(--card);
  box-shadow:inset 0 0 0 1px var(--w2);
  transition:box-shadow .5s var(--glide),transform .5s var(--glide)}
.zoo figure:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--line)}
.zoo img{height:58px;width:auto}
.zoo figcaption{font:600 9px var(--sans);letter-spacing:var(--tr);text-indent:var(--tr);
  text-transform:uppercase;color:var(--ghost)}
.sws{display:flex;gap:10px;flex-wrap:wrap;padding-top:6px}
.sw{width:24px;height:24px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--w4)}
.sw.on{box-shadow:inset 0 0 0 1px var(--w4),0 0 0 3px var(--paper),0 0 0 4px var(--soft)}
@media(max-width:900px){ .zoo{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(max-width:560px){ .zoo{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ── price / questions ───────────────────────────────────────────── */
.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(30px,5vw,90px);align-items:start}
@media(max-width:900px){ .split{grid-template-columns:1fr;gap:34px} }
table{width:100%;border-collapse:collapse}
th{text-align:left;padding:0 0 14px;font:600 9.5px var(--sans);letter-spacing:var(--tr);
  text-indent:var(--tr);text-transform:uppercase;color:var(--ghost)}
th:last-child,td:last-child{text-align:right}
td{padding:20px 0;border-top:1px solid var(--w2);font-size:15px;color:var(--soft);
  vertical-align:top;line-height:1.62}
td .t{display:block;color:var(--ink);font-weight:500;font-size:16px;letter-spacing:-.018em;
  margin-bottom:3px}
td:last-child{font-family:var(--mono);font-size:13.5px;font-variant-numeric:tabular-nums;
  color:var(--mid);white-space:nowrap}

/* ── download ────────────────────────────────────────────────────── */
.slot{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  padding:clamp(24px,2.6vw,32px);border-radius:20px;background:var(--card);
  box-shadow:inset 0 0 0 1px var(--line2)}
.slot .st{display:flex;flex-direction:column;gap:5px}
.slot .st b{font-size:16px;letter-spacing:-.02em}
.slot .st span{font-size:14px;color:var(--ghost)}

/* ── the film ─────────────────────────────────────────────────────────
   A 16:9 slot directly under the opening words. Sized off the ratio, not
   off a height, so the cut can change length without touching the page.
   To drop the film in: uncomment the <video> and delete the .slate. */
.film{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;
  background:var(--card);
  /* No hairline round it. The film is now cut on the page's own ground,
     so a ring only draws a bright line across the top and nothing else.
     The shadow underneath is all the lift it needs. */
  box-shadow:0 40px 100px var(--sh2)}
.film video,.film > img{width:100%;height:100%;object-fit:cover}
.film .slate{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:20px}
.film .slate .ring{width:66px;height:66px;border-radius:999px;display:flex;
  align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px var(--w3)}
.film .slate .ring::after{content:"";width:0;height:0;margin-left:5px;
  border-left:14px solid var(--dim);
  border-top:9px solid transparent;border-bottom:9px solid transparent}
.film .slate .caps{color:var(--dim)}

/* the strip under it: the gesture, then three plain facts */
.hero .open{gap:24px;margin-bottom:clamp(34px,5vh,58px)}
.orow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(30px,6vw,88px);align-items:end}
.orow .lede{max-width:42ch;padding-bottom:9px}
@media(max-width:900px){ .orow{grid-template-columns:1fr;align-items:start;gap:22px} }
.facts{display:flex;align-items:flex-start;gap:clamp(24px,4.6vw,68px);flex-wrap:wrap;
  margin-top:clamp(28px,4vh,44px);padding-top:24px;border-top:1px solid var(--w2)}
.facts .fact{display:flex;flex-direction:column;gap:7px}
.facts .fact .v{font:500 14px var(--sans);color:var(--mid);letter-spacing:-.012em;
  white-space:nowrap}
.facts .keys{margin-right:6px}
@media(max-width:700px){
  .facts{display:grid;grid-template-columns:1fr 1fr;gap:24px 26px}
  .facts .keys{grid-column:1 / -1;margin:0 0 2px}
}

/* ── the statement: three beats, in the film's own words ─────────── */
.statement h2{max-width:22ch;font-size:clamp(34px,5.4vw,62px);line-height:1.06;
  letter-spacing:-.042em}
.statement h2 .beat{display:inline-block}
.statement p{margin-top:28px;max-width:44ch;font-size:17px;color:var(--ghost)}

/* ── denser: less air between chapters, more on each screen ─────── */
:root{--chap:clamp(56px,7vh,98px)}
.head{margin-bottom:clamp(24px,3.2vh,38px)}

/* ── four cards, each with a piece of the real thing in it ──────── */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.3vw,18px)}
@media(max-width:1000px){ .cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:620px){ .cards{grid-template-columns:1fr} }
.ccard{display:flex;flex-direction:column;gap:11px;padding:20px;border-radius:16px;
  background:var(--card);box-shadow:inset 0 0 0 1px var(--w2)}
.ccard .n{font:400 11px var(--mono);color:var(--ghost)}
.ccard h3{font-size:17px}
.ccard p{font-size:14px;line-height:1.6;color:var(--soft)}
.ccard .mini{margin-top:auto;padding-top:14px;border-top:1px solid var(--w2);
  display:flex;flex-direction:column;gap:7px}
.ccard .mini .chip{font-size:12px;min-height:24px}
.ccard .mini .keys kbd{font-size:11px;padding:6px 9px}
.ccard .mini .cursor{display:flex;align-items:center;gap:2px;font:400 13px var(--mono);
  color:var(--soft)}
.ccard .mini .cursor b{display:inline-block;width:1.5px;height:15px;background:var(--cr);
  animation:blink 1.1s steps(1,end) infinite}
@keyframes blink{50%{opacity:0}}
.ccard .mini .meter i{background:var(--cr)}

/* ── you say it / it lands: the dense list ──────────────────────── */
.pairs{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:0 clamp(20px,3vw,52px);margin-top:clamp(26px,3.4vh,42px)}
.pairs .ph{padding-bottom:11px;border-bottom:1px solid var(--w2)}
.pairs .sd{display:flex;align-items:center;padding:14px 0;border-bottom:1px solid var(--w2);
  font-family:var(--serif);font-style:italic;font-size:15.5px;line-height:1.45;color:var(--soft)}
.pairs .ld{display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:14px 0;border-bottom:1px solid var(--w2)}
.pairs .ld .chip{font-size:12.5px;min-height:25px}
@media(max-width:820px){
  .pairs{grid-template-columns:1fr}
  .pairs .ph:nth-of-type(2){display:none}
  .pairs .sd{border-bottom:0;padding-bottom:6px}
}

/* ── the other views, small ─────────────────────────────────────── */
.screens{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.3vw,18px);
  margin-top:clamp(20px,2.6vh,30px)}
@media(max-width:1000px){ .screens{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:560px){ .screens{grid-template-columns:1fr} }
.scr{border-radius:14px;overflow:hidden;background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--w2)}
.scr .sb{height:27px;display:flex;align-items:center;gap:5px;padding:0 10px;
  border-bottom:1px solid var(--w2);background:var(--card)}
.scr .sb i{width:6px;height:6px;border-radius:999px;background:var(--w3)}
.scr .sb span{margin-left:7px;font:600 8.5px var(--sans);letter-spacing:.2em;
  text-transform:uppercase;color:var(--ghost)}
.scr .sbody{padding:12px;display:flex;flex-direction:column;gap:9px;height:158px}
.scr .ln{height:7px;border-radius:4px;background:var(--w2)}
.scr .ln.a{width:58%}.scr .ln.b{width:82%}.scr .ln.c{width:44%}
.scr .fld{height:26px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--w3);
  display:flex;align-items:center;padding:0 9px;font:400 11px var(--mono);color:var(--faint)}
.scr .chip{font-size:11.5px;min-height:22px;padding:3px 8px 3px 10px}
.scr .mgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.scr .mgrid i{aspect-ratio:1;border-radius:4px;background:var(--w1);
  box-shadow:inset 0 0 0 1px var(--w2)}
.scr .mgrid i.f{background:var(--w2)}
.scr .mgrid i.t{box-shadow:inset 0 0 0 1px var(--w4)}
.scr .lab{display:flex;align-items:center;gap:9px;font:400 12px var(--sans);color:var(--soft)}
.scr .lab s{width:3px;height:13px;border-radius:2px;background:var(--ec);text-decoration:none}
.scap{margin-top:11px;font:400 12.5px/1.5 var(--sans);color:var(--ghost)}

/* ── the creatures, tighter ─────────────────────────────────────── */
.zoo{grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(8px,1vw,14px)}
.zoo figure{padding:18px 8px 12px;gap:11px}
.zoo img{height:46px}

/* ── questions in two columns, so the page has no dead half ─────── */
.qtwo{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(26px,4vw,64px);max-width:none;align-items:start}
@media(max-width:820px){ .qtwo{grid-template-columns:1fr} }

/* ── section heads across the full width, so no chapter opens on a
      half-empty screen ─────────────────────────────────────────── */
/* One grid for the whole page. A heading's second column has to start where
   the third card starts, or every section opens slightly out of true. */
.head.wide{max-width:none;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px clamp(12px,1.4vw,20px);align-items:end}
.head.wide > .caps{grid-column:1 / -1}
.head.wide h2{grid-column:1 / 3;max-width:15ch;
  padding-right:clamp(20px,3vw,60px)}
.head.wide .lede{grid-column:3 / 4;max-width:none;padding-bottom:7px}
.head.wide .sws{grid-column:1 / -1;padding-top:14px}
@media(max-width:900px){
  .head.wide{grid-template-columns:1fr;align-items:start;gap:18px}
  .head.wide .lede{padding-bottom:0}
}
/* two columns of questions: each column needs its own closing line */
/* each column closes with its own line now that they are real columns */
.qcol{display:flex;flex-direction:column;min-width:0}
.qcol details.q:last-child{border-bottom:1px solid var(--w2)}

/* ── opened as a file: say so, instead of sitting there dead ────── */
.asfilenote{margin-bottom:22px;padding:15px 17px;border-radius:12px;background:var(--w1);
  box-shadow:inset 0 0 0 1px var(--w3);font-size:14px;line-height:1.65;color:var(--soft)}
.asfilenote b{color:var(--ink)}
.asfilenote code{font:400 12.5px var(--mono);color:var(--mid)}
.asfile .say,.asfile .tbar{display:none}
.asfile .hold,.asfile .typerow{opacity:.4}


/* ── three plain claims, no pictures. The film did the showing. ─── */
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.three > div{padding-right:clamp(18px,2.4vw,44px)}
.three > .claim > p{margin-bottom:16px}
.three > div{display:flex;flex-direction:column;gap:11px;max-width:36ch}
.three p{font-size:15.5px;line-height:1.7}
.three .caps{color:var(--soft)}
@media(max-width:900px){ .three{grid-template-columns:1fr;gap:30px} }

/* a quiet way on to the next page */
.more{display:inline-flex;align-items:center;gap:9px;margin-top:clamp(30px,4vh,46px);
  height:46px;padding:0 24px;border-radius:999px;font:500 14.5px var(--sans);
  letter-spacing:-.014em;color:var(--soft);box-shadow:inset 0 0 0 1px var(--w3);
  transition:color .5s var(--glide),box-shadow .5s var(--glide)}
.more:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--w5)}
.more i{font-style:normal;color:var(--faint)}

/* ── the plans ──────────────────────────────────────────────────── */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);
  align-items:stretch}
@media(max-width:940px){ .plans{grid-template-columns:1fr} }
.plan{position:relative;display:flex;flex-direction:column;gap:16px;
  padding:clamp(22px,2.2vw,30px);border-radius:20px;background:var(--card);
  box-shadow:inset 0 0 0 1px var(--w2)}
.plan.lead{box-shadow:inset 0 0 0 1px var(--line2),0 26px 70px var(--sh2)}
.plan .pt{display:flex;flex-direction:column;gap:14px}
.plan .pt .caps{color:var(--soft)}
.plan .amt{display:flex;align-items:baseline;gap:9px}
.plan .amt b{font:500 40px/1 var(--sans);letter-spacing:-.042em;color:var(--ink);
  font-variant-numeric:tabular-nums}
.plan .amt span{font-size:13.5px;color:var(--ghost)}
.plan .pl{font-size:15px;line-height:1.55;color:var(--mid);
  padding-bottom:16px;border-bottom:1px solid var(--w2)}
.plan ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.plan li{position:relative;padding-left:19px;font-size:14.5px;line-height:1.55;color:var(--soft)}
.plan li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;
  border-radius:999px;background:var(--w4)}
.plan .tag{position:absolute;top:-9px;right:22px;height:22px;padding:0 12px;border-radius:999px;
  background:var(--on);color:var(--mid);
  font:600 8.5px/22px var(--sans);letter-spacing:var(--tr);text-indent:var(--tr);
  text-transform:uppercase;box-shadow:inset 0 1px 0 var(--w2)}
.pnote{margin-top:clamp(20px,2.6vh,30px);font:400 13.5px var(--sans);color:var(--ghost)}

/* the team card carries no number, so it should not shout like one */
.plan.quiet .amt b{font:500 21px/1 var(--sans);letter-spacing:-.026em;color:var(--mid)}
.plan.quiet .amt{min-height:40px;align-items:center}
.tlink{margin-top:auto;padding-top:16px;font:500 14px var(--sans);color:var(--faint);
  display:inline-flex;align-items:center;gap:8px;transition:color .5s var(--glide)}
.tlink:hover{color:var(--ink)}
.tlink i{font-style:normal}

/* ══════════════════════════════════════════════════════════════════
   Polish: light in the room, things arriving, and a ground that can
   turn to the app's own white paper.
   ══════════════════════════════════════════════════════════════════ */

/* ── the page light. One source, top right, and it never repeats. ── */
body::before{background:
  radial-gradient(1100px 640px at 74% -14%,rgba(255,255,255,.05),transparent 62%),
  radial-gradient(900px 520px at 8% 42%,rgba(255,255,255,.022),transparent 60%)}
html.light body::before{background:
  radial-gradient(1100px 640px at 74% -14%,rgba(0,0,0,.045),transparent 62%),
  radial-gradient(900px 520px at 8% 42%,rgba(0,0,0,.02),transparent 60%)}

/* every chapter brings its own light up as it arrives */
.chap{position:relative}
.chap::before{content:"";position:absolute;inset:-6% -12%;pointer-events:none;z-index:-1;
  background:radial-gradient(58% 46% at 50% 22%,rgba(255,255,255,.032),transparent 62%);
  opacity:0;transition:opacity 1.6s var(--glide)}
html.light .chap::before{background:radial-gradient(58% 46% at 50% 22%,rgba(0,0,0,.028),transparent 62%)}
.chap.lit::before{opacity:1}

/* ── arrivals ────────────────────────────────────────────────────── */
html.js .rise{opacity:0;transform:translateY(22px) scale(.994);
  transition:opacity .9s var(--glide),transform .9s var(--glide)}
html.js .rise.in{opacity:1;transform:none}
html:not(.js) .rise{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ html.js .rise{opacity:1;transform:none} }

/* ── the bar ─────────────────────────────────────────────────────── */
.bar{transition:transform .55s var(--glide),background .6s var(--glide),
  box-shadow .6s var(--glide)}
.bar.gone{transform:translateY(-102%)}
.bar.deep{background:color-mix(in srgb,var(--paper) 88%,transparent);
  box-shadow:0 10px 30px var(--sh1)}
.bar .mark .mk{transition:transform .6s var(--glide)}
.bar:hover .mark .mk{transform:rotate(-6deg) scale(1.06)}

/* ── the hero, and the film in its frame ─────────────────────────── */
.hero .open .caps{opacity:.9}
.film{transition:box-shadow .9s var(--glide),transform .9s var(--glide)}
.film::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:20px}
.filmwrap{position:relative}
.filmwrap::before{content:"";position:absolute;left:6%;right:6%;top:14%;bottom:-6%;
  pointer-events:none;z-index:-1;filter:blur(60px);opacity:.5;
  background:radial-gradient(60% 60% at 50% 50%,rgba(255,255,255,.10),transparent 70%)}
html.light .filmwrap::before{background:radial-gradient(60% 60% at 50% 50%,rgba(0,0,0,.10),transparent 70%)}

/* the cue: a line that breathes, and leaves as soon as you scroll */
.cue{display:flex;flex-direction:column;align-items:center;gap:10px;
  margin-top:clamp(26px,3.4vh,40px);
  font:600 8.5px var(--sans);letter-spacing:var(--tr);text-indent:var(--tr);
  text-transform:uppercase;color:var(--dim);
  transition:opacity .7s var(--glide),transform .7s var(--glide)}
.cue i{display:block;width:1px;height:34px;
  background:linear-gradient(var(--w4),transparent);
  animation:drop 2.8s var(--glide) infinite}
@keyframes drop{0%{transform:scaleY(.25);transform-origin:top;opacity:0}
  40%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);transform-origin:bottom;opacity:0}}
.cue.gone{opacity:0;transform:translateY(10px)}

/* ── the three claims: a rule that draws itself in ───────────────── */
.three > div{position:relative;padding-top:20px}
.three > div::before{content:"";position:absolute;top:0;left:0;height:1px;width:0;
  background:var(--w4);transition:width 1.1s var(--glide) .15s}
.three > div.in::before{width:100%}

/* ── the plans ───────────────────────────────────────────────────── */
.plan{transition:transform .55s var(--glide),box-shadow .55s var(--glide)}
.plan:hover{transform:translateY(-5px);box-shadow:inset 0 0 0 1px var(--line),0 22px 50px var(--sh2)}
.plan.lead:hover{box-shadow:inset 0 0 0 1px var(--line2),0 34px 80px var(--sh2)}
.plan .amt b{transition:letter-spacing .55s var(--glide)}
.plan:hover .amt b{letter-spacing:-.036em}

/* ── the questions open with the answer sliding out ──────────────── */
details.q summary{transition:color .45s var(--glide),padding-left .45s var(--glide)}
details.q summary:hover{padding-left:6px}

/* ── the way on ──────────────────────────────────────────────────── */
.more{position:relative;overflow:hidden}
.more i{transition:transform .5s var(--glide)}
.more:hover i{transform:translateX(4px)}

/* ── white paper: the page's own shadows have to soften with it ──── */
html.light .card,html.light .plan,html.light .film,html.light .slot{
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.10),0 2px 5px rgba(0,0,0,.05),
             0 22px 44px -16px rgba(0,0,0,.16)}
html.light .plan.lead{box-shadow:inset 0 0 0 1px rgba(0,0,0,.16),0 3px 8px rgba(0,0,0,.06),
             0 32px 66px -20px rgba(0,0,0,.22)}
html.light .bar.deep{box-shadow:0 8px 26px rgba(0,0,0,.08)}
html.light ::selection{background:rgba(0,0,0,.12)}

/* ── the desk, on the front page too ─────────────────────────────── */
.desk{position:fixed;right:26px;bottom:26px;z-index:60;
  display:flex;align-items:center;gap:14px;padding:9px 14px;border-radius:999px;
  background:color-mix(in srgb,var(--paper) 76%,transparent);
  -webkit-backdrop-filter:saturate(150%) blur(22px);backdrop-filter:saturate(150%) blur(22px);
  box-shadow:inset 0 0 0 1px var(--w3),0 18px 50px var(--sh2);
  /* Visible from the first screen. It used to fade in only after 260px of
     scroll, so a person landing on the title card had no way to change the
     ground at all - the one control on the site was invisible exactly where
     they first wanted it. 2026-09-01. */
  opacity:1;pointer-events:auto;transform:none;
  transition:opacity .6s var(--glide),transform .6s var(--glide)}
.desk .dgroup{display:flex;gap:6px}
.desk .cap{height:27px;padding:0 15px}
.desk .cap.on{background:var(--on);color:var(--ink);box-shadow:none}
.dsep{width:1px;height:20px;background:var(--w3)}
.dswatches{display:flex;gap:7px}
.dsw{width:20px;height:20px;border:0;border-radius:999px;cursor:pointer;padding:0;
  box-shadow:inset 0 0 0 1px var(--w4);transition:transform .35s var(--glide)}
.dsw:hover{transform:scale(1.14)}
.dsw.on{box-shadow:inset 0 0 0 1px var(--w4),0 0 0 2px var(--paper),0 0 0 3.5px var(--ink)}
@media(max-width:760px){ .desk{right:50%;transform:translate(50%,26px)}
  .desk.up{transform:translate(50%,0)} .dswatches .dsw:nth-child(n+5){display:none} }

/* ── the gesture, on the page ────────────────────────────────────── */
.facts .keys{border-radius:12px;padding:6px 10px;margin:-6px -10px;
  transition:background .4s var(--glide)}
.facts .keys:hover{background:var(--w1)}
.facts .keys kbd{transition:transform .18s var(--glide),color .3s var(--glide),
  box-shadow .3s var(--glide)}
.facts .keys.down kbd{transform:translateY(2px);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--w5)}
.drop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:0;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s var(--glide),opacity .5s var(--glide),margin .5s var(--glide)}
.drop.hearing,.drop.landed{max-height:200px;opacity:1;margin-top:16px}
.drop.landed{flex-wrap:wrap}
.drop .what{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--soft)}
.drop .meter{display:flex;align-items:center;gap:4px;height:20px}
.drop .meter i{width:3px;height:4px;border-radius:2px;background:var(--cr);
  transition:height .07s linear}
.drop .chip{opacity:0;animation:land .5s var(--glide) forwards}
.drop .chip:nth-child(2){animation-delay:.1s}
.drop .chip:nth-child(3){animation-delay:.2s}
@keyframes land{to{opacity:1}}

/* ── the film's own line ─────────────────────────────────────────── */
.filmwrap .scrub{position:absolute;left:0;right:0;bottom:-1px;height:2px;
  border-radius:2px;background:var(--w2);overflow:hidden;
  opacity:0;transition:opacity .5s var(--glide)}
.filmwrap:hover .scrub,.filmwrap.held .scrub{opacity:1}
.filmwrap .scrub i{display:block;height:100%;width:0;background:var(--cr)}
.film{cursor:pointer}
.filmwrap.held .film{filter:saturate(.85) brightness(.88)}
.filmwrap.held::after{content:"Paused";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  font:600 9px var(--sans);letter-spacing:var(--tr);text-indent:var(--tr);
  text-transform:uppercase;color:var(--ink);
  padding:9px 18px;border-radius:999px;background:color-mix(in srgb,var(--paper) 70%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:inset 0 0 0 1px var(--w3)}

/* ── the light follows the pointer ───────────────────────────────── */
.sheen{position:relative}
.sheen::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(220px 220px at var(--mx,50%) var(--my,50%),
             rgba(255,255,255,.05),transparent 68%);
  opacity:0;transition:opacity .5s var(--glide);z-index:1}
.sheen:hover::before{opacity:1}
html.light .sheen::before{background:radial-gradient(220px 220px at var(--mx,50%) var(--my,50%),
             rgba(255,255,255,.75),transparent 68%)}
.plan > *{position:relative;z-index:2}

/* ══════════════════════════════════════════════════════════════════
   The three claims, with something under each of them that is doing
   the thing the sentence claims. Small, and it only moves when the
   claim is in front of you or under your pointer.
   ══════════════════════════════════════════════════════════════════ */
.three > .claim{display:flex;flex-direction:column;gap:11px;padding-bottom:2px;
  transition:opacity .5s var(--glide)}
.three:hover > .claim{opacity:.45}
.three:hover > .claim:hover{opacity:1}
.three > .claim::before{transition:width 1.1s var(--glide) .15s,background .5s var(--glide)}
.three > .claim:hover::before{background:var(--cr)}

/* pushed to the foot of the column so all three sit on one line,
   whatever length the sentence above them runs to */
.fig{position:relative;margin-top:auto;height:96px;border-radius:14px;overflow:hidden;
  background:var(--w1);box-shadow:inset 0 0 0 1px var(--w2);
  transition:box-shadow .5s var(--glide),background .5s var(--glide)}
.claim:hover .fig{box-shadow:inset 0 0 0 1px var(--w3)}

/* 01 - it holds on to the edge and never comes in */
.fig-edge .lip{position:absolute;left:0;right:0;top:20px;height:1px;background:var(--w3)}
.fig-edge::before{content:"";position:absolute;left:0;right:0;top:0;height:20px;
  background:var(--w1);border-bottom:1px solid var(--w2)}
.fig-edge img{position:absolute;left:64%;top:20px;height:38px;width:auto;
  transform-origin:50% 75%;transform:rotate(140deg) translate(-50%,-75%);
  animation:sway3 3.4s ease-in-out infinite;animation-play-state:paused}
.claim:hover .fig-edge img,.three .claim.in .fig-edge img{animation-play-state:running}
@keyframes sway3{0%,100%{transform:rotate(137deg) translate(-50%,-75%)}
                 50%    {transform:rotate(143deg) translate(-50%,-75%)}}

/* 02 - three things arriving where they belong */
.fig-land{display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 12px;
  height:96px;overflow:hidden}
.fig-land .chip{font-size:11px;min-height:20px;padding:3px 8px 3px 10px;
  opacity:0;transform:translateX(14px)}
.claim.in .fig-land .chip{animation:slide .6s var(--glide) forwards}
.claim.in .fig-land .chip:nth-child(2){animation-delay:.13s}
.claim.in .fig-land .chip:nth-child(3){animation-delay:.26s}
.claim:hover .fig-land .chip{animation:slide .6s var(--glide) forwards}
@keyframes slide{to{opacity:1;transform:none}}

/* 03 - it is listening, and it is not sending anything anywhere */
.fig-hear{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.fig-hear .meter{display:flex;align-items:center;gap:4px;height:34px}
.fig-hear .meter i{width:3px;height:4px;border-radius:2px;background:var(--cr);opacity:.45;
  transition:height .09s linear,opacity .4s var(--glide)}
.claim:hover .fig-hear .meter i{opacity:1}
.fig-hear .off{font:400 10.5px var(--mono);color:var(--dim)}

@media (prefers-reduced-motion:reduce){
  .fig-edge img{animation:none}
  .fig-land .chip{opacity:1;transform:none;animation:none}
}

/* ══════════════════════════════════════════════════════════════════
   The front page as a sequence.

   The film's own grammar: a card of words, then the thing itself, then
   a card of words. Each act owns a screen. Nothing shares one.
   ══════════════════════════════════════════════════════════════════ */
/* the chip adds height to its line, so the two lines need a little more
   room than a plain headline would */
.room.title h1{font-size:clamp(52px,9vw,132px);line-height:1.0;letter-spacing:-.045em;
  max-width:none;text-align:center}
.room.title .card-label p{max-width:44ch;font-size:17px}
.room.title .no{color:var(--faint)}

/* the film takes the whole width, with nothing around it */
.room.bleed{padding:0;min-height:auto;justify-content:center}
.room.bleed .filmwrap{width:100%;max-width:none}
.room.bleed .film{border-radius:0;aspect-ratio:16/9;box-shadow:none}
.room.bleed .film::after{border-radius:0}
.room.bleed .filmwrap::before{display:none}
@media(min-width:1500px){ .room.bleed .film{max-height:86vh} }

/* the three acts: one figure, alone, large */
.scene{width:min(760px,100%)}
.fig.tall{height:clamp(220px,32vh,320px);margin-top:0;border-radius:20px;
  background:var(--card);box-shadow:inset 0 0 0 1px var(--w2),0 30px 70px -30px var(--sh2)}
.fig-edge.tall .lip{top:44px}
.fig-edge.tall::before{height:44px}
.fig-edge.tall img{top:44px;left:62%;height:104px}
.fig-land.tall{height:clamp(220px,32vh,320px);gap:10px;padding:0 clamp(20px,4vw,48px);
  justify-content:center}
.fig-land.tall .chip{font-size:14px;min-height:32px;padding:6px 12px 6px 14px}
.fig-hear.tall{gap:20px}
.fig-hear.tall .meter{height:72px;gap:6px}
.fig-hear.tall .meter i{width:4px}
.fig-hear.tall .off{font-size:12px}
.room .scene .fig{opacity:1}

/* the quiet act: the gesture and the plain facts, no picture */
.room.quiet .facts{border-top:0;margin-top:0;padding-top:0;justify-content:center;
  gap:clamp(26px,4vw,64px)}
.room.quiet .exhibit{flex-direction:column;align-items:center;gap:clamp(24px,3.4vh,40px)}
.room.quiet .tryhint{justify-content:center}

/* the kept sections keep their grid, centred inside their act */
.room .inner{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.room .inner .head{margin-bottom:clamp(24px,3.2vh,38px)}
.room:has(.inner){align-items:stretch}

@media(max-width:900px){
  .fig.tall{height:220px}
  .fig-edge.tall img{height:84px}
}

/* ── the sequence, tightened ─────────────────────────────────────────
   Only the title card gets a whole screen. Everything after it is sized
   by what is in it: a page that makes you scroll past nothing is not
   cinematic, it is just long. */
.room{min-height:auto;padding:clamp(70px,9vh,120px) var(--gut)}
.room.title{min-height:min(88vh,860px);padding-top:clamp(90px,12vh,150px)}
.room.reel{padding-top:clamp(24px,3vh,44px);padding-bottom:clamp(46px,6vh,80px)}
.room.reel .filmwrap{width:100%}
.room.reel .film{aspect-ratio:16/9;border-radius:20px}
.room.reel .facts{margin-top:clamp(26px,3.4vh,44px)}
.room > .card-label{margin-bottom:clamp(30px,4vh,52px)}
.room .exhibit{width:100%}
.room:has(.three){padding-bottom:clamp(56px,7vh,96px)}
.three + .more{margin-top:clamp(34px,4.4vh,58px)}

/* the film should already be showing under the title, not a screen away */
.room.title{min-height:min(74vh,740px);padding-bottom:clamp(30px,4vh,56px)}
.room.title .cue{margin-top:clamp(20px,3vh,34px)}


/* ══════════════════════════════════════════════════════════════════
   v8 - the page inherits the FILM's ground, 2026-09-01.

   The film was cut on a warm cream, #F4F2EE, with the app's windows
   pure white on top of it. That contrast is the whole reason a window
   in the film reads as an object rather than as a panel. The site used
   to open on black under a cream film, so the film arrived as a
   foreign body. It doesn't any more.

   The ground is CHROME, so it is never seed-tinted - same rule as
   before, only the value changed. The eight seeds still do exactly
   what they did: data and state, nothing else.
   Sampled straight out of film.mp4, not invented here.
   ══════════════════════════════════════════════════════════════════ */

/* ── the title card is the film's end card ────────────────────────────
   Icon, the line, the strip. The film closes on this frame; the page
   opens on it. Nothing else is on this screen - the emptiness is the
   technique, not a gap waiting to be filled. */
.endcard{--gz:clamp(52px,8.2vw,108px);display:flex;flex-direction:column;align-items:center;
  gap:clamp(26px,3.4vh,44px);text-align:center}

.endcard .glyph{position:relative;display:flex;align-items:center;justify-content:center;
  gap:calc(var(--gz) * .105);
  width:var(--gz);height:var(--gz);border-radius:calc(var(--gz) * .285);
  background:#242628;box-shadow:0 10px 30px -12px rgba(0,0,0,.45)}
.endcard .glyph i{width:calc(var(--gz) * .152);height:calc(var(--gz) * .152);
  border-radius:999px;background:#F4F2EE}
@media(max-width:700px){ .endcard{--gz:66px} }

/* the line, set the way the film sets it: heavier and tighter than the
   page's other headings, because it is a logotype more than a headline */
.endcard h1{max-width:none;text-align:center;font-weight:640;
  font-size:clamp(46px,7.6vw,104px);line-height:1.0;letter-spacing:-.045em;
  text-wrap:balance}

.endcard .tagline{font:600 10.5px/1 var(--sans);letter-spacing:.235em;text-indent:.235em;
  text-transform:uppercase;color:var(--faint)}
@media(max-width:520px){ .endcard .tagline{letter-spacing:.16em;text-indent:.16em} }

/* ── one grid for the whole page ──────────────────────────────────────
   The claims used to sit under a centred card of words while the cards
   themselves started at the grid's first column, so the section opened
   about 70px out of true. Both now live in .inner and share the three
   columns, which is the only reason they line up. */
.three > .claim{max-width:none;padding-right:clamp(20px,3vw,60px)}
.three > .claim > p{margin-bottom:0}
@media(max-width:900px){ .three > .claim{padding-right:0} }

/* with no figures left, the rule over each claim is the only mark */
.three > .claim::before{background:var(--w3)}

/* ── white paper: the film's grammar, window on cream ────────────── */
html.light .film{box-shadow:inset 0 0 0 1px rgba(0,0,0,.07),0 30px 80px -30px rgba(0,0,0,.22)}
html.light .endcard .glyph{box-shadow:0 12px 34px -14px rgba(0,0,0,.32)}
html.light .three > .claim::before{background:rgba(0,0,0,.13)}

/* the download head carries one short line against four long ones; bottom
   alignment drops "Not yet." to the floor of a row it does not fill */
#download .head.wide{align-items:start}
#download .head.wide .lede{padding-bottom:0}

/* on the dark ground the mark inverts, or it sinks into it: the icon's
   own near-black is within a few points of the paper */
html:not(.light) .endcard .glyph{background:var(--ink)}
html:not(.light) .endcard .glyph i{background:#242628}

/* ── plates on cream ──────────────────────────────────────────────
   .plate, .frame and .cwin carry a shadow tuned for the dark wall:
   black at .75, which on cream reads as a grey blob under everything
   rather than as depth. Cream needs a shorter, weaker fall. */
html.light .plate,html.light .cwin{
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.07),
             0 1px 2px rgba(0,0,0,.05),
             0 14px 30px -14px rgba(0,0,0,.14),
             0 40px 70px -40px rgba(0,0,0,.18)}
html.light .hall .frame{
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.07),
             0 2px 4px rgba(0,0,0,.05),
             0 26px 50px -22px rgba(0,0,0,.16),
             0 70px 120px -60px rgba(0,0,0,.20)}