/*
  FEASE site styles.
  Layout, type rhythm, sheets and scroll-driven motion adapted from the 8B app landing page template,
  MIT License, Copyright (c) 2026 8B (https://8b.com). See CREDITS.md and LICENSE-TEMPLATE.
  Colours and type are FEASE's own (brand/BRAND.md): graphite grounds, answer green for actions on dark,
  deep green for actions on light, Schibsted Grotesk throughout.
*/
@layer tokens, base, atoms, layout, sections, scenes;

@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/schibsted-grotesk-latin-ext.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; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/schibsted-grotesk-latin.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; }

@layer tokens {
  :root {
    --graphite: #1a1d1c;
    --screen: #2b302e;
    --bg: #f2f3f1;
    --surface: #e4e7e4;
    --surface-2: #d9ddd9;
    --ink: #151817;
    --muted: #474d4a;
    --deep: #1d7f47;
    --deep-hover: #17693a;
    --answer: #3dbe6e;
    --answer-hover: #5ccc86;
    --paper: #e8ebe8;
    --paper-muted: #b9bfbc;
    --panel: #454545;
    --danger-on-dark: #ffb4a8;
    --danger-on-light: #a3261b;

    --font: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;

    /* five type sizes */
    --t-display: clamp(2.75rem, 6vw, 6rem);
    --t-head: clamp(2.25rem, 4.6vw, 4.25rem);
    --t-mid: clamp(1.25rem, 1.7vw, 1.5rem);
    --t-body: 1.0625rem;
    --t-small: 0.9375rem;

    --radius-sheet: 3.5rem;
    --radius-card: 1.75rem;
    --radius-pill: 999px;
    --space-1: clamp(1.125rem, 4.2vw, 3.5rem);
    --space-2: clamp(5rem, 10vw, 9rem);
    --nav-h: 4.5rem;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  }
}

@layer base {
  @media (max-width: 47.99rem) { :root { --t-display: min(10.4vw, 3.5rem); } }
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--graphite); scroll-padding-top: calc(var(--nav-h) + 1rem); }
  body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--t-body); line-height: 1.55; -webkit-font-smoothing: antialiased; }
  img, svg, video { display: block; max-width: 100%; }
  img, video { height: auto; }
  h1, h2, h3, p, ol, ul, figure, blockquote, dl, dd { margin: 0; }
  ol, ul { padding: 0; list-style: none; }
  a { color: inherit; }
  button, input, select, textarea { font: inherit; color: inherit; }
  h1, h2, h3 { font-weight: 800; letter-spacing: -0.03em; line-height: 1; text-wrap: balance; }
  p, li { text-wrap: pretty; }
  :focus-visible { outline: 0.1875rem solid var(--deep); outline-offset: 0.1875rem; }
  .on-dark :focus-visible { outline-color: var(--answer); }
  ::selection { background: var(--answer); color: var(--graphite); }
  .skip-link { position: fixed; z-index: 100; top: 0.75rem; left: 0.75rem; padding: 0.75rem 1rem; border-radius: var(--radius-pill); background: var(--bg); color: var(--ink); font-weight: 700; translate: 0 -200%; }
  .skip-link:focus-visible { translate: 0 0; }
  .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
}

@layer atoms {
  .t-display { font-size: var(--t-display); font-weight: 800; line-height: 0.96; letter-spacing: -0.045em; }
  .t-head { font-size: var(--t-head); font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
  .t-mid { font-size: var(--t-mid); font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; }
  .t-lead { font-size: var(--t-mid); font-weight: 400; line-height: 1.4; letter-spacing: -0.01em; }
  .t-small { font-size: var(--t-small); line-height: 1.5; }
  .muted { color: var(--muted); }
  .on-dark .muted { color: var(--paper-muted); }

  /* buttons: fully round, one flat fill */
  .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3.25rem; padding: 0.875rem 1.625rem; border: 0; border-radius: var(--radius-pill); background: var(--deep); color: #fff; font: 700 var(--t-small)/1.2 var(--font); letter-spacing: -0.005em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 160ms var(--ease-out), scale 120ms var(--ease-out); }
  .btn:hover { background: var(--deep-hover); }
  .btn:active { scale: 0.97; }
  .on-dark .btn { background: var(--answer); color: var(--graphite); }
  .on-dark .btn:hover { background: var(--answer-hover); }
  .btn--small { min-height: 2.75rem; padding: 0.625rem 1.25rem; font-size: 0.9375rem; }
  .btn__label { display: block; transition: translate 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .btn__wave { position: absolute; top: 50%; right: 1rem; display: flex; align-items: center; gap: 0.125rem; height: 0.875rem; translate: 0 -50%; opacity: 0; transition: opacity 0.3s; }
  .btn__wave i { width: 0.1875rem; height: 100%; border-radius: 0.125rem; background: currentColor; scale: 1 0.35; }
  @media (hover: hover) {
    .btn:hover .btn__label { translate: -0.5rem 0; }
    .btn:hover .btn__wave { opacity: 1; }
    .btn:hover .btn__wave i { animation: btn-talk 0.7s ease-in-out infinite alternate; }
    .btn:hover .btn__wave i:nth-child(2) { animation-delay: -0.35s; }
    .btn:hover .btn__wave i:nth-child(3) { animation-delay: -0.6s; }
  }
  @keyframes btn-talk { from { scale: 1 0.3; } to { scale: 1 1; } }

  /* links: underline grows on hover */
  .link { color: inherit; font-weight: 700; text-decoration: underline; text-decoration-thickness: 0.125rem; text-underline-offset: 0.3em; transition: color 160ms var(--ease-out), text-decoration-color 160ms; }
  .link:hover { color: var(--deep); }
  .on-dark .link:hover { color: var(--answer); }
  .link--target { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .nav-link { position: relative; color: inherit; font-weight: 600; text-decoration: none; padding-bottom: 0.125rem; }
  .nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.35rem; height: 0.125rem; background: currentColor; transform-origin: 0 50%; scale: 0 1; transition: scale 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
  @media (hover: hover) { .nav-link:hover::after { scale: 1 1; } }
  .nav-link[aria-current="page"]::after { scale: 1 1; }

  .icon-btn { position: relative; display: inline-grid; place-items: center; width: 3rem; height: 3rem; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--screen); color: var(--paper); cursor: pointer; overflow: hidden; isolation: isolate; }
  .icon-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--answer); transform-origin: 50% 100%; scale: 1 0; transition: scale 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .icon-btn svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  @media (hover: hover) { .icon-btn:hover { color: var(--graphite); } .icon-btn:hover::before { scale: 1 1; } }

  /* sheets: each section after the hero is a sheet with large rounded upper corners laid over the last */
  .band { position: absolute; z-index: 0; top: 0; left: 0; right: 0; bottom: calc(-1 * var(--radius-sheet)); background: var(--band, var(--bg)); clip-path: inset(0% 0% 0% 0% round var(--radius-sheet) var(--radius-sheet) 0 0); pointer-events: none; }
  .sheet { position: relative; isolation: isolate; }
  .sheet > :not(.band) { position: relative; z-index: 1; }
  .on-dark { color: var(--paper); }

  .sheet.on-dark :is(.leaves__side, .leaves__lines, .join__copy, .join__grid > figure, .closing__copy, .closing .paths) { background: var(--band); }
  .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@layer layout {
  .wrap { width: 100%; max-width: 88rem; margin-inline: auto; padding-inline: max(var(--space-1), env(safe-area-inset-left, 0px)) max(var(--space-1), env(safe-area-inset-right, 0px)); }
  .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 1.5rem); }
}

@layer sections {
  /* ---------- navigation: a plain bar ---------- */
  #nav { position: sticky; top: 0; z-index: 50; background: var(--graphite); color: var(--paper); }
  #nav .nav__bar { display: flex; align-items: center; gap: 1.75rem; min-height: var(--nav-h); }
  #nav .nav__brand { display: inline-flex; align-items: center; gap: 0.625rem; min-height: 2.75rem; text-decoration: none; }
  #nav .nav__brand img { width: 1.875rem; height: 1.875rem; }
  #nav .nav__word { font-size: var(--t-mid); font-weight: 800; letter-spacing: -0.02em; }
  #nav .nav__links { display: flex; gap: 1.5rem; margin-left: auto; font-size: var(--t-small); }
  #nav .nav__toggle { display: none; margin-left: auto; }
  #nav .menu { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; gap: 2rem; padding: 6rem var(--space-1) 2.5rem; overflow-y: auto; background: var(--graphite); color: var(--paper); }
  #nav .menu[hidden] { display: none; }
  #nav .menu__close { position: absolute; top: 0.75rem; right: var(--space-1); }
  #nav .menu__links { display: grid; gap: 0.25rem; }
  #nav .menu__links a { display: inline-flex; align-items: center; min-height: 3rem; font-size: clamp(1.75rem, 8vw, 2.75rem); font-weight: 700; letter-spacing: -0.03em; }
  #nav .menu .btn { align-self: flex-start; }
  @media (max-width: 63.99rem) {
    #nav .nav__links, #nav .nav__cta { display: none; }
    #nav .nav__toggle { display: inline-grid; }
  }
  @media (min-width: 64rem) { #nav .menu { display: none; } }

  /* ---------- hero: the title, the sentence, the form; the call beside ---------- */
  #hero { position: relative; isolation: isolate; overflow-x: clip; background: var(--graphite); color: var(--paper); padding-block: clamp(2.5rem, 6vh, 4.5rem) clamp(5rem, 9vw, 7.5rem); }
  #hero::after { content: ""; position: absolute; z-index: -1; top: 100%; left: 0; right: 0; height: 100svh; background: var(--graphite); }
  #hero .hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.25rem clamp(2rem, 4vw, 4.5rem); align-items: start; }
  #hero .hero__copy { display: grid; gap: 1.75rem; align-content: start; }
  #hero .hero__title { grid-column: 1 / -1; }
  #hero .hero__lead { max-width: 30rem; }
  #hero .hero__status { color: var(--paper-muted); font-size: var(--t-small); }
  #hero .hero__media { position: relative; }
  @media (prefers-reduced-motion: no-preference) {
    .js #hero .hero__copy { animation: hero-rise 1s cubic-bezier(0.16, 0.84, 0.3, 1) backwards; }
    .js #hero .hero__media { animation: hero-settle 1.2s cubic-bezier(0.16, 0.84, 0.3, 1) 120ms backwards; }
  }
  @keyframes hero-rise { from { translate: 0 1.75rem; opacity: 0; } }
  @keyframes hero-settle { from { scale: 0.96; opacity: 0; } }
  @media (max-width: 63.99rem) {
    #hero .hero__grid { grid-template-columns: 1fr; }
  }

  /* ---------- the call on your Mac, with the FEASE panel (interface fragment: data-ui) ---------- */
  .demo { display: grid; gap: 0.875rem; }
  .screen { position: relative; aspect-ratio: 16 / 10.4; border-radius: 1.125rem; overflow: hidden; background: #0f1110; color: #e9ecea; font-family: var(--ui); container-type: inline-size; }
  .screen .bezel { height: 6.5cqw; display: grid; place-items: center; }
  .screen .cam { width: 1.7cqw; height: 1.7cqw; border-radius: 50%; background: #8a8f8d; }
  .screen .desk { position: absolute; inset: 6.5cqw 2cqw 2cqw; border-radius: 1.6cqw; background: #222826; overflow: hidden; }
  .screen .menubar { display: flex; justify-content: space-between; padding: 0.9cqw 1.6cqw; font-size: 1.75cqw; color: #c9cecb; }
  .screen .menubar b { font-weight: 700; color: #fff; margin-right: 1.4cqw; }
  .screen .menubar span + span { margin-left: 1.4cqw; }
  .callwin { position: absolute; left: 4cqw; right: 4cqw; top: 25cqw; bottom: 3cqw; border-radius: 1.4cqw; background: #1b1f1e; display: grid; grid-template-rows: auto 1fr auto; }
  .callwin .title { text-align: center; font-size: 1.7cqw; color: #9aa09d; padding: 0.8cqw; }
  .callwin .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2cqw; padding: 0 1.2cqw; }
  .tile { position: relative; border-radius: 1cqw; background: #262c2a; display: grid; place-items: center; }
  .tile .who { position: absolute; left: 1cqw; top: 1cqw; font-size: 1.6cqw; background: #151817; padding: 0.3cqw 0.8cqw; border-radius: 0.6cqw; }
  .tile .face { width: 6.4cqw; height: 6.4cqw; margin-bottom: 7cqw; border-radius: 50%; display: grid; place-items: center; font-size: 2.6cqw; font-weight: 600; }
  .tile.buyer .face { background: #34506a; }
  .tile.you .face { background: #2f5a40; }
  .tile .said { position: absolute; left: 1cqw; right: 1cqw; bottom: 1cqw; background: rgba(10, 12, 11, 0.85); border-radius: 0.8cqw; padding: 0.9cqw 1.2cqw; font-size: 2cqw; line-height: 1.3; }
  .tile .said small { display: block; font-size: 1.4cqw; color: #9aa09d; letter-spacing: 0.04em; }
  .callwin .ctrls { display: flex; justify-content: center; gap: 1cqw; padding: 1.2cqw; }
  .callwin .ctrls i { width: 3.6cqw; height: 3.6cqw; border-radius: 50%; background: #2c3230; }
  .callwin .ctrls i.end { width: 5.6cqw; border-radius: 2cqw; background: #c94a3d; }

  /* the FEASE panel, built to the app's numbers: 680pt wide, radius 14, tag 11 bold, body 17, source 11 */
  .fpanel { --u: calc(100cqw / 680 * 0.86); position: absolute; left: 7%; right: 7%; top: 8.4cqw; background: var(--panel); border-radius: calc(14 * var(--u)); padding: calc(14 * var(--u)) calc(20 * var(--u)); color: #fff; font-family: var(--ui); transform-origin: top center; transition: opacity 220ms var(--ease-out), transform 320ms var(--ease-out); }
  .fpanel[hidden] { display: block !important; opacity: 0; transform: translateY(-8px) scale(0.98); pointer-events: none; }
  .fpanel .tag { display: flex; justify-content: space-between; align-items: center; font-size: calc(11 * var(--u) * 1.15); font-weight: 700; letter-spacing: 0.03em; }
  .fpanel .tag b { display: inline-block; padding: calc(2 * var(--u) * 1.15) calc(8 * var(--u) * 1.15); border-radius: 999px; background: #3a3a3c; color: #fff; line-height: 1.25; }
  .fpanel .tag .hide { font-weight: 500; color: #fff; background: #2b302e; padding: calc(2 * var(--u) * 1.15) calc(8 * var(--u) * 1.15); border-radius: 999px; letter-spacing: 0; line-height: 1.25; }
  .fpanel .lead { font-size: calc(17 * var(--u) * 1.1); font-weight: 700; margin-top: calc(8 * var(--u)); line-height: 1.25; }
  .fpanel .body { font-size: calc(17 * var(--u) * 1.1); margin-top: calc(4 * var(--u)); line-height: 1.3; }
  .fpanel .src { text-align: right; font-size: calc(11 * var(--u) * 1.15); font-weight: 600; margin-top: calc(8 * var(--u)); color: rgba(255, 255, 255, 0.9); }
  .fpanel[data-state="answer"] .tag b { background: var(--answer); color: #0b1f12; }
  .fpanel[data-state="ask"] .tag b { background: #f5c542; color: #1f1800; }
  .fpanel[data-state="noanswer"] .tag b { background: #f2994a; color: #1f1000; }
  .shared-chip { position: absolute; right: 2.4cqw; top: 8.6cqw; font-size: 1.6cqw; background: #c94a3d; color: #fff; padding: 0.4cqw 1cqw; border-radius: 0.6cqw; opacity: 0; transition: opacity 200ms var(--ease-out); }
  .screen[data-view="buyer"] .shared-chip { opacity: 1; }
  .screen[data-view="buyer"] .fpanel { opacity: 0 !important; transform: none; }
  .screen[data-view="buyer"] .bezel, .screen[data-view="buyer"] .menubar { visibility: hidden; }
  @container (max-width: 520px) { .fpanel { --u: calc(100cqw / 680 * 1.12); left: 3%; right: 3%; } .screen .menubar { visibility: hidden; } }
  .live-panel { position: relative; container-type: inline-size; }
  .live-panel .fpanel { position: static; --u: calc(100cqw / 680); }

  .controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem 0.875rem; }
  .keycap { display: inline-flex; align-items: center; gap: 0.625rem; min-height: 3rem; padding: 0 1rem 0 0.625rem; border: 0; border-bottom: 4px solid #000; border-radius: 0.75rem; background: var(--screen); color: var(--paper); font: 700 1rem/1 var(--font); cursor: pointer; transition: transform 120ms var(--ease-out), background-color 160ms; }
  .keycap kbd { font: 600 1rem/1 var(--ui); background: #3a403e; border-radius: 6px; padding: 7px 9px; color: #fff; }
  .keycap:hover { background: #343a38; }
  .keycap:active, .keycap.is-down { transform: translateY(3px); border-bottom-width: 1px; }
  .seg { display: inline-flex; background: var(--screen); border-radius: var(--radius-pill); padding: 4px; }
  .seg button { min-height: 2.75rem; padding: 0 1rem; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--paper); font: 600 var(--t-small)/1 var(--font); cursor: pointer; transition: background-color 160ms var(--ease-out), color 160ms; }
  .seg button[aria-pressed="true"] { background: var(--paper); color: var(--graphite); }
  .seg button:hover:not([aria-pressed="true"]) { background: #3a403e; }
  .after { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; flex-wrap: wrap; }
  .demo-note { font-size: var(--t-small); color: var(--paper-muted); min-height: 1.5em; }
  .nextq { min-height: 2.75rem; padding: 0 2px; border: 0; background: none; color: var(--paper); font: 700 var(--t-small)/1 var(--font); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }
  .nextq:hover { color: var(--answer); }
  .hint-touch { display: none; }
  @media (hover: none) and (pointer: coarse) { .hint-keys { display: none; } .hint-touch { display: inline; } }

  /* ---------- the waitlist form ---------- */
  .wl { display: grid; gap: 1rem; max-width: 34rem; }
  .wl__row { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: end; }
  .wl__row--opts { align-items: start; }
  .wl__field { display: grid; gap: 0.375rem; flex: 1 1 14rem; min-width: 0; }
  .wl__label { font-size: var(--t-small); font-weight: 700; }
  .wl__label small { font-weight: 400; color: var(--muted); font-size: inherit; }
  .on-dark .wl__label small { color: var(--paper-muted); }
  .wl__input { width: 100%; min-height: 3.25rem; padding: 0.75rem 1rem; border: 2px solid #8a908d; border-radius: 0.875rem; background: #fff; color: var(--ink); font-size: 1rem; }
  .wl__input:focus-visible { border-color: var(--deep); outline-offset: 2px; }
  .wl__input[aria-invalid="true"] { border-color: var(--danger-on-light); }
  .on-dark .wl__input { border-color: transparent; background: var(--paper); }
  .on-dark .wl__input[aria-invalid="true"] { border-color: var(--danger-on-dark); }
  select.wl__input { appearance: none; padding-right: 2.5rem; }
  .wl__select { position: relative; display: block; }
  .wl__select::after { content: ""; position: absolute; right: 1.1rem; top: 50%; width: 0.5rem; height: 0.5rem; margin-top: -0.4rem; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); rotate: 45deg; pointer-events: none; }
  .wl__usage { border: 0; margin: 0; padding: 0; min-width: 0; flex: 0 1 auto; }
  .wl__row--opts .wl__field { flex: 1 1 10rem; }
  .wl__usage legend { float: left; width: 100%; padding: 0; margin: 0 0 0.375rem; }
  .wl__usage legend + * { clear: both; }
  .wl__choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .wl__choice { position: relative; display: inline-flex; }
  .wl__choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .wl__choice span { display: inline-flex; align-items: center; min-height: 3.25rem; padding: 0 1rem; border-radius: 0.875rem; background: var(--surface); color: var(--ink); font-weight: 600; font-size: var(--t-small); transition: background-color 160ms var(--ease-out); }
  .on-dark .wl__choice span { background: var(--screen); color: var(--paper); }
  .wl__choice input:checked + span { background: var(--ink); color: var(--bg); }
  .on-dark .wl__choice input:checked + span { background: var(--paper); color: var(--graphite); }
  .wl__choice input:focus-visible + span { outline: 0.1875rem solid var(--deep); outline-offset: 2px; }
  .on-dark .wl__choice input:focus-visible + span { outline-color: var(--answer); }
  .wl__choice:hover input:not(:checked) + span { background: var(--surface-2); }
  .on-dark .wl__choice:hover input:not(:checked) + span { background: #3a403e; }
  .wl__check { min-height: 65px; }
  .wl__check:empty { min-height: 0; }
  .wl__submit { flex: none; }
  .wl__status { font-size: var(--t-small); font-weight: 600; min-height: 1.5em; }
  .wl__status:empty { min-height: 0; }
  .wl__status[data-tone="error"] { color: var(--danger-on-light); }
  .on-dark .wl__status[data-tone="error"] { color: var(--danger-on-dark); }
  .wl__status[data-tone="ok"] { color: var(--deep); }
  .on-dark .wl__status[data-tone="ok"] { color: var(--answer); }
  .wl__note { font-size: var(--t-small); color: var(--muted); }
  .on-dark .wl__note { color: var(--paper-muted); }
  .wl__done { display: grid; gap: 0.5rem; padding: 1.25rem 1.5rem; border-radius: var(--radius-card); background: var(--surface); }
  .on-dark .wl__done { background: var(--screen); }
  .wl__done:focus { outline: none; }
  .wl__done:focus-visible { outline: 0.1875rem solid var(--answer); }
  .wl__nojs { padding: 1.25rem 1.5rem; border-radius: var(--radius-card); background: var(--surface); }
  .on-dark .wl__nojs { background: var(--screen); }
  html:not(.js) .wl { display: none; }
  .wl.is-busy .wl__submit { opacity: 0.7; cursor: progress; }

  /* ---------- how a press works: a feature list beside a sticky Mac screen ---------- */
  #how { --band: var(--bg); color: var(--ink); padding-block: var(--space-2) calc(var(--space-2) + 1rem); }
  #how .how__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 1.5rem 4rem; align-items: end; }
  #how .how__lead { max-width: 32rem; }
  #how .how__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; margin-top: clamp(3rem, 6vw, 5rem); }
  #how .how__item { display: flex; flex-direction: column; justify-content: center; gap: 0.625rem; min-height: 44vh; padding-left: 1.5rem; border-left: 0.25rem solid var(--surface-2); }
  #how .how__item h3 { font-size: clamp(1.75rem, 2.6vw, 2.25rem); }
  #how .how__item p { font-size: var(--t-mid); line-height: 1.4; font-weight: 400; letter-spacing: -0.01em; }
  #how .how__item p { max-width: 30rem; }
  #how .how__item b { font-weight: 700; }
  #how .how__aside { position: relative; }
  #how .how__sticky { position: sticky; top: calc(50vh - 15rem + var(--nav-h) / 2); display: grid; gap: 0.75rem; }
  #how .how__device { width: 100%; }
  #how .how__caption { font-size: var(--t-small); color: var(--muted); }
  @media (max-width: 47.99rem) {
    #how .how__head { grid-template-columns: 1fr; }
    #how .how__grid { grid-template-columns: 1fr; gap: 0; }
    #how .how__aside { order: -1; margin-bottom: 2.5rem; }
    #how .how__sticky { position: static; }
    #how .how__item { min-height: 0; padding-block: 1.25rem; }
  }

  /* the Mac that builds one press, step by step (interface fragment: data-ui) */
  .mac { width: 100%; max-width: 46rem; margin: 0 auto; container-type: inline-size; }
  .mac__screen { position: relative; padding: 6cqw 3cqw 3cqw; border-radius: 1.25rem; background: #0f1110; font-family: var(--ui); color: #e9ecea; }
  .mac__cam { position: absolute; top: 2.6cqw; left: 50%; width: 1.8cqw; height: 1.8cqw; margin-left: -0.9cqw; border-radius: 50%; background: #8a8f8d; }
  .mac__desk { display: grid; align-content: start; gap: 1.8cqw; padding: 2.2cqw; border-radius: 1.6cqw; background: #222826; }
  .mac__panel { --u: calc(100cqw / 680 * 0.9); }
  .mac__panel .fpanel { position: static; }
  .mac__card { border-radius: 1.4cqw; background: #2c3230; padding: 1.8cqw 2.2cqw; display: grid; gap: 1.1cqw; font-size: 2.2cqw; line-height: 1.35; }
  .mac__card header { display: flex; justify-content: space-between; font-weight: 600; color: #fff; }
  .mac__card header span { font-weight: 400; color: #a9afac; }
  .mac__wave { display: grid; grid-template-columns: 9cqw 1fr; gap: 1.6cqw; align-items: center; color: #b9bfbc; }
  .mac__bars { display: flex; align-items: center; gap: 0.35cqw; height: 3.4cqw; }
  .mac__bars i { flex: 1; height: calc(var(--h) * 100%); border-radius: 0.2cqw; background: #59605d; }
  .mac__bars--buyer i.s { background: #6f93b5; }
  .mac__bars--you i.s { background: #5aa577; }
  .mac__row { display: grid; grid-template-columns: 6cqw 1fr; gap: 1.4cqw; color: #d5d9d7; }
  .mac__row time { color: #a9afac; font-variant-numeric: tabular-nums; }
  .mac__row.hot { color: #fff; font-weight: 600; }
  .mac__row.hot span { background: #2f5a40; border-radius: 0.6cqw; padding: 0 0.8cqw; margin-left: -0.8cqw; }
  .mac__cand { display: grid; grid-template-columns: 1fr auto; gap: 0.6cqw 1.6cqw; align-items: center; color: #d5d9d7; }
  .mac__cand span { font-variant-numeric: tabular-nums; }
  .mac__cand .bar { grid-column: 1 / -1; position: relative; height: 0.9cqw; border-radius: 0.45cqw; background: #3a403e; }
  .mac__cand .bar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: #7b827f; }
  .mac__cand .bar::after { content: ""; position: absolute; left: 90%; top: -0.6cqw; bottom: -0.6cqw; width: 0.35cqw; background: #fff; }
  .mac__cand.pick { color: #fff; font-weight: 600; }
  .mac__cand.pick .bar i { background: var(--answer); }

  /* ---------- what leaves your Mac ---------- */
  #leaves { --band: var(--screen); padding-block: var(--space-2) calc(var(--space-2) + 1rem); }
  #leaves .leaves__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem 5rem; align-items: start; }
  #leaves .leaves__side { display: grid; gap: 1.75rem; justify-items: start; }
  #leaves .leaves__lines { display: grid; gap: clamp(2.25rem, 4vw, 3.5rem); }
  #leaves .leaves__lines li { display: grid; gap: 0.625rem; padding-left: 1.5rem; border-left: 0.25rem solid var(--answer); }
  #leaves .leaves__lines li:nth-child(2) { border-left-color: var(--paper-muted); }
  #leaves .leaves__lines li:nth-child(3) { border-left-color: var(--paper); }
  #leaves .leaves__lines p { max-width: 34rem; color: var(--paper-muted); }
  #leaves .leaves__lines .t-mid { color: var(--paper); max-width: 26em; }
  .sent { width: min(100%, 28rem); font-family: var(--ui); background: var(--graphite); color: #e9ecea; border-radius: 1rem; overflow: hidden; font-size: 0.9375rem; }
  .sent header { display: flex; justify-content: space-between; gap: 1rem; padding: 0.875rem 1.125rem; background: #111312; font-weight: 600; }
  .sent header span { color: #a9afac; font-weight: 400; }
  .sent .rows { padding: 0.375rem 0; }
  .sent .row { display: grid; grid-template-columns: 4.25rem 1fr; gap: 0.75rem; padding: 0.5rem 1.125rem; line-height: 1.4; }
  .sent .row time { color: #a9afac; }
  .sent .row.hot { background: #23402f; }
  @media (max-width: 63.99rem) { #leaves .leaves__grid { grid-template-columns: 1fr; } }

  /* ---------- two ways to use it ---------- */
  #ways { --band: var(--surface); padding-block: var(--space-2) calc(var(--space-2) + 1rem); }
  #ways .ways__head { max-width: 40rem; display: grid; gap: 1.25rem; }
  #ways .ways__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(2.5rem, 5vw, 4rem); align-items: stretch; }
  .way { display: grid; grid-template-rows: auto 1fr; border-radius: var(--radius-card); overflow: hidden; }
  .way__pic { margin: 0; overflow: hidden; }
  .way__pic img { width: 100%; height: 100%; aspect-ratio: 2 / 1; object-fit: cover; transition: scale 0.8s var(--ease-out); }
  .way:hover .way__pic img { scale: 1.03; }
  .way__body { display: grid; gap: 1rem; align-content: start; justify-items: start; padding: clamp(1.5rem, 3vw, 2.5rem); }
  .way__body p { max-width: 34rem; }
  .way--own { background: var(--bg); color: var(--ink); }
  .way--team { background: var(--graphite); color: var(--paper); }
  .way--team .way__pic img { aspect-ratio: 16 / 10; }
  @media (max-width: 47.99rem) { #ways .ways__grid { grid-template-columns: 1fr; } }

  /* ---------- the closing waitlist: a film that opens from a small window ---------- */
  #join { --band: var(--graphite); padding-block: var(--space-2) clamp(4rem, 8vw, 6rem); }
  #join .join__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem clamp(2rem, 4vw, 4rem); align-items: center; }
  #join .join__window { position: relative; overflow: hidden; aspect-ratio: 2 / 1.25; background: #000; clip-path: inset(0% 0% 0% 0% round var(--radius-card)); }
  #join .join__window video, #join .join__window img { width: 100%; height: 100%; object-fit: cover; }
  #join .join__cap { margin-top: 0.75rem; font-size: var(--t-small); color: var(--paper-muted); }
  #join .join__copy { display: grid; gap: 1.5rem; align-content: start; }
  @media (max-width: 63.99rem) { #join .join__grid { grid-template-columns: 1fr; } #join .join__copy { order: -1; } }

  /* ---------- inner pages: a dark title band, then a light sheet ---------- */
  .page-hero { position: relative; isolation: isolate; background: var(--graphite); color: var(--paper); padding-block: clamp(3rem, 8vw, 6.5rem) clamp(3.5rem, 6vw, 5.5rem); }
  .page-hero::after { content: ""; position: absolute; z-index: -1; top: 100%; left: 0; right: 0; height: 100svh; background: var(--graphite); }
  .page-hero .page-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem clamp(2rem, 4vw, 4rem); align-items: end; }
  .page-hero h1 { max-width: 12em; }
  .page-hero .t-lead { margin-top: 1.75rem; max-width: 40rem; }
  .page-hero figure { margin: 0; }
  .page-hero figure img, .page-hero figure video { width: 100%; border-radius: 1rem; }
  .page-hero figcaption { margin-top: 0.625rem; font-size: var(--t-small); color: var(--paper-muted); }
  @media (max-width: 63.99rem) { .page-hero .page-hero__grid { grid-template-columns: 1fr; } }

  .doc { --band: var(--bg); padding-block: var(--space-2) calc(var(--space-2) + 1rem); }
  .doc--alt { --band: var(--surface); }
  .doc + .doc { margin-top: 0; }
  .chapters { display: grid; gap: clamp(5rem, 9vw, 7.5rem); }
  .chapter { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 1.5rem); row-gap: 1.5rem; align-items: start; }
  .chapter .side { grid-column: 1 / 6; display: grid; gap: 1.75rem; }
  .chapter h2 { font-size: clamp(1.875rem, 3.2vw, 2.75rem); }
  .chapter .text { grid-column: 7 / 13; display: grid; gap: 1.125rem; max-width: 62ch; }
  .chapter .text p { overflow-wrap: anywhere; }
  .plain { font-size: var(--t-small); padding: 1rem 1.125rem; background: var(--surface); border-radius: 0.875rem; }
  .doc--alt .plain { background: var(--bg); }
  .chapter figure { margin: 0; }
  .chapter figure img, .chapter figure video { border-radius: 0.875rem; width: 100%; }
  .chapter figcaption, .pair figcaption { margin-top: 0.625rem; font-size: var(--t-small); color: var(--muted); }
  .pair { grid-column: 1 / 13; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.5rem); margin-top: 1.5rem; }
  .pair figure { margin: 0; }
  .pair img { width: 100%; border-radius: 0.875rem; }
  @media (max-width: 56rem) {
    .chapter .side, .chapter .text, .pair { grid-column: 1 / 13; }
    .pair { grid-template-columns: 1fr; }
  }

  /* a table without lines: alternating tone rows */
  .table-scroll { overflow-x: auto; }
  .flow { width: 100%; border-collapse: collapse; }
  .flow th { text-align: left; font-size: var(--t-small); color: var(--muted); font-weight: 700; padding: 0 1.125rem 0.75rem; }
  .flow td { padding: 1.125rem; vertical-align: top; }
  .flow tbody tr:nth-child(odd) td { background: var(--surface); }
  .flow td:first-child { font-weight: 700; width: 30%; }
  .flow td.never { color: var(--ink); font-weight: 700; }
  .flow tr.nobody td { background: var(--graphite) !important; color: var(--paper); }
  .flow tr.nobody td.never { color: var(--answer); }
  @media (max-width: 47.99rem) {
    .flow, .flow thead, .flow tbody, .flow tr, .flow td { display: block; width: auto !important; }
    .flow thead { display: none; }
    .flow td { padding: 0.25rem 1.125rem; }
    .flow tr { padding: 0.875rem 0; }
    .flow tbody tr:nth-child(odd) { background: var(--surface); }
    .flow tbody tr:nth-child(odd) td { background: transparent; }
    .flow tr.nobody { background: var(--graphite); }
  }
  .flow-block { display: grid; gap: 2rem; }

  /* lists with two ends */
  .rows { display: grid; }
  .rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 0.25rem 1rem; flex-wrap: wrap; padding-block: 0.625rem; }
  .rows li > span:first-child { display: flex; gap: 0.625rem; align-items: baseline; flex: 1 1 14rem; }
  .rows li > span:first-child::before { content: ""; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--ink); flex: none; transform: translateY(-1px); }
  .rows li > span:last-child { color: var(--muted); margin-left: auto; }

  .need { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem clamp(2rem, 4vw, 4rem); align-items: start; }
  .need h2, .docs-block h2 { font-size: clamp(1.875rem, 3.2vw, 2.75rem); margin-bottom: 1.5rem; }
  .dl { background: var(--graphite); color: var(--paper); padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--radius-card); display: grid; gap: 1.125rem; justify-items: start; }
  .dl h2 { margin-bottom: 0; }
  .dl .soon { display: inline-flex; align-items: center; min-height: 3.25rem; padding: 0.875rem 1.5rem; border-radius: var(--radius-pill); background: var(--screen); color: var(--paper); font-weight: 700; }
  .dl small { color: var(--paper-muted); font-size: var(--t-small); }
  @media (max-width: 56rem) { .need { grid-template-columns: 1fr; } }
  .perm { width: min(100%, 28rem); font-family: var(--ui); background: #fff; color: #1d1d1f; border-radius: 0.75rem; overflow: hidden; }
  .perm header { padding: 0.75rem 1rem; background: #f4f5f4; font-size: 0.9375rem; font-weight: 600; }
  .perm .item { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 0.75rem 1rem; font-size: 0.9375rem; align-items: center; }
  .perm .item + .item { background: #fafbfa; }
  .perm .item small { grid-column: 1; color: #5f6562; font-size: 0.9375rem; }
  .perm .sw { grid-row: 1 / 3; grid-column: 2; width: 38px; height: 22px; border-radius: 11px; background: #30a75c; position: relative; }
  .perm .sw::after { content: ""; position: absolute; right: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; }
  .perm .sw.off { background: #c9cdca; }
  .perm .sw.off::after { right: auto; left: 2px; }
  .keys { display: flex; gap: 0.5rem; align-items: center; }
  .keys kbd { font: 600 1rem/1 var(--ui); background: var(--graphite); color: #fff; border-radius: 0.625rem; padding: 0.875rem 1rem; border-bottom: 4px solid #000; }
  .docs-block { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem clamp(2rem, 4vw, 4rem); align-items: start; }
  .docs-block .lead-col { display: grid; gap: 1.25rem; }
  .docs-list { display: grid; gap: 0.25rem; }
  .docs-list li { display: flex; justify-content: space-between; align-items: center; gap: 0.25rem 1rem; padding-block: 0.625rem; flex-wrap: wrap; }
  .docs-list li b { font-weight: 700; }
  .docs-list li span { color: var(--muted); font-size: var(--t-small); }
  @media (max-width: 56rem) { .docs-block { grid-template-columns: 1fr; } }

  /* the closing band on inner pages */
  .closing { --band: var(--graphite); color: var(--paper); padding-block: var(--space-2) clamp(4rem, 8vw, 6rem); }
  .closing .closing__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem clamp(2rem, 4vw, 4rem); align-items: end; }
  .closing .closing__copy { display: grid; gap: 1.5rem; justify-items: start; }
  .closing .paths { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; justify-content: flex-end; }
  @media (max-width: 63.99rem) { .closing .paths { justify-content: flex-start; } }
  @media (max-width: 63.99rem) { .closing .closing__grid { grid-template-columns: 1fr; } }

  /* questions page: every answer printed, no toggles */
  .qa-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem clamp(2rem, 4vw, 4rem); align-items: end; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
  @media (max-width: 47.99rem) { .qa-head { grid-template-columns: 1fr; } }
  .qa { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem clamp(2rem, 4vw, 4rem); padding-block: clamp(1.5rem, 3vw, 2.25rem); }
  .qa:nth-child(odd) { background: var(--surface); border-radius: var(--radius-card); padding-inline: clamp(1.25rem, 2.5vw, 2rem); }
  .qa:nth-child(even) { padding-inline: clamp(1.25rem, 2.5vw, 2rem); }
  .doc--alt .qa:nth-child(odd) { background: var(--bg); }
  .qa h2 { font-size: var(--t-mid); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
  .qa > div { display: grid; gap: 0.75rem; }
  .qa figure { margin: 0; }
  .qa figure img { width: 100%; border-radius: 0.75rem; }
  .qa .shots { display: grid; gap: 0.625rem; }
  @media (max-width: 47.99rem) { .qa { grid-template-columns: 1fr; } }

  /* privacy page */
  .policy { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem clamp(2rem, 4vw, 4rem); align-items: start; }
  .policy__toc { position: sticky; top: calc(var(--nav-h) + 1.5rem); display: grid; gap: 0.25rem; }
  .policy__toc a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; font-weight: 600; color: var(--muted); }
  .policy__toc a:hover { color: var(--deep); }
  .policy__body { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); }
  .policy__body figure { margin: 0; }
  .policy__body .pair, .qa .pair { grid-column: auto; margin-top: 0.5rem; }
  .policy__body .pair { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  @media (max-width: 47.99rem) { .policy__body .pair { grid-template-columns: 1fr; } }
  .policy__body section { display: grid; gap: 0.875rem; }
  .policy__body h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
  .policy__body ul { display: grid; gap: 0.5rem; }
  .policy__body li { display: flex; gap: 0.75rem; }
  .policy__body li::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; margin-top: 0.6em; border-radius: 50%; background: var(--deep); }
  @media (max-width: 56rem) { .policy { grid-template-columns: 1fr; } .policy__toc { position: static; } }

  /* 404 */
  .lost .page-hero__grid { align-items: center; }
  .lost .paths { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; margin-top: 2rem; }

  /* ---------- footer: pitch, columns, the name at full width ---------- */
  #footer { position: relative; isolation: isolate; background: var(--graphite); color: var(--paper); padding-top: clamp(4rem, 8vw, 6rem); }
  #footer .footer__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; }
  #footer .footer__pitch { display: grid; gap: 1.25rem; justify-items: start; max-width: 26rem; }
  #footer .footer__pitch p { color: var(--paper-muted); }
  #footer .footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; font-size: var(--t-small); }
  #footer .footer__col { display: grid; gap: 0.5rem; align-content: start; }
  #footer .footer__col h2 { font-size: var(--t-small); font-weight: 700; letter-spacing: 0; color: var(--paper-muted); }
  #footer .footer__col a.nav-link { display: inline-flex; align-items: center; min-height: 2.75rem; }
  #footer .footer__col p { color: var(--paper-muted); }
  #footer .footer__mail { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.75rem; }
  #footer .footer__mail span { color: var(--paper); font-weight: 600; }
  #footer .footer__brand { display: flex; align-items: flex-end; gap: clamp(1rem, 3vw, 3rem); margin-top: clamp(3.5rem, 8vw, 7rem); overflow: clip; container-type: inline-size; }
  /* sized from the footer's own width (cqi), not the window, so the word fits once the page stops widening */
  #footer .footer__logo { flex: none; width: clamp(4.5rem, 14cqi, 13rem); height: auto; margin-bottom: 0.6cqi; }
  #footer .footer__word { font-size: min(26rem, (100cqi - clamp(4.5rem, 14cqi, 13rem) - clamp(1rem, 3vw, 3rem)) / (var(--len) * 0.64)); white-space: nowrap; font-weight: 800; letter-spacing: -0.05em; line-height: 0.8; padding-bottom: 0.04em; }
  #footer .footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 2rem; margin-top: clamp(2rem, 4vw, 3rem); padding-block: 1.25rem 2rem; font-size: var(--t-small); color: var(--paper-muted); }
  #footer .footer__legal ul { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
  #footer .footer__legal a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  @media (max-width: 47.99rem) {
    #footer .footer__top { grid-template-columns: 1fr; }
    #footer .footer__cols { grid-template-columns: 1fr 1fr; }
    #footer .footer__cols .footer__col:last-child { grid-column: 1 / -1; }
  }
}

/* ---------- motion: CSS scroll-driven, gated by data-8b-live (set only with support and no reduced motion) ---------- */
@layer scenes {
  /* entrance for the parts of every section: once, as it enters; content stays visible without the gate */
  [data-8b-live] [data-reveal] { opacity: 0; translate: 0 1.5rem; transition: opacity 700ms var(--ease-out), translate 900ms var(--ease-expo); transition-delay: calc(var(--d, 0) * 80ms); }
  [data-8b-live] [data-reveal].is-in { opacity: 1; translate: 0 0; }

  /* headings rise line by line out of a mask */
  [data-8b-live] [data-8b-motion~="captionIn"] .line__in { animation: motion-line-in 1s cubic-bezier(0.16, 1, 0.3, 1) both paused; animation-delay: calc(0.09s * var(--i, 0)); }
  [data-8b-live] [data-8b-motion~="captionIn"].is-in .line__in { animation-play-state: running; }
  @keyframes motion-line-in { 0% { translate: 0 108%; } 100% { translate: 0 0; } }

  /* the sheet widens into place as it rises */
  [data-8b-live] .band[data-8b-motion~="bandRise"] { --band-side: 4%; animation: motion-band-rise linear both; animation-timeline: view(block); animation-range: cover 0% cover 40vh; }
  @keyframes motion-band-rise { 0% { clip-path: inset(0% var(--band-side) 0% var(--band-side) round 9rem 9rem 0 0); } 100% { clip-path: inset(0% 0% 0% 0% round var(--radius-sheet) var(--radius-sheet) 0 0); } }
  @media (max-width: 47.99rem) { [data-8b-live] .band[data-8b-motion~="bandRise"] { --band-side: 2.5%; } }

  /* hero: leaving it, the call grows while the copy lifts */
  [data-8b-live] #hero { view-timeline: --hero-t block; }
  [data-8b-live] #hero .hero__media, [data-8b-live] #hero .hero__copy { animation-timeline: --hero-t; animation-range: exit 0% exit 80%; animation-timing-function: linear; animation-fill-mode: both; }
  [data-8b-live] #hero .hero__media { animation-name: hero-media-out; transform-origin: 50% 0%; }
  [data-8b-live] #hero .hero__copy { animation-name: hero-copy-out; }
  @keyframes hero-media-out { 0% { scale: 1; } 100% { scale: 1.06; } }
  @keyframes hero-copy-out { 0% { translate: 0 0; } 100% { translate: 0 -14%; } }

  /* how a press works: one timeline of 4.2 across the list; item i lights at i, the Mac adds step i */
  [data-8b-live] #how { timeline-scope: --how-list; --how-line: 58vh; }
  [data-8b-live] #how .how__list { view-timeline: --how-list block; }
  [data-8b-live] #how .how__list > li { animation-name: how-item-in, how-item-out, how-item-lit; animation-timeline: --how-list; animation-timing-function: linear; animation-fill-mode: both, forwards, forwards; animation-range:
    cover calc(100vh - var(--how-line) + var(--how-top, 0px) + var(--how-span, 0px) * (var(--i) - 0.1) / 4.2) cover calc(100vh - var(--how-line) + var(--how-top, 0px) + var(--how-span, 0px) * (var(--i) + 0.15) / 4.2),
    cover calc(100vh - var(--how-line) + var(--how-top, 0px) + var(--how-span, 0px) * (var(--i) + 0.9) / 4.2) cover calc(100vh - var(--how-line) + var(--how-top, 0px) + var(--how-span, 0px) * (var(--i) + 1.15) / 4.2),
    cover calc(100vh - var(--how-line) + var(--how-top, 0px) + var(--how-span, 0px) * 3.9 / 4.2) cover calc(100vh - var(--how-line) + var(--how-top, 0px) + var(--how-span, 0px)); }
  [data-8b-live] #how .how__list > li:first-child { animation-name: none, how-item-out, how-item-lit; }
  [data-8b-live] #how .how__list > li:last-child { animation-name: how-item-in, none, none; }
  @keyframes how-item-in { 0% { opacity: 0.32; } 100% { opacity: 1; } }
  @keyframes how-item-out { 0% { opacity: 1; } 100% { opacity: 0.32; } }
  @keyframes how-item-lit { 0% { opacity: 0.32; } 100% { opacity: 1; } }
  [data-8b-live] #how .mac [data-step] { animation-name: how-step; animation-timeline: --how-list; animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1); animation-fill-mode: both; transform-origin: 50% 100%; animation-range: cover calc(100vh - var(--how-line) + var(--how-top, 0px) + var(--how-span, 0px) * var(--how-at) / 4.2) cover calc(100vh - var(--how-line) + var(--how-top, 0px) + var(--how-span, 0px) * (var(--how-at) + 0.3) / 4.2); }
  [data-8b-live] #how .mac [data-step="1"] { --how-at: 0.05; }
  [data-8b-live] #how .mac [data-step="2"] { --how-at: 1.05; }
  [data-8b-live] #how .mac [data-step="3"] { --how-at: 2.05; }
  [data-8b-live] #how .mac [data-step="4"] { --how-at: 3.05; }
  @keyframes how-step { 0% { opacity: 0; translate: 0 14px; scale: 0.96; } 100% { opacity: 1; translate: 0 0; scale: 1; } }
  [data-8b-live] #how .mac [data-step="4"] { transform-origin: 50% 0%; }
  /* exit: the Mac shrinks, tilts and rises */
  [data-8b-live] #how { view-timeline: --how-t block; }
  [data-8b-live] #how .how__device { animation: how-device-exit linear both; animation-timeline: --how-t; animation-range: exit 0% exit 70%; }
  @keyframes how-device-exit { 0% { translate: 0 0; rotate: 0deg; scale: 1; } 100% { translate: 0 -10vh; rotate: -5deg; scale: 0.85; } }
  /* phones: the Mac sits above the list, finished, and the list reads as plain steps */
  @media (max-width: 47.99rem) {
    [data-8b-live] #how .mac [data-step], [data-8b-live] #how .how__list > li, [data-8b-live] #how .how__device { animation: none; }
  }

  /* the closing film opens from a small window to the full frame */
  [data-8b-live] #join .join__window { view-timeline: --join-t block; animation: join-open linear both; animation-timeline: --join-t; animation-range: cover 5vh cover 70vh; }
  [data-8b-live] #join .join__window > * { animation: join-zoom linear both; animation-timeline: --join-t; animation-range: cover 5vh cover 70vh; }
  @keyframes join-open { 0% { clip-path: inset(14% 24% round 5rem); } 100% { clip-path: inset(0% round var(--radius-card)); } }
  @keyframes join-zoom { 0% { scale: 1.3; } 100% { scale: 1; } }

  /* the name rises into place in the footer */
  [data-8b-live] #footer .footer__brand { view-timeline: --footer-t block; }
  [data-8b-live] #footer .footer__word, [data-8b-live] #footer .footer__logo { animation-timeline: --footer-t; animation-timing-function: linear; animation-fill-mode: both; animation-range: entry 0% entry 100%; }
  [data-8b-live] #footer .footer__word { animation-name: footer-word-up; }
  [data-8b-live] #footer .footer__logo { animation-name: footer-logo-in; }
  @keyframes footer-word-up { 0% { translate: 0 70%; } 100% { translate: 0 0; } }
  @keyframes footer-logo-in { 0% { opacity: 0; scale: 0.6; } 100% { opacity: 1; scale: 1; } }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}

/* 404: where to go instead */
@layer sections {
  .pages { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(2rem, 4vw, 3rem); }
  .pages a { display: grid; gap: 0.875rem; text-decoration: none; }
  .pages img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0.875rem; transition: scale 0.6s var(--ease-out); }
  .pages a:hover img { scale: 1.02; }
  .pages a:hover span { color: var(--deep); }
}