/* Sumparo landing 2026-11-11 — dark cinematic page. Ink, paper, one red. */
@font-face { font-family: "Sofia Sans Condensed"; src: url("fonts/SofiaSansCondensed-800.ttf") format("truetype"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-cyrillic-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; src: url("fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --ink: #0e0d0c; --ink2: #2a221d; --bg: #1c1714; --paper: #f4ece5; --red: #ed422e; --muted: #a59a90;
  --pad: clamp(20px, 5vw, 84px);
  --giant: clamp(46px, 8.6vw, 156px);
  --cond: "Sofia Sans Condensed", "Arial Narrow", Impact, sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --step: steps(5, end);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--paper); font: 400 17px/1.5 var(--sans); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img, canvas, video { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
main { overflow: clip; }

/* ---------- top bar ---------- */
.bar { position: fixed; z-index: 50; inset: 0 0 auto 0; height: 68px; padding: 0 var(--pad); display: flex; align-items: center; gap: 28px;
  transition: background .3s, backdrop-filter .3s; }
.bar.scrolled { background: rgba(28, 23, 20, .8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; font: 850 17px/1 var(--sans); letter-spacing: .08em; color: var(--paper); }
.brand img { height: 46px; width: auto; background: radial-gradient(closest-side, rgba(226, 190, 162, 0.92), rgba(176, 132, 104, 0.78) 62%, transparent); }
.brand.small img { height: 34px; }
.nav { margin-left: auto; display: flex; gap: 30px; }
.nav a { text-decoration: none; font-size: 14px; font-weight: 500; color: var(--muted); transition: color .2s; }
.nav a:hover { color: var(--paper); }
.soon { display: inline-flex; align-items: center; height: 38px; padding: 0 20px; border-radius: 999px; background: var(--paper); color: var(--ink);
  font: 700 13px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; cursor: default; user-select: none; }
.soon.big { height: 56px; padding: 0 38px; font-size: 15px; background: var(--red); color: #fff; }

/* ---------- type ---------- */
.giant, h1 { margin: 0; font: 800 var(--giant)/.88 var(--cond); text-transform: uppercase; letter-spacing: -.005em; }
.giant span, h1 span { display: block; }
.red { color: var(--red); }
.center { text-align: center; }
.text { max-width: 31em; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.55; color: #d9cfc6; }
.text.center { margin-inline: auto; }
.under { font: 800 clamp(22px, 2.6vw, 40px)/1 var(--cond); text-transform: uppercase; letter-spacing: .02em; color: var(--muted); }
.note { font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* ---------- light pools: warm light behind the hero so the black coat reads as a silhouette ---------- */
.pool { position: absolute; pointer-events: none; z-index: 0; }
section { position: relative; }
section > *:not(.pool) { position: relative; z-index: 1; }

/* ---------- cel ---------- */
.cel { position: relative; aspect-ratio: var(--ar); }
.cel img, .cel canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cel canvas { opacity: 0; }
.cel.is-ready canvas { opacity: 1; }
.cel.is-ready img { visibility: hidden; }

/* ---------- 1 · hero ---------- */
.hero { min-height: max(100svh, 640px); display: flex; align-items: flex-end; padding: 96px var(--pad) clamp(40px, 9vh, 110px); }
.pool-hero { inset: 0 0 -30vh 0; -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent);
  background:
    radial-gradient(72vh 88vh at 75% 52%, rgba(196, 156, 128, 0.92), rgba(150, 104, 78, 0.52) 44%, transparent 92%),
    radial-gradient(90vh 40vh at 74% 108%, rgba(237, 66, 46, .10), transparent 92%),
    linear-gradient(180deg, #1c1714, #251e19 70%, #1c1714); }
.hero-copy { z-index: 2 !important; max-width: 62vw; }
.hero h1 { font-size: clamp(60px, 10.4vw, 188px); margin: 22px 0 30px -.03em; }
.hero .lead { max-width: 25em; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.5; color: #e4dad1; }
.hero-art { position: absolute !important; right: clamp(8px, 7vw, 150px); bottom: -9vh; height: min(100vh, 1100px); max-height: 108svh; aspect-ratio: 638/989; z-index: 3 !important; }
.hero-art .cel { height: 100%; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .35)); }
/* the work goes out: three paper slips leave the palm and come back when the hand closes */
.slips { position: absolute; inset: 0; }
.slip { position: absolute; right: 91%; top: 17.2%; padding: .62em .95em .55em; background: var(--paper); color: var(--ink);
  font: 800 clamp(13px, 1.25vw, 20px)/1 var(--cond); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45); opacity: 0; transform: translate(30%, 0) scale(.12) rotate(0deg); transform-origin: 100% 50%;
  transition: transform .5s var(--step), opacity .1s linear; }
.slip::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .6em; background: var(--red); vertical-align: .05em; }
/* v11 motion: the slips go out WITH the palm. 'open' is set on the first opening frame (p1, app.js); a slip is visible at once
   (no fade) and is thrown out in 3 ticks of 1/12 s: fast first, then it settles (stepped ease-out; steps(3, jump-both) where
   linear() is missing). Delays of 0 / 2 / 4 ticks follow the fingers: s1 p1 -> lands on p2, s2 D12 -> p3, s3 D23 -> D45. */
.hero[data-state="open"] .slip { opacity: 1; transition: transform .25s steps(3, jump-both), opacity 0s linear;
  transition: transform .25s linear(.3 0% 33.333%, .66 33.333% 66.667%, .88 66.667% 100%, 1 100%), opacity 0s linear; }
.hero[data-state="open"] .s1 { transform: translate(-6%, -330%) scale(1) rotate(-7deg); transition-delay: 0s, 0s; }
.hero[data-state="open"] .s2 { transform: translate(-96%, -175%) scale(1) rotate(4deg); transition-delay: .167s, .167s; }
.hero[data-state="open"] .s3 { transform: translate(-150%, -12%) scale(1) rotate(-3deg); transition-delay: .333s, .333s; }
.hero[data-state="closing"] .slip, .hero[data-state="closed"] .slip { transition: transform .3s var(--step), opacity .1s linear .22s; }

/* ---------- scenes ---------- */
.scene { padding: clamp(90px, 15vh, 190px) var(--pad) clamp(70px, 12vh, 150px); }

/* 2 · team: the fleet. Faces on paper tiles, three levels, then a field of small tokens */
.team { padding-top: clamp(150px, 24vh, 280px); }
.pool-team { inset: 0; -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 10%, #000 86%, transparent); background: radial-gradient(70vw 60vw at 50% 30%, rgba(180, 140, 112, 0.52), transparent 92%), radial-gradient(60vw 40vw at 50% 86%, rgba(180, 140, 112, 0.39), transparent 92%); }
.team-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.count { display: flex; flex-direction: column; align-items: flex-end; font: 800 clamp(90px, 17vw, 300px)/.8 var(--cond); color: var(--red); font-variant-numeric: tabular-nums; }
.count span { margin-top: .18em; font: 600 clamp(12px, 1.1vw, 16px)/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.big-line { margin-top: clamp(18px, 2.4vw, 36px); max-width: 22em; font: 500 clamp(20px, 2.5vw, 38px)/1.22 var(--sans); letter-spacing: -.01em; }
/* agent token: the head on a warm lit disc with a thin ring; never straight on the ink background */
.face, .f-field i { display: block; position: relative; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, #f0d9c4, #cfa98a 58%, #9c7459 100%);
  box-shadow: 0 0 0 2px rgba(244, 236, 229, .9), 0 10px 22px rgba(0, 0, 0, .45); }
.face img, .f-field i img { position: absolute; left: 5%; bottom: 0; width: 90%; height: auto; border-radius: 0 0 45% 45%; }
.fleet { margin: clamp(34px, 5vw, 80px) auto 0; max-width: 1180px; }
.f-lead { width: max-content; margin: 0 auto; text-align: center; position: relative; padding-bottom: 34px; }
.f-lead img { width: clamp(84px, 9vw, 128px); height: auto; margin: 0 auto; background: radial-gradient(closest-side, rgba(226, 190, 162, 0.92), rgba(176, 132, 104, 0.65) 64%, transparent); }
.f-lead span { display: block; margin-top: 8px; font: 800 clamp(15px, 1.5vw, 22px)/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; }
.f-lead::after, .f-col::before, .f-kids::before { content: ""; position: absolute; left: 50%; width: 2px; margin-left: -1px; background: rgba(244, 236, 229, .34); }
.f-lead::after { bottom: 0; height: 26px; }
.f-tree { --g: clamp(8px, 2vw, 34px); position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g); }
.f-tree::before { content: ""; position: absolute; top: 0; left: calc((100% - 2 * var(--g)) / 6); right: calc((100% - 2 * var(--g)) / 6); height: 2px; background: rgba(244, 236, 229, .34); }
.f-col { position: relative; padding-top: 22px; text-align: center; }
.f-col::before { top: 0; height: 22px; }
.ag { position: relative; }
.ag b { display: block; margin-top: 7px; font: 800 clamp(15px, 1.5vw, 23px)/1.05 var(--cond); letter-spacing: .05em; text-transform: uppercase; }
.ag small { display: block; margin-top: 3px; font: 500 clamp(10.5px, .95vw, 13.5px)/1.25 var(--sans); color: var(--muted); white-space: nowrap; }
.ag em { font-style: normal; }
.ag code { display: block; margin-top: 3px; font: 500 clamp(9.5px, .85vw, 12px)/1.2 ui-monospace, "SF Mono", Menlo, monospace; color: #8a7f76; white-space: nowrap; }
.ag.is-w em { color: var(--red); }
.ag.is-d em { color: var(--paper); }
.ag .face { margin: 3px; }
.ag.is-w .face { box-shadow: 0 0 0 3px var(--red), 0 10px 22px rgba(0, 0, 0, .45); }
.ag.is-q .face { box-shadow: 0 0 0 1.5px rgba(244, 236, 229, .45), 0 10px 22px rgba(0, 0, 0, .45); }
.a2 .face { filter: brightness(.9); }
.a1 { width: min(100%, 150px); margin: 0 auto; }
.f-kids { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: clamp(4px, 1vw, 14px); margin-top: 12px; padding-top: 18px; }
.f-kids::before { top: 0; height: 12px; }
.a2 { flex: 0 1 92px; min-width: 0; }
.a2 b { font-size: clamp(11px, 1.05vw, 15px); }
.a2 small { font-size: clamp(9px, .8vw, 11.5px); }
/* the far field: a crowd of heads receding — three front rows of ringed tokens, then smaller and dimmer heads */
.f-field { margin-top: clamp(18px, 2.4vw, 34px); }
.f-row { display: flex; justify-content: center; gap: clamp(1px, .3vw, 5px); margin: clamp(2px, .4vw, 6px) auto 0; opacity: var(--o, 1); }
.f-row.near { gap: clamp(4px, .7vw, 10px); margin-top: clamp(5px, .8vw, 10px); }
.f-field i { flex: 1 1 0; min-width: 0; transform: translateY(calc(var(--c, 0) * var(--arc, 12px)));
  background: radial-gradient(circle at 50% 40%, #e8cdb6, #b48d70 70%, rgba(150, 110, 84, 0) 100%); box-shadow: none; }
.f-row.near i { background: radial-gradient(circle at 50% 36%, #f0d9c4, #cfa98a 58%, #9c7459 100%); box-shadow: 0 0 0 1.5px rgba(244, 236, 229, .85), 0 6px 14px rgba(0, 0, 0, .4); }
.f-row.near i.r { box-shadow: 0 0 0 2px var(--red), 0 6px 14px rgba(0, 0, 0, .4); }
.f-far { margin-top: 0; }
.facts { margin: clamp(26px, 3vw, 44px) auto 0; text-align: center; }
/* staged launch (JS adds st1..st4 on scroll; without JS everything is simply there) */
html.js-fleet .ag, html.js-fleet .f-field i { opacity: 0; }
html.js-fleet .ag { transform: translateY(-26px) scale(.3); }
html.js-fleet .f-col::before, html.js-fleet .f-kids::before, html.js-fleet .f-tree::before { opacity: 0; transition: opacity .2s; }
html.js-fleet .ag { transition: transform .34s var(--step), opacity .1s linear; transition-delay: var(--d, 0s); }
html.js-fleet .st1 .f-col:nth-child(-n+2)::before, html.js-fleet .st1 .f-tree::before, html.js-fleet .st2 .f-col::before, html.js-fleet .st2 .f-kids::before { opacity: 1; }
html.js-fleet .st1 .f-col:nth-child(-n+2) .a1, html.js-fleet .st2 .ag { opacity: 1; transform: none; }
html.js-fleet .st3 .f-near i, html.js-fleet .st4 .f-far i { animation: tok .3s var(--step) both; animation-delay: var(--d, 0s); }
html.js-fleet .st3 .f-near i, html.js-fleet .st4 .f-far i { opacity: 1; }
@keyframes tok { from { opacity: 0; scale: .3; } to { opacity: 1; scale: 1; } }

.mid { margin: 0; font: 800 clamp(34px, 5vw, 84px)/.92 var(--cond); text-transform: uppercase; }
.mid span { display: block; }
.team-more { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 120px); margin-top: clamp(80px, 11vw, 160px); align-items: start; }
.presets .text, .cross .text { margin-top: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.chip { height: 42px; padding: 0 18px; border: 1.5px solid rgba(244, 236, 229, .45); border-radius: 999px; background: none; color: var(--paper); font: 600 14px/1 var(--sans); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.chip.on { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.squad { position: relative; max-width: 620px; margin-top: 30px; aspect-ratio: 4/1.32; }
.slots { position: absolute; inset: 0 0 auto 0; display: grid; grid-template-columns: repeat(4, 1fr); font: 800 clamp(13px, 1.5vw, 19px)/1 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: center; }
.slots span:first-child { color: var(--red); }
.slots i, .mem small i { font-style: normal; display: none; }
.squad[data-p="0"] .p01, .squad[data-p="1"] .p01, .squad[data-p="2"] .p2 { display: inline; }
.mem { position: absolute; left: 0; top: 13%; width: 25%; padding: 0 clamp(5px, 1vw, 12px); text-align: center; transform: translateX(calc(var(--x) * 100%)); transition: transform .5s steps(6, end); }
.mem .face { box-shadow: 0 0 0 2px rgba(244, 236, 229, .9), 0 12px 26px rgba(0, 0, 0, .5); }
.squad .m0 .face { }
.mem small { display: block; margin-top: 8px; font: 600 clamp(12px, 1.2vw, 15px)/1 var(--sans); color: var(--paper); }
.squad[data-p="0"] .mem small i:nth-child(1), .squad[data-p="1"] .mem small i:nth-child(2), .squad[data-p="2"] .mem small i:nth-child(3) { display: inline; }
.squad[data-p="0"] .m0 { --x: 0 } .squad[data-p="0"] .m1 { --x: 1 } .squad[data-p="0"] .m2 { --x: 2 } .squad[data-p="0"] .m3 { --x: 3 }
.squad[data-p="1"] .m0 { --x: 1 } .squad[data-p="1"] .m1 { --x: 0 } .squad[data-p="1"] .m2 { --x: 3 } .squad[data-p="1"] .m3 { --x: 2 }
.squad[data-p="2"] .m0 { --x: 2 } .squad[data-p="2"] .m1 { --x: 3 } .squad[data-p="2"] .m2 { --x: 0 } .squad[data-p="2"] .m3 { --x: 1 }

.bridge { position: relative; max-width: 760px; margin-top: 34px; padding-top: 74px; display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 0; }
.side { text-align: center; }
.side > div { display: grid; grid-template-columns: repeat(2, clamp(50px, 7vw, 84px)); gap: 10px; }
.side .face:first-child { grid-column: span 2; width: 50%; margin: 0 auto; }
.who { display: block; margin-bottom: 10px; font: 800 clamp(14px, 1.5vw, 20px)/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; }
.mine .who { color: var(--red); }
.mine .face { box-shadow: 0 0 0 3px var(--red); }
.theirs .face { box-shadow: 0 0 0 3px #fff; background: radial-gradient(circle at 50% 36%, #fbf6f1, #ddd2c8 60%, #a89c92 100%); }
.repo { align-self: center; height: 2px; margin: 0 8px; background: repeating-linear-gradient(90deg, rgba(244, 236, 229, .5) 0 8px, transparent 8px 14px); position: relative; }
.repo span { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); white-space: nowrap; font: 500 clamp(10px, 1vw, 13px)/1 ui-monospace, "SF Mono", Menlo, monospace; color: var(--muted); }
.memo { position: absolute; top: 0; max-width: 62%; padding: .6em .9em; background: var(--paper); color: var(--ink); font: 600 clamp(12.5px, 1.2vw, 16px)/1.2 var(--sans); box-shadow: 0 10px 22px rgba(0, 0, 0, .45); opacity: 0; }
.n1 { left: 0; border-left: 5px solid var(--red); animation: go1 7s steps(28, end) infinite; }
.n2 { right: 0; top: 26px; box-shadow: inset 0 0 0 2px #fff, 0 10px 22px rgba(0, 0, 0, .45); background: #1f1d1b; color: var(--paper); animation: go2 7s steps(28, end) infinite; }
@keyframes go1 { 0% { opacity: 0; transform: translate(4%, 60px) scale(.3); } 6% { opacity: 1; transform: translate(4%, 0) scale(1); } 30%, 46% { opacity: 1; transform: translate(60%, 0); } 52%, 100% { opacity: 0; transform: translate(72%, 60px) scale(.3); } }
@keyframes go2 { 0%, 50% { opacity: 0; transform: translate(-4%, 40px) scale(.3); } 56% { opacity: 1; transform: translate(-4%, 0) scale(1); } 80%, 94% { opacity: 1; transform: translate(-62%, 0); } 100% { opacity: 0; transform: translate(-74%, 40px) scale(.3); } }

/* 3 · desk: centred, type behind the figure */
.desk { padding-top: clamp(150px, 26vh, 300px); text-align: center; }
.pool-desk { inset: 0; background: radial-gradient(60vw 46vw at 50% 62%, rgba(190, 150, 122, 0.68), rgba(150, 104, 78, 0.29) 50%, transparent 92%); }
.desk-art { width: min(860px, 96vw); margin: clamp(8px, 1.6vw, 26px) auto 0; }
.line { margin: clamp(10px, 2vw, 26px) auto 0; min-height: 1.5em; font: 500 clamp(18px, 2.5vw, 36px)/1.35 var(--sans); letter-spacing: -.01em; color: var(--paper); }
.line-text { display: inline-block; white-space: pre-wrap; }
.caret { display: inline-block; width: .09em; min-width: 3px; height: 1.05em; margin-left: .12em; background: var(--red); vertical-align: -.16em; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.desk[data-state="enter"] .line-text { color: #fff; }
.desk[data-state="sent"] .line-text { transform: translateY(-1.1em); opacity: 0; transition: transform .45s var(--step), opacity .45s var(--step); }
.desk .under { margin-top: clamp(26px, 4vw, 54px); }

/* 3 · duet: full-bleed table, head text on top, the talk between the two */
.duet { padding-inline: 0; padding-bottom: 0; background: linear-gradient(180deg, var(--bg) 0%, var(--ink2) 46%, #342a24 100%); }
.pool-duet { inset: 0; background:
  radial-gradient(34vw 30vw at 14% 74%, rgba(180, 140, 112, 0.65), transparent 92%),
  radial-gradient(40vw 36vw at 82% 62%, rgba(180, 140, 112, 0.70), transparent 92%); }
.duet-head { padding: 0 var(--pad); display: grid; grid-template-columns: 1fr minmax(260px, 30em); gap: 40px; align-items: end; }
.duet-art { position: relative; width: 100%; max-width: 1900px; margin: clamp(10px, 2vw, 40px) auto 0; }
.duet-half { display: none; }
.talk { position: absolute !important; left: 27%; top: 2%; width: 30%; display: flex; flex-direction: column; gap: clamp(8px, 1.1vw, 16px); }
.msg { max-width: 92%; padding: .7em 1em; background: var(--paper); color: var(--ink); font: 600 clamp(13px, 1.25vw, 19px)/1.25 var(--sans);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .4); opacity: 0; transition: transform .34s var(--step), opacity .14s linear; }
.msg.w { align-self: flex-start; transform: translate(-50%, 60%) scale(.5); transform-origin: 0 100%; }
.msg.r { align-self: flex-end; background: #241d19; color: var(--paper); box-shadow: inset 0 0 0 1.5px rgba(244, 236, 229, .5), 0 12px 26px rgba(0, 0, 0, .4);
  transform: translate(50%, 60%) scale(.5); transform-origin: 100% 100%; }
.duet[data-state="m1"] .m1, .duet[data-state="m2"] .m1, .duet[data-state="m3"] .m1, .duet[data-state="m4"] .m1,
.duet[data-state="m2"] .m2, .duet[data-state="m3"] .m2, .duet[data-state="m4"] .m2,
.duet[data-state="m3"] .m3, .duet[data-state="m4"] .m3,
.duet[data-state="m4"] .m4 { opacity: 1; transform: none; }
.duet[data-state="m5"] .msg { opacity: 1; transform: none; }
.pass { align-self: flex-end; padding: .55em .9em; background: var(--red); color: #fff; font: 800 clamp(13px, 1.3vw, 20px)/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .4); opacity: 0; transform: translateX(-30%) scale(.5); transform-origin: 100% 50%; }
.pass i { font-style: normal; }
.duet[data-state="m5"] .pass { animation: pass 1.9s steps(16, end) both; }
@keyframes pass { 0% { opacity: 0; transform: translateX(-30%) scale(.5); } 12%, 55% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(140%); } }
.duet[data-state="m4"] .m4, .duet[data-state="m5"] .m4 { box-shadow: inset 0 0 0 2px var(--red), 0 12px 26px rgba(0, 0, 0, .4); }
.duet[data-state="m4"] .m4-unused { box-shadow: inset 0 0 0 2px var(--red), 0 12px 26px rgba(0, 0, 0, .4); }

/* phone: the figure stands tall in the centre, the two halves of the headline on either side */
.phone { min-height: 122vh; padding-top: 0; padding-bottom: 0; overflow: clip; }
.pool-phone { inset: 0; background: radial-gradient(38vw 54vw at 50% 44%, rgba(196, 156, 128, 0.91), rgba(150, 104, 78, 0.44) 48%, transparent 92%); }
.phone-art { position: absolute !important; left: 50%; top: 7vh; height: 132vh; aspect-ratio: 463/1229; margin-left: calc(132vh * -0.1884); z-index: 2 !important; }
.phone-art .cel { height: 100%; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .35)); }
.phone-copy { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(132vh * .30); min-height: 122vh; align-content: start; }
.phone-copy .giant { display: contents; font-size: clamp(44px, 6.3vw, 122px); }
.phone-copy .giant span { font: 800 clamp(44px, 6.3vw, 122px)/.88 var(--cond); }
.phone-copy .giant span:first-child { grid-column: 1; grid-row: 1; margin-top: 17vh; max-width: 5.2em; }
.phone-copy .giant span:last-child { grid-column: 2; grid-row: 1; margin-top: 50vh; max-width: 5.4em; justify-self: end; text-align: right; }
.phone-copy .text { grid-column: 2; grid-row: 2; margin-top: 26px; justify-self: end; text-align: right; max-width: 21em; }
.ask { position: absolute !important; right: 70%; top: 31%; width: clamp(200px, 23vw, 330px); padding: 1.1em 1.2em 1.2em; background: var(--paper); color: var(--ink);
  font: 500 clamp(13px, 1.1vw, 16px)/1.3 var(--sans); box-shadow: 0 22px 44px rgba(0, 0, 0, .5); opacity: 0; transform: translate(52%, 30%) scale(.12); transform-origin: 100% 50%;
  transition: transform .4s var(--step), opacity .14s linear; }
.ask b { display: block; font: 800 1.5em/1 var(--cond); text-transform: uppercase; letter-spacing: .02em; margin-bottom: .75em; }
.opt { display: flex; align-items: center; gap: .7em; padding: .62em .7em; margin-top: .45em; border: 1.5px solid rgba(26, 25, 23, .28); font-weight: 600; }
.opt i { flex: none; width: 1.15em; height: 1.15em; border: 1.5px solid var(--ink); position: relative; }
.phone[data-state="ask"] .ask, .phone[data-state="answered"] .ask { opacity: 1; transform: rotate(-2deg); }
.phone[data-state="answered"] .o1 { border-color: var(--red); }
.phone[data-state="answered"] .o1 i { background: var(--red); border-color: var(--red); }
.phone[data-state="answered"] .o1 i::after, .chk::after { content: ""; position: absolute; left: 32%; top: 10%; width: 28%; height: 56%; border: solid #fff; border-width: 0 .16em .16em 0; transform: rotate(42deg); }
.phone[data-state="answered"] .o2 { opacity: .45; }

/* proof: big count, every condition with the face of the agent who proved it and a red stamp */
.proof { padding-top: clamp(110px, 18vh, 220px); }
.pool-proof { inset: 0; background: radial-gradient(70vw 54vw at 62% 56%, rgba(196, 156, 128, .58), rgba(150, 104, 78, .26) 50%, transparent 92%); }
.proof .giant { font-size: clamp(34px, 8.3vw, 150px); }
.pf { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 5vw, 90px); align-items: start; margin-top: clamp(30px, 5vw, 80px); }
.pf-count { position: sticky; top: 16vh; display: flex; flex-direction: column; }
.pf-count b { font: 800 clamp(160px, 31vw, 520px)/.76 var(--cond); color: var(--red); font-variant-numeric: tabular-nums; }
.pf-count span { margin-top: 1.4em; font: 600 clamp(12px, 1.1vw, 16px)/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pf-rows { list-style: none; margin: 0; padding: 0; }
.pf-rows li { position: relative; display: grid; grid-template-columns: clamp(58px, 7vw, 104px) 1fr; gap: clamp(14px, 2vw, 30px); align-items: center; padding: clamp(18px, 2.4vw, 34px) 0; border-top: 1.5px solid rgba(244, 236, 229, .2); }
.pf-rows li:last-child { border-bottom: 1.5px solid rgba(244, 236, 229, .2); }
.pf-rows b { display: block; font: 800 clamp(25px, 3.3vw, 54px)/.96 var(--cond); text-transform: uppercase; }
.pf-rows code { display: block; margin-top: 8px; font: 500 clamp(13px, 1.2vw, 17px)/1.3 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--paper); }
.pf-rows small { display: block; margin-top: 4px; font: 500 clamp(12px, 1vw, 14px)/1.3 var(--sans); color: var(--muted); }
.stamp { position: absolute; right: 0; top: 50%; padding: .34em .7em .28em; border: .16em solid var(--red); border-radius: .22em; color: var(--red); background: rgba(28, 23, 20, .55);
  font: 800 clamp(15px, 1.8vw, 28px)/1 var(--cond); font-style: normal; letter-spacing: .12em; text-transform: uppercase; transform: translateY(-50%) rotate(-8deg); }
.pf-rows li:nth-child(2) .stamp { transform: translateY(-50%) rotate(5deg); }
.pf-rows li:nth-child(3) .stamp { transform: translateY(-50%) rotate(-4deg); }
.pf-rows li:nth-child(4) .stamp { transform: translateY(-50%) rotate(7deg); }
.pf-rows li > div { padding-right: clamp(0px, 19vw, 290px); }
html.js-proof .pf-rows li > .face, html.js-proof .pf-rows li > div { opacity: .38; transition: opacity .25s; }
html.js-proof .pf-rows li.on > .face, html.js-proof .pf-rows li.on > div { opacity: 1; }
html.js-proof .stamp { opacity: 0; }
html.js-proof li.on .stamp { opacity: 1; animation: stamp .3s steps(4, end) both; }
@keyframes stamp { from { opacity: 0; scale: 2.4; } to { opacity: 1; scale: 1; } }
.pf-rows li.on .face { box-shadow: 0 0 0 3px var(--red), 0 10px 22px rgba(0, 0, 0, .45); }
.proof-copy { margin-top: clamp(40px, 6vw, 80px); text-align: center; }
.proof-copy .text { margin: 14px auto 0; }

/* 6 · film (slots; the build writes this section only when the files exist) */
.film { padding-top: clamp(70px, 10vh, 140px); }
.film .giant { margin-bottom: clamp(24px, 3vw, 48px); }
.film-stage { position: relative; width: min(1320px, 100%); margin: 0 auto; aspect-ratio: 16/9; background: #000; box-shadow: 0 50px 100px rgba(0, 0, 0, .6); overflow: hidden; }
.film-stage[data-mode="v"] { aspect-ratio: 9/16; width: min(420px, 100%); }
.film-stage video { width: 100%; height: 100%; object-fit: cover; }
.play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: .8em; height: 64px; padding: 0 34px; border: 0; border-radius: 999px;
  background: var(--paper); color: var(--ink); font: 700 15px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
.play::before { content: ""; border-left: .95em solid var(--red); border-top: .6em solid transparent; border-bottom: .6em solid transparent; }
.play:hover { background: #fff; }
.playing .play { display: none; }
/* until the film exists: ONE still as a poster with a note, no button */
.soon-stage { margin: 0 auto; }
.soon-stage img { width: 100%; height: 100%; object-fit: cover; }
.teaser video { width: 100%; height: 100%; object-fit: cover; }
.teaser figcaption { position: absolute; left: clamp(12px, 2vw, 28px); bottom: clamp(12px, 2vw, 28px); display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 999px; background: rgba(14, 13, 12, .7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--paper); font: 700 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; box-shadow: inset 0 0 0 1.5px rgba(244, 236, 229, .45); }
.film-stage.is-v { aspect-ratio: 4/5; width: min(520px, 100%); }
.soon-stage figcaption { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; height: 56px; padding: 0 30px; border-radius: 999px; background: rgba(14, 13, 12, .78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--paper); font: 700 14px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; box-shadow: inset 0 0 0 1.5px rgba(244, 236, 229, .5); }
/* storyboard / loops: an uneven mosaic, not a row of equal thumbnails */
.strip, .loops { width: min(1320px, 100%); margin: clamp(16px, 2vw, 28px) auto 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(8px, 1vw, 16px); }
.strip > *, .loops > * { grid-column: span 2; margin: 0; overflow: hidden; background: #000; aspect-ratio: 16/9; }
.strip > :first-child, .loops > :first-child { grid-column: span 4; grid-row: span 2; aspect-ratio: auto; }
.strip.solo > :first-child { grid-column: span 6; }
.strip img, .loops video { width: 100%; height: 100%; object-fit: cover; }
.loops .is-v { aspect-ratio: 4/5; }
.proof-loop { -webkit-mask-image: radial-gradient(ellipse 74% 78% at 50% 48%, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse 74% 78% at 50% 48%, #000 58%, transparent 100%); box-shadow: none !important; }
.proof-loop { width: min(1120px, 100%); margin: clamp(26px, 3.4vw, 52px) auto 0; aspect-ratio: 16/9; overflow: hidden; box-shadow: 0 40px 80px rgba(0, 0, 0, .55); }
.proof-loop.is-v { aspect-ratio: 4/5; width: min(460px, 100%); }
.proof-loop video { width: 100%; height: 100%; object-fit: cover; }

/* 7 · status */
.status { padding: clamp(110px, 20vh, 240px) var(--pad) clamp(90px, 16vh, 180px); text-align: center; }
.pool-status { inset: 0; background: radial-gradient(50vw 30vw at 50% 44%, rgba(180, 140, 112, 0.52), transparent 92%), radial-gradient(60vw 24vw at 50% 110%, rgba(237, 66, 46, .16), transparent 92%); }
.status-head { width: clamp(120px, 13vw, 190px); height: auto; margin: 0 auto 26px; }
.status .text { margin-top: 22px; }
.status .soon { margin-top: 36px; }

.foot { padding: 30px var(--pad) 40px; display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: center; border-top: 1px solid rgba(244, 236, 229, .1); color: var(--muted); font-size: 13px; }
.foot p { margin-left: auto; }
.foot a { margin-left: 14px; text-underline-offset: 3px; }

/* reveal (only with JS and motion allowed) */
html.js-reveal .giant, html.js-reveal .mid, html.js-reveal .big-line, html.js-reveal .text, html.js-reveal .under, html.js-reveal .film-stage, html.js-reveal .strip, html.js-reveal .loops { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
html.js-reveal .seen { opacity: 1 !important; transform: none !important; }
html.js-reveal .text { transition-delay: .12s; }

/* ---------- narrow ---------- */
@media (max-width: 900px) {
  .nav { display: none; }
  .bar { height: 60px; }
  .bar .soon { margin-left: auto; height: 34px; padding: 0 16px; font-size: 12px; }
  .brand img { height: 34px; }

  .hero { display: block; min-height: 0; padding: 92px var(--pad) 0; }
  .hero-copy { max-width: none; }
  .hero h1 { font-size: clamp(54px, 15.4vw, 120px); margin: 14px 0 18px; }
  .note { font-size: 10.5px; letter-spacing: .1em; white-space: nowrap; }
  .hero .lead { font-size: 17px; max-width: 22em; }
  .hero-art { position: relative !important; right: auto; bottom: auto; height: auto; max-height: none; width: min(108vw, 620px); margin: 14px -9vw -70px auto; }
  .hero-art .cel { height: auto; }
  .pool-hero { background:
    radial-gradient(70vw 92vw at 62% 68%, rgba(190, 150, 122, 0.81), rgba(150, 104, 78, 0.39) 48%, transparent 92%),
    linear-gradient(180deg, #1c1714, #251e19 70%, #1c1714); }
  .slip { right: auto; left: 5%; top: 17.2%; font-size: 13px; transform-origin: 0 50%; transform: translate(0, 0) scale(.12); }
  .hero[data-state="open"] .s1 { transform: translate(-4%, -330%) scale(1) rotate(-5deg); }
  .hero[data-state="open"] .s2 { transform: translate(-22%, 250%) scale(1) rotate(3deg); }
  .hero[data-state="open"] .s3 { transform: translate(-10%, 420%) scale(1) rotate(-2deg); }

  .desk { padding-inline: 0; padding-top: 150px; }
  .desk h2, .desk .under, .desk .line { padding-inline: var(--pad); }
  .desk-art { width: 120vw; margin: 12px 0 0 -10vw; max-width: none; }
  .pool-desk { background: radial-gradient(110vw 90vw at 50% 56%, rgba(180, 140, 112, 0.68), transparent 92%); }
  .line { font-size: 19px; min-height: 3em; }

  .duet-head { grid-template-columns: 1fr; gap: 22px; }
  html.js .duet-full { display: none; }
  /* the wide table is shown as two big panels: the writer (left 46 %, lower 78 %) and the reviewer (right half) */
  html.js .duet-half { display: block; overflow: hidden; }
  .duet-half canvas { max-width: none; height: auto; }
  .duet-half.left { width: 100%; aspect-ratio: 705/725; }
  .duet-half.left canvas { width: 217.4%; margin-top: -29%; }
  .duet-half.right { width: 100%; aspect-ratio: 766/929; }
  .duet-half.right canvas { width: 200%; margin-left: -100%; }
  html.js .talk { position: relative !important; left: auto; top: auto; width: auto; padding: 18px var(--pad) 8px; min-height: 262px; }
  .msg { font-size: 15px; }
  .pool-duet { background: radial-gradient(90vw 80vw at 30% 38%, rgba(180, 140, 112, 0.65), transparent 92%), radial-gradient(90vw 80vw at 70% 82%, rgba(180, 140, 112, 0.68), transparent 92%); }

  .team { padding-top: 120px; }
  .team-head { display: block; }
  .count { align-items: flex-start; margin-top: 18px; font-size: 44vw; }
  .count span { font-size: 12px; }
  .big-line { font-size: 21px; }
  .fleet { margin-inline: -8px; }
  .f-tree { --g: 6px; }
  .team-more { grid-template-columns: 1fr; gap: 90px; margin-top: 90px; }
  .a1 { width: 86px; }
  .a2 { flex-basis: 38px; }
  .ag .face { margin: 2px; }
  .f-field { --arc: 5px; }
  .a2 b, .a2 small, .a2 code { display: none; }
  .f-kids { gap: 4px; }
  .facts { text-align: left; }
  .squad { aspect-ratio: 4/1.75; }
  .bridge { padding-top: 96px; }
  .memo { max-width: 78%; }
  .n2 { top: 40px; }
  .repo span { top: 10px; font-size: 9.5px; }

  .phone { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 10px; padding-top: 90px; min-height: 0; padding-inline: var(--pad); }
  .phone-copy { display: block; min-height: 0; padding-bottom: 0; }
  .phone-copy .giant { display: block; }
  .phone-copy .giant span { font-size: var(--giant); max-width: none !important; margin-top: 0 !important; text-align: left !important; }
  .phone-copy .text { text-align: left; margin-top: 22px; }
  .phone-art { position: relative !important; left: auto; top: auto; height: auto; width: 62vw; max-width: 380px; margin: 0 0 -40px 2vw; align-self: flex-start; }
  .phone-art .cel { height: auto; }
  .pool-phone { background: radial-gradient(80vw 110vw at 34% 66%, rgba(190, 150, 122, 0.78), transparent 92%); }
  .ask { right: auto; left: 72%; top: 17%; transform-origin: 0 50%; transform: translate(-40%, 30%) scale(.12); width: 46vw; max-width: 250px; font-size: 12.5px; padding: .9em .9em 1em; }

  .proof .giant { font-size: 9.6vw; }
  .pf { display: block; }
  .pf-count { position: static; flex-direction: row; align-items: flex-end; gap: 14px; margin-bottom: 18px; }
  .pf-count b { font-size: 46vw; }
  .pf-count span { margin: 0 0 .6em; max-width: 9em; font-size: 11px; }
  .pf-rows li > div { padding-right: 0; }
  .pf-rows li { padding: 22px 0 56px; }
  .stamp { top: auto; bottom: 12px; font-size: 14px; transform: rotate(-8deg) !important; }
  .pf-rows li:nth-child(even) .stamp { transform: rotate(5deg) !important; }
  .strip, .loops { grid-template-columns: repeat(2, 1fr); }
  .strip > *, .loops > * { grid-column: span 1; }
  .strip > :first-child, .loops > :first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 16/9; }
  .foot p { margin-left: 0; }
  .foot a { display: inline-block; margin: 6px 14px 0 0; }
}
@media (max-width: 420px) { :root { --giant: 13.2vw; } }


/* reduced motion: one still pose per scene and the answers shown as a finished state */
html.reduce .memo { animation: none; opacity: 1; transform: none; }
html.reduce .mem { transition: none; }
html.reduce .hero .slip { opacity: 1; transition: none; }
html.reduce .hero .s1 { transform: translate(-6%, -330%) rotate(-7deg); }
html.reduce .hero .s2 { transform: translate(-96%, -175%) rotate(4deg); }
html.reduce .hero .s3 { transform: translate(-150%, -12%) rotate(-3deg); }
html.reduce .msg { opacity: 1; transform: none; }
html.reduce .pass { opacity: 1; transform: none; }
html.reduce .ask { opacity: 1; transform: rotate(-2deg); }
html.reduce .line-text::before { content: "Соберите страницу оплаты и проверьте её."; }

/* ================= LIGHT THEME (dist/light/): the same page on warm paper, like the approved drawings ================= */
html.light { --bg: #f4ece5; --paper: #1a1917; --ink: #f7f1eb; --ink2: #eadfd4; --muted: #7d7168; }
html.light body { color: #1a1917; }
html.light .pool { display: none; }
html.light .text { color: #3f3832; }
html.light .hero .lead { color: #2b2622; }
html.light .bar.scrolled { background: rgba(244, 236, 229, .86); box-shadow: 0 1px 0 rgba(26, 25, 23, .12); }
html.light .brand img, html.light .f-lead img { background: none; }
html.light .soon.big { color: #fff; }
/* soft ground shadows instead of light pools */
html.light .hero-art .cel, html.light .phone-art .cel { filter: drop-shadow(0 26px 30px rgba(70, 45, 30, .22)); }
html.light .hero-art::before, html.light .phone-art::before { content: ""; position: absolute; left: 14%; right: 6%; bottom: -1.5%; height: 7%; background: radial-gradient(closest-side, rgba(70, 45, 30, .34), transparent); }
html.light .slip, html.light .msg, html.light .ask, html.light .memo { box-shadow: 0 10px 24px rgba(70, 45, 30, .25); }
html.light .msg.r, html.light .n2 { background: #fffaf5; color: #1a1917; box-shadow: inset 0 0 0 2px #1a1917, 0 10px 24px rgba(70, 45, 30, .2); }
html.light .duet[data-state="m4"] .m4 { box-shadow: inset 0 0 0 2.5px var(--red), 0 10px 24px rgba(70, 45, 30, .2); }
html.light .ask .opt { border-color: rgba(247, 241, 235, .4); }
html.light .ask .opt i { border-color: #f7f1eb; }
/* bands: paper, a deeper paper for the fleet and the table, red for the close */
html.light .team { background: linear-gradient(180deg, #f4ece5, #ebe0d5 14%, #ebe0d5 88%, #f4ece5); }
html.light .duet { background: linear-gradient(180deg, #f4ece5 0%, #ebe0d5 50%, #e4d6c9 100%); }
html.light .scene + .scene::before, html.light .status::before { content: none; }
html.light .desk, html.light .proof, html.light .film { border-top: 1.5px solid rgba(26, 25, 23, .14); }
/* fleet: paper tokens with ink rings */
html.light .face, html.light .f-row.near i { background: radial-gradient(circle at 50% 36%, #fffdfa, #f3e7dc 70%, #e6d5c6 100%); box-shadow: 0 0 0 2px #1a1917, 0 8px 18px rgba(70, 45, 30, .2); }
html.light .f-field i { background: none; box-shadow: none; }      /* on paper the far crowd is just heads: ink hair, red collars */
html.light .f-row.near i.r { box-shadow: 0 0 0 2.5px var(--red), 0 8px 18px rgba(70, 45, 30, .2); }
html.light .ag.is-w .face, html.light .mine .face, html.light .pf-rows li.on .face { box-shadow: 0 0 0 3px var(--red), 0 8px 18px rgba(70, 45, 30, .2); }
html.light .ag.is-q .face { box-shadow: 0 0 0 1.5px rgba(26, 25, 23, .4), 0 8px 18px rgba(70, 45, 30, .16); }
html.light .theirs .face { box-shadow: 0 0 0 3px #1a1917; background: #fff; }
html.light .f-lead::after, html.light .f-col::before, html.light .f-kids::before, html.light .f-tree::before { background: rgba(26, 25, 23, .4); }
html.light .ag code { color: #8b7f75; }
html.light .ag.is-d em { color: #1a1917; font-weight: 700; }
html.light .chip { border-color: rgba(26, 25, 23, .5); }
html.light .repo { background: repeating-linear-gradient(90deg, rgba(26, 25, 23, .55) 0 8px, transparent 8px 14px); }
html.light .mem .face { box-shadow: 0 0 0 2px #1a1917, 0 10px 22px rgba(70, 45, 30, .22); }
html.light .pf-rows li, html.light .pf-rows li:last-child { border-color: rgba(26, 25, 23, .22); }
html.light .stamp { background: rgba(244, 236, 229, .7); }
html.light .film-stage { box-shadow: 0 40px 80px rgba(70, 45, 30, .3); }
html.light .teaser figcaption, html.light .soon-stage figcaption { background: rgba(14, 13, 12, .7); color: #f4ece5; box-shadow: inset 0 0 0 1.5px rgba(244, 236, 229, .45); }
html.light .play { background: #f4ece5; color: #0e0d0c; }
/* the close: a red band, paper type */
html.light .status { background: var(--red); color: #fff; }
html.light .status .giant span { color: #fff; }
html.light .status .giant .red { color: #1a1917; }
html.light .status .text { color: #fff; }
html.light .status .soon.big { background: #1a1917; color: #f4ece5; }
html.light .status-head { background: radial-gradient(closest-side, #f4ece5 70%, transparent 72%); border-radius: 50%; padding: 14px; box-sizing: content-box; }
html.light .foot { border-top: 0; background: #1a1917; color: #b9aca0; }
html.light .foot .brand { color: #f4ece5; }
html.light .foot .brand img { background: radial-gradient(closest-side, rgba(226, 190, 162, .95), rgba(176, 132, 104, .6) 62%, transparent); }

html.light .film { --paper: #f4ece5; --ink: #0e0d0c; --muted: #a59a90; background: #1a1614; color: #f4ece5; border-top: 0; }
html.light .film .film-stage { box-shadow: 0 0 0 1px rgba(244, 236, 229, .16), 0 40px 90px rgba(0, 0, 0, .5); }
html.light .pass { box-shadow: 0 10px 24px rgba(70, 45, 30, .25); }
html.light .duet[data-state="m4"] .m4, html.light .duet[data-state="m5"] .m4 { box-shadow: inset 0 0 0 2.5px var(--red), 0 10px 24px rgba(70, 45, 30, .2); }

/* Completed film and the cross-person teamwork scene. */
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:27px;position:relative;z-index:5}
.action{display:inline-flex;align-items:center;gap:18px;min-height:48px;padding:13px 22px;border-radius:999px;font:600 14px/1.2 var(--sans);text-decoration:none}
.action.primary{background:var(--red);color:#fff}.action.primary span{opacity:.8;font-size:12px}.action.secondary{border:1px solid #b89b7e88;color:var(--paper)}
html.light .action.secondary{color:var(--paper)}.bar .soon{white-space:nowrap;text-decoration:none;cursor:pointer}

/* Early access is part of the paper-and-ink landing, with a quiet, readable form. */
.sr-only,.signup-honey{position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.language-control{margin-left:auto;flex-shrink:0}.nav+.language-control{margin-left:20px}
.language-control select{font:600 13px var(--sans);color:var(--paper);background:transparent;border:1px solid #9a8b7e;border-radius:24px;min-height:38px;padding:0 9px;cursor:pointer}
.language-control option{color:#1a1917;background:#f4ece5}
.join{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,6vw,110px);align-items:center;border-top:1px solid #9b8c7d}
.join .giant{font-size:clamp(46px,6vw,92px);line-height:.96;margin:20px 0 24px}
.join-intro{font-size:clamp(18px,1.5vw,23px);line-height:1.55;max-width:31em}
.join-offer{display:flex;flex-direction:column;gap:9px;margin:34px 0 16px;font-size:18px}
.join-offer strong{font:800 clamp(60px,7vw,106px)/.9 var(--cond);text-transform:uppercase;color:var(--red)}
.join-details{max-width:34em;font-size:16px;line-height:1.6;color:var(--muted)}
.join-form{position:relative;background:#fffbf6;color:#1a1917;padding:clamp(24px,3vw,46px);border:1px solid #d6c7b9;box-shadow:0 14px 40px #37281a0c}
.join-form h3{font:800 clamp(28px,3vw,42px)/1.05 var(--cond);text-transform:uppercase;margin:0 0 30px}
.join-form>label{display:block;font:600 15px/1.5 var(--sans);margin-top:20px}
.join-form label>span:not(:only-child){font-weight:400}.join-form>label>span{display:block;color:#6a6058;font-size:13px}
.join-form input:not([type=checkbox]),.join-form textarea{display:block;width:100%;box-sizing:border-box;background:#f6efe8;color:#1a1917;border:1px solid #b4a496;border-radius:0;padding:13px 14px;font:400 16px/1.5 var(--sans);margin-top:8px}
.join-form textarea{resize:vertical;min-height:110px}.join-form input::placeholder,.join-form textarea::placeholder{color:#74685e}
.join-form .signup-consent{display:flex;gap:12px;align-items:flex-start;margin:24px 0}.signup-consent input{flex:0 0 20px;width:20px;height:20px;margin:2px 0 0;accent-color:#d73325}
.join-form .signup-consent span{color:#4c433c;font:400 14px/1.5 var(--sans)}
.signup-submit{display:flex;justify-content:space-between;align-items:center;gap:18px;width:100%;min-height:56px;padding:16px 20px;background:#d63223;color:white;border:0;font:700 17px/1.3 var(--sans);cursor:pointer}
.signup-submit:hover{background:#b7271b}.signup-submit:disabled{opacity:.6;cursor:wait}
.signup-result{font:500 15px/1.55 var(--sans);margin:0}.signup-result:not(:empty){margin:20px 0 8px;padding-left:14px;border-left:3px solid #39734c}.signup-result[data-error]{border-color:#b7271b;color:#a02118}
.signup-privacy{margin-top:20px;color:#6a6058;font:400 13px/1.6 var(--sans)}.signup-privacy summary{cursor:pointer;text-decoration:underline;text-underline-offset:3px}.signup-privacy p{margin-top:10px}
.media-language{text-align:center;font:400 13px/1.5 var(--sans);color:var(--muted);margin:16px 0}
.demo-link{text-align:center;margin:28px 0 0;font:600 17px/1.5 var(--sans)}.demo-link a{text-underline-offset:5px}
.join input:focus-visible,.join textarea:focus-visible,.join button:focus-visible,.language-control select:focus-visible{outline:3px solid #d63223;outline-offset:3px}
html.light .join-details{color:#63564c}.status .soon{text-decoration:none;cursor:pointer}
@media(min-width:1100px){.bar .nav{gap:clamp(12px,1.5vw,25px)}}
@media(max-width:1099px){.nav+.language-control{margin-left:auto}}
@media(max-width:700px){.join{grid-template-columns:1fr;gap:34px}.join .giant{font-size:clamp(44px,12vw,68px)}.join-form{padding:24px 20px}.join-offer{margin-top:26px}.bar{gap:10px}.bar .soon{padding:0 14px;font-size:11px;letter-spacing:.04em}.language-control select{padding:0 6px;min-height:36px}.brand{gap:8px}.brand span{font-size:18px}}
.team-more{grid-template-columns:1fr}.presets{width:min(840px,100%);margin:auto}.presets .mid,.presets>.text{text-align:center}.presets .chips{justify-content:center}
.teamwork{padding-top:70px}.teamwork>.note{margin-bottom:20px}.teamwork-intro{max-width:760px;text-align:center;margin:24px auto 38px}
.teamwork-player{max-width:1320px;margin:auto;border:1px solid #b8957040;border-radius:22px;overflow:hidden;background:#110e0b;box-shadow:0 30px 70px #0004}
.teamwork-player video{width:100%;aspect-ratio:16/9;display:block;object-fit:contain}.teamwork-player[data-mode="v"]{max-width:520px}.teamwork-player[data-mode="v"] video{aspect-ratio:9/16}
.teamwork-controls{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 24px;color:#bba99a;font-size:13px;border-top:1px solid #b8957025}
.teamwork-controls button{color:#f4e8dc;background:#35271f;border:1px solid #94745b88;border-radius:999px;min-height:42px;padding:8px 20px;font:600 13px var(--sans);cursor:pointer;flex-shrink:0}
.teamwork-after{max-width:820px;margin:30px auto 0;text-align:center}.teamwork-after details{max-width:640px;margin:20px auto 0;font-size:14px;line-height:1.65;color:var(--muted)}.teamwork-after summary{cursor:pointer;display:list-item;list-style-position:inside}.teamwork-after details p{margin-top:14px}
.play{display:none}.js-media .play{display:inline-flex}.js-media .playing .play{display:none}.player-error:empty{display:none}.player-error{position:absolute;bottom:60px;left:24px;right:24px;padding:12px;background:#110e0be8;color:#fff;text-align:center}
:focus-visible{outline:3px solid var(--red);outline-offset:5px}
@media(max-width:760px){.hero-actions{gap:10px}.action{font-size:13px;padding:12px 18px}.bar .soon{font-size:11px;padding:0 13px}.teamwork{padding-top:40px}.teamwork-player{border-radius:16px}.teamwork-intro{text-align:left;font-size:17px}.teamwork-controls{padding:13px 15px;gap:10px;font-size:11px}.teamwork-controls button{padding:8px 14px;font-size:12px}.teamwork-after{text-align:left}.play{height:56px;font-size:12px;padding:0 22px;white-space:nowrap}.teamwork .giant{font-size:clamp(44px,12.5vw,90px)}}

section[id]{scroll-margin-top:80px}.presets .squad{margin-inline:auto}
@media(min-width:761px){.hero[data-state="open"] .s1,html.reduce .hero .s1{transform:translate(20%,-360%) scale(1) rotate(-7deg)}.hero[data-state="open"] .s2,html.reduce .hero .s2{transform:translate(-96%,-225%) scale(1) rotate(4deg)}.hero[data-state="open"] .s3,html.reduce .hero .s3{transform:translate(-150%,-100%) scale(1) rotate(-3deg)}}
@media(max-width:760px){html.reduce .hero .s1{transform:translate(-4%,-330%) rotate(-5deg)}html.reduce .hero .s2{transform:translate(-22%,250%) rotate(3deg)}html.reduce .hero .s3{transform:translate(-10%,420%) rotate(-2deg)}}

/* Viewport compositions: a menu destination includes the action, not just a heading. */
html.light .bar.scrolled { background: #f4ece5; -webkit-backdrop-filter: none; backdrop-filter: none; }
section[id] { scroll-margin-top: 68px; }
.scene { padding-top: clamp(28px, 5vh, 64px); padding-bottom: clamp(32px, 5vh, 70px); }
.hero { min-height: 100svh; padding-top: 110px; padding-bottom: 64px; align-items: center; }
.hero h1 { font-size: clamp(64px, 8.5vw, 148px); }
.hero-copy { max-width: 62%; }
.hero-art { right: 4vw; bottom: 20px; height: min(950px, calc(100svh - 100px)); max-height: none; }
.hero-art .cel, .phone-art .cel, html.light .hero-art .cel, html.light .phone-art .cel { filter: none; }
.hero .lead { max-width: 26em; }
.desk { padding-top: 32px; }
.desk .giant { font-size: clamp(48px, 5.4vw, 86px); }
.desk-art { width: min(830px, 94vw, calc((100svh - 292px) * 1.149)); margin-top: 18px; }
.desk .line { margin-top: 12px; }
.desk .under { margin-top: 16px; }
.duet { padding-top: 28px; padding-bottom: 22px; }
.duet-head { align-items: center; gap: 28px; grid-template-columns: 1.1fr 1fr; }
.duet-head .giant { font-size: clamp(44px, 5vw, 78px); }
.duet-head .text { font-size: clamp(15px, 1.2vw, 18px); }
.duet-art { width: min(1200px, 100%, calc((100svh - 255px) * 1.65)); margin-top: 18px; }
.duet .msg { font-size: clamp(12px, 1vw, 16px); padding: .55em .75em; }
.duet .talk { gap: 9px; }
.phone { min-height: calc(100svh - 68px); padding-top: 30px; padding-bottom: 30px; }
.phone-art { top: 20px; height: min(1100px, calc(100svh - 115px)); margin-left: 0; transform: translateX(-50%); }
.phone-copy { min-height: calc(100svh - 128px); column-gap: min(29vw, 350px); align-content: center; }
.phone-copy .giant span { font-size: clamp(40px, 5.4vw, 84px); }
.phone-copy .giant span:first-child, .phone-copy .giant span:last-child { margin-top: 0; }
.phone-copy .text { margin-top: 22px; font-size: clamp(15px, 1.2vw, 18px); }
.phone .ask { top: 34%; width: clamp(175px, 20vw, 280px); font-size: 13px; }
.proof .giant, .team-head .giant { font-size: clamp(46px, 6.4vw, 106px); }
.pf { margin-top: 32px; }
.pf-rows li > div { padding-right: 0; }
.pf-rows li { padding-bottom: 54px; }
.pf-rows .stamp { top: auto; bottom: 12px; font-size: 15px; transform: rotate(-4deg); }
.pf-rows li:nth-child(even) .stamp { transform: rotate(3deg); }
.pf-rows b { font-size: clamp(25px, 2.7vw, 42px); }
.status { padding-top: 48px; padding-bottom: 58px; }

/* Continuous travel on the compositor, deliberate drawn poses in the canvas. */
.hero[data-state="open"] .slip { transition: transform .46s cubic-bezier(.16,.8,.22,1), opacity .08s linear; }
.hero[data-state="closing"] .slip, .hero[data-state="closed"] .slip { transition: transform .34s cubic-bezier(.4,0,.7,.3), opacity .18s linear .12s; }
.msg, .ask { transition: transform .4s cubic-bezier(.16,.8,.22,1), opacity .18s linear; }
html.js-fleet .ag { transition: transform .4s cubic-bezier(.16,.8,.22,1), opacity .15s linear; }
html.js-fleet .st3 .f-near i, html.js-fleet .st4 .f-far i { animation-timing-function: cubic-bezier(.16,.8,.22,1); }
.duet[data-state="m5"] .pass { animation-timing-function: cubic-bezier(.2,.65,.3,1); }
.is-animating .hero-art .cel, .is-animating .phone-art .cel { animation: character-breath 4.6s ease-in-out infinite; }
@keyframes character-breath { 0%,100% { translate: 0 0; } 50% { translate: 0 -3px; } }
.portrait > img, img.portrait { transform-origin: 50% 85%; animation: portrait-idle var(--idle-time,5s) ease-in-out var(--idle-delay,0s) infinite; animation-play-state: paused; }
.portrait-live > img, img.portrait-live { animation-play-state: running; }
@keyframes portrait-idle {
  0%,100% { transform: translateY(0) rotate(0); }
  32% { transform: translateY(-1.5px) rotate(var(--idle-turn,1.5deg)); }
  64% { transform: translateY(-.5px) rotate(calc(var(--idle-turn,1.5deg) * -.55)); }
}
.language-control select { -webkit-appearance: none; appearance: none; padding: 0 28px 0 14px; background-image: linear-gradient(45deg, transparent 50%, #897b70 50%), linear-gradient(135deg, #897b70 50%, transparent 50%); background-repeat: no-repeat; background-size: 5px 5px; background-position: right 14px center, right 9px center; }

@media (max-width: 900px) {
  .hero { min-height: 100svh; padding: 88px var(--pad) 18px; }
  .hero-copy { max-width: none; }
  .hero h1 { font-size: clamp(48px, 12.5vw, 90px); margin: 14px 0; }
  .hero .lead { font-size: 15px; line-height: 1.45; max-width: 30em; }
  .hero-actions { margin-top: 18px; }
  .hero-art { height: min(510px, 48svh); width: auto; max-height: none; margin: 10px 0 0 auto; right: auto; bottom: auto; }
  .hero-art .cel { height: 100%; }
  .hero .slip { font-size: 12px; padding: .6em .8em; }
  .hero[data-state="open"] .s1, html.reduce .hero .s1 { transform: translate(65%, -180%) rotate(-6deg); }
  .hero[data-state="open"] .s2, html.reduce .hero .s2 { transform: translate(25%, 160%) rotate(3deg); }
  .hero[data-state="open"] .s3, html.reduce .hero .s3 { transform: translate(35%, 360%) rotate(-3deg); }
  .desk .giant { font-size: clamp(40px, 10.5vw, 70px); }
  .desk-art { width: min(100%, 620px); margin: 16px auto 0; }
  .desk .line { font-size: 16px; min-height: 3em; }
  .duet-head { grid-template-columns: 1fr; gap: 14px; }
  .duet-head .giant { font-size: clamp(40px, 10.5vw, 68px); }
  .duet-head .text { font-size: 15px; }
  .duet-art { width: 100%; max-width: 620px; margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; align-items: end; }
  html.js .duet-full { display: block; width: 100%; grid-column: 1/-1; grid-row: 1; }
  html.js .duet-half { display: none; }
  .duet-half.left { aspect-ratio: 705/780; }
  .duet-half.left canvas { margin-top: -21%; }
  .duet-half.right { aspect-ratio: 766/929; }
  html.js .duet .talk { grid-row: 2; grid-column: 1/-1; min-height: 210px; padding: 16px var(--pad); }
  .duet .msg { font-size: 13px; }
  .phone { padding-top: 28px; min-height: 0; gap: 24px; }
  .phone-copy { min-height: 0; }
  .phone-copy .giant span { font-size: clamp(40px, 10.5vw, 68px); }
  .phone-art { top: auto; left: auto; transform: none; height: min(670px, max(360px, calc(100svh - 350px))); width: auto; max-width: none; margin: 0 0 0 4vw; }
  .phone-art .cel { height: 100%; }
  .phone .ask { top: 23%; width: min(46vw, 240px); font-size: 12px; }
  .team-head .giant, .proof .giant { font-size: clamp(40px, 10.5vw, 68px); }
}


.motion-toggle { position:fixed; bottom:16px; right:16px; z-index:45; width:40px; height:40px; display:grid; place-items:center; border:1px solid #88776b55; border-radius:50%; background:#f4ece5; color:#1a1917; font:700 17px/1 system-ui; cursor:pointer; box-shadow:0 3px 12px #0001; }
html.motion-paused *, html.motion-paused *::before, html.motion-paused *::after { animation-play-state:paused!important; transition:none!important; }

/* A paper team unfolds from the drawn palm, with its own room above the copy. */
.hero { align-items:flex-end; padding-bottom:28px; }
.hero h1 { font-size:clamp(56px,6.6vw,100px); }
.hero-copy { max-width:59%; }
.hero-art { height:min(720px,calc(100svh - 330px)); }
.hero-unfold { position:absolute!important; z-index:4!important; aspect-ratio:3/2; pointer-events:none; perspective:1400px; }
.team-paper { position:absolute; inset:0; transform-origin:var(--palm-x,99%) var(--palm-y,93%); transform:scale(.015) rotate(-9deg); opacity:0; transition:transform .38s cubic-bezier(.5,0,.8,.3),opacity .15s linear .2s; }
.team-leaf { position:absolute; top:0; width:33.333334%; height:100%; overflow:hidden; transform-origin:100% 80%; backface-visibility:hidden; transform:rotateY(-78deg); transition:transform .3s ease-in,opacity .15s; opacity:0; }
.team-leaf img { position:absolute; top:0; width:300%; max-width:none; height:100%; }
.leaf-left { left:0; }.leaf-left img { left:0; }
.leaf-middle { left:33.333333%; }.leaf-middle img { left:-100%; }
.leaf-right { left:66.666666%; }.leaf-right img { left:-200%; }
.hero.team-art-ready[data-state="open"] .team-paper { opacity:1; transform:scale(1) rotate(0); transition:transform .78s cubic-bezier(.16,.82,.2,1),opacity .07s linear; }
.hero.team-art-ready[data-state="open"] .team-leaf { opacity:1; transform:rotateY(0); transition:transform .62s cubic-bezier(.15,.8,.2,1),opacity .08s; }
.hero[data-state="open"] .leaf-right { transition-delay:0s; }
.hero[data-state="open"] .leaf-middle { transition-delay:.09s; }
.hero[data-state="open"] .leaf-left { transition-delay:.18s; }
.team-complete { position:absolute; inset:0; width:100%; height:100%; opacity:0; }
.hero.team-art-ready[data-state="open"] .team-complete { opacity:1; transition:opacity 0s .85s; }
.hero.team-art-ready[data-state="open"] .team-leaf { visibility:hidden; transition:transform .62s cubic-bezier(.15,.8,.2,1),opacity .08s,visibility 0s .85s; }
.hero.team-art-ready[data-state="open"] .leaf-middle { transition-delay:.09s,.09s,.85s; }
.hero.team-art-ready[data-state="open"] .leaf-left { transition-delay:.18s,.18s,.85s; }
@media(max-width:900px) {
 .hero { padding-bottom:18px; }
 .hero h1 { font-size:clamp(46px,12vw,88px); }
 .hero-copy { max-width:none; }
 .hero-art { height:min(400px,31svh); margin-top:calc(min(100vw - 64px,570px) * .666667 + 16px); }
}