/* ═════════════════════════════════════════════════════════════════════════════════════════════
   ringlioai.com — the pocket edition (30 Sep 2026). Built for phones from the ground up, not a
   squeezed desktop: the site behaves like a Brief does on a phone. The next chapter waits under the
   thumb as a question (the dock); chapters open as sheets you drag; rows fling; the ring turns under
   a finger. No phone is ever drawn inside the phone — the screen itself is the customer's phone.
   Same identity as the desktop flagship: Newsreader + Mona Sans, paper and ink, Ringlio blue only
   for the next thing to do. Product depictions use brief.css (namespaced .bk / bk-, .wg).
   ═════════════════════════════════════════════════════════════════════════════════════════════ */
:root {
  --ink: #0F0F12; --ink-2: #19191E; --ink-3: #55555E; --ink-4: #86868F;
  --paper: #F1EEE8; --paper-2: #E7E3DB; --paper-3: #FAF8F4; --on-ink: #EDEAE3;
  --blue: #3D5AFE; --blue-2: #2C46E6; --blue-lite: #8C9BFF;
  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --sans: 'Mona Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --g: 20px;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --apple: cubic-bezier(.32, .72, 0, 1); --out: cubic-bezier(.22, 1, .36, 1); --spring: cubic-bezier(.34, 1.56, .64, 1);
  --dock-h: 60px;
  /* names the shared hero stylesheet (assets/css/ring.css) reads */
  --gutter: var(--g); --serif-d: var(--serif); --ease-out: var(--out); --ease-io: cubic-bezier(.65, 0, .35, 1); --hd-h: 62px; --grain: none;
  --dock-b: max(12px, calc(var(--sab) + 4px));
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.is-locked, html.is-locked body { overflow: hidden; overscroll-behavior: none; }
body { margin: 0; background: var(--ink); color: var(--on-ink); font: 400 16px/1.5 var(--sans); letter-spacing: -.004em; font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; -webkit-tap-highlight-color: transparent; }
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-appearance: none; appearance: none; touch-action: manipulation; }
p { margin: 0; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 8px; }
.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; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 300; padding: 10px 16px; border-radius: 999px; background: var(--blue); color: #fff; font-weight: 600; text-decoration: none; transition: top .2s; }
.skip:focus { top: calc(var(--sat) + 12px); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ─── the launch ─── */
.boot { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: var(--ink); transition: opacity .7s var(--out), visibility .7s; pointer-events: none; }
.boot svg { width: 46px; fill: var(--on-ink); animation: boot 1.4s ease-in-out infinite; }
@keyframes boot { 50% { opacity: .45; } }
html:not(.is-booting) .boot { opacity: 0; visibility: hidden; }
html.is-booting body { overflow: hidden; }

/* ─── buttons ─── */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 52px; padding: 0 8px 0 24px; border-radius: 999px;
  font: 600 16px/1 var(--sans); letter-spacing: -.01em; text-decoration: none; white-space: nowrap; transition: transform .25s var(--out), background .25s; }
.btn:active { transform: scale(.97); }
.btn i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .16); }
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn--blue { background: var(--blue); color: #fff; box-shadow: 0 10px 24px -12px rgba(61, 90, 254, .8), inset 0 1px 0 rgba(255, 255, 255, .18); }
.btn--full { display: flex; width: 100%; justify-content: space-between; }
.btn--lg { height: 58px; font-size: 17px; }

/* ─── chapters: the grounds, the question that opens each one, the headline ─── */
.ch-sec { position: relative; padding: 76px 0 88px; overflow-x: clip; isolation: isolate; }
.ink { background: var(--ink); color: var(--on-ink); --mute: rgba(237, 234, 227, .48); --soft: rgba(237, 234, 227, .7); --rule: rgba(237, 234, 227, .14); --card: #18181D; }
.paper { background: var(--paper); color: var(--ink); --mute: #8F8A82; --soft: rgba(15, 15, 18, .72); --rule: rgba(15, 15, 18, .13); --card: #FFFFFF; }
.ch { padding: 0 var(--g); margin: 0 0 34px; }
.ch__q { position: relative; display: flex; align-items: baseline; gap: 14px; margin: 0 0 22px; padding-top: 13px; font: 500 14px/1.3 var(--sans); color: var(--mute); }
.ch__q::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); transform-origin: 0 50%; }
.js .ch__q::before { transform: scaleX(0); transition: transform 1.2s var(--out); }
.js .ch.is-in .ch__q::before { transform: none; }
.ch__q span { min-width: 1.5em; font-variant-numeric: tabular-nums; opacity: .8; }
.ch__h { margin: 0; font: 400 41px/1.02 var(--serif); letter-spacing: -.032em; font-variation-settings: 'opsz' 72; text-wrap: balance; }
.ch__h em { font-style: italic; font-weight: 300; color: var(--mute); letter-spacing: -.024em; padding-right: .04em; }
.ch__h--s { font-size: 34px; }
.ch__dek { margin: 16px 0 0; max-width: 30em; font: 400 16px/1.5 var(--sans); color: var(--soft); text-wrap: pretty; }
.ch--sub { margin-bottom: 22px; }
.js .ch .ch__h, .js .ch .ch__dek { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--out), transform 1.1s var(--out); }
.js .ch .ch__dek { transition-delay: .12s; }
.js .ch.is-in .ch__h, .js .ch.is-in .ch__dek { opacity: 1; transform: none; }
.note { margin: 22px var(--g) 0; font: 400 13px/1.45 var(--sans); color: var(--mute); }

/* ═════════ 01 · THE RING: the desktop's own WebGL hero (assets/css/ring.css + assets/js/ring.js), which has
   its own phone layout. Only the phone's top bar is ours; it turns light as the sun sets (html.on-place = day). ═════════ */
.mbar { position: absolute; z-index: 9; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; height: calc(var(--sat) + 62px); padding: var(--sat) var(--g) 0;
  color: #fff; transition: color .6s var(--out); pointer-events: none; }
html.on-place .mbar { color: #1a110b; }
/* the hero's deck: shorter than the desktop's (copy in index.html), and it steps aside on a short screen so the ask bar never sits on it */
#top .rh__deck { max-width: 21.5em; text-wrap: pretty; }
html.is-short #top .rh__deck { display: none; }
#top .rs__body .w { filter: none; transition: opacity .3s ease-out; }
.mbar a { pointer-events: auto; }
.logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font: 650 19px/1 var(--sans); letter-spacing: -.035em; color: inherit; }
.logo svg { width: 28px; fill: var(--blue); }
.mbar__cta { display: inline-flex; align-items: center; height: 36px; padding: 0 15px; border-radius: 999px; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); color: #fff;
  font: 600 13.5px/1 var(--sans); letter-spacing: -.01em; text-decoration: none; transition: background .6s, color .6s, box-shadow .6s; }
html.on-place .mbar__cta { background: rgba(26, 17, 11, .9); color: #FFF6EC; box-shadow: none; }
.mbar__cta:active { transform: scale(.96); }
@keyframes live { 50% { opacity: .3; } }
/* How it works rises over the pool, as it does on the desktop: its top is a tall dusk, so night arrives with it */
#film { z-index: 1; margin-top: -60svh; padding-top: calc(60svh + 30px); background: linear-gradient(180deg, rgba(15, 15, 18, 0) 0, rgba(15, 15, 18, .8) 36svh, var(--ink) 54svh); }
#hw { display: block; height: 0; }

/* ═════════ sheets: they rise from the bottom and can be dragged away ═════════ */
.scrim { position: fixed; inset: 0; z-index: 90; background: rgba(8, 8, 10, .5); opacity: 0; transition: opacity .45s var(--apple); -webkit-tap-highlight-color: transparent; }
.scrim.is-on { opacity: 1; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; display: flex; flex-direction: column; max-height: calc(100svh - var(--sat) - 10px);
  border-radius: 28px 28px 0 0; transform: translate3d(0, 100%, 0); transition: transform .52s var(--apple); will-change: transform; overscroll-behavior: contain; }
.sheet.is-open { transform: translate3d(0, 0, 0); }
.sheet.is-drag { transition: none; }
.sheet[hidden] { display: none; }
.sheet__grab { flex: none; display: grid; place-items: center; height: 22px; touch-action: none; }
.sheet__grab i, .sheet__grab-i { display: block; width: 38px; height: 5px; border-radius: 3px; background: currentColor; opacity: .22; }
.sheet__x { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(120, 120, 128, .16); font: 400 22px/1 var(--sans); color: inherit; }
.sheet__grab--over { position: absolute; left: 0; right: 0; top: 0; z-index: 3; color: #fff; height: 26px; }
.sheet__x--over { position: absolute; right: 14px; top: 14px; z-index: 3; background: rgba(0, 0, 0, .28); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* the menu: a pane of dark glass that rises where the dock sits, with every chapter one tap away as a tile and the
   one you are in lit (Ethan, 1 Oct: the paper sheet of numbered serif questions was not it; "sleek and modern").
   It is a .sheet, so it drags away by its head and closes on the scrim. */
.idx { left: 10px; right: 10px; bottom: var(--dock-b); max-height: calc(100svh - var(--sat) - 24px); padding: 8px; border-radius: 30px; color: #F4F2EC;
  background: rgba(20, 20, 25, .84); -webkit-backdrop-filter: blur(30px) saturate(1.7); backdrop-filter: blur(30px) saturate(1.7);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .12), 0 30px 70px -20px rgba(0, 0, 0, .7);
  transform: translate3d(0, calc(100% + var(--dock-b) + 20px), 0); }
.idx__head { flex: none; display: flex; align-items: center; justify-content: space-between; height: 50px; padding: 0 4px 2px 12px; touch-action: none; }
.idx__brand { display: inline-flex; align-items: center; gap: 9px; font: 650 18px/1 var(--sans); letter-spacing: -.035em; }
.idx__brand svg { width: 25px; fill: var(--blue); }
.idx__x { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); transition: transform .2s var(--out), background .2s; }
.idx__x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.idx__x:active { transform: scale(.92); background: rgba(255, 255, 255, .16); }
.idx__list { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; overflow-y: auto; }
.idx__list li { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .2s linear, transform .2s linear; }
.idx.is-open .idx__list li { opacity: 1; transform: none; transition: opacity .4s var(--out) calc(70ms + var(--i) * 20ms), transform .6s var(--out) calc(70ms + var(--i) * 20ms); }
.idx__list a { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 56px; padding: 0 14px 0 16px; border-radius: 20px; text-decoration: none; white-space: nowrap;
  background: rgba(255, 255, 255, .065); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
  font: 550 16px/1 var(--sans); letter-spacing: -.018em; color: rgba(244, 242, 236, .88); transition: transform .2s var(--out), background .2s; }
.idx__list a small { font: 500 11.5px/1 var(--sans); letter-spacing: 0; font-variant-numeric: tabular-nums; color: rgba(244, 242, 236, .32); }
.idx__list a:active { transform: scale(.97); background: rgba(255, 255, 255, .13); }
.idx__list a.is-here { background: #F4F2EC; color: var(--ink); box-shadow: none; }
.idx__list a.is-here small { color: var(--blue); }
.idx__cta { flex: none; height: 56px; }

/* ═════════ the dock ═════════ */
.dock { position: fixed; left: 10px; right: 10px; bottom: var(--dock-b); z-index: 80; display: flex; align-items: center; gap: 6px; height: var(--dock-h); padding: 6px;
  border-radius: 999px; background: rgba(24, 24, 29, .96); color: var(--on-ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), 0 18px 40px -16px rgba(0, 0, 0, .55);
  transform: translate3d(0, calc(100% + var(--dock-b) + 12px), 0); transition: transform .55s var(--apple), background .4s, color .4s; will-change: transform; }
.dock.is-on { transform: none; }
.dock.is-paper { background: rgba(252, 250, 246, .97); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(15, 15, 18, .07), 0 18px 40px -18px rgba(40, 30, 20, .35); }
.dock__idx { position: relative; width: 46px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; }
.dock__idx .dock__ring { position: absolute; inset: 6px; width: 36px; height: 36px; fill: none; stroke-width: 2; }
.dock__idx .bg { stroke: currentColor; opacity: .14; }
.dock__idx .fg { stroke: var(--blue-lite); stroke-linecap: round; stroke-dasharray: 100.5; stroke-dashoffset: calc(100.5 * (1 - var(--pr, 0))); transition: stroke-dashoffset .3s linear; }
.dock.is-paper .dock__idx .fg { stroke: var(--blue); }
.dock__burger { position: relative; display: grid; gap: 5px; width: 15px; }
.dock__burger i { display: block; height: 1.6px; border-radius: 1px; background: currentColor; }
.dock__next { flex: 1; min-width: 0; height: 48px; display: grid; align-content: center; justify-items: start; gap: 3px; padding: 0 4px; text-align: left; }
.dock__next small { font: 500 11px/1 var(--sans); opacity: .55; }
.dock__next span { max-width: 100%; font: 400 15.5px/1.1 var(--serif); letter-spacing: -.016em; font-variation-settings: 'opsz' 24; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock__next span.is-roll { animation: roll .45s var(--out); }
@keyframes roll { from { opacity: 0; transform: translateY(8px); } }
.dock__cta { flex: none; height: 48px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 999px; background: var(--blue); color: #fff; font: 600 14.5px/1 var(--sans); letter-spacing: -.01em; text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); transition: transform .2s var(--out); }
.dock__cta:active, .dock__next:active, .dock__idx:active { transform: scale(.96); }

/* ═════════ PINNING. Nothing on this page is position:sticky. Measured in Mobile Safari (screen recording, frame by
   frame): a sticky stage shakes up and down by a point or two on every frame while a finger scrolls, whenever script
   updates anything on the page; a fixed element holds still through the same updates. So each pinned scene is a
   WINDOW onto a FIXED stage: the tall container clips (clip-path, which does not capture fixed children) and the stage
   never moves. The section before slides off it like a curtain, and the next one slides over it. The hero's stage
   (ring.css makes it sticky) is pinned the same way. ═════════ */
.st, .mo, #top.rh { clip-path: inset(0); }
#top.rh .rh__pin { position: fixed; top: 0; left: 0; right: 0; }

/* ═════════ story scenes (How it works, the Desk): pinned, with progress segments like a story ═════════ */
.st { position: relative; height: var(--st-h, 520svh); }
#st { --st-h: 620svh; }   /* How it works: a hundred more than the rest, all of it spent reading page one and its widget (film.js) */
.st__pin { position: fixed; top: 0; left: 0; right: 0; height: 100svh; display: flex; flex-direction: column; padding: calc(var(--sat) + 12px) 10px calc(var(--dock-b) + var(--dock-h) + 12px); overflow: hidden; }
/* with Safari's toolbars away the stage takes the room they leave: util.js sets --stage-h (pixels) once a taller
   viewport has held still, and clears it when the toolbars are back */
html .st__pin, html .mo__pin { height: var(--stage-h, 100svh); }
/* a pinned stage carries its ground's colour itself: Safari tints its status bar from whatever is stuck to the top edge */
.ink .st__pin { background: var(--ink); } .paper .st__pin, .paper .mo__pin { background: var(--paper); }
.st__bar { flex: none; padding: 0 8px 12px; }
.st__segs { list-style: none; display: flex; gap: 5px; margin: 0 0 12px; padding: 0; }
.st__segs li { flex: 1; height: 3px; border-radius: 2px; background: rgba(237, 234, 227, .2); overflow: hidden; }
.st__segs li i { display: block; height: 100%; background: var(--on-ink); transform-origin: 0 50%; transform: scaleX(0); will-change: transform; }
.st__bar--paper .st__segs li { background: rgba(15, 15, 18, .14); }
.st__bar--paper .st__segs li i { background: var(--ink); }
.st__cap { height: 70px; overflow: hidden; font: 400 16px/1.38 var(--sans); color: var(--soft); }   /* a fixed height: the screen below must never change size when the caption wraps */
.st__cap b { display: block; font: 400 21px/1.15 var(--serif); letter-spacing: -.015em; color: var(--on-ink); font-variation-settings: 'opsz' 36; }
.paper .st__cap b { color: var(--ink); }
.st__cap.is-roll { animation: roll .5s var(--out); }

/* 02 · the customer's phone, full size. Everything on it is set at the real product's size (a 390-wide canvas, as
   tall as the screen allows) and fitted to the screen with one transform, so the Brief here has the real Pocket
   edition's proportions: measured from the first product film (_src/pocket-film/v1-2026-10-01), frame by frame. */
.st__screen { position: relative; flex: 1; min-height: 0; border-radius: 30px; overflow: hidden; isolation: isolate; background: #fff; transition: background .6s;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 60px -30px rgba(0, 0, 0, .8); }
.cv { position: absolute; left: 0; top: 0; width: 390px; transform-origin: 0 0; overflow: hidden; background: #FBF8F2; font-family: 'Source Serif 4', Georgia, serif; }
/* the agency's own site */
.ms { position: absolute; inset: 0; background: #FBF8F2; color: #2B221C; }
.ms__head { display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 20px; border-bottom: 1px solid rgba(43, 34, 28, .08); }
.ms__mark { width: 22px; height: 26px; flex: none; color: #A34F36; background: currentColor; -webkit-mask: var(--alder-logo) center / contain no-repeat; mask: var(--alder-logo) center / contain no-repeat; }
.ms__word { font: 500 15px/1 'Source Serif 4', serif; letter-spacing: .14em; text-transform: uppercase; }
.ms__menu { margin-left: auto; display: grid; gap: 5px; } .ms__menu i { display: block; width: 20px; height: 1.6px; background: currentColor; }
.ms__hero { position: relative; height: 54%; overflow: hidden; }
.ms__hero img { width: 100%; height: 100%; object-fit: cover; }
.ms__veil { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(30, 18, 10, .62)); }
.ms__in { position: absolute; left: 20px; right: 20px; bottom: 22px; color: #FFF7EE; }
.ms__kick { font: 500 11px/1 'JetBrains Mono', monospace; letter-spacing: .22em; text-transform: uppercase; opacity: .8; }
.ms__h1 { margin-top: 10px; font: 600 32px/1.04 'Source Serif 4', serif; letter-spacing: -.02em; }
.ms__h1 em { font-weight: 400; }
.ms__body { padding: 20px; font: 400 16px/1.5 'Source Serif 4', serif; color: #4A3E35; }
.ms__btns { display: flex; gap: 8px; margin-top: 16px; }
.ms__btns span { padding: 12px 15px; border-radius: 3px; background: #A34F36; color: #FFF7EE; font: 600 12.5px/1 var(--sans); }
.ms__btns span + span { background: none; color: #A34F36; box-shadow: inset 0 0 0 1px #A34F36; }
.ms__dim { position: absolute; inset: 0; z-index: 2; background: #0c0806; opacity: 0; pointer-events: none; }
/* the door: the product's own door card (brief.css .door, 424 wide by design), the size the hero hands it over at */
.sdoor { position: absolute; z-index: 3; left: 12px; bottom: 12px; width: 424px; transform-origin: 0 100%; will-change: transform; }
.sdoor .door { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 424px; box-shadow: 0 30px 70px -22px rgba(30, 16, 6, .62), 0 0 0 1px rgba(53, 42, 35, .06); }
.sdoor .door__ans .w { opacity: 1; }
.sdoor .dr__rail i { transform: scaleX(.1); }
/* the Brief: a desk in the business's colour, each answer a page of paper, the dock at the foot */
.pe { position: absolute; inset: 0; z-index: 4; background: var(--bk-band); color: var(--bk-band-ink); will-change: transform, opacity; --pe-mono: 'JetBrains Mono', ui-monospace, monospace; }
.pe__top { position: absolute; left: 20px; right: 20px; top: 15px; height: 12px; margin: 0; font: 600 9.5px/12px var(--pe-mono); letter-spacing: .24em; text-transform: uppercase; }
.pe__top span { position: absolute; left: 0; top: 0; white-space: nowrap; }
#stTopB { color: var(--bk-gold); opacity: 0; }
.pe__pager { position: absolute; left: 0; right: 0; top: 40px; bottom: 126px; }
.pe__page { position: absolute; left: 14px; top: 0; bottom: 0; width: 346px; border-radius: 22px; overflow: hidden; background: var(--bk-paper); color: var(--bk-ink); will-change: transform;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 24px 40px -26px rgba(20, 8, 2, .7); }
.pe__in { padding: 20px 20px 40px; will-change: transform; }
.pe__row { display: flex; align-items: center; gap: 10px; min-height: 26px; }
.pe__pill { padding: 7px 10px 6px; border-radius: 999px; background: color-mix(in srgb, var(--bk-accent) 14%, var(--bk-paper)); color: var(--bk-accent); font: 600 8.5px/1 var(--pe-mono); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }
.pe__n { margin-left: auto; font: 500 9px/1 var(--pe-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--bk-ink-3); white-space: nowrap; }
.pe__stop { padding: 6px 11px 5px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--bk-ink-4); font: 500 9px/1 var(--pe-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bk-ink-2); }
.pe .pe__q { margin: 15px 0 0; font: italic 400 16px/1.3 'Source Serif 4', serif; letter-spacing: -.005em; color: var(--bk-ink-2); }
.pe__h { margin: 11px 0 0; font: 620 30px/1.08 'Source Serif 4', serif; letter-spacing: -.022em; color: var(--bk-ink); text-wrap: balance; font-variation-settings: 'opsz' 40; }
.pe__h em { font-style: italic; font-weight: 500; }
.pe__h.is-wait { color: var(--bk-ink-4); font-weight: 560; }
.pe__h--l { font-size: 26px; letter-spacing: -.024em; }
.pe__h--l em { display: block; }
.pe__reel { margin-top: 11px; height: var(--reel-h, 66px); overflow: hidden; }
.pe__strip { will-change: transform; }
.pe__strip .pe__h { margin: 0; height: var(--reel-h, 66px); overflow: hidden; }
.pe__bw { position: relative; margin-top: 14px; }
.pe__lines { position: absolute; left: 0; right: 0; top: 4px; }
.pe__lines i { display: block; height: 7px; margin-bottom: 13px; border-radius: 4px; background: color-mix(in srgb, var(--bk-ink) 8%, transparent); }
.pe__lines i:nth-child(2) { width: 94%; } .pe__lines i:nth-child(3) { width: 97%; } .pe__lines i:nth-child(4) { width: 58%; }
.pe__body { margin: 0; font: 400 16px/1.58 'Source Serif 4', serif; color: var(--bk-ink-2); font-variation-settings: 'opsz' 14; }
.pe__page .pe__body { margin-top: 14px; } .pe__bw .pe__body { margin-top: 0; }
.pe__body .w { opacity: 0; }
.pe__drop { float: left; margin: 5px 9px 0 0; font: 600 47px/.8 'Source Serif 4', serif; color: var(--bk-accent); }
.pe__ph { position: relative; margin: 18px 0 0; height: 176px; border-radius: 14px; overflow: hidden; }
.pe__ph img { width: 100%; height: 100%; object-fit: cover; }
.pe__ph::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient(transparent, rgba(22, 12, 6, .72)); }
.pe__ph figcaption { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 10px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; color: #fff; }
.pe__ph figcaption em { max-width: 58%; font: italic 400 11.5px/1.3 'Source Serif 4', serif; letter-spacing: .02em; }
.pe__ph figcaption span { font: 500 8px/1.5 var(--pe-mono); letter-spacing: .2em; text-transform: uppercase; opacity: .85; text-align: right; }
.pe__w { margin-top: 20px; --w-ink: var(--bk-tile); }
.pe__w .w-tile { padding: 17px 18px 13px; }
.pe__w .w-fig { margin-top: 13px; font-size: 38px; }
.pe__route { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); margin-top: 18px; font: 500 10px/1.2 var(--bk-sans); color: var(--w-3); text-align: center; }
.pe__route::before { content: ""; position: absolute; top: 5px; left: calc(50% / var(--n)); right: calc(50% / var(--n)); height: 2px; background: var(--w-fill-2); }
.pe__route span { position: relative; display: grid; justify-items: center; gap: 8px; }
.pe__route span::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--w-ink); box-shadow: inset 0 0 0 2px var(--w-fill-2); }
.pe__route .on { color: var(--w-hi); font-weight: 600; } .pe__route .on::before { background: var(--w-gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--w-gold) 30%, transparent); }
.pe__veil { position: absolute; z-index: 2; inset: 0; background: var(--bk-paper); transform-origin: 50% 100%; will-change: transform; }
.pe .pe__step { margin: 20px 0 0; font: 500 8.5px/1 var(--pe-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--bk-ink-4); }
.pe__step b { margin-left: 12px; font-weight: 600; color: var(--bk-accent); }
.pe .pe__chips { display: flex; gap: 8px; margin: 15px 0 0; }
.pe__chips span { padding: 7px 10px 6px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--bk-soft); font: 500 8px/1 var(--pe-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--bk-ink-3); }
.pe__chips .is-acc { background: color-mix(in srgb, var(--bk-accent) 13%, var(--bk-paper)); color: var(--bk-accent); box-shadow: none; }
.pe__door { display: flex; align-items: center; gap: 10px; height: 60px; margin-top: 20px; padding: 0 16px; border-radius: 15px; background: var(--bk-bright);
  box-shadow: inset 0 0 0 1.2px color-mix(in srgb, var(--bk-accent) 58%, transparent), 0 8px 16px -10px color-mix(in srgb, var(--bk-accent) 60%, transparent); }
.pe__door b { font: 600 15px/1 'Source Serif 4', serif; color: var(--bk-accent); }
.pe__door span { font: italic 400 15.5px/1 'Source Serif 4', serif; color: var(--bk-ink-3); padding-left: 8px; border-left: 1.5px solid var(--bk-accent); }
.pe__door i, .pe__card i { margin-left: auto; font: 400 17px/1 var(--sans); font-style: normal; color: var(--bk-accent); }
.pe .pe__or { margin: 20px 0 2px; font: italic 400 14px/1.3 'Source Serif 4', serif; color: var(--bk-ink-3); }
.pe__or b { font-style: normal; font-weight: 620; color: var(--bk-ink); }
.pe__card { display: flex; align-items: center; gap: 12px; min-height: 56px; margin-top: 8px; padding: 11px 16px; border-radius: 15px; background: var(--bk-bright); box-shadow: 0 0 0 1px var(--bk-soft-2), 0 2px 4px -2px rgba(40, 20, 8, .14);
  font: 620 15.5px/1.24 'Source Serif 4', serif; letter-spacing: -.008em; color: var(--bk-ink); will-change: transform; }
.pe .pe__more { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 34px 0 11px; text-align: center; background: linear-gradient(color-mix(in srgb, var(--bk-paper) 0%, transparent), var(--bk-paper) 50%);
  font: 500 7.5px/1 var(--pe-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--bk-ink-4); }
.pe__nav { position: absolute; left: 12px; right: 12px; bottom: 80px; height: 36px; display: flex; align-items: center; justify-content: space-between; }
.pe__arr { position: relative; width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bk-band-ink) 26%, transparent); }
.pe__arr::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border: solid var(--bk-band-ink); border-width: 1.6px 1.6px 0 0; transform: translate(-70%, -50%) rotate(45deg); }
.pe__arr.is-l::after { transform: translate(-30%, -50%) rotate(-135deg); }
.pe__arr.is-l { opacity: .35; }
.pe__dots { display: flex; gap: 7px; align-items: center; }
.pe__dots i { width: 5px; height: 5px; border-radius: 3px; background: var(--bk-band-ink); opacity: .45; transition: width .35s var(--out), opacity .35s; }
.pe__dots i.on { width: 14px; opacity: 1; }
.pe__dots i.is-off { display: none; }
.pe__dock { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 56px; display: flex; align-items: center; gap: 15px; padding: 0 5px 0 20px; border-radius: 999px; background: var(--bk-bright); color: var(--bk-ink);
  box-shadow: 0 14px 28px -14px rgba(20, 8, 2, .6); }
.pe__where { position: relative; flex: 1; height: 12px; font: 500 8.5px/12px var(--pe-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--bk-ink-3); }
.pe__where span { position: absolute; left: 0; top: 0; white-space: nowrap; }
#stSetting { color: var(--bk-accent); opacity: 0; }
.pe__ic { width: 19px; height: 19px; flex: none; }
.pe__ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pe__askb { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border-radius: 999px; background: var(--bk-band); color: var(--bk-band-ink); font: 600 10px/1 var(--pe-mono); letter-spacing: .22em; text-transform: uppercase; }
.pe__askb i { font: 400 15px/1 var(--sans); font-style: normal; letter-spacing: 0; color: var(--bk-gold); }
.st__flyq { position: absolute; z-index: 6; left: 0; top: 0; width: 306px; margin: 0; font: italic 400 16px/1.3 'Source Serif 4', serif; letter-spacing: -.005em; color: var(--bk-ink-2); pointer-events: none; opacity: 0; will-change: transform, opacity; }
.me { position: absolute; inset: 0; z-index: 7; pointer-events: none; opacity: 0; background: none; font-size: inherit; }
.me__lab { position: absolute; left: 18px; margin: 0; font: 500 12.5px/1 var(--sans); color: #6B6258; }
.me__lab--a { top: 16px; }
.me__pages { position: absolute; left: 0; right: 0; top: 38px; height: calc(41% - 38px); }
.me__p { position: absolute; top: 0; height: 100%; width: 43.5%; border-radius: 14px; overflow: hidden; background: var(--bk-paper); box-shadow: 0 0 0 1px var(--bk-soft-2), 0 18px 30px -18px rgba(40, 20, 8, .45); padding: 12px 11px; }
.me__p[data-e="0"] { left: 5%; } .me__p[data-e="1"] { left: 51.5%; }
.me__p .pe__pill { display: inline-block; padding: 4px 6px 3px; font-size: 5.5px; }
.me__p p.d { margin-top: 9px; font: italic 400 9px/1.3 'Source Serif 4', serif; color: var(--bk-ink-3); }
.me__p p.h { margin-top: 6px; font: 620 15px/1.08 'Source Serif 4', serif; letter-spacing: -.02em; }
.me__p p.h em { font-weight: 500; font-style: italic; }
.me__p i.l { display: block; height: 4px; margin-top: 7px; border-radius: 2px; background: var(--bk-fill); }
.me__p img { width: 100%; height: 32%; object-fit: cover; margin-top: 9px; border-radius: 6px; }
.me__lab--b { top: calc(41% + 18px); }
.me__desk { position: absolute; left: 14px; top: calc(41% + 38px); border-radius: 7px; overflow: hidden; background: var(--bk-paper); box-shadow: 0 0 0 1px var(--bk-soft-2), 0 22px 36px -22px rgba(40, 20, 8, .5); }
.me__fit { width: 1080px; transform-origin: 0 0; }
.tap { position: absolute; z-index: 9; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(61, 90, 254, .22); box-shadow: 0 0 0 1.5px rgba(61, 90, 254, .7); opacity: 0; pointer-events: none; }

/* the desktop edition's spread (shown whole, in miniature, in the film's last beat) */
.eds { width: 1080px; padding: 0 0 26px; }
.eds__band { position: relative; height: 104px; background: var(--bk-band); color: var(--bk-band-ink); padding: 0 34px; display: flex; align-items: center; gap: 20px; }
.eds__band .bk-band__mark { width: 32px; height: 40px; }
.eds__title { font: 420 27px/1 var(--bk-mast); letter-spacing: .16em; text-transform: uppercase; padding-bottom: 9px; border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent); }
.eds__sub { margin-top: 9px; font: 500 8px/1 var(--bk-mono); letter-spacing: .34em; text-transform: uppercase; opacity: .7; }
.eds__right { margin-left: auto; display: flex; align-items: center; font: 500 9px/1 var(--bk-mono); letter-spacing: .3em; text-transform: uppercase; opacity: .82; }
.eds__meta { padding: 14px 34px 12px; border-bottom: 1px solid var(--bk-soft); font: 500 10px/1 var(--bk-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--bk-ink-3); }
.eds__meta b { color: var(--bk-ink); font-weight: 600; }
.eds__flow { display: grid; grid-template-columns: 6fr 3fr 3fr; gap: 0 28px; padding: 22px 34px 0; align-items: start; }
.eds__col .bk-rule { position: static; height: 2px; background: var(--bk-ink); margin-bottom: 10px; }
.eds__col .bk-kicker { margin-bottom: 12px; }
.eds__h { margin: 0; font: var(--bk-title-w) 32px/1.06 var(--bk-title); letter-spacing: -.022em; text-wrap: balance; }
.eds__h em { font-weight: 400; font-style: italic; }
.eds__h--s { font-size: 23px; }
.eds__col .bk-dek { margin-top: 10px; font: italic 400 14px/1.35 var(--bk-serif); color: var(--bk-ink-3); }
.eds__body { margin-top: 12px; font: 400 14px/1.55 var(--bk-serif); color: var(--bk-ink-2); text-align: justify; hyphens: none; }
.eds__two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.eds__drop { float: left; font: 600 50px/.8 var(--bk-title); margin: 6px 8px 0 0; color: var(--bk-accent); }
.eds__ph { position: relative; margin: 12px 0 0; }
.eds__ph img { width: 100%; height: var(--ph-h, 300px); object-fit: cover; border-radius: 1px; }
.eds__ph figcaption { display: flex; justify-content: space-between; gap: 14px; margin-top: 7px; font: 400 10.5px/1.3 var(--bk-sans); color: var(--bk-ink-4); }
.eds__ph figcaption span:last-child { flex: none; white-space: nowrap; }
.eds__col .bk-byline { margin-top: 16px; padding-top: 9px; border-top: 1px solid var(--bk-soft); display: flex; justify-content: space-between; gap: 10px; font: 400 10.5px/1.3 var(--bk-sans); color: var(--bk-ink-3); }
.eds__w { margin-top: 16px; }
.eds__plate.bk-plate { position: relative; left: auto; top: auto; margin-top: 2px; border-radius: 14px; background: var(--bk-bright); box-shadow: 0 0 0 1px var(--bk-soft-2), 0 24px 44px -24px rgba(40, 20, 8, .45); padding: 16px 16px 8px; }
.fd__dots i { width: 6px; height: 6px; border-radius: 3px; background: currentColor; opacity: .25; transition: width .35s var(--out), opacity .35s; }
.fd__dots i.on { width: 20px; opacity: .9; }

/* ═════════ 03 · NOT A CHATBOT: two real layouts (a thread, a page) in natural flow; the morph between them
   is measured, then played with transforms and opacity only ═════════ */
.mo { position: relative; height: 300svh; }
.mo__pin { position: fixed; top: 0; left: 0; right: 0; height: 100svh; display: flex; flex-direction: column; align-items: center; padding: calc(var(--sat) + 14px) var(--g) calc(var(--dock-b) + var(--dock-h) + 14px); }
.seg { position: relative; flex: none; display: grid; grid-template-columns: 1fr 1fr; width: 240px; height: 40px; padding: 3px; border-radius: 999px; background: rgba(15, 15, 18, .07); box-shadow: inset 0 0 0 1px rgba(15, 15, 18, .05); }
.seg__th { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: #fff; box-shadow: 0 3px 10px -3px rgba(15, 15, 18, .3); will-change: transform; }
.seg button { position: relative; z-index: 1; font: 600 14px/1 var(--sans); letter-spacing: -.01em; color: rgba(15, 15, 18, .5); transition: color .3s; }
.seg button[aria-selected="true"] { color: var(--ink); }
.mo__view { position: relative; flex: 1; width: 100%; min-height: 0; margin-top: 14px; }
.mo__cv { position: absolute; left: 50%; top: 50%; width: 350px; height: 660px; transform-origin: 50% 50%; }
.mo__sheet { position: absolute; inset: 0; border-radius: 22px; background: #F7F3EA; box-shadow: 0 0 0 1px rgba(20, 33, 61, .08), 0 30px 60px -34px rgba(20, 30, 60, .45); opacity: 0; }
.mo__win { position: absolute; inset: 0; border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px rgba(15, 15, 18, .06), 0 30px 60px -30px rgba(15, 15, 18, .4); overflow: hidden; }
.mo__wh { display: flex; align-items: center; gap: 10px; height: 64px; padding: 0 16px; background: #5B5BD6; color: #fff; }
.mo__wh b { display: block; font: 600 14.5px/1.1 var(--sans); } .mo__wh small { display: block; margin-top: 2px; font: 400 11.5px/1 var(--sans); opacity: .8; }
.mo__av { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .22); font: 600 14px/1 var(--sans); }
.mo__wi { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 44px; border-radius: 22px; display: flex; align-items: center; padding: 0 16px; background: #F2F2F5; font: 400 14px/1 var(--sans); color: #9A9AA3; }
.mo__thread { position: absolute; left: 0; right: 0; top: 64px; display: flex; flex-direction: column; gap: 9px; padding: 14px 14px 0; }
.mo__c { position: relative; max-width: 82%; margin: 0; padding: 10px 14px 11px; border-radius: 20px; font: 400 14.5px/1.35 var(--sans); will-change: transform, opacity; }
.mo__c--bot { align-self: flex-start; background: #F0F0F4; color: #1d1d22; border-bottom-left-radius: 6px; }
.mo__c--me { align-self: flex-end; background: #5B5BD6; color: #fff; border-bottom-right-radius: 6px; }
.mo__c u { text-decoration-color: rgba(29, 29, 34, .4); color: #3b3bb3; white-space: nowrap; }
.mo__f { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 55% / calc(var(--s, 0) * 100%) 1.5px no-repeat; }
.mo__band { position: absolute; left: 0; right: 0; top: 0; height: 58px; display: flex; align-items: center; gap: 10px; padding: 0 18px; border-radius: 22px 22px 0 0; background: #14213D; color: #F4EEDD; opacity: 0; }
.mo__band b { font: 500 16px/1 'Bodoni Moda', serif; letter-spacing: .01em; white-space: nowrap; }
.mo__band small { margin-left: auto; font: 500 8.5px/1 'JetBrains Mono', monospace; letter-spacing: .2em; text-transform: uppercase; opacity: .7; white-space: nowrap; }
.mo__crest { width: 18px; height: 21px; flex: none; background: currentColor; -webkit-mask: var(--kestrel-logo) center / contain no-repeat; mask: var(--kestrel-logo) center / contain no-repeat; }
.mo__in { position: absolute; left: 20px; right: 20px; top: 74px; }
.mo__kick { display: flex; justify-content: space-between; font: 600 9.5px/1 'JetBrains Mono', monospace; letter-spacing: .2em; text-transform: uppercase; color: #9C7A24; opacity: 0; }
.mo__kick span:first-child { display: inline-flex; align-items: center; gap: 7px; } .mo__kick i { width: 6px; height: 6px; background: #9C7A24; }
.mo__kick span:last-child { color: #6F7382; }
.mo__title { margin: 12px 0 0; font: 600 25px/1.08 'Bodoni Moda', serif; letter-spacing: -.012em; color: #1A2233; opacity: 0; text-wrap: balance; }
.mo__title em { font-weight: 400; }
.mo__p { margin: 0; opacity: 0; will-change: transform, opacity; }
.mo__p--dek { margin-top: 10px; font: italic 400 15px/1.35 'Source Serif 4', serif; color: #5d6272; }
.mo__p--body { margin-top: 8px; font: 400 15px/1.52 'Source Serif 4', serif; color: #2a3142; text-align: justify; hyphens: none; }
.mo__p--ph { margin-top: 12px; }
.mo__p--ph img { width: 100%; height: 116px; object-fit: cover; border-radius: 2px; }
.mo__p--ph figcaption { margin-top: 6px; font: 400 10.5px/1 var(--sans); color: #6F7382; }
.mo__p--w { margin-top: 12px; }
.mo__by { margin-top: 12px; display: flex; justify-content: space-between; padding-top: 8px; border-top: 1px solid rgba(26, 34, 51, .14); font: 400 10.5px/1.2 var(--sans); color: #6F7382; opacity: 0; }
.mo__cap { flex: none; margin-top: 14px; min-height: 44px; max-width: 320px; text-align: center; font: 400 15px/1.45 var(--sans); color: var(--soft); text-wrap: balance; }
.mo__cap span { color: var(--mute); }

/* ═════════ 04 · WIDGETS: three rows drifting by themselves (a compositor animation; no touch, no script) ═════════ */
.wl__rows { display: grid; gap: 2px; pointer-events: none; user-select: none; -webkit-user-select: none; }
.wl__row { overflow: hidden; }
.wl__track { display: flex; width: max-content; padding: 6px 0 24px; animation: wl-drift var(--dur, 90s) linear infinite var(--dir, normal); animation-play-state: paused; }
.wl__rows.is-on .wl__track { animation-play-state: running; }
@keyframes wl-drift { to { transform: translate3d(-50%, 0, 0); } }
.wl__cell { flex: none; height: 244px; margin-right: 14px; }
.wl__cell .wt { height: 312px; margin: 0; transform: scale(.78); transform-origin: 0 0; }
.wl__row .wt .w-tile { height: 100%; padding: 18px 20px 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 22px 28px -22px rgba(20, 14, 8, .5); }
.wl__row .wt--light .w-tile { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 0 1px rgba(20, 14, 8, .06), 0 22px 28px -24px rgba(20, 14, 8, .3); }

/* ═════════ 05 · ON A PHONE: the real Pocket edition, filmed from the product ═════════ */
.pf__beats { list-style: none; display: grid; grid-template-columns: repeat(5, auto); justify-content: space-between; margin: 0 var(--g); padding: 0 0 12px; border-bottom: 1px solid var(--rule); }
.pf__beats button { padding: 6px 0; font: 400 24px/1 var(--serif); letter-spacing: -.02em; font-variation-settings: 'opsz' 36; color: var(--mute); transition: color .4s var(--out); }
.pf__beats b { font-weight: 400; }
.pf__beats .is-on button { color: var(--on-ink); }
@media (max-width: 345px) { .pf__beats button { font-size: 21px; } }   /* five beats on the narrowest phones */
.pf__cap { margin: 12px var(--g) 22px; min-height: 44px; font: 400 15.5px/1.45 var(--sans); color: var(--soft); }
.pf__cap.is-roll { animation: roll .45s var(--out); }
.pf__screen { position: relative; width: min(calc(100% - 2 * var(--g)), 340px, calc((100svh - 96px) * 390 / 737)); margin: 0 auto; aspect-ratio: 390 / 737; border-radius: 32px; overflow: hidden; background: #1c1410;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 70px -34px rgba(0, 0, 0, .95); transform: translateZ(0); }
.pf__film { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s linear; }
.pf__film.is-fade { opacity: 0; }
.try__note { margin: 18px var(--g) 0; font: 400 13px/1.45 var(--sans); color: var(--mute); text-align: center; }

/* ═════════ 06 · YOUR BRAND ═════════ */
.br { padding-bottom: 72px; }
.br__glow { position: absolute; left: 50%; top: 40%; width: 140vw; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -30%); z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--br-c, #0F3B3A) 26%, transparent), transparent); transition: background .8s var(--out); }
.br__tabs { position: relative; display: flex; gap: 6px; margin: 0 var(--g) 18px; padding: 4px; overflow-x: auto; scrollbar-width: none; border-radius: 999px; background: var(--ink); }
.br__tabs::-webkit-scrollbar { display: none; }
.br__ind { position: absolute; top: 4px; left: 0; height: 44px; border-radius: 999px; background: rgba(255, 255, 255, .13); transition: transform .45s var(--apple), width .45s var(--apple); pointer-events: none; }
.br__tab { position: relative; z-index: 1; flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.br__tab i { width: 30px; height: 30px; border-radius: 50%; background: var(--c); position: relative; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); transition: transform .3s var(--spring); }
.br__tab i::after { content: ""; position: absolute; inset: 7px; background: var(--ci); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.br__tab[aria-selected="true"] i { transform: scale(1.08); }
.br__tab span { display: none; }
.br__tab[aria-selected="true"] { width: auto; padding: 0 14px 0 7px; border-radius: 999px; gap: 9px; display: flex; align-items: center; color: #fff; font: 600 13.5px/1 var(--sans); white-space: nowrap; }
.br__tab[aria-selected="true"] span { display: inline; }
.br__pager { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding: 0 0 8px; }
.br__pager::-webkit-scrollbar { display: none; }
.bp { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; padding: 0 var(--g); }
.bp__page { border-radius: 22px; overflow: hidden; background: var(--bk-paper); color: var(--bk-ink); box-shadow: 0 0 0 1px rgba(15, 15, 18, .05), 0 34px 60px -34px rgba(30, 20, 10, .5); }
.bp__band { display: flex; align-items: center; gap: 12px; height: 74px; padding: 0 18px; background: var(--bk-band); color: var(--bk-band-ink); }
.bp__mk { width: 28px; height: 32px; flex: none; background: currentColor; -webkit-mask: var(--bk-logo) center / contain no-repeat; mask: var(--bk-logo) center / contain no-repeat; }
.bp__band b { display: block; font: var(--mast-w, 500) calc(16px * var(--mast-s, 1))/1 var(--bk-mast); letter-spacing: var(--mast-t, .1em); text-transform: var(--mast-c, uppercase); font-style: var(--mast-st, normal); white-space: nowrap; }
.bp__band small { display: block; margin-top: 7px; font: 500 8.5px/1 'JetBrains Mono', monospace; letter-spacing: .18em; text-transform: uppercase; opacity: .72; }
.bp__in { padding: 18px 18px 18px; }
.bp__h { font: var(--bk-title-w) 25px/1.1 var(--bk-title); letter-spacing: -.018em; text-wrap: balance; }
.bp__h em { font-weight: 400; font-style: italic; color: var(--bk-accent); }
.bp__in .bp__dek { margin-top: 9px; font: italic 400 14.5px/1.35 'Source Serif 4', serif; color: var(--bk-ink-3); }
.bp__in .bp__b { margin-top: 11px; font: 400 15px/1.52 'Source Serif 4', serif; color: var(--bk-ink-2); text-align: justify; hyphens: none; }
.bp__ph { margin-top: 14px; height: 150px; overflow: hidden; border-radius: 2px; }
.bp__ph img { width: 100%; height: 100%; object-fit: cover; }
.bp__spec { display: flex; align-items: center; gap: 14px; margin: 14px 4px 0; font: 400 13px/1.35 var(--sans); color: var(--soft); }
.bp__sw { display: flex; flex: none; }
.bp__sw i { width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 2px var(--paper); margin-right: -6px; }
.bp__spec b { font-weight: 600; color: var(--ink); }

/* ═════════ 07 · THE DESK (a phone-shaped Desk, not a squeezed dashboard) ═════════ */
.dk__st { --st-h: 550svh; }   /* five beats: the first four keep their 360 of scroll, the report has the last 90 */
.dq { position: relative; flex: 1; min-height: 0; border-radius: 26px; overflow: hidden; background: #111116; color: var(--on-ink); box-shadow: 0 30px 60px -30px rgba(15, 15, 18, .6); font-size: 14px; }
.dq__top { position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 16px; border-bottom: 1px solid rgba(255, 255, 255, .07); background: #111116; }
/* rows that rise under the bar fade into it, never a hard cut */
.dq__top::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% + 1px); height: 16px; pointer-events: none; background: linear-gradient(#111116, rgba(17, 17, 22, 0)); }
.dq__top b { font: 600 13.5px/1 var(--sans); }
.dq__top small { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 500 11.5px/1 var(--sans); color: rgba(237, 234, 227, .55); }
.dq__top small i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue-lite); animation: live 2s ease-in-out infinite; }
.dq__logo { width: 22px; height: 22px; border-radius: 6px; background: #A34F36; position: relative; }
.dq__logo::after { content: ""; position: absolute; inset: 4px; background: #FFF7EE; -webkit-mask: var(--alder-logo) center / contain no-repeat; mask: var(--alder-logo) center / contain no-repeat; }
.dq__count { position: absolute; left: 16px; top: 66px; z-index: 2; }
.dq__count b { display: block; font: 400 44px/1 var(--serif); letter-spacing: -.03em; font-variant-numeric: lining-nums tabular-nums; font-variation-settings: 'opsz' 72; }
.dq__count span { font: 500 12.5px/1 var(--sans); color: rgba(237, 234, 227, .55); }
.dq__hours { position: absolute; right: 16px; top: 72px; z-index: 2; display: flex; align-items: flex-end; gap: 2px; height: 38px; width: 46%; clip-path: inset(0 100% 0 0); }
.dq__hours i { flex: 1; border-radius: 1.5px; background: rgba(237, 234, 227, .16); height: calc(var(--h) * 100%); }
.dq__hours i.is-late { background: var(--blue-lite); }
.dq__hlab { position: absolute; right: 16px; top: 116px; z-index: 2; width: 46%; display: flex; justify-content: space-between; font: 500 9.5px/1 var(--sans); color: rgba(237, 234, 227, .4); }
.dq__feed { position: absolute; left: 0; right: 0; top: 140px; bottom: 0; overflow: hidden; }
.dq__feed::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30px; z-index: 1; pointer-events: none; background: linear-gradient(#111116, rgba(17, 17, 22, 0)); }
.dq__q { position: absolute; left: 14px; right: 14px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 11px 13px; border-radius: 12px; background: rgba(255, 255, 255, .055);
  font: 400 14.5px/1.25 var(--serif); letter-spacing: -.005em; font-variation-settings: 'opsz' 18; color: var(--on-ink); will-change: transform, opacity; white-space: nowrap; }
.dq__q span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dq__q small { flex: none; font: 500 11px/1 var(--sans); color: rgba(237, 234, 227, .45); font-variant-numeric: tabular-nums; }
.dq__bars { position: absolute; left: 14px; right: 14px; top: 144px; display: grid; gap: 10px; }
.dq__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: baseline; }
.dq__bar p { font: 500 13.5px/1.1 var(--sans); }
.dq__bar p small { margin-left: 6px; font-weight: 500; font-size: 11.5px; color: rgba(237, 234, 227, .5); }
.dq__bar.is-hot p small { color: var(--blue-lite); }
.dq__bar > b { font: 400 22px/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.02em; }
.dq__bricks { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px; clip-path: inset(-4px 100% -4px -4px); }
.dq__bricks i { width: calc((100% - 29 * 2px) / 30); height: 9px; border-radius: 2px; background: rgba(237, 234, 227, .82); }
.dq__bar.is-hot .dq__bricks i { background: var(--blue-lite); }
.dq__bar.is-gap .dq__bricks i { background: transparent; box-shadow: inset 0 0 0 1.2px var(--blue-lite); }
.dq__bricks i.is-lead { background: #fff !important; box-shadow: 0 0 0 2px var(--blue-lite) !important; }
.dq__gap { position: absolute; left: 12px; right: 12px; bottom: 28px; z-index: 4; padding: 16px 16px 14px; border-radius: 18px; background: #F4F1EA; color: var(--ink); box-shadow: 0 -10px 40px -10px rgba(0, 0, 0, .6); transform: translate3d(0, 115%, 0); }
.dq__gap small { display: flex; align-items: center; gap: 7px; font: 600 11.5px/1 var(--sans); color: var(--blue); }
.dq__gap small i { width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--blue); }
.dq__gap h4 { margin: 10px 0 0; font: 400 21px/1.15 var(--serif); letter-spacing: -.015em; }
.dq__gap p.m { margin-top: 5px; font: 500 12.5px/1.3 var(--sans); color: #6b6760; }
.dq__draft { margin-top: 12px; padding: 11px 12px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px rgba(15, 15, 18, .07); font: 400 14px/1.45 'Source Serif 4', serif; color: #2a2a30; }
.dq__draft b { display: block; margin-bottom: 4px; font: 600 10.5px/1 var(--sans); color: #8F8A82; }
.dq__acts { display: flex; gap: 8px; margin-top: 12px; }
.dq__acts span { flex: 1; height: 42px; display: grid; place-items: center; border-radius: 999px; font: 600 13.5px/1 var(--sans); box-shadow: inset 0 0 0 1px rgba(15, 15, 18, .14); }
.dq__acts span.go { background: var(--blue); color: #fff; box-shadow: none; }
.dq__leads { position: absolute; left: 12px; right: 12px; bottom: 26px; z-index: 5; display: grid; gap: 7px; }
.dq__lab { position: relative; z-index: 0; font: 600 11.5px/1 var(--sans); color: var(--blue-lite); padding: 6px 4px 2px; opacity: 0; }
/* the bars behind the call list fade out under its heading (it comes and goes with the heading's own opacity) */
.dq__lab::before { content: ""; position: absolute; left: -12px; right: -12px; top: -34px; height: 640px; z-index: -1; pointer-events: none; background: linear-gradient(rgba(17, 17, 22, 0), #111116 34px); }
.dq__lead { padding: 10px 14px 11px; border-radius: 16px; background: #1D1D24; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); transform: translate3d(0, 40px, 0); opacity: 0; }
.dq__lead header { display: flex; align-items: center; gap: 10px; }
.dq__av { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #2B2B35; font: 600 12px/1 var(--sans); }
.dq__lead header b { font: 600 14px/1 var(--sans); }
.dq__lead header small { margin-left: auto; padding: 6px 10px; border-radius: 999px; background: rgba(140, 155, 255, .16); color: var(--blue-lite); font: 600 11.5px/1 var(--sans); }
.dq__lead header small.fu { background: rgba(255, 255, 255, .08); color: rgba(237, 234, 227, .7); }
.dq__lead ul { list-style: none; margin: 6px 0 0; padding: 0 0 0 40px; display: grid; gap: 2px; }
.dq__lead li { font: italic 400 14px/1.3 var(--serif); color: rgba(237, 234, 227, .82); }
.dq__lead li::before { content: "“"; } .dq__lead li::after { content: "”"; }
.dq__ex { position: absolute; right: 16px; bottom: 10px; z-index: 1; font: 500 10px/1 var(--sans); color: rgba(237, 234, 227, .32); }
/* 05 · the monthly business intelligence report: a bar of light (.dq__scan) runs down the screen and the report is
   printed behind it, clipped from the foot up (desk.js). It wears the made-up agency's kit, so it reads as their
   page. The phone shows the finding and its houses, then two figures; a small screen sheds the figures first
   (.is-tight), then the houses' caption (.is-tiny). The prefix is .bir: ring.css, loaded here too, owns .rp. */
.dq__rep { position: absolute; inset: 0; z-index: 8; visibility: hidden; clip-path: inset(0 0 100% 0); }
.dq__scan { position: absolute; z-index: 9; left: 0; right: 0; top: -1px; height: 2px; opacity: 0; pointer-events: none; background: #fff; will-change: transform, opacity;
  box-shadow: 0 0 0 .5px rgba(157, 176, 255, .9), 0 0 12px 2px rgba(125, 150, 255, .85), 0 5px 34px 8px rgba(61, 90, 254, .42); }
.dq__scan::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 100px; background: linear-gradient(rgba(157, 176, 255, .2), rgba(157, 176, 255, 0)); }
.bir { position: absolute; inset: 0; display: flex; flex-direction: column; background: #FFFDF7; color: #352A23; font-family: 'Source Serif 4', Georgia, serif; font-feature-settings: 'lnum' 1;
  --bir-acc: #A34F36; --bir-soft: #675D56; --bir-mute: #8E867F; --bir-tint: #F5F0E6; }
.bir__band { flex: none; display: flex; align-items: center; gap: 9px; height: 54px; padding: 0 16px; background: #A34F36; color: #FFF7EE; }
.bir__mark { flex: none; width: 17px; height: 21px; background: currentColor; -webkit-mask: var(--alder-logo) center / contain no-repeat; mask: var(--alder-logo) center / contain no-repeat; }
.bir__band b { font: 420 12px/1 'Source Serif 4', Georgia, serif; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.bir__band p { margin-left: auto; max-width: 128px; text-align: right; font: 600 10.5px/1.15 var(--sans); }
.bir__band em { display: block; margin-top: 3px; font: italic 400 11.5px/1 'Source Serif 4', Georgia, serif; opacity: .86; }
.bir__body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; padding: 16px 16px 10px; }
.bir__k { display: flex; align-items: center; gap: 7px; font: 600 11.5px/1 var(--sans); color: var(--bir-acc); }
.bir__k i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.bir__h { margin: 10px 0 0; font: 640 28px/1 'Source Serif 4', Georgia, serif; letter-spacing: -.024em; font-variation-settings: 'opsz' 40; text-wrap: balance; }
.bir__dek { margin-top: 9px; font: 400 14px/1.42 'Source Serif 4', Georgia, serif; color: var(--bir-soft); text-wrap: pretty; }
.bir__one { margin: 0; }
.bir__houses { display: flex; gap: 9px; }
.bir__houses span { flex: 1; height: 62px; border-radius: 12px; background: var(--bir-tint); color: #CEC8C0; opacity: 0; will-change: transform, opacity; }
.bir__houses span.is-hot { background: var(--bir-acc); color: #FFFDF7; }
.bir__houses svg { display: block; height: 100%; margin: 0 auto; }
.bir__houses .h { fill: currentColor; stroke: currentColor; stroke-width: 5; stroke-linejoin: round; }
.bir__houses .d { fill: var(--bir-tint); } .bir__houses .is-hot .d { fill: var(--bir-acc); }
.bir__one figcaption { margin-top: 9px; font: 500 11.5px/1.4 var(--sans); color: var(--bir-soft); text-wrap: pretty; }
.bir__one figcaption b { font-weight: 600; color: var(--bir-acc); }
.bir__figs { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 1px solid #352A23; }
.bir__figs > div { display: flex; align-items: center; gap: 9px; padding: 11px 0 2px; }
.bir__figs > div + div { padding-left: 14px; }
.bir__figs dt { font: 600 29px/1 'Source Serif 4', Georgia, serif; letter-spacing: -.03em; font-feature-settings: 'lnum' 1, 'tnum' 1; font-variation-settings: 'opsz' 48; }
.bir__figs dd { margin: 0; font: 500 10.5px/1.2 var(--sans); color: var(--bir-soft); }
.bir__figs dd em { display: block; margin-top: 3px; font-style: normal; color: var(--bir-mute); }
.bir__figs > div:first-child dd em { font-weight: 600; color: var(--bir-acc); }
.bir__ex { flex: none; padding: 0 16px 10px; text-align: right; font: 500 10px/1 var(--sans); color: var(--bir-mute); }
.dq.is-tight .bir__figs { display: none; }
.dq.is-tiny .bir__one figcaption { display: none; }
.dq.is-tiny .bir__h { font-size: 25px; } .dq.is-tiny .bir__dek { font-size: 13px; }

/* ═════════ 08 · IN USE ═════════ */
.pr__logos { overflow: hidden; margin: 6px 0 22px; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.pr__track { display: flex; width: max-content; animation: marquee 34s linear infinite; }
.pr__track figure { flex: none; width: 150px; height: 92px; margin: 0 10px 0 0; display: grid; place-items: center; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(15, 15, 18, .05); }
.pr__track img { max-width: 104px; max-height: 42px; object-fit: contain; filter: grayscale(1) contrast(1.1); opacity: .85; }
@keyframes marquee { to { transform: translateX(-50%); } }
.goask { display: block; margin: 0 var(--g); padding: 22px 20px 20px; border-radius: 24px; background: var(--ink); color: var(--on-ink); text-decoration: none; box-shadow: 0 30px 50px -30px rgba(15, 15, 18, .7); transition: transform .3s var(--out); }
.goask:active { transform: scale(.985); }
.goask__k { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1 var(--sans); color: rgba(237, 234, 227, .6); }
.goask__k i { width: 7px; height: 7px; border-radius: 50%; background: #3DDC84; box-shadow: 0 0 0 4px rgba(61, 220, 132, .16); animation: live 2s ease-in-out infinite; }
.goask__t { display: block; margin-top: 14px; font: 400 34px/1.02 var(--serif); letter-spacing: -.03em; font-variation-settings: 'opsz' 72; }
.goask__t em { font-style: italic; font-weight: 300; color: rgba(237, 234, 227, .55); }
.goask__s { display: block; margin-top: 12px; font: 400 15px/1.5 var(--sans); color: rgba(237, 234, 227, .72); }
.goask__u { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; height: 50px; padding: 0 18px; border-radius: 999px; background: rgba(255, 255, 255, .1); font: 600 15px/1 var(--sans); }
.goask__u svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ═════════ 09 · PRICING ═════════ */
.pc__card { margin: 0 var(--g); padding: 24px 20px 20px; border-radius: 26px; background: var(--paper-3); color: var(--ink); box-shadow: 0 40px 70px -36px rgba(0, 0, 0, .9); }
.pc__fig { display: flex; align-items: flex-start; gap: 6px; font-variant-numeric: lining-nums tabular-nums; }
.pc__cur { margin-top: 12px; font: 400 22px/1 var(--serif); color: #8F8A82; }
.pc__v { font: 400 96px/.84 var(--serif); letter-spacing: -.055em; font-variation-settings: 'opsz' 72; font-feature-settings: 'lnum'; }
.pc__per { align-self: flex-end; margin: 0 0 4px 4px; font: 500 15px/1 var(--sans); color: #6b6760; }
.pc__terms { margin: 22px 0 0; display: grid; }
.pc__terms div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(15, 15, 18, .1); font: 400 15px/1.3 var(--sans); }
.pc__terms dt { color: #6b6760; } .pc__terms dd { margin: 0; font-weight: 600; }
.pc__lab { margin: 22px 0 8px; font: 500 13px/1 var(--sans); color: #8F8A82; }
.pc__list { list-style: none; margin: 0; padding: 0; display: grid; }
.pc__list li { position: relative; padding: 10px 0 10px 28px; border-top: 1px solid rgba(15, 15, 18, .08); font: 400 16px/1.35 var(--serif); letter-spacing: -.005em; font-variation-settings: 'opsz' 18; }
.pc__list li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 12px; height: 7px; border: solid var(--blue); border-width: 0 0 1.8px 1.8px; transform: rotate(-45deg); }
.pc__track { list-style: none; margin: 0 0 22px; padding: 0; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); }
.pc__track::before { content: ""; position: absolute; top: 6px; left: 12.5%; right: 12.5%; height: 1.5px; background: rgba(15, 15, 18, .14); }
.pc__track li { position: relative; display: grid; justify-items: center; gap: 10px; text-align: center; font: 500 12px/1.25 var(--sans); color: #6b6760; }
.pc__track i { width: 13px; height: 13px; border-radius: 50%; background: var(--paper-3); box-shadow: inset 0 0 0 1.5px #8F8A82; }
.pc__track .is-live { color: var(--ink); font-weight: 600; } .pc__track .is-live i { background: var(--blue); box-shadow: 0 0 0 4px rgba(61, 90, 254, .18); }
/* the second way in, straight to paying: hidden until pay.js holds a payment link */
.pc__buy { display: none; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; padding: 14px 0 4px; font: 500 15px/1 var(--sans); letter-spacing: -.01em; color: var(--ink); text-decoration: underline; text-decoration-color: rgba(15, 15, 18, .3); text-underline-offset: 5px; }
.pc__buy svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.can-buy .pc__buy { display: flex; }
/* a line under the main button: the Brief is free to see */
.pc__note { margin: 12px 0 0; text-align: center; text-wrap: balance; font: 400 13px/1.4 var(--sans); color: #6b6760; }

/* ═════════ 10 · FOUNDERS ═════════ */
.fd__pager { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--g) 6px; scroll-padding: 0 var(--g); overscroll-behavior-x: contain; }
.fd__pager::-webkit-scrollbar { display: none; }
.fd__p { flex: 0 0 86%; scroll-snap-align: start; }
.fd__ph { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; }
.fd__ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.fd__ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(10, 10, 12, .72)); }
.fd__chip { position: absolute; z-index: 1; right: 12px; top: 12px; padding: 7px 11px; border-radius: 999px; background: rgba(15, 15, 18, .45); color: #fff; font: 500 11.5px/1 var(--sans); }
.fd__ph figcaption { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 16px; color: #fff; }
.fd__ph figcaption span { display: block; font: 500 12.5px/1 var(--sans); opacity: .8; }
.fd__ph figcaption b { display: block; margin-top: 7px; font: 400 30px/1 var(--serif); letter-spacing: -.025em; font-variation-settings: 'opsz' 72; }
.fd__b { margin: 16px 4px 0; font: 400 15.5px/1.5 var(--sans); color: var(--soft); }
.fd__in { display: inline-flex; align-items: center; gap: 6px; margin: 12px 4px 0; padding-bottom: 2px; border-bottom: 1px solid currentColor; font: 600 14px/1.2 var(--sans); text-decoration: none; }
.fd__in svg { width: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.fd__dots { display: flex; justify-content: center; gap: 7px; margin-top: 18px; }

/* ═════════ 11 · YOUR BRIEF ═════════ */
.cl { padding-bottom: calc(96px + var(--sab)); --cl-band: #3D5AFE; }
.cl__glow { position: absolute; left: 50%; top: 32%; width: 150vw; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%); z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--cl-band) 30%, transparent), transparent); transition: background .8s; }
.cl-page { margin: 0 var(--g); border-radius: 20px; overflow: hidden; background: #F8F5EF; color: #2B2A28; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
.cl-band { display: flex; align-items: center; gap: 12px; height: 70px; padding: 0 16px; background: var(--cl-band); color: #fff; transition: background .6s var(--out); }
.cl-mark { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); font: 400 19px/1 'Source Serif 4', serif; }
.cl-np { min-width: 0; }
.cl-title { font: 500 16px/1 'Source Serif 4', serif; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-title.is-roll, .cl-asks span.is-roll { animation: roll .5s var(--out); }
.cl-sub { display: flex; align-items: center; margin-top: 7px; font: 500 9px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; opacity: .8; white-space: nowrap; }
.cl-live { display: inline-flex; align-items: center; gap: 6px; } .cl-live i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: live 2s infinite; }
.cl-bar { width: 1px; height: 10px; margin: 0 10px; background: currentColor; opacity: .5; }
.cl-body { padding: 16px 16px 8px; }
.cl-k { display: flex; align-items: center; gap: 7px; font: 600 9.5px/1 'JetBrains Mono', monospace; letter-spacing: .2em; text-transform: uppercase; color: var(--cl-band); }
.cl-k i { width: 6px; height: 6px; background: currentColor; }
.cl-h { margin-top: 10px; font: 600 23px/1.1 'Source Serif 4', serif; letter-spacing: -.02em; }
.cl-h em { display: block; font-weight: 400; color: var(--cl-band); filter: brightness(.8); }
.cl-asks { margin-top: 12px; }
.cl-asks__h { font: 600 9px/1 'JetBrains Mono', monospace; letter-spacing: .24em; text-transform: uppercase; color: #8a867f; padding-bottom: 4px; }
.cl-asks p:not(.cl-asks__h) { display: flex; justify-content: space-between; padding: 10px 0 9px; border-top: 1px solid rgba(43, 42, 40, .09); font: 600 15px/1.2 'Source Serif 4', serif; }
.cl-asks b { font: 400 16px/1 var(--sans); color: var(--cl-band); }
.cl-form { margin: 14px var(--g) 0; padding: 18px 16px 16px; border-radius: 22px; background: #FFFDF9; color: var(--ink); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); display: grid; gap: 4px; }
.fld { display: block; padding: 10px 2px 8px; border-bottom: 1px solid rgba(15, 15, 18, .12); }
.fld span { display: block; font: 500 12.5px/1 var(--sans); color: #6b6760; }
.fld input, .fld select { display: block; width: 100%; margin-top: 8px; padding: 4px 0 6px; border: 0; border-radius: 0; background: none; outline: none; font: 400 19px/1.2 var(--serif); letter-spacing: -.01em; color: var(--ink); -webkit-appearance: none; appearance: none; }
.fld input::placeholder { color: rgba(15, 15, 18, .35); font-style: italic; }
.fld select.is-empty { color: rgba(15, 15, 18, .38); font-style: italic; }
.fld--sel { position: relative; }
.fld--sel::after { content: ""; position: absolute; right: 6px; bottom: 20px; width: 8px; height: 8px; border: solid #6b6760; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); pointer-events: none; }
.fld:focus-within { border-color: var(--blue); }
.fld:focus-within span { color: var(--blue); }
.fld.is-bad { border-color: #D93A3A; } .fld.is-bad span { color: #D93A3A; }
.cl-form .btn { margin-top: 14px; }
.card-form__msg { min-height: 0; font: 400 14px/1.45 var(--sans); color: #6b6760; text-align: center; }
.card-form__msg:not(:empty) { margin-top: 10px; }
.card-form__msg.is-ok { color: #1f7a45; } .card-form__msg.is-err { color: #C22F2F; }
.card-form__msg a { color: inherit; }
.cl-form.is-sent .fld, .cl-form.is-sent .btn { display: none; }
.cl__alt { margin: 18px var(--g) 0; font: 400 14px/1.5 var(--sans); color: var(--mute); text-align: center; }
.cl__alt a { color: var(--on-ink); }

/* ═════════ footer ═════════ */
.ft { position: relative; padding: 40px var(--g) calc(var(--sab) + 110px); background: var(--ink); color: var(--on-ink); overflow: hidden; border-top: 1px solid rgba(237, 234, 227, .08); }
.ft__brand { display: flex; align-items: center; gap: 12px; }
.ft__brand svg { width: 34px; fill: var(--blue); }
.ft__brand p { font: 650 18px/1 var(--sans); letter-spacing: -.03em; }
.ft__brand small { display: block; margin-top: 5px; font: 500 12.5px/1 var(--sans); letter-spacing: 0; color: rgba(237, 234, 227, .5); }
.ft__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-top: 30px; }
.ft__nav a { font: 500 15px/1.2 var(--sans); color: rgba(237, 234, 227, .78); text-decoration: none; }
.ft__base { margin-top: 30px; font: 400 12.5px/1.6 var(--sans); color: rgba(237, 234, 227, .42); }
.ft__big { margin: 26px 0 0 -4px; font: 400 29vw/.8 var(--serif); letter-spacing: -.06em; color: rgba(237, 234, 227, .08); font-variation-settings: 'opsz' 72; white-space: nowrap; }
.ft__big span { color: var(--blue); opacity: .8; }

/* small phones: the ring and the story scenes take less room */
@media (max-height: 700px) {
  .st__cap { height: 62px; font-size: 14.5px; }
  .st__cap b { font-size: 18px; }
}
}
/* wider than a phone (tablets held upright, a narrow desktop window with ?mobile): keep a phone column */
@media (min-width: 620px) {
  body { background: #08080A; }
  main, .ft { max-width: 520px; margin: 0 auto; }
  .dock { left: 50%; right: auto; width: 500px; margin-left: -250px; }
  .sheet { left: 50%; right: auto; width: 520px; margin-left: -260px; }
  .idx { left: 50%; right: auto; width: 500px; margin-left: -250px; }
  .st__pin, .mo__pin, #top.rh .rh__pin { left: calc(50% - 260px); right: auto; width: 520px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .pr__track, .wl__track { animation: none; }
}