/* Owómidé visual system, adapted from the Codex coming-soon site.
   site.css owns component structure and demos; this file owns the shared visual language.
   Keep print and forced-colour behavior in site.css intact. */
@font-face {
  font-family: "DM Sans Display";
  src: url("fonts/DMSans-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --green: #0b3a33;
  --green-2: #174c42;
  --bone: #f1f2f1;
  --cream: #e3ece9;
  --paper: #f7f8f7;
  --ink: #0f2622;
  --muted: #53655f;
  --line: #e2e6e4;
  --line-strong: #cdd5d1;
  --gold: #d8ae52;
  --gold-dark: #7a5d18;
  --focus: #1550a8;
  --font-display: "DM Sans Display", "Open Sauce Sans", sans-serif;
  --surface-shadow: 0 2px 3px -1px rgba(0,0,0,.1), 0 1px 0 rgba(25,28,33,.02), 0 0 0 1px rgba(25,28,33,.08);
  --floating-shadow: 0 0 0 1px #0000000f, 0 1px 1px -.5px #0000000f,
    0 3px 3px -1.5px #0000000f, 0 6px 6px -3px #0000000f,
    0 12px 12px -6px #0000000f, 0 24px 24px -12px #0000000f;
  --page-gutter: clamp(20px, 4vw, 48px);
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; text-wrap: balance; }
button, a, input, select, textarea { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
:focus, :target { scroll-margin-top: 104px; }

@media screen {
  .site-header {
    min-height: 86px;
    padding-inline: max(var(--page-gutter), calc((100vw - 1320px) / 2));
    background: #f1f2f1f5;
    border-color: var(--line);
  }
  .nav a { border-radius: 0; font-size: 13px; }
  .nav a[aria-current="page"] {
    padding: 8px 12px; border: 0; background: transparent;
    box-shadow: 0 2px 0 var(--green);
  }
  .primary-button, .secondary-button, .light-button, .wl-btn {
    min-height: 48px; border-radius: 10px; font-size: 13px;
    transition: background-color 160ms ease, box-shadow 160ms ease, transform 120ms ease-out;
  }
  .primary-button__icon { border-left: 0; color: inherit; }
  .secondary-button { border-color: var(--line-strong); box-shadow: var(--surface-shadow); }
  .primary-button:hover, .secondary-button:hover, .light-button:hover, .wl-btn:hover { transform: none; }
  .primary-button:hover { box-shadow: inset 0 1px #ffffff18; }
  .primary-button:active, .secondary-button:active, .light-button:active, .wl-btn:active { transform: scale(.98); }
  .primary-button--sm, .secondary-button--sm { min-height: 44px; }
  .eyebrow {
    display: flex; align-items: center; gap: 10px;
    font-size: 12px; font-weight: 600; line-height: 1.6;
    letter-spacing: 0; text-transform: none; color: var(--muted);
  }
  .eyebrow::before { content: ""; width: 7px; height: 7px; flex: none; background: var(--gold); }
  .eyebrow--light { color: #e3ece9; }
  .page-hero--center .eyebrow, .section-head--center .eyebrow { justify-content: center; }

  /* Headline first, the complete product preview immediately below. */
  .story-hero {
    max-width: 1416px; min-height: 0; padding: 88px var(--page-gutter) 48px;
    grid-template-columns: minmax(0, 1fr) 240px; gap: 64px 56px;
  }
  .story-hero__copy { max-width: 930px; }
  .story-hero__copy h1 {
    max-width: none; margin-top: 28px;
    font-size: clamp(44px, 6.6vw, 96px); line-height: 1.04; letter-spacing: -.045em; font-weight: 600;
  }
  .story-hero__copy h1 span { display: block; color: var(--muted); }
  .story-hero__copy > p:not(.eyebrow) { max-width: 620px; font-size: 18px; line-height: 1.75; color: var(--muted); text-wrap: pretty; }
  .story-hero__lede span { white-space: normal; }
  .story-hero__actions { gap: 12px; margin-top: 30px; }
  .story-hero__copy .hero-status { font-size: 12px !important; margin-top: 20px !important; }
  .story-hero__copy > p.story-hero__soon { margin: 0; font-size: 12px; }
  .story-hero__soon i { width: 7px; height: 7px; border-radius: 0; }
  .hero-status::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--teal); }
  .hero-context { padding-inline-start: 32px; border-inline-start: 1px solid var(--line); }
  .hero-context__label { color: var(--muted); font-size: 12px; margin: 0 0 20px; }
  .hero-context__stat { display: flex; flex-direction: column; gap: 2px; }
  .hero-context__stat b { font-family: var(--font-display); font-size: 44px; line-height: 1; font-weight: 600; color: var(--green); letter-spacing: -.02em; }
  .hero-context__stat b span { font-size: 22px; font-weight: 600; }
  .hero-context__stat-l { color: var(--muted); font-size: 12px; }
  .hero-context__bar { position: relative; height: 6px; margin: 16px 0 14px; border-radius: 4px; background: var(--line); }
  .hero-context__bar-fill { position: absolute; inset: 0; border-radius: 4px; background: var(--gold); }
  .hero-context__bar-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); border-radius: 1px; }
  .hero-context__rows { display: flex; gap: 20px; margin: 0; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
  .hero-context__rows div { display: flex; flex-direction: column-reverse; gap: 2px; }
  .hero-context__rows dt { color: var(--muted); font-size: 11px; }
  .hero-context__rows dd { margin: 0; font-family: var(--font-display); font-size: 15px; font-weight: 600; }
  .hero-context__note { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 16px 0 0; }
  .story-hero__media { grid-column: 1 / -1; width: 100%; }
  .film { border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: var(--floating-shadow); }
  .film__bar { background: var(--white); min-height: 52px; }
  .film-note { color: var(--muted); font-size: 12px; margin-top: 16px; }
  .video-stage::after, .video-stage--moves::before { display: none; }
  .hiw { border-block: 1px solid var(--line); background: var(--paper); }
  .hiw-title { font-weight: 600; letter-spacing: -.035em; line-height: 1.12; }
  .rot { color: var(--muted); font-style: normal; }

  /* One visual language for the workspace film and the four guided demos. */
  .film, .dmw { --teal: #397466; --positive-soft: #edf4ef; }
  .film { background: var(--paper); }
  .film .side { background: var(--bone); }
  .film .top, .film__flows, .film__rail { background: var(--white); }
  .film .tray { background: var(--line); border-radius: 14px; }
  .film .card, .film .pick { box-shadow: var(--surface-shadow); }
  .film .pick.is-picked { border-color: var(--green); background: #edf4f1; box-shadow: var(--surface-shadow); }
  .film .flow { min-height: 40px; border-color: transparent; background: var(--paper); }
  .film .flow.is-active { border-color: var(--green); background: var(--cream); color: var(--green); }
  .film .flow.is-active b { background: var(--green); color: white; }
  .film .mkt.is-on { color: var(--green); }
  .film .seg { color: var(--muted); min-height: 36px; }
  .film .seg.is-active { color: var(--green); }
  .film .seg i, .film .steps span.is-on { background: var(--cream); }
  .film .seg i { background: var(--green); }
  .film .steps span.is-on { border-color: var(--green); }
  .film__ring-bar { stroke: var(--green); }
  .film .btn.is-hover { transform: none; box-shadow: var(--surface-shadow); }
  .film .ring { border-color: var(--green); }

  .moves .move { border-radius: 16px; border-style: solid; background: var(--paper); }
  .moves .move.is-open { border-color: var(--line-strong); background: white; box-shadow: var(--floating-shadow); }
  .moves .move__n { color: var(--muted); font-variant-numeric: tabular-nums; }
  .moves .move.is-open .move__n { color: var(--green); }
  .moves .move__t { font-family: var(--font-display); }
  .moves .move__plus { border-radius: 50%; }
  .moves .move.is-open .move__plus { background: var(--green); border-color: var(--green); }
  .moves .move:hover .move__plus { border-color: var(--green); }
  .moves .move__p { color: var(--muted); }
  .dmw, .dmw--panel, .dmw--stepper, .dmw--ledger {
    border: 1px solid var(--line-strong); border-radius: 12px;
    background: var(--paper); box-shadow: none;
  }
  .dmw .dmw__bar { min-height: 44px; background: white; border-bottom: 1px solid var(--line); }
  .dmw .dmw__t { color: var(--ink); letter-spacing: -.015em; font-family: var(--font-display); font-size: 13px; }
  .dmw .dmw__tag { color: var(--muted); background: var(--bone); border-radius: 5px; }
  .dmw .dmw__foot { border-top: 1px solid var(--line); background: white; }
  .dmw .dmw__cap { color: var(--muted); line-height: 1.6; }
  .dmw .dmw__tab { min-height: 36px; }
  .dmw .dmw__tab[aria-selected="true"] { border-color: var(--green); color: var(--green); background: var(--cream); }
  .dmw .dmw__tab i { background: #0b3a3312; }
  .dmw--panel .dmw__cap { background: var(--paper); border-left-color: var(--line-strong); }
  .dmw--stepper .dmw__tab[aria-selected="true"] { background: transparent; }
  .dmw--stepper .dmw__tab[aria-selected="true"]::before { background: var(--green); border-color: var(--green); }
  .dmw--stepper .dmw__tab i { background: var(--green); }
  .dmw--ledger .dmw__tabs { border-right-style: solid; }
  .dmw .cat { box-shadow: var(--floating-shadow); }
  .dmw .cat__n, .dmw .cov__v b { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
  .dmw .src__ic { background: var(--cream); }
  .dmw .src__wires path { stroke: #839b92; }
  .dmw .ring-bg { stroke: var(--line); }
  .dmw .hb__t { background: var(--line); }
  @media (prefers-reduced-motion: no-preference) {
    .film .show { transition-duration: 280ms, 320ms; }
    .moves .move__demo { transition-duration: 380ms; }
    .moves .move.is-open .move__demo-in { transition: opacity 220ms 120ms; }
    .dmw .dms { transition: opacity 240ms, visibility 0s 240ms; }
    .dmw .dms.is-on { transition: opacity 240ms; }
    .dmw .dms.is-on .fx { animation-name: demoEnter; animation-duration: 320ms; }
    .dmw .dms.is-on .src__wires path { animation: fxIn 320ms 600ms both, march 1800ms linear 600ms 2; }
    .dmw .dms.is-on .hm i.hot { animation: cellIn 320ms var(--ease) var(--d) forwards; }
  }
  @keyframes demoEnter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

  /* Signup invitation and the pilot programme card. */
  .story-hero { grid-template-columns: minmax(0, 1fr) 340px; gap: 48px 32px; }
  .story-hero__copy h1 { font-size: clamp(44px, 5.8vw, 84px); }
  .hero-quickstart { width: fit-content; max-width: 100%; padding: 10px 12px 10px 18px; gap: 14px; border-radius: 18px; box-shadow: var(--floating-shadow); }
  .pilot-email { flex: 1; min-width: 0; }
  .pilot-email__field { position: relative; min-height: 52px; }
  .pilot-email__field::before { content: "Enter work email and join top Commercial Directors"; display: block; visibility: hidden; white-space: nowrap; font-size: 12px; }
  .hero-quickstart .pilot-email input { position: absolute; inset: 0; }
  .hero-quickstart .pilot-email input { width: 100%; min-height: 52px; padding: 0; }
  .pilot-email__prompt { position: absolute; inset: 0; display: flex; align-items: center; gap: 4px; white-space: nowrap; pointer-events: none; color: var(--muted); font-size: 12px; line-height: 1.65; }
  #pilot-role { color: var(--green); font-weight: 600; }
  .pilot-email input:focus + .pilot-email__prompt, .pilot-email input:not(:placeholder-shown) + .pilot-email__prompt { display: none; }
  .pilot-email p { margin: 5px 0 0; font-size: 11px; line-height: 1.5; color: var(--muted); }
  .hero-quickstart button { padding: 0 16px; border-radius: 999px; box-shadow: var(--surface-shadow); font-size: 12px; }
  .hero-quickstart__foot { gap: 14px; }
  .pilot-community { display: flex; padding-left: 6px; }
  .pilot-community span { display: grid; place-items: center; width: 34px; height: 34px; margin-left: -6px; border: 2px solid var(--bone); border-radius: 50%; background: var(--cream); color: var(--green); font-size: 10px; font-weight: 600; }
  .pilot-community span:nth-child(2) { background: #cbdcd5; }
  .pilot-community span:nth-child(3) { background: var(--green); color: white; }
  .pilot-community__copy { margin: 0; font-size: 12px; line-height: 1.7; color: var(--ink); }
  .pilot-community__copy span { font-size: 11px; color: var(--muted); }
  .pilot-pass { align-self: center; padding: 24px; border: 1px solid var(--line-strong); border-radius: 20px; background: var(--paper); box-shadow: var(--floating-shadow); }
  .pilot-pass__top { display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--muted); }
  .pilot-pass__top img { width: 36px; height: auto; }
  .pilot-pass h2 { margin: 26px 0; font-size: 25px; line-height: 1.2; letter-spacing: -.035em; color: var(--green); }
  .pilot-pass ol { list-style: none; margin: 0; padding: 0; }
  .pilot-pass li { display: flex; align-items: baseline; gap: 10px; padding: 13px 0; border-top: 1px solid var(--line); font-size: 11px; }
  .pilot-pass li span { font-size: 10px; color: var(--gold-dark); }
  .pilot-pass__markets { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; }
  .pilot-pass__markets span { border-radius: 5px; padding: 5px 7px; background: var(--cream); color: var(--green); font-size: 10px; }
  .pilot-pass > p { margin: 16px 0 0; font-size: 11px; line-height: 1.6; color: var(--muted); }
  .dmw--stepper .band, .dmw--stepper .lad { max-width: 560px; max-height: 220px; margin-inline: auto; }
  .dmw--stepper .dmw__stage { padding: 18px; }
  .dmw--stepper .dmw__tabs { padding: 12px 14px; gap: 6px; }
  .dmw--stepper .dmw__tab { display: block; min-height: 36px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; }
  .dmw--stepper .dmw__tab::before { content: attr(data-n) ". "; display: inline; border: 0; background: none; color: inherit; }
  .dmw--stepper .dmw__tab:not(:last-child)::after { content: none; }
  .dmw--stepper .dmw__tab[aria-selected="true"] { background: var(--cream); }
  .dmw--stepper .dmw__tab[aria-selected="true"]::before { background: none; color: var(--green); }
  .dmw--stepper .dmw__tab i { inset: auto 0 0; height: 2px; }
  @media (max-width: 1100px) { .pilot-pass { display: none; } }
  @media (max-width: 600px) {
    .hero-quickstart { flex-direction: column; align-items: stretch; padding: 16px; }
    .pilot-email__prompt, .pilot-email__field::before { font-size: clamp(9px, 2.8vw, 12px); }
    .hero-quickstart button { width: 100%; justify-content: center; }
  }

  .signup-activity { max-width: 720px; margin-top: 20px; }
  .signup-activity__head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; color: var(--green); font-size: 11px; }
  .signup-activity__head small { font-size: 10px; color: var(--muted); }
  .signup-activity__person { display: flex; align-items: center; gap: 10px; padding-block: 12px; }
  .signup-avatar { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--cream); color: var(--green); font-size: 11px; font-weight: 600; }
  .signup-activity__person p { margin: 0; font-size: 12px; line-height: 1.6; }
  .signup-activity__person p span { display: block; color: var(--muted); font-size: 11px; }
  .signup-activity__state { margin-left: 6px; color: var(--green); font-size: 10px; }
  .invite-panel { max-width: 720px; margin-top: 12px; font-size: 12px; }
  .invite-panel summary { padding-block: 12px; cursor: pointer; color: var(--muted); }
  .invite-panel summary span { color: var(--green); text-decoration: underline; text-underline-offset: 4px; }
  .invite-panel form { padding: 18px; border: 1px solid var(--line-strong); border-radius: 12px; background: white; }
  .invite-panel h2 { margin: 0; font-size: 18px; }
  .invite-panel p { color: var(--muted); line-height: 1.6; }
  .invite-panel label { display: block; margin-block: 12px 6px; }
  .invite-panel__row { display: flex; gap: 8px; }
  .invite-panel input { width: 100%; min-width: 0; padding: 10px; border: 1px solid var(--line-strong); border-radius: 8px; font: inherit; background: var(--paper); }
  .invite-panel button { flex: none; min-height: 44px; padding: 0 14px; border: 0; border-radius: 8px; background: var(--green); color: white; font: inherit; cursor: pointer; }
  .invite-panel small { display: block; margin-top: 8px; color: var(--muted); line-height: 1.6; }
  .pricing-collage { align-self: start; margin-top: 28px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 22px; background: #e8eeeb; box-shadow: var(--floating-shadow); }
  .pricing-collage__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; background: var(--paper); border-bottom: 1px solid var(--line); }
  .pricing-collage__bar img { width: 104px; height: auto; }
  .pricing-collage__bar button { min-height: 36px; padding: 0 10px; background: white; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--green); font: inherit; font-size: 11px; cursor: pointer; }
  .pricing-collage__viewport { height: 490px; overflow: hidden; mask-image: linear-gradient(transparent, black 5%, black 93%, transparent); }
  .pricing-collage__track { animation: collageScroll 44s linear infinite; animation-play-state: paused; }
  .pricing-collage.is-playing .pricing-collage__track { animation-play-state: running; }
  .pricing-collage:hover .pricing-collage__track, .pricing-collage:focus-within .pricing-collage__track { animation-play-state: paused; }
  .pricing-collage__group { display: grid; gap: 14px; padding: 14px 16px 0; }
  .decision-tile { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: var(--surface-shadow); }
  .decision-tile > span { font-size: 10px; color: var(--muted); }
  .decision-tile h2, .decision-tile h3 { margin: 12px 0; font-size: 21px; line-height: 1.2; letter-spacing: -.03em; text-wrap: initial; }
  .decision-tile p { font-size: 11px; line-height: 1.6; margin: 8px 0 0; }
  .decision-tile--green { background: var(--green); color: white; border-color: var(--green); }
  .decision-tile--green > span { color: #c8dbd3; }
  .decision-tile--gold { background: #f5efdf; }
  .decision-metric { font-family: var(--font-display); font-size: 44px; letter-spacing: -.05em; }
  .decision-metric small { font-size: 20px; }
  .decision-spark { height: 50px; display: flex; align-items: end; gap: 8px; margin-top: 14px; }
  .decision-spark i { flex: 1; height: 30%; background: #b9d2c8; border-radius: 3px 3px 0 0; }
  .decision-spark i:nth-child(2n) { height: 48%; }.decision-spark i:nth-child(n+4) { height: 65%; }.decision-spark i:nth-child(n+6) { height: 88%; background: var(--gold); }
  .decision-person { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); }
  .decision-person > b { padding: 9px; border-radius: 50%; background: var(--cream); font-size: 10px; }
  .decision-person p { margin: 0; }.decision-person small { display: block; color: var(--muted); font-size: 10px; }
  .decision-person em { margin-left: auto; font-size: 9px; font-style: normal; color: var(--green); }
  .decision-tile dl { margin: 0; }.decision-tile dl div { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line); font-size: 11px; }.decision-tile dd { margin: 0; font-weight: 600; }
  .decision-range { display: flex; justify-content: space-between; align-items: center; margin: 20px 0; padding: 12px 0; border-block: 1px solid #d9caa5; font-size: 12px; }.decision-range b { font-size: 32px; }
  .decision-progress { height: 6px; margin-top: 16px; background: var(--line); border-radius: 8px; }.decision-progress i { display: block; width: 90%; height: 100%; background: var(--green); border-radius: inherit; }
  .pricing-collage__caption { margin: 0; padding: 12px; text-align: center; background: var(--paper); color: var(--muted); font-size: 9px; }
  @keyframes collageScroll { to { transform: translateY(-50%); } }
  @media (max-width: 1100px) { .pricing-collage { width: min(100%, 560px); margin: 0 auto; }.pricing-collage__viewport { height: 380px; } }
  @media (max-width: 600px) { .signup-activity__state { max-width: 75px; text-align: right; line-height: 1.5; } }
  @media (prefers-reduced-motion: reduce) { .pricing-collage__track { animation: none; }.pricing-collage__viewport { overflow-y: auto; mask-image: none; }.pricing-collage__group[aria-hidden] { display: none; } }

  /* Shared marketing pages. */
  .wrap { max-width: 1416px; padding-inline: var(--page-gutter); }
  .page-hero { padding-block: 88px; }
  .display { font-size: clamp(42px, 5.8vw, 84px); line-height: 1.04; letter-spacing: -.045em; font-weight: 600; }
  .display span { color: var(--muted); }
  .lede { color: var(--muted); line-height: 1.75; }
  .section { padding-block: clamp(64px, 7vw, 100px); }
  .section--tight { padding-block: 64px; }
  .section-head h2, .h2, .moves__head h2, .waitlist h2 {
    font-size: clamp(32px, 3.6vw, 56px); line-height: 1.1;
    letter-spacing: -.035em; font-weight: 600;
  }
  .pcard { border-radius: 14px; box-shadow: var(--surface-shadow); }
  .pcard h3 { font-size: 22px; line-height: 1.25; }
  .pcard p, .feature__copy > p { color: var(--muted); line-height: 1.75; }
  @media (hover: hover) and (pointer: fine) {
    a.pcard:hover, .pcard--lift:hover { box-shadow: var(--floating-shadow); transform: translateY(-1px); }
  }
  @media (hover: none) {
    a.pcard:hover, .pcard--lift:hover { transform: none; }
  }
  .pcard--dark p { color: #e3ece9; }
  .icon { background: var(--cream); color: var(--green); }
  .icon--green { background: var(--green); color: white; }
  .feature__copy h3 { font-weight: 600; line-height: 1.15; letter-spacing: -.03em; }
  .crumbs a { min-height: 44px; border-radius: 8px; background: white; }
  .waitlist__inner { max-width: 1416px; padding-inline: var(--page-gutter); }
  .footer__soon i, .waitlist__soon i { animation: none; }
  .footer h2 { font-family: var(--font-text); text-transform: none; letter-spacing: 0; font-size: 13px; }
  .footer ul a { padding-block: 8px; }

  /* The application retains its steps, validation and live answer record. */
  .wl-title { font-weight: 600; line-height: 1.08; letter-spacing: -.035em; }
  .wl-side { height: auto; min-height: 100svh; max-height: 100svh; overflow-y: auto; }
  .wl-side::before, .wl-side::after { display: none; }
  .wl-record { border-radius: 14px; background: #ffffff0d; backdrop-filter: none; }
  .wl-record__rows dt, .wl-record__rows dd, .wl-record__foot { color: #c6d5cf; }
  .wl-h { font-family: var(--font-display); letter-spacing: -.025em; }
  .wl-progress i { background: var(--green); }
  .wl-count { color: var(--muted); }
  .wl-field input:not([type=radio]):not([type=checkbox]), .wl-field select, .wl-field textarea { border-color: #83958c; border-radius: 8px; box-shadow: var(--surface-shadow); }
  .wl-field [aria-invalid="true"] { border-color: var(--danger) !important; }
  .wl-step.is-on, .wl-done { animation-duration: 220ms; }
  .wl-step:has(:focus-visible), .wl-done:focus-visible { animation: none; }
  .waitlist :focus-visible, .wl-side :focus-visible { outline-color: var(--gold); }
  .can-reveal [data-reveal], .can-reveal [data-reveal="stagger"] > * { transition-duration: 350ms; }

  @media (max-width: 1100px) {
    .story-hero { grid-template-columns: minmax(0, 1fr); gap: 48px; }
    .hero-context { display: none; }
  }
  @media (max-width: 1000px) {
    .wl-side { min-height: 0; max-height: none; }
  }
  @media (max-width: 960px) {
    .site-header { min-height: 72px; }
    .nav.is-open { background: var(--bone); }
    .nav a[aria-current="page"] { padding: 12px; box-shadow: inset 3px 0 var(--green); }
    .story-hero { padding-top: 56px; }
  }
  @media (max-width: 720px) {
    .story-hero { padding-top: 48px; gap: 40px; }
    .story-hero__copy h1 { font-size: clamp(40px, 8.8vw, 62px); }
    .story-hero__copy > p:not(.eyebrow) { font-size: 16px; }
    .page-hero { padding-block: 56px; }
    .film { border-radius: 12px; }
    .brand-group > .soon-note { display: none; }
    .hero-context { display: none; }
  }
  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    .site-header { background: var(--bone); backdrop-filter: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .primary-button:active, .secondary-button:active, .light-button:active, .wl-btn:active { transform: none; }
    .can-reveal [data-reveal], .can-reveal [data-reveal="stagger"] > * { transform: none; opacity: 1; transition: none; }
  }
  @media (forced-colors: active) {
    .site-header, .wl-record { background: Canvas; color: CanvasText; }
    .wl-record__rows dt, .wl-record__rows dd, .wl-record__foot { color: CanvasText; }
    .primary-button, .secondary-button, .wl-btn, .pcard { border: 1px solid ButtonText; }
  }
}