/* ═════════════════════════════════════════════════════════════════════════════════════════════
   ringlioai.com — the Briefs flagship (29–30 Sep 2026)
   v3 (30 Sep, after the Awwwards nominee review): a quiet, exact frame so the product carries the
   colour. Two grounds (paper · ink) with the golden courtyard as bookends. Display: Source Serif 4
   (fonts, 30 Sep: no template defaults) Display: Newsreader (Production Type) at its 72 pt optical
   size, regular weight, with a light italic. Text and labels: Mona Sans (GitHub), sentence case, on
   fine rules with section numbers. The product keeps its own Source Serif, so frame and product
   never blur. Ringlio blue means one thing: the next thing to do (the
   primary button, a live signal, a selection). Paper and mono belong to THE PRODUCT (brief.css).
   ═════════════════════════════════════════════════════════════════════════════════════════════ */
:root {
  --ink: #0F0F12; --ink-2: #26262C; --ink-3: #55555E; --ink-4: #86868F;
  --paper: #F1EEE8; --paper-2: #E7E3DB; --paper-3: #FAF8F4; --on-ink: #EDEAE3;
  --blue: #3D5AFE; --blue-2: #2C46E6; --blue-deep: #1B2BA6; --blue-lite: #7C8DFF; --blue-mist: #DDE3FF;
  --yellow: #FFE500; --cyan: #00AEEF; --magenta: #EC008C;
  --night: #121829; --stone: #E8E2D6;
  --rule: rgba(15, 15, 18, .14); --rule-ink: rgba(237, 234, 227, .14);
  --gold: #D5B27E; --gold-deep: #8A6A3E;
  --serif-d: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --sans: 'Mona Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --serif-t: 'Newsreader', Georgia, serif;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --apple: cubic-bezier(.32, .72, 0, 1);
  --gutter: clamp(18px, 4.2vw, 64px);
  --maxw: 1380px;
  --hd-h: 76px;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .1  0 0 0 0 .08  0 0 0 0 .06  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --grain-lite: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='9' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.55; font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.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: 100; padding: 10px 16px; border-radius: 999px; background: var(--blue); color: #fff; font-weight: 600; text-decoration: none; transition: top .2s; }
.skip:focus { top: 12px; }
.wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; position: relative; }

/* ─── type ─── */
.kick { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; font: 500 13.5px/1.2 var(--sans); letter-spacing: -.003em; text-transform: none; color: var(--kick, currentColor); }
.kick--dot::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--kick-dot, var(--blue)); }
.kick span { opacity: .45; }
/* the section marker: a fine rule, the section's number and name, and a note on the right */
.mk { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 16px; margin: 0 0 clamp(52px, 7vw, 108px); padding-top: 14px;
  font: 500 13px/1.3 var(--sans); letter-spacing: -.003em; font-variant-numeric: tabular-nums; }
.mk::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: currentColor; opacity: .22; transform-origin: 0 50%; }
.js .mk::before { transform: scaleX(0); transition: transform 1.4s var(--ease-out); }
.js .mk.is-in::before { transform: none; }
.mk__t { display: flex; gap: clamp(28px, 8.4vw, 128px); }
.mk__n { min-width: 2.2em; opacity: .5; }
.mk__r { opacity: .5; text-align: right; }
.h2 { margin: 0; font-family: var(--serif-d); font-weight: 400; font-size: clamp(42px, 5.6vw, 96px); line-height: 1.02; letter-spacing: -.028em; text-wrap: balance; font-variation-settings: 'opsz' 72; }
.h2 em { font-style: italic; font-weight: 300; color: var(--mute); padding-right: .04em; letter-spacing: -.02em; }
.sh { margin-bottom: clamp(48px, 6.5vw, 96px); }
.sh--split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 40px 64px; align-items: end; }
.sh__dek { margin-top: 30px; max-width: 32em; font-size: clamp(16.5px, 1.25vw, 19px); line-height: 1.55; color: var(--dek, inherit); opacity: .78; text-wrap: pretty; }
.sh__side.sh__dek, .sh__side .sh__dek { margin-top: 0; }
.sh__note { margin-top: 20px; max-width: 34em; padding-top: 14px; border-top: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 22%, transparent); font-size: 14px; line-height: 1.5; opacity: .62; }

/* ─── grounds: paper and ink, nothing else ─── */
.sec { position: relative; padding: calc(var(--hd-h) + clamp(14px, 2vw, 28px)) 0 clamp(110px, 12vw, 180px); isolation: isolate; overflow-x: clip; }
.sec::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--grain); opacity: .5; }
.sec--ink { background: var(--ink); color: var(--on-ink); --acc: var(--blue-lite); --dek: var(--on-ink); --mute: rgba(237, 234, 227, .46); --rule: var(--rule-ink); }
.sec--ink::before { background-image: var(--grain-lite); opacity: 1; }
.sec--paper { background: var(--paper); color: var(--ink); --acc: var(--blue); --mute: #8F8A82; }

/* ─── headlines rise into place, word by word (quiet; no colour flash) ─── */
.reg .rw { display: inline-block; }
.js .reg[data-reg]:not(.is-in) .rw { opacity: 0; transform: translateY(.42em); }
.reg.is-in .rw { animation: rw-in 1.1s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes rw-in { from { opacity: 0; transform: translateY(.42em); } to { opacity: 1; transform: none; } }

/* generic reveal */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out); transition-delay: var(--rd, 0ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ─── buttons: quiet pills; the arrow is the only ornament ─── */
.btn { --bg: var(--ink); --fg: #fff; position: relative; display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 20px 0 22px; border: 0; border-radius: 999px; background: var(--bg); color: var(--fg);
  font: 500 15px/1 var(--sans); letter-spacing: -.01em; text-decoration: none; white-space: nowrap; cursor: pointer; isolation: isolate; overflow: hidden;
  transition: background-color .3s var(--ease-out), box-shadow .3s var(--ease-out), color .3s; }
.btn:hover { background: color-mix(in srgb, var(--bg) 88%, #000); }
.btn:active { transform: scale(.985); }
.btn__ic { position: relative; display: block; width: 16px; height: 16px; overflow: hidden; }
.btn__ic svg { position: absolute; inset: 0; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .55s var(--ease-out); }
/* the arrow leaves right and a twin arrives from the left */
.btn__ic::after { content: ""; position: absolute; inset: 0; background: currentColor; transform: translateX(-120%); transition: transform .55s var(--ease-out);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 16px no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 16px no-repeat; }
.btn:hover .btn__ic svg { transform: translateX(120%); }
.btn:hover .btn__ic::after { transform: none; }
.btn--blue { --bg: var(--blue); }
.btn--blue:hover { background: var(--blue-2); }
.btn--paper { --bg: var(--on-ink); --fg: var(--ink); }
.btn--line { --bg: transparent; --fg: currentColor; padding: 0 22px; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 38%, transparent); }
.btn--line:hover { background: color-mix(in srgb, currentColor 7%, transparent); box-shadow: inset 0 0 0 1px currentColor; }
.btn--lg { height: 56px; font-size: 16px; padding: 0 24px 0 26px; }
.btn--full { width: 100%; justify-content: space-between; }
/* an underlined text link with an arrow */
.tl { display: inline-flex; align-items: center; gap: 10px; font: 500 15px/1 var(--sans); letter-spacing: -.01em; text-decoration: none; padding: 6px 0; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .5s var(--ease-out); }
.tl:hover { background-size: 0 1px; background-position: 100% 100%; }
.tl svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ═════════ HEADER: a floating glass bar ═════════ */
.hd { --hd-fg: var(--ink); --hd-glass: rgba(250, 248, 244, .72); --hd-line: rgba(15, 15, 18, .08);
  position: fixed; z-index: 60; top: 12px; left: 50%; width: min(100% - 24px, 1240px); height: 58px; transform: translateX(-50%);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 0 9px 0 18px; border-radius: 18px;
  color: var(--hd-fg); background: var(--hd-glass); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 0 1px var(--hd-line), 0 16px 34px -22px rgba(20, 14, 8, .4); transition: color .35s var(--ease-out), background .35s, box-shadow .35s; }
html[data-head="dark"] .hd { --hd-fg: var(--on-ink); --hd-glass: rgba(26, 26, 31, .66); --hd-line: rgba(255, 255, 255, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px var(--hd-line), 0 16px 34px -22px rgba(0, 0, 0, .6); }
.hd__logo { justify-self: start; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.hd__mark { width: auto; height: 22px; fill: var(--blue); transition: fill .3s; }
.hd__word { font: 600 19px/1 var(--sans); letter-spacing: -.035em; }
.hd__nav { display: flex; gap: clamp(18px, 2.2vw, 34px); transition: opacity .45s var(--ease-out), transform .6s var(--ease-out); }
.hd__nav a { position: relative; padding: 8px 0; font: 500 14px/1 var(--sans); letter-spacing: -.01em; text-decoration: none; opacity: .62; transition: opacity .25s; }
.hd__nav a::after { content: ""; position: absolute; left: 50%; bottom: -2px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; transform: scale(0); transition: transform .45s var(--ease-out); }
.hd__nav a:hover { opacity: 1; }
.hd__nav a.is-on { opacity: 1; }
.hd__nav a.is-on::after { transform: none; }
.hd__end { justify-self: end; display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); }
.hd__clock { font: 500 13px/1 var(--sans); letter-spacing: -.003em; font-variant-numeric: tabular-nums; white-space: nowrap; opacity: .62; transition: opacity .45s var(--ease-out), transform .6s var(--ease-out); }
.hd__clock i { display: inline-block; width: 6px; height: 6px; margin: 0 8px 1px 0; border-radius: 50%; background: var(--blue); animation: bk-live 2.4s ease-in-out infinite; }
.hd__cta { height: 40px; padding: 0 16px 0 18px; font-size: 14px; border-radius: 12px; }
html[data-head="dark"] .hd__cta { --bg: var(--on-ink); --fg: var(--ink); }
.hd__burger { display: none; justify-self: end; width: 44px; height: 44px; border: 0; border-radius: 12px; background: none; box-shadow: inset 0 0 0 1px var(--hd-line); cursor: pointer; position: relative; }
.hd__burger i { position: absolute; left: 14px; right: 14px; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform .45s var(--ease-out), top .3s; }
.hd__burger i:first-child { top: 18px; } .hd__burger i:last-child { top: 25px; }
.hd__burger[aria-expanded="true"] i:first-child { top: 21.5px; transform: rotate(45deg); }
.hd__burger[aria-expanded="true"] i:last-child { top: 21.5px; transform: rotate(-45deg); }
.hd__bar { position: absolute; left: 18px; right: 18px; bottom: 0; height: 1px; overflow: hidden; pointer-events: none; opacity: .5; }
.hd__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: currentColor; opacity: .45; transform-origin: 0 50%; transform: scaleX(0); }
.menu { position: fixed; inset: 0; z-index: 55; display: grid; align-items: end; padding: 110px var(--gutter) calc(40px + env(safe-area-inset-bottom, 0px)); background: var(--ink); color: var(--on-ink); }
.menu[hidden] { display: none; }
.menu nav { display: flex; flex-direction: column; border-top: 1px solid var(--rule-ink); }
.menu a { display: flex; align-items: baseline; gap: 18px; padding: 12px 0 10px; border-bottom: 1px solid var(--rule-ink); font: 400 clamp(34px, 9vw, 52px)/1.06 var(--serif-d); letter-spacing: -.025em; text-decoration: none; font-variation-settings: 'opsz' 72;
  opacity: 0; transform: translateY(18px); animation: menu-in .6s var(--ease-out) forwards; }
.menu a small { min-width: 2em; font: 500 12.5px/1 var(--sans); letter-spacing: 0; opacity: .5; font-variant-numeric: tabular-nums; }
.menu a:nth-child(2) { animation-delay: .04s; } .menu a:nth-child(3) { animation-delay: .08s; } .menu a:nth-child(4) { animation-delay: .12s; } .menu a:nth-child(5) { animation-delay: .16s; } .menu a:nth-child(6) { animation-delay: .2s; }
.menu a:last-child { font-style: italic; animation-delay: .24s; }
@keyframes menu-in { to { opacity: 1; transform: none; } }
@keyframes bk-live { 50% { opacity: .35; } }

/* ═════════ 01 · HERO: Ringlio's own Brief — it sets itself, then answers one question ═════════ */
.fp { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; padding: calc(var(--hd-h) + 10px) var(--gutter) 20px; background: var(--paper); isolation: isolate; }
.fp::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 40% at 50% 30%, rgba(255, 255, 255, .7), transparent 70%), radial-gradient(40% 36% at 90% 90%, rgba(61, 90, 254, .06), transparent 70%); }
.fp__sheet { position: relative; width: min(100%, 1320px); border-radius: 18px; background: #FCFBF8; color: var(--ink);
  box-shadow: 0 0 0 1px rgba(15, 15, 18, .06), 0 70px 110px -70px rgba(40, 28, 14, .45), 0 18px 40px -30px rgba(40, 28, 14, .25); }
.fp__band { position: relative; display: flex; align-items: center; gap: 16px; height: 78px; padding: 0 30px; border-radius: 18px 18px 0 0; background: #15161B; color: #EDEAE3; }
.fp__mark svg { display: block; height: 26px; width: auto; fill: var(--blue); }
.fp__title { margin: 0; font: 400 27px/1 var(--serif-d); letter-spacing: .2em; text-transform: uppercase; font-variation-settings: 'opsz' 36; }
.fp__sub { margin: 7px 0 0; font: 500 11.5px/1 var(--sans); letter-spacing: .02em; color: rgba(237, 234, 227, .55); }
.fp__right { margin-left: auto; display: flex; align-items: center; gap: 12px; font: 500 12.5px/1 var(--sans); color: rgba(237, 234, 227, .7); }
.fp__live { display: inline-flex; align-items: center; gap: 7px; color: #EDEAE3; }
.fp__live i { width: 6px; height: 6px; border-radius: 50%; background: #1DB954; box-shadow: 0 0 0 3px rgba(29, 185, 84, .2); animation: bk-live 2s ease-in-out infinite; }
.fp__bar { width: 1px; height: 13px; background: currentColor; opacity: .4; }
.fp__meta { display: flex; justify-content: space-between; gap: 16px; margin: 0 30px; padding: 13px 0 11px; border-bottom: 1px solid rgba(15, 15, 18, .1); font: 500 12px/1.2 var(--sans); color: var(--ink-4); }
.fp__meta b { font-weight: 600; color: var(--blue); }
.fp__meta b i { display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 2px; border-radius: 50%; background: currentColor; }
.fp__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 0 44px; padding: 24px 30px 30px; align-items: start; }
.fp__lead, .fp__slot { position: relative; padding-top: 14px; }
.fp__rule, .fpc__rule { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink); transform-origin: 0 50%; }
.fp__kick, .fp__pk, .fpc__kick { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; padding-bottom: 9px; border-bottom: 1px solid rgba(15, 15, 18, .1); font: 600 12px/1 var(--sans); color: var(--ink-4); }
.fp__kick > span:first-child, .fp__pk > span:first-child, .fpc__kick > span:first-child { display: inline-flex; align-items: center; gap: 8px; color: var(--blue); }
.fp__kick i, .fp__pk i, .fpc__kick i { width: 7px; height: 7px; background: currentColor; }
.fp__h { margin: 0 0 16px; font: 400 clamp(48px, 5.3vw, 88px)/.98 var(--serif-d); letter-spacing: -.036em; font-variation-settings: 'opsz' 72; text-wrap: balance; }
.fp__h em { font-style: italic; font-weight: 300; color: #77726A; }
.fp__dek, .fpc__dek { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px dotted rgba(15, 15, 18, .2); font: italic 400 19px/1.35 var(--serif-d); color: var(--ink-3); }
.fp__body p, .fpc__body p { margin: 0; font: 400 clamp(16.5px, 1.2vw, 18px)/1.56 var(--serif-d); color: var(--ink-2); text-wrap: pretty; font-variation-settings: 'opsz' 16; }
.fp__body p + p { margin-top: .7em; }
.fp__body p:first-child::first-letter { float: left; margin: .06em .08em 0 0; font: 400 3.35em/.8 var(--serif-d); color: var(--blue); font-variation-settings: 'opsz' 72; }
.fp__by, .fpc__by { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; padding-top: 10px; border-top: 1px solid rgba(15, 15, 18, .08); font: italic 400 13.5px/1 var(--serif-d); color: var(--ink-3); }
.fp__by strong, .fpc__by strong { font-style: normal; font-weight: 600; color: var(--ink); }
.fp__src { font: 500 11px/1 var(--sans); font-style: normal; padding: 5px 9px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(15, 15, 18, .14); color: var(--ink-3); }
/* the plate (the question) */
.fp__slot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(15, 15, 18, .12); }
.fp__plate { position: relative; margin: 6px -4px 0; padding: 16px 20px 12px; border-radius: 8px; background: #fff;
  box-shadow: 0 34px 56px -26px rgba(26, 18, 12, .38), 0 4px 12px rgba(26, 18, 12, .08), 0 0 0 1px rgba(26, 18, 12, .05); transition: box-shadow .4s var(--ease-out); }
.fp__plate:focus-within { box-shadow: 0 34px 56px -26px rgba(26, 18, 12, .38), 0 0 0 1.5px rgba(61, 90, 254, .45), 0 0 0 6px rgba(61, 90, 254, .07); }
.fp__pk { margin-bottom: 4px; }
.fp__draft { display: flex; align-items: center; gap: 12px; padding: 10px 0 12px; }
.fp__in { flex: 1; min-width: 0; height: 42px; padding: 0; border: 0; background: none; font: 400 23px/1 var(--serif-d); letter-spacing: -.01em; color: var(--ink); }
.fp__in::placeholder { color: #A8A298; font-style: italic; }
.fp__in:focus { outline: none; }
.fp__go { flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; cursor: pointer; transition: background .25s, transform .3s var(--ease-out); }
.fp__go:hover { background: var(--blue); }
.fp__go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fp__ah { display: flex; align-items: center; gap: 10px; margin: 0 0 2px; font: 600 11px/1 var(--sans); color: var(--ink-4); }
.fp__ah::after { content: ""; flex: 1; height: 1px; background: rgba(15, 15, 18, .1); }
.fp__asks button { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: baseline; width: 100%; padding: 11px 0 10px; border: 0; border-bottom: 1px solid rgba(15, 15, 18, .07); background: none; text-align: left; cursor: pointer;
  font: 400 17px/1.25 var(--serif-d); color: var(--ink); transition: color .25s; }
.fp__asks button:last-child { border-bottom: 0; }
.fp__asks button i { font-style: normal; color: var(--blue); transition: transform .4s var(--ease-out); }
.fp__asks button:hover { color: var(--blue); } .fp__asks button:hover i { transform: translateX(4px); }
.fp__foot { width: min(100%, 1320px); margin-top: 16px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; font-size: 13px; color: var(--ink-4); }
.fp__foot .tl { font-size: 13px; color: var(--ink); padding: 2px 0; }
/* the answer column */
.fp__col { display: none; position: relative; }
.fp__col.is-on { display: block; }
.fpc__reel { height: 1.2em; margin: 0 0 6px; font: italic 400 20px/1.2 var(--serif-d); color: var(--ink-4); }
.fpc__h { margin: 0 0 12px; font: 400 clamp(30px, 2.6vw, 40px)/1.04 var(--serif-d); letter-spacing: -.026em; font-variation-settings: 'opsz' 60; text-wrap: balance; }
.fpc__h em { font-style: italic; font-weight: 300; color: #77726A; }
.fpc__body p { font-size: 16.5px; }
.fpc__w { margin-top: 16px; }
.fpc__w .wt { height: auto; margin: 0; }
.fpc__w .w-tile { min-height: 0; padding: 16px 18px 12px; }
.fpc__w .wx-q, .fpc__w .wx-top { display: none; }
.fpc__w .wx-fig { margin-top: 0; font-size: 32px; }
.fpc__w .wx-foot { margin-top: 12px; }
.fpc__w .wx-src { margin-top: 10px; }
.fpc__end { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: #F3F1EC; font: 400 15px/1.35 var(--serif-d); color: var(--ink-2); }
.fpc__end p { flex: 1 1 220px; margin: 0; }
.fpc__end .btn { height: 40px; font-size: 14px; }
.fpc__again { border: 0; background: none; padding: 0; font: 500 13px var(--sans); color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* the page sets itself on load (JS only) */
.js .fp__rule, .js .fpc__rule { transform: scaleX(0); transition: transform 1s var(--ease-out); }
.fp.is-set .fp__rule, .fp__col.is-set .fpc__rule { transform: none; }
.js .fp__kick, .js .fp__dek, .js .fp__by, .js .fp__meta, .js .fp__slot::before { opacity: 0; transition: opacity .8s var(--ease-out); }
.fp.is-set .fp__kick, .fp.is-set .fp__meta { opacity: 1; transition-delay: .15s; }
.fp.is-set .fp__dek { opacity: 1; transition-delay: .95s; }
.fp.is-body .fp__by, .fp.is-body .fp__slot::before { opacity: 1; }
.js .fp__h .fpw { display: inline-block; opacity: 0; transform: translateY(.34em); }
.fp.is-set .fp__h .fpw { animation: word-in 1.1s var(--ease-out) forwards; animation-delay: calc(.3s + var(--i) * 60ms); }
.js .fp__body .fpw, .js .fpc__body .fpw { opacity: .08; transition: opacity .35s linear; }
.fp__body .fpw.on, .fpc__body .fpw.on { opacity: 1; }
.js .fp__plate { opacity: 0; transform: translateY(26px) scale(.97); transition: opacity .5s var(--ease-out), transform .8s var(--spring); }
.fp.is-plate .fp__plate { opacity: 1; transform: none; }
.fp__plate.is-out { opacity: 0 !important; transform: translateY(14px) scale(.97) !important; transition-duration: .35s; }
.fpc__h .fpw { display: inline-block; opacity: 0; transform: translateY(.34em); animation: word-in .9s var(--ease-out) forwards; animation-delay: calc(var(--i) * 55ms); }
.fpc__dek, .fpc__w, .fpc__by, .fpc__end, .fpc__kick { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease-out), transform .8s var(--ease-out); }
.fp__col.is-dek .fpc__dek, .fp__col.is-dek .fpc__kick, .fp__col.is-w .fpc__w, .fp__col.is-end .fpc__by, .fp__col.is-end .fpc__end { opacity: 1; transform: none; }
@keyframes word-in { to { opacity: 1; transform: none; } }

/* ═════════ 02 · HOW IT WORKS: the film in a pinned panel beside its steps ═════════ */
.howit { padding-bottom: 0; }
.howit .mk { margin-bottom: 0; }
.hw { position: relative; height: 600vh; height: 600svh; }
.hw__stage { position: sticky; top: 0; height: 100vh; height: 100svh; }
.hw__in { display: grid; grid-template-columns: minmax(0, .3fr) minmax(0, .7fr); gap: clamp(28px, 3.4vw, 56px); align-items: center; height: 100%; padding: calc(var(--hd-h) + 20px) 0 28px; }
.hw__h { margin: 0 0 30px; font: 400 clamp(32px, 3vw, 48px)/1.02 var(--serif-d); letter-spacing: -.03em; font-variation-settings: 'opsz' 72; }
.hw__h em { font-style: italic; font-weight: 300; color: var(--mute); }
.hw__steps { list-style: none; margin: 0; padding: 0; }
.hw__steps button { position: relative; display: grid; grid-template-columns: 34px 1fr; width: 100%; padding: 16px 0 16px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; opacity: .38; transition: opacity .5s var(--ease-out); }
.hw__steps li.is-on button { opacity: 1; } .hw__steps li.is-done button { opacity: .6; }
.hw__n { grid-row: 1 / 3; font: 500 12.5px/1.5 var(--sans); font-variant-numeric: tabular-nums; color: var(--blue-lite); }
.hw__steps b { font: 400 21px/1.2 var(--serif-d); letter-spacing: -.015em; font-variation-settings: 'opsz' 36; }
.hw__steps small { display: grid; grid-template-rows: 0fr; margin-top: 0; font: 400 14px/1.45 var(--sans); color: rgba(237, 234, 227, .62); transition: grid-template-rows .6s var(--ease-out), margin .6s; overflow: hidden; }
.hw__steps li.is-on small { grid-template-rows: 1fr; margin-top: 6px; }
.hw__bar { position: absolute; left: 34px; right: 0; bottom: 0; height: 1px; background: var(--rule); }
.hw__bar i { position: absolute; inset: 0; background: var(--on-ink); transform-origin: 0 50%; transform: scaleX(var(--f, 0)); }
.hw__panel { position: relative; height: min(100%, 760px); border-radius: 22px; overflow: hidden; isolation: isolate; background: #CDB48F;
  box-shadow: 0 60px 120px -60px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .08); }
.hw__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 60%; filter: saturate(.84) brightness(1.02); z-index: -1; }
.hw__panel::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(60, 38, 14, .25)); }
.hw__cap { display: none; }
.hero__shadow { position: absolute; z-index: 3; left: 0; top: 0; width: 1600px; height: 120px; transform-origin: 0 0; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(56, 34, 12, .42), rgba(56, 34, 12, .18) 45%, transparent 70%); filter: blur(6px); }
/* the product layer: a 1600 × 1012 canvas the camera scales and moves */
.film { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.film__cam { position: absolute; left: 0; top: 0; width: 1600px; height: 1012px; transform-origin: 0 0; will-change: transform; }
.fw { position: relative; width: 1600px; height: 1012px; border-radius: 16px; overflow: hidden; background: #fff; isolation: isolate;
  box-shadow: 0 0 0 1px rgba(60, 40, 20, .12), 0 90px 140px -60px rgba(48, 28, 8, .6), 0 30px 60px -30px rgba(48, 28, 8, .4); }
.fw__chrome { position: relative; z-index: 20; height: 44px; display: flex; align-items: center; gap: 18px; padding: 0 18px; background: #ECE7DF; border-bottom: 1px solid #D9D2C6; color: #6B5F55; }
.fw__tl { display: inline-flex; gap: 8px; } .fw__tl i { width: 12px; height: 12px; border-radius: 50%; background: #E0594E; } .fw__tl i:nth-child(2) { background: #E3B23C; } .fw__tl i:nth-child(3) { background: #58B14F; }
.fw__navs { display: inline-flex; gap: 10px; margin-left: 14px; } .fw__navs svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fw__addr { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); width: 520px; height: 28px; border-radius: 8px; background: #F8F5F0; display: flex; align-items: center; justify-content: center; gap: 8px;
  font: 500 13px/1 -apple-system, 'Helvetica Neue', Arial, sans-serif; color: #43372F; letter-spacing: .01em; }
.fw__addr svg { width: 10px; height: 12px; fill: #8C8074; color: #8C8074; }
.fw__tools { margin-left: auto; display: inline-flex; gap: 14px; } .fw__tools i { width: 14px; height: 14px; border: 1.6px solid #8C8074; border-radius: 3px; }
.fw__vp { position: relative; width: 1600px; height: 968px; overflow: hidden; background: #F8F3E9; }
.fveil { position: absolute; inset: 0; background: #1A1410; opacity: 0; pointer-events: none; z-index: 5; }
.fcursor { position: absolute; left: 0; top: 0; z-index: 30; opacity: 0; transform-origin: 0 0; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .28)); pointer-events: none; }
.fripple { position: absolute; left: 0; top: 0; z-index: 29; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 2.5px solid #FFF7EE; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); opacity: 0; pointer-events: none; }

/* the phone film (small screens) */
.pfilm { position: absolute; inset: 0; z-index: 5; display: none; pointer-events: none; }
.pf__cam { position: absolute; left: 0; top: 0; width: 402px; height: 874px; transform-origin: 0 0; will-change: transform; }


/* ═════════ 02 · CHATBOTS ═════════ */
.chat .sh { max-width: 1100px; }
.vs { display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); align-items: stretch; gap: 0; margin-bottom: 0; }
.vs__side { display: flex; flex-direction: column; min-width: 0; }
.vs__lab { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); font: 500 13px/1 var(--sans); letter-spacing: 0; text-transform: none; color: rgba(237, 234, 227, .62); font-variant-numeric: tabular-nums; }
.vs__lab span { opacity: .6; }
.vs__cap { margin-top: 20px; font: 300 italic clamp(22px, 2vw, 30px)/1.1 var(--serif-d); letter-spacing: -.015em; font-variation-settings: 'opsz' 40; }
.vs__side--bot .vs__cap { color: rgba(237, 234, 227, .4); }
.vs__mid { display: grid; place-items: center; }
.vs__mid span { width: 1px; height: 64%; background: var(--rule); font-size: 0; }
/* the chat bubble, done the way everyone does it (on purpose) */
.bot { position: relative; flex: 1; min-height: 520px; border-radius: 20px; overflow: hidden; background: #1C1C22; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.bot__site { position: absolute; inset: 26px 26px auto; display: grid; gap: 14px; }
.bot__site i { display: block; height: 14px; border-radius: 7px; background: rgba(255, 255, 255, .06); }
.bot__site i:first-child { width: 40%; height: 26px; } .bot__site i:nth-child(2) { width: 88%; } .bot__site i:nth-child(3) { width: 72%; } .bot__site i:nth-child(4) { width: 80%; }
.bot__win { position: absolute; right: 22px; bottom: 90px; width: min(360px, calc(100% - 44px)); border-radius: 18px; overflow: hidden; background: #fff; color: #1d1d1f; font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); transform-origin: 100% 100%; transition: transform .5s var(--ease-out), opacity .4s; }
.bot__head { display: flex; align-items: center; gap: 10px; padding: 13px 14px; background: #4F46E5; color: #fff; font-size: 13px; line-height: 1.2; }
.bot__head small { display: block; font-size: 11px; opacity: .75; }
.bot__av { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #A5B4FC, #fff); flex: none; }
.bot__x { margin-left: auto; font-size: 20px; line-height: 1; opacity: .8; }
.bot__log { display: flex; flex-direction: column; gap: 8px; padding: 14px; min-height: 250px; background: #F4F4F6; }
.bm { max-width: 82%; padding: 9px 12px; border-radius: 16px; font-size: 13.5px; line-height: 1.35; opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .35s, transform .45s var(--spring), filter .6s; }
.bm.is-on { opacity: 1; transform: none; }
.bm--bot { align-self: flex-start; background: #fff; border-bottom-left-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.bm--me { align-self: flex-end; background: #4F46E5; color: #fff; border-bottom-right-radius: 5px; }
.bm.is-gone { opacity: 0; filter: blur(8px); transform: translateY(-14px) scale(.9); transition-duration: .7s; }
.bot__in { padding: 12px 14px; border-top: 1px solid #E5E5EA; font-size: 13px; color: #9A9AA0; background: #fff; }
.bot__bubble { position: absolute; right: 22px; bottom: 22px; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: #4F46E5; box-shadow: 0 10px 24px -8px rgba(79, 70, 229, .8); }
.bot__bubble svg { width: 24px; height: 24px; fill: #fff; }
.bot__gone { position: absolute; left: 0; right: 0; top: 46%; text-align: center; font: 400 italic 28px/1.1 var(--serif-d); color: rgba(244, 239, 230, .45); opacity: 0; transition: opacity .8s .3s; }
.bot__gone small { display: block; margin-top: 8px; font: 600 11.5px/1 var(--sans); font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.bot.is-closed .bot__win { transform: scale(.4) translate(40px, 60px); opacity: 0; }
.bot.is-closed .bot__gone { opacity: 1; }
.vs__side--brief { position: relative; }
.vsb { position: relative; flex: 1; min-height: 520px; padding: 34px 34px 30px; border-radius: 4px; background: var(--bk-paper); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); overflow: hidden; }
.vsb .bk-art { opacity: 1; }
.js .vsb .vsb__title, .js .vsb .bk-dek, .js .vsb .vsb__body, .js .vsb .vsb__photo, .js .vsb .bk-byline { opacity: 0; transform: translateY(10px); transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); }
/* the Brief sets itself beat for beat with the bubble's reply */
.vsb.s1 .bk-dek, .vsb.s2 .vsb__title, .vsb.s3 .vsb__body, .vsb.s4 .vsb__photo, .vsb.s5 .bk-byline { opacity: 1; transform: none; }
/* the scorecards */
.sc { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font: 500 14px/1 var(--sans); letter-spacing: -.005em; }
.sc li { display: inline-flex; align-items: center; gap: 9px; opacity: 0; transform: translateY(6px); transition: opacity .6s var(--ease-out), transform .8s var(--ease-out); }
.sc li::before { content: ""; width: 20px; height: 20px; flex: none; border-radius: 50%; }
.sc--no li { color: rgba(237, 234, 227, .42); }
.sc--no li::before { box-shadow: inset 0 0 0 1px rgba(237, 234, 227, .25); background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M7.2 7.2l5.6 5.6M12.8 7.2l-5.6 5.6' stroke='rgba(237,234,227,.5)' stroke-width='1.4' stroke-linecap='round'/></svg>") center / 20px no-repeat; }
.sc--yes li { color: var(--on-ink); }
.sc--yes li::before { background: var(--blue) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M6 10.4 8.7 13 14 7.2' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 20px no-repeat; }
.vs.is-done .sc li { opacity: 1; transform: none; }
.vs.is-done .sc li:nth-child(2) { transition-delay: .08s; } .vs.is-done .sc li:nth-child(3) { transition-delay: .16s; } .vs.is-done .sc li:nth-child(4) { transition-delay: .24s; }
.vsb { display: flex; flex-direction: column; }
.vsb .bk-art { flex: 1; }
.vsb .vsb__photo { flex: 1; margin: 16px 0 4px; aspect-ratio: auto; min-height: 150px; }
.vsb__stay { position: absolute; right: 22px; bottom: 76px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px 8px 10px; border-radius: 999px; background: var(--ink); color: var(--on-ink);
  font: 500 12.5px/1 var(--sans); letter-spacing: -.005em; opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease-out), transform .8s var(--ease-out); }
.vsb__stay svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vsb.s6 .vsb__stay { opacity: 1; transform: none; transition-delay: 0s; }
/* the category, side by side: bubble · FAQ page · Brief */
.cmp { margin-top: 0; }
.cmp__h { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 3fr); gap: 24px; margin-bottom: 30px; align-items: end; }
.cmp__h h3 { margin: 0; font: 400 clamp(28px, 2.8vw, 42px)/1.06 var(--serif-d); letter-spacing: -.022em; font-variation-settings: 'opsz' 72; }
.cmp__h h3 em { font-style: italic; font-weight: 300; color: var(--mute); }
.cmp__h p { max-width: 34em; justify-self: end; font-size: 15.5px; line-height: 1.55; opacity: .66; }
.cmp table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 15px; line-height: 1.45; }
.cmp col.cmp__lab { width: 19%; }
.cmp th, .cmp td { padding: 17px 20px 17px 0; text-align: left; vertical-align: top; border-top: 1px solid var(--rule); }
.cmp thead th { padding-top: 0; padding-bottom: 14px; border-top: 0; font: 500 13px/1.2 var(--sans); letter-spacing: -.003em; color: rgba(237, 234, 227, .55); }
.cmp thead th.is-brief { color: var(--on-ink); }
.cmp thead th.is-brief::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 9px 1px 0; border-radius: 50%; background: var(--blue); }
.cmp tbody th { font: 500 13px/1.45 var(--sans); color: rgba(237, 234, 227, .55); }
.cmp td { color: rgba(237, 234, 227, .5); }
.cmp td.is-brief { color: var(--on-ink); }
.cmp td.is-brief b { font-weight: 500; }
.cmp tbody tr { transition: background .3s; }
.cmp tbody tr:hover td.is-brief { color: #fff; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 1px solid var(--rule); }
.js .cmp tbody tr { opacity: 0; transform: translateY(10px); transition: opacity .8s var(--ease-out), transform 1s var(--ease-out); }
.js .cmp.is-in tbody tr { opacity: 1; transform: none; }
.cmp.is-in tbody tr:nth-child(2) { transition-delay: .06s; } .cmp.is-in tbody tr:nth-child(3) { transition-delay: .12s; } .cmp.is-in tbody tr:nth-child(4) { transition-delay: .18s; } .cmp.is-in tbody tr:nth-child(5) { transition-delay: .24s; } .cmp.is-in tbody tr:nth-child(6) { transition-delay: .3s; }

/* ═════════ 03 · TRY IT ═════════ */
.demo { position: relative; border-radius: 14px; overflow: hidden; background: #ECE7DF; box-shadow: 0 60px 120px -50px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .1); }
.demo__chrome { position: relative; display: flex; align-items: center; gap: 16px; height: 46px; padding: 0 16px; background: #ECE7DF; border-bottom: 1px solid #D9D2C6; color: #6B5F55; }
.demo__addr { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 16px; border-radius: 8px; background: #F8F5F0; font: 500 13px/1 -apple-system, 'Helvetica Neue', Arial, sans-serif; color: #43372F; white-space: nowrap; }
.demo__addr span { color: #8C8074; }
.demo__addr svg { width: 10px; height: 12px; fill: #8C8074; color: #8C8074; }
.demo__reset { margin-left: auto; height: 30px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(53, 42, 35, .08); color: #43372F; font: 600 12px/1 var(--sans); cursor: pointer; }
.demo__reset:hover { background: rgba(53, 42, 35, .14); }

/* ═════════ 04 · WIDGETS ═════════ */
.wgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 32px); align-items: stretch; }
.wcard { position: relative; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.wcard .wg { flex: 1; display: flex; }
.wcard .w-tile { flex: 1; padding: 22px 24px 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 40px 60px -40px color-mix(in oklab, var(--w-ink), transparent 20%); }
.wcard .w-cap { margin-top: auto; }
.wcard .w-ctl { margin-bottom: 16px; }
.wcard__who { display: flex; justify-content: space-between; gap: 12px; font: 500 13px/1 var(--sans); color: var(--ink); }
.wcard__who span { color: var(--ink-4); }
.wcard__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 11px; border-bottom: 1px solid var(--rule); font: 500 13px/1.2 var(--sans); letter-spacing: -.003em; color: var(--ink-4); }
.wcard__meta b { color: var(--ink); font-weight: 500; }
.wcard__q { font: 300 italic clamp(20px, 1.6vw, 24px)/1.2 var(--serif-d); letter-spacing: -.012em; color: var(--ink); font-variation-settings: 'opsz' 30; }
.wnote { margin-top: 48px; padding-top: 14px; border-top: 1px solid var(--rule); font: 500 13px/1.5 var(--sans); color: var(--ink-4); }

/* ═════════ 05 · POCKET ═════════ */
.pocket__wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center; }
.pocket .sh__dek { margin-bottom: 44px; }
.beats { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.beats li { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 22px; padding: 14px 0; border-top: 1px solid var(--rule); opacity: .3; transition: opacity .6s var(--ease-out); }
.beats li.is-on { opacity: 1; }
.beats span { font: 400 clamp(34px, 3.6vw, 52px)/1.02 var(--serif-d); letter-spacing: -.028em; font-variation-settings: 'opsz' 72; transition: font-style .3s; }
.beats li.is-on span { font-style: italic; font-weight: 300; }
.beats small { font-size: 15px; line-height: 1.45; color: rgba(237, 234, 227, .7); }
.pocket__stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.pocket__stage::before { content: ""; position: absolute; left: 50%; top: 46%; width: 120%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(237, 234, 227, .07), transparent); }
.phone-fit { position: relative; flex: none; }
.phone-fit > .phone { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.pocket__hint { position: relative; font: 500 13px/1 var(--sans); letter-spacing: 0; text-transform: none; color: rgba(237, 234, 227, .5); }

/* ═════════ 06 · YOUR BRAND ═════════ */
@property --flood { syntax: '<color>'; inherits: true; initial-value: #A34F36; }
.brand { --flood: #A34F36; transition: --flood 1.1s var(--ease-io); }
.brand__flood { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(48% 52% at 70% 64%, color-mix(in srgb, var(--flood) 12%, transparent), transparent 72%); }
.brand__tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin: -30px 0 44px; border-top: 1px solid var(--rule); }
.brand__tab { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; height: 54px; padding: 0 12px 0 0; border: 0; cursor: pointer; overflow: hidden;
  background: none; color: inherit; font: 500 13.5px/1.2 var(--sans); letter-spacing: -.008em; text-align: left; opacity: .5; transition: opacity .3s; }
.brand__tab i { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--sw); }
.brand__tab:hover { opacity: .85; }
.brand__tab[aria-selected="true"] { opacity: 1; }
.brand__tab .brand__tick { position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: currentColor; transform-origin: 0 50%; transform: scaleX(0); }
.brand__tab[aria-selected="true"] .brand__tick { animation: tick var(--dur, 5s) linear forwards; }
@keyframes tick { to { transform: scaleX(1); } }
.brand.is-paused .brand__tick { animation-play-state: paused !important; }
.brand__row { display: grid; grid-template-columns: minmax(0, .36fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.brand__spec { position: sticky; top: calc(var(--hd-h) + 24px); }
.spec__from { font: 500 13px/1.3 var(--sans); opacity: .55; margin-bottom: 18px; }
.spec__name { font-size: clamp(34px, 3.4vw, 50px); line-height: 1; margin-bottom: 26px; }
.spec__row { display: grid; grid-template-columns: 88px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--rule); font-size: 15px; line-height: 1.4; }
.spec__row > span:first-child { font: 500 13px/1.45 var(--sans); opacity: .5; }
.spec__sw { display: flex; gap: 6px; }
.spec__sw i { width: 26px; height: 26px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45), 0 0 0 1px rgba(0, 0, 0, .12); }
.brand__page { position: relative; border-radius: 8px; overflow: hidden; box-shadow: 0 50px 100px -50px rgba(40, 30, 15, .4), 0 0 0 1px rgba(15, 15, 18, .07); }

/* ═════════ 07 · THE DESK ═════════ */
.nums { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-bottom: clamp(56px, 7vw, 96px); border-top: 1px solid var(--rule); }
.num { padding: 22px 24px 0 0; }
.num + .num { padding-left: 24px; border-left: 1px solid var(--rule); }
.num b { display: block; font: 300 clamp(76px, 9.4vw, 156px)/.9 var(--serif-d); letter-spacing: -.045em; color: var(--ink); font-variation-settings: 'opsz' 72; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: 'lnum' 1, 'tnum' 1; }
.num span { display: block; margin-top: 16px; font-size: 15px; font-weight: 500; color: var(--ink-3); }
.nums__ex { position: absolute; right: 0; top: -30px; font: 500 13px/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink-4); }
.report { max-width: 1060px; margin-left: auto; border-radius: 14px; background: #fff; color: var(--ink); box-shadow: 0 50px 90px -50px rgba(40, 32, 20, .45), 0 0 0 1px rgba(15, 15, 18, .06); overflow: hidden; }
.report__head { display: flex; justify-content: space-between; gap: 16px; padding: 17px 28px; border-bottom: 1px solid #ECE9E0; font: 500 13px/1.2 var(--sans); color: var(--ink-3); }
.report__gap { position: relative; margin: 24px 28px 8px; padding: 22px 26px; border-radius: 10px; background: var(--ink); color: var(--on-ink); }
.report__k { margin-bottom: 12px; font: 500 13px/1 var(--sans); color: var(--ink-4); }
.report__gap .report__k { color: rgba(237, 234, 227, .55); }
.report__q { font: 400 clamp(26px, 2.7vw, 40px)/1.08 var(--serif-d); letter-spacing: -.022em; font-variation-settings: 'opsz' 72; }
.report__m { margin-top: 10px; font-size: 14px; opacity: .72; }
.report__m b { color: #fff; font-weight: 600; }
.report__fix { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 14.5px; color: var(--on-ink); }
.report__fix svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.report__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 0; padding: 18px 28px 6px; }
.report__asked { padding-right: 26px; }
.report__calls { padding-left: 26px; border-left: 1px solid #ECE9E0; }
.bar { position: relative; display: flex; justify-content: space-between; padding: 11px 0 14px; font-size: 15px; font-weight: 500; }
.bar b { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink-3); }
.bar i { position: absolute; left: 0; bottom: 4px; height: 3px; width: 100%; border-radius: 3px; background: #EEEBE3; overflow: hidden; }
.bar i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.3s var(--ease-out); }
.report.is-in .bar i::after { transform: scaleX(var(--w)); }
.report.is-in .bar:nth-of-type(2) i::after { transition-delay: .1s; } .report.is-in .bar:nth-of-type(3) i::after { transition-delay: .2s; } .report.is-in .bar:nth-of-type(4) i::after { transition-delay: .3s; } .report.is-in .bar:nth-of-type(5) i::after { transition-delay: .4s; }
.call { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #F1EEE7; }
.call:last-child { border-bottom: 0; }
.call__av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); font: 700 14px/1 var(--sans); }
.call b { display: block; font-size: 15px; } .call small { display: block; font-size: 13px; color: var(--ink-3); line-height: 1.35; }
.tag { padding: 6px 11px; border-radius: 999px; font: 500 12px/1 var(--sans); letter-spacing: -.003em; font-style: normal; white-space: nowrap; box-shadow: inset 0 0 0 1px #DAD6CC; color: var(--ink-3); }
.tag--hot { background: var(--ink); color: #fff; box-shadow: none; }
.tag--hot::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 6px 1px 0; border-radius: 50%; background: var(--blue-lite); }
.report__foot { display: flex; justify-content: space-between; gap: 16px; margin-top: 12px; padding: 14px 28px 18px; border-top: 1px solid #ECE9E0; font-size: 12.5px; color: var(--ink-3); }

/* ═════════ 09 · PROOF ═════════ */
.logos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: clamp(56px, 7vw, 100px); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.logos figure { position: relative; margin: 0; display: grid; place-items: center; height: clamp(120px, 12vw, 180px); padding: 0 18px; }
.logos figure + figure { border-left: 1px solid var(--rule); }
.logos figcaption { position: absolute; left: 14px; top: 12px; font: 500 12px/1 var(--sans); color: var(--ink-4); font-variant-numeric: tabular-nums; }
.logos img { height: 34px; width: auto; max-width: 100%; object-fit: contain; filter: grayscale(1) contrast(1.1); mix-blend-mode: multiply; opacity: .72; transition: opacity .4s, filter .4s; }
.logos figure:hover img { opacity: 1; filter: grayscale(0); }
.logos img[src$="caporn-young.png"] { height: 20px; } .logos img[src$="locus.svg"] { height: 16px; } .logos img[src$="scotch.png"] { height: 46px; } .logos img[src$="soilux.webp"] { height: 30px; }
/* go ask their website: a row, not a banner */
.goask { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k u" "t u" "s u"; gap: 12px 40px; align-items: end; padding: 26px 0 30px; border-top: 1px solid var(--ink);
  color: var(--ink); text-decoration: none; }
.goask__k { grid-area: k; font: 500 13px/1 var(--sans); color: var(--ink-4); }
.goask__t { grid-area: t; font: 400 clamp(40px, 5.4vw, 92px)/.98 var(--serif-d); letter-spacing: -.03em; font-variation-settings: 'opsz' 72; }
.goask__t em { font-weight: 300; color: var(--mute); }
.goask__s { grid-area: s; max-width: 36em; font-size: 16px; color: var(--ink-3); }
.goask__u { grid-area: u; display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 22px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule); font: 500 15px/1 var(--sans); white-space: nowrap; transition: background .35s var(--ease-out), color .35s, box-shadow .35s; }
.goask:hover .goask__u { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.goask__u svg, .fdr__in svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease-out); }
.goask:hover .goask__u svg { transform: translate(2px, -2px); }

/* ═════════ 10 · PRICING (on ink) ═════════ */
.price { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.price__card { position: relative; padding: 0; }
.price__k { padding-top: 14px; border-top: 1px solid var(--rule); font: 500 13px/1 var(--sans); color: rgba(237, 234, 227, .55); }
.price__n { display: flex; align-items: flex-end; gap: 12px; margin: 34px 0 22px; }
.price__cur { font: 300 34px/1 var(--serif-d); align-self: flex-start; margin-top: .2em; font-variation-settings: 'opsz' 72; }
.price__v { display: block; font: 300 clamp(120px, 13vw, 210px)/.76 var(--serif-d); letter-spacing: -.05em; padding-top: .06em; font-variation-settings: 'opsz' 72; font-variant-numeric: lining-nums proportional-nums; font-feature-settings: 'lnum' 1; }
.price__per { font: 300 italic 24px/1 var(--serif-d); color: rgba(237, 234, 227, .55); margin-bottom: .25em; }
.price__setup { font-size: 16.5px; color: rgba(237, 234, 227, .78); padding-bottom: 28px; margin-bottom: 4px; }
.price__list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; border-top: 1px solid var(--rule); }
.price__list li { display: grid; grid-template-columns: 34px 1fr; padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: 15.5px; line-height: 1.4; counter-increment: pl; }
.price__list { counter-reset: pl; }
.price__list li::before { content: counter(pl, decimal-leading-zero); font: 500 12px/1.9 var(--sans); color: rgba(237, 234, 227, .4); font-variant-numeric: tabular-nums; }
.price__fine { margin-bottom: 30px; font-size: 14px; color: rgba(237, 234, 227, .55); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.step { display: grid; grid-template-columns: 64px 1fr; gap: 20px; padding: 26px 0 30px; border-top: 1px solid var(--rule); }
.step:last-child { border-bottom: 1px solid var(--rule); }
.step:nth-child(2) { --rd: 100ms; } .step:nth-child(3) { --rd: 200ms; }
.step__n { font: 500 13px/1.9 var(--sans); color: rgba(237, 234, 227, .45); font-variant-numeric: tabular-nums; }
.step b { display: block; margin-bottom: 10px; font: 400 clamp(24px, 2.2vw, 32px)/1.1 var(--serif-d); letter-spacing: -.02em; font-variation-settings: 'opsz' 48; }
.step p { font-size: 15.5px; color: rgba(237, 234, 227, .62); max-width: 30em; }
.steps__h { margin-bottom: 18px; font: 500 13px/1 var(--sans); color: rgba(237, 234, 227, .55); }

/* ═════════ 12 · FOUNDERS ═════════ */
.fdr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.fdr__p:nth-child(2) { --rd: 120ms; }
.fdr__ph { position: relative; margin: 0 0 24px; border-radius: 4px; overflow: hidden; aspect-ratio: 3 / 2; background: #1c1c22; }
.fdr__ph img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.04); transition: transform 1.6s var(--ease-out), filter .8s; }
.fdr__p:hover .fdr__ph img { transform: scale(1.03); }
.fdr__ph figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 13px; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); font: 500 12.5px/1 var(--sans); color: rgba(255, 255, 255, .82); }
.fdr__r { padding-top: 12px; border-top: 1px solid var(--rule); font: 500 13px/1 var(--sans); color: rgba(237, 234, 227, .55); margin-bottom: 14px; }
.fdr__n { margin: 0 0 14px; font: 400 clamp(32px, 3vw, 46px)/1.04 var(--serif-d); letter-spacing: -.024em; font-variation-settings: 'opsz' 72; }
.fdr__b { max-width: 36em; font-size: 16px; line-height: 1.6; color: rgba(237, 234, 227, .7); }
.fdr__in { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font: 500 14px/1 var(--sans); text-decoration: none; padding: 6px 0; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .5s var(--ease-out); }
.fdr__in:hover { background-size: 0 1px; background-position: 100% 100%; }

/* ═════════ 12 · FINALE ═════════ */
.finale { position: relative; height: 260vh; height: 260svh; background: #CDB48F; }
.finale__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.finale__cv, .finale__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.finale__poster { z-index: 0; }
.finale__cv { z-index: 1; }
.finale__stage::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(58, 40, 18, .22), transparent 55%), radial-gradient(130% 100% at 70% 50%, transparent 60%, rgba(40, 26, 10, .25)); }
.finale__in { position: relative; z-index: 3; height: 100%; width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 560px); align-content: center; gap: clamp(20px, 3vh, 40px); padding-top: var(--hd-h); }
.finale__word { font: 400 clamp(84px, 9.4vw, 160px)/.86 var(--serif-d); letter-spacing: -.045em; color: #fff; text-shadow: 0 10px 40px rgba(60, 36, 10, .22); font-variation-settings: 'opsz' 72; }
.finale__word span { color: var(--blue); }
.finale__line { margin-top: 16px; font: 300 italic clamp(24px, 2.3vw, 36px)/1.1 var(--serif-d); letter-spacing: -.015em; color: var(--ink); font-variation-settings: 'opsz' 48; }
.finale__copy { will-change: transform, opacity; }
.card-form { position: relative; padding: clamp(22px, 2.6vw, 34px); border-radius: 18px; color: var(--ink); background: rgba(250, 248, 244, .7);
  -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .8), 0 40px 80px -40px rgba(60, 36, 10, .55); will-change: transform, opacity; }
.card-form .kick { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); color: var(--ink-3); }
.card-form__h { margin: 0 0 10px; font: 400 clamp(25px, 2.2vw, 33px)/1.08 var(--serif-d); letter-spacing: -.022em; font-variation-settings: 'opsz' 48; }
.card-form__h em { font-style: italic; font-weight: 300; color: var(--ink-3); }
.card-form__p { font-size: 15px; line-height: 1.5; color: var(--ink-2); margin-bottom: 18px; }
.fld { display: block; margin-bottom: 10px; }
.fld span { display: block; margin: 0 0 7px 2px; font: 500 12.5px/1 var(--sans); color: var(--ink-3); }
.fld input { width: 100%; height: 50px; padding: 0 16px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .88); box-shadow: inset 0 0 0 1px rgba(15, 15, 18, .1); font: 400 16px/1 var(--sans); color: var(--ink); transition: box-shadow .2s; }
.fld input::placeholder { color: #A39F96; }
.fld input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--blue), 0 0 0 4px rgba(61, 90, 254, .12); }
.fld.is-bad input { box-shadow: inset 0 0 0 2px #D6402E; }
.card-form .btn--full { margin-top: 8px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.card-form__msg { min-height: 0; font-size: 14px; }
.card-form__msg:not(:empty) { margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .7); }
.card-form__msg.is-ok { color: #1D6B3A; } .card-form__msg.is-err { color: #A5301F; }
.card-form__alt { margin-top: 14px; font-size: 13.5px; color: var(--ink-3); }
.card-form__alt a { color: var(--ink); font-weight: 600; text-decoration-color: rgba(15, 15, 18, .3); text-underline-offset: 3px; }
.card-form.is-sent .fld, .card-form.is-sent button { display: none; }

/* ═════════ FOOTER ═════════ */
.ft { position: relative; background: var(--ink); color: var(--on-ink); padding: clamp(64px, 8vw, 110px) 0 0; overflow: hidden; }
.ft__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; padding-bottom: 56px; }
.ft__brand { display: flex; align-items: flex-start; gap: 14px; }
.ft__mark { height: 28px; width: auto; fill: var(--blue); }
.ft__brand p { font: 600 21px/1 var(--sans); letter-spacing: -.035em; }
.ft__brand small { display: block; margin-top: 8px; font: 500 13px/1 var(--sans); letter-spacing: 0; opacity: .55; }
.ft__nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ft__nav p { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--rule-ink); font: 500 13px/1 var(--sans); opacity: .5; }
.ft__nav a { display: block; padding: 5px 0; font-size: 15px; text-decoration: none; opacity: .8; transition: opacity .2s; width: max-content; max-width: 100%; }
.ft__nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.ft__base { display: flex; justify-content: space-between; gap: 16px; padding: 22px 0; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13px; opacity: .55; }
.ft__big { margin: 10px 0 -0.22em; font: 400 clamp(120px, 27vw, 460px)/.8 var(--serif-d); letter-spacing: -.055em; text-align: center; color: #1E1E24; user-select: none; font-variation-settings: 'opsz' 72; }
.ft__big span { color: var(--blue); }

/* ═════════ RESPONSIVE ═════════ */
/* the film's steps go above the panel on narrow or tall screens */
@media (max-width: 1099px), (max-aspect-ratio: 23/20) {
  .hw__in { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); align-items: stretch; gap: 16px; padding-bottom: 18px; }
  .hw__h { margin-bottom: 10px; font-size: clamp(26px, 4.4vw, 38px); }
  .hw__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .hw__steps button { grid-template-columns: 1fr; padding: 10px 0 12px; }
  .hw__n { grid-row: auto; }
  .hw__steps b { font-size: 15.5px; }
  .hw__steps small { display: none; }
  .hw__bar { left: 0; }
  .hw__panel { height: 100%; }
}
@media (max-width: 1099px) {
  .hd { grid-template-columns: 1fr auto; }
  .hd__nav { display: none; }
  .hd__end { display: none; }
  .hd__burger { display: block; }
  .sh--split { grid-template-columns: 1fr; }
  .sh__side { max-width: 40em; }
  .vs { grid-template-columns: 1fr; gap: 24px; }
  .vs__mid { display: none; }
  .cmp__h { grid-template-columns: 1fr; }
  .cmp__h p { justify-self: start; }
  .brand__tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brand__tab:nth-child(n+4) { border-top: 1px solid var(--rule); }
  .wgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wgrid { grid-template-columns: repeat(3, minmax(290px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 12px; scrollbar-width: none; }
  .wgrid::-webkit-scrollbar { display: none; }
  .wcard { scroll-snap-align: start; }
  .pocket__wrap { grid-template-columns: minmax(0, 1fr); }
  .brand__row { grid-template-columns: 1fr; }
  .brand__spec { position: static; }
  .price { grid-template-columns: 1fr; }
  .ft__in { grid-template-columns: 1fr; }
}
@media (max-width: 759px) {
  :root { --hd-h: 64px; }
  body { font-size: 16px; }
  .hd { top: 10px; width: calc(100% - 20px); height: 54px; padding: 0 7px 0 14px; border-radius: 16px; }
  .hd__word { font-size: 18px; }
  .hd__mark { height: 22px; }
  .hd__burger { width: 42px; height: 42px; }
  .hd__burger i { left: 13px; right: 13px; } .hd__burger i:first-child { top: 17px; } .hd__burger i:last-child { top: 24px; }
  .hd__burger[aria-expanded="true"] i:first-child, .hd__burger[aria-expanded="true"] i:last-child { top: 20.5px; }
  .sec { padding: calc(var(--hd-h) + 12px) 0 96px; }
  .mk { grid-template-columns: 1fr; margin-bottom: 44px; }
  .mk__t { gap: 22px; }
  .mk__r { display: none; }
  .h2 { font-size: clamp(40px, 11.4vw, 58px); }
  .fp { padding: calc(var(--hd-h) + 8px) 10px 18px; }
  .fp__band { height: 62px; padding: 0 16px; gap: 12px; border-radius: 16px 16px 0 0; }
  .fp__mark svg { height: 20px; }
  .fp__title { font-size: 19px; }
  .fp__right > :not(.fp__live) { display: none; }
  .fp__meta { margin: 0 16px; font-size: 11px; } .fp__meta > span:first-child { display: none; }
  .fp__grid { grid-template-columns: 1fr; gap: 18px; padding: 16px 16px 20px; }
  .fp__h { font-size: clamp(40px, 11vw, 52px); }
  .fp__dek { font-size: 17px; }
  .fp__body p:last-child { display: none; }
  .fp__by { display: none; }
  .fp__plate { margin: 0 -4px; padding: 14px 16px 10px; }
  .fp__in { font-size: 19px; }
  .fp__asks button { font-size: 15.5px; padding: 9px 0 8px; }
  .fp__asks button:nth-child(n+4) { display: none; }
  .fp__foot { padding: 0 6px; flex-direction: column; }
  .hw { height: 480vh; height: 480svh; }
  .hw__h { display: none; }
  .hw__steps { gap: 8px; }
  .hw__steps b { font-size: 13px; }
  .film { display: none; }
  .pfilm { display: block; }
  /* the comparison becomes three stacked columns, each row labelled */
  .cmp table, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; }
  .cmp thead { display: none; }
  .cmp tbody tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; padding: 16px 0 18px; border-top: 1px solid var(--rule); }
  .cmp tbody tr:last-child { border-bottom: 1px solid var(--rule); }
  .cmp tbody th, .cmp tbody td, .cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border: 0; padding: 0; }
  .cmp tbody th { grid-column: 1 / -1; margin-bottom: 8px; }
  .cmp td.is-brief { grid-column: 1 / -1; order: -1; margin-bottom: 10px; font-size: 17px; }
  .cmp tbody th { order: -2; }
  .cmp td:not(.is-brief) { font-size: 13.5px; }
  .cmp td:not(.is-brief)::before { content: attr(data-l); display: block; margin-bottom: 3px; font: 500 11.5px/1.2 var(--sans); color: rgba(237, 234, 227, .38); }
  .brand__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand__tab:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logos figure { height: 118px; }
  .logos figure + figure { border-left: 0; }
  .logos figure:nth-child(even) { border-left: 1px solid var(--rule); }
  .logos figure:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .logos figure:last-child { grid-column: 1 / -1; }
  .price__v { font-size: clamp(110px, 34vw, 150px); }
  .step { grid-template-columns: 40px 1fr; }
  /* both panels fit one phone screen, so the two answers can be watched side by side */
  .vs { gap: 14px; }
  .vs__lab { margin-bottom: 10px; padding-bottom: 8px; }
  .bot, .vsb { min-height: 300px; }
  .bot__site { display: none; }
  .bot__win { right: 12px; bottom: 74px; width: calc(100% - 24px); }
  .bot__log { min-height: 0; max-height: 170px; overflow: hidden; justify-content: flex-end; }
  .bot__bubble { right: 12px; bottom: 14px; width: 46px; height: 46px; }
  .vsb { padding: 18px 18px 16px; }
  .vsb .vsb__body { font-size: 13.5px; }
  .vsb .vsb__photo { min-height: 90px; margin-top: 10px; }
  .vsb__stay { bottom: 58px; right: 14px; }
  .sc { margin-top: 12px; gap: 8px 14px; font-size: 13px; }
  .wgrid { grid-template-columns: repeat(3, 84%); }
  .nums { grid-template-columns: 1fr; }
  .num + .num { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
  .num { padding: 18px 0; }
  .nums__ex { top: -24px; }
  .report__cols { grid-template-columns: 1fr; }
  .report__asked { padding-right: 0; }
  .report__calls { padding-left: 0; border-left: 0; margin-top: 12px; }
  .report__gap { margin: 18px 16px 6px; padding: 18px; }
  .report__head, .report__cols, .report__foot { padding-left: 16px; padding-right: 16px; }
  .report__foot, .report__head { flex-direction: column; gap: 6px; }
  .goask { grid-template-columns: 1fr; grid-template-areas: "k" "t" "s" "u"; }
  .goask__u { justify-self: start; margin-top: 14px; }
  .fdr { grid-template-columns: 1fr; }
  .fdr__p:nth-child(2) { margin-top: 20px; }
  .finale { height: 240vh; height: 240svh; }
  .finale__in { align-content: space-between; padding: calc(var(--hd-h) + 16px) 0 calc(18px + env(safe-area-inset-bottom, 0px)); grid-template-columns: 1fr; }
  .finale__word { font-size: clamp(72px, 22vw, 110px); }
  .finale__line { font-size: 24px; }
  .card-form { padding: 20px; border-radius: 16px; }
  .card-form__p { display: none; }
  .fld input { height: 48px; }
  .ft__nav { grid-template-columns: 1fr 1fr; }
  .ft__base { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .hw { height: auto; }
  .hw__stage { position: relative; height: 90vh; }
  .js [data-reveal] { opacity: 1; transform: none; filter: none; }
}

/* ═════════ 02 · WHAT A BRIEF IS (the definition, then the anatomy, exploded) ═════════ */
.what { padding-bottom: 0; }
.lit { max-width: 11em; font: 400 clamp(46px, 7.2vw, 128px)/.98 var(--serif-d); letter-spacing: -.04em; font-variation-settings: 'opsz' 72; }
.lit .lit__b { display: block; font-style: italic; font-weight: 300; letter-spacing: -.035em; }
.lit .lw { transition: opacity .25s linear; }
.js .lit .lw { opacity: .12; }
.lit__s { margin-top: clamp(28px, 3.4vw, 48px); font: 500 clamp(15px, 1.2vw, 17px)/1.4 var(--sans); color: var(--ink-3); }
.lit__s em { font-style: normal; color: var(--ink); }
.anat { position: relative; height: 300vh; height: 300svh; }
.anat__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.anat__in { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; padding: calc(var(--hd-h) + 22px) 0 24px; }
.anat__head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding-top: 12px; border-top: 1px solid var(--rule); }
.anat__h { margin: 0; font: 400 clamp(22px, 1.9vw, 30px)/1.1 var(--serif-d); letter-spacing: -.02em; font-variation-settings: 'opsz' 48; }
.anat__sub { font: 500 13px/1.3 var(--sans); color: var(--ink-4); }
.anat__view { position: relative; min-height: 0; }
.anat__frame { position: absolute; inset: 0; perspective: 2400px; perspective-origin: 50% 36%; }
/* the specimens: drawn at a fixed size; anatomy.js tilts them and lifts their parts */
.spx, .spx-p { position: absolute; transform-origin: 50% 50%; transform-style: preserve-3d; border-radius: 8px; will-change: transform;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 60px 90px -50px rgba(40, 28, 14, .45), 0 0 0 1px rgba(15, 15, 18, .06); }
.spx { width: 1080px; height: 740px; --bk-gutter: 26px; }
.spx .bk-shell, .spx__grid, .spx__art, .spx__pair, .spx-p__page { transform-style: preserve-3d; }
[data-part] { transform-style: preserve-3d; transition: none; }
/* a lifted text layer gets its own sheet of paper */
.spx [data-part], .spx-p [data-part] { background-color: rgba(252, 249, 242, var(--e, 0)); box-shadow: 0 0 0 10px rgba(252, 249, 242, var(--e, 0)), 0 34px 44px -26px rgba(40, 28, 14, calc(var(--e, 0) * .5)); border-radius: 2px; }
.spx .bk-band[data-part], .spx-p .pb__mast[data-part] { box-shadow: 0 34px 44px -26px rgba(40, 28, 14, calc(var(--e, 0) * .6)); background-color: var(--bk-band); border-radius: 8px 8px 0 0; }
.spx .wg[data-part], .spx-p .wg[data-part] { background: none; box-shadow: none; }
.spx .wg[data-part] .w-tile, .spx-p .wg[data-part] .w-tile { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 40px 50px -28px rgba(60, 24, 10, calc(var(--e, 0) * .7)); }
.spx .bk-photo[data-part], .spx-p .spx-p__photo[data-part] { box-shadow: 0 40px 50px -28px rgba(40, 28, 14, calc(var(--e, 0) * .6)); }
.spx .spx__plate[data-part], .spx-p .spx-p__plate[data-part] { background: none; box-shadow: none; }
.spx .bk-band { height: 108px; }
.spx .bk-band .bk-band__mark { top: 30px; width: 34px; height: 42px; }
.spx .bk-band__np { left: 66px; top: 32px; }
.spx .bk-band__title { font-size: 28px; }
.spx .bk-band__right { top: 44px; }
.spx__grid { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 34px; margin-top: 18px; }
.spx__art .bk-title { font-size: 32px; margin-bottom: 10px; }
.spx__art .bk-body { max-width: 40em; }
.spx__pair { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; margin: 16px 0 0; align-items: stretch; }
.spx .bk-photo { margin: 0; aspect-ratio: auto; height: 100%; min-height: 210px; overflow: visible; }
.spx .bk-photo__in { overflow: hidden; }
.spx__pair .w-line { min-height: 0; }
.spx .bk-byline { margin-top: 14px; }
.spx__rail { align-self: start; padding-top: 2px; }
.spx__rail .drail__h { margin-top: 0; }
.spx__rail .drail__idx li { cursor: default; }
.spx__kept { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--bk-soft); font: italic 400 12.5px/1.4 var(--bk-serif); color: var(--bk-ink-3); }
.spx .spx__plate { left: auto; top: auto; right: 40px; bottom: 40px; width: 292px; }
.spx__plate .bk-draft { font-size: 19px; }
.spx__plate .bk-ask { font-size: 15px; padding: 9px 2px 8px 0; }
.spx-p { display: none; width: 380px; flex-direction: column; background: var(--bk-paper); border-radius: 22px; padding-bottom: 96px; }
.spx-p .pb__mast { border-radius: 22px 22px 0 0; }
.spx-p__dots { flex: none; display: flex; justify-content: center; gap: 6px; width: max-content; margin: 0 auto; padding: 9px 4px 3px; }
.spx-p__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--bk-soft); }
.spx-p__dots i.on { width: 18px; border-radius: 3px; background: var(--bk-accent); }
.spx-p__page { position: relative; padding: 12px 20px 0; }
.spx-p .pb__h { font-size: 26px; }
.spx-p__photo { position: relative; margin: 12px 0; height: 150px; border-radius: 2px; }
.spx-p__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.spx-p .w-line, .spx-p .w-cap { display: none; }
.spx-p .w-fig { margin-top: 10px; }
.spx-p .bk-byline { margin-top: 12px; }
.spx-p__plate { z-index: 12; }
/* the anchors live on the parts (in 3D); the callouts live on a flat overlay above everything */
.xa { position: absolute; width: 0; height: 0; }
.anat__ov { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
.anat__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.anat__lines path { fill: none; stroke: var(--ink); stroke-width: 1; }
.anat__lines circle { fill: var(--ink); stroke: rgba(252, 249, 242, .95); stroke-width: 3; paint-order: stroke; }
.xl { position: absolute; left: 0; top: 0; display: grid; gap: 3px; width: 200px; color: var(--ink); opacity: 0; will-change: transform, opacity; }
.xl--l { text-align: right; }
.xl b { font: 500 12px/1 var(--sans); color: var(--ink-4); font-variant-numeric: tabular-nums; }
.xl span { font: 400 21px/1.05 var(--serif-d); letter-spacing: -.015em; font-variation-settings: 'opsz' 36; }
.xl small { font: 500 12.5px/1.3 var(--sans); color: var(--ink-3); }
.xp { position: absolute; left: 0; top: 0; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper-3);
  font: 600 10.5px/1 var(--sans); font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2.5px rgba(252, 249, 242, .95); opacity: 0; }
.anat__legend { display: none; }
@media (max-width: 759px) {
  .anat__view { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; }
  .anat__frame { position: relative; inset: auto; }
  .anat__legend { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--rule); }
  .anat__legend li { display: flex; gap: 8px; align-items: baseline; padding: 5px 0; font: 400 16px/1.2 var(--serif-d); opacity: .25; transition: opacity .4s var(--ease-out); }
  .anat__legend li.is-on { opacity: 1; }
  .anat__legend b { min-width: 18px; font: 500 11.5px/1 var(--sans); color: var(--ink-4); }
}
.pocket .mk { grid-column: 1 / -1; margin-bottom: 0; }
@media (max-width: 759px) {
  .anat { height: 300vh; height: 300svh; }
  .spx { display: none; }
  .spx-p { display: flex; }
  .lit { font-size: clamp(44px, 12.4vw, 60px); }
  .anat__sub { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .lit .lw { opacity: 1; }
}
.spx [data-part], .spx-p [data-part] { position: relative; }
.spx .spx__plate[data-part] { position: absolute; }
.spx-p .spx-p__plate[data-part] { position: absolute; }

/* ═════════ 08 · THE DESK: a dashboard of tiles (example data) ═════════ */
.bento { display: grid; gap: 20px; }
.bento .bt { width: auto; height: auto; margin: 0; min-width: 0; }
.bt .w-tile { height: 100%; min-height: 270px; padding: 22px 24px 18px; transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 40px 60px -40px rgba(20, 14, 8, .55), 0 0 0 1px rgba(20, 14, 8, .04); }
.bt:hover .w-tile { transform: translateY(-4px); }
.bento--desk { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "feed feed gap call" "feed feed hours hours"; }
.bt--feed { grid-area: feed; } .bt--gap { grid-area: gap; } .bt--call { grid-area: call; } .bt--ring { grid-area: ring; } .bt--hours { grid-area: hours; } .bt--week { grid-area: week; }
.wx-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px/1 var(--bk-sans); color: var(--w-gold); }
.wx-live i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: bk-live 2s ease-in-out infinite; }
.bt-quote { margin: 18px 0 10px; font: 400 clamp(26px, 2.3vw, 34px)/1.06 'Newsreader', Georgia, serif; letter-spacing: -.022em; color: var(--w-hi); font-variation-settings: 'opsz' 48; }
.bt-btn { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border-radius: 999px; background: var(--w-gold); color: #fff; font: 600 13px/1 var(--bk-sans); box-shadow: 0 10px 20px -10px var(--w-gold); }
.bt-btn i { font-style: normal; }
.dk__m b { font-weight: 600; color: var(--w-hi); display: inline-block; font-variant-numeric: tabular-nums; }
.dk__m b.is-bump { animation: dk-bump .6s var(--ease-out); }
@keyframes dk-bump { 40% { transform: translateY(-4px); } }
/* the feed */
.bt--feed .wx-fig b { font-weight: inherit; font-variant-numeric: tabular-nums; }
.dk__list { list-style: none; flex: 1; margin: 16px 0 0; padding: 0; position: relative; min-height: 300px; overflow: hidden;
  -webkit-mask: linear-gradient(#000 72%, transparent); mask: linear-gradient(#000 72%, transparent); }
.dk__list li { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--w-fill); font: 500 14px/1.3 var(--bk-sans); color: var(--w-hi);
  animation: dk-in .7s var(--ease-out) both; }
.dk__list time { font: 500 12px/1 var(--bk-sans); color: var(--w-3); font-variant-numeric: tabular-nums; }
.dk__list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk__tag { font: 600 11.5px/1 var(--bk-sans); font-style: normal; white-space: nowrap; color: var(--w-3); }
.dk__tag--gap { padding: 5px 9px; border-radius: 999px; color: var(--w-hi); box-shadow: inset 0 0 0 1px var(--w-4); }
.dk__tag--lead { padding: 5px 9px; border-radius: 999px; color: var(--w-ink); background: var(--w-gold); }
@keyframes dk-in { from { opacity: 0; transform: translateY(-14px); } }
/* ready to talk */
.dk__people { list-style: none; margin: 16px 0 0; padding: 0; }
.dk__people li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--w-fill); opacity: .35; transition: opacity .6s var(--ease-out); }
.dk__people li em { grid-column: 2; justify-self: start; margin-top: -4px; padding: 4px 8px; border-radius: 999px; font: 600 11px/1 var(--bk-sans); font-style: normal; color: var(--w-gold); background: var(--w-fill); }
.dk__people li.is-on { opacity: 1; }
.dk__people li.is-ping .dk__av { animation: dk-ping .9s var(--ease-out); }
@keyframes dk-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--w-gold) 70%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
.dk__av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--w-fill-2); color: var(--w-hi); font: 600 14px/1 var(--bk-sans); transition: background .5s, color .5s; }
.dk__people li.is-on .dk__av { background: var(--w-gold); color: var(--w-ink); }
.dk__people b { display: block; font: 600 14.5px/1.2 var(--bk-sans); color: var(--w-hi); }
.dk__people small { display: block; margin-top: 3px; font: 500 12.5px/1.25 var(--bk-sans); color: var(--w-3); }
@media (max-width: 1099px) {
  .bento--desk { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "feed feed" "gap call" "hours hours"; }
}
@media (max-width: 759px) {
  .bento { gap: 14px; }
  .bento--desk { grid-template-columns: 1fr; grid-template-areas: "feed" "gap" "call" "hours"; }
  .bt .w-tile { min-height: 0; padding: 20px 18px 16px; }
  .dk__list { min-height: 260px; }
  .dk__list li { grid-template-columns: 60px minmax(0, 1fr) auto; font-size: 13.5px; }
}

/* ═════════ 10 · PRICING, calm ═════════ */
.pz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(40px, 7vw, 120px); align-items: end; }
.pz__price { display: flex; align-items: flex-end; gap: 10px; margin: clamp(36px, 4vw, 56px) 0 14px; }
.pz__cur { font: 300 28px/1 var(--serif-d); align-self: flex-start; margin-top: .3em; opacity: .7; }
.pz__v { font: 300 clamp(96px, 9vw, 150px)/.8 var(--serif-d); letter-spacing: -.05em; font-variation-settings: 'opsz' 72; font-feature-settings: 'lnum' 1; }
.pz__per { font: 300 italic 22px/1 var(--serif-d); color: rgba(237, 234, 227, .55); margin-bottom: .2em; }
.pz__setup { margin-bottom: 30px; font-size: 15px; color: rgba(237, 234, 227, .62); }
.pz__h { margin-bottom: 14px; font: 500 13px/1 var(--sans); color: rgba(237, 234, 227, .5); }
.pz__list { list-style: none; margin: 0 0 36px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); }
.pz__list li { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.pz__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; border-top: 1px solid var(--rule); }
.pz__steps li { padding-top: 12px; font-size: 15px; line-height: 1.3; }
.pz__steps b { display: block; margin-bottom: 8px; font: 500 12px/1 var(--sans); color: rgba(237, 234, 227, .45); font-variant-numeric: tabular-nums; }
@media (max-width: 1099px) { .pz { grid-template-columns: 1fr; align-items: start; } }
@media (max-width: 759px) { .pz__list { grid-template-columns: 1fr; } .pz__steps { grid-template-columns: 1fr; gap: 0; } .pz__steps li { padding: 12px 0; border-bottom: 1px solid var(--rule); } .pz__steps b { display: inline-block; width: 34px; margin: 0; } }

/* ═════════ 05 · THE WIDGET WALL: hand-made answers on a tilted plane ═════════ */
.widgets .sh { margin-bottom: clamp(24px, 3vw, 40px); }
.wall { position: relative; height: clamp(600px, 62vw, 900px); overflow: hidden; perspective: 2200px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(transparent, #000 9%, #000 91%, transparent); -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(transparent, #000 9%, #000 91%, transparent); mask-composite: intersect; }
.wall__plane { position: absolute; left: 50%; top: 50%; width: 2600px; display: grid; gap: 24px; transform-origin: 50% 50%;
  transform: translate(-50%, -50%) rotateX(22deg) rotateZ(-7deg) scale(.78); }
.wall__row { will-change: transform; }
.wall__track { display: flex; width: max-content; animation: wall-drift var(--dur, 100s) linear infinite var(--dir, normal); animation-play-state: paused; }
.wall.is-on .wall__track { animation-play-state: running; }
.wall__row:hover .wall__track { animation-play-state: paused; }
@keyframes wall-drift { to { transform: translateX(-50%); } }
.wnote { margin-top: 18px; }

/* the tiles: one business, its customer's question, one answer, one drawing made for that answer */
.wt { flex: none; height: 312px; margin-right: 24px; }
.wt .w-tile { height: 100%; padding: 18px 20px 14px; transition: transform .5s var(--ease-out);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 34px 44px -28px rgba(20, 14, 8, .55); }
.wt:hover .w-tile { transform: translateY(-6px); }
.wg.wt--light { --w-hi: var(--w-paper); --w-2: color-mix(in srgb, var(--w-paper) 76%, transparent); --w-3: color-mix(in srgb, var(--w-paper) 54%, transparent);
  --w-4: color-mix(in srgb, var(--w-paper) 30%, transparent); --w-fill: color-mix(in srgb, var(--w-paper) 7%, transparent); --w-fill-2: color-mix(in srgb, var(--w-paper) 15%, transparent); }
.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 34px 44px -30px rgba(20, 14, 8, .35); }
.wt--light .w-tile::before { opacity: .6; }
.wx-top { display: flex; align-items: center; gap: 8px; font: 600 12.5px/1 var(--bk-sans); letter-spacing: -.005em; color: var(--w-hi); }
.wx-mark { width: 22px; height: 22px; flex: none; border-radius: 7px; display: grid; place-items: center; background: var(--w-gold); color: var(--w-ink); font: 600 13px/1 var(--wx-face); }
.wx-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wx-q { margin: 12px 0 0; font: italic 400 15px/1.3 'Newsreader', Georgia, serif; color: var(--w-2); }
.wx-q::before { content: "“"; } .wx-q::after { content: "”"; }
.wx-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 5px 9px; border-radius: 999px; background: var(--w-fill); font: 600 11.5px/1 var(--bk-sans); color: var(--w-gold); }
.wx-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: bk-live 2s ease-in-out infinite; }
.wx-fig { margin: 6px 0 0; font: 500 36px/1.05 var(--wx-face); letter-spacing: -.022em; color: var(--w-hi); white-space: nowrap; font-variant-numeric: lining-nums; }
.wx-pill + .wx-fig { margin-top: 8px; }
.wx-fig em { font-style: normal; color: var(--w-gold); }
.wx-fig small { font-size: .46em; letter-spacing: 0; color: var(--w-2); }
.wx-fig--s { font-size: 28px; }
.wx-foot { margin-top: auto; display: grid; gap: 10px; }
.wx-note { margin: 0; font: 400 12.5px/1.35 var(--bk-sans); color: var(--w-2); }
.wx-src { margin: 12px 0 0; padding-top: 9px; border-top: 1px solid var(--w-fill); font: 400 11.5px/1.2 var(--bk-sans); color: var(--w-3); }
.wx-svg { display: block; width: 100%; height: auto; overflow: visible; }
.wx-svg--fit { max-width: 100%; }
.wx-svg--left { width: auto; height: 36px; justify-self: start; }
.wx-trk { fill: var(--w-fill); } .wx-trk2, .wx-dim { fill: var(--w-fill-2); } .wx-gold { fill: var(--w-gold); } .wx-hi { fill: var(--w-hi); }
.wx-lbl { font: 500 10.5px var(--bk-sans); fill: var(--w-3); } .wx-lbl.is-on { fill: var(--w-hi); font-weight: 600; } .wx-lbl--s { font-size: 8.5px; }
.wx-line { stroke: var(--w-gold); stroke-width: 2.2; } .wx-line--thin { stroke: var(--w-3); stroke-width: 1.5; } .wx-tick { stroke: var(--w-4); stroke-width: 1; stroke-dasharray: 2 3; }
.wx-ring { stroke: var(--w-fill-2); } .wx-ring-on { stroke: var(--w-gold); }
.wx-route { stroke: var(--w-4); stroke-width: 2; stroke-dasharray: .5 6; stroke-linecap: round; } .wx-route-on { stroke: var(--w-gold); stroke-width: 2.6; stroke-linecap: round; }
.wx-score { stroke: var(--w-ink); stroke-width: 1.3; stroke-linecap: round; opacity: .45; } .wx-score-f { fill: var(--w-ink); opacity: .3; }
.wx-axis { display: flex; justify-content: space-between; font: 500 11px/1.2 var(--bk-sans); color: var(--w-3); } .wx-axis .is-on { color: var(--w-hi); }
/* slots */
.wx-days { display: flex; gap: 6px; }
.wx-days span { flex: 1; display: grid; justify-items: center; gap: 4px; padding: 8px 0; border-radius: 10px; background: var(--w-fill); font: 600 16px/1 var(--bk-sans); color: var(--w-hi); }
.wx-days small { font: 500 10px/1 var(--bk-sans); color: var(--w-3); }
.wx-days .is-on { background: var(--w-gold); color: var(--w-ink); } .wx-days .is-on small { color: var(--w-ink); opacity: .7; }
.wx-times { display: flex; gap: 6px; }
.wx-times span { flex: 1; padding: 8px 0; border-radius: 999px; text-align: center; box-shadow: inset 0 0 0 1px var(--w-fill-2); font: 600 12px/1 var(--bk-sans); color: var(--w-2); }
.wx-times .is-on { background: var(--w-hi); color: var(--w-ink); box-shadow: none; }
/* estimate */
.wx-slider { position: relative; height: 50px; }
.wx-slider b { position: absolute; top: 0; left: calc(var(--p) * 100%); transform: translateX(-50%); padding: 4px 8px; border-radius: 6px; background: var(--w-hi); color: var(--w-ink); font: 600 11px/1 var(--bk-sans); white-space: nowrap; }
.wx-slider i { position: absolute; left: 0; right: 0; top: 28px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--w-gold) calc(var(--p) * 100%), var(--w-fill-2) 0); }
.wx-slider i::after { content: ""; position: absolute; top: 50%; left: calc(var(--p) * 100%); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--w-hi); box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.wx-slider span { position: absolute; top: 40px; font: 500 10.5px/1 var(--bk-sans); color: var(--w-3); }
.wx-slider span:last-of-type { right: 0; }
.wx-rows p { display: flex; justify-content: space-between; margin: 0; padding: 6px 0; border-top: 1px solid var(--w-fill); font: 500 12.5px/1.2 var(--bk-sans); color: var(--w-2); }
.wx-rows b { font-weight: 600; color: var(--w-hi); }
/* journey */
.wx-rail { list-style: none; margin: 0; padding: 0; }
.wx-rail li { position: relative; display: flex; justify-content: space-between; gap: 10px; padding: 5px 0 5px 24px; font: 500 12.5px/1.2 var(--bk-sans); color: var(--w-3); }
.wx-rail li::before { content: ""; position: absolute; left: 7px; top: 0; bottom: 0; width: 1px; background: var(--w-fill-2); }
.wx-rail li:first-child::before { top: 50%; } .wx-rail li:last-child::before { bottom: 50%; }
.wx-rail li i { position: absolute; left: 3px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--w-ink); box-shadow: inset 0 0 0 1.5px var(--w-3); }
.wx-rail b { font-weight: 600; }
.wx-rail .is-done { color: var(--w-2); } .wx-rail .is-done i { background: var(--w-2); box-shadow: none; }
.wx-rail .is-on { color: var(--w-hi); } .wx-rail .is-on b { color: var(--w-gold); }
.wx-rail .is-on i { left: 1px; width: 13px; height: 13px; margin-top: -6.5px; background: var(--w-gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--w-gold) 24%, transparent); }
/* phases */
.wx-phases { display: flex; gap: 4px; }
.wx-phases span { display: grid; gap: 6px; min-width: 0; }
.wx-phases i { height: 10px; border-radius: 5px; background: var(--w-gold); }
.wx-phases .p1 i { background: color-mix(in srgb, var(--w-gold) 58%, transparent); } .wx-phases .p2 i { background: color-mix(in srgb, var(--w-gold) 30%, transparent); }
.wx-phases b { font: 600 17px/1 var(--wx-face); color: var(--w-hi); } .wx-phases b small { font: 500 10px var(--bk-sans); color: var(--w-3); }
.wx-phases span > small { font: 500 11px/1 var(--bk-sans); color: var(--w-3); white-space: nowrap; }
/* countdown & season */
.wx-duo { margin: auto 0; display: flex; align-items: center; gap: 18px; }
.wx-dial { position: relative; flex: none; width: 96px; height: 96px; }
.wx-dial svg { width: 96px; height: 96px; }
.wx-dial b { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font: 600 26px/1 var(--wx-face); color: var(--w-hi); }
.wx-dial b small { display: block; margin-top: 3px; font: 500 10px/1 var(--bk-sans); color: var(--w-3); }
.wx-duo__t { display: grid; gap: 8px; min-width: 0; }
.wx-duo .wx-fig { margin: 0; white-space: normal; text-wrap: balance; }
/* calendar */
.wx-mo { margin: 0; font: 600 11px/1 var(--bk-sans); color: var(--w-3); }
.wx-cal { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; font: 500 10.5px/1 var(--bk-sans); color: var(--w-2); text-align: center; }
.wx-cal i { height: 15px; line-height: 15px; font-style: normal; }
.wx-cal .is-x { color: var(--w-4); text-decoration: line-through; }
.wx-cal .is-run { background: color-mix(in srgb, var(--w-gold) 28%, transparent); color: var(--w-hi); }
.wx-cal .is-a { border-radius: 9px 0 0 9px; } .wx-cal .is-b { border-radius: 0 9px 9px 0; } .wx-cal .is-a.is-b { border-radius: 9px; }
.wx-cal .is-a, .wx-cal .is-b { background: var(--w-gold); color: var(--w-ink); font-weight: 700; }
/* plans */
.wx-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wx-plans span { display: grid; gap: 5px; padding: 10px 9px; border-radius: 12px; background: var(--w-fill); }
.wx-plans small { font: 500 10.5px/1 var(--bk-sans); color: var(--w-3); }
.wx-plans b { font: 600 19px/1 var(--wx-face); color: var(--w-hi); }
.wx-plans em { font: normal 500 10px/1.2 var(--bk-sans); color: var(--w-3); }
.wx-plans .is-on { background: var(--w-gold); } .wx-plans .is-on small, .wx-plans .is-on b, .wx-plans .is-on em { color: var(--w-ink); }
/* sizes */
.wx-sizes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.wx-sizes span { display: grid; justify-items: center; gap: 5px; padding: 11px 0; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--w-fill-2); }
.wx-sizes b { font: 600 19px/1 var(--wx-face); color: var(--w-hi); } .wx-sizes small { font: 500 10px/1 var(--bk-sans); color: var(--w-3); }
.wx-sizes .is-on { background: var(--w-gold); box-shadow: none; } .wx-sizes .is-on b, .wx-sizes .is-on small { color: var(--w-ink); }
.wx-sizes .is-x { opacity: .45; } .wx-sizes .is-x b { text-decoration: line-through; }
/* menu */
.wx-menu p { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: center; margin: 0; padding: 7px 0; border-top: 1px solid var(--w-fill); font: 500 13px/1.2 var(--bk-sans); color: var(--w-2); }
.wx-menu i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.wx-menu span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wx-menu b { font-weight: 600; color: var(--w-hi); } .wx-menu .is-on span { color: var(--w-hi); }
/* tracker */
.wx-track { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); }
.wx-track::before, .wx-track::after { content: ""; position: absolute; top: 6px; height: 2px; left: calc(50% / var(--n)); }
.wx-track::before { right: calc(50% / var(--n)); background: var(--w-fill-2); }
.wx-track::after { width: calc((100% - 100% / var(--n)) * var(--c) / (var(--n) - 1)); background: var(--w-gold); }
.wx-track li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; font: 500 11px/1 var(--bk-sans); color: var(--w-3); }
.wx-track li i { width: 14px; height: 14px; border-radius: 50%; background: var(--w-ink); box-shadow: inset 0 0 0 2px var(--w-fill-2); }
.wx-track .is-done i { background: var(--w-gold); box-shadow: none; }
.wx-track .is-on { color: var(--w-hi); font-weight: 600; }
.wx-track .is-on i { background: var(--w-hi); box-shadow: 0 0 0 4px color-mix(in srgb, var(--w-gold) 34%, transparent); }
/* grid */
.wx-grid { display: grid; grid-template-columns: auto repeat(var(--c), 1fr); gap: 5px; align-items: center; }
.wx-grid small { font: 500 10px/1 var(--bk-sans); color: var(--w-3); text-align: center; }
.wx-grid .wx-grid__r { text-align: left; padding-right: 4px; white-space: nowrap; }
.wx-grid i { height: 22px; border-radius: 6px; background: var(--w-fill); }
.wx-grid .is-free { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--w-gold) 80%, transparent); }
.wx-grid .is-on { background: var(--w-gold); }
@media (max-width: 759px) {
  .wall { height: 540px; }
  .wall__plane { transform: translate(-50%, -50%) rotateX(20deg) rotateZ(-7deg) scale(.54); }
}
@media (prefers-reduced-motion: reduce) { .wall__track { animation: none; } }

/* ═════════ 03 · THE SAME WEBSITE: a Brief (left of the divider) and a chatbot (right) ═════════ */
.chat .sh { margin-bottom: clamp(36px, 4.5vw, 64px); }
.ba__frame { position: relative; border-radius: 14px; overflow: hidden; background: #ECE7DF; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize;
  box-shadow: 0 60px 120px -50px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .1); }
.ba__chrome { position: relative; height: 44px; display: flex; align-items: center; padding: 0 16px; background: #ECE7DF; border-bottom: 1px solid #D9D2C6; color: #6B5F55; }
.ba__vp { position: relative; overflow: hidden; background: #F8F3E9; }
.ba__stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.ba__stage--d { width: 1600px; height: 968px; }
.ba__stage--p { width: 390px; height: 760px; display: none; }
.ba__layer { position: absolute; inset: 0; overflow: hidden; background: #F8F3E9; }
.ba__bot { z-index: 1; }
.ba__brief { z-index: 2; clip-path: inset(0 calc(100% - var(--cut, 50%)) 0 0); }
.ba__veil { position: absolute; inset: 0; z-index: 3; background: rgba(26, 20, 16, .5); }
.ba__sheet { position: absolute; z-index: 4; left: 0; right: 0; top: 40px; bottom: 0; border-radius: 16px 16px 0 0; overflow: hidden; box-shadow: 0 -24px 60px rgba(26, 18, 12, .3); --bk-gutter: 40px; }
.ba__sheet .spx__grid { grid-template-columns: minmax(0, 790px) 250px; gap: 60px; margin-top: 22px; }
.ba__sheet .spx__art .bk-title { font-size: 42px; }
.ba__sheet .bk-dek { font-size: 17px; }
.ba__sheet .bk-body { font-size: 18px; max-width: 44em; }
.ba__sheet .spx__pair { gap: 22px; }
.ba__sheet .bk-photo { margin: 0; aspect-ratio: auto; height: 100%; min-height: 300px; }
.ba__sheet .w-line { min-height: 0; font-size: 15px; }
.ba__sheet .drail__idx li { cursor: default; font-size: 16px; }
/* the chat widget everyone has */
.cb { position: absolute; z-index: 3; display: flex; flex-direction: column; overflow: hidden; background: #fff; color: #1d1d1f; font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif; border-radius: 20px; box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .55); }
.cb--d { right: 60px; bottom: 150px; width: 480px; height: 640px; }
.cb__head { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: #4F46E5; color: #fff; font-size: 17px; line-height: 1.2; }
.cb__head small { display: block; font-size: 14px; opacity: .75; }
.cb__av { width: 40px; height: 40px; flex: none; border-radius: 50%; background: linear-gradient(135deg, #A5B4FC, #fff); }
.cb__x { margin-left: auto; font-size: 26px; line-height: 1; opacity: .8; }
.cb__log { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 20px; overflow: hidden; background: #F4F4F6; }
.cbm { max-width: 84%; padding: 12px 16px; border-radius: 20px; font-size: 17px; line-height: 1.38; }
.cbm--bot { align-self: flex-start; background: #fff; border-bottom-left-radius: 6px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.cbm--me { align-self: flex-end; background: #4F46E5; color: #fff; border-bottom-right-radius: 6px; }
.cb__in { padding: 18px 20px; border-top: 1px solid #E5E5EA; font-size: 16px; color: #9A9AA0; }
.cb__bubble { position: absolute; z-index: 3; right: 60px; bottom: 56px; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: #4F46E5; box-shadow: 0 14px 30px -10px rgba(79, 70, 229, .8); }
.cb__bubble svg { width: 32px; height: 32px; fill: #fff; }
.js .ba .cbm { opacity: 0; transform: translateY(10px) scale(.97); transition: opacity .4s, transform .5s var(--spring); }
.ba.is-play .cbm { opacity: 1; transform: none; }
.ba.is-play .cbm:nth-child(1) { transition-delay: .2s; } .ba.is-play .cbm:nth-child(2) { transition-delay: .8s; } .ba.is-play .cbm:nth-child(3) { transition-delay: 1.6s; }
.ba.is-play .cbm:nth-child(4) { transition-delay: 2.5s; } .ba.is-play .cbm:nth-child(5) { transition-delay: 3.2s; }
/* the divider */
.ba__handle { position: absolute; z-index: 6; top: 44px; bottom: 0; left: var(--cut, 50%); width: 0; pointer-events: none; }
.ba__handle i { position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: #fff; box-shadow: 0 0 24px rgba(0, 0, 0, .3); }
.ba__handle span { position: absolute; top: 50%; left: -24px; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .5); transition: transform .3s var(--ease-out), box-shadow .3s; }
.ba__handle svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ba__frame:hover .ba__handle span, .ba.is-drag .ba__handle span { transform: scale(1.08); }
.ba__frame:focus-within .ba__handle span { box-shadow: 0 0 0 3px var(--blue), 0 10px 30px -8px rgba(0, 0, 0, .5); }
.ba__tag { position: absolute; z-index: 7; top: 60px; padding: 8px 13px; border-radius: 999px; font: 500 13px/1 var(--sans); color: #fff; background: rgba(15, 15, 18, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); pointer-events: none; }
.ba__tag--l { left: 16px; } .ba__tag--r { right: 16px; }
.ba__range { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; }
.ba__score { display: flex; justify-content: space-between; gap: 24px; margin-top: 22px; }
.ba__score .sc { margin: 0; }
.ba__score .sc--no { justify-content: flex-end; }
.ba.is-seen .sc li { opacity: 1; transform: none; }
.ba.is-seen .sc li:nth-child(2) { transition-delay: .08s; } .ba.is-seen .sc li:nth-child(3) { transition-delay: .16s; } .ba.is-seen .sc li:nth-child(4) { transition-delay: .24s; }
@media (max-width: 759px) {
  .ba__stage--d { display: none; }
  .ba__stage--p { display: block; }
  .ba__pocket { left: 0; top: 0; width: 390px; height: 760px; border-radius: 0; box-shadow: none; padding-bottom: 0; }
  .ba__pocket .pb__mast { border-radius: 0; }
  .cb--p { left: 10px; right: 10px; top: 130px; bottom: 10px; border-radius: 18px; }
  .cb--p .cb__head { padding: 14px 16px; font-size: 15px; } .cb--p .cb__head small { font-size: 12px; } .cb--p .cb__av { width: 32px; height: 32px; }
  .cb--p .cb__log { padding: 14px; gap: 9px; } .cb--p .cbm { font-size: 14.5px; padding: 10px 13px; } .cb--p .cb__in { padding: 14px 16px; font-size: 14px; }
  .ba__chrome { height: 36px; }
  .ba__handle { top: 36px; }
  .ba__tag { top: 48px; font-size: 12px; padding: 7px 10px; }
  .ba__score { flex-direction: column; gap: 12px; }
  .ba__score .sc--no { justify-content: flex-start; }
}

/* ═════════ 13 · THE CLOSER: your own Brief, set as you type ═════════ */
.closer { --cl-band: #A34F36; --cl-acc: #F6CFAE; min-height: 100vh; min-height: 100svh; overflow: hidden; transition: --cl-band 1s var(--ease-io); }
@property --cl-band { syntax: '<color>'; inherits: true; initial-value: #A34F36; }
.closer__glow { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(46% 60% at 72% 58%, color-mix(in srgb, var(--cl-band) 34%, transparent), transparent 70%); }
.closer__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 110px); align-items: center; }
.closer__h { margin: 0; font: 400 clamp(56px, 7.4vw, 132px)/.94 var(--serif-d); letter-spacing: -.04em; font-variation-settings: 'opsz' 72; }
.closer__h em { display: block; font-style: italic; font-weight: 300; color: var(--mute); }
.closer__dek { max-width: 26em; margin-top: 30px; font-size: clamp(16.5px, 1.25vw, 19px); line-height: 1.5; color: rgba(237, 234, 227, .72); }
.closer__alt { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--rule); max-width: 30em; font-size: 14px; color: rgba(237, 234, 227, .55); }
.closer__alt a { color: var(--on-ink); text-underline-offset: 3px; text-decoration-color: rgba(237, 234, 227, .3); }
.closer__stage { position: relative; padding: 0 0 170px 90px; }
/* the preview page */
.cl-page { position: relative; border-radius: 10px; overflow: hidden; background: #F8F3E9; color: #352A23; font-family: 'Source Serif 4', Georgia, serif;
  box-shadow: 0 70px 120px -50px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .06); }
.cl-band { position: relative; display: flex; align-items: center; gap: 18px; height: 104px; padding: 0 30px; background: var(--cl-band); color: #FFF7EE; transition: background-color .9s var(--ease-io); }
.cl-mark { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 1.5px solid rgba(255, 247, 238, .6); border-radius: 50%; font: 500 20px/1 'Source Serif 4', serif; }
.cl-np { min-width: 0; }
.cl-title { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 420 clamp(20px, 1.9vw, 28px)/1 'Source Serif 4', serif; letter-spacing: .16em; text-transform: uppercase; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 247, 238, .35); }
.cl-title.is-roll, .cl-name-roll { animation: cl-roll .6s var(--ease-out); }
@keyframes cl-roll { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } }
.cl-sub { margin: 9px 0 0; display: flex; align-items: center; gap: 10px; font: 500 11px/1 var(--sans); letter-spacing: .02em; opacity: .85; }
.cl-live { display: inline-flex; align-items: center; gap: 6px; } .cl-live i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: bk-live 2s ease-in-out infinite; }
.cl-bar { width: 1px; height: 11px; background: currentColor; opacity: .5; }
.cl-body { padding: 18px 30px 30px; }
.cl-meta { display: flex; justify-content: space-between; margin: 0 0 18px; padding-bottom: 10px; border-bottom: 1px solid rgba(53, 42, 35, .14); font: 500 11px/1 var(--sans); color: #8C8074; }
.cl-k { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 600 11.5px/1 var(--sans); color: var(--cl-band); transition: color .9s; }
.cl-k i { width: 7px; height: 7px; background: currentColor; }
.cl-h { margin: 0 0 16px; font: 640 clamp(26px, 2.4vw, 36px)/1.08 'Source Serif 4', serif; letter-spacing: -.015em; font-variation-settings: 'opsz' 36; text-wrap: balance; }
.cl-h em { font-style: italic; font-weight: 500; color: var(--cl-band); transition: color .9s; }
.cl-lines { display: grid; gap: 9px; margin-bottom: 22px; }
.cl-lines i { display: block; height: 9px; border-radius: 5px; background: linear-gradient(90deg, rgba(53, 42, 35, .09) 30%, rgba(53, 42, 35, .16) 50%, rgba(53, 42, 35, .09) 70%) 0 0 / 300% 100%; animation: cl-set 2.6s linear infinite; }
.cl-lines i:nth-child(2) { width: 94%; animation-delay: .15s; } .cl-lines i:nth-child(3) { width: 97%; animation-delay: .3s; } .cl-lines i:nth-child(4) { width: 58%; animation-delay: .45s; }
@keyframes cl-set { to { background-position: -150% 0; } }
.cl-asks__h { margin: 0 0 4px; font: 600 10.5px/1 var(--sans); color: #8C8074; }
.cl-asks p:not(.cl-asks__h) { display: flex; justify-content: space-between; margin: 0; padding: 10px 0; border-top: 1px solid rgba(53, 42, 35, .1); font-size: 16px; }
.cl-asks b { color: var(--cl-band); font-weight: 400; transition: color .9s; }
/* the plate: the form, floating over the page */
.cl-plate { position: absolute; left: 0; bottom: 0; width: min(430px, 82%); padding: 20px 22px 18px; border-radius: 6px; background: #FFFDF7; color: #352A23;
  box-shadow: 0 40px 70px -24px rgba(0, 0, 0, .6), 0 6px 16px rgba(0, 0, 0, .18); }
.cl-plate__k { display: flex; justify-content: space-between; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(53, 42, 35, .14); font: 600 11.5px/1 var(--sans); color: #8C8074; }
.cl-plate__k span:first-child { display: inline-flex; align-items: center; gap: 8px; color: var(--cl-band); transition: color .9s; }
.cl-plate__k i { width: 7px; height: 7px; background: currentColor; }
.cl-f { display: block; margin-bottom: 14px; }
.cl-f span { display: block; margin-bottom: 4px; font: 500 12.5px/1.2 var(--sans); color: #6B5F55; }
.cl-f input { width: 100%; height: 44px; padding: 0; border: 0; border-bottom: 1.5px solid rgba(53, 42, 35, .2); border-radius: 0; background: transparent; color: #352A23;
  font: 400 24px/1 'Source Serif 4', Georgia, serif; letter-spacing: -.01em; transition: border-color .25s; }
.cl-f input::placeholder { color: #B5A99A; font-style: italic; }
.cl-f input:focus { outline: none; border-bottom-color: var(--cl-band); }
.cl-f--s input { height: 38px; font-size: 18px; }
.cl-f.is-bad input { border-bottom-color: #D6402E; }
.cl-plate .btn--full { margin-top: 6px; }
.cl-plate .card-form__msg:not(:empty) { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: #F3EDE2; font-size: 14px; }
.cl-plate.is-sent .fld, .cl-plate.is-sent button { display: none; }
@media (max-width: 1099px) {
  .closer__in { grid-template-columns: 1fr; }
  .closer__stage { padding: 0 0 0; }
  .cl-plate { position: relative; width: auto; margin: -70px 18px 0; }
}
@media (max-width: 759px) {
  .cl-band { height: 84px; padding: 0 18px; gap: 12px; }
  .cl-mark { width: 36px; height: 36px; font-size: 17px; }
  .cl-body { padding: 14px 18px 90px; }
  .cl-meta span:last-child { display: none; }
  .cl-plate { margin: -60px 10px 0; padding: 16px 16px 14px; }
  .cl-f input { font-size: 21px; }
}
.cl-plate .cl-f input { padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
.cl-plate .cl-f input:focus { box-shadow: none; }

/* ═════════ 10 · PRICING, answered like a Brief would ═════════ */
.pricing .sh { margin-bottom: clamp(36px, 4vw, 56px); }

/* ═════════ 07 · YOUR BRAND: the page, and what we learned, floating round it ═════════ */
.brand__tabs { display: flex; flex-wrap: wrap; gap: 4px; width: max-content; max-width: 100%; margin: -24px 0 clamp(40px, 5vw, 64px); padding: 5px; border: 0; border-radius: 999px;
  background: rgba(15, 15, 18, .05); box-shadow: inset 0 0 0 1px rgba(15, 15, 18, .06); }
.brand__tab { height: 40px; padding: 0 16px 0 12px; border-radius: 999px; opacity: .62; gap: 9px; transition: opacity .3s, background .3s, box-shadow .3s; }
.brand__tab:hover { opacity: 1; }
.brand__tab[aria-selected="true"] { opacity: 1; background: #fff; box-shadow: 0 1px 2px rgba(15, 15, 18, .08), 0 8px 18px -10px rgba(15, 15, 18, .3); }
.brand__tab i { width: 12px; height: 12px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.brand__tab .brand__tick { top: auto; bottom: 4px; left: 16px; width: calc(100% - 32px); height: 1.5px; border-radius: 1px; opacity: .35; }
.brand__stage { position: relative; padding: 40px clamp(0px, 13vw, 210px) 60px; }
.brand__page { border-radius: 12px; box-shadow: 0 70px 120px -60px rgba(40, 30, 15, .55), 0 0 0 1px rgba(15, 15, 18, .06); }
.brand__tokens { position: absolute; inset: 0; pointer-events: none; }
.tk { position: absolute; z-index: 5; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .86); color: var(--ink);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(15, 15, 18, .06), 0 30px 50px -28px rgba(30, 22, 12, .45), 0 4px 10px -4px rgba(30, 22, 12, .12);
  animation: tk-in .8s var(--ease-out) both; animation-delay: calc(var(--d) * 70ms); }
@keyframes tk-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.tk__h { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 10px; font: 600 11.5px/1 var(--sans); color: var(--ink-4); }
.tk__h span { font-weight: 500; }
.tk--from { left: clamp(0px, 4vw, 60px); top: 0; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 999px; font: 500 13px/1 var(--sans); white-space: nowrap; }
.tk--from b { font-weight: 600; }
.tk__dot { width: 8px; height: 8px; border-radius: 50%; background: #1DB954; box-shadow: 0 0 0 4px rgba(29, 185, 84, .15); }
.tk--from em { font-style: normal; font-weight: 700; color: #1DB954; }
.tk--col { left: 0; top: 26%; width: 200px; }
.tk__sw { display: grid; gap: 8px; }
.tk__sw span { display: flex; align-items: center; gap: 10px; font: 500 12px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.tk__sw i { width: 26px; height: 26px; border-radius: 8px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.tk--type { right: 0; top: 10%; width: 190px; }
.tk__aa { margin: 0 0 6px; font-size: 54px; line-height: 1; color: var(--ink); }
.tk--type small { font: 500 12px/1.35 var(--sans); color: var(--ink-3); }
.tk--ph { right: clamp(0px, 2vw, 30px); bottom: 12%; width: 210px; }
.tk__imgs { display: grid; grid-template-columns: 1.3fr 1fr; gap: 6px; }
.tk__imgs img { width: 100%; height: 76px; object-fit: cover; border-radius: 8px; }
.tk--voice { left: clamp(0px, 3vw, 40px); bottom: 4%; width: 220px; }
.tk__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tk__chips span { padding: 6px 10px; border-radius: 999px; background: rgba(15, 15, 18, .05); font: 500 12.5px/1 var(--sans); color: var(--ink-2); }
@media (max-width: 1099px) {
  .brand__tabs { width: auto; border-radius: 22px; }
  .brand__stage { padding: 56px 0 0; }
  .brand__tokens { position: relative; inset: auto; display: flex; gap: 12px; margin-top: 18px; overflow-x: auto; padding: 4px 2px 18px; scrollbar-width: none; pointer-events: auto; }
  .brand__tokens::-webkit-scrollbar { display: none; }
  .tk { position: relative; inset: auto !important; flex: none; }
  .tk--from { position: absolute; top: -52px !important; left: 0 !important; }
}
@media (max-width: 759px) {
  .brand__tab { height: 36px; padding: 0 12px 0 10px; font-size: 12.5px; }
  .tk--col, .tk--type, .tk--ph, .tk--voice { width: 200px; }
}

/* ═════════ 10 · PROOF: in good company ═════════ */
.pr { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 110px); align-items: center; }
.pr__l .sh__dek { margin-top: 24px; }
.pr__r { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; height: clamp(520px, 44vw, 640px); overflow: hidden;
  -webkit-mask: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.pr__col { display: grid; gap: 14px; align-content: start; will-change: transform; }
.pr__col:nth-child(1) { padding-top: 90px; } .pr__col:nth-child(2) { padding-top: 20px; } .pr__col:nth-child(3) { padding-top: 150px; }
.pt { position: relative; margin: 0; height: clamp(170px, 14vw, 210px); display: grid; place-items: center; padding: 0 22px; border-radius: 18px; background: #FBFAF7; text-decoration: none; color: var(--ink);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(15, 15, 18, .05), 0 24px 40px -30px rgba(40, 28, 14, .35); transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.pt:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(15, 15, 18, .06), 0 34px 50px -30px rgba(40, 28, 14, .45); }
.pt__n { position: absolute; left: 16px; top: 14px; font: 500 11.5px/1 var(--sans); color: var(--ink-4); font-variant-numeric: tabular-nums; }
.pt img { max-width: 100%; height: 34px; width: auto; object-fit: contain; filter: grayscale(1) contrast(1.1); mix-blend-mode: multiply; opacity: .78; transition: filter .4s, opacity .4s; }
.pt:hover img { filter: none; opacity: 1; }
.pt img[src$="caporn-young.png"] { height: 20px; } .pt img[src$="locus.svg"] { height: 16px; } .pt img[src$="scotch.png"] { height: 50px; } .pt img[src$="soilux.webp"] { height: 30px; }
.pt--you { background: var(--ink); color: var(--on-ink); text-align: center; align-content: center; gap: 6px; }
.pt--you .pt__n { color: rgba(237, 234, 227, .45); }
.pt--you b { font: 400 24px/1.05 var(--serif-d); letter-spacing: -.02em; }
.pt--you small { font: 500 13px/1 var(--sans); color: var(--blue-lite); }
.proof .goask { margin-top: 34px; grid-template-columns: 1fr; grid-template-areas: "k" "t" "s" "u"; gap: 10px; padding: 26px 26px 24px; border: 0; border-radius: 20px; background: var(--ink); color: var(--on-ink);
  box-shadow: 0 40px 70px -40px rgba(20, 14, 8, .6); transition: transform .6s var(--ease-out); }
.proof .goask:hover { transform: translateY(-3px); }
.proof .goask__k { color: rgba(237, 234, 227, .55); }
.proof .goask__t { font-size: clamp(30px, 2.8vw, 44px); }
.proof .goask__t em { color: rgba(237, 234, 227, .5); }
.proof .goask__s { color: rgba(237, 234, 227, .66); font-size: 15px; }
.proof .goask__u { justify-self: start; margin-top: 8px; height: 44px; background: #fff; color: var(--ink); box-shadow: none; }
.proof .goask:hover .goask__u { background: var(--blue); color: #fff; }
@media (max-width: 1099px) { .pr { grid-template-columns: 1fr; } .pr__r { height: 520px; } }
@media (max-width: 759px) { .pr__r { grid-template-columns: repeat(2, minmax(0, 1fr)); height: 440px; } .pr__col:nth-child(3) { display: none; } .pt { height: 150px; } }

/* ═════════ 13 · FOUNDERS: the name on the photograph ═════════ */
.fdr__ph { border-radius: 20px; aspect-ratio: 4 / 3; margin-bottom: 20px; }
.fdr__ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 50%, rgba(0, 0, 0, .62)); pointer-events: none; }
.fdr__chip { position: absolute; z-index: 2; right: 14px; top: 14px; padding: 7px 11px; border-radius: 999px; background: rgba(15, 15, 18, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 500 12px/1 var(--sans); color: rgba(255, 255, 255, .88); }
.fdr__ph .fdr__tag { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 20px; padding: 0; background: none; font: inherit; text-transform: none; letter-spacing: 0; color: #fff; }
.fdr__tag .fdr__r { display: block; margin: 0 0 8px; padding: 0; border: 0; color: rgba(255, 255, 255, .72); }
.fdr__tag .fdr__n { margin: 0; color: #fff; font-size: clamp(30px, 2.8vw, 44px); }
.fdr__p:hover .fdr__ph img { filter: grayscale(.15); }

/* ═════════ 03 · NOT A CHATBOT: a thread, edited into a page ═════════ */
.mo-sec { padding-bottom: 0; }
.mo-sec .mk { margin-bottom: 0; }
.mo { position: relative; height: 330vh; height: 330svh; }
.mo__stage { position: sticky; top: 0; height: 100vh; height: 100svh; }
.mo__in { display: grid; grid-template-columns: minmax(0, .42fr) minmax(0, .58fr); gap: clamp(28px, 4vw, 72px); align-items: center; height: 100%; padding: calc(var(--hd-h) + 20px) 0 28px; }
.mo__h { margin: 0 0 30px; font: 400 clamp(34px, 3.4vw, 56px)/1.02 var(--serif-d); letter-spacing: -.032em; font-variation-settings: 'opsz' 72; text-wrap: balance; }
.mo__h em { display: block; font-style: italic; font-weight: 300; color: var(--mute); }
.mo__steps { list-style: none; margin: 0; padding: 0; }
.mo__steps li { position: relative; display: grid; grid-template-columns: 34px 1fr; padding: 15px 0 16px; cursor: pointer; opacity: .38; transition: opacity .5s var(--ease-out); }
.mo__steps li.is-on { opacity: 1; } .mo__steps li.is-done { opacity: .6; }
.mo__n { grid-row: 1 / 3; font: 500 12.5px/1.5 var(--sans); color: var(--blue); font-variant-numeric: tabular-nums; }
.mo__steps b { font: 400 21px/1.2 var(--serif-d); letter-spacing: -.015em; }
.mo__steps small { display: grid; grid-template-rows: 0fr; overflow: hidden; font: 400 14.5px/1.45 var(--sans); color: var(--ink-3); transition: grid-template-rows .6s var(--ease-out), margin .6s; }
.mo__steps li.is-on small { grid-template-rows: 1fr; margin-top: 6px; }
.mo__bar { position: absolute; left: 34px; right: 0; bottom: 0; height: 1px; background: var(--rule); }
.mo__bar i { position: absolute; inset: 0; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--f, 0)); }
.mo__view { position: relative; height: min(100%, 780px); }
.mo__cv { position: absolute; left: 50%; top: 50%; width: 440px; height: 620px; transform-origin: 50% 50%; }
/* the chat window (everyone's) */
.mo__win { position: absolute; left: 20px; top: 0; width: 400px; height: 620px; border-radius: 22px; background: #fff; overflow: hidden; transform-origin: 50% 50%;
  box-shadow: 0 50px 90px -40px rgba(20, 14, 30, .45), 0 0 0 1px rgba(15, 15, 18, .06); font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif; }
.mo__win::before { content: ""; position: absolute; left: 0; right: 0; top: 62px; bottom: 58px; background: #F6F6F8; }
.mo__wh { position: relative; display: flex; align-items: center; gap: 12px; height: 62px; padding: 0 18px; background: #4F46E5; color: #fff; font-size: 14.5px; line-height: 1.2; }
.mo__wh small { display: block; font-size: 12px; opacity: .75; }
.mo__av { width: 34px; height: 34px; flex: none; border-radius: 50%; background: linear-gradient(135deg, #A5B4FC, #fff); }
.mo__x { margin-left: auto; font-size: 22px; opacity: .8; }
.mo__wi { position: absolute; left: 0; right: 0; bottom: 0; height: 58px; display: flex; align-items: center; padding: 0 18px; border-top: 1px solid #E5E5EA; font-size: 14px; color: #9A9AA0; }
/* the page it becomes */
.mo__sheet { position: absolute; left: 20px; top: 0; width: 400px; height: 620px; border-radius: 22px; background: #FCFBF8; opacity: 0;
  box-shadow: 0 60px 100px -50px rgba(40, 28, 14, .45), 0 0 0 1px rgba(15, 15, 18, .06); }
.mo__sheet::before { content: ""; position: absolute; left: 26px; right: 26px; top: 16px; height: 1px; background: var(--ink); }
.mo__kick { position: absolute; left: 26px; right: 26px; top: 26px; display: flex; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid rgba(15, 15, 18, .1); opacity: 0;
  font: 600 11px/1 var(--sans); color: var(--ink-4); }
.mo__kick > span:first-child { display: inline-flex; align-items: center; gap: 7px; color: #A34F36; }
.mo__kick i { width: 6px; height: 6px; background: currentColor; }
.mo__title { position: absolute; left: 26px; right: 26px; top: 50px; margin: 0; opacity: 0; font: 640 27px/1.08 'Source Serif 4', Georgia, serif; letter-spacing: -.015em; color: #352A23; font-variation-settings: 'opsz' 36; }
.mo__title em { font-style: italic; font-weight: 500; color: #A34F36; }
.mo__by { position: absolute; left: 26px; right: 26px; top: 578px; display: flex; justify-content: space-between; align-items: center; padding-top: 9px; border-top: 1px solid rgba(53, 42, 35, .1); opacity: 0;
  font: italic 400 12.5px/1 'Source Serif 4', Georgia, serif; color: #6B5F55; }
.mo__by strong { font-style: normal; font-weight: 600; color: #352A23; }
.mo__src { font: 500 10.5px/1 var(--sans); font-style: normal; padding: 4px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(53, 42, 35, .18); }
/* each bubble: a chat face and a page face */
.mo__b { position: absolute; left: 0; top: 0; }
.mo__c { position: absolute; inset: 0; display: block; padding: 12px 14px; border-radius: 18px; font: 400 14.5px/1.4 -apple-system, 'Helvetica Neue', Arial, sans-serif; }
.mo__c--bot { background: #fff; color: #1d1d1f; border-bottom-left-radius: 6px; box-shadow: 0 1px 2px rgba(0, 0, 0, .07); }
.mo__c--me { background: #4F46E5; color: #fff; border-bottom-right-radius: 6px; }
.mo__c u { color: #4F46E5; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
/* the strike draws across every line of the filler at once (each line box carries its own copy) */
.mo__f { text-decoration: none; background: linear-gradient(#E5484D, #E5484D) no-repeat 0 58% / calc(var(--s, 0) * 100%) 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mo__c::after { content: ""; position: absolute; left: 12px; right: 12px; top: 50%; height: 2px; border-radius: 1px; background: #E5484D; transform-origin: 0 50%; transform: scaleX(var(--x, 0)); }
.mo__b[data-b="2"] .mo__c::after, .mo__b[data-b="3"] .mo__c::after, .mo__b[data-b="5"] .mo__c::after, .mo__b[data-b="7"] .mo__c::after { display: none; }
.mo__p { position: absolute; left: 0; top: 0; width: 100%; margin: 0; opacity: 0; }
.mo__p--dek { font: italic 400 15.5px/1.4 'Source Serif 4', Georgia, serif; color: #6B5F55; padding-bottom: 8px; border-bottom: 1px dotted rgba(53, 42, 35, .2); }
.mo__p--body { font: 400 16px/1.52 'Source Serif 4', Georgia, serif; color: #352A23; text-align: justify; }
.mo__p--ph { height: 100%; overflow: hidden; border-radius: 3px; background: #EDE5D8; }
.mo__p--ph img { width: 100%; height: 100%; object-fit: cover; }
.mo__p--ph figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 9px; background: linear-gradient(transparent, rgba(35, 24, 18, .6)); font: italic 400 12px 'Source Serif 4', serif; color: #fff; }
.mo__p--w .w-tile { padding: 16px 18px 14px; }
.mo__p--w .w-fig { margin-top: 10px; font-size: 36px; }
.mo__p--w .w-ctl { margin-top: 10px; }
@media (max-width: 1099px), (max-aspect-ratio: 23/20) {
  .mo__in { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); align-items: stretch; gap: 14px; padding-bottom: 18px; }
  .mo__h { margin-bottom: 8px; font-size: clamp(24px, 4.2vw, 34px); }
  .mo__h em { display: inline; }
  .mo__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .mo__steps li { grid-template-columns: 1fr; padding: 8px 0 10px; }
  .mo__n { grid-row: auto; }
  .mo__steps b { font-size: 15px; }
  .mo__steps small { display: none; }
  .mo__bar { left: 0; }
  .mo__view { height: 100%; }
}
@media (max-width: 759px) {
  .mo { height: 300vh; height: 300svh; }
  .mo__h { font-size: 23px; }
  .mo__steps b { font-size: 13px; }
}

/* the brand page always fits one screen: it is drawn at 1080px and scaled into the stage */
.brand .sh { margin-bottom: 18px; }
.brand .h2 { font-size: clamp(38px, 4vw, 64px); }
.brand__tabs { margin: 0 0 18px; }
.brand__stage { height: calc(100vh - var(--hd-h) - 36px); height: calc(100svh - var(--hd-h) - 36px); min-height: 460px; padding: 30px clamp(0px, 12vw, 200px) 26px; display: grid; place-items: center; }
.brand__fit { position: relative; }
.brand__fit > .brand__page { position: absolute; left: 0; top: 0; width: 1080px; transform-origin: 0 0; }
@media (max-width: 1099px) { .brand__stage { height: auto; min-height: 0; display: block; padding: 56px 0 0; } .brand__fit { margin: 0 auto; } }
@media (max-width: 759px) { .brand__fit { width: auto !important; height: auto !important; } .brand__fit > .brand__page { position: relative; width: auto; transform: none !important; } }

/* the live Brief (briefs.ringlioai.com/t/ringlio-ai), shown once it posts ringlio:brief:ready */
.fp__embed { position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none; border-radius: 18px; overflow: hidden; }
.fp__embed iframe { display: block; width: 100%; height: 100%; border: 0; background: #FBFAF7; }
.fp.is-live .fp__band, .fp.is-live .fp__meta, .fp.is-live .fp__grid { display: none; }
.fp.is-live .fp__embed { position: relative; inset: auto; z-index: 1; opacity: 1; pointer-events: auto; height: calc(100vh - var(--hd-h) - 64px); height: calc(100svh - var(--hd-h) - 64px); min-height: 560px;
  animation: live-in .9s var(--ease-out); }
@keyframes live-in { from { opacity: 0; transform: translateY(10px); } }
.fp__shield { position: absolute; inset: 0; z-index: 2; display: grid; place-items: end center; padding-bottom: 26px; border: 0; background: transparent; cursor: pointer; }
.fp__shield span { padding: 10px 16px; border-radius: 999px; background: rgba(15, 15, 18, .78); color: #fff; font: 500 13.5px/1 var(--sans); opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .4s var(--ease-out);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.fp__shield:hover span, .fp__shield:focus-visible span { opacity: 1; transform: none; }
.fp__embed.is-open .fp__shield { display: none; }
@media (hover: none) { .fp__shield span { opacity: 1; transform: none; } }
@media (max-width: 759px) { .fp.is-live .fp__embed { height: calc(100svh - var(--hd-h) - 120px); min-height: 480px; border-radius: 16px; } }

/* ═════════ 06 · YOUR BRAND, as a sidebar: the kits and what we learned on the left, the page fills the right ═════════ */
.brand .mk { margin-bottom: 22px; }
.brand__grid { display: grid; grid-template-columns: minmax(260px, 310px) minmax(0, 1fr); gap: clamp(28px, 3.4vw, 56px); align-items: start; }
.brand__side { display: grid; gap: 18px; align-content: start; }
.brand__h { margin: 0; font: 400 clamp(34px, 3vw, 48px)/1.02 var(--serif-d); letter-spacing: -.032em; font-variation-settings: 'opsz' 72; }
.brand__h em { font-style: italic; font-weight: 300; color: var(--mute); }
.brand__dek { font-size: 15px; line-height: 1.45; color: var(--ink-3); }
.brand .brand__tabs { display: grid; grid-template-columns: 1fr; gap: 2px; width: auto; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; }
.brand .brand__tab { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; height: 40px; padding: 0 12px; border-radius: 10px; opacity: .6; font: 500 14px/1 var(--sans); text-align: left; }
.brand .brand__tab small { font: 500 11.5px/1 var(--sans); color: var(--ink-4); white-space: nowrap; }
.brand .brand__tab:hover { opacity: 1; background: rgba(15, 15, 18, .04); }
.brand .brand__tab[aria-selected="true"] { opacity: 1; background: #fff; box-shadow: 0 1px 2px rgba(15, 15, 18, .08), 0 8px 18px -12px rgba(15, 15, 18, .3); }
.brand .brand__tab .brand__tick { left: 12px; right: 12px; width: auto; bottom: 3px; top: auto; }
.brand__tn { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.brand__spec { display: grid; gap: 0; padding: 14px 16px 6px; border-radius: 16px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(15, 15, 18, .05), 0 24px 40px -30px rgba(30, 22, 12, .35); }
.bs__from { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); font: 500 12.5px/1.2 var(--sans); color: var(--ink-3); }
.bs__from b { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs__from i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #1DB954; box-shadow: 0 0 0 3px rgba(29, 185, 84, .15); }
.bs__from em { margin-left: auto; font-style: normal; color: #1DB954; font-weight: 700; }
.bs__row { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 4px 10px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.bs__row:last-child { border-bottom: 0; }
.bs__h { margin: 0; font: 500 12px/1 var(--sans); color: var(--ink-4); }
.bs__sw { display: flex; gap: 6px; }
.bs__sw i { width: 24px; height: 24px; border-radius: 7px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.bs__aa { margin: 0; font-size: 30px; line-height: 1; }
.bs__row small { grid-column: 2; font: 500 12px/1.3 var(--sans); color: var(--ink-3); }
.bs__row:first-of-type small, .bs__row:last-child small { grid-column: auto; }
.bs__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.bs__chips span { padding: 5px 9px; border-radius: 999px; background: rgba(15, 15, 18, .05); font: 500 12px/1 var(--sans); color: var(--ink-2); }
.brand .brand__stage { height: calc(100vh - var(--hd-h) - 100px); height: calc(100svh - var(--hd-h) - 100px); min-height: 520px; padding: 0; display: grid; place-items: center; }
@media (max-width: 1099px) {
  .brand__grid { grid-template-columns: 1fr; }
  .brand .brand__tabs { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter); }
  .brand .brand__tabs::-webkit-scrollbar { display: none; }
  .brand .brand__tab small { display: none; }
  .brand__spec { display: none; }
  .brand .brand__stage { height: auto; min-height: 0; display: block; }
}
@media (min-width: 1100px) and (max-height: 820px) {
  .brand__side { gap: 12px; }
  .brand__dek { display: none; }
  .brand .brand__tab { height: 34px; }
  .bs__row:nth-of-type(n+3) { display: none; }
  .brand__spec { padding-bottom: 2px; }
}

/* the selector on the left; the page and its floating cards on the right */
.brand .brand__stage { position: relative; padding: 44px clamp(48px, 6vw, 110px) 34px; }
.brand .brand__tokens { position: absolute; inset: 0; pointer-events: none; }
.brand .tk--from { left: clamp(60px, 7vw, 130px); top: 0; }
.brand .tk--col { left: 0; top: 24%; width: 186px; }
.brand .tk--type { right: 0; top: 9%; width: 180px; }
.brand .tk--ph { right: 8px; bottom: 11%; width: 204px; }
.brand .tk--voice { left: 12px; bottom: 6%; width: 206px; }
@media (min-width: 1100px) and (max-height: 820px) { .brand .tk--ph { display: none; } .brand .tk__aa { font-size: 42px; } }
@media (max-width: 1099px) { .brand .brand__stage { padding: 56px 0 0; } .brand .brand__tokens { position: relative; inset: auto; } }

/* ═════════ 1 Oct · the FAQ is gone; its facts now live in the pricing card ═════════ */

/* 06 · the kits as a slim dark tab rail: each business's mark on its own band colour, one highlight that slides */
.brand .brand__tabs { position: relative; display: grid; grid-template-columns: 1fr; gap: 2px; width: 100%; max-width: 252px; margin: 8px 0 0; padding: 6px; border-radius: 16px;
  background: #16161B; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 0 1px rgba(15, 15, 18, .9), 0 30px 50px -30px rgba(15, 15, 18, .6); }
.brand .brand__tab { position: relative; z-index: 1; display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 11px; width: 100%; height: 42px; padding: 0 12px 0 8px;
  border-radius: 11px; background: none; box-shadow: none; opacity: 1; color: rgba(237, 234, 227, .52); font: 500 14px/1 var(--sans); letter-spacing: -.005em; text-align: left; transition: color .35s, background .35s; }
.brand .brand__tab:hover { background: rgba(255, 255, 255, .045); color: rgba(237, 234, 227, .88); }
.brand .brand__tab[aria-selected="true"] { background: none; box-shadow: none; color: #fff; }
.brand .brand__tab small { display: none; }
.brand .brand__tab i { position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  opacity: .72; filter: saturate(.7); transition: opacity .35s, filter .35s; }
.brand .brand__tab i::after { content: ""; width: 15px; height: 15px; background: var(--si, #fff); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.brand .brand__tab:hover i, .brand .brand__tab[aria-selected="true"] i { opacity: 1; filter: none; }
.brand .brand__tab .brand__tick { left: 45px; right: 12px; width: auto; top: auto; bottom: 7px; height: 1.5px; border-radius: 1px; background: rgba(255, 255, 255, .5); opacity: .7; }
.brand__ind { position: absolute; z-index: 0; left: 0; top: 0; width: 0; height: 0; border-radius: 11px; pointer-events: none;
  background: rgba(255, 255, 255, .095); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 6px 14px -8px rgba(0, 0, 0, .6); }
.brand__tabs.is-ready .brand__ind { transition: transform .55s var(--apple), width .55s var(--apple), height .55s var(--apple); }
@media (min-width: 1100px) and (max-height: 820px) { .brand .brand__tab { height: 36px; } .brand .brand__tab .brand__tick { bottom: 5px; } }
@media (max-width: 1099px) {
  /* a 1fr track is minmax(auto, 1fr): the tab strip's full width would set the column, and the page with it */
  .brand__grid, .brand__side { grid-template-columns: minmax(0, 1fr); }
  .brand .brand__tabs { display: flex; gap: 2px; width: auto; max-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 5px var(--gutter); border-radius: 0; overflow-x: auto; scrollbar-width: none; }
  .brand .brand__tab { width: auto; flex: none; grid-template-columns: 22px auto; gap: 9px; height: 38px; padding: 0 14px 0 7px; }
  .brand .brand__tab i { width: 22px; height: 22px; border-radius: 7px; }
  .brand .brand__tab i::after { width: 13px; height: 13px; }
  .brand .brand__tab .brand__tick { left: 38px; bottom: 5px; }
}
/* tablets and narrow windows: the six kits as an even three-by-two card, not a strip that wraps four and two */
@media (min-width: 760px) and (max-width: 1099px) {
  .brand .brand__tabs { display: grid; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 5px; border-radius: 16px; overflow: visible; }
  .brand .brand__tab { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .brand__tabs.is-ready .brand__ind { transition: none; } }

/* 09 · pricing: one card, set like a Brief answer: the figure, what's in it, and the road to live */
.pricing .sh { margin-bottom: clamp(32px, 3.6vw, 52px); }
.pricing .mk { margin-bottom: clamp(40px, 5vw, 76px); }
.pc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "price incl" "steps steps"; border-radius: 24px; background: #F7F5F0; color: var(--ink);
  box-shadow: inset 0 1px 0 #fff, 0 60px 110px -60px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .06); overflow: hidden; }
.pc__price { grid-area: price; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(28px, 3.4vw, 52px) clamp(28px, 3.6vw, 56px) clamp(28px, 3.2vw, 44px); }
.pc__incl { grid-area: incl; padding: clamp(28px, 3.4vw, 52px) clamp(28px, 3.6vw, 56px) clamp(24px, 3vw, 40px); border-left: 1px solid rgba(15, 15, 18, .1); }
.pc__q { margin: 0 0 22px; font: italic 300 clamp(19px, 1.5vw, 22px)/1.2 var(--serif-d); letter-spacing: -.01em; color: var(--ink-4); font-variation-settings: 'opsz' 36; }
.pc__fig { display: flex; align-items: flex-start; margin: 0 0 clamp(24px, 2.6vw, 34px); font: 300 clamp(104px, 10.2vw, 150px)/.8 var(--serif-d); letter-spacing: -.055em; color: var(--ink);
  font-variation-settings: 'opsz' 72; font-feature-settings: 'lnum' 1; font-variant-numeric: lining-nums; }
.pc__cur { margin: .07em .08em 0 0; font-size: .2em; letter-spacing: -.01em; color: var(--ink-3); }
.pc__v { padding-top: .04em; }
.pc__per { align-self: flex-end; margin: 0 0 .02em .16em; font: italic 300 clamp(20px, 1.7vw, 26px)/1 var(--serif-d); letter-spacing: -.01em; color: var(--ink-4); }
.pc__terms { width: 100%; margin: 0 0 clamp(26px, 3vw, 36px); }
.pc__terms div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-top: 1px solid rgba(15, 15, 18, .1); }
.pc__terms div:last-child { border-bottom: 1px solid rgba(15, 15, 18, .1); }
.pc__terms dt { font: 400 15.5px/1.3 var(--sans); color: var(--ink-3); }
.pc__terms dd { margin: 0; font: 600 15.5px/1.3 var(--sans); color: var(--ink); white-space: nowrap; }
.pc__acts { margin-top: auto; display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; gap: 12px 26px; }
.pc__cta { grid-area: 1 / 1; }
/* the second way in, straight to paying: hidden until pay.js holds a payment link */
.pc__buy { grid-area: 1 / 2; justify-self: start; display: none; color: var(--ink-2); }
.can-buy .pc__buy { display: inline-flex; }
/* a line under the main button: the Brief is free to see. It takes its button's width */
.pc__note { align-self: start; margin: 0; font: 400 13px/1.45 var(--sans); letter-spacing: -.003em; color: var(--ink-3); }
.pc__note--free { grid-area: 2 / 1; width: 0; min-width: 100%; }
@media (max-width: 479px) {
  .pc__acts { grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
  .pc__cta, .pc__buy, .pc__note--free { grid-area: auto; }
  .pc__cta { justify-self: start; }
  .pc__note--free { order: 1; width: auto; min-width: 0; }
  .pc__buy { order: 2; }
}
.pc__lab { margin: 0 0 14px; font: 500 13px/1.3 var(--sans); color: var(--ink-4); }
.pc__list { list-style: none; margin: 0; padding: 0; counter-reset: pc; }
.pc__list li { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: baseline; padding: 12px 0; border-top: 1px solid rgba(15, 15, 18, .1);
  font: 400 clamp(16px, 1.2vw, 18px)/1.35 var(--serif-d); letter-spacing: -.008em; color: var(--ink-2); counter-increment: pc; font-variation-settings: 'opsz' 24; }
.pc__list li:last-child { border-bottom: 1px solid rgba(15, 15, 18, .1); }
.pc__list li::before { content: counter(pc, decimal-leading-zero); font: 500 11.5px/1 var(--sans); color: var(--ink-4); font-variant-numeric: tabular-nums; }
.pc__steps { grid-area: steps; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; padding: 22px clamp(28px, 3.6vw, 56px) 24px; border-top: 1px solid rgba(15, 15, 18, .1); background: #F0EDE6; }
.pc__steps .pc__lab { margin: 0; font: 400 clamp(19px, 1.5vw, 22px)/1.2 var(--serif-d); letter-spacing: -.012em; color: var(--ink); font-variation-settings: 'opsz' 36; }
.pc__track { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0 0 0 clamp(28px, 3.6vw, 56px); list-style: none; }
.pc__track li { position: relative; display: grid; align-content: start; gap: 10px; font: 500 13px/1.25 var(--sans); color: var(--ink-3); }
.pc__track li::before { content: ""; position: absolute; left: 12px; right: 0; top: 5px; height: 1px; background: rgba(15, 15, 18, .16); }
.pc__track li:last-child::before { display: none; }
.pc__track i { position: relative; width: 11px; height: 11px; border-radius: 50%; background: #F0EDE6; box-shadow: inset 0 0 0 1.5px var(--ink); }
.pc__track .is-live i { background: var(--blue); box-shadow: 0 0 0 4px rgba(61, 90, 254, .16); }
.pc__track .is-live span { color: var(--ink); }
@media (max-width: 899px) {
  .pc { grid-template-columns: 1fr; grid-template-areas: "price" "incl" "steps"; }
  .pc__incl { border-left: 0; border-top: 1px solid rgba(15, 15, 18, .1); }
  .pc__steps { grid-template-columns: 1fr; gap: 18px; }
  .pc__track { padding: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .pc__track li:nth-child(2)::before { display: none; }
}

/* 10 · founders now sit on paper, between the ink of pricing and the closer */
.founders.sec--paper .fdr__b { color: var(--ink-3); }
.founders.sec--paper .fdr__ph { background: #D9D4CA; }

/* ═════════ 1 Oct · v12: the review fixes ═════════ */

/* 02 · the film's marker lives in the pinned column, clear of the door as it flies down to the panel */
.hw__side .mk--col { margin: 0 0 clamp(26px, 3vw, 40px); }
.hw__side .mk--col .mk__t { gap: clamp(28px, 3vw, 48px); }

/* 03 · Not a chatbot is Kestrel Hill College's page (navy, gold, Bodoni), so Alder & Coast isn't everywhere */
.mo--kestrel .mo__sheet { background: #FFFDF8; }
.mo--kestrel .mo__sheet::before { background: #14213D; }
.mo--kestrel .mo__kick > span:first-child { color: #9C7A24; }
.mo--kestrel .mo__title { font: 600 26px/1.1 'Bodoni Moda', Georgia, serif; letter-spacing: -.005em; color: #14213D; font-variation-settings: normal; }
.mo--kestrel .mo__title em { font-weight: 500; color: #9C7A24; }
.mo--kestrel .mo__by { color: #5A6275; border-top-color: rgba(26, 34, 51, .1); }
.mo--kestrel .mo__by strong { color: #1A2233; }
.mo--kestrel .mo__src { box-shadow: inset 0 0 0 1px rgba(26, 34, 51, .18); }
.mo--kestrel .mo__p--dek { color: #5A6275; border-bottom-color: rgba(26, 34, 51, .2); }
.mo--kestrel .mo__p--body { color: #1A2233; }
.mo--kestrel .mo__p--ph { background: #E9E2CF; }
.mo--kestrel .mo__p--ph img { object-position: 50% 58%; }

/* 07 · the Desk: four tiles; the feed is already full when you arrive */
.bt--feed .dk__list { min-height: 0; }

/* 10 · founders: the headline on one line, the portraits wide and shorter, so the section is about a screen */
.founders .sh { margin-bottom: clamp(32px, 4vw, 56px); }
.founders .mk { margin-bottom: clamp(40px, 5vw, 76px); }
@media (min-width: 760px) { .founders .fdr__ph { aspect-ratio: 16 / 9; } .founders .fdr__ph img { object-position: 50% 28%; } }

/* 11 · the closer: one optional question about the business, and the page asks what that kind of business gets asked */
.cl-f select { width: 100%; height: 40px; padding: 0 28px 0 0; border: 0; border-bottom: 1.5px solid rgba(53, 42, 35, .2); border-radius: 0; background: transparent; color: #352A23; cursor: pointer;
  -webkit-appearance: none; appearance: none; font: 400 19px/1 'Source Serif 4', Georgia, serif; letter-spacing: -.01em; transition: border-color .25s;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236B5F55' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 4px center; background-size: 12px 8px; }
.cl-f select.is-empty { color: #B5A99A; font-style: italic; }
.cl-f select option { color: #352A23; font-style: normal; }
.cl-f select:focus { outline: none; border-bottom-color: var(--cl-band); }
.cl-f.is-bad select { border-bottom-color: #D6402E; }
.cl-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 20px; }
.cl-row .cl-f select { font-size: 17px; }
.cl-row .cl-f--s input { height: 40px; font-size: 17px; }
.cl-plate.is-sent .cl-row { display: none; }
/* the plate sits low enough that the page's "Readers ask" (which follows the kind you choose) stays in view */
@media (min-width: 1100px) { .closer .closer__stage { padding-bottom: 250px; } .closer .cl-plate { width: min(470px, 86%); } }
@media (max-width: 479px) { .cl-row { grid-template-columns: 1fr; } }
.closer .mk { margin-bottom: clamp(36px, 4vw, 60px); }
.cl-asks p:not(.cl-asks__h) span.is-roll { display: inline-block; animation: cl-roll .6s var(--ease-out); }

/* ═════════ 07 · THE DESK, as a scene: a week of questions becomes what the business needs to know ═════════ */
.dq { height: 520vh; height: 520svh; }   /* five beats: the first four keep their 320 of scroll, the report has the last 100 */
.dq .mo__in { grid-template-columns: minmax(0, .34fr) minmax(0, .66fr); }
.dq__view { height: min(100%, 700px); }
.dq__board { position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; border-radius: 22px; overflow: hidden; color: #EDEAE3; font-family: var(--sans); --hf: 0;
  background: radial-gradient(120% 90% at 85% -10%, #262A3F 0%, #17181E 52%, #121317 100%);
  box-shadow: 0 70px 120px -60px rgba(20, 18, 30, .7), 0 0 0 1px rgba(15, 15, 18, .85), inset 0 1px 0 rgba(255, 255, 255, .07); }
.dq__top { position: absolute; left: 24px; right: 24px; top: 20px; display: flex; align-items: center; gap: 10px; font: 600 13.5px/1 var(--sans); }
.dq__mark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #9DB0FF; color: #17181E; font: 700 12px/1 var(--sans); }
.dq__live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font: 500 12.5px/1 var(--sans); color: rgba(237, 234, 227, .6); }
.dq__live i { width: 6px; height: 6px; border-radius: 50%; background: #9DB0FF; box-shadow: 0 0 0 3px rgba(157, 176, 255, .18); animation: bk-live 2s ease-in-out infinite; }
.dq__count { position: absolute; left: 24px; top: 56px; display: flex; align-items: baseline; gap: 10px; }
.dq__count b { font: 300 46px/1 'Newsreader', Georgia, serif; letter-spacing: -.03em; color: #fff; font-feature-settings: 'lnum' 1, 'tnum' 1; font-variation-settings: 'opsz' 72; }
.dq__count span { font: 500 14px/1 var(--sans); color: rgba(237, 234, 227, .6); }
.dq__hours { position: absolute; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); align-items: end; gap: 3px; }
.dq__hours > i { display: block; height: calc(var(--h) * var(--hf) * 100%); min-height: 2px; border-radius: 2px; background: rgba(237, 234, 227, .2); }
.dq__hours > i.is-pk { background: #9DB0FF; }
.dq__hl { position: absolute; left: 0; right: 0; top: calc(100% + 6px); display: flex; justify-content: space-between; font: 500 10.5px/1 var(--sans); color: rgba(237, 234, 227, .45); }
.dq__hl .is-pk { color: #9DB0FF; margin-right: 8%; }
/* no will-change on the chips: they change size as they sort, and WebKit re-allocates a layer's backing store
   whenever it resizes (70 of them, every frame). The ring and the glow are worn only when they show (desk.js):
   shadows on boxes that are resizing are the dear part in Safari. */
.dq__c { position: absolute; left: 0; top: 0; height: 26px; padding: 0 11px; border-radius: 13px; overflow: hidden; white-space: nowrap;
  background: rgba(255, 255, 255, .075);
  font: 500 12px/26px var(--sans); color: rgba(237, 234, 227, .86); }
.dq__c.is-ring { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, calc(.06 + var(--g, 0) * .6)); }
.dq__c.is-lit { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, calc(.06 + var(--g, 0) * .6)), 0 0 calc(var(--lit, 0) * 18px) rgba(157, 176, 255, calc(var(--lit, 0) * .7)); }
.dq__c > i { position: absolute; inset: 0; border-radius: inherit; background: color-mix(in srgb, #9DB0FF calc(100% - var(--lit, 0) * 100%), #fff); opacity: 0; }
.dq__c > span { position: relative; }
.dq__c--g { opacity: 0; line-height: 22px; font-size: 11.5px; color: #fff; background: rgba(157, 176, 255, .16); z-index: 3; }
.dq__lab { position: absolute; display: grid; justify-items: center; gap: 4px; text-align: center; opacity: 0; }
.dq__lab b { font: 300 26px/1 'Newsreader', Georgia, serif; color: #fff; font-feature-settings: 'lnum' 1, 'tnum' 1; font-variation-settings: 'opsz' 48; }
.dq__lab span { font: 500 12px/1.2 var(--sans); color: rgba(237, 234, 227, .7); white-space: nowrap; }
.dq__lab em { font: 600 11px/1 var(--sans); font-style: normal; color: rgba(157, 176, 255, .9); white-space: nowrap; }
.dq__lab.is-hot em { padding: 4px 7px; border-radius: 999px; background: rgba(157, 176, 255, .16); color: #fff; }
.dq__conn { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.dq__conn path { fill: none; stroke: rgba(157, 176, 255, .7); stroke-width: 1.2; stroke-dasharray: 1 1; }
.dq__k { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font: 600 12.5px/1 var(--sans); color: rgba(237, 234, 227, .8); }
.dq__k b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: #3D5AFE; color: #fff; font: 700 11px/1 var(--sans); }
.dq__gap { position: absolute; padding: 16px 18px 16px; border-radius: 16px; background: #F7F5F0; color: var(--ink); opacity: 0; box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .7); }
.dq__gap .dq__k { color: var(--ink-3); }
.dq__q { margin: 0 0 6px; font: 400 24px/1.1 'Newsreader', Georgia, serif; letter-spacing: -.015em; font-variation-settings: 'opsz' 48; }
.dq__m { margin: 0 0 12px; font: 500 12.5px/1.35 var(--sans); color: var(--ink-3); }
.dq__m b { color: var(--ink); }
.dq__draft { margin: 0 0 12px; padding: 9px 11px; border-radius: 10px; background: #ECE8E0; font: italic 400 13.5px/1.35 'Newsreader', Georgia, serif; color: var(--ink-2); }
.dq__draft small { display: block; margin-bottom: 3px; font: 600 10.5px/1 var(--sans); font-style: normal; color: var(--ink-4); }
.dq__btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: #3D5AFE; color: #fff; font: 600 12.5px/1 var(--sans);
  box-shadow: 0 10px 20px -10px rgba(61, 90, 254, .8); opacity: var(--btn, 0); transform: translateY(calc((1 - var(--btn, 0)) * 6px)); }
.dq__btn i { font-style: normal; }
.dq__list { position: absolute; opacity: 0; }
.dq__row { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, .08); opacity: 0; }
.dq__nm { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 2px 0 7px; }
.dq__av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(157, 176, 255, .9); color: #17181E; font: 600 13px/1 var(--sans); }
.dq__who b { font: 600 13.5px/1.2 var(--sans); color: #fff; }
.dq__asked { display: flex; flex-wrap: nowrap; gap: 6px; }
.dq__slot { display: block; height: 22px; }
.dq__row em { padding: 5px 9px; border-radius: 999px; font: 600 11px/1 var(--sans); font-style: normal; white-space: nowrap; color: rgba(237, 234, 227, .7); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  opacity: var(--tag, 0); }
.dq__row em.is-hot { color: #17181E; background: #9DB0FF; box-shadow: none; }
.dq__note { position: absolute; left: 24px; bottom: 14px; margin: 0; font: 500 11px/1 var(--sans); color: rgba(237, 234, 227, .38); }
.dq__board[data-mode="tall"] .dq__note { left: 20px; }
/* 05 · the monthly business intelligence report. A bar of light runs down the Desk (.dq__scan) and the report is
   printed behind it: it is the whole board, clipped from the foot up by --wipe. It wears the made-up agency's kit
   (--bir-* and --logo are set in desk.js from kits.js), so it reads as their page, not ours. The bars and the clock
   ink in once the bar has passed them: --at is how far down the page each sits, --inked how far the bar has come
   (it counts on past the foot). The prefix is .bir because ring.css already owns .rp.
   Once the page is whole the board drops its dark outline (.is-print) and the sheet keeps its own hairline, drawn
   inside the paper: a dark line round a sheet of paper looks wrong, and at 1x the paper's edge covered parts of it. */
.dq__rep { position: absolute; inset: 0; z-index: 5; visibility: hidden; --wipe: 0; --inked: 0; clip-path: inset(0 0 calc((1 - var(--wipe)) * 100%) 0); }
.dq__rep.is-on { visibility: visible; }
.dq__board { transition: box-shadow .35s var(--ease-out); }
.dq__board.is-print { box-shadow: 0 70px 120px -60px rgba(20, 18, 30, .6), 0 0 0 1px rgba(15, 15, 18, 0), inset 0 1px 0 rgba(255, 255, 255, 0); }
.bir::after { content: ""; position: absolute; inset: 0; border-radius: 22px; pointer-events: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bir-ink) 15%, transparent); }
.dq__scan { position: absolute; z-index: 6; left: 0; right: 0; top: -1px; height: 2px; opacity: 0; pointer-events: none; background: #fff;
  box-shadow: 0 0 0 .5px rgba(157, 176, 255, .9), 0 0 14px 2px rgba(125, 150, 255, .85), 0 6px 44px 10px rgba(61, 90, 254, .42); }
.dq__scan::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 130px; background: linear-gradient(rgba(157, 176, 255, .2), rgba(157, 176, 255, 0)); }
.bir { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bir-paper); color: var(--bir-ink); font-family: 'Source Serif 4', Georgia, serif; font-feature-settings: 'lnum' 1;
  --bir-rule: color-mix(in srgb, var(--bir-ink) 16%, transparent); --bir-soft: color-mix(in srgb, var(--bir-ink) 76%, var(--bir-paper)); --bir-mute: color-mix(in srgb, var(--bir-ink) 56%, var(--bir-paper));
  --bir-sand: color-mix(in srgb, var(--bir-ink) 20%, var(--bir-paper)); }
.bir__band { flex: none; display: flex; align-items: center; gap: 13px; height: 64px; padding: 0 30px; background: var(--bir-band); color: var(--bir-band-ink); }
.bir__mark { flex: none; width: 23px; height: 28px; background: currentColor; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.bir__name { font: 420 17px/1 'Source Serif 4', Georgia, serif; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.bir__ed { margin: 0 0 0 auto; text-align: right; white-space: nowrap; }
.bir__ed b { display: block; font: 600 13.5px/1 var(--sans); letter-spacing: -.003em; }
.bir__ed span { display: block; margin-top: 6px; font: italic 400 14px/1 'Source Serif 4', Georgia, serif; opacity: .86; }
.bir__body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 22px 30px 18px; }
/* each drawn part works out its own ink (a custom property is resolved where it is declared, so not on .bir) */
.bir [data-at] { --t: clamp(0, calc((var(--inked) - var(--at, 0)) * 5), 1); }
.bir__sh { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 11px; padding-bottom: 7px; border-bottom: 1px solid var(--bir-ink); font: 600 12px/1 var(--sans); white-space: nowrap; }
.bir__sh span { font-weight: 500; color: var(--bir-mute); }
/* A · the finding, and the one drawing that shows it: four houses, one filled in */
.bir__a { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 0 44px; align-items: center; }
.bir__k { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 600 12px/1 var(--sans); color: var(--bir-acc); }
.bir__k i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.bir__h { margin: 0 0 12px; font: 640 39px/1 'Source Serif 4', Georgia, serif; letter-spacing: -.025em; font-variation-settings: 'opsz' 48; text-wrap: balance; }
.bir__dek { margin: 0; font: 400 14.5px/1.45 'Source Serif 4', Georgia, serif; color: var(--bir-soft); text-wrap: pretty; }
.bir__one { margin: 0; }
.bir__houses { display: flex; gap: 14px; }
.bir__houses span { flex: 1; aspect-ratio: 1; border-radius: 14px; background: color-mix(in srgb, var(--bir-second) 46%, var(--bir-paper)); color: color-mix(in srgb, var(--bir-ink) 24%, var(--bir-paper));
  --p: clamp(0, calc(var(--t) * 2.2 - var(--i) * .3), 1); opacity: var(--p); transform: translateY(calc((1 - var(--p)) * 8px)); }
.bir__houses span.is-hot { background: var(--bir-acc); color: var(--bir-paper); }
.bir__houses svg { display: block; width: 100%; height: 100%; }
.bir__houses .h { fill: currentColor; stroke: currentColor; stroke-width: 5; stroke-linejoin: round; }
.bir__houses .d { fill: color-mix(in srgb, var(--bir-second) 46%, var(--bir-paper)); }
.bir__houses .is-hot .d { fill: var(--bir-acc); }
.bir__one figcaption { margin-top: 12px; font: 500 12px/1.4 var(--sans); color: var(--bir-soft); text-wrap: pretty; }
.bir__one figcaption b { font-weight: 600; color: var(--bir-acc); }
/* B · two drawings, each under the number it explains: a bar for every topic, a column for every hour */
.bir__b { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 34px; }
.bir__p { display: flex; flex-direction: column; min-width: 0; }
.bir__big { display: flex; align-items: center; gap: 12px; margin: 1px 0 13px; font: 600 40px/1 'Source Serif 4', Georgia, serif; letter-spacing: -.03em; font-feature-settings: 'lnum' 1, 'tnum' 1; font-variation-settings: 'opsz' 60; }
.bir__big span { font: 500 12px/1.2 var(--sans); letter-spacing: 0; color: var(--bir-soft); }
.bir__big em { display: block; margin-top: 4px; font-style: normal; color: var(--bir-mute); }
.bir__p:first-child .bir__big em { font-weight: 600; color: var(--bir-acc); }
.bir__idx { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.bir__idx li { display: grid; grid-template-columns: 96px minmax(0, 1fr) 30px; align-items: center; gap: 0 10px; }
.bir__idx b { font: 600 13.5px/1 'Source Serif 4', Georgia, serif; white-space: nowrap; }
.bir__idx strong { font: 600 14px/1 'Source Serif 4', Georgia, serif; text-align: right; font-feature-settings: 'lnum' 1, 'tnum' 1; }
.bir__bar { position: relative; height: 16px; border-radius: 3px; background: color-mix(in srgb, var(--bir-second) 46%, var(--bir-paper)); }
.bir__bar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--w) * 100%); border-radius: 3px; background: var(--bir-tile); transform-origin: 0 50%; transform: scaleX(var(--t)); }
/* the month's news: asked four times as often, answered nowhere. Still hollow, as it was on the Desk */
.bir__idx .is-hot .bir__bar::before { background: var(--bir-paper); box-shadow: inset 0 0 0 1.5px var(--bir-acc); }
.bir__bar em { position: absolute; left: calc(var(--w) * 100% + 8px); top: 50%; transform: translateY(-50%); font: 600 10.5px/1 var(--sans); font-style: normal; color: var(--bir-acc); white-space: nowrap; opacity: var(--t); }
.bir__hours { flex: 1; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); align-items: end; gap: 3px; min-height: 66px; }
.bir__hours i { display: block; height: calc(var(--h) * 100%); min-height: 3px; border-radius: 2.5px 2.5px 0 0; background: var(--bir-tile); transform-origin: 50% 100%; transform: scaleY(var(--t)); }
.bir__hours i.is-day { background: var(--bir-sand); }
.bir__ax { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding-top: 6px; border-top: 1px solid var(--bir-ink); font: 500 10.5px/1 var(--sans); color: var(--bir-mute); }
.bir__key { display: flex; align-items: center; gap: 6px; margin: 9px 0 0; font: 500 10.5px/1 var(--sans); color: var(--bir-soft); }
.bir__key i { width: 9px; height: 9px; border-radius: 2px; background: var(--bir-tile); }
.bir__key i.is-day { margin-left: 10px; background: var(--bir-sand); }
/* C · what to do next: the gap to approve, the names to ring */
.bir__c { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 0 28px; }
.bir__grow { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 3px 10px; }
.bir__grow i { width: 12px; height: 12px; margin-top: 3px; box-shadow: inset 0 0 0 1.5px var(--bir-acc); }
.bir__gq { margin: 0; font: 600 16px/1.15 'Source Serif 4', Georgia, serif; letter-spacing: -.008em; }
.bir__gm { grid-column: 2; margin: 0; font: 500 11.5px/1.4 var(--sans); color: var(--bir-soft); }
.bir__reg { display: flex; align-items: center; gap: 14px; }
.bir__reg p { margin: 0; font: 500 11.5px/1.4 var(--sans); color: var(--bir-soft); }
.bir__faces { flex: none; display: flex; padding-left: 7px; }
.bir__faces i { display: grid; place-items: center; width: 27px; height: 27px; margin-left: -7px; border-radius: 50%; background: color-mix(in srgb, var(--bir-second) 80%, var(--bir-paper)); color: var(--bir-soft); box-shadow: 0 0 0 2px var(--bir-paper); font: 600 10.5px/1 var(--sans); font-style: normal; }
.bir__faces i.is-hot { background: var(--bir-acc); color: var(--bir-paper); }
.bir__foot { flex: none; display: flex; justify-content: space-between; gap: 12px; margin: 0 30px; padding: 9px 0 14px; border-top: 3px double var(--bir-ink); font: 500 11px/1 var(--sans); color: var(--bir-mute); }
/* five steps beside the board: on a short window they close up, and on a very short one only the step that is
   playing keeps its line of explanation */
@media (min-width: 1100px) and (max-height: 800px) {
  .dq .mo__h { margin-bottom: 18px; }
  .dq .mo__steps li { padding: 10px 0 11px; }
  .dq .mo__steps small { font-size: 13.5px; line-height: 1.4; }
}
@media (min-width: 1100px) and (max-height: 640px) { .dq .mo__steps li:not(.is-on) small { display: none; } }
/* the portrait board (narrow windows): one column, in reading order */
.dq__board[data-mode="tall"] .bir__band { height: 60px; padding: 0 20px; gap: 9px; }
.dq__board[data-mode="tall"] .bir__mark { width: 17px; height: 21px; }
.dq__board[data-mode="tall"] .bir__name { font-size: 11.5px; letter-spacing: .13em; }
.dq__board[data-mode="tall"] .bir__ed { white-space: normal; max-width: 122px; }
.dq__board[data-mode="tall"] .bir__ed b { font-size: 10.5px; line-height: 1.15; }
.dq__board[data-mode="tall"] .bir__ed span { margin-top: 3px; font-size: 11.5px; }
.dq__board[data-mode="tall"] .bir__body { padding: 20px 20px 14px; }
.dq__board[data-mode="tall"] .bir__a { grid-template-columns: minmax(0, 1fr); gap: 18px 0; }
.dq__board[data-mode="tall"] .bir__h { font-size: 34px; }
.dq__board[data-mode="tall"] .bir__houses span { border-radius: 12px; }
.dq__board[data-mode="tall"] .bir__b { grid-template-columns: minmax(0, 1fr); gap: 22px 0; }
.dq__board[data-mode="tall"] .bir__c { grid-template-columns: minmax(0, 1fr); gap: 20px 0; }
.dq__board[data-mode="tall"] .bir__foot { margin: 0 20px; font-size: 9.5px; }
@media (max-width: 1099px), (max-aspect-ratio: 23/20) {
  .dq .mo__in { grid-template-columns: 1fr; }
  .dq .mo__steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .dq__view { height: 100%; }
}
@media (prefers-reduced-motion: reduce) { .dq { height: auto; } .dq .mo__stage { position: relative; height: auto; min-height: 100svh; } }

/* ═════════ 05 · the Pocket edition, filmed from the real product: the film sits between the status bar and
   Safari's bar (378×714), and the phone's chrome goes dark to meet the edition's desk ═════════ */
.phone--pe .phone__screen { background: #1A140D; }
.pk-film { position: absolute; left: 0; top: 54px; width: 378px; height: 714px; display: block; object-fit: cover; background: #1A140D; transition: opacity .4s var(--ease-out); }
.pk-film.is-fade { opacity: 0; }
.phone--pe .phone__status { background: #1A140D; color: #fff; }
.phone--pe .phone__icons i, .phone--pe .phone__icons b::after { background: #fff; }
.phone--pe .phone__icons i + i { background: none; border-color: #fff; }
.phone--pe .phone__icons b { border-color: rgba(255, 255, 255, .85); }
.phone--pe .phone__url { background: rgba(28, 21, 14, .96); border-top-color: rgba(255, 255, 255, .06); color: #EDE6DA; }
.phone--pe .phone__url span { color: rgba(237, 230, 218, .7); }
.phone--pe .phone__url b { background: rgba(255, 255, 255, .1); color: #EDE6DA; }
.phone--pe .phone__url::after { background: rgba(255, 255, 255, .9); }
.pocket .beats li { cursor: pointer; }
.pocket .beats li:hover { opacity: .75; }
.pocket .beats li.is-on:hover { opacity: 1; }

/* ═════════ PINNING IN SAFARI. WebKit shakes a position:sticky stage for as long as it is stuck, whenever script
   changes the page mid-scroll (measured frame by frame: three heights, on about a third of the frames). A fixed
   stage holds still. In WebKit (html.pin-fixed, set in the head) pin.js therefore swaps each stage from sticky to
   fixed while it is pinned, and back to sticky to scroll in and out, so the page moves exactly as it does in
   Chrome; the reasoning is at the top of pin.js. The containers clip, so a stage that is still fixed after a jump
   can never show over another section (clip-path clips fixed children without becoming their containing block,
   and leaves sticky alone). The hero's lines are in ring.css. The phone site (m/) uses fixed stages throughout. ═════════ */
html.pin-fixed .hw, html.pin-fixed .mo { clip-path: inset(0); }
html.pin-fixed .hw__stage.is-fixed, html.pin-fixed .mo__stage.is-fixed { position: fixed; top: 0; left: 0; right: 0; }