/* Shared foundation for Planned Homepages V4, V5 and V6.
   Palette, type, grounds and orbs from the Planned Interim Brand Book.
   Direction (October 1): clean and neutral, with colour only in a few
   full-bleed moments built from the book's own grounds. No paintstrokes.
   Each version adds its own layout in homepage-vN-src/home.css.
   Hunter, October 1 (later): no borders on anything (cards, tables, secondary
   buttons, the nav); depth comes from soft shadow and tone. Buttons and the
   nav are pills. Agent orbs are marbles (marbles.js). Grounds are live
   (grounds.js): they move, lean toward the cursor, and the book's grain over
   them is kept soft (--grain .06; Hunter found .14 too loud). */

:root {
  --white: #fff; --paper: #FCFBF4; --beige: #F1EDE3; --ink: #21333A;
  --seafoam: #4F9897; --teal: #4B909A; --blue: #39759A; --deep: #294B4F; --mint: #A8D8CD;
  --track: #6478BD; --gold: #FFDBA6; --sky: #C2E0E1; --amber: #F5A00A; --ochre: #D6A55C;
  --muted: #51605F; --faint: #8E9692; --line: #E1E1DC; --line-strong: #D2D1C9;
  --hero-size: 92px; --section-space: 144px; --grain: .06; --cloud-opacity: 1;
  --radius-panel: 32px; --inset: 16px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--white); color: var(--ink); font-family: Geist, -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 400; font-synthesis: none; -webkit-font-smoothing: antialiased; overflow-x: clip; }
body:has(dialog[open]) { overflow: hidden; }
.stage { position: relative; width: 100%; min-height: 100vh; container-type: inline-size; background: var(--white); }
img, svg, iframe { display: block; max-width: 100%; }
iframe { border: 0; }
h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote, fieldset { margin: 0; padding: 0; }
ol, ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 8px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -80px; z-index: 80; padding: 12px 18px; border-radius: 10px; background: var(--ink); color: var(--white); }
.skip-link:focus { top: 16px; }
.word { display: inline-block; }

/* ---------- layout ---------- */
.page { --gutter: 56px; --inset: 16px; --wrap: min(1280px, 100cqw - 2 * var(--gutter)); position: relative; }
.wrap { width: var(--wrap); margin-inline: auto; }
.panel { position: relative; isolation: isolate; overflow: hidden; margin-inline: var(--inset); border-radius: var(--radius-panel); }
.section { padding-block: var(--section-space); }

/* ---------- type ---------- */
h1, h2, h3 { font-weight: 500; color: inherit; }
.display { font-size: clamp(46px, 7cqw, var(--hero-size)); line-height: 1; letter-spacing: -.045em; text-wrap: balance; }
.headline { font-size: clamp(34px, 4.9cqw, 68px); line-height: 1.03; letter-spacing: -.04em; text-wrap: balance; }
.title { font-size: clamp(26px, 2.5cqw, 36px); line-height: 1.12; letter-spacing: -.03em; text-wrap: balance; }
.lead { font-size: clamp(17px, 1.45cqw, 20px); line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.body { font-size: 16px; line-height: 1.55; color: var(--muted); }
.label { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.2; color: var(--muted); }
.label .orb { --orb-size: 18px; }
.center { text-align: center; }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--ink); }
.text-link span { transition: transform .2s ease; }
.text-link:hover span { transform: translateX(3px); }
.on-field { color: var(--white); }
.on-field .lead, .on-field .body, .on-field .label { color: rgb(255 255 255 / .82); }

/* ---------- buttons: the book's 10px radius, Geist 500, sentence case ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; font-size: 15px; font-weight: 500; letter-spacing: -.005em; white-space: nowrap; transition: background-color .2s ease, box-shadow .2s ease, color .2s ease, transform .15s ease; }
.button.primary { background: var(--ink); color: var(--white); }
.button.primary:hover { background: var(--deep); }
/* Opaque, so nothing behind it (V8's grid) shows through (Hunter). */
.button.secondary { background: color-mix(in srgb, var(--ink) 7%, var(--paper)); color: var(--ink); }
.button.secondary:hover { background: color-mix(in srgb, var(--ink) 11%, var(--paper)); }
.button.light { background: var(--white); color: var(--ink); }
.button.light:hover { background: var(--paper); }
.button.ghost-light { color: var(--white); background: rgb(255 255 255 / .16); }
.button.ghost-light:hover { background: rgb(255 255 255 / .12); }
.button.small { min-height: 40px; padding: 0 18px; font-size: 14px; border-radius: 999px; }
.button:active { transform: scale(.98); }
.button-send { display: grid; place-items: center; width: 24px; height: 24px; margin-right: -6px; border-radius: 50%; background: rgb(255 255 255 / .16); font-size: 13px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.center .actions, .actions.center { justify-content: center; }

/* ---------- floating pill nav ---------- */
.nav-shell { position: sticky; top: 0; z-index: 60; display: flex; justify-content: center; padding: 14px var(--inset) 0; pointer-events: none; }
.nav-pill { position: relative; pointer-events: auto; display: flex; align-items: center; gap: 28px; width: min(1180px, 100%); min-height: 60px; padding: 8px 8px 8px 26px; border-radius: 999px; background: rgb(255 255 255 / .9); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 8px 28px -16px rgb(33 51 58 / .26); transition: box-shadow .3s ease, background-color .3s ease; }
.nav-shell[data-floating] .nav-pill { background: rgb(255 255 255 / .94); box-shadow: 0 14px 38px -18px rgb(33 51 58 / .34); }
.wordmark { display: block; flex: none; }
.wordmark img { height: 18px; width: auto; }
.nav-links { display: flex; align-items: center; gap: clamp(16px, 2cqw, 28px); margin-left: auto; font-size: 14.5px; }
.nav-links > a:not(.button) { padding: 6px 0; color: var(--ink); transition: color .2s ease; }
.nav-links > a:not(.button):hover { color: var(--blue); }
.nav-links .button { margin-left: 6px; }
.menu-toggle { display: none; }

/* ---------- agent orbs, book section 06 ---------- */
.orb { position: relative; display: inline-block; flex: none; width: var(--orb-size, 28px); height: var(--orb-size, 28px); isolation: isolate; }
.orb-shell { position: absolute; inset: -8%; background: var(--orb); filter: blur(calc(var(--orb-size, 28px) * .04)); border-radius: 48% 52% 55% 45% / 52% 46% 54% 48%; }
.orb-core { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle at 45% 42%, #F4F1E8 0%, rgb(241 238 228 / .85) 30%, rgb(241 238 228 / 0) 54%); }
/* Marbles (marbles.js) replace the flat orb; the CSS orb stays as the fallback. */
.has-marble > .orb-shell, .has-marble > .orb-core { display: none; }
.has-marble > .orb-canvas { position: absolute; inset: -6%; width: 112%; height: 112%; pointer-events: none; }

/* ---------- grounds: the book's backgrounds and visual catalogue ---------- */
.field { background: center / cover no-repeat; }
.field::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url('./assets/brand-grain.png'); opacity: var(--grain); mix-blend-mode: overlay; }
.field > * { position: relative; z-index: 1; }
.field-quiet { background-color: #5DA49C; background-image: url('./assets/field-quiet.png'); }
.field-track { background-color: #5571AE; background-image: url('./assets/field-track.png'); }
.field-gold { background-color: #F8D49F; background-image: url('./assets/field-gold.png'); }
.field-agent { background-color: #3E7D93; background-image: url('./assets/field-agent.png'); }
.field-clouds { background-color: #CFE0EC; }
.field-clouds .clouds { position: absolute; inset: -10% 0; z-index: 0; background: url('./assets/brand-clouds.png') center / cover no-repeat; opacity: var(--cloud-opacity); }
.field-clouds.has-ground > .clouds { display: none; } /* the live clouds (grounds.js) take over */
.field-layer { position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
/* Live grounds (grounds.js): a canvas under the content and the grain. The
   image ground stays underneath as the fallback when WebGL is unavailable. */
.ground-canvas, .field > .ground-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; }

/* ---------- product frames ---------- */
.product-window { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 14px; background: var(--white); box-shadow: 0 30px 70px -30px rgb(21 41 48 / .45), 0 6px 18px -10px rgb(21 41 48 / .12); }
.product-window iframe, .product-image { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; }
.product-image { object-fit: cover; object-position: 50% 100%; transform: scale(1.12); transform-origin: 50% 100%; background: #F6F6F4; }
.product-image[hidden], .product-window iframe[hidden] { display: none; }
.focus-ring { --ring: var(--seafoam); position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 10px; opacity: 0; pointer-events: none; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ring) 80%, transparent), 0 0 0 4px color-mix(in srgb, var(--ring) 12%, transparent); }
.agent-cursor { position: absolute; left: 0; top: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; opacity: 0; pointer-events: none; }
.agent-cursor .orb { --orb-size: 30px; filter: drop-shadow(0 6px 14px rgb(33 51 58 / .28)); }
/* The agent's label (V7 to V10): what its orb is doing, beside it on the screen. */
.cursor-label { position: absolute; left: 38px; top: 50%; translate: 0 -50%; padding: 6px 12px; border-radius: 999px; background: var(--ink); color: var(--white); font-size: 12.5px; font-weight: 500; letter-spacing: -.005em; white-space: nowrap; box-shadow: 0 8px 18px -8px rgb(21 41 48 / .5); }
.cursor-label:empty { display: none; }
.agent-cursor[data-flip] .cursor-label { left: auto; right: 38px; }

/* ---------- agent card, book colour application 1c ---------- */
.agent-card { position: relative; }
.agent-halo { position: absolute; z-index: 0; left: 50%; top: 50%; width: 120%; height: 100%; translate: -50% -50%; pointer-events: none; filter: blur(28px); opacity: .75;
  background: radial-gradient(ellipse 40% 34% at 40% 40%, rgb(168 216 205 / .55), transparent 70%), radial-gradient(ellipse 44% 38% at 62% 58%, rgb(194 224 225 / .5), transparent 72%), radial-gradient(ellipse 30% 28% at 52% 30%, rgb(100 120 189 / .26), transparent 70%); }
.agent-card-body { position: relative; z-index: 1; background: var(--white); border-radius: 18px; box-shadow: 0 18px 44px -20px rgb(33 51 58 / .34), 0 4px 12px -8px rgb(33 51 58 / .1); padding: 14px; }
.agent-head { display: flex; align-items: center; gap: 10px; }
.agent-head .orb { --orb-size: 32px; }
.agent-meta { display: grid; gap: 1px; min-width: 0; }
.agent-name { font-size: 15px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; }
.agent-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.agent-spinner { display: none; width: 18px; height: 18px; flex: none; margin-left: auto; border-radius: 50%; }
/* Working shows in the orb itself; when the agent is done, a check. */
[data-done] > .agent-spinner, [data-done] .agent-head .agent-spinner, .agent-detail[data-done] .agent-spinner { display: block; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
/* Steps (October 1, Hunter: no progress bar, no yellow, better checks; the
   agent moves between the steps). Rows are quiet; the agent's own orb
   leaves the card head for the step it is working on (stage.js), and each
   finished step checks itself off. One orb per agent, never two. */
.agent-steps-wrap { position: relative; margin-top: 12px; }
.agent-steps { display: grid; gap: 2px; }
.agent-steps li { display: flex; align-items: center; gap: 12px; min-height: 36px; padding: 7px 10px; border-radius: 12px; font-size: 13.5px; line-height: 1.3; color: rgb(33 51 58 / .46); transition: background-color .35s ease, color .35s ease; }
.agent-steps li[data-state="done"] { color: var(--ink); }
.agent-steps li[data-state="active"] { color: var(--ink); font-weight: 500; background: rgb(33 51 58 / .045); }
.step-mark { position: relative; flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; transition: background-color .3s ease; }
.step-mark::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #D8D5CB; transition: opacity .25s ease, transform .25s ease; }
.agent-steps li:is([data-state="active"], [data-state="done"]) .step-mark::before { opacity: 0; transform: scale(.4); }
.agent-steps li[data-state="done"] .step-mark { background: var(--ink); }
.step-mark svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 10; stroke-dashoffset: 10; transition: stroke-dashoffset .4s ease .12s; }
.agent-steps li[data-state="done"] .step-mark svg { stroke-dashoffset: 0; }
/* The agent's one orb glides from the card head to the step it is working on (stage.js). */
.agent-head .orb, .event-agent .orb { z-index: 3; transition: transform .7s cubic-bezier(.65, 0, .35, 1); }
.agent-progress { display: none; } /* Hunter: no progress bar under the agent */
.agent-progress span { position: absolute; inset: 0; background: var(--progress, var(--ink)); transform: scaleX(0); transform-origin: left; }

/* ---------- task wheel (wheel.js): an agent's endless list, rolling like a picker ----------
   The inset is the wheel's own quiet card; the white band marks the task in
   hand; rows curve away on a drum and fade. One orb: it sits on the band's
   mark while it works, then hops to the next task as the wheel rolls. */
.wheel { --row: 36px; --wheel-h: 182px; --mark-x: 31px; --wheel-orb: 30px; --wheel-font: 13.5px; position: relative; display: block; height: var(--wheel-h); overflow: hidden; border-radius: 14px; background: rgb(33 51 58 / .045); }
.wheel-band { position: absolute; left: 6px; right: 6px; top: 50%; height: calc(var(--row) + 10px); translate: 0 -50%; border-radius: 11px; background: var(--white); box-shadow: 0 8px 18px -12px rgb(33 51 58 / .4); }
.wheel-rows { position: absolute; inset: 0; margin: 0; padding: 0; perspective: 900px; -webkit-mask-image: linear-gradient(transparent, #000 26%, #000 74%, transparent); mask-image: linear-gradient(transparent, #000 26%, #000 74%, transparent); }
.wheel-rows li { position: absolute; left: 0; right: 0; top: 50%; display: flex; align-items: center; height: var(--row); margin-top: calc(var(--row) / -2); padding: 0 16px 0 calc(var(--mark-x) + 25px); font-size: var(--wheel-font); letter-spacing: -.005em; color: rgb(33 51 58 / .4); white-space: nowrap; backface-visibility: hidden; transition: color .35s ease; }
.wheel-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wheel-tag { flex: none; margin-left: auto; padding-left: 16px; font-size: 12.5px; font-weight: 400; color: var(--faint); }
.wheel-tag:empty { display: none; }
.wheel-rows li[data-state="done"] { color: rgb(33 51 58 / .6); }
.wheel-rows li[data-state="active"] { color: var(--ink); font-weight: 500; }
.wheel-mark { position: absolute; left: calc(var(--mark-x) - 9px); top: 50%; display: grid; place-items: center; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; transition: background-color .3s ease; }
.wheel-mark::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #D3D0C6; transition: opacity .2s ease; }
:is(.wheel-rows, .story-steps) li[data-state="done"] .wheel-mark { background: var(--ink); }
:is(.wheel-rows, .story-steps) li[data-state="done"] .wheel-mark::before { opacity: 0; }
.wheel-mark svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 10; stroke-dashoffset: 10; transition: stroke-dashoffset .4s ease .1s; }
:is(.wheel-rows, .story-steps) li[data-state="done"] .wheel-mark svg { stroke-dashoffset: 0; }
/* A wheel without an orb of its own (V10: the one agent is elsewhere) marks the task in hand with a seafoam dot. */
.wheel:not(:has(.wheel-orb)) .wheel-rows li[data-state="active"] .wheel-mark::before { width: 8px; height: 8px; background: var(--seafoam); }
.wheel-orb { position: absolute; z-index: 2; left: calc(var(--mark-x) - var(--wheel-orb) / 2); top: 50%; width: var(--wheel-orb); height: var(--wheel-orb); margin-top: calc(var(--wheel-orb) / -2); pointer-events: none; }
.wheel-orb .orb { --orb-size: var(--wheel-orb); filter: drop-shadow(0 4px 8px rgb(33 51 58 / .22)); }

/* ---------- the closing card (core.js mountStory): a short story, not a form ---------- */
.story-card { --mark-x: 22px; position: relative; width: min(420px, 100%); padding: 22px 22px 18px; border-radius: 24px; background: var(--white); color: var(--ink); text-align: left; box-shadow: 0 30px 80px -34px rgb(15 35 45 / .5); }
.story-ask { display: flex; align-items: center; gap: 14px; min-height: 52px; }
.story-ask .your-orb { --orb-size: 44px; width: 44px; height: 44px; }
.story-prompt { font-size: 19px; line-height: 1.3; letter-spacing: -.02em; font-weight: 500; }
.story-steps { display: grid; gap: 4px; margin-top: 16px; }
.story-steps li { position: relative; display: flex; align-items: center; min-height: 40px; padding: 0 12px 0 44px; border-radius: 12px; background: rgb(33 51 58 / .04); font-size: 14.5px; letter-spacing: -.01em; color: rgb(33 51 58 / .55); transition: color .35s ease; }
.story-steps li[data-state="done"] { color: var(--ink); }
.caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -.12em; background: var(--seafoam); }

/* ---------- chips and the demo composer ---------- */
.choice-group legend { margin-bottom: 12px; font-size: 14px; font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 7px 14px 7px 11px; border-radius: 999px; background: rgb(33 51 58 / .055); font-size: 14px; color: var(--muted); transition: box-shadow .2s ease, color .2s ease, background-color .2s ease; }
.chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--chip); }
.chip:hover { color: var(--ink); background: rgb(33 51 58 / .09); }
.chip[aria-checked="true"], .chip[aria-pressed="true"] { color: var(--white); background: var(--ink); }
.composer { position: relative; padding: 28px; border-radius: 24px; background: var(--white); color: var(--ink); box-shadow: 0 30px 80px -30px rgb(15 35 45 / .45); }
.composer-agent { display: flex; align-items: center; gap: 14px; }
.your-orb { --orb-size: 56px; --o1: #A8D8CD; --o2: #4F9897; --o3: #6478BD; position: relative; width: 56px; height: 56px; flex: none; }
.your-orb .orb-shell { background: conic-gradient(from 210deg, var(--o1), var(--o2) 30%, var(--sky) 46%, var(--o3) 64%, #F4F1E8 80%, var(--o1)); filter: blur(2.2px); }
.composer-label { font-size: 14px; font-weight: 500; }
.composer-hint { font-size: 12.5px; color: var(--faint); }
.composer-swatches { display: flex; gap: 6px; margin-left: auto; }
.composer-swatches i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.composer-prompt { min-height: 2.7em; margin: 22px 0 0; font-size: clamp(19px, 1.7cqw, 23px); line-height: 1.32; letter-spacing: -.02em; font-weight: 500; }
.composer-choices { display: grid; gap: 20px; margin-top: 26px; }
.composer-agenda { margin-top: 24px; padding: 16px 18px; border-radius: 16px; background: #F7F5EF; }
.composer-agenda ol { display: grid; gap: 10px; margin-top: 12px; }
.composer-agenda li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; }
.composer-agenda li .orb { --orb-size: 16px; }
.composer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 24px; }

/* ---------- film previews ---------- */
.film { position: relative; display: block; overflow: hidden; padding: 0; text-align: left; color: var(--white); background: var(--deep); }
.film-media { position: absolute; inset: 0; }
.film-media img { width: 100%; height: 100%; object-fit: cover; }
.film-grain::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: url('./assets/brand-grain.png'); opacity: .06; mix-blend-mode: overlay; }
.play { display: inline-flex; align-items: center; gap: 14px; }
.play-orb { position: relative; display: grid; place-items: center; width: 72px; height: 72px; flex: none; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.play-orb .orb { position: absolute; inset: 0; --orb-size: 72px; filter: drop-shadow(0 12px 28px rgb(15 30 40 / .35)); }
.play-orb svg { position: relative; width: 24px; height: 24px; margin-left: 3px; fill: var(--deep); }
.film:hover .play-orb, .film:focus-visible .play-orb { transform: scale(1.07); }
/* V7 to V10 (Hunter): the play button is white and bigger, with no label on the AI film. */
.play-white { width: 104px; height: 104px; border-radius: 50%; background: var(--white); box-shadow: 0 24px 50px -18px rgb(15 30 40 / .55); }
.play-white svg { width: 34px; height: 34px; margin-left: 5px; fill: var(--ink); }
.story-play .play-white { width: 76px; height: 76px; }
.story-play .play-white svg { width: 26px; height: 26px; margin-left: 4px; }
.play-label { padding: 8px 14px; border-radius: 999px; background: rgb(252 251 244 / .9); color: var(--ink); font-size: 14px; font-weight: 500; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); white-space: nowrap; }

/* ---------- logos: small and monotone, the way ElevenLabs sets them ----------
   Display only. The files keep their own colours (brand/customer-logos/README.md);
   brightness(0) turns each transparent mark into one silhouette, then one tone. */
.logos { --logo-tone: .46; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.customer-logo { --logo-scale: .6; position: relative; flex: 1; height: 36px; }
.customer-logo img { position: absolute; left: 50%; top: 50%; width: calc(var(--logo-width) * var(--logo-scale)); max-width: none; height: auto; transform: translate(-50%, -50%); filter: brightness(0); opacity: var(--logo-tone); }

/* ---------- footer ---------- */
.site-footer { padding: 72px 0 28px; background: var(--white); }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.footer-top p { max-width: 22em; margin-top: 14px; font-size: 14px; color: var(--muted); }
.footer-top nav { display: grid; grid-template-columns: repeat(2, auto); gap: 10px 48px; font-size: 14.5px; }
.footer-top nav a:hover { color: var(--blue); }
.footer-mark { margin: 88px auto 0; width: var(--wrap); }
.footer-mark img { width: 100%; max-width: 1081px; height: auto; margin-inline: auto; opacity: .95; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 40px; padding-top: 18px; font-size: 12.5px; color: var(--muted); }
#motion-toggle { padding: 6px 2px; font-size: 12.5px; color: var(--muted); }
#motion-toggle:hover { color: var(--ink); }
#motion-toggle:disabled { cursor: default; }

/* ---------- the agent player (core.js mountAgentDialog): a row opens into a big screen ---------- */
.agent-slot { position: relative; z-index: 1; width: min(1180px, 100%, calc((100dvh - 250px) * 1.6)); aspect-ratio: 16 / 10; }
.agent-stage { position: absolute; inset: 0; overflow: hidden; border-radius: 22px; background: var(--white); box-shadow: 0 60px 120px -40px rgb(0 0 0 / .55); }
.agent-stage .product-window { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.agent-dialog-meta { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 14px 32px; width: min(1180px, 100%, calc((100dvh - 250px) * 1.6)); margin-top: 18px; }
.agent-dialog-meta h2 { font-size: 19px; line-height: 1.3; font-weight: 500; letter-spacing: -.02em; }
.agent-dialog-meta p { max-width: 46em; margin-top: 4px; font-size: 14.5px; line-height: 1.45; color: rgb(255 255 255 / .74); }
.agent-pills { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.agent-pill { min-height: 34px; padding: 0 14px; border-radius: 999px; background: rgb(255 255 255 / .12); color: rgb(255 255 255 / .84); font-size: 13px; transition: background-color .2s ease, color .2s ease; }
.agent-pill:hover { background: rgb(255 255 255 / .2); }
.agent-pill[aria-pressed="true"] { background: var(--white); color: var(--ink); }
.button .arrow { transition: transform .2s ease; }
.button:hover .arrow { transform: translateX(3px); }

/* ---------- film previews: a muted loop in each film card ---------- */
.film-preview { position: absolute; z-index: 0; left: 50%; top: 50%; translate: -50% -50%; max-width: none; border: 0; pointer-events: none; opacity: 0; transition: opacity .9s ease; }
.is-previewing > .film-preview { opacity: 1; }

/* ---------- film dialog: the card opens out into the player ---------- */
.film-dialog { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; background: transparent; color: var(--white); }
.film-dialog::backdrop { background: transparent; }
.film-dialog[open] { display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; padding: clamp(24px, 6vh, 64px) clamp(16px, 4vw, 56px) clamp(20px, 4vh, 40px); }
.film-scrim { position: absolute; inset: 0; background: rgb(14 25 30 / .86); -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2); }
/* The slot keeps the player's place while the stage itself flies in from its card. */
.film-slot { position: relative; z-index: 1; width: min(1240px, 100%, calc((100dvh - 200px) * 16 / 9)); aspect-ratio: 16 / 9; }
.film-stage { position: absolute; inset: 0; overflow: hidden; border-radius: 24px; background: #0E191E; box-shadow: 0 60px 120px -40px rgb(0 0 0 / .55); }
.film-stage-poster { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
#film-player { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.film-stage.is-ready #film-player { opacity: 1; }
#film-player iframe { width: 100%; height: 100%; }
.film-meta { position: relative; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; width: min(1240px, 100%, calc((100dvh - 200px) * 16 / 9)); margin-top: 18px; }
.film-meta h2 { font-size: 16px; line-height: 1.35; font-weight: 500; letter-spacing: -.01em; }
.film-meta a { flex: none; font-size: 13px; color: rgb(255 255 255 / .72); }
.film-meta a:hover { color: var(--white); }
.film-close { position: absolute; z-index: 2; top: 20px; right: 20px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgb(255 255 255 / .14); color: var(--white); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background-color .2s ease, transform .2s ease; }
.film-close:hover { background: rgb(255 255 255 / .24); transform: rotate(90deg); }
.film-close svg { width: 18px; height: 18px; }
.film-fallback { position: absolute; inset: 0; display: grid; place-items: center; isolation: isolate; color: var(--paper); }
.film-fallback[hidden] { display: none; }
.film-fallback > img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.film-fallback > div { display: grid; justify-items: center; gap: 12px; max-width: 440px; padding: 20px; text-align: center; }
.film-fallback p { font-size: 13px; }

/* ---------- the close and the finale (V7, V9, V10) ----------
   Hunter, October 1: fewer full-bleed gradients, and the big gradient reveal
   in the footer; then the pre-footer separate from the footer, the Twin aura
   for the footer, and no second wordmark. So the close (the headline, its
   buttons and the story card) sits on paper at the end of the page, and the
   footer is the one live ground (data-ground), opening out to full bleed as
   it arrives (motion-core playFinale). */
.close { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: var(--pad, 48px); width: min(100%, var(--frame, var(--wrap))); margin-inline: auto; padding: clamp(80px, 9cqw, 136px) var(--pad, 0px); }
.close .headline { max-width: 11em; font-size: clamp(34px, 4.2cqw, 58px); }
.close .lead { max-width: 25em; margin-top: 24px; }
.close .actions { margin-top: 32px; }
.close .story-card { justify-self: end; }
.finale { position: relative; isolation: isolate; overflow: hidden; color: var(--white); background: #45869A url('/site/prototypes/gradients-src/book/aura-twin.png') center / cover no-repeat; }
.finale > .ground-canvas { position: absolute; inset: 0; z-index: 0; }
.finale::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url('./assets/brand-grain.png'); opacity: var(--grain); mix-blend-mode: overlay; }
.finale > * { position: relative; z-index: 1; }
.site-footer.finale { padding: clamp(72px, 8cqw, 112px) 0 30px; }
.finale .footer-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--pad, 48px); width: min(100% - 2 * var(--gutter), var(--frame, var(--wrap))); margin-inline: auto; padding: 0; }
.finale .footer-brand { padding: 0; }
.finale .footer-brand .wordmark img { height: 22px; filter: brightness(0) invert(1); }
.finale .footer-brand p { max-width: 14em; margin-top: 16px; font-size: 15px; line-height: 1.4; color: rgb(255 255 255 / .8); }
.finale .footer-columns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; font-size: 14px; }
.finale .footer-columns p { margin-bottom: 12px; font-size: 12.5px; color: rgb(255 255 255 / .64); }
.finale .footer-columns a { display: block; padding: 4px 0; color: var(--white); transition: opacity .2s ease; }
.finale .footer-columns a:hover { opacity: .7; }
.finale .footer-bottom { width: min(100% - 2 * var(--gutter), var(--frame, var(--wrap))); margin: clamp(56px, 7cqw, 96px) auto 0; padding-top: 0; color: rgb(255 255 255 / .76); }
.finale #motion-toggle { color: rgb(255 255 255 / .76); }
.finale #motion-toggle:hover { color: var(--white); }

@container (max-width: 1080px) {
  .close { grid-template-columns: 1fr; }
  .close .story-card { justify-self: start; margin-top: 16px; }
  .finale .footer-grid { grid-template-columns: 1fr; }
}
@container (max-width: 680px) {
  .close { padding-block: 64px; }
  .finale .footer-columns { grid-template-columns: 1fr 1fr; }
}

/* ---------- Lenis ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- tablet ---------- */
@container (max-width: 1080px) {
  .page { --gutter: 36px; --inset: 12px; }
  .nav-links { gap: 14px; font-size: 13.5px; }
  .footer-top { flex-direction: column; }
}

/* ---------- phone ---------- */
@container (max-width: 680px) {
  .page { --gutter: 20px; --section-space: 88px; }
  .panel { --radius-panel: 22px; margin-inline: 8px; }
  .nav-shell { padding: 8px 8px 0; }
  .nav-pill { min-height: 54px; padding: 6px 6px 6px 16px; }
  .wordmark img { height: 15px; }
  .menu-toggle { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; padding: 10px 14px; border-radius: 999px; font-size: 14px; }
  .menu-icon { position: relative; width: 16px; height: 9px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
  .nav-links { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 18px 18px; border-radius: 24px; background: var(--white); box-shadow: 0 24px 40px -20px rgb(33 51 58 / .35); font-size: 16px; }
  .nav-shell.menu-open .nav-links { display: flex; }
  .nav-links > a:not(.button) { padding: 12px 0; }
  .nav-links .button { align-self: flex-start; margin: 16px 0 0; }
  .logos { flex-wrap: wrap; justify-content: center; gap: 4px 0; }
  .customer-logo { --logo-scale: .5; flex: 0 0 33.33%; height: 36px; }
  .play-orb { width: 58px; height: 58px; }
  .play-orb .orb { --orb-size: 58px; }
  .play-white { width: 80px; height: 80px; }
  .story-play .play-white { width: 60px; height: 60px; }
  .composer { padding: 20px; border-radius: 18px; }
  .footer-top nav { grid-template-columns: repeat(2, 1fr); gap: 10px 24px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}