/* Ava Sinclair landing page.
   Two registers, kept apart on purpose. THE WORLD is the film and her voice:
   a fashion italic in blush, set loose over the footage. THE PAPERWORK is
   everything regulated: condensed caps and plain grotesque on solid plates.
   Nothing regulated ever sits on bare film. */

:root {
  --ground: #0c090d;
  --plate: #151017;
  --plate-2: #1d1620;
  --rule: rgba(255, 143, 196, .22);
  --rule-soft: rgba(255, 236, 244, .12);
  --ink: #fff4f8;
  --ink-2: #e2cdd7;
  --ink-3: #b9a1ad;
  --pink: #ff5ca8;
  --pink-deep: #e0368a;
  --blush: #ffc9de;
  --violet: #7a4bff;

  --soft: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --strict: 'Sofia Sans Extra Condensed', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --body: 'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;
  --mono: 'Martian Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --gutter: clamp(18px, 5vw, 40px);
  --nav-h: 58px;
  --radius: 14px;
  --ease: cubic-bezier(.16, 1, .3, 1);

  /* the wide-screen film window */
  --win-w: min(56.25vh, 44vw);
  --win-right: clamp(24px, 6vw, 112px);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--ground);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 16px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

html.is-loading, body.is-loading { overflow: hidden; }

img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
/* No single word is left alone on the last line of a paragraph, where the
   browser supports it. Sentence openers are tied in the markup itself. */
p, li, summary, .v, dd { text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--blush); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: fixed; left: 12px; top: -60px; z-index: 90;
  padding: 10px 14px; border-radius: 8px;
  background: var(--ink); color: var(--ground); font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- the film ---------- */

.film {
  position: fixed; inset: 0; z-index: 0;
  height: 100vh; height: 100lvh;
  background: var(--ground);
  opacity: 0; transition: opacity .9s ease;
  --scrim: 1;
  pointer-events: none;
}
.film.is-live { opacity: 1; }

.film__ambient {
  position: absolute; inset: -12%;
  width: 124%; height: 124%;
  filter: blur(64px) saturate(1.3) brightness(.8);
  display: none;
}

.film__window { position: absolute; inset: 0; overflow: hidden; }

.film__reel, .film__guard {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 38%;
  background-size: cover; background-position: 50% 38%;
}
/* The footage runs sharp. It is held back by brightness and the scrim alone. */
.film__reel { filter: brightness(.9); }

/* Stands in when a slow connection leaves the wrong room behind a regulated
   section. It only ever fades in; it never touches the scrub. */
.film__guard { opacity: 0; transition: opacity .5s ease; }
.film__guard.is-on { opacity: 1; }

.film__window::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(12, 9, 13, .78) 0%, rgba(12, 9, 13, .18) 22%, rgba(12, 9, 13, .2) 48%, rgba(12, 9, 13, .9) 100%),
    rgba(12, 9, 13, .46);
  opacity: var(--scrim);
  transition: opacity .7s ease;
}

/* slate: where and when the film is, and that it is AI made */
.slate {
  position: fixed; z-index: 41;
  left: var(--gutter); top: calc(var(--nav-h) + 10px);
  display: flex; align-items: center; gap: 8px;
  font: 500 11px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .7);
  pointer-events: none;
  transition: opacity .4s ease;
}
.slate__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 10px var(--pink); }
.slate__where { color: var(--blush); }
.is-loading .slate { opacity: 0; }

.rail { display: none; }

/* ---------- loader ---------- */

.loader {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-content: center; justify-items: center; gap: 18px;
  background: var(--ground);
  transition: opacity .7s ease, visibility 0s linear .7s;
}
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader__mark {
  margin: 0;
  font: 800 34px/1 var(--strict); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 0 18px rgba(255, 92, 168, .75), 0 0 46px rgba(255, 92, 168, .35);
}
.loader__note { margin: 0; font: 400 10px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.loader__bar { width: min(220px, 56vw); height: 2px; background: var(--rule-soft); overflow: hidden; border-radius: 2px; }
.loader__fill { display: block; height: 100%; background: var(--pink); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.loader__pct { margin: 0; font: 400 10px/1 var(--mono); color: var(--ink-3); }

/* ---------- nav ---------- */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 var(--gutter);
}
/* One veil under the nav and the slate: copy scrolling beneath them fades out
   instead of colliding with them. */
.nav::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: 0 0 auto 0; height: 124px;
  background: linear-gradient(180deg, rgba(12, 9, 13, .97) 0%, rgba(12, 9, 13, .95) 70%, rgba(12, 9, 13, 0) 100%);
  /* Over the hero she is the subject, so the veil stays light until the
     visitor has scrolled past her. */
  opacity: .45; transition: opacity .5s ease;
}
.past-hero .nav::before { opacity: 1; }
.nav__mark {
  font: 800 23px/1 var(--strict); letter-spacing: .07em; text-transform: uppercase;
  text-decoration: none; color: var(--ink);
}
.nav__mark b {
  font-weight: 800; color: #fff;
  text-shadow: 0 0 12px rgba(255, 92, 168, .9), 0 0 30px rgba(255, 92, 168, .45);
}
.chip {
  display: inline-flex; align-items: center;
  padding: 4px 7px; border-radius: 5px;
  border: 1px solid var(--rule);
  background: rgba(12, 9, 13, .55);
  font: 500 8.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--blush);
  white-space: nowrap;
}
.nav__links { display: none; margin-left: auto; gap: 26px; }
.nav__links a {
  font: 600 13px/1 var(--body); letter-spacing: .02em; text-decoration: none; color: var(--ink-2);
  transition: color .2s ease;
}
.nav__links a:hover { color: var(--ink); }
.nav .btn { margin-left: auto; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px; padding: 0 26px;
  border: 0; border-radius: 12px; cursor: pointer;
  font: 800 21px/1 var(--strict); letter-spacing: .07em; text-transform: uppercase; text-decoration: none;
  /* Dark label on pink: white on this pink fails contrast. */
  color: #1a0710; background: var(--pink);
  box-shadow: 0 10px 34px -10px rgba(255, 92, 168, .7);
  transition: transform .25s var(--ease), box-shadow .25s ease, background .2s ease;
}
.btn:hover { transform: translateY(-2px); background: #ff76b6; box-shadow: 0 16px 40px -10px rgba(255, 92, 168, .8); }
.btn:active { transform: translateY(0); }
.btn--sm { min-height: 38px; padding: 0 14px; font-size: 16px; border-radius: 9px; }
.btn--wide { width: 100%; }
.btn--ghost {
  color: var(--ink); background: rgba(21, 16, 23, .88);
  border: 1px solid var(--rule); box-shadow: none;
}
.btn--ghost:hover { background: var(--plate-2); border-color: var(--pink); box-shadow: none; }
.btn[aria-disabled='true'] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.pending {
  display: inline-block; margin-top: 6px; padding: 4px 7px; border-radius: 5px;
  background: rgba(12, 9, 13, .8);
  font: 400 9px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
}

.textlink { color: var(--blush); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.textlink:hover { color: #fff; }

/* ---------- type ---------- */

.soft {
  display: block;
  font: italic 500 clamp(1.45rem, 6.2vw, 2.1rem)/1.12 var(--soft);
  letter-spacing: -.005em; color: var(--blush);
  text-wrap: balance;
}
.strict {
  display: block;
  font: 800 clamp(3.05rem, 14.6vw, 5.6rem)/.9 var(--strict);
  letter-spacing: .012em; text-transform: uppercase; color: var(--ink);
  text-wrap: balance;
}
.strict em { font-style: normal; color: var(--pink); }

h1, h2, h3 { margin: 0; font-weight: inherit; }
.h2 .soft { font-size: clamp(1.3rem, 5.4vw, 1.9rem); margin-bottom: .22em; }
.h2 .strict { font-size: clamp(2.5rem, 11.6vw, 4.5rem); }

.lede { font-size: 1.04rem; line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
.lede strong { color: var(--ink); font-weight: 600; }
.lede--tight { margin-bottom: 16px; }

.fine { font-size: .8rem; line-height: 1.5; color: var(--ink-3); }

/* ---------- layout ---------- */

.page { position: relative; z-index: 10; }

.sec {
  position: relative;
  padding: clamp(64px, 12svh, 120px) var(--gutter);
}
.sec__in { width: 100%; max-width: 620px; margin: 0 auto; }
.sec__in > * + * { margin-top: 22px; }

.hold { height: 0; margin: 0; padding: 0; }

/* plates: the only ground regulated copy stands on */
.plate {
  padding: 18px 18px 20px;
  border-radius: var(--radius);
  background: rgba(21, 16, 23, .94);
  border: 1px solid var(--rule-soft);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .9);
}
.plate--pink { border-color: var(--rule); }

/* the compliance plate that travels under every button */
.small {
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: 10px;
  background: rgba(12, 9, 13, .84);
  border: 1px solid var(--rule-soft);
  font-size: .755rem; line-height: 1.5; color: var(--ink-2);
}
.small b { color: var(--ink); font-weight: 600; }
/* Inside a plate it is a ruled paragraph, never a box within a box. */
.plate .small { margin: 0 0 16px; padding: 0 0 16px; background: none; border: 0; border-bottom: 1px solid var(--rule-soft); border-radius: 0; }

.sub { margin-top: 10px; font-size: .86rem; color: var(--ink-2); text-align: center; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--nav-h) + 34px) var(--gutter) 22px;
}
.hero .sec__in > * + * { margin-top: 14px; }
.hero h1 .soft { font-size: clamp(1.35rem, 6vw, 2rem); margin-bottom: .2em; text-shadow: 0 2px 18px rgba(0, 0, 0, .6); }
.hero h1 .strict { text-shadow: 0 4px 30px rgba(0, 0, 0, .55); }

.badge {
  position: absolute; left: var(--gutter); top: calc(var(--nav-h) + 34px);
  max-width: min(56%, 250px);
  padding: 9px 11px; border-radius: 10px;
  background: rgba(12, 9, 13, .78); border: 1px solid var(--rule-soft);
  font-size: .75rem; line-height: 1.42; color: var(--ink-2);
}
.badge b { color: var(--ink); font-weight: 600; }

.cue {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 16px;
  font: 400 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
}
.cue svg { animation: nudge 2.2s var(--ease) infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ---------- intro: ticks + path chooser ---------- */

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; color: var(--ink); }
.ticks svg { margin-top: 3px; color: var(--pink); }

.chooser { display: grid; gap: 0; margin-top: 8px; }
.chooser a {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;
  padding: 15px 2px;
  border-top: 1px solid var(--rule-soft);
  text-decoration: none;
}
.chooser a:last-child { border-bottom: 1px solid var(--rule-soft); }
.chooser a > * { transition: transform .35s var(--ease); }
.chooser a:hover > div { transform: translateX(8px); }
.chooser a:hover > svg { transform: translateX(4px); }
.chooser strong { display: block; font: 800 1.7rem/1 var(--strict); letter-spacing: .04em; text-transform: uppercase; }
.chooser span { display: block; margin-top: 4px; font-size: .86rem; color: var(--ink-3); }
.chooser svg { color: var(--pink); }

/* ---------- desk log ---------- */

.rows { display: grid; gap: 0; }
.rows > div { display: grid; grid-template-columns: 74px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--rule-soft); }
.rows > div:first-child { border-top: 0; padding-top: 2px; }
.rows > div:last-child { padding-bottom: 2px; }
.rows dt, .rows .k { font: 800 1.2rem/1.15 var(--strict); letter-spacing: .06em; text-transform: uppercase; color: var(--pink); }
.rows .v { color: var(--ink-2); font-size: .95rem; }

.quote { font: italic 500 clamp(1.5rem, 6.4vw, 2.2rem)/1.16 var(--soft); color: var(--blush); text-wrap: balance; text-shadow: 0 2px 22px rgba(0, 0, 0, .7); }

.status { font-size: .9rem; color: var(--ink-2); padding-left: 14px; border-left: 1px solid var(--pink); }

.findon { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; font-size: .88rem; color: var(--ink-3); }
.findon a { color: var(--ink); text-underline-offset: 3px; }

.slot-banner { padding: 10px 12px; border-radius: 8px; background: #3a1020; color: #ffd0e0; font: 500 10px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.log { width: 100%; border-collapse: collapse; font: 400 .72rem/1.3 var(--mono); color: var(--ink); }
.log th, .log td { padding: 8px 6px; text-align: left; border-bottom: 1px solid var(--rule-soft); white-space: nowrap; }
.log th { color: var(--ink-3); font-weight: 400; text-transform: uppercase; letter-spacing: .06em; }
.scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- ledger ---------- */

.ledger { display: grid; gap: 18px; }
.ledger h3 { font: 800 1.35rem/1 var(--strict); letter-spacing: .08em; text-transform: uppercase; color: var(--pink); padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.ledger ul { list-style: none; margin: 0; padding: 0; }
.ledger li { padding: 11px 0; border-bottom: 1px solid var(--rule-soft); color: var(--ink-2); font-size: .95rem; }
.ledger li:last-child { border-bottom: 0; }
.ledger li.loud { color: var(--ink); font-weight: 600; font-size: 1.05rem; }

/* ---------- film stops: her world, captions only ---------- */

.stop {
  min-height: 78svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: 40px; padding-bottom: 12svh;
}
.stop--top { justify-content: flex-start; padding-top: calc(var(--nav-h) + 9svh); padding-bottom: 40px; }
.stop .quote { max-width: 21ch; }
/* A sentence stays on one line whenever it fits, so a caption never breaks
   as "The pink G. I / asked for subtle." */
.quote .s { display: inline-block; }
/* A disclosure is paperwork even when it sits in her world: it gets a plate. */
.stop .credit {
  display: inline-block; margin-top: 14px; max-width: 36ch;
  padding: 9px 11px; border-radius: 9px;
  background: rgba(12, 9, 13, .78); border: 1px solid var(--rule-soft);
  font-size: .76rem; line-height: 1.45; color: var(--ink-2);
}
.stop .lead-in { margin: 0 0 10px; font-weight: 600; font-size: .98rem; color: var(--ink); text-shadow: 0 1px 12px rgba(0, 0, 0, .85); }

.label {
  display: inline-block; margin-bottom: 12px;
  font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
  padding: 6px 9px; border-radius: 5px; background: rgba(12, 9, 13, .7); border: 1px solid var(--rule-soft);
}

.rules { list-style: none; margin: 0; padding: 0; }
.rules li { padding: 13px 0; border-top: 1px solid var(--rule-soft); font: 700 1.55rem/1.08 var(--strict); letter-spacing: .03em; text-transform: uppercase; color: var(--ink); }
.rules li:first-child { border-top: 0; padding-top: 0; }
.rules li:last-child { padding-bottom: 0; }

.scene p { margin: 0 0 .5em; color: var(--ink-2); }
.scene b { color: var(--ink); font-weight: 600; }

/* ---------- rooms (community) + paths ---------- */

.cards { display: grid; gap: 14px; }
.card { display: grid; gap: 12px; align-content: start; }
.card h3 { font: 800 2rem/1 var(--strict); letter-spacing: .035em; text-transform: uppercase; }
.card p { color: var(--ink-2); font-size: .95rem; margin: 0; }
.card .fine { padding-top: 12px; border-top: 1px solid var(--rule-soft); }
.card .btn { justify-self: start; }

/* ---------- steps + PowerMatch ---------- */

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.steps li { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 15px 0; border-top: 1px solid var(--rule-soft); }
.steps li:first-child { border-top: 0; padding-top: 0; }
.steps li:last-child { padding-bottom: 0; }
.steps .k { font: 800 1.3rem/1.1 var(--strict); letter-spacing: .06em; text-transform: uppercase; color: var(--pink); }
.steps .v { color: var(--ink-2); font-size: .95rem; }
.steps .v b { color: var(--ink); font-weight: 600; }

.match { width: 100%; border-collapse: collapse; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.match caption { text-align: left; padding-bottom: 12px; font: 800 1.35rem/1 var(--strict); letter-spacing: .08em; text-transform: uppercase; color: var(--pink); }
.match th { font: 500 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); text-align: right; padding: 0 0 9px; vertical-align: bottom; }
.match th:first-child, .match td:first-child { text-align: left; }
.match td { padding: 11px 0; text-align: right; font-size: .95rem; color: var(--ink); border-top: 1px solid var(--rule-soft); }
.match-notes { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; font-size: .8rem; color: var(--ink-2); }

.btnstack { display: grid; gap: 10px; }

/* ---------- FAQ ---------- */

.faq details { border-top: 1px solid var(--rule-soft); }
.faq details:first-of-type { border-top: 0; }
.faq summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 1fr 20px; gap: 14px; align-items: center;
  min-height: 52px; padding: 12px 0;
  font-weight: 600; font-size: 1.02rem; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { color: var(--pink); transition: transform .35s var(--ease); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details p { padding: 0 34px 16px 0; color: var(--ink-2); font-size: .95rem; }

/* ---------- finale + footer ---------- */

.final {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: space-between;
  padding-top: calc(var(--nav-h) + 5svh); padding-bottom: 28px;
}
.final .sec__in { margin: 0 auto; }
.final::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 46%; pointer-events: none; z-index: -1;
  background: linear-gradient(180deg, rgba(12, 9, 13, .9) 0%, rgba(12, 9, 13, .72) 55%, rgba(12, 9, 13, 0) 100%);
}
.bye { text-align: center; font: italic 500 1.25rem/1.2 var(--soft); color: var(--blush); text-shadow: 0 2px 14px rgba(0, 0, 0, .7); }

/* The footer is small print, set in fixed pixels so the desktop type scale
   and the phone enlargement never grow it. */
.foot { position: relative; z-index: 10; background: var(--ground); padding: 28px var(--gutter) 120px; border-top: 1px solid var(--rule-soft); }
.foot__in { max-width: 820px; margin: 0 auto; display: grid; gap: 8px; }
.foot h2 { font: 700 12px/1.2 var(--strict); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
.foot p { font-size: 10.5px; line-height: 1.5; color: var(--ink-3); margin: 0; }
.foot p b { color: var(--ink-2); font-weight: 600; }
.foot__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 10px; color: var(--ink-3); padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--rule-soft); }

/* ---------- dock: risk line + the thumb button ---------- */

.dock {
  position: fixed; inset: auto 0 0 0; z-index: 45;
  padding: 8px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--ground);
  border-top: 1px solid var(--rule-soft);
  transform: translateY(105%);
  transition: transform .5s var(--ease);
}
.dock.is-up { transform: none; }
/* A risk line nobody can read is not a risk line. */
.dock__risk { margin: 0 0 8px; text-align: center; font: 400 12px/1.35 var(--body); color: var(--ink-2); }
.dock__row { display: grid; grid-template-columns: 1fr; gap: 8px; }
.dock__quiet { display: none; margin: 0; text-align: center; font-size: .9rem; }
.dock__quiet a { display: block; padding: 13px 0; }
/* Over a section with its own buttons the button steps aside. The risk line stays. */
.dock.is-bare .dock__row { display: none; }
.dock.is-bare .dock__risk { margin-bottom: 0; }
.dock.is-quiet .btn { display: none; }
.dock.is-quiet .dock__quiet { display: block; }

/* ---------- the join sheet ---------- */

.sheet {
  width: 100%; max-width: 520px; max-height: 88svh;
  margin: auto auto 0; padding: 0; border: 0;
  border-radius: 22px 22px 0 0;
  background: var(--plate); color: var(--ink);
  border-top: 1px solid var(--rule);
  overflow: auto; overscroll-behavior: contain;
}
.sheet::backdrop { background: rgba(6, 4, 7, .74); }
.sheet[open] { animation: sheet-in .5s var(--ease); }
@keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet__in { padding: 22px var(--gutter) calc(26px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 16px; }
.sheet__head { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start; }
.sheet__head h2 .soft { font-size: 1.3rem; }
.sheet__head h2 .strict { font-size: 2.6rem; }
.sheet__close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule-soft); background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.sheet__close:hover { border-color: var(--pink); }

.gate { display: grid; gap: 12px; }
.gate label { font-size: .9rem; color: var(--ink-2); }
.gate select {
  width: 100%; min-height: 50px; padding: 0 12px; border-radius: 10px;
  background: var(--ground); color: var(--ink); border: 1px solid var(--rule-soft);
  font: 400 1rem var(--body);
}
.gate__what { margin: 0; font-size: .92rem; color: var(--ink); }
.gate__where { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.gate__where legend { padding: 0; margin-bottom: 10px; font-size: .9rem; color: var(--ink-2); }
.gate__where label { position: relative; }
.gate__where input { position: absolute; opacity: 0; inset: 0; }
.gate__where label > span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 10px;
  border: 1px solid var(--rule-soft); background: var(--ground); font-size: .92rem; color: var(--ink); cursor: pointer;
}
.gate__where input:checked + span { border-color: var(--pink); background: var(--plate-2); box-shadow: 0 0 0 1px var(--pink) inset; }
.gate__where input:focus-visible + span { outline: 2px solid var(--blush); outline-offset: 2px; }
.gate .check { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.gate .check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--pink); }
/* The closed-door answer is a panel, not a line of small text: a visitor who
   pressed the button must see that it answered. */
.gate__msg { margin: 0; padding: 12px 14px; border-radius: 12px; font-size: .9rem; line-height: 1.5; color: var(--ink);
  background: var(--plate-2); border: 1px solid var(--pink); }
.gate__msg b { color: var(--blush); }
.gate__msg:focus { outline: none; }
.gate__need { margin: 0; font-size: .95rem; font-weight: 600; color: var(--blush); }
.gate__msg.is-new, .gate__need.is-new { animation: gate-in .45s var(--ease); }
@keyframes gate-in { from { opacity: .3; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .gate__msg.is-new, .gate__need.is-new { animation: none; } }

.doors { list-style: none; margin: 0; padding: 0; }
.doors li { border-top: 1px solid var(--rule-soft); }
.doors li:first-child { border-top: 0; }
.doors a, .doors .door {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  min-height: 60px; padding: 10px 0; text-decoration: none;
}
.doors strong { display: block; font-weight: 600; font-size: 1rem; }
.doors span { display: block; font-size: .82rem; color: var(--ink-3); margin-top: 2px; }
.doors svg { color: var(--pink); }
.doors [aria-disabled='true'] { opacity: .5; cursor: not-allowed; }
.doors .partner { font: 500 8.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--blush); border: 1px solid var(--rule); border-radius: 4px; padding: 3px 5px; margin-left: 6px; vertical-align: 2px; }

/* ---------- reveals ---------- */

.js-reveal .rise { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); }
.js-reveal .rise.is-in { opacity: 1; transform: none; filter: none; }
/* Captions arrive like subtitles, not like cards. */
.js-reveal .stop .rise { transform: none; filter: none; clip-path: inset(0 100% 0 0); transition: clip-path 1.2s var(--ease), opacity .5s ease; }
.js-reveal .stop .rise.is-in { clip-path: inset(0 -5% 0 0); }

/* ---------- wide screens: the film becomes a window, the page a room ---------- */

@media (min-aspect-ratio: 1/1) and (min-width: 860px) {
  .nav__links { display: flex; }
  .nav .btn { margin-left: 8px; }
  /* Solid for the nav row, then a feather, so nothing reads through the
     wordmark and there is no hard edge against the bright room. */
  .nav::before {
    height: calc(var(--nav-h) + 48px); opacity: 1;
    background: linear-gradient(180deg, var(--ground) 0, var(--ground) var(--nav-h), rgba(12, 9, 13, 0) 100%);
  }

  .film-tall .film__ambient { display: block; }
  .film-tall .film__window {
    inset: calc(var(--nav-h) + 14px) var(--win-right) 54px auto;
    width: var(--win-w); max-width: calc((100vh - var(--nav-h) - 68px) * .5625);
    border-radius: 26px;
    border: 1px solid rgba(255, 201, 222, .28);
    box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .95), 0 0 90px -30px rgba(255, 92, 168, .45);
  }
  .film-tall .film__reel { filter: none; object-position: 50% 50%; }
  .film-tall .film__window::after {
    background: linear-gradient(180deg, rgba(12, 9, 13, .34) 0%, rgba(12, 9, 13, 0) 22%, rgba(12, 9, 13, 0) 70%, rgba(12, 9, 13, .4) 100%);
    opacity: 1;
  }
  .film-tall .film::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(12, 9, 13, .78) 0%, rgba(12, 9, 13, .5) 46%, rgba(12, 9, 13, .1) 100%);
    /* Her world opens the room; the paperwork closes it again. */
    opacity: var(--scrim); transition: opacity .7s ease;
  }

  .film-tall .slate { left: auto; right: calc(var(--win-right) + 18px); top: calc(var(--nav-h) + 32px); }

  .film-tall .rail {
    display: grid; gap: 7px;
    position: fixed; z-index: 30;
    right: calc(var(--win-right) - 22px); top: 50%; transform: translateY(-50%);
  }
  .rail i { display: block; width: 3px; height: 18px; border-radius: 3px; background: rgba(255, 236, 244, .22); transition: background .4s ease, transform .4s var(--ease); }
  .rail i.is-past { background: rgba(255, 92, 168, .55); }
  .rail i.is-now { background: var(--pink); transform: scaleY(1.7); box-shadow: 0 0 12px var(--pink); }

  .film-tall .sec, .film-tall .hero, .film-tall .final {
    padding-left: clamp(40px, 7vw, 120px);
    padding-right: calc(var(--win-w) + var(--win-right) + clamp(40px, 5vw, 90px));
  }
  .film-tall .sec__in { margin-left: 0; max-width: 640px; }
  .film-tall .hero { justify-content: center; padding-top: calc(var(--nav-h) + 40px); }
  .film-tall .badge { position: static; max-width: 420px; margin-bottom: 8px; }
  .film-tall .hero .btn--wide, .film-tall .final .btn--wide { width: auto; min-width: 300px; }
  .film-tall .sub { text-align: left; }
  .film-tall .cue { justify-content: flex-start; }
  .film-tall .stop, .film-tall .stop--top { justify-content: center; padding-top: 40px; padding-bottom: 40px; min-height: 86vh; }
  .film-tall .stop .quote { font-size: clamp(2.2rem, 3.6vw, 3.4rem); max-width: 19ch; text-shadow: none; }
  .film-tall .final { justify-content: center; gap: 28px; }
  .film-tall .bye { text-align: left; }


  /* ---- the wide film: full-bleed 16:9, Ava right of centre, copy on the calm left ---- */
  .film-wide .film__reel, .film-wide .film__guard { object-position: 50% 50%; background-position: 50% 50%; filter: none; }
  .film-wide .film__window::after {
    background:
      linear-gradient(90deg, rgba(12, 9, 13, .9) 0%, rgba(12, 9, 13, .72) 30%, rgba(12, 9, 13, .2) 62%, rgba(12, 9, 13, 0) 100%),
      linear-gradient(180deg, rgba(12, 9, 13, .5) 0%, rgba(12, 9, 13, 0) 16%, rgba(12, 9, 13, 0) 82%, rgba(12, 9, 13, .55) 100%);
    /* Her world lifts the veil but never below what the left column needs. */
    opacity: calc(.5 + var(--scrim) * .5);
  }
  .film-wide .slate { left: auto; right: clamp(24px, 4vw, 64px); top: calc(var(--nav-h) + 18px); }
  .film-wide .rail {
    display: grid; gap: 7px;
    position: fixed; z-index: 30;
    right: clamp(14px, 1.6vw, 28px); top: 50%; transform: translateY(-50%);
  }
  .film-wide .sec, .film-wide .hero, .film-wide .final {
    padding-left: clamp(40px, 7vw, 120px);
    padding-right: 46vw;
  }
  .film-wide .sec__in { margin-left: 0; max-width: 620px; }
  .film-wide .hero { justify-content: center; padding-top: calc(var(--nav-h) + 40px); }
  .film-wide .badge { position: static; max-width: 420px; margin-bottom: 8px; }
  .film-wide .hero .btn--wide, .film-wide .final .btn--wide { width: auto; min-width: 300px; }
  .film-wide .sub { text-align: left; }
  .film-wide .cue { justify-content: flex-start; }
  .film-wide .stop, .film-wide .stop--top { justify-content: center; padding-top: 40px; padding-bottom: 40px; min-height: 86vh; }
  .film-wide .stop .quote { font-size: clamp(2.2rem, 3.6vw, 3.4rem); max-width: 19ch; }
  .film-wide .final { justify-content: center; gap: 28px; }
  .film-wide .final::before { display: none; }
  .film-wide .bye { text-align: left; }

  /* ---- desktop type scale ----
     Every rem on a wide screen is bigger than on a phone and grows with the
     monitor: 18px at 1440 wide, about 21px at 1700, capped at 22px. The
     pixel-sized labels are restated in rem here so they grow with it. */
  html { font-size: clamp(17.5px, 1.25vw, 22px); }
  .lede { font-size: 1.14rem; }
  .rows .v, .steps .v, .card p, .ledger li, .faq details p, .scene p { font-size: 1.02rem; }
  .ledger li.loud { font-size: 1.12rem; }
  .faq summary { font-size: 1.1rem; }
  .small { font-size: .84rem; }
  .fine, .match-notes { font-size: .88rem; }
  .sub { font-size: .95rem; }
  .badge { font-size: .84rem; }
  .stop .credit { font-size: .84rem; max-width: 40ch; }
  .stop .lead-in { font-size: 1.1rem; }
  .btn { font-size: 1.32rem; min-height: 3.4rem; padding: 0 1.8rem; }
  .btn--sm { font-size: 1.02rem; min-height: 2.5rem; padding: 0 1rem; }
  .nav__mark { font-size: 1.5rem; }
  .nav__links a { font-size: .88rem; }
  .chip { font-size: .6rem; }
  .slate { font-size: .74rem; }
  .label { font-size: .74rem; }
  .pending { font-size: .64rem; }
  .match th { font-size: .74rem; }
  .match td { font-size: 1.05rem; }
  .dock__risk { font-size: .82rem; }
  .cue { font-size: .68rem; }
  .rows > div { grid-template-columns: 6.4rem 1fr; }
  .steps li { grid-template-columns: 7.4rem 1fr; }
  .film-wide .sec__in { max-width: min(42rem, 45vw); }
  .film-wide .badge { max-width: 30rem; }
  .film-wide .hero .btn--wide, .film-wide .final .btn--wide { min-width: 20rem; }

  .strict { font-size: clamp(4rem, 7.2vw, 6rem); }
  .h2 .strict { font-size: clamp(3rem, 5vw, 4.4rem); }
  .ledger { grid-template-columns: 1fr 1fr; gap: 28px; }
  .cards--2 { grid-template-columns: 1fr 1fr; }

  .dock {
    transform: none; padding: 9px var(--gutter);
    background: var(--ground);
  }
  .dock__risk { margin: 0; }
  .dock__row { display: none; }
  .foot { padding-bottom: 60px; }

  .sheet { margin: auto; border-radius: 22px; border: 1px solid var(--rule); }
}

/* Phones: pink caps on a white top and blush italic on a daylight street both
   fail contrast, so where type sits on film it brings its own ground. */
@media (max-width: 859px), (max-aspect-ratio: 1/1) {
  .hero::before, .stop::before {
    content: ''; position: absolute; inset: auto 0 0 0; height: 64%; z-index: -1; pointer-events: none;
    background: linear-gradient(0deg, rgba(12, 9, 13, .9) 0%, rgba(12, 9, 13, .66) 55%, rgba(12, 9, 13, 0) 100%);
  }
  /* Lighter than the bottom one: the nav veil already covers the first 120px,
     and the top of the frame is where the scene reads. */
  .stop--top::before {
    inset: 0 0 auto 0; height: 44%;
    background: linear-gradient(180deg, rgba(12, 9, 13, .6) 0%, rgba(12, 9, 13, .5) 60%, rgba(12, 9, 13, 0) 100%);
  }
}

/* The slate is a disclosure, so it never clips: on a narrow phone it drops a
   point rather than losing its last word. */
@media (max-width: 430px) {
  .slate { font-size: 10px; letter-spacing: .02em; gap: 6px; }
}

/* Phones, first screen only: her face must stay clear of the headline. Two
   things do it. The film is framed a little tighter and higher while the hero
   is on screen, which lifts her face by about six percent of the screen, and it
   eases back to the full frame as soon as the visitor scrolls. And the text
   block is tightened so that it starts lower. */
@media (max-width: 859px), (max-aspect-ratio: 1/1) {
  .film-tall .film__reel, .film-tall .film__guard {
    transform-origin: 50% 30%;
    transition: transform 1.1s var(--ease);
  }
  /* film-tall and past-hero both sit on the root element */

  .hero { padding-bottom: 16px; }
  .hero .sec__in > * + * { margin-top: 10px; }
  .hero h1 .soft { font-size: clamp(1.2rem, 5.2vw, 1.7rem); margin-bottom: .12em; }
  .hero h1 .strict { font-size: clamp(2.6rem, 12.4vw, 4.6rem); }
  .hero .btn { min-height: 50px; }
  .hero .sub { margin-top: 7px; font-size: .82rem; }
  .hero .small { margin-top: 8px; padding: 8px 11px; font-size: .75rem; line-height: 1.38; }
  .cue { margin-top: 4px; }
  .cue span { display: none; }
}

@media (max-width: 380px) {
  .strict { font-size: 2.8rem; }
  .badge { max-width: 60%; }
  .nav { gap: 8px; }
  .nav__mark { font-size: 20px; }
}

/* A short in-app browser: the first screen still holds the promise and the button. */
@media (max-height: 720px) and (max-width: 859px) {
  .hero { padding-bottom: 14px; }
  .hero .sec__in > * + * { margin-top: 10px; }
  .hero h1 .soft { font-size: 1.2rem; }
  .hero h1 .strict { font-size: 2.75rem; }
  .hero .btn { min-height: 50px; }
  .hero .sub { margin-top: 7px; font-size: .8rem; }
  .hero .small { margin-top: 8px; padding: 8px 11px; font-size: .75rem; line-height: 1.4; }
  /* Only the chevron survives, so the fold still says there is more below. */
  .cue { margin-top: 6px; }
  .cue span { display: none; }
}
/* The AI disclosure never leaves the first screen, however short the screen. */
@media (max-height: 600px) and (max-width: 859px) {
  .badge { position: static; max-width: none; margin: 0 0 8px; padding: 6px 9px; line-height: 1.35; }
  .badge .textlink { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cue svg, .sheet[open] { animation: none; }
  .film__window::after, .dock, .btn { transition: none; }
}

/* ---------- phones: short copy, bigger small print ----------
   Every long paragraph has a short twin. Phones see the twin (m-only), wide
   screens see the original (d-only). Nothing on a phone is set below 14px
   except the fixed slate and chip, and those went from 8.5 and 10px to 11 and
   12px. Legal wording that must stay whole is not shortened here, only
   enlarged. This block sits last so it wins over the earlier phone rules. */
@media (min-width: 860px) and (min-aspect-ratio: 1001/1000) {
  .m-only { display: none !important; }
}
@media not all and (min-width: 860px) and (min-aspect-ratio: 1001/1000) {
  .d-only { display: none !important; }

  .lede { font-size: 1.1rem; line-height: 1.5; }
  .small, .hero .small { font-size: .9rem; line-height: 1.45; padding: 11px 13px; }
  .fine, .match-notes { font-size: .92rem; }
  .sub, .hero .sub { font-size: .95rem; }
  .badge { font-size: .9rem; line-height: 1.38; max-width: min(64%, 270px); }
  .stop .credit { font-size: .92rem; }
  .stop .lead-in { font-size: 1.05rem; }
  .rows .v, .steps .v, .card p, .ledger li, .scene p, .faq details p { font-size: 1.02rem; }
  .ledger li.loud { font-size: 1.1rem; }
  .card h3 { font-size: 2.1rem; }
  .chooser strong { font-size: 1.9rem; }
  .chip { font-size: 11px; }
  .slate { font-size: 12px; letter-spacing: .03em; }
  .label { font-size: 13px; }
  .pending { font-size: 12px; }
  .match th { font-size: 12px; }
  .match td { font-size: 1rem; }
  .match { table-layout: fixed; }
  .dock__risk { font-size: 13px; }
  .gate__what, .gate label, .gate__where legend { font-size: 1rem; }
  .doors strong { font-size: 1.08rem; }
  .doors span { font-size: .92rem; }
  .loader__note { font-size: 12px; }
}
@media (max-height: 720px) and (max-width: 859px) {
  .hero .small { font-size: .86rem; padding: 9px 11px; }
  .hero .sub { font-size: .9rem; }
}

/* ---------- the Lair and the Telegram: brand-marked buttons, top and bottom ---------- */
.social { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.btn--social {
  min-height: 50px; padding: 0 12px; gap: 9px;
  font-size: 17px; letter-spacing: .06em;
  color: var(--ink); background: rgba(21, 16, 23, .9);
  border: 1px solid var(--rule-soft); box-shadow: none;
}
.btn--social:hover { background: var(--plate-2); border-color: var(--rule); box-shadow: none; }
.btn--social span { white-space: nowrap; }
.ico { width: 21px; height: 21px; flex: none; fill: currentColor; }
.ico--discord { color: #5865f2; }
.ico--telegram { color: #2aabee; }
/* Phones: the Lair and the Telegram share a row, Instagram gets the full width under them. */
.btn--ig { grid-column: 1 / -1; }
@media (max-width: 359px) { .social { grid-template-columns: 1fr; } }
@media (min-width: 860px) and (min-aspect-ratio: 1001/1000) {
  .btn--social { font-size: 1.05rem; min-height: 3rem; }
  /* Three across when the column has room, otherwise Instagram takes a row of its own. */
  .social { display: flex; flex-wrap: wrap; }
  .btn--social { flex: 1 1 auto; }
}

/* ---------- review fixes, 23 Sep 2026 ---------- */
/* The broker's partner tag stays legible on phones. */
@media not all and (min-width: 860px) and (min-aspect-ratio: 1001/1000) {
  .doors .partner { font-size: 12px; padding: 4px 6px; vertical-align: 1px; }
}
/* Short screens: the in-flow badge runs full width again (the phone block above had narrowed it). */
@media (max-height: 600px) and (max-width: 859px) { .badge { max-width: none; } }
/* The partner note in the dock only shows while the dock's broker button does. */
.dock.is-quiet .dock__aff, .dock.is-bare .dock__aff { display: none; }
/* The nav Join goes straight to the broker, so it steps aside over the lifestyle
   scenes, where nothing on screen may point at a broker. */
:root:has(.dock.is-quiet) .nav > .btn[data-link="broker"] { visibility: hidden; pointer-events: none; }
/* No stranded last words in the gate checkbox or a button label. */
.gate .check span { text-wrap: pretty; }
.btn { text-wrap: balance; }

/* ---------- review fixes, 23 Sep 2026, second pass ---------- */
/* 360 to 404px phones: two equal columns that never run past the page edge. */
@media (min-width: 360px) and (max-width: 404px) {
  .social { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .btn--social { padding: 0 8px; gap: 7px; font-size: 16px; letter-spacing: .04em; }
}
/* Phones 600px tall or less: the hero cannot take a third button row without
   pushing the AI label onto her face and the risk plate off the first screen.
   Instagram stays in the closing section and in "Find Ava on". */
@media (max-height: 600px) and (max-width: 859px) {
  .hero .btn--ig { display: none; }
}
/* Wide screens: tighter social buttons, so all three fit one row from about 1208px wide. */
@media (min-width: 860px) and (min-aspect-ratio: 1001/1000) {
  .btn--social { padding: 0 10px; gap: 7px; letter-spacing: .03em; }
}
/* Short laptop screens up to 1239px wide: tighten the hero so the risk plate
   clears the bottom bar, instead of cutting copy. */
@media (min-width: 860px) and (max-width: 1239px) and (min-aspect-ratio: 1001/1000) and (max-height: 800px) {
  .film-wide .hero { padding-top: calc(var(--nav-h) + 14px); }
  .film-wide .hero .badge { margin-bottom: 0; }
  .film-wide .hero .sec__in > * + * { margin-top: 8px; }
  .film-wide .hero .sub { margin-top: 6px; }
  .film-wide .hero .social { margin-top: 8px; gap: 8px; }
}
/* A switched-off door still answers a click: it reopens the sheet with the reason. */
.btn[data-gated-off], [data-link][data-gated-off] { cursor: pointer; }


/* ---------- the site: five pages (client brief, 6 Oct 2026) ---------- */

/* nav: four page links on wide screens, a menu on phones */
.nav__links a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 7px; }
.nav__menu {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  min-height: 38px; padding: 0 11px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--rule-soft); background: rgba(12, 9, 13, .6); color: var(--ink);
  font: 600 13px/1 var(--body);
}
.nav__menu + .btn { margin-left: 0; }
@media (max-width: 430px) { .nav__menu span { display: none; } .nav__menu { padding: 0 10px; } }
@media (min-aspect-ratio: 1/1) and (min-width: 860px) {
  .nav__menu { display: none; }
  .nav__links + .nav__menu + .btn { margin-left: 22px; }
}
@media not all and (min-aspect-ratio: 1/1) and (min-width: 860px) {
  .menu-open .nav__links {
    display: grid; position: absolute; left: 0; right: 0; top: var(--nav-h);
    margin: 0; padding: 4px var(--gutter) 14px; gap: 0;
    background: rgba(12, 9, 13, .98); border-bottom: 1px solid var(--rule-soft);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9);
  }
  .menu-open .nav__links a { padding: 15px 2px; font-size: 1.08rem; border-top: 1px solid var(--rule-soft); }
  .menu-open .nav::before { opacity: 1; }
}

/* the page headers of How Ava is made, Copy trading, Power Match and FAQs */
.page-hero {
  position: relative; overflow: hidden;
  min-height: 48svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--nav-h) + 48px) var(--gutter) 30px;
}
.page-hero__img, .page-hero__img img { position: absolute; inset: 0; width: 100%; height: 100%; }
.page-hero__img img { object-fit: cover; object-position: 50% 30%; }
.page-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12, 9, 13, .62) 0%, rgba(12, 9, 13, .38) 38%, rgba(12, 9, 13, .94) 100%);
}
.page-hero .sec__in { position: relative; z-index: 1; }
.page-hero h1 .strict { text-shadow: 0 4px 30px rgba(0, 0, 0, .55); }
.page-hero h1 .soft { text-shadow: 0 2px 18px rgba(0, 0, 0, .6); }
.sec--page { padding-top: clamp(34px, 6svh, 64px); padding-bottom: clamp(34px, 6svh, 64px); }
@media (min-aspect-ratio: 1/1) and (min-width: 860px) {
  .page-hero { min-height: 60svh; padding-bottom: 44px; }
  .page-hero__img img { object-position: 50% 40%; }
  .page-hero::after { background: linear-gradient(90deg, rgba(12, 9, 13, .9) 0%, rgba(12, 9, 13, .55) 55%, rgba(12, 9, 13, .2) 100%), linear-gradient(180deg, rgba(12, 9, 13, .5) 0%, rgba(12, 9, 13, 0) 30%, rgba(12, 9, 13, .9) 100%); }
  .page-hero .sec__in, .sec--page .sec__in { max-width: 46rem; }
}

/* video slots: Ava's intro at the top of the home page, the copy trading explainer */
.vsl {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 14px; background: #000;
  box-shadow: 0 0 0 1px var(--rule), 0 30px 90px -30px rgba(255, 92, 168, .55);
}
.vsl__video { width: 100%; height: 100%; object-fit: cover; }
.vsl:not(.has-video) { display: grid; place-items: center; background: rgba(21, 16, 23, .94); }
.vsl__placeholder { margin: 0 18px; }
.vsl-sec { padding: calc(var(--nav-h) + 22px) var(--gutter) 6px; }
.vsl-sec > .vsl, .vsl-sec .vsl { max-width: 1180px; margin: 0 auto; }

/* Power Match on the home page: the idea, one button, one link */
.soft-line { font: italic 500 clamp(1.45rem, 6.2vw, 2.3rem)/1.15 var(--soft); color: var(--blush); text-shadow: 0 2px 18px rgba(0, 0, 0, .6); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.cta-row__more { font-weight: 600; font-size: 1.02rem; }
#power-match .h2 .strict { font-size: clamp(2.3rem, 10.4vw, 4.1rem); }

/* step lists inside the option cards */
.mini-steps { margin: 0; padding-left: 1.25em; display: grid; gap: 9px; color: var(--ink-2); font-size: .95rem; }
.mini-steps b { color: var(--ink); font-weight: 600; }
.mini-steps li::marker { color: var(--pink); font-weight: 700; }

/* community wins: real member screenshots with a few photos of Ava (hidden until supplied) */
.wins { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.wins__tile {
  margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(21, 16, 23, .94); border: 1px dashed var(--rule);
}
.wins__tile span { padding: 10px; text-align: center; font: 500 10px/1.35 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.wins__tile img { width: 100%; height: 100%; object-fit: cover; }
.wins__tile--photo { border: 1px solid var(--rule-soft); }
@media (min-aspect-ratio: 1/1) and (min-width: 860px) { .wins { grid-template-columns: repeat(3, 1fr); } }

/* Ava's statement */
.manifesto { margin: 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--pink); }
.manifesto p { font-size: clamp(1.12rem, 4.6vw, 1.45rem); line-height: 1.5; color: var(--ink-2); text-shadow: 0 2px 16px rgba(0, 0, 0, .8); }
.manifesto b { color: var(--ink); font-weight: 600; }
.manifesto p.manifesto__close {
  margin-top: 18px;
  font: 800 clamp(1.8rem, 7.6vw, 2.9rem)/1 var(--strict); letter-spacing: .015em; text-transform: uppercase; color: var(--ink);
}

/* the footer's legal links */
.foot__links { display: flex; flex-wrap: wrap; gap: 6px 16px; padding-top: 6px; font-size: 11px; }
.foot__links a[aria-disabled="true"] { opacity: .55; text-decoration: none; cursor: default; }

/* the hero badge carries the brief's full disclosure line on phones too: keep it off her face */
@media not all and (min-width: 860px) and (min-aspect-ratio: 1001/1000) {
  .hero .badge { max-width: min(60%, 250px); }
}

/* the home page: four scrolls at most, with room left for the intro video */
.page--home .sec { padding-top: clamp(36px, 6svh, 64px); padding-bottom: clamp(36px, 6svh, 64px); }
.page--home .vsl-sec { padding-top: calc(var(--nav-h) + 22px); padding-bottom: 6px; }
@media (min-aspect-ratio: 1/1) and (min-width: 860px) {
  .film-wide #copy .sec__in { max-width: min(64rem, 62vw); }
  .film-wide #statement .sec__in { max-width: min(52rem, 56vw); }
  .cue { font-size: max(12px, .68rem); }
}
@media not all and (min-width: 860px) and (min-aspect-ratio: 1001/1000) {
  .page--home .hero .badge { max-width: min(56%, 230px); }
}

/* community wins as one swipeable row, so the section stays one band tall (four scrolls) */
.wins {
  grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 46%;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding-bottom: 6px; scrollbar-width: thin;
}
.wins__tile { scroll-snap-align: start; }
@media (min-aspect-ratio: 1/1) and (min-width: 860px) { .wins { grid-template-columns: none; grid-auto-columns: calc((100% - 30px) / 4); } }
/* the desk log table stays readable on phones */
@media not all and (min-width: 860px) and (min-aspect-ratio: 1001/1000) { .log th, .log td { font-size: 12px; } }