/* WashHQ website. The reel's look (marketing/reels/washhq-v2/project.md section 4) carried to the web:
   night ink and deep panel, water aqua for light, emerald for the mark and for done, amber for "needs you",
   paper type, muted figures, LV8 gold only for LV8 Tech. No red anywhere. */
:root {
  --ink: #05090F; --night: #0A1220; --panel: #111C2E; --panel-2: #16233A;
  --aqua: #5BE0F0; --aqua-2: #8EEAF5; --emerald: #19C38A; --amber: #F5A524;
  --paper: #F2F5F9; --paper-2: rgba(242, 245, 249, .72); --paper-3: rgba(242, 245, 249, .46); --line: rgba(242, 245, 249, .12);
  --muted: #B0BBCA; /* QuickBooks stays muted next to the paper labels, and still reads */ --lv8: #F0AF09;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gutter: clamp(16px, 4.2vw, 64px);
  --ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--paper); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, svg { display: block; }
a { color: inherit; }
::selection { background: rgba(91, 224, 240, .35); color: #fff; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

#gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; background: var(--ink); }
.grain { position: fixed; inset: -50%; z-index: 1; pointer-events: none; opacity: .055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }

/* type */
.display { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; line-height: 1.02; margin: 0; font-optical-sizing: auto; }
h1.display { font-size: clamp(42px, 5.5vw, 96px); }
h2.display { font-size: clamp(38px, 5.4vw, 92px); }
.display .line { display: block; }
.display .accent, .display em { font-style: italic; color: var(--aqua-2); }
.display .accent:not(:has(.w)), .display em:not(:has(.w)), .display .accent .w, .display em .w { background: linear-gradient(100deg, var(--aqua-2) 0%, var(--aqua) 45%, #3fd3c8 75%, var(--emerald) 120%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.eyebrow { font: 600 12.5px/1.2 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--aqua); margin: 0 0 22px; }
.eyebrow.center, .center { text-align: center; }
.lede { font-size: clamp(16px, 1.25vw, 20px); line-height: 1.6; color: var(--paper-2); max-width: 36em; margin: 26px 0 0; }
.fine { font-size: 13px; color: var(--paper-3); max-width: 40em; }
.qb { color: var(--muted) !important; -webkit-text-fill-color: var(--muted); }

/* buttons */
.btn { --bg: transparent; position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 16px 24px; border-radius: 999px; font: 600 15px/1.2 var(--sans); letter-spacing: -.005em; text-decoration: none; color: var(--paper); border: 1px solid var(--line); background: var(--bg); cursor: pointer; transition: border-color .3s, background .3s, color .3s, box-shadow .3s; will-change: transform; }
.btn.primary { color: #03141A; background: linear-gradient(180deg, #9DF2FB, var(--aqua) 55%, #3fd3c8); border-color: transparent; box-shadow: 0 10px 40px -10px rgba(91, 224, 240, .6), inset 0 1px 0 rgba(255, 255, 255, .6); }
.btn.primary:hover { box-shadow: 0 16px 60px -8px rgba(91, 224, 240, .8), inset 0 1px 0 rgba(255, 255, 255, .7); }
.btn.ghost:hover { border-color: rgba(91, 224, 240, .6); background: rgba(91, 224, 240, .06); }
.btn.small { padding: 11px 18px; font-size: 13.5px; }
.btn .arrow { width: 18px; height: 10px; position: relative; }
.btn .arrow::before { content: ""; position: absolute; left: 0; right: 2px; top: 50%; height: 1.6px; background: currentColor; transform: translateY(-50%); }
.btn .arrow::after { content: ""; position: absolute; right: 1px; top: 50%; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-top: 1.6px solid currentColor; transform: translateY(-50%) rotate(45deg); }
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--aqua); outline-offset: 3px; }

/* chips */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font: 600 11px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.chip.lit { color: var(--emerald); background: rgba(25, 195, 138, .1); border: 1px solid rgba(25, 195, 138, .35); }
.chip.out { color: rgba(242, 245, 249, .7); border: 1px dashed rgba(242, 245, 249, .34); }
.chip.rolling { color: var(--aqua); background: rgba(91, 224, 240, .08); border: 1px solid rgba(91, 224, 240, .3); }
.sample { margin-left: auto; font: 600 9.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--paper-3); }

/* loader */
#loader { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: radial-gradient(70% 55% at 50% 45%, #0b1a2b 0%, var(--ink) 70%); transition: opacity 1.2s var(--ease), visibility 1.2s; }
#loader.done { opacity: 0; visibility: hidden; }
.loader-inner { display: grid; justify-items: center; gap: 28px; }
.loader-line { font: 400 clamp(20px, 2vw, 28px)/1.3 var(--serif); color: var(--paper-2); margin: 0; opacity: 0; transform: translateY(10px); transition: opacity 1s .3s var(--ease), transform 1s .3s var(--ease); }
body.loader-ready .loader-line { opacity: 1; transform: none; }
.loader-bar { width: 180px; height: 2px; background: rgba(242, 245, 249, .1); border-radius: 2px; overflow: hidden; }
.loader-bar i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--aqua), var(--emerald)); transition: transform .4s var(--ease); }

/* split-flap clock */
.flap { display: inline-flex; align-items: center; gap: .08em; font-family: var(--sans); font-weight: 800; color: var(--paper); perspective: 400px; }
.flap .cell { position: relative; width: .64em; height: 1em; border-radius: .09em; background: linear-gradient(180deg, #1a2740 0%, #121d31 49.5%, #0b1424 50.5%, #101b2e 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 .05em .2em rgba(0, 0, 0, .5); overflow: hidden; }
.flap .cell.sep { width: .26em; background: none; box-shadow: none; }
.flap .cell.sep::before, .flap .cell.sep::after { content: ""; position: absolute; left: 50%; width: .1em; height: .1em; border-radius: 50%; background: var(--paper); transform: translateX(-50%); }
.flap .cell.sep::before { top: .3em; } .flap .cell.sep::after { bottom: .3em; }
.flap .cell .face, .flap .cell .leaf { position: absolute; inset: 0; display: grid; place-items: center; font-size: .78em; line-height: 1; font-variant-numeric: tabular-nums; }
.flap .cell::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .55); z-index: 3; }
.flap .cell .leaf { transform-origin: 50% 50%; backface-visibility: hidden; background: inherit; clip-path: inset(0 0 50% 0); z-index: 2; }
.flap .ampm { font-size: .3em; font-weight: 700; letter-spacing: .08em; margin-left: .35em; color: var(--paper-2); align-self: flex-start; margin-top: .25em; }
.flap .day { font-size: .3em; font-weight: 700; letter-spacing: .12em; margin-right: .5em; color: var(--aqua); align-self: flex-start; margin-top: .25em; }
.flap.big { font-size: clamp(76px, 10vw, 150px); }
.flap.huge { font-size: clamp(46px, 4.8vw, 78px); }
.flap.small { font-size: 22px; }

/* nav and hud */
.nav::before { content: ""; position: absolute; inset: 0 0 -30px; z-index: -1; background: linear-gradient(180deg, rgba(5, 9, 15, .72), rgba(5, 9, 15, 0)); pointer-events: none; }
.nav { position: fixed; z-index: 40; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 28px; padding: 18px var(--gutter); pointer-events: none; transition: transform .6s var(--ease), opacity .6s; }
.nav > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { width: 28px; height: 28px; filter: drop-shadow(0 0 10px rgba(91, 224, 240, .45)); }
.wordmark { font: 900 21px/1 var(--sans); letter-spacing: -.055em; color: var(--paper); }
.wordmark b { color: var(--emerald); font-weight: 900; }
.wordmark.big { font-size: clamp(56px, 7vw, 104px); margin: 0; }
.by { display: flex; align-items: center; gap: 6px; font: 500 11px/1 var(--sans); color: var(--paper-3); margin-left: 4px; padding-left: 12px; border-left: 1px solid var(--line); }
.by img { height: 12px; width: auto; }
.nav-links { margin-left: auto; display: flex; gap: 26px; }
.nav-links a { font: 500 13.5px/1 var(--sans); color: var(--paper-2); text-decoration: none; position: relative; padding: 6px 0; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--aqua); transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s var(--ease); }
.nav-links a:hover { color: var(--paper); } .nav-links a:hover::after { transform: scaleX(1); }
body.nav-hidden .nav { transform: translateY(-110%); opacity: 0; }

.hud { position: fixed; z-index: 30; inset: 0; pointer-events: none; }
.hq-pill { position: absolute; top: 84px; right: var(--gutter); display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 10px; border-radius: 16px; background: rgba(10, 18, 32, .55); border: 1px solid var(--line); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); opacity: 0; transform: translateY(-8px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.hq-pill svg { width: 18px; height: 18px; }
body.started .hq-pill { opacity: 1; transform: none; }
/* while the long-form session scrolls under the header: a glass band behind the nav, and the clock pill steps aside
   (it is back over the empty water to flip to 8:59 PM for the finale) */
.hud::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 77px; background: rgba(10, 18, 32, .74); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s; }
body.in-flow .hud::before { opacity: 1; visibility: visible; }
@media (max-width: 1499px) { body.started.in-flow .hq-pill { opacity: 0; transform: translateY(-8px); } }
@media (max-width: 900px) { .hud::before { height: 66px; } }
.chapter-label { position: absolute; left: var(--gutter); bottom: 26px; display: flex; gap: 12px; align-items: baseline; font: 500 12px/1 var(--mono); letter-spacing: .08em; color: var(--paper-3); opacity: 0; transition: opacity .8s; }
.chapter-label .idx { color: var(--aqua); }
body.started .chapter-label { opacity: 1; }
.progress { position: absolute; left: 0; right: 0; top: 0; height: 2px; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--aqua), var(--emerald)); transform-origin: 0 50%; transform: scaleX(0); }

/* chapters */
main { position: relative; z-index: 10; }
#film { position: relative; height: 100vh; height: 100svh; }
#film > .chapter { position: absolute; inset: 0; visibility: hidden; }
#film > .chapter.on { visibility: visible; }
.chapter { position: relative; }
.frame { position: relative; height: 100vh; height: 100svh; width: 100%; overflow: hidden; padding: 0 var(--gutter); }
body.no-gl #gl { background: radial-gradient(80% 60% at 60% 40%, #0f2a3a, var(--ink)); }
.chapter.flow { padding: 18vh var(--gutter) 70vh; } /* the FAQ has left the screen before the finale's drop opens */

/* 01 hero */
#hero .frame { display: grid; align-content: center; }
.hero-copy { max-width: 1060px; position: relative; padding-top: 4vh; }
.hero-copy .lede { max-width: 34em; }
/* the scrim reaches past the headline's last word, where the arch legs are brightest; every edge falls past its last stop */
.hero-copy::before { content: ""; position: absolute; inset: -20% -36% -26% -30%; z-index: -1; background: radial-gradient(62% 56% at 36% 50%, rgba(5, 9, 15, .86), rgba(5, 9, 15, .6) 50%, rgba(5, 9, 15, .3) 70%, transparent 86%); pointer-events: none; }
/* a filter, not a text-shadow: the word masks would cut a blurred text-shadow into boxes */
#hero h1.display { filter: drop-shadow(0 2px 16px rgba(5, 9, 15, .5)); }
#hero .nb { white-space: nowrap; } /* wide screens break before "head office", as phones do, never inside it */
.kicker { display: flex; align-items: center; gap: 12px; font: 500 15px/1 var(--sans); color: var(--aqua); margin: 0 0 26px; letter-spacing: .01em; text-shadow: 0 1px 2px rgba(5, 9, 15, .85), 0 0 14px rgba(5, 9, 15, .6); }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 0 rgba(25, 195, 138, .7); animation: live 2.2s infinite; }
@keyframes live { 0%{box-shadow:0 0 0 0 rgba(25,195,138,.6)} 70%{box-shadow:0 0 0 12px rgba(25,195,138,0)} 100%{box-shadow:0 0 0 0 rgba(25,195,138,0)} }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
/* a fill of its own, not a backdrop-filter: that stops working once the exit puts a filter on .hero-copy */
.cta-row .btn.ghost { background: rgba(10, 18, 32, .62); border-color: rgba(242, 245, 249, .24); }
.cta-row .btn.ghost:hover { border-color: rgba(91, 224, 240, .6); background: rgba(16, 40, 52, .74); }
.sub { font-size: 13.5px; color: var(--paper-2); margin: 16px 0 0 6px; text-shadow: 0 1px 2px rgba(5, 9, 15, .9), 0 0 14px rgba(5, 9, 15, .7); }
/* the right 210px stay free for the scroll cue */
.hero-foot { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 64px; padding-right: 210px; display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
.hero-foot, .scroll-cue { text-shadow: 0 1px 2px rgba(5, 9, 15, .9), 0 0 12px rgba(5, 9, 15, .7); }
/* a full-width band under the foot and the cue, over the wet floor and the spray; it fades out with the foot */
.hero-foot::before { content: ""; position: absolute; z-index: -1; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); bottom: -64px; height: calc(100% + 194px); background: linear-gradient(0deg, rgba(5, 9, 15, .86), rgba(5, 9, 15, .7) 45%, rgba(5, 9, 15, 0)); pointer-events: none; }
.hero-foot .eyebrow { margin: 0; }
.strip { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; margin: 0; padding: 0; font: 500 13px/1.2 var(--sans); color: var(--paper-2); }
.strip li { position: relative; }
.strip li + li::before { content: ""; position: absolute; left: -12px; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--aqua); transform: translateY(-50%); }
.scroll-cue { position: absolute; right: var(--gutter); bottom: 60px; display: flex; align-items: center; gap: 12px; font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--paper-2); }
.scroll-cue i { width: 1px; height: 46px; background: linear-gradient(var(--aqua), transparent); position: relative; overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: #fff; animation: cue 2s var(--ease) infinite; }
@keyframes cue { to { top: 110%; } }

/* hero: small screens */
@media (max-width: 900px) {
  /* low under the tunnel, but never up under the nav or the 9:00 PM pill (bottom near 106px); `safe` holds the top
     when a short screen can't fit it all */
  #hero .frame { align-content: end; align-content: safe end; padding-top: 112px; padding-bottom: 92px; }
  .hero-copy { padding-top: 0; }
  /* a full-width sheet from just above the kicker to past the bottom of the screen, so no edge shows; it backs the eyebrow too */
  .hero-copy::before { inset: -88px calc(-1 * var(--gutter)) -220px; background: linear-gradient(180deg, rgba(5, 9, 15, 0), rgba(5, 9, 15, .64) 88px, rgba(5, 9, 15, .8) 38%, rgba(5, 9, 15, .86)); }
  #hero h1.display { font-size: clamp(32px, min(10.6vw, 5.6svh), 42px); }
  .kicker { margin-bottom: clamp(12px, 2.2svh, 26px); }
  .hero-copy .lede { margin-top: clamp(12px, 2.2svh, 26px); font-size: clamp(14.5px, 2.3svh, 16px); line-height: 1.5; }
  .cta-row { margin-top: clamp(16px, 3svh, 36px); gap: 10px; }
  .cta-row .btn { width: 100%; justify-content: center; text-align: center; padding-block: clamp(11px, 1.8svh, 16px); }
  .sub { margin-top: clamp(8px, 1.4svh, 16px); }
  .hero-foot { bottom: max(22px, env(safe-area-inset-bottom)); padding-right: 0; }
  .hero-foot .eyebrow { text-wrap: balance; }
  .hero-foot::before, .strip, .scroll-cue { display: none; }
}
/* phones with browser bars (iPhone SE, small Androids): tighter type, so it all fits below the pill */
@media (max-width: 900px) and (max-height: 600px) and (orientation: portrait) {
  #hero .frame { padding-bottom: 66px; }
  .kicker { font-size: 13px; }
  .hero-copy .lede { font-size: 14px; line-height: 1.45; }
  .cta-row { gap: 8px; }
  .cta-row .btn { padding-block: 10px; }
  .sub { font-size: 12.5px; line-height: 1.4; }
  .hero-foot { bottom: max(18px, env(safe-area-inset-bottom)); }
}
/* phones in landscape and short windows: a column left of the tunnel, the copy centred under the nav and the eyebrow
   at the bottom; on a screen too short for both, the copy keeps its top and pushes the eyebrow off, never over it */
@media (max-height: 560px) and (orientation: landscape) {
  #hero .frame { display: flex; flex-direction: column; padding: 64px max(var(--gutter), env(safe-area-inset-right)) 14px max(var(--gutter), env(safe-area-inset-left)); }
  .hero-copy { max-width: min(640px, 100%); padding-top: 0; margin: auto 0; }
  /* left to right, so the tunnel stays bright on the right; top and bottom run off the screen */
  .hero-copy::before { inset: -60svh -50% -60svh calc(-1 * max(var(--gutter), env(safe-area-inset-left))); background: linear-gradient(90deg, rgba(5, 9, 15, .86), rgba(5, 9, 15, .74) 55%, rgba(5, 9, 15, 0)); }
  #hero h1.display { font-size: clamp(26px, 8.6svh, 40px); }
  .kicker { font-size: 13px; margin-bottom: clamp(6px, 2.6svh, 10px); }
  .hero-copy .lede { font-size: 14px; line-height: 1.45; margin-top: clamp(6px, 2.6svh, 10px); max-width: 44em; }
  .cta-row { margin-top: clamp(10px, 3.6svh, 14px); gap: 10px; }
  .cta-row .btn { width: auto; padding: 11px 18px; font-size: 13.5px; }
  .sub { margin-top: clamp(6px, 2svh, 8px); font-size: 12.5px; }
  .hero-foot { position: static; margin-top: 12px; padding-right: 0; }
  .hero-foot::before, .strip, .scroll-cue { display: none; }
  /* the HUD's chapter label shows above 900px wide, and would sit on the eyebrow */
  .chapter-label { display: none; }
}

/* glass cards */
.card, .job, .you-chip, .evo-step, .pillar, .desk-card, .qa article, .hqanswer, .chatbot, .cta-card, .tag {
  background: linear-gradient(180deg, rgba(22, 35, 58, .78), rgba(14, 24, 40, .70));
  border: 1px solid rgba(242, 245, 249, .10);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
}

/* 02 chains */
#chains .frame { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.chains-copy { position: relative; z-index: 3; max-width: 640px; }
/* an even, feathered panel of night ink: as dark at the eyebrow's corner as under the lede, over any lamp or footage */
.chains-copy::before { content: ""; position: absolute; inset: -12% -16% -12% -10%; z-index: -1; pointer-events: none; border-radius: 48px; background: radial-gradient(80% 75% at 45% 50%, rgba(5, 9, 15, .82), rgba(5, 9, 15, .62) 72%); filter: blur(34px); }
#chains .eyebrow { text-shadow: 0 0 14px rgba(5, 9, 15, .9), 0 0 3px rgba(5, 9, 15, .7); }
#chains .display .line { text-wrap: balance; } /* no word left alone on a line */
/* js/chapters.js places the chip and the cards from the frame's top left; the chip and its count stay over the cards */
#chains .owner { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.you-chip { position: absolute; left: 0; top: 0; opacity: 0; visibility: hidden; display: flex; align-items: center; gap: 10px; padding: 12px 16px 12px 12px; border-radius: 999px; font-size: 15px; }
.you-chip b { font-weight: 700; } .you-chip span { color: var(--paper-2); font-size: 13px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 50% 36%, var(--paper-2) 0 22%, transparent 23%), radial-gradient(circle at 50% 100%, var(--paper-2) 0 42%, transparent 43%), #22314b; }
.you-chip .count { position: absolute; top: -10px; right: -10px; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px; display: grid; place-items: center; font: 700 12.5px/1 var(--sans); font-style: normal; color: #241500; background: var(--amber); box-shadow: 0 0 20px rgba(245, 165, 36, .5); }
.jobs { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.job { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; gap: 4px; padding: 11px 14px; border-radius: 14px; font: 500 14px/1.2 var(--sans); white-space: nowrap; will-change: transform, opacity; opacity: 0; }
.job small { font: 700 9.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--aqua); }
.job.amber small { color: var(--amber); }
/* "Until now." takes the copy's place once the copy steps out, clear of the pile; it grows from its left edge */
.until { position: absolute; z-index: 4; left: var(--gutter); right: 50%; top: 50%; transform: translateY(-50%); text-align: left; font-size: clamp(56px, 9vw, 150px); pointer-events: none; }
.until span { position: relative; display: inline-block; opacity: 0; transform-origin: 0 50%; font-style: italic; color: #fff; text-shadow: 0 2px 18px rgba(5, 9, 15, .6), 0 0 60px rgba(91, 224, 240, .45); }
.until span::before { content: ""; position: absolute; inset: -35% -14%; z-index: -1; background: radial-gradient(closest-side, rgba(5, 9, 15, .6), rgba(5, 9, 15, 0)); }
@media (min-width: 1800px) { #chains .job { font-size: 15px; } }

/* chains: small screens. One column with the copy low (the pile plays above it on a tablet, after it on a phone, see
   CH.chains.mode); "Until now." then takes the copy's place. The same sizes as js/chapters.js, short windows included. */
@media (max-width: 900px), (max-height: 560px) {
  #chains .frame { grid-template-columns: 1fr; align-content: end; padding-bottom: 12vh; }
  #chains .chains-copy { align-self: end; }
  #chains .job { font-size: 12px; padding: 8px 10px; } #chains .job small { font-size: 8.5px; }
  #chains .until { right: var(--gutter); top: auto; bottom: 12vh; transform: none; text-align: center; }
  #chains .until span { transform-origin: 50% 50%; }
}
/* phones on their side: tighter type so the copy fits the height (.chapter outranks the shared small-screen block) */
@media (max-height: 560px) {
  #chains.chapter .frame { padding-bottom: 7vh; }
  #chains .chains-copy { max-width: 46em; }
  #chains h2.display { font-size: clamp(30px, 8.5vh, 46px); }
  #chains .eyebrow { margin-bottom: 12px; }
  #chains .lede { font-size: 14.5px; margin-top: 14px; max-width: 46em; }
  #chains .until { bottom: 7vh; font-size: clamp(40px, 12vh, 64px); }
}

/* 03 evolution */
#evolution .frame { display: grid; align-content: center; justify-items: center; }
.evo { display: grid; grid-template-columns: repeat(3, minmax(0, 300px)); gap: 18px; margin-top: 8px; }
.evo-step { border-radius: 22px; padding: 26px 24px 28px; opacity: 0; }
.evo-step .n { font: 600 12px/1 var(--mono); color: var(--paper-3); }
.evo-step h3 { font: 400 26px/1.15 var(--serif); margin: 16px 0 10px; letter-spacing: -.01em; }
.evo-step p { margin: 0; color: var(--paper-2); font-size: 15px; }
.evo-step.now { border-color: rgba(91, 224, 240, .45); box-shadow: 0 30px 90px -20px rgba(91, 224, 240, .28), inset 0 1px 0 rgba(255, 255, 255, .08); }
.evo-step.now .n { color: var(--aqua); }
.pillars { position: absolute; inset: 0; pointer-events: none; }
.pillar { position: absolute; width: 240px; padding: 18px 18px 20px; border-radius: 20px; display: grid; gap: 6px; opacity: 0; }
.pillar svg { width: 30px; height: 30px; fill: none; stroke: var(--aqua); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgba(91, 224, 240, .7)); margin-bottom: 6px; }
.pillar b { font: 700 19px/1.1 var(--sans); letter-spacing: -.01em; }
.pillar span { font-size: 14px; color: var(--paper-2); }
.one-office { position: absolute; left: 0; right: 0; bottom: 12vh; text-align: center; opacity: 0; text-shadow: 0 2px 28px rgba(5, 9, 15, .55); }
/* on a wide screen HQ's ripples and reflection fill the bottom band; the sky above HQ stays dark */
@media (min-aspect-ratio: 1/1) { #evolution .one-office { top: max(14vh, 92px); bottom: auto; } }
@media (min-width: 1800px) and (min-height: 1000px) {
  .evo { grid-template-columns: repeat(3, minmax(0, 360px)); gap: 22px; }
  .evo-step { padding: 30px 28px 32px; } .evo-step h3 { font-size: 31px; } .evo-step p { font-size: 17px; }
  .pillar { width: 290px; padding: 22px 22px 24px; } .pillar svg { width: 34px; height: 34px; } .pillar b { font-size: 22px; } .pillar span { font-size: 16px; }
}

/* evolution: small screens (scoped to #evolution so they win over the shared small-screen block further down) */
@media (max-width: 900px) {
  #evolution .pillar { width: min(170px, 43vw); }
  #evolution .pillar span { font-size: 12px; }
}
/* a phone on its side: the steps in one row, the tiles a size down, the line between the nav and HQ */
@media (max-height: 560px) and (min-aspect-ratio: 1/1) {
  #evolution .eyebrow { margin-bottom: 12px; }
  #evolution .evo { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 0; width: 100%; max-width: 920px; }
  #evolution .evo-step { padding: 12px 14px 14px; border-radius: 16px; }
  #evolution .evo-step h3 { font-size: 18px; margin: 6px 0 4px; }
  #evolution .evo-step p { font-size: 12.5px; line-height: 1.4; }
  #evolution .pillar { width: 160px; padding: 10px 12px 12px; gap: 4px; border-radius: 16px; }
  #evolution .pillar svg { width: 22px; height: 22px; margin-bottom: 2px; }
  #evolution .pillar b { font-size: 14.5px; }
  #evolution .pillar span { font-size: 12px; line-height: 1.35; }
  #evolution .one-office { top: max(17vh, 70px); font-size: 36px; }
}

/* 04 network */
#network .frame { display: grid; align-content: start; padding-top: 16vh; }
.network-copy { max-width: 560px; position: relative; z-index: 3; }
.network-copy::before { content: ""; position: absolute; inset: -30% -40% -30% -30%; z-index: -1; background: radial-gradient(55% 55% at 35% 45%, rgba(5, 9, 15, .88), rgba(5, 9, 15, .6) 45%, transparent 72%); }
#network h2.display { position: relative; z-index: 1; } /* over the lede's backing */
#network h2.display .line { text-wrap: balance; }
/* the radial scrim fades out across the lede, where the tunnel's stream and its packets pass behind it */
#network .lede { position: relative; }
#network .lede::before { content: ""; position: absolute; inset: 0 -4px; z-index: -1; border-radius: 40px; background: rgba(5, 9, 15, .58); box-shadow: 0 0 56px 56px rgba(5, 9, 15, .58); pointer-events: none; }
/* above the copy's scrim: main.js keeps every tag clear of the words, the HUD and the head office */
.tags { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.tag { position: absolute; left: 0; top: 0; transform-origin: 50% 100%; margin: 0; display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 10px; border-radius: 999px; font-size: 13px; white-space: nowrap; opacity: 0; will-change: transform; }
.tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 12px var(--aqua); }
.tag b { font-weight: 600; } .tag span { color: var(--paper-3); }
.tag.owner .avatar { width: 22px; height: 22px; }
body.no-gl .tags .tag { display: none; }
/* on glass, so a street lamp or a lit roof behind it never washes it out */
.sample-tag { position: absolute; right: var(--gutter); bottom: 64px; padding: 6px 10px; border-radius: 999px; font: 600 10px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--paper-2); background: rgba(10, 18, 32, .72); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; }

/* network: small screens */
@media (max-width: 900px) {
  #network .frame { padding-top: 12vh; }
  .tag { gap: 6px; padding: 6px 10px 6px 8px; font-size: 12px; }
  .tag.owner .avatar { width: 18px; height: 18px; }
}
/* portrait phones: the headline starts under the HUD clock (top 70px, 36px tall) */
@media (max-width: 900px) and (min-height: 501px) {
  #network .frame { padding-top: max(12vh, 116px); }
}
@media (max-width: 900px) and (min-height: 501px) and (max-height: 700px) {
  #network h2.display { font-size: 34px; }
  #network .lede { font-size: 15px; line-height: 1.5; margin-top: 18px; }
}
/* landscape phones: clear of the wordmark */
@media (max-width: 900px) and (max-height: 500px) {
  #network .frame { padding-top: 64px; }
}

/* 05 desks */
#desks .frame { display: grid; align-content: end; padding-bottom: 12vh; touch-action: pan-y pinch-zoom; } /* a vertical swipe still scrolls; a sideways one drags a badge */
.desks-copy { max-width: 520px; position: relative; }
.desks-copy::before { content: ""; position: absolute; inset: -30% -40% -30% -30%; z-index: -1; background: radial-gradient(55% 55% at 35% 55%, rgba(5, 9, 15, .8), transparent 72%); }
.hint { display: flex; align-items: center; gap: 10px; margin: 22px 0 0; font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--paper-3); }
.hint span { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--aqua); position: relative; }
.hint span::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--aqua); animation: live 2s infinite; }
.hint { color: var(--paper-2); }
body.no-gl #desks .hint { display: none; } /* no 3D, no badges to drag */

/* desks: small screens */
/* a phone on its side: a compact copy block, clear below the hanging badges */
@media (max-height: 560px) and (orientation: landscape) {
  #desks .frame { padding-bottom: 56px; }
  #desks .desks-copy { max-width: 600px; }
  #desks h2.display { font-size: clamp(30px, 9vh, 44px); }
  #desks .lede { margin-top: 10px; font-size: 14.5px; line-height: 1.5; max-width: 40em; }
  #desks .hint { margin-top: 12px; }
}
@media (max-height: 560px) and (orientation: landscape) and (max-width: 900px) { #desks .frame { padding-bottom: max(16px, 5vh); } }

/* 06 desk cards: a horizontal rail */
#deskcards .frame { display: flex; align-items: center; padding: 0; }
#deskcards { --card-w: min(420px, 84vw); }
/* centred on the frame, not the viewport, so a resize keeps each resting card in the middle; above the progress bar */
.rail { display: flex; gap: clamp(18px, 2.4vw, 36px); padding: 0 calc(50% - var(--card-w) / 2); will-change: transform; position: relative; z-index: 1; }
.desk-card { flex: 0 0 auto; width: var(--card-w); border-radius: 26px; padding: 26px 26px 24px; display: grid; gap: 16px; align-content: start; }
/* denser glass than the shared cards: the plates behind are bright photographs */
.desk-card { background: linear-gradient(180deg, rgba(22, 35, 58, .9), rgba(14, 24, 40, .86)); }
.desk-card header { display: grid; gap: 8px; }
.desk-card header .chip { justify-self: start; }
.desk-card .kind { font: 600 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--aqua); }
.desk-card h3 { font: 400 34px/1.05 var(--serif); margin: 0; letter-spacing: -.015em; }
.desk-card dl { margin: 0; display: grid; grid-template-columns: 76px 1fr; gap: 10px 14px; font-size: 14.5px; }
.desk-card dt { font: 600 10.5px/1.6 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(242, 245, 249, .66); }
.desk-card dd { margin: 0; color: var(--paper-2); }
.desk-card dd:nth-of-type(2) { color: var(--paper); }
.duties { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; font-size: 14px; }
.duties li { display: flex; gap: 10px; align-items: baseline; }
.duties li::before { content: ""; flex: 0 0 6px; height: 6px; border-radius: 50%; background: var(--emerald); transform: translateY(-1px); box-shadow: 0 0 10px rgba(25, 195, 138, .6); }
.desk-card.soon .duties li::before { background: transparent; border: 1px dashed var(--paper-3); box-shadow: none; }
.desk-card.soon { border-style: dashed; border-color: rgba(242, 245, 249, .22); background: linear-gradient(180deg, rgba(15, 24, 40, .88), rgba(10, 17, 30, .84)); }
.never { margin: 0; font-size: 13.5px; color: var(--paper-2); display: flex; gap: 10px; }
.never b { flex: 0 0 auto; font: 700 10.5px/1.9 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.desk-card.hq { border-color: rgba(25, 195, 138, .4); }
.rail-progress { position: absolute; left: 50%; bottom: 52px; width: 160px; height: 2px; transform: translateX(-50%); background: rgba(242, 245, 249, .12); z-index: 0; }

/* deskcards: small screens */
@media (max-width: 900px) {
  /* below the nav and the clock pill; each card only as tall as its copy */
  #deskcards .frame { align-items: center; align-items: safe center; padding: 112px 0 36px; }
  #deskcards .rail { align-items: center; }
  #deskcards .desk-card { padding: 20px 20px 18px; gap: 12px; border-radius: 22px; }
  #deskcards .desk-card h3 { font-size: clamp(26px, 7.2vw, 34px); }
  #deskcards .desk-card dl { grid-template-columns: 64px 1fr; gap: 8px 12px; font-size: 14px; }
  #deskcards .desk-card .duties { padding-top: 12px; gap: 6px; font-size: 13.5px; }
  #deskcards .desk-card .never { font-size: 13px; }
  #deskcards .rail-progress { bottom: 18px; }
}
@media (max-width: 900px) and (max-height: 620px) and (orientation: portrait) {
  #deskcards .desk-card { padding: 16px 16px 14px; gap: 10px; }
  #deskcards .desk-card header { gap: 6px; }
  #deskcards .desk-card h3 { font-size: 24px; }
  #deskcards .desk-card dl { grid-template-columns: 58px 1fr; gap: 6px 10px; font-size: 13px; line-height: 1.5; }
  #deskcards .desk-card .duties { padding-top: 10px; gap: 5px; font-size: 13px; line-height: 1.5; }
  #deskcards .desk-card .never { font-size: 12.5px; }
}
/* a phone on its side: wide two-column cards that fit the short screen */
@media (max-height: 560px) and (orientation: landscape) {
  #deskcards { --card-w: min(760px, 88vw); }
  #deskcards .frame { align-items: center; align-items: safe center; padding: 64px 0 18px; }
  #deskcards .rail { align-items: center; }
  #deskcards .desk-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: 'head head' 'dl duties' 'never never'; gap: 10px 24px; padding: 14px 20px 12px; border-radius: 20px; }
  #deskcards .desk-card header { grid-area: head; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; }
  #deskcards .desk-card header .kind { grid-area: 1 / 1; }
  #deskcards .desk-card header h3 { grid-area: 2 / 1; font-size: 26px; }
  #deskcards .desk-card header .chip { grid-area: 1 / 2 / 3 / 3; justify-self: end; }
  #deskcards .desk-card dl { grid-area: dl; grid-template-columns: 60px 1fr; gap: 6px 12px; font-size: 13px; }
  #deskcards .desk-card .duties { grid-area: duties; border-top: 0; border-left: 1px solid var(--line); padding: 0 0 0 18px; gap: 6px; font-size: 13px; }
  #deskcards .desk-card .never { grid-area: never; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12.5px; }
  #deskcards .rail-progress { bottom: 8px; }
}
.rail-progress i { display: block; height: 100%; background: var(--aqua); transform-origin: 0 50%; transform: scaleX(0); }

/* 07 night */
#night .frame { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 4vw; }
.night-title { position: absolute; left: var(--gutter); top: 13vh; opacity: 0; font-size: clamp(34px, 4.2vw, 68px) !important; }
.bigclock { position: absolute; left: var(--gutter); top: calc(15vh + clamp(58px, 6.4vw, 104px)); opacity: 0; }
.beats { grid-column: 2; position: relative; height: 70vh; }
.beat { position: absolute; inset: 0; display: grid; align-content: center; gap: 22px; opacity: 0; visibility: hidden; }
.beat .say { position: relative; width: fit-content; font: 400 clamp(26px, 2.5vw, 40px)/1.15 var(--serif); margin: 0; letter-spacing: -.01em; max-width: 15em; text-wrap: balance; }
.card { border-radius: 20px; padding: 18px 20px; max-width: 420px; position: relative; }
.card header { display: flex; align-items: center; gap: 10px; font: 600 13px/1.2 var(--sans); color: var(--paper); margin-bottom: 14px; }
.card .mk { width: 14px; height: 14px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: linear-gradient(var(--aqua-2), var(--emerald)); }
.card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14.5px; }
.card li { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.card li b { font-weight: 600; font-variant-numeric: tabular-nums; }
.sites-card li { justify-content: flex-start; } .sites-card li span { margin-left: auto; color: var(--paper-2); font-size: 12.5px; }
.sites-card i { width: 9px; height: 9px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 10px var(--aqua); }
.ledger-card .total { display: flex; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 15px; }
.ledger-card .total b { font: 700 24px/1 var(--sans); font-variant-numeric: tabular-nums; }
.card footer { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 12.5px; }
.done { color: var(--emerald); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.done::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 10px var(--emerald); }
.amber { color: var(--amber) !important; }
.ledger-card .ghost { position: absolute; right: -18px; top: -12px; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; font: 600 12px/1 var(--sans); color: var(--paper); background: rgba(22, 35, 58, .92); border: 1px dashed rgba(245, 165, 36, .6); opacity: 0; }
.lock { display: inline-block; width: 12px; height: 12px; border: 1.6px solid currentColor; border-radius: 3px; position: relative; margin-right: 2px; }
.lock::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 8px; height: 6px; border: 1.6px solid currentColor; border-bottom: 0; border-radius: 5px 5px 0 0; transform: translateX(-50%); }
.deposits-card li { padding: 10px 12px; border-radius: 12px; background: rgba(5, 9, 15, .35); }
.deposits-card li.ok b { color: var(--emerald); } .deposits-card li.due { border: 1px solid rgba(245, 165, 36, .45); } .deposits-card li.due b { color: var(--amber); }
.pulse { width: 100%; height: auto; margin: 4px 0 10px; }
.pulse path { fill: none; stroke: var(--aqua); stroke-width: 2; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(91, 224, 240, .7)); }
.pulse-card p { display: flex; justify-content: space-between; margin: 0; font-size: 13px; }
.drawer-card .big { font: 700 26px/1.1 var(--sans); margin: 0 0 8px; }
.drawer-card .reason { margin: 0; color: var(--paper-2); font-size: 14px; } .drawer-card .reason span { color: var(--paper-2); margin-left: 8px; }
.counts-card li.ok { justify-content: flex-start; } .counts-card li.ok::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: rgba(25, 195, 138, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.5L12 5.4' fill='none' stroke='%2319C38A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.counts-card .thanks { margin: 14px 0 0; font-size: 14px; color: var(--emerald); }
/* the night's serif lines stand free over lit roofs, windows and the footage: each wears a soft halo that lives on
   the type and fades with it (a text-shadow would be cut into boxes by the word masks) */
.night-title::before, .beat .say::before { content: ""; position: absolute; inset: -4px -14px; z-index: -1; border-radius: 999px; background: rgba(5, 9, 15, .55); box-shadow: 0 0 64px 30px rgba(5, 9, 15, .55); pointer-events: none; }
.beat .say::before { border-radius: 44px; } /* two or three lines: a rounded block, so the corner words stay on it */
.bigclock .ampm { text-shadow: 0 1px 10px rgba(5, 9, 15, .9); }
/* a soft ink pool behind the whole clock: at 6:00 AM it slams over the dawn footage, where the AM and the colon dots,
   drawn in paper, would vanish into the pale sky; no edges, so it reads as shadow, not a panel */
#night .bigclock::before { content: ""; position: absolute; inset: -38% -16% -38% -12%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(5, 9, 15, .62), rgba(5, 9, 15, .34) 62%, rgba(5, 9, 15, 0)); }
/* denser glass, so a lamp or a lit window behind a card can't wash out its small labels */
#night .card { background: linear-gradient(180deg, rgba(22, 35, 58, .92), rgba(14, 24, 40, .9)); }
#night .card header { text-wrap: balance; }
#night .card .sample { color: var(--paper-2); white-space: nowrap; } /* only the header's title wraps */

/* night: small screens (scoped to #night so they win over the shared small-screen block further down) */
@media (max-width: 900px) {
  /* 30px on a 360px phone: the period clears the HQ pill and the descenders clear the clock */
  #night .night-title { font-size: clamp(26px, 8.4vw, 34px) !important; }
  /* inside the full-width card, not off the screen */
  #night .ledger-card .ghost { right: 14px; }
}
/* phones on their side: the desktop's two columns, compact. The title and the clock stack on the left under the nav,
   where the head office drops too; the beats run on the right below the HQ pill, the side the footage darkens */
@media (orientation: landscape) and (max-height: 500px) {
  /* .chapter outranks the shared block's one column */
  #night.chapter .frame { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 20px; padding-right: max(var(--gutter), env(safe-area-inset-right)); }
  #night .night-title { top: 62px; left: max(var(--gutter), env(safe-area-inset-left)); font-size: 26px !important; }
  #night .bigclock { top: 100px; left: max(var(--gutter), env(safe-area-inset-left)); font-size: 38px; }
  #night .beats { grid-column: 2; align-self: stretch; height: auto; margin: 122px 0 8px; }
  #night .beat { gap: 10px; }
  #night .beat .say { font-size: 19px; max-width: 26em; }
  #night .card { padding: 12px 14px; max-width: none; }
  #night .card header { margin-bottom: 8px; }
  #night .card ul { gap: 6px; font-size: 13px; }
  #night .deposits-card li { padding: 6px 10px; }
  #night .ledger-card .total { margin-top: 8px; padding-top: 8px; }
  #night .ledger-card .total b { font-size: 20px; }
  /* room above the receipt for its tag, which has no free corner here */
  #night .ledger-card { margin-top: 16px; }
  #night .ledger-card .ghost { right: 14px; top: -20px; padding: 6px 10px; font-size: 11px; }
  #night .card footer { margin-top: 8px; }
  #night .drawer-card .big { font-size: 22px; }
  #night .counts-card .thanks { margin-top: 8px; }
}
/* the smallest phones on their side (568x320): a wider beats column and tighter type, so every card fits under the
   pill; the receipt's tag stays off, its line already says it */
@media (orientation: landscape) and (max-height: 340px) {
  #night.chapter .frame { grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); }
  #night .night-title { top: 56px; font-size: 22px !important; }
  #night .bigclock { top: 88px; font-size: 32px; }
  #night .beats { margin: 108px 0 4px; }
  #night .beat { gap: 8px; }
  #night .beat .say { font-size: 16px; }
  #night .card { padding: 9px 12px; }
  #night .card header { margin-bottom: 6px; }
  #night .card ul { gap: 3px; font-size: 12px; }
  #night .deposits-card li { padding: 5px 10px; }
  #night .ledger-card { margin-top: 0; }
  #night .ledger-card .ghost { display: none; }
  #night .ledger-card .total { margin-top: 6px; padding-top: 6px; font-size: 13px; }
  #night .ledger-card .total b { font-size: 18px; }
  #night .card footer { margin-top: 6px; font-size: 12px; }
  #night .pulse { margin: 2px 0 6px; }
  #night .pulse-card p { font-size: 12px; }
  #night .drawer-card .big { font-size: 20px; }
  #night .counts-card .thanks { margin-top: 6px; font-size: 13px; }
}

/* 08 text */
#text .frame { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.text-copy { max-width: 520px; position: relative; }
.text-copy::before { content: ""; position: absolute; inset: -45% -40% -40% -30%; z-index: -1; background: radial-gradient(74% 52% at 40% 44%, rgba(5, 9, 15, .9), transparent 88%); } /* holds over the bright bedside window */
.replies { list-style: none; padding: 0; margin: 30px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 460px; }
.replies li { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(10, 18, 32, .5); font-size: 13.5px; color: var(--paper-2); }
.replies b { font: 700 13px/1 var(--mono); color: var(--aqua); letter-spacing: .04em; }
#text .lede { text-wrap: pretty; }
@media (min-width: 1800px) { .text-copy { max-width: 620px; } .replies { max-width: 580px; gap: 12px; } .replies li { padding: 15px 18px; font-size: 15.5px; } .replies b { font-size: 14.5px; } }

/* text: small screens */
/* portrait phones: a full-width sheet behind the copy, so the phone and the footage recede wherever they reach it */
@media (max-width: 900px) and (orientation: portrait) {
  #text .text-copy::before { inset: -56px auto -12vh calc(-1 * var(--gutter)); width: 100vw; background: linear-gradient(180deg, rgba(5, 9, 15, 0), rgba(5, 9, 15, .8) 56px, rgba(5, 9, 15, .9)); }
}
/* a phone on its side: a compact copy column left of the phone */
@media (orientation: landscape) and (max-height: 560px) {
  #text.chapter .frame { grid-template-columns: minmax(0, 1fr) minmax(0, .72fr); align-content: center; padding-top: 60px; padding-bottom: 10px; }
  #text h2.display { font-size: clamp(28px, 8.6vh, 36px); }
  #text .lede { margin-top: 10px; font-size: 15px; line-height: 1.5; }
  #text .replies { margin-top: 12px; gap: 8px; }
  #text .replies li { padding: 8px 12px; gap: 2px; line-height: 1.4; }
}
/* portrait tablets wider than the phone breakpoint stack like phones */
@media (orientation: portrait) and (min-width: 901px) { #text .frame { grid-template-columns: 1fr; align-content: end; padding-bottom: 8vh; } }

/* 09 private */
/* the copy lives in a window under the nav: when it is taller than the window (phones, short laptops), chapters.js
   lifts the column through it, so nothing is cropped by the pinned frame */
.private-window { position: absolute; inset: 76px 0 0; overflow: hidden; padding: 0 var(--gutter); }
.private-body { position: relative; min-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 5vw; padding: max(8px, calc(14vh - 76px)) 0 max(56px, 8vh); }
.private-head { grid-column: 1 / -1; }
.qa { display: grid; gap: 12px; align-content: start; margin-top: 4vh; }
.qa article { border-radius: 18px; padding: 16px 18px; opacity: 0; }
.qa h3 { font: 600 15.5px/1.3 var(--sans); margin: 0 0 6px; }
.qa p { margin: 0; font-size: 14px; color: var(--paper-2); }
/* the chatbot and HQ's card share one cell, so the column grows with them; HQ's card sits lower, under the chatbot's label */
.contrast { display: grid; align-content: start; margin-top: 4vh; }
.chatbot, .hqanswer { grid-area: 1 / 1; align-self: start; }
/* a near-opaque grey: a see-through one took on the footage behind it and buried the label */
.chatbot { justify-self: start; transform-origin: 0 0; width: 74%; border-radius: 16px; padding: 14px 16px 18px; background: linear-gradient(180deg, rgba(66, 70, 78, .9), rgba(50, 54, 62, .86)); filter: grayscale(1); opacity: 0; }
.chatbot header { display: flex; align-items: center; gap: 6px; font: 600 12.5px/1 var(--sans); color: var(--paper-2); margin-bottom: 14px; }
.chatbot header i { width: 8px; height: 8px; border-radius: 50%; background: rgba(242, 245, 249, .25); }
.chatbot header i:last-of-type { margin-right: 8px; }
.chatbot .lines { display: grid; gap: 8px; } .chatbot .lines i { height: 8px; border-radius: 4px; background: rgba(242, 245, 249, .14); }
.chatbot .lines i:nth-child(2) { width: 82%; } .chatbot .lines i:nth-child(3) { width: 64%; } .chatbot .lines i:nth-child(4) { width: 88%; } .chatbot .lines i:nth-child(5) { width: 40%; }
.chatbot .ask { margin-top: 16px; height: 30px; border-radius: 15px; border: 1px solid rgba(242, 245, 249, .14); }
.hqanswer { position: relative; z-index: 1; justify-self: end; margin-top: 56px; width: 84%; border-radius: 20px; padding: 18px 20px; border-color: rgba(91, 224, 240, .35); opacity: 0; }
.hqanswer header { display: flex; align-items: center; gap: 10px; font: 600 13.5px/1 var(--sans); margin-bottom: 14px; }
.hqanswer .mk { width: 16px; height: 16px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: linear-gradient(var(--aqua-2), var(--emerald)); }
.hqanswer .q { justify-self: end; margin: 0 0 10px auto; max-width: 80%; width: fit-content; padding: 9px 13px; border-radius: 14px 14px 4px 14px; background: linear-gradient(180deg, #9DF2FB, var(--aqua)); color: #03141A; font: 600 14px/1.35 var(--sans); }
.hqanswer .a { margin: 0 0 14px; font-size: 15px; }
.used { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: rgba(5, 9, 15, .4); font-size: 13.5px; }
.used b { font: 600 10.5px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--paper-3); }
.used div { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.hqanswer footer { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; font-size: 12px; color: var(--paper-2); }
.hqanswer footer span { display: inline-flex; align-items: center; gap: 6px; }
.contrast-line { grid-column: 1 / -1; font-size: clamp(22px, 2.3vw, 34px); max-width: 26em; margin-top: 2vh; opacity: 0; }
/* laptops with browser bars: tighter spacing, so 720 to 880 tall windows fit without the lift, the line clear of the HUD label */
@media (min-width: 901px) and (max-height: 880px) {
  .private-body { padding-top: 8px; padding-bottom: 56px; }
  #private .eyebrow { margin-bottom: 14px; }
  #private h2.display { font-size: clamp(38px, min(5.4vw, 8.6vh), 92px); }
  .qa { gap: 8px; margin-top: 16px; }
  .qa article { padding: 11px 16px 12px; }
  .qa h3 { margin-bottom: 3px; }
  .qa p { line-height: 1.45; }
  .contrast { margin-top: 16px; }
  .hqanswer { margin-top: 48px; }
  .contrast-line { margin-top: 12px; }
}
/* wide screens: answers of a readable length, and the figures close to their labels */
@media (min-width: 1600px) {
  .qa { max-width: 680px; }
  .qa h3 { font-size: 17px; }
  .qa p { font-size: 15px; line-height: 1.6; }
  .contrast { width: 100%; max-width: 720px; }
}
/* tall screens: the line follows the cards instead of waiting at the bottom of the screen */
@media (min-width: 901px) and (min-height: 1000px) {
  .private-body { grid-template-rows: auto auto 1fr; }
  .contrast-line { align-self: start; margin-top: clamp(32px, 5vh, 72px); }
}

/* private: small screens (scoped to #private so they win over the shared small-screen block further down) */
@media (max-width: 900px) {
  /* one column, the demo back in it; the window starts under the nav and the clock (top 70px, 36px tall) */
  #private .private-window { top: 112px; }
  #private .private-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; align-content: start; padding: 0 0 18px; }
  #private .qa { gap: 8px; margin-top: 12px; }
  #private .qa article { padding: 12px 14px; }
  #private .qa p { font-size: 13px; }
  #private .contrast { display: grid; margin-top: 18px; }
  #private .chatbot { width: 88%; }
  #private .hqanswer { width: 94%; margin-top: 40px; padding: 16px; }
  #private .hqanswer .q { max-width: 100%; } /* the question on one line */
  #private .contrast-line { font-size: 20px; margin-top: 18px; }
}
/* phones on their side: the chatbot and the line on the left, HQ's card on the right, all clear of the clock */
@media (max-width: 900px) and (max-height: 560px) {
  #private .private-window { top: 70px; padding-right: calc(var(--gutter) + 132px); }
  #private .private-body { padding-bottom: 12px; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); column-gap: 12px; }
  #private .eyebrow { margin-bottom: 10px; }
  #private .private-head, #private .qa { grid-column: 1 / -1; }
  #private .contrast { display: contents; }
  #private .chatbot { grid-column: 1; grid-row: 3; width: 100%; margin-top: 18px; }
  #private .contrast-line { grid-column: 1; grid-row: 4; margin-top: 12px; }
  #private .hqanswer { grid-column: 2; grid-row: 3 / span 2; width: 100%; margin-top: 18px; padding: 12px 14px; }
  #private .hqanswer header { margin-bottom: 8px; }
  #private .hqanswer .q { margin-bottom: 6px; padding: 6px 10px; }
  #private .hqanswer .a { font-size: 13.5px; margin-bottom: 8px; }
  #private .used { padding: 8px 10px; gap: 3px; }
  #private .hqanswer footer { margin-top: 6px; }
}

/* 10 sunday */
#sunday .frame { display: grid; align-content: center; }
.sunday-copy { max-width: 560px; position: relative; }
/* a darker, wider pool centred on the heading: the kitchen footage behind it is warm and bright; it fades in with the
   heading so it never sits empty over the foam */
.sunday-copy::before { content: ""; position: absolute; inset: -28% -34% -26% -26%; z-index: -1; pointer-events: none; background: radial-gradient(68% 64% at 40% 48%, rgba(8, 6, 4, .84), rgba(8, 6, 4, .66) 52%, transparent 80%); opacity: var(--scrim, 1); }
.sunday-copy .fine { margin-top: 22px; }
#sunday .fine { color: rgba(242, 245, 249, .64); text-shadow: 0 1px 8px rgba(8, 6, 4, .7); }
#sunday .lede { text-shadow: 0 1px 10px rgba(8, 6, 4, .6); }
#sunday .display .line { filter: drop-shadow(0 1px 14px rgba(8, 6, 4, .55)); }

/* sunday: small screens */
/* portrait: the copy at the top, under the nav and the clock pill; the receipt prints up from the bottom edge below it */
@media (orientation: portrait) {
  #sunday .frame { align-content: start; padding-top: calc(112px + 3vh); }
  #sunday .sunday-copy::before { inset: -45% -12% -35% -12%; background: radial-gradient(95% 70% at 45% 45%, rgba(8, 6, 4, .86), rgba(8, 6, 4, .7) 55%, transparent 85%); }
}
@media (orientation: landscape) and (max-height: 560px) { #sunday .sunday-copy { max-width: min(560px, 56vw); } }

/* 11 session (flowing) */
.flow-inner { max-width: 1080px; margin: 0 auto; position: relative; }
.flow-inner > .display { max-width: 12em; }
.steps { list-style: none; padding: 0; margin: 60px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; counter-reset: s; }
.steps li { display: flex; gap: 16px; padding: 20px 22px; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(22, 35, 58, .6), rgba(14, 24, 40, .45)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 15px; color: var(--paper-2); }
.steps li b { color: var(--paper); font-weight: 600; }
.steps .n { flex: 0 0 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 700 13px/1 var(--mono); color: var(--ink); background: linear-gradient(180deg, var(--aqua-2), var(--emerald)); }
.works { margin-top: 90px; display: grid; grid-template-columns: 220px 1fr; gap: 30px; }
.works h3, .faq h3 { font: 400 32px/1.1 var(--serif); margin: 0; letter-spacing: -.01em; }
.works ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 30px; }
.works li { display: grid; gap: 4px; align-content: start; padding-top: 16px; border-top: 1px solid var(--line); }
.works li b { font-weight: 600; } .works li > span { color: var(--paper-2); font-size: 14.5px; }
.faq { margin-top: 90px; display: grid; gap: 0; }
.faq h3 { margin-bottom: 18px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; font: 500 18px/1.35 var(--sans); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; border-right: 1.6px solid var(--aqua); border-bottom: 1.6px solid var(--aqua); transform: translateY(-70%) rotate(45deg); transition: transform .4s var(--ease); }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { margin: 0 0 22px; color: var(--paper-2); max-width: 46em; }
.reveal { opacity: 0; transform: translateY(30px); }

/* 12 finale: every line sits on the sunrise (the dawn-lit arches, the exit, the wet floor), so each block carries its
   own ink pool and a shadow of its own */
#finale .frame { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 4vw; }
/* below the nav and the clock, inside the gutters, and only as wide as its longest line, so the pool fits the words */
.finale-h { position: absolute; left: var(--gutter); right: var(--gutter); top: max(13vh, 132px); width: fit-content; margin: 0 auto; text-align: center; opacity: 0; isolation: isolate; }
.finale-h::before { content: ""; position: absolute; z-index: -1; inset: -1.3em -34% -1.4em; pointer-events: none; background: radial-gradient(50% 50% at 50% 44%, rgba(5, 9, 15, .84), rgba(5, 9, 15, .76) 60%, rgba(5, 9, 15, .42) 82%, rgba(5, 9, 15, 0)); }
/* a filter on the line, not a text-shadow on the words: the word masks would cut a blurred text-shadow into boxes */
.finale-h .line { filter: drop-shadow(0 2px 16px rgba(5, 9, 15, .6)); }
.lockup { --slot: clamp(70px, 7vw, 110px); display: grid; justify-items: start; gap: 6px; opacity: 0; margin-top: 10vh; position: relative; }
/* an ellipse round the words, from the lower part of the mark slot down: its curve keeps it off HQ when HQ docks there,
   so the drop stays bright, and it reaches past the tagline's end */
.lockup::before { content: ""; position: absolute; z-index: -1; pointer-events: none; top: calc(var(--slot) / .72 * .6); bottom: -32%; left: -26%; right: -8%; background: radial-gradient(50% 50% at 50% 50%, rgba(5, 9, 15, .86), rgba(5, 9, 15, .7) 58%, rgba(5, 9, 15, 0)); }
.mark-slot { width: var(--slot); aspect-ratio: .72; }
.lockup .wordmark.big { text-shadow: 0 2px 22px rgba(5, 9, 15, .6); }
.tagline { margin: 4px 0 0; font: 400 clamp(18px, 1.6vw, 24px)/1.3 var(--serif); color: rgba(242, 245, 249, .88); text-shadow: 0 1px 14px rgba(5, 9, 15, .85), 0 0 2px rgba(5, 9, 15, .6); }
.byline { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; font-size: 13px; color: rgba(242, 245, 249, .88); text-shadow: 0 1px 10px rgba(5, 9, 15, .85), 0 0 2px rgba(5, 9, 15, .6); }
.byline img { height: 20px; width: auto; }
.brandline { position: absolute; left: var(--gutter); bottom: 9vh; font-size: clamp(26px, 2.6vw, 40px); opacity: 0; isolation: isolate; text-shadow: 0 1px 12px rgba(5, 9, 15, .8); }
.brandline::before { content: ""; position: absolute; inset: -70% -24% -70% -12%; z-index: -1; pointer-events: none; background: radial-gradient(52% 50% at 42% 50%, rgba(5, 9, 15, .82), rgba(5, 9, 15, .58) 55%, rgba(5, 9, 15, 0) 82%); }
/* with a transparent fill, a text-shadow would show through the gradient words as a muddy copy: a filter instead */
.brandline em { text-shadow: none; filter: drop-shadow(0 1px 8px rgba(5, 9, 15, .8)); }
.cta-card { border-radius: 26px; padding: 30px 30px 26px; display: grid; gap: 14px; justify-items: start; max-width: 460px; justify-self: end; margin-top: 10vh; opacity: 0; }
/* denser than the shared glass: the sunrise through it would lift the panel too far for the aqua chip and link */
#finale .cta-card { background: linear-gradient(180deg, rgba(22, 35, 58, .95), rgba(13, 22, 37, .93)); }
.cta-card h3 { font: 400 clamp(28px, 2.6vw, 38px)/1.08 var(--serif); margin: 0; letter-spacing: -.015em; }
.cta-card p { margin: 0; color: var(--paper-2); }
.cta-card .btn { margin-top: 8px; }
.cta-card .url { font: 600 15px/1 var(--mono); color: var(--aqua); text-decoration: none; letter-spacing: .02em; }

/* finale: small screens (scoped to #finale so they win over the shared small-screen block further down) */
@media (max-width: 900px) {
  /* one packed column under the nav and the clock: the lockup, the brandline, then the card */
  #finale .frame { align-content: center; row-gap: 14px; padding: 112px var(--gutter) 20px; }
  #finale .finale-h { top: max(10vh, 118px); width: auto; font-size: clamp(30px, 8.6vw, 40px); }
  #finale .finale-h .line { text-wrap: balance; }
  /* a sheet from edge to edge behind the lines, its top and bottom fading out */
  #finale .finale-h::before { inset: -.9em calc(-1 * var(--gutter)) -1em; background: linear-gradient(180deg, rgba(5, 9, 15, 0), rgba(5, 9, 15, .78) .8em, rgba(5, 9, 15, .78) calc(100% - .9em), rgba(5, 9, 15, 0)); }
  /* the lockup spans the screen over the exit: its pool runs off both sides, centred right of HQ's slot (so its curve
     stays under the drop while it covers HQ's letters) and reaching down behind the brandline and the exit's lower glow */
  #finale .lockup { --slot: clamp(52px, 13vw, 72px); margin-top: 0; }
  #finale .lockup::before { top: calc(var(--slot) / .72 * .3); left: -30%; right: -50%; bottom: -40%; }
  #finale .wordmark.big { font-size: clamp(44px, 12vw, 64px); }
  #finale .brandline { display: block; position: relative; left: auto; bottom: auto; font-size: clamp(20px, 5.4vw, 26px); }
  #finale .brandline::before { inset: -90% -10%; background: radial-gradient(50% 50% at 50% 50%, rgba(5, 9, 15, .8), rgba(5, 9, 15, .62) 60%, rgba(5, 9, 15, 0)); }
  #finale .cta-card { justify-self: stretch; margin-top: 0; padding: 20px; gap: 12px; }
}
/* short phones: a size down, so the card ends inside the screen */
@media (max-width: 900px) and (max-height: 700px) and (orientation: portrait) {
  #finale .frame { padding-top: 108px; row-gap: 10px; }
  #finale .lockup { --slot: 46px; }
  #finale .wordmark.big { font-size: 40px; }
  #finale .tagline { font-size: 15px; }
  #finale .byline { margin-top: 4px; } #finale .byline img { height: 16px; }
  #finale .brandline { font-size: 19px; }
  #finale .cta-card { padding: 16px 18px; gap: 9px; }
  #finale .cta-card h3 { font-size: 23px; }
  #finale .cta-card p { font-size: 14px; line-height: 1.45; }
  #finale .cta-card .btn { margin-top: 2px; padding: 13px 20px; }
}
@media (max-width: 900px) and (max-height: 600px) and (orientation: portrait) {
  #finale .lockup { --slot: 40px; }
  #finale .wordmark.big { font-size: 36px; }
  #finale .cta-card h3 { font-size: 21px; }
}
/* phones on their side and short windows: two columns, the lockup and the brandline low on the left, the card on the
   right, all below the nav and the clock */
@media (max-height: 560px) and (orientation: landscape) {
  /* .chapter: one class more than the shared block's "#finale .frame", which sets a single column */
  #finale.chapter .frame { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; align-content: end; column-gap: 4vw; row-gap: 8px; padding: 64px max(var(--gutter), env(safe-area-inset-right)) 14px max(var(--gutter), env(safe-area-inset-left)); }
  #finale .finale-h { top: 72px; width: fit-content; font-size: clamp(26px, 4vw, 34px); }
  #finale .finale-h::before { inset: -.9em -30% -1em; background: radial-gradient(50% 50% at 50% 46%, rgba(5, 9, 15, .84), rgba(5, 9, 15, .76) 60%, rgba(5, 9, 15, .42) 82%, rgba(5, 9, 15, 0)); }
  #finale .lockup { --slot: 44px; grid-column: 1; grid-row: 1; margin-top: 0; }
  #finale .lockup::before { top: calc(var(--slot) / .72 * .6); left: -30%; right: -30%; bottom: -40%; }
  #finale .brandline::before { inset: -70% -24% -70% -12%; background: radial-gradient(52% 50% at 42% 50%, rgba(5, 9, 15, .82), rgba(5, 9, 15, .58) 55%, rgba(5, 9, 15, 0) 82%); }
  #finale .wordmark.big { font-size: clamp(40px, 6vw, 52px); }
  #finale .tagline { font-size: 15px; }
  #finale .byline { margin-top: 4px; } #finale .byline img { height: 16px; }
  #finale .brandline { display: block; position: relative; left: auto; bottom: auto; grid-column: 1; grid-row: 2; font-size: clamp(15px, 2.5vw, 18px); }
  #finale .cta-card { grid-column: 2; grid-row: 1 / span 2; justify-self: end; align-self: end; margin-top: 0; max-width: 400px; padding: 16px 18px; gap: 8px; }
  #finale .cta-card h3 { font-size: 22px; }
  #finale .cta-card p { font-size: 13.5px; line-height: 1.4; }
  #finale .cta-card .btn { margin-top: 2px; padding: 12px 18px; font-size: 14px; }
  #finale .cta-card .url { font-size: 13px; }
}

/* footer */
.foot { position: relative; z-index: 10; display: grid; grid-template-columns: 1fr auto auto; gap: 30px; align-items: end; padding: 60px var(--gutter) 40px; border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(5, 9, 15, .4), var(--ink)); }
.foot-brand img { height: 28px; width: auto; }
.foot-brand p { margin: 12px 0 0; color: var(--paper-2); font-size: 14px; }
.foot-fine p { margin: 4px 0; font-size: 12.5px; color: var(--paper-3); }
.foot-fine a { color: var(--aqua); text-decoration: none; }
.back-to-nine { font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--paper-2); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 12px 16px; cursor: pointer; }
.back-to-nine:hover { border-color: var(--aqua); color: var(--paper); }

/* cursor */
.cursor { position: fixed; z-index: 70; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 1px solid rgba(91, 224, 240, .6); pointer-events: none; transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), background .3s, border-color .3s, opacity .3s; mix-blend-mode: screen; opacity: 0; }
.cursor.on { opacity: 1; }
.cursor.hover { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(91, 224, 240, .1); border-color: rgba(91, 224, 240, .9); }
@media (hover: none) { .cursor { display: none; } }

/* small screens */
@media (max-width: 900px) {
  body { font-size: 16px; }
  .nav { padding: 14px var(--gutter); gap: 12px; }
  .nav-links { display: none; }
  .nav .btn.small { margin-left: auto; padding: 10px 14px; font-size: 12.5px; }
  .by { display: none; }
  .hq-pill { top: 70px; }
  .hq-pill .flap.small { font-size: 17px; }
  .chapter-label { display: none; }
  #chains .frame, #night .frame, #text .frame, #finale .frame { grid-template-columns: 1fr; }
  #chains .frame { align-content: end; padding-bottom: 12vh; }
  #chains .owner { position: absolute; left: 0; right: 0; top: 0; height: 54%; }
  .job { font-size: 12px; padding: 8px 10px; } .job small { font-size: 8.5px; }
  .chains-copy { align-self: end; }
  .evo { grid-template-columns: 1fr; gap: 10px; width: 100%; }
  .evo-step { padding: 16px 18px; } .evo-step h3 { font-size: 21px; margin: 8px 0 4px; } .evo-step p { font-size: 14px; }
  .pillar { width: 170px; padding: 12px 12px 14px; } .pillar span { font-size: 12.5px; } .pillar b { font-size: 16px; }
  .beats { grid-column: 1; height: 62vh; align-self: end; }
  .bigclock { top: 14vh; transform: none; }
  .night-title { top: 9vh; }
  #text .frame { align-content: end; padding-bottom: 8vh; }
  .replies { grid-template-columns: 1fr 1fr; }
  #private .frame { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; padding-top: 11vh; }
  .qa { gap: 8px; margin-top: 2vh; } .qa article { padding: 12px 14px; } .qa p { font-size: 13px; }
  .contrast { display: none; }
  .contrast-line { font-size: 20px; }
  .steps { grid-template-columns: 1fr; }
  .works { grid-template-columns: 1fr; } .works ul { grid-template-columns: 1fr; }
  .lockup { margin-top: 18vh; } .cta-card { justify-self: stretch; margin-top: 0; padding: 22px; }
  .brandline { display: none; }
  .finale-h { top: 10vh; font-size: 34px; }
  .foot { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .grain, .live, .scroll-cue i::after, .hint span::after { animation: none; }
}