/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-latin-ext-400_800.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-latin-400_800.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-ext-400.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-400.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-ext-500.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-500.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/instrument-sans-latin-ext-400_700.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/instrument-sans-latin-400_700.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* hyrix.io v2 — a cinema opening: a slate and a letterbox, the word HYRIX with the film playing inside it, a fly
   through the X, orange statements, strips of the editor landing like clips, cards stacking, and the page's own
   timeline at the bottom. Studio black, cream, the logo's orange. */

:root {
  --ink: #0b0908;
  --ink-2: #141110;
  --ink-3: #1d1917;
  --line: #2b2522;
  --cream: #f6efe7;
  --cream-2: #cfc4ba;
  --muted: #8b8179;
  --orange: #f15c29;
  --orange-hi: #ff7a4a;
  --sun: #ffd34d;
  --teal: #0f5f63;
  --rust: #8d3b2c;
  --violet: #4d3366;
  --display: "Bricolage Grotesque", "Avenir Next", sans-serif;
  --body: "Instrument Sans", "Avenir Next", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --gutter: clamp(16px, 4vw, 64px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--cream); font: 400 17px/1.55 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--orange); color: var(--ink); }
:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; border-radius: 6px; }
.mono { font-family: var(--mono); letter-spacing: 0.04em; }
.wrap { width: min(1320px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.hl { position: relative; white-space: nowrap; color: var(--ink); z-index: 0; }
.hl::before { content: ""; position: absolute; inset: 0.1em -0.12em 0.02em; background: var(--orange); z-index: -1; transform: skew(-6deg) rotate(-1.2deg); border-radius: 0.08em; transform-origin: left; }
.hl--ink { color: var(--orange); }
.hl--ink::before { background: var(--ink); }
.rec { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); margin-right: 8px; vertical-align: 1px; animation: rec 1.4s ease-in-out infinite; }
@keyframes rec { 50% { opacity: 0.25; } }

/* ── Buttons ── */
.btn { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 15px 24px; border-radius: 999px; font: 600 16px/1 var(--body); text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background 0.25s, color 0.25s, border-color 0.25s; }
.btn svg { width: 19px; height: 19px; flex: none; }
.btn--sm { padding: 10px 18px; font-size: 14px; }
.btn--hot { background: var(--orange); color: #1a0c06; }
.btn--hot:hover { background: var(--sun); }
.btn--glass { background: var(--ink-2); color: var(--cream); border-color: var(--line); }
.btn--glass:hover { background: rgba(246, 239, 231, 0.2); }
.btn--ink { background: var(--ink); color: var(--cream); }
.btn--ink:hover { background: #000; color: var(--sun); }
.btn--outline { border-color: rgba(11, 9, 8, 0.4); color: var(--ink); }

/* ── Slate intro ── */
.slate { position: fixed; inset: 0; z-index: 150; pointer-events: none; display: none; }
html.js .slate { display: block; }
.slate__bar { position: absolute; left: 0; right: 0; height: 50.5vh; background: #050404; }
.slate__bar--t { top: 0; }
.slate__bar--b { bottom: 0; }
.slate__in { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 18px; }
.slate__tc { font-size: clamp(14px, 1.4vw, 18px); color: var(--orange-hi); }
.slate__logo { width: 64px; height: 64px; }

/* ── Cursor (pointer devices) ── */
.cursor { position: fixed; top: 0; left: 0; z-index: 180; pointer-events: none; display: none; opacity: 0; transition: opacity 0.2s; }
.cursor.is-in { opacity: 1; }
@media (hover: hover) and (pointer: fine) { html.js .cursor { display: block; } html.js, html.js * { cursor: none !important; } }
/* An arrow with round corners; its tip (4, 3.5) is the pointer's point. */
.cursor__arrow { position: absolute; left: -4px; top: -3.5px; width: 28px; height: 28px; max-width: none; overflow: visible; transform-origin: 4px 3.5px; transition: transform 0.18s cubic-bezier(0.3, 1.6, 0.5, 1); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45)); }
.cursor__arrow path { fill: rgba(241, 92, 41, 0.22); stroke: var(--orange); stroke-width: 2.6; stroke-linejoin: round; transition: fill 0.18s, stroke 0.18s; }
.cursor.is-hot .cursor__arrow { transform: scale(1.18); }
.cursor.is-hot .cursor__arrow path { fill: var(--orange); }
.cursor.is-down .cursor__arrow { transform: scale(0.86); }
/* Over the orange bands the arrow is drawn in ink so it never disappears. */
.cursor.on-orange .cursor__arrow path { stroke: var(--ink); fill: rgba(11, 9, 8, 0.18); }
.cursor.on-orange.is-hot .cursor__arrow path { fill: var(--ink); }
.cursor__tag { position: absolute; left: 22px; top: 22px; font-size: 10px; color: var(--ink); background: var(--orange); padding: 3px 6px; border-radius: 4px; box-shadow: 0 0 0 1px var(--ink); opacity: 0; transform: scale(0.6); transform-origin: left top; transition: opacity 0.2s, transform 0.2s; }
.cursor.on-orange .cursor__tag { color: var(--cream); background: var(--ink); }
.cursor.is-hot .cursor__tag { opacity: 1; transform: none; }

/* ── HUD (top) ── */
.hud { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; gap: 24px; padding: 16px var(--gutter); mix-blend-mode: normal; transition: background 0.3s; }
.hud.is-solid { background: var(--ink); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 800 22px/1 var(--display); letter-spacing: -0.03em; }
.brand img { width: 32px; height: 32px; }
.brand b { color: var(--orange); }
.hud__tc { font-size: 12px; color: var(--cream-2); padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; background: rgba(11, 9, 8, 0.55); }
.hud__tc em { font-style: normal; color: var(--muted); }
.hud__nav { display: flex; gap: 24px; margin-left: auto; font-size: 15px; }
.hud__nav a { text-decoration: none; color: var(--cream-2); }
.hud__nav a:hover { color: var(--cream); }
@media (max-width: 860px) { .hud__nav, .hud__tc em { display: none; } .hud .btn { margin-left: auto; } }

/* ── Chapters (bottom timeline) ── */
.chapters { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; padding: 0 var(--gutter) 10px; background: var(--ink); border-top: 1px solid var(--line); pointer-events: none; }
.chapters__row { display: flex; pointer-events: auto; }
.chapters__row a { flex: 1; padding: 18px 0 8px; text-decoration: none; font: 500 11px/1 var(--mono); letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase; border-left: 1px solid var(--line); padding-left: 8px; transition: color 0.2s; }
.chapters__row a b { color: var(--orange-hi); font-weight: 500; margin-right: 6px; }
.chapters__row a.is-on, .chapters__row a:hover { color: var(--cream); }
.chapters__track { position: relative; height: 6px; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--line) 0 2px, transparent 2px 6px); }
.chapters__fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 3px; background: var(--orange); }
@media (max-width: 700px) { .chapters__row a { font-size: 0; } .chapters__row a b { font-size: 11px; } }

/* ── 01 Knock-out word ── */
.knock { position: relative; height: 100vh; }
html.js .knock { height: 260vh; }
.knock__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.knock__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.knock__mask { position: absolute; inset: 0; width: 100%; height: 100%; }
.vf__corners { fill: none; stroke: var(--cream); stroke-width: 3; opacity: 0.8; }
.vf__label { font: 500 15px var(--mono); letter-spacing: 0.08em; fill: var(--cream-2); }
.vf__rec { fill: #ff3b30; }
html.js .vf__rec { animation: vf-blink 1.2s steps(2, jump-none) infinite; }
@keyframes vf-blink { 50% { opacity: 0.25; } }
.vf__clip { fill: rgba(244, 237, 230, 0.16); transition: fill 0.25s; }
.vf__clip.is-on { fill: #1b8a8f; }
.vf__head { stroke: var(--orange); stroke-width: 2.5; }
.vf__head-cap { fill: var(--orange); }
@media (max-width: 760px), (max-height: 640px) { .vf__meta { display: none; } }
.knock__words { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(90px, 14vh, 150px); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.kicker { font-size: 12px; color: var(--cream-2); margin: 0 0 14px; width: 100%; }
.knock__line { font: 700 clamp(28px, 3.6vw, 54px)/1.02 var(--display); letter-spacing: -0.03em; margin: 0; max-width: 15em; }
.knock__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.knock__scroll { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); font-size: 11px; color: var(--muted); margin: 0; display: none; }
html.js .knock__scroll { display: block; top: auto; bottom: 64px; }

/* ── Statement ── */
.say { background: var(--orange); color: var(--ink); padding: clamp(90px, 16vw, 220px) var(--gutter); }
.say__text { font: 800 clamp(34px, 5.6vw, 92px)/0.98 var(--display); letter-spacing: -0.04em; margin: 0 auto; max-width: 17em; }
.say .word { opacity: 0.14; }
.strike { position: relative; display: inline-block; }
.strike::after { content: ""; position: absolute; left: -4%; right: -4%; top: 52%; height: 0.12em; background: var(--ink); transform: scaleX(var(--s, 1)) rotate(-4deg); transform-origin: left; border-radius: 0.06em; }
html.js .strike::after { --s: 0; }

/* ── Blocks, labels, big type ── */
.block { padding: clamp(100px, 14vw, 200px) 0 clamp(60px, 8vw, 120px); }
.label { font-size: 12px; color: var(--muted); margin: 0 0 22px; display: flex; align-items: center; gap: 10px; }
.label b { color: var(--cream); background: var(--ink-3); border: 1px solid var(--line); padding: 4px 8px; border-radius: 6px; font-weight: 500; }
.big { font: 800 clamp(52px, 9vw, 150px)/0.88 var(--display); letter-spacing: -0.05em; margin: 0; }
.big .o { color: var(--orange); }
.split-line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }

/* The editor in strips: each strip shows its slice of the same picture. */
.strips { --n: 7; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 6px; width: min(1320px, 100% - 2 * var(--gutter)); margin: clamp(48px, 7vw, 90px) auto 0; aspect-ratio: 16 / 10; }
.strips span { background-image: url("shots/02-editor.webp"); background-size: calc(var(--n) * 100% + (var(--n) - 1) * 6px) 100%; border-radius: 8px; }
.strips span:nth-child(1) { background-position: 0% 0; }
.strips span:nth-child(2) { background-position: 16.666% 0; }
.strips span:nth-child(3) { background-position: 33.333% 0; }
.strips span:nth-child(4) { background-position: 50% 0; }
.strips span:nth-child(5) { background-position: 66.666% 0; }
.strips span:nth-child(6) { background-position: 83.333% 0; }
.strips span:nth-child(7) { background-position: 100% 0; }

.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 60px; }
.fact { padding: 26px 22px; background: var(--ink-2); border-top: 2px solid var(--orange); }
.fact b { display: block; font: 800 clamp(40px, 5vw, 72px)/1 var(--display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.fact span { color: var(--cream-2); font-size: 15px; }
@media (max-width: 860px) { .facts { grid-template-columns: 1fr 1fr; } }

/* ── Stacked cards ── */
.stack { padding: 0 var(--gutter) 10vh; }
.card { position: sticky; top: 9vh; height: 82vh; margin: 0 auto 6vh; max-width: 1320px; border-radius: 28px; overflow: hidden; display: grid; grid-template-columns: 0.85fr 1.4fr; align-items: center; gap: clamp(24px, 4vw, 60px); padding: clamp(28px, 4vw, 56px); transform-origin: 50% 0; }
.card--teal { background: var(--teal); }
.card--rust { background: var(--rust); }
.card--violet { background: var(--violet); }
.card--ink { background: var(--ink-2); border: 1px solid var(--line); }
.card h3 { font: 800 clamp(34px, 4vw, 62px)/0.95 var(--display); letter-spacing: -0.04em; margin: 0 0 18px; }
.card p { color: rgba(246, 239, 231, 0.82); margin: 0 0 14px; font-size: 18px; }
.card img { width: 100%; border-radius: 14px; }
.card .label { color: rgba(246, 239, 231, 0.7); }
.card .label b { background: rgba(0, 0, 0, 0.25); border-color: rgba(255, 255, 255, 0.15); }
.ticks { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.ticks li { padding: 8px 14px; border-radius: 999px; background: rgba(0, 0, 0, 0.28); font-weight: 600; font-size: 15px; }
.chat { display: grid; gap: 10px; font-size: 15px; }
.msg { padding: 11px 14px; border-radius: 14px; max-width: 95%; line-height: 1.4; }
.msg--you { justify-self: end; background: var(--orange); color: var(--ink); border-bottom-right-radius: 4px; }
.msg--tool { font: 500 12px/1.5 var(--mono); color: var(--muted); padding: 0 4px; }
.msg--tool b { color: var(--orange-hi); font-weight: 500; }
.msg--ai { background: var(--ink-3); border: 1px solid var(--line); color: var(--cream-2); border-bottom-left-radius: 4px; }
@media (max-width: 900px) { .card { position: relative; top: 0; height: auto; grid-template-columns: 1fr; } }

/* ── Reel ── */
.reel { position: relative; }
.reel__pin { height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.reel__row { display: flex; gap: 22px; width: max-content; padding: 0 var(--gutter); }
.reel figure { margin: 0; width: min(760px, 80vw); flex: none; }
.reel img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px; border: 1px solid var(--line); }
.reel figcaption { margin-top: 12px; font-size: 12px; color: var(--muted); }
@media (max-width: 860px) { .reel__pin { height: auto; padding: 60px 0; } .reel__row { overflow-x: auto; width: auto; } }

/* ── Get it ── */
.get { position: relative; background: var(--orange); color: var(--ink); overflow: hidden; padding: 0 0 clamp(80px, 10vw, 140px); }
.get__marquee { overflow: hidden; border-bottom: 2px solid var(--ink); padding: 16px 0; }
.get__track { display: flex; gap: 48px; width: max-content; font: 800 clamp(40px, 7vw, 110px)/1 var(--display); letter-spacing: -0.04em; animation: marquee 18s linear infinite; }
.get__track span::after { content: "↓"; margin-left: 48px; }
@keyframes marquee { to { transform: translateX(-50%); } }
.get__in { padding-top: clamp(60px, 9vw, 120px); }
.get__title { font: 800 clamp(48px, 8.5vw, 140px)/0.88 var(--display); letter-spacing: -0.05em; margin: 0 0 40px; }
.get__row { display: flex; flex-wrap: wrap; gap: 12px; }
.get__ver { margin: 26px 0 0; font-size: 12px; color: rgba(11, 9, 8, 0.7); }

/* ── Footer: the end of the page's timeline — a ruler, the links in columns, the wordmark sliding off the edge ── */
.foot { position: relative; padding: clamp(56px, 7vw, 96px) 0 0; overflow: hidden; background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%); border-top: 1px solid var(--line); }
.foot__ruler { display: flex; justify-content: space-between; padding-top: 14px; margin-bottom: clamp(40px, 5vw, 64px); font-size: 11px; color: var(--muted);
  background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 12px) top / 100% 6px no-repeat,
              repeating-linear-gradient(90deg, var(--muted) 0 1px, transparent 1px 120px) top / 100% 11px no-repeat; }
.foot__ruler { position: relative; }
.foot__ruler span:last-child { color: var(--orange); font-variant-numeric: tabular-nums; }
.foot__fill, .foot__head { display: none; position: absolute; top: 0; left: 0; }
.foot__fill { right: 0; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; }
.foot__head { width: 2px; height: 12px; margin-left: -1px; background: var(--orange); }
.foot__head::before { content: ""; position: absolute; top: -2px; left: -6px; width: 14px; height: 12px; background: var(--orange); clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 100%, 0 50%); }
html.js .foot__fill, html.js .foot__head { display: block; }
.foot__grid { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: clamp(28px, 4vw, 64px); }
.brand--foot img { width: 40px; height: 40px; }
.brand--foot span { font-size: 26px; }
.foot__line { max-width: 34ch; margin: 18px 0 22px; color: var(--cream-2); font-size: 16px; }
.foot__dl { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--ink-3); color: var(--cream); font: 600 14px/1 var(--body); text-decoration: none; transition: border-color 0.2s, background 0.2s, color 0.2s; }
.chip svg { width: 16px; height: 16px; }
.chip:hover { border-color: var(--orange); color: var(--orange-hi); }
.chip.is-mine { position: relative; overflow: hidden; background: var(--orange); border-color: var(--orange); color: #1a0c06; }
html.js .chip.is-mine::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 240, 225, 0.55) 50%, transparent 70%); transform: translateX(-120%); animation: sheen 4.5s ease-in-out 1.5s infinite; pointer-events: none; }
@keyframes sheen { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.foot__ver { margin: 18px 0 0; font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 3px rgba(61, 220, 132, 0.15); flex: none; }
html.js .dot { animation: live 2.2s ease-out infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.5); } 70%, 100% { box-shadow: 0 0 0 9px rgba(61, 220, 132, 0); } }
.foot__col { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.foot__col h3 { margin: 6px 0 8px; font-size: 11px; font-weight: 500; color: var(--orange); letter-spacing: 0.12em; }
.foot__col a, .foot__soon { color: var(--cream-2); text-decoration: none; font-size: 15px; position: relative; }
.foot__col a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform 0.25s; }
.foot__col a:hover { color: var(--cream); }
.foot__col a:hover::after { transform: scaleX(1); }
.foot__soon { color: var(--muted); }
.foot__soon em { font-style: normal; font: 500 10px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 6px; margin-left: 6px; border-radius: 4px; background: var(--ink-3); color: var(--muted); vertical-align: 2px; }
.foot__mark { margin: clamp(48px, 6vw, 80px) 0 0; font: 800 clamp(84px, 22vw, 360px)/0.78 var(--display); letter-spacing: -0.06em; text-align: center; user-select: none; white-space: nowrap;
  margin-bottom: -0.16em; }
/* Each letter its own box (so each can move) with the same fade to the bottom. */
.foot__mark > span { display: inline-block; background: linear-gradient(180deg, var(--ink-3) 0%, var(--ink-3) 45%, transparent 92%); -webkit-background-clip: text; background-clip: text; color: transparent; will-change: transform; }
.foot__mark > .foot__x { background: linear-gradient(180deg, rgba(241, 92, 41, 0.55) 0%, rgba(241, 92, 41, 0.2) 50%, transparent 92%); -webkit-background-clip: text; background-clip: text; transform-origin: 50% 70%; }
/* The live logo leads the word: the squircle as tall as the letters, standing on their line. */
.foot__mark > .foot__logo { background: none; width: 0.6em; height: 0.6em; margin-right: 0.08em; vertical-align: 0.2em; cursor: pointer; }
.foot__logo img, .foot__logo svg { display: block; width: 100%; height: 100%; }
.face.face--foot path { fill: #fff; }
.face.face--foot .face__body { fill: var(--orange); }
.face.face--foot .face__mouth, .face.face--foot .face__spin { fill: none; stroke: #fff; }
.face.face--foot .face__z { display: none; }
.foot__top span { display: inline-block; transition: transform 0.25s; }
.foot__top:hover span { transform: translateY(-3px); }
.foot__base { position: relative; display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; align-items: center; padding: 20px 0 28px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); background: var(--ink-2); }
.foot__base a { color: var(--cream-2); text-decoration: none; }
.foot__base a:hover { color: var(--orange-hi); }
@media (max-width: 960px) {
  .foot__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot__lead { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__req { order: 3; flex-basis: 100%; }
}

/* ── Film overlay ── */
.film { position: fixed; inset: 0; z-index: 190; background: rgba(5, 4, 4, 0.94); display: grid; place-items: center; padding: var(--gutter); }
.film[hidden] { display: none; }
.film video { width: min(1280px, 100%); border-radius: 14px; }
.film button { position: absolute; top: 24px; right: var(--gutter); background: var(--ink-3); color: var(--cream); border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; font: 600 14px var(--body); cursor: pointer; }

@media (prefers-reduced-motion: reduce) { .rec, .get__track { animation: none; } }

/* ── Features: four steps; on a big screen the section holds while the app moves to each part ── */
.feat { padding: clamp(100px, 13vw, 180px) 0 clamp(40px, 6vw, 80px); }
.feat__head { margin-bottom: 56px; }
.feat__title { font: 800 clamp(40px, 5.4vw, 80px)/0.95 var(--display); letter-spacing: -0.045em; margin: 0; max-width: 12em; }
.feat__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; align-items: center; }
.face { overflow: visible; }
/* The pen that uncovers the smile while it is drawn in: a line only (the face colours must never fill it). */
.face mask .face__pen { fill: none !important; stroke: #fff !important; }
.feat__side > .face { display: block; width: 104px; height: auto; margin-bottom: 36px; cursor: pointer; }
.brand .face--logo { width: 32px; height: 32px; flex: none; }
.slate .face--slate { width: clamp(90px, 10vw, 140px); height: auto; }
.get .face--get { display: block; width: clamp(80px, 8vw, 112px); height: auto; margin: 0 0 28px; }
.face__z { fill: var(--cream-2); font-family: var(--display); font-weight: 800; }
.face path { fill: var(--orange); }
.face .face__mouth, .face .face__spin { fill: none; stroke: var(--orange); stroke-width: 48; stroke-linecap: round; stroke-linejoin: round; }
.face .face__spin { stroke-width: 13; }
.face--logo path { fill: #fff; }
.face--logo .face__body { fill: var(--orange); }
.face--logo .face__mouth { stroke: #fff; }
.face--logo .face__z { display: none; }
.feat__steps { list-style: none; margin: 0 0 44px; padding: 0; display: grid; gap: 2px; }
.feat__steps button { position: relative; display: flex; align-items: baseline; gap: 14px; width: 100%; padding: 10px 0 12px; border: 0; background: none; text-align: left; font: 600 17px/1.2 var(--body); color: var(--muted); cursor: pointer; transition: color 0.2s; }
.feat__steps button .mono { font-size: 12px; font-weight: 500; }
.feat__steps button i { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); }
.feat__steps button i::after { content: ""; position: absolute; inset: 0; background: var(--orange); transform: scaleX(var(--p, 0)); transform-origin: left; }
.feat__steps button:hover, .feat__steps button.is-on { color: var(--cream); }
.feat__texts { position: relative; }
.feat__text h3 { font: 800 clamp(28px, 2.8vw, 40px)/1.02 var(--display); letter-spacing: -0.035em; margin: 0 0 16px; }
.feat__text p { margin: 0; color: var(--cream-2); font-size: 17px; line-height: 1.6; max-width: 30em; }
.feat__frame, .feat__still { position: relative; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--ink-2); }
.feat__frame img, .feat__still img { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 0 0; }
/* Held (big screens with motion): the texts sit on one another; otherwise one block per step with its picture. */
.feat__pin.is-held .feat__text { position: absolute; inset: 0 0 auto; }
.feat__pin.is-held .feat__texts { min-height: 200px; }
.feat__pin.is-held .feat__still { display: none; }
.feat__pin:not(.is-held) .feat__grid { display: block; }
.feat__pin:not(.is-held) .feat__steps, .feat__pin:not(.is-held) .feat__frame { display: none; }
.feat__pin:not(.is-held) .feat__texts { display: grid; gap: 72px; }
.feat__pin:not(.is-held) .feat__text { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: center; }
@media (max-width: 900px) {
  .feat__pin:not(.is-held) .feat__text { grid-template-columns: 1fr; gap: 24px; }
  .feat__pin:not(.is-held) .feat__texts { gap: 56px; }
  .feat__side > .face { width: 80px; }
}

/* The page ends above the fixed bottom bar. */
body { padding-bottom: 52px; }
/* On the orange download band the face is drawn in ink. */
.get .face--get path { fill: var(--ink); }
.get .face--get .face__mouth, .get .face--get .face__spin { fill: none; stroke: var(--ink); }
.get .face--get .face__z { fill: var(--ink); }

/* ── Privacy, Terms, 404 ── */
.legal { padding: clamp(120px, 14vw, 170px) 0 clamp(80px, 9vw, 120px); max-width: 780px; }
.legal .legal__kicker { margin: 0 0 18px; font-size: 12px; color: var(--orange); }
.legal h1 { font: 800 clamp(44px, 7vw, 88px)/0.92 var(--display); letter-spacing: -0.045em; margin: 0 0 18px; }
.legal h2 { font: 700 22px/1.2 var(--display); letter-spacing: -0.02em; margin: 44px 0 12px; padding-top: 22px; border-top: 1px solid var(--line); }
.legal .date { color: var(--muted); margin: 0 0 32px; font-size: 15px; }
.legal p, .legal li { color: var(--cream-2); }
.legal li { margin: 7px 0; }
.legal a { color: var(--orange-hi); }
.legal b { color: var(--cream); }
@media (max-width: 420px) { .hud__tc { display: none; } }