/* Animation Alive: "Projector Light" design system (see ../../DESIGN-DIRECTION.md) */
@view-transition { navigation: auto; }
:root {
  color-scheme: dark;
  --bg: #0b0d14; --bg2: #10131d; --panel: #141826; --line: #262c42;
  --text: #f3efe6; --muted: #b3b9cb; --amber: #ffb347; --amber2: #ffcf87; --sky: #7cc4ff;
  --rainbow: linear-gradient(90deg, #ff6b6b, #ffb347, #ffe066, #6be08a, #7cc4ff, #b892ff);
  --radius: 18px; --gutter: clamp(18px, 4vw, 40px); --max: 1180px;
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --shadow: 0 30px 80px -30px rgba(0,0,0,.8);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 clamp(16px, 1.05vw + 12px, 18px)/1.6 var(--sans); overflow-x: hidden; }
img, video { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: var(--amber2); text-underline-offset: 3px; }
a:hover { color: #fff; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--amber); color: #111; padding: 10px 16px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
h1, h2, h3 { font-family: var(--serif); font-weight: 650; line-height: 1.08; letter-spacing: -.01em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 6.4vw, 5rem); }
h2 { font-size: clamp(1.8rem, 4.2vw, 3.1rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
p { margin: 0 0 1em; max-width: 68ch; text-wrap: pretty; }
.lede { font-size: clamp(1.08rem, 1.4vw + .6rem, 1.35rem); color: #e4dfd3; }
.muted { color: var(--muted); }
.eyebrow { display: inline-flex; gap: .5em; align-items: center; font: 700 .78rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--amber); margin-bottom: 1rem; }
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--rainbow); border-radius: 2px; }

/* header */
.top { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); background: rgba(11,13,20,.72); border-bottom: 1px solid rgba(255,255,255,.06); view-transition-name: top; }
.top .wrap { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font: 700 1.08rem/1 var(--serif); letter-spacing: .01em; }
.brand svg { width: 30px; height: 30px; flex: none; }
.nav { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.nav a { color: var(--muted); text-decoration: none; padding: 10px 12px; border-radius: 10px; font-weight: 550; font-size: .95rem; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); background: rgba(255,255,255,.06); }
.nav .btn { margin-left: 6px; }
.menu-btn { display: none; margin-left: auto; background: none; border: 1px solid var(--line); color: var(--text); border-radius: 12px; min-width: 48px; min-height: 44px; font: inherit; }
@media (max-width: 860px) {
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 64px; flex-direction: column; align-items: stretch; padding: 10px var(--gutter) 20px; background: rgba(11,13,20,.97); border-bottom: 1px solid var(--line); }
  .nav.open { display: flex; }
  .nav a { padding: 14px 12px; font-size: 1.05rem; }
  .nav .btn { margin: 8px 0 0; justify-content: center; }
}

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent; font: 700 1rem/1 var(--sans); text-decoration: none; cursor: pointer; transition: transform .15s ease, background .2s ease, box-shadow .2s ease; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { background: var(--amber); color: #1a1206; box-shadow: 0 10px 30px -10px rgba(255,179,71,.7); }
.nav .btn-primary { color: #1a1206; padding: 0 18px; }
.btn-primary:hover { background: #ffc46e; color: #1a1206; }
.btn-ghost { background: rgba(255,255,255,.05); color: var(--text); border-color: rgba(255,255,255,.18); }
.btn-ghost:hover { background: rgba(255,255,255,.1); color: #fff; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn svg { width: 20px; height: 20px; }

/* hero */
.hero { position: relative; min-height: min(92svh, 860px); display: grid; align-items: end; isolation: isolate; overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,13,20,.35) 0%, rgba(11,13,20,.15) 35%, rgba(11,13,20,.86) 78%, var(--bg) 100%); }
.hero .wrap { padding: 120px 0 clamp(36px, 7vw, 80px); }
.hero h1 { max-width: 15ch; text-shadow: 0 4px 40px rgba(0,0,0,.5); }
.hero h1 em { font-style: normal; background: var(--rainbow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lede { max-width: 54ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.badge-soon { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(124,196,255,.12); border: 1px solid rgba(124,196,255,.35); color: #cfe8ff; font-size: .85rem; font-weight: 600; }
.badge-soon::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 0 rgba(124,196,255,.6); animation: ping 2s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(124,196,255,.6);} 80%,100% { box-shadow: 0 0 0 10px rgba(124,196,255,0);} }

/* sections */
.section { padding: clamp(64px, 10vw, 128px) 0; position: relative; }
.section.alt { background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 20%, var(--bg2) 80%, var(--bg) 100%); }
.split { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (min-width: 880px) { .split { grid-template-columns: 1.05fr 1fr; } .split.rev > :first-child { order: 2; } }
.frame { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid rgba(255,255,255,.08); background: #000; aspect-ratio: 16 / 9; }
.frame img, .frame video { width: 100%; height: 100%; object-fit: cover; }
.frame .cap { position: absolute; left: 12px; bottom: 12px; font-size: .78rem; color: #e9e4d8; background: rgba(0,0,0,.55); padding: 4px 10px; border-radius: 999px; }
.grid3 { display: grid; gap: 18px; }
@media (min-width: 760px) { .grid3 { grid-template-columns: repeat(3, 1fr); } }
.card { background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.card h3 { margin-bottom: .35em; }
.card p:last-child { margin-bottom: 0; }
.step-num { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font: 700 1.2rem/1 var(--serif); color: #1a1206; background: var(--amber); margin-bottom: 18px; position: relative; }
.step-num.ring::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--amber); animation: tapring 2.2s ease-out infinite; }
@keyframes tapring { 0% { transform: scale(.8); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }

/* watch player */
.watch { padding-top: clamp(40px, 6vw, 72px); }
.mode-switch { display: inline-flex; padding: 5px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); gap: 4px; margin: 6px 0 18px; }
.mode-switch button { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: none; color: var(--muted); font: 700 .95rem/1 var(--sans); cursor: pointer; }
.mode-switch button[aria-pressed="true"] { background: var(--amber); color: #1a1206; }
.watch-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.aspect-switch { display: inline-flex; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--text); font: 600 .9rem/1.2 var(--sans); cursor: pointer; text-align: left; }
.chip:hover { border-color: var(--amber); }
.chip:disabled { opacity: .5; cursor: default; }
.chip[aria-pressed="true"] { border-color: var(--amber); color: var(--amber2); }
.stage { position: relative; margin-top: 10px; border-radius: var(--radius); overflow: hidden; background: #000; box-shadow: var(--shadow); border: 1px solid rgba(255,255,255,.08); }
.stage video { width: 100%; height: auto; max-height: 78svh; margin: 0 auto; background: #000; }
.stage.tall video { max-width: 460px; }
.stage .poster-btn { position: absolute; inset: 0 0 65px 0; display: grid; place-items: center; background: none; border: 0; cursor: pointer; color: #fff; }
.poster-btn span { display: inline-flex; align-items: center; gap: 12px; padding: 16px 26px; border-radius: 999px; background: rgba(11,13,20,.72); border: 1px solid rgba(255,255,255,.25); font: 700 1.05rem/1 var(--sans); backdrop-filter: blur(8px); }
.poster-btn svg { width: 22px; height: 22px; }
.hot-layer { position: absolute; inset: 0; pointer-events: none; }
.hot { position: absolute; pointer-events: auto; border: 2px solid rgba(255,207,135,.95); border-radius: 16px; background: rgba(255,179,71,.10); box-shadow: 0 0 0 4px rgba(255,179,71,.18), inset 0 0 24px rgba(255,179,71,.25); cursor: pointer; animation: hotin .35s ease both; }
.hot:hover, .hot:focus-visible { background: rgba(255,179,71,.22); outline: none; box-shadow: 0 0 0 4px var(--amber); }
.hot .tag { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); white-space: nowrap; padding: 6px 12px; border-radius: 999px; background: var(--amber); color: #1a1206; font: 800 .82rem/1 var(--sans); box-shadow: 0 6px 20px rgba(0,0,0,.4); }
@keyframes hotin { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.ctrl { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #0e111a; border-top: 1px solid var(--line); }
.ctrl button { min-width: 44px; min-height: 44px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--text); display: inline-grid; place-items: center; cursor: pointer; font: 700 .85rem/1 var(--sans); padding: 0 10px; }
.ctrl button[aria-pressed="true"] { border-color: var(--amber); color: var(--amber2); }
.ctrl button.talk { background: var(--amber); color: #1a1206; border-color: transparent; padding: 0 16px; }
.ctrl svg { width: 20px; height: 20px; }
.ctrl input[type=range] { flex: 1; accent-color: var(--amber); min-width: 60px; height: 32px; }
.ctrl .time { font: 600 .82rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--muted); min-width: 86px; text-align: right; }
.cc-line { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); max-width: 88%; text-align: center; background: rgba(0,0,0,.78); color: #fff; padding: 6px 12px; border-radius: 8px; font-size: clamp(.9rem, 2vw, 1.1rem); pointer-events: none; }
.scene-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.scene-list .label { width: 100%; color: var(--muted); font-size: .9rem; }
.preview-note { margin-top: 14px; font-size: .92rem; color: var(--muted); display: flex; gap: 10px; align-items: flex-start; }
.preview-note strong { color: #cfe8ff; }

/* chat sheet */
.sheet { position: fixed; inset: auto 0 0 0; z-index: 80; max-height: 86svh; display: flex; flex-direction: column; background: #121624; border-top: 1px solid var(--line); border-radius: 22px 22px 0 0; box-shadow: 0 -30px 80px rgba(0,0,0,.6); transform: translateY(104%); transition: transform .32s cubic-bezier(.2,.8,.2,1); }
.sheet.open { transform: none; }
@media (min-width: 900px) { .sheet { inset: auto 24px 24px auto; width: 420px; border-radius: 22px; border: 1px solid var(--line); max-height: 80vh; } }
.sheet-head { display: flex; gap: 14px; align-items: center; padding: 16px 16px 12px; border-bottom: 1px solid var(--line); }
.sheet-head img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--amber); }
.sheet-head h2 { font-size: 1.25rem; margin: 0; }
.sheet-head .role { font-size: .8rem; color: var(--muted); line-height: 1.3; }
.sheet-head .x { margin-left: auto; min-width: 44px; min-height: 44px; border-radius: 12px; border: 1px solid var(--line); background: none; color: var(--text); cursor: pointer; font-size: 1.3rem; }
.pill { display: inline-block; font: 800 .68rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; border-radius: 6px; background: rgba(124,196,255,.15); color: #cfe8ff; margin-top: 4px; }
.sheet-body { overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; overscroll-behavior: contain; }
.ctx { font-size: .85rem; color: var(--muted); border-left: 3px solid var(--amber); padding: 4px 10px; }
.bub { max-width: 88%; padding: 10px 14px; border-radius: 16px; line-height: 1.45; animation: hotin .25s ease both; }
.bub.them { background: #1d2335; border: 1px solid var(--line); border-top-left-radius: 4px; }
.bub.me { align-self: flex-end; background: var(--amber); color: #1a1206; border-top-right-radius: 4px; font-weight: 600; }
.bub.typing { color: var(--muted); font-style: italic; }
.sheet-foot { padding: 10px 16px 16px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.sheet-foot .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fake-input { display: flex; gap: 8px; }
.fake-input input { flex: 1; min-height: 44px; border-radius: 12px; border: 1px solid var(--line); background: #0c0f18; color: var(--muted); padding: 0 12px; font: inherit; font-size: .9rem; }
.sheet-foot .row { display: flex; gap: 8px; flex-wrap: wrap; }
.scrim { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .3s; }
.scrim.open { opacity: 1; pointer-events: auto; }
@media (min-width: 900px) { .scrim { display: none; } }

/* gallery */
.cast { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.cast a, .cast button { display: block; text-decoration: none; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 16px 12px; text-align: center; transition: transform .2s ease, border-color .2s; font: inherit; cursor: pointer; width: 100%; }
.cast a:hover, .cast button:hover { transform: translateY(-3px); border-color: var(--amber); }
.cast img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin: 0 auto 10px; border: 3px solid rgba(255,179,71,.6); }
.cast strong { display: block; font-family: var(--serif); font-size: 1.1rem; }
.cast span { font-size: .8rem; color: var(--muted); }
.cast-wide { display: grid; gap: 18px; }
@media (min-width: 760px) { .cast-wide { grid-template-columns: repeat(2, 1fr); } }
.who { display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: start; }
.who img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255,179,71,.6); }
.who .ask { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* roadmap */
.road { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.road li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; padding: 18px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.road .dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,179,71,.15); color: var(--amber); font-weight: 800; }
.road .now .dot { background: var(--amber); color: #1a1206; }

/* signup */
.signup { border-radius: 26px; padding: clamp(26px, 5vw, 56px); background: radial-gradient(1200px 400px at 10% -10%, rgba(255,179,71,.18), transparent 60%), radial-gradient(900px 400px at 110% 120%, rgba(124,196,255,.16), transparent 60%), var(--panel); border: 1px solid var(--line); }
.signup form { display: grid; gap: 12px; margin-top: 18px; max-width: 560px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 650; font-size: .95rem; }
.field input[type=email] { min-height: 52px; border-radius: 14px; border: 1px solid #39405a; background: #0c0f18; color: var(--text); padding: 0 16px; font: inherit; }
.field input[type=email]:focus { border-color: var(--amber); outline: none; box-shadow: 0 0 0 3px rgba(255,179,71,.35); }
.checks { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: .95rem; border: 0; padding: 0; margin: 0; }
.checks legend { font-weight: 650; margin-bottom: 6px; padding: 0; }
.checks label { display: inline-flex; gap: 8px; align-items: center; min-height: 36px; }
.checks input { width: 20px; height: 20px; accent-color: var(--amber); }
.form-msg { min-height: 1.5em; font-weight: 600; }
.form-msg.ok { color: #8ee6a8; }
.form-msg.err { color: #ffb4b4; }
.hp { position: absolute; left: -9999px; }
.hp input { min-height: 44px; min-width: 44px; }   /* UX1 (audit 10-10 #7): the off-screen honeypot was the "185x21 footer input" in target-size audits */

/* faq */
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; font: 650 1.1rem/1.35 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 16px; font: 400 1.6rem/1 var(--sans); color: var(--amber); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 0 20px; color: #ddd8cc; }

/* footer */
.foot { border-top: 1px solid var(--line); padding: 48px 0 calc(40px + env(safe-area-inset-bottom)); margin-top: 40px; color: var(--muted); font-size: .92rem; }
.foot .cols { display: grid; gap: 28px; }
@media (min-width: 760px) { .foot .cols { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.foot a { color: var(--muted); text-decoration: none; display: inline-block; padding: 6px 0; }
.foot a:hover { color: var(--text); }
.foot .prod { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between; }
.foot .prod strong { color: var(--text); font-weight: 650; }

/* reveal */
.rv { transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.rv.pre { opacity: 0; transform: translateY(24px); }
.legal h2 { font-size: 1.5rem; margin-top: 1.6em; }
.page-head { padding: clamp(56px, 9vw, 110px) 0 10px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .rv.pre { opacity: 1; transform: none; }
  @view-transition { navigation: none; }
}

/* forms (FORMS helper): subscribe box + contact page */
.field input[type=text], .field select, .field textarea { min-height: 52px; border-radius: 14px; border: 1px solid #39405a; background: #0c0f18; color: var(--text); padding: 0 16px; font: inherit; width: 100%; }
.field textarea { padding: 14px 16px; min-height: 150px; resize: vertical; line-height: 1.5; }
.field select { appearance: auto; }
.field input[type=text]:focus, .field select:focus, .field textarea:focus { border-color: var(--amber); outline: none; box-shadow: 0 0 0 3px rgba(255,179,71,.35); }
.field [aria-invalid="true"] { border-color: #ff8f8f; }
.field input[type=email] { width: 100%; }
.consent { font-size: .88rem; margin: 0; color: var(--muted); }
.consent a { color: var(--text); }
.counter { font-size: .85rem; }
.subform { display: grid; gap: 12px; max-width: 560px; }
.foot-sub { margin-bottom: 36px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.foot-sub h2 { font-size: 1.35rem; margin: 0 0 4px; color: var(--text); }
.foot-sub > p { margin: 0 0 12px; }
.foot-sub .field label { color: var(--text); }
.contact-card { max-width: 640px; }
.contactform { display: grid; gap: 16px; }
.contact-done { border: 1px solid var(--line); border-radius: 22px; padding: clamp(22px, 4vw, 40px); background: var(--panel); }
.contact-done:focus { outline: 2px solid var(--amber); outline-offset: 2px; }
.contact-done[hidden] { display: none; }
@media (max-width: 1100px) { .nav a { padding: 10px 8px; font-size: .9rem; } }
/* live player: reserve the 48 px control bar while noahtalk.js loads (no layout shift) */
.stage.live-pending video { margin-bottom: 48px; }
.stage.live { background: transparent; border: 0; box-shadow: none; overflow: visible; }
/* phones in portrait open the vertical film: reserve its height before watch.js swaps the video in (no layout shift) */
@media (orientation: portrait) and (max-width: 699px) { .stage:not(.wide-built) { min-height: calc(78svh + 48px); } }

/* iPhone landscape (viewport-fit=cover): keep content out of the notch / home-indicator areas */
@supports (width: max(1px, env(safe-area-inset-left))) { .wrap { width: min(100% - 2 * max(var(--gutter), env(safe-area-inset-left), env(safe-area-inset-right)), var(--max)); } }

/* 200% zoom on phones (~195 px wide): the header must not push the page wider than the screen */
@media (max-width: 300px) { .top .wrap { gap: 8px; } .brand span { display: none; } .menu-btn { min-width: 44px; padding: 0 10px; } }

/* /watch (10-07 art direction): compact title row so the whole player sits above the fold on laptops and desktops */
.watch-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 28px; }
.watch-title { min-width: 0; }
.watch-page { padding-top: clamp(14px, 2.2vw, 28px); }
.watch-page .eyebrow { margin-bottom: .55rem; }
.watch-page h1 { font-size: clamp(1.75rem, 3.1vw, 2.7rem); margin: 0 0 .25em; }
.watch-page .lede { font-size: clamp(.98rem, 1.05vw + .55rem, 1.12rem); margin: 0; color: #d9d3c6; }
.watch-page .watch-tools { gap: 10px; }
.watch-page .mode-switch { margin: 0; }
.watch-page .stage { margin-top: 16px; }
@media (max-width: 699px) {
  .watch-page { padding-top: 12px; }
  .watch-page .lede-more { display: none; }
  .watch-page .watch-tools { width: 100%; }
}
@media (max-width: 330px) { .watch-tools, .mode-switch, .aspect-switch { width: 100%; } .mode-switch button { flex: 1; padding: 0 8px; font-size: .85rem; } .aspect-switch { flex-wrap: wrap; } }


/* ==================================================================================================================
   DESIGN v2 (PAGE-DESIGN, 10-07 pm). Everything from here to the end of the file is the page redesign layer.
   Rollback = delete from this banner to the end. Tokens: team/noah-rt/PAGE-DESIGN/TOKENS.css (same values below).
   NOT restyled on purpose (owned by CHATBOX-DESIGN / player): .sheet*, .bub, .scrim, .ctrl, .stage internals, .hot,
   .poster-btn, .ct-* (noahtalk), .rt-* . Those areas are only PINNED to the dark palette so light mode cannot reach them.
   ================================================================================================================== */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500 700; font-display: optional; src: url(/assets/fonts/fraunces-640-aa.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; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: optional; src: url(/assets/fonts/inter-var-aa.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; }
/* display: optional = the web fonts never delay LCP or re-flow text; both are subset to the characters the site uses (Fraunces pinned to one display instance: 12 KB; Inter variable 400-650: 21 KB) and preloaded after the hero image (cached on every later page). Metric-matched fallbacks keep the fallback close. */
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 107.4%; ascent-override: 90%; descent-override: 22.4%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia"), local("Times New Roman"), local("Liberation Serif"); size-adjust: 104%; ascent-override: 94%; descent-override: 24.5%; line-gap-override: 0%; }

:root {
  --aa-bg: #0a0c13; --aa-bg-2: #0f121c; --aa-card: #141826; --aa-card-2: #1b2032; --aa-input: #0c0f18;
  --aa-line: #262c42; --aa-line-strong: #39405a;
  --aa-text: #f4f0e7; --aa-text-2: #d9d3c6; --aa-muted: #a9b0c3;
  --aa-amber: #ffb347; --aa-amber-hi: #ffc46e; --aa-amber-ink: #1a1206; --aa-link: #ffcf87; --aa-accent-text: #ffb347; --aa-focus-c: #ffb347;
  --aa-sky: #7cc4ff; --aa-sky-ink: #cfe8ff; --aa-coral: #ff7a59; --aa-ok: #8ee6a8; --aa-err: #ffb4b4;
  --aa-rainbow: linear-gradient(90deg, #ffb347, #ff7a59 35%, #c58cff 65%, #7cc4ff); /* = LOGO kit tokens.css */
  --aa-glow: radial-gradient(60% 50% at 50% 0%, rgba(255,179,71,.13), transparent 70%);
  --aa-glass: rgba(10,12,19,.72); --aa-hairline: rgba(255,255,255,.07); --aa-wash: rgba(255,255,255,.045);
  --aa-display: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif;
  --aa-sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --aa-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --aa-fs-lg: clamp(1.08rem, .9rem + .55vw, 1.3rem); --aa-fs-h3: clamp(1.18rem, 1rem + .6vw, 1.45rem);
  --aa-fs-h2: clamp(1.85rem, 1.2rem + 2.6vw, 3.2rem); --aa-fs-h1: clamp(2.6rem, 1.45rem + 5.2vw, 5.4rem);
  --aa-section: clamp(64px, 7vw + 20px, 120px);
  --aa-r-sm: 10px; --aa-r: 18px; --aa-r-lg: 26px;
  --aa-shadow-1: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px -18px rgba(0,0,0,.7);
  --aa-shadow-2: 0 40px 90px -40px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.06);
  --aa-ease: cubic-bezier(.2,.8,.2,1);
  /* legacy names used by the rest of site.css now follow the theme */
  --bg: var(--aa-bg); --bg2: var(--aa-bg-2); --panel: var(--aa-card); --line: var(--aa-line);
  --text: var(--aa-text); --muted: var(--aa-muted); --amber: var(--aa-amber); --amber2: var(--aa-link); --sky: var(--aa-sky);
  --serif: var(--aa-display); --sans: var(--aa-sans); --shadow: var(--aa-shadow-2); --radius: var(--aa-r); --rainbow: var(--aa-rainbow);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) and (max-width: 0px) { :root:not([data-theme="dark"]) {
  --aa-bg: #fbf6ec; --aa-bg-2: #efe9dc; --aa-card: #ffffff; --aa-card-2: #f3eee3; --aa-input: #fff;
  --aa-line: #e2dacb; --aa-line-strong: #b9ae99;
  --aa-text: #141826; --aa-text-2: #2c3245; --aa-muted: #4f566b;
  --aa-link: #a8480a; --aa-accent-text: #a8480a; --aa-focus-c: #a8480a; --aa-sky: #1f5f99; --aa-sky-ink: #0f4c80; --aa-ok: #1d7a3e; --aa-err: #b3261e;
  --aa-glow: radial-gradient(60% 50% at 50% 0%, rgba(255,179,71,.24), transparent 70%);
  --aa-glass: rgba(251,246,236,.82); --aa-hairline: rgba(20,24,38,.08); --aa-wash: rgba(20,24,38,.035);
  --aa-shadow-1: 0 1px 2px rgba(20,24,38,.06), 0 12px 30px -18px rgba(20,24,38,.28);
  --aa-shadow-2: 0 40px 80px -40px rgba(20,24,38,.5), 0 0 0 1px rgba(20,24,38,.06);
  color-scheme: light;
} }
:root[data-theme="light"] {
  --aa-bg: #fbf6ec; --aa-bg-2: #efe9dc; --aa-card: #ffffff; --aa-card-2: #f3eee3; --aa-input: #fff;
  --aa-line: #e2dacb; --aa-line-strong: #b9ae99;
  --aa-text: #141826; --aa-text-2: #2c3245; --aa-muted: #4f566b;
  --aa-link: #a8480a; --aa-accent-text: #a8480a; --aa-focus-c: #a8480a; --aa-sky: #1f5f99; --aa-sky-ink: #0f4c80; --aa-ok: #1d7a3e; --aa-err: #b3261e;
  --aa-glow: radial-gradient(60% 50% at 50% 0%, rgba(255,179,71,.24), transparent 70%);
  --aa-glass: rgba(251,246,236,.82); --aa-hairline: rgba(20,24,38,.08); --aa-wash: rgba(20,24,38,.035);
  --aa-shadow-1: 0 1px 2px rgba(20,24,38,.06), 0 12px 30px -18px rgba(20,24,38,.28);
  --aa-shadow-2: 0 40px 80px -40px rgba(20,24,38,.5), 0 0 0 1px rgba(20,24,38,.06);
  color-scheme: light;
}
/* cinema pin: the hero, the film stage, the talk overlay and the chat stay in the dark "projector" palette in BOTH themes */
.hero, .stage, .sheet, .scrim, .frame, [class^="ct-"], [class*=" ct-"], [class^="rt-"], [class*=" rt-"], [class^="nt-"], [class*=" nt-"] {
  --aa-bg: #0a0c13; --aa-bg-2: #0f121c; --aa-card: #141826; --aa-card-2: #1b2032; --aa-input: #0c0f18;
  --aa-line: #262c42; --aa-line-strong: #39405a; --aa-text: #f4f0e7; --aa-text-2: #d9d3c6; --aa-muted: #a9b0c3;
  --aa-link: #ffcf87; --aa-accent-text: #ffb347; --aa-focus-c: #ffb347; --aa-sky: #7cc4ff; --aa-sky-ink: #cfe8ff;
  --aa-glass: rgba(10,12,19,.72); --aa-hairline: rgba(255,255,255,.07); --aa-wash: rgba(255,255,255,.045);
  --bg: #0b0d14; --bg2: #10131d; --panel: #141826; --line: #262c42; --text: #f3efe6; --muted: #b3b9cb; --amber2: #ffcf87; --sky: #7cc4ff;
  color-scheme: dark;
}
/* LOGO kit names (team/noah-rt/LOGO kit/tokens.css) resolve to the same palette, in every theme and inside the cinema pin */
:root, .hero, .stage, .sheet, .scrim, .frame, [class^="ct-"], [class*=" ct-"], [class^="rt-"], [class*=" rt-"], [class^="nt-"], [class*=" nt-"] {
  --aa-surface: var(--aa-bg); --aa-panel: var(--aa-card); --aa-ink: var(--aa-text); --aa-primary: var(--aa-accent-text); --aa-accent: var(--aa-sky);
}
:root { --aa-a: #ffb347; --aa-b: #ff7a59; --aa-c: #7cc4ff; --aa-ink-mark: #0b0d14; --aa-page: var(--aa-bg); /* page colour, NOT re-pinned: lets the dark hero fade into the page in either theme */ }
:root[data-theme="light"] { --aa-a: #f08a24; --aa-b: #e2502c; --aa-c: #2f7fc4; }
@media (prefers-color-scheme: light) and (max-width: 0px) { :root:not([data-theme="dark"]) { --aa-a: #f08a24; --aa-b: #e2502c; --aa-c: #2f7fc4; } }
.stage, .sheet { color: #f3efe6; }

/* base */
html, body { background: var(--aa-bg); }
body { color: var(--aa-text); font-family: var(--aa-sans); font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
::selection { background: rgba(255,179,71,.35); color: inherit; }
a { color: var(--aa-link); text-decoration-thickness: 1px; text-underline-offset: .22em; transition: color .15s ease, text-decoration-color .15s ease; }
a:hover { color: var(--aa-text); }
:focus-visible { outline: 3px solid var(--aa-focus-c); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3 { font-family: var(--aa-display); font-optical-sizing: auto; font-weight: 640; letter-spacing: -.01em; color: var(--aa-text); }
h1 { font-size: var(--aa-fs-h1); line-height: 1.03; letter-spacing: -.018em; }
h2 { font-size: var(--aa-fs-h2); line-height: 1.07; letter-spacing: -.014em; }
h3 { font-size: var(--aa-fs-h3); line-height: 1.2; letter-spacing: -.01em; }
.lede { font-size: var(--aa-fs-lg); line-height: 1.55; color: var(--aa-text-2); }
.muted { color: var(--aa-muted); }
.eyebrow { color: var(--aa-accent-text); font-family: var(--aa-sans); font-weight: 650; letter-spacing: .18em; font-size: .74rem; }
.eyebrow::before { width: 28px; height: 2px; }
.section { padding-block: var(--aa-section); }
.section > .wrap > .eyebrow + h2, .section .rv + h2 { margin-top: 0; }
.section > .wrap > .lede { margin-bottom: clamp(28px, 4vw, 48px); }
.section.alt { background: linear-gradient(180deg, var(--aa-bg) 0%, var(--aa-bg-2) 14%, var(--aa-bg-2) 86%, var(--aa-bg) 100%); }
.section.alt::before { content: ""; position: absolute; inset: 0 0 auto; height: 280px; background: var(--aa-glow); pointer-events: none; }
.section > .wrap { position: relative; }
ul { padding-left: 1.2em; } li { margin-bottom: .35em; } li::marker { color: var(--aa-accent-text); }

/* header */
.top { background: var(--aa-glass); border-bottom: 1px solid var(--aa-hairline); padding-top: env(safe-area-inset-top); transition: background .25s ease, box-shadow .25s ease; }
.top.scrolled { box-shadow: 0 10px 30px -20px rgba(0,0,0,.6); }
.top .wrap { min-height: 64px; gap: 12px; }
.brand { color: var(--aa-text); font: 650 1.1rem/1 var(--aa-display); letter-spacing: -.01em; min-height: 44px; }
.brand .brand-mark { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; }
.brand .brand-mark svg, .brand .brand-mark img { width: 100%; height: 100%; display: block; }
.nav a { color: var(--aa-muted); font-weight: 550; font-size: .94rem; border-radius: 999px; padding: 10px 14px; min-height: 44px; display: inline-flex; align-items: center; transition: color .15s ease, background .15s ease; }
.nav a:hover { color: var(--aa-text); background: var(--aa-wash); }
.nav a[aria-current="page"] { color: var(--aa-text); background: var(--aa-wash); box-shadow: inset 0 -2px 0 var(--aa-amber); }
.nav .btn-primary { color: var(--aa-amber-ink); background: var(--aa-amber); box-shadow: none; }
.nav .btn-primary:hover { color: var(--aa-amber-ink); background: var(--aa-amber-hi); }
.theme-btn { flex: none; width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 999px; border: 1px solid var(--aa-line); background: transparent; color: var(--aa-text); cursor: pointer; padding: 0; }
.theme-btn:hover { background: var(--aa-wash); }
.theme-btn svg { width: 20px; height: 20px; }
.theme-btn .i-sun { display: none; }
:root[data-theme="light"] .theme-btn .i-sun { display: block; } :root[data-theme="light"] .theme-btn .i-moon { display: none; }
@media (prefers-color-scheme: light) and (max-width: 0px) { :root:not([data-theme="dark"]) .theme-btn .i-sun { display: block; } :root:not([data-theme="dark"]) .theme-btn .i-moon { display: none; } }
.menu-btn { border-color: var(--aa-line); color: var(--aa-text); border-radius: 999px; font-weight: 600; }
.menu-btn .bars { width: 18px; height: 12px; position: relative; display: inline-block; }
.menu-btn .bars::before, .menu-btn .bars::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s var(--aa-ease); }
.menu-btn .bars::before { top: 1px; } .menu-btn .bars::after { bottom: 1px; }
.menu-btn[aria-expanded="true"] .bars::before { transform: translateY(4px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .bars::after { transform: translateY(-5px) rotate(-45deg); }
@media (min-width: 861px) and (max-width: 1180px) { .nav { gap: 0; } .nav a { padding: 10px 8px; font-size: .86rem; } .nav .btn { padding: 0 16px; } }
@media (max-width: 860px) {
  .menu-btn { margin-left: auto; }
  .theme-btn { order: 3; }
  .nav { top: calc(64px + env(safe-area-inset-top)); background: var(--aa-bg); border-bottom: 1px solid var(--aa-line); padding: 8px var(--gutter) calc(20px + env(safe-area-inset-bottom)); max-height: calc(100svh - 64px - env(safe-area-inset-top)); overflow-y: auto; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
  .nav.open { display: flex; animation: aa-drop .22s var(--aa-ease) both; }
  .nav a { font-size: 1.12rem; padding: 14px 12px; border-radius: 12px; border-bottom: 1px solid var(--aa-hairline); }
  .nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--aa-amber); }
  .nav .btn { margin-top: 14px; border-bottom: 0; min-height: 52px; }
}
@keyframes aa-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* buttons (the chat sheet keeps its own look) */
.btn { font-family: var(--aa-sans); font-weight: 650; letter-spacing: -.005em; min-height: 48px; padding: 0 24px; transition: transform .18s var(--aa-ease), background .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease; }
.btn-primary:not(.sheet .btn) { background: linear-gradient(180deg, #ffc266, #ffad3b); color: var(--aa-amber-ink); box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 12px 28px -12px rgba(255,160,40,.75); }
.btn-primary:not(.sheet .btn):hover { background: linear-gradient(180deg, #ffcd80, #ffb84f); color: var(--aa-amber-ink); transform: translateY(-1px); }
.btn-ghost:not(.sheet .btn) { background: var(--aa-wash); color: var(--aa-text); border-color: var(--aa-line-strong); }
.btn-ghost:not(.sheet .btn):hover { background: var(--aa-card-2); border-color: var(--aa-accent-text); color: var(--aa-text); transform: translateY(-1px); }
.hero .btn-ghost { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.32); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hero .btn-ghost:hover { background: rgba(255,255,255,.16); color: #fff; }
.btn .arrow { transition: transform .18s var(--aa-ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn:focus-visible { outline-offset: 4px; border-radius: 999px; }

/* hero: full-bleed film still, letterbox vignette, slow push-in */
.hero { min-height: min(100svh, 920px); background: #07080d; color: #f4f0e7; }
.hero .wrap { padding: calc(110px + env(safe-area-inset-top)) 0 clamp(40px, 7vw, 88px); }
.hero-media { overflow: hidden; }
.hero-media video, .hero-media img { transform-origin: 60% 40%; animation: aa-push 18s var(--aa-ease) both; }
@keyframes aa-push { from { transform: scale(1.07); } to { transform: scale(1); } }
.hero::after { background:
  radial-gradient(120% 80% at 70% 30%, transparent 40%, rgba(7,8,13,.55) 100%),
  linear-gradient(180deg, rgba(7,8,13,.55) 0%, rgba(7,8,13,.05) 30%, rgba(7,8,13,.35) 55%, rgba(7,8,13,.92) 82%, var(--aa-page) 100%); }
@media (min-width: 900px) { .hero::after { background:
  linear-gradient(90deg, rgba(7,8,13,.82) 0%, rgba(7,8,13,.45) 38%, rgba(7,8,13,0) 62%),
  linear-gradient(180deg, rgba(7,8,13,.5) 0%, rgba(7,8,13,0) 26%, rgba(7,8,13,0) 62%, rgba(7,8,13,.8) 90%, var(--aa-page) 100%); } }
.hero h1 { color: #fff; max-width: 13.5ch; text-shadow: 0 2px 30px rgba(0,0,0,.45); margin-top: 20px !important; }
.hero h1 em { padding-right: .06em; }
.hero .lede { color: #e9e3d6; max-width: 46ch; text-shadow: 0 1px 18px rgba(0,0,0,.5); }
.hero .cta-row { margin-top: 30px; gap: 12px; }
.hero .badge-soon { background: rgba(10,12,19,.55); border-color: rgba(124,196,255,.45); color: #dcefff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hero-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 28px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(255,255,255,.16); max-width: 560px; color: #cfd5e4; font-size: .9rem; }
.hero-meta li { margin: 0; display: inline-flex; align-items: center; gap: 0; white-space: nowrap; }
.hero-meta li::before { content: ""; width: 6px; height: 6px; margin-right: 9px; border-radius: 50%; background: var(--aa-amber); }
.hero-meta strong { color: #fff; font-weight: 650; }
.scroll-cue { position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); width: 26px; height: 40px; margin-left: -13px; border: 2px solid rgba(255,255,255,.4); border-radius: 14px; display: none; }
.scroll-cue::after { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: aa-cue 1.8s ease-in-out infinite; }
@keyframes aa-cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }
@media (min-width: 900px) and (min-height: 760px) { .scroll-cue { display: block; } }
@media (max-width: 600px) { .hero { min-height: min(92svh, 760px); } .hero .cta-row .btn { flex: 1 1 100%; } .hero-meta { font-size: .84rem; gap: 6px 16px; } }
@media (orientation: landscape) and (max-height: 500px) { .hero { min-height: 100svh; } .hero .wrap { padding-top: 64px; padding-bottom: 24px; } .hero .badge-soon { display: none; } .hero .cta-row { margin-top: 16px; } .hero h1 { font-size: clamp(2rem, 6vh + 1rem, 3rem); } .hero .lede { font-size: 1rem; } .hero-meta { display: none; } }

/* film section (page part around the player only) */
.watch { padding-bottom: clamp(24px, 4vw, 56px); background: var(--aa-glow) top center / 100% 520px no-repeat; }
.watch-title h1, .watch-title h2 { margin-bottom: .2em; }
.watch .lede, .watch-page .lede { color: var(--aa-text-2); }
.mode-switch { background: var(--aa-card); border-color: var(--aa-line); box-shadow: var(--aa-shadow-1); }
.mode-switch button { color: var(--aa-muted); font-family: var(--aa-sans); font-weight: 650; transition: color .15s ease, background .2s ease; }
.mode-switch button:hover { color: var(--aa-text); }
.mode-switch button[aria-pressed="true"] { background: var(--aa-amber); color: var(--aa-amber-ink); box-shadow: 0 6px 18px -8px rgba(255,160,40,.8); }
.watch-tools .chip { min-height: 44px; border-color: var(--aa-line); background: var(--aa-wash); color: var(--aa-text); font-family: var(--aa-sans); transition: border-color .15s ease, color .15s ease; }
.watch-tools .chip[aria-pressed="true"] { border-color: var(--aa-amber); color: var(--aa-accent-text); }
.preview-note, .scene-list .label { color: var(--aa-muted); }
.preview-note strong { color: var(--aa-sky-ink); }
.badge-soon { color: var(--aa-sky-ink); }

/* cards, steps, frames */
.card { background: var(--aa-card); border: 1px solid var(--aa-line); border-radius: var(--aa-r-lg); padding: clamp(22px, 3vw, 32px); box-shadow: var(--aa-shadow-1); transition: transform .3s var(--aa-ease), border-color .3s ease, box-shadow .3s ease; }
.card:hover { border-color: color-mix(in srgb, var(--aa-amber) 45%, var(--aa-line)); transform: translateY(-3px); }
.card h3 { margin-bottom: .4em; }
.card p { color: var(--aa-text-2); }
.grid3 { gap: clamp(14px, 2vw, 24px); }
.grid3 > .rv:nth-child(2), .grid3 > .card:nth-child(2) { transition-delay: .08s; }
.grid3 > .rv:nth-child(3), .grid3 > .card:nth-child(3) { transition-delay: .16s; }
.step-num { width: 48px; height: 48px; font: 650 1.15rem/1 var(--aa-display); color: var(--aa-amber-ink); background: linear-gradient(180deg, #ffc266, #ffad3b); box-shadow: 0 8px 20px -10px rgba(255,160,40,.9); }
/* loading skeleton: a compositor-only sheen behind the image until it paints over it (4 passes, then still) */
.frame { border-radius: var(--aa-r-lg); border: 1px solid var(--aa-hairline); box-shadow: var(--aa-shadow-2); background: #121625; }
.frame::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.06) 50%, transparent 70%); transform: translateX(-100%); animation: aa-sheen 1.5s ease-in-out 4; }
.frame > img, .frame > video { position: relative; z-index: 1; transition: transform 1.2s var(--aa-ease); }
.frame:hover > img, .frame:hover > video { transform: scale(1.025); }
.frame .cap { z-index: 2; background: rgba(7,8,13,.62); color: #ece6d9; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@keyframes aa-sheen { to { transform: translateX(100%); } }
.split { gap: clamp(32px, 6vw, 88px); }

/* cast */
.cast { gap: clamp(10px, 1.6vw, 18px); grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
@media (max-width: 420px) { .cast { grid-template-columns: repeat(2, 1fr); } }
.cast a, .cast button, .cast > div { background: var(--aa-card); border: 1px solid var(--aa-line); border-radius: var(--aa-r); padding: 18px 12px 16px; box-shadow: var(--aa-shadow-1); color: var(--aa-text); transition: transform .25s var(--aa-ease), border-color .25s ease, box-shadow .25s ease; }
.cast a:hover, .cast button:hover { transform: translateY(-4px); border-color: var(--aa-amber); box-shadow: 0 18px 40px -22px rgba(255,160,40,.6); }
.cast img { width: 88px; height: 88px; border: 0; box-shadow: 0 0 0 3px var(--aa-card), 0 0 0 5px rgba(255,179,71,.55); background: var(--aa-card-2); transition: box-shadow .25s ease; }
.cast a:hover img { box-shadow: 0 0 0 3px var(--aa-card), 0 0 0 5px var(--aa-amber); }
.cast strong { font-family: var(--aa-display); font-weight: 620; font-size: 1.08rem; margin-top: 2px; }
.cast span { color: var(--aa-muted); }
.who img { border: 0; box-shadow: 0 0 0 3px var(--aa-card), 0 0 0 5px rgba(255,179,71,.55); background: var(--aa-card-2); }

/* roadmap, page heads, legal, faq */
.road li { background: var(--aa-card); border-color: var(--aa-line); border-radius: var(--aa-r); box-shadow: var(--aa-shadow-1); }
.road .dot { color: var(--aa-accent-text); }
.road .now .dot { background: var(--aa-amber); color: var(--aa-amber-ink); }
.page-head { position: relative; padding: clamp(64px, 10vw, 128px) 0 clamp(8px, 2vw, 20px); }
.page-head::before { content: ""; position: absolute; inset: 0; background: var(--aa-glow); pointer-events: none; }
.page-head .wrap { position: relative; }
.page-head h1 { max-width: 18ch; }
.legal .wrap > *, .legal p, .legal li { max-width: 72ch; }
.legal h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); }
.faq { border-top: 1px solid var(--aa-line); }
.faq details { border-bottom: 1px solid var(--aa-line); }
.faq summary { min-height: 44px; padding: 22px 48px 22px 0; font: 600 clamp(1.05rem, 1rem + .3vw, 1.2rem)/1.35 var(--aa-display); transition: color .15s ease; }
.faq summary:hover { color: var(--aa-accent-text); }
.faq summary::after { color: var(--aa-accent-text); top: 50%; margin-top: -.5em; width: 28px; height: 28px; line-height: 26px; text-align: center; border: 1px solid var(--aa-line); border-radius: 50%; font-size: 1.2rem; right: 0; }
.faq details > div { color: var(--aa-text-2); max-width: 72ch; }
.faq details[open] > div { animation: aa-fade .3s ease both; }
@keyframes aa-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* signup + forms */
.signup { border-radius: 30px; background: radial-gradient(1100px 420px at 0% -20%, rgba(255,179,71,.2), transparent 60%), radial-gradient(800px 420px at 110% 130%, rgba(124,196,255,.16), transparent 60%), var(--aa-card); border: 1px solid var(--aa-line); box-shadow: var(--aa-shadow-2); position: relative; overflow: hidden; }
.signup::after { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--aa-rainbow); opacity: .85; }
.field label { color: var(--aa-text); }
.field input[type=email], .field input[type=text], .field select, .field textarea { background: var(--aa-input); color: var(--aa-text); border-color: var(--aa-line-strong); border-radius: 14px; transition: border-color .15s ease, box-shadow .15s ease; }
.field input::placeholder, .field textarea::placeholder { color: var(--aa-muted); opacity: .8; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--aa-amber) !important; box-shadow: 0 0 0 4px rgba(255,179,71,.28) !important; }
.consent, .counter { color: var(--aa-muted); }
.consent a { color: var(--aa-text); }
.form-msg.ok { color: var(--aa-ok); } .form-msg.err { color: var(--aa-err); }
.contact-done { background: var(--aa-card); border-color: var(--aa-line); }
.checks input { accent-color: var(--aa-amber); }

/* footer */
.foot { border-top: 1px solid var(--aa-line); background: linear-gradient(180deg, var(--aa-bg) 0%, var(--aa-bg-2) 100%); color: var(--aa-muted); margin-top: 0; padding: clamp(48px, 6vw, 80px) 0 calc(36px + env(safe-area-inset-bottom)); }
.foot-sub { display: grid; gap: 6px 48px; align-items: end; border-bottom-color: var(--aa-line); }
@media (min-width: 900px) { .foot-sub { grid-template-columns: 1fr 1.1fr; } .foot-sub > h2, .foot-sub > p { grid-column: 1; } .foot-sub > form { grid-column: 2; grid-row: 1 / span 2; } }
.foot-sub h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
.foot .brand { font-size: 1.3rem; }
.foot .brand .brand-mark { width: 38px; height: 38px; }
.foot h2.foot-h { font: 650 .74rem/1 var(--aa-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--aa-text); margin: 0 0 10px; }
.foot a { color: var(--aa-muted); min-height: 44px; display: inline-flex; align-items: center; padding: 0; transition: color .15s ease; }
.foot a:hover { color: var(--aa-text); }
.foot ul { gap: 0; }
.foot .prod { border-top-color: var(--aa-line); font-size: .85rem; }
.foot .prod strong { color: var(--aa-text); }

/* reveals: transform + opacity only (compositor), stagger in grids */
.rv { transition: opacity .7s var(--aa-ease), transform .7s var(--aa-ease); }
.rv.pre { opacity: 0; transform: translateY(18px); }


/* ---------- v3 (10-07 late): cinematic first screen, pause-face moment, scroll-driven motion, one radius/shadow system ---------- */
:root { --aa-r-sm: 12px; --aa-r: 20px; --aa-r-lg: 28px; --aa-r-xl: 36px; --aa-header-h: 64px; --aa-inset: 0px;
  --aa-shadow-3: 0 60px 120px -60px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.07); }
@media (min-width: 700px) { :root { --aa-inset: clamp(12px, 1.5vw, 24px); } }
.card, .contact-done { border-radius: var(--aa-r-lg); }
.cast a, .cast button, .cast > div, .road li { border-radius: var(--aa-r); }
.frame { border-radius: var(--aa-r-lg); }
.signup { border-radius: var(--aa-r-xl); }

/* the hero is a lit cinema screen set into the page: inset, rounded, deep shadow; its height always ends ON the fold */
.hero { margin: calc(var(--aa-inset) * .5) var(--aa-inset) 0; min-height: clamp(520px, calc(100svh - var(--aa-header-h) - env(safe-area-inset-top) - var(--aa-inset) * .5), 960px); }
@media (min-width: 700px) { .hero { border-radius: var(--aa-r-xl); box-shadow: var(--aa-shadow-3); } }
.hero .wrap { padding: 48px 0 clamp(28px, 4.5vw, 64px); }
@media (orientation: landscape) and (max-height: 500px) { .hero { min-height: calc(100svh - var(--aa-header-h)); } .hero .wrap { padding: 20px 0 22px; } }

/* type: three deliberate lines, the third one bigger and alive */
.hero-h1 { font-size: min(var(--aa-fs-h1), 8.4svh, 10.4vw); line-height: .98; letter-spacing: -.022em; margin: 18px 0 .42em !important; max-width: none !important; }
.hero-h1 .hl { display: block; }
.hero-h1 .hl-talk { display: flex; align-items: center; gap: .16em; font-size: 1.3em; line-height: 1; margin-top: .04em; }
.hero-h1 em { font-style: normal; padding-right: .02em; }
.hero .lede { max-width: 52ch; }
@media (orientation: landscape) and (max-height: 500px) { .hero-h1 { font-size: clamp(1.7rem, 7.6vh, 2.6rem); } }
@media (prefers-reduced-motion: no-preference) {
  .hero-h1 .hl { animation: aa-line .9s var(--aa-ease) both; }
  .hero-h1 .hl:nth-child(2) { animation-delay: .08s; } .hero-h1 .hl:nth-child(3) { animation-delay: .16s; }
}
@keyframes aa-line { from { transform: translate3d(0, .32em, 0); } }

/* LOGO kit "aa-live" Pause Face: the pause bars are its eyes; it blinks awake once, then blinks every few seconds */
.aa-live{position:relative;display:inline-block;width:var(--aa-size,32px);height:var(--aa-size,32px);flex:none;contain:layout paint;vertical-align:middle}.aa-live>*{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.aa-live>i{left:3.125%;top:12.5%;width:84.375%;height:84.375%;border-radius:31.5%;background:linear-gradient(135deg,var(--aa-a,#ffb347),var(--aa-b,#ff7a59));transform-origin:50% 100%}.aa-live .e{transform-origin:45.3% 46%}.aa-live .m{transform-origin:45.3% 75%}.aa-live .s{transform-origin:87.5% 12.5%}
@keyframes aa-b{0%{transform:none}18%{transform:scale(1.08,.9)}36%{transform:scale(.95,1.06)}54%{transform:scale(1.02,.98)}70%,to{transform:none}}@keyframes aa-e{0%,30%{transform:none}37%{transform:scaleY(.1)}45%{transform:none}62%{transform:translateX(-5%)}82%,to{transform:none}}@keyframes aa-m{0%,38%{opacity:0;transform:scale(.3)}62%{opacity:1;transform:scale(1.08)}to{opacity:1;transform:none}}@keyframes aa-s{0%,48%{opacity:0;transform:scale(0) rotate(-90deg)}to{opacity:1;transform:none}}@keyframes aa-bl{0%,90%,to{transform:none}94%{transform:scaleY(.1)}}
.hero-face { --aa-size: .86em; margin-left: .04em; transform: translateY(-.03em); filter: drop-shadow(0 .08em .18em rgba(255,140,40,.35)); }
@media (prefers-reduced-motion: no-preference) {
  .hero-face > i { animation: aa-b 1.2s cubic-bezier(.3,.7,.3,1) .7s both; }
  .hero-face .e { animation: aa-e 1.2s .7s both, aa-bl 5.5s 3s infinite; }
  .hero-face .m { animation: aa-m 1.2s cubic-bezier(.3,1.4,.5,1) .7s both; }
  .hero-face .s { animation: aa-s 1.2s cubic-bezier(.3,1.5,.5,1) .7s both; }
}

/* scroll-driven motion (Chrome/Edge; others simply stay still). transform + opacity only, off for reduced motion */
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
  .hero-media { animation: aa-parallax linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  .hero .wrap { animation: aa-hero-out linear both; animation-timeline: scroll(root); animation-range: 0 85vh; }
  .card, .cast > a, .cast > div, .road li, .frame, .signup, .faq details { animation: aa-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 65%; }
  .cast > :nth-child(even) { animation-range: entry 8% entry 75%; }
} }
@keyframes aa-parallax { to { transform: translate3d(0, 16%, 0) scale(1.05); } }
@keyframes aa-hero-out { to { transform: translate3d(0, -48px, 0); opacity: .2; } }
@keyframes aa-rise { from { opacity: 0; transform: translate3d(0, 32px, 0) scale(.97); } }

/* section seams: a thin light line where a band begins (no hard gradient edge) */
.section.alt::after { content: ""; position: absolute; left: 50%; top: 0; width: min(80%, 900px); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(255,179,71,.35), transparent); pointer-events: none; }

/* light theme hero: a matinee screen (cream light from the left on desktop; a framed still above the text on phones) */
:root[data-theme="light"] .hero { background: #efe5d2; color: #141826; }
:root[data-theme="light"] .hero h1 { color: #141826; text-shadow: none; }
:root[data-theme="light"] .hero h1 em { background-image: linear-gradient(90deg, #b5510b, #cf3f22 40%, #7d46c9 72%, #1f5f99); }
:root[data-theme="light"] .hero .lede { color: #2c3245; text-shadow: none; }
:root[data-theme="light"] .hero .badge-soon { background: rgba(255,255,255,.72); border-color: rgba(31,95,153,.35); color: #0f4c80; }
:root[data-theme="light"] .hero .btn-ghost { background: rgba(255,255,255,.6); border-color: rgba(20,24,38,.28); color: #141826; }
:root[data-theme="light"] .hero .btn-ghost:hover { background: #fff; color: #141826; }
:root[data-theme="light"] .hero-meta { color: #2c3245; border-top-color: rgba(20,24,38,.16); }
:root[data-theme="light"] .hero-meta strong { color: #141826; }
:root[data-theme="light"] .hero-face { filter: drop-shadow(0 .08em .2em rgba(200,90,20,.3)); }
:root[data-theme="light"] .scroll-cue { border-color: rgba(20,24,38,.35); } :root[data-theme="light"] .scroll-cue::after { background: #141826; }
:root[data-theme="light"] .section.alt::after { background: linear-gradient(90deg, transparent, rgba(168,72,10,.3), transparent); }
@media (min-width: 900px) {
  :root[data-theme="light"] .hero { box-shadow: 0 50px 100px -60px rgba(120,80,20,.55), 0 0 0 1px rgba(20,24,38,.08); }
  :root[data-theme="light"] .hero::after { background:
    linear-gradient(90deg, rgba(251,246,236,.97) 0%, rgba(251,246,236,.9) 32%, rgba(251,246,236,.42) 52%, rgba(251,246,236,0) 70%),
    radial-gradient(70% 90% at 0% 100%, rgba(255,179,71,.22), transparent 60%),
    linear-gradient(180deg, rgba(251,246,236,0) 75%, rgba(251,246,236,.55) 100%); }
}
@media (max-width: 899px) {
  :root[data-theme="light"] .hero { display: flex; flex-direction: column; min-height: 0; background: transparent; margin: 0; overflow: visible; box-shadow: none; border-radius: 0; }
  :root[data-theme="light"] .hero-media { position: relative; inset: auto; z-index: 0; aspect-ratio: 16 / 10; margin: 12px var(--gutter) 0; border-radius: var(--aa-r-lg); overflow: hidden; box-shadow: 0 30px 60px -36px rgba(120,80,20,.6), 0 0 0 1px rgba(20,24,38,.08); }
  :root[data-theme="light"] .hero::after { display: none; }
  :root[data-theme="light"] .hero .wrap { padding: 20px 0 36px; animation: none; }
  :root[data-theme="light"] .hero-h1 { font-size: min(var(--aa-fs-h1), 10.4vw); }
}
@media (prefers-color-scheme: light) and (max-width: 0px) {
:root:not([data-theme="dark"]) .hero { background: #efe5d2; color: #141826; }
:root:not([data-theme="dark"]) .hero h1 { color: #141826; text-shadow: none; }
:root:not([data-theme="dark"]) .hero h1 em { background-image: linear-gradient(90deg, #b5510b, #cf3f22 40%, #7d46c9 72%, #1f5f99); }
:root:not([data-theme="dark"]) .hero .lede { color: #2c3245; text-shadow: none; }
:root:not([data-theme="dark"]) .hero .badge-soon { background: rgba(255,255,255,.72); border-color: rgba(31,95,153,.35); color: #0f4c80; }
:root:not([data-theme="dark"]) .hero .btn-ghost { background: rgba(255,255,255,.6); border-color: rgba(20,24,38,.28); color: #141826; }
:root:not([data-theme="dark"]) .hero .btn-ghost:hover { background: #fff; color: #141826; }
:root:not([data-theme="dark"]) .hero-meta { color: #2c3245; border-top-color: rgba(20,24,38,.16); }
:root:not([data-theme="dark"]) .hero-meta strong { color: #141826; }
:root:not([data-theme="dark"]) .hero-face { filter: drop-shadow(0 .08em .2em rgba(200,90,20,.3)); }
:root:not([data-theme="dark"]) .scroll-cue { border-color: rgba(20,24,38,.35); } :root:not([data-theme="dark"]) .scroll-cue::after { background: #141826; }
:root:not([data-theme="dark"]) .section.alt::after { background: linear-gradient(90deg, transparent, rgba(168,72,10,.3), transparent); }
@media (min-width: 900px) {
  :root:not([data-theme="dark"]) .hero { box-shadow: 0 50px 100px -60px rgba(120,80,20,.55), 0 0 0 1px rgba(20,24,38,.08); }
  :root:not([data-theme="dark"]) .hero::after { background:
    linear-gradient(90deg, rgba(251,246,236,.97) 0%, rgba(251,246,236,.9) 32%, rgba(251,246,236,.42) 52%, rgba(251,246,236,0) 70%),
    radial-gradient(70% 90% at 0% 100%, rgba(255,179,71,.22), transparent 60%),
    linear-gradient(180deg, rgba(251,246,236,0) 75%, rgba(251,246,236,.55) 100%); }
}
@media (max-width: 899px) {
  :root:not([data-theme="dark"]) .hero { display: flex; flex-direction: column; min-height: 0; background: transparent; margin: 0; overflow: visible; box-shadow: none; border-radius: 0; }
  :root:not([data-theme="dark"]) .hero-media { position: relative; inset: auto; z-index: 0; aspect-ratio: 16 / 10; margin: 12px var(--gutter) 0; border-radius: var(--aa-r-lg); overflow: hidden; box-shadow: 0 30px 60px -36px rgba(120,80,20,.6), 0 0 0 1px rgba(20,24,38,.08); }
  :root:not([data-theme="dark"]) .hero::after { display: none; }
  :root:not([data-theme="dark"]) .hero .wrap { padding: 20px 0 36px; animation: none; }
  :root:not([data-theme="dark"]) .hero-h1 { font-size: min(var(--aa-fs-h1), 10.4vw); }
}
}

@media (prefers-reduced-motion: reduce) {
  .hero-media video, .hero-media img, .frame::before { animation: none !important; }
  .card:hover, .cast a:hover, .btn:hover, .frame:hover img, .frame:hover video { transform: none !important; }
}
@media (forced-colors: active) { .btn, .card, .cast a, .theme-btn, .mode-switch button { border: 1px solid CanvasText; } }
@media print { .top, .foot, .hero-media, .scroll-cue, .theme-btn { display: none !important; } body, html { background: #fff; color: #000; } }
/* RT1-E (BROWSER-QA 10-08): on short screens (phone landscape, 200% zoom) the sticky header ate 65 px of a 360-540 px screen and pushed
   the player's control bar below the fold; on the watch page it scrolls away there instead. */
@media (max-height: 560px) { body:has([data-watch]) .top { position: relative; } }

/* SITE-LAUNCH LCP-1: the still stays in flow (it sizes the framed light-mode hero), the loop video sits on top of it */
.hero-media > .hero-still { display: block; }
.hero-media > video { position: absolute; inset: 0; }

/* FILM FIRST (10-09): intro line over the top of the picture before play, caption + skip under the player, end card. Text, not images. */
.ff-intro { position: absolute; left: 10px; right: 10px; top: 10px; z-index: 3; pointer-events: none; display: flex; justify-content: center; }
.ff-intro p { margin: 0; max-width: 46rem; padding: 8px 14px; border-radius: 12px; background: rgba(8,10,18,.82); color: #fff; font-weight: 700; font-size: clamp(.9rem, 2.6vw, 1.05rem); line-height: 1.35; text-align: center; }
.ff-intro[hidden] { display: none; }
.ff-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-top: 10px; }
.ff-note .ff-line { margin: 0; flex: 1 1 260px; font-weight: 650; }
.ff-note .ff-skip { min-height: 44px; }
.ff-end { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px; text-align: center; background: rgba(6,8,14,.9); color: #fff; }
.ff-end h2 { margin: 0; font-size: clamp(1.25rem, 4.6vw, 2rem); line-height: 1.2; color: #fff; }
.ff-end .ff-sub { margin: 0; color: #e5e7eb; font-size: clamp(.95rem, 2.8vw, 1.1rem); }
.ff-end .ff-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; }
.ff-end .ff-go { min-height: 52px; font-size: 1.05rem; }
.ff-end .ff-go .ff-beta { font-weight: 600; opacity: .85; margin-left: .35em; }
.ff-end .ff-again { min-height: 52px; color: #fff; border-color: rgba(255,255,255,.4); }
.ff-watch { min-height: 44px; display: inline-flex; align-items: center; margin-left: .2em; padding: 0 4px; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.ff-watch:focus-visible, .ff-end button:focus-visible, .ff-skip:focus-visible { outline: 3px solid #7cc4ff; outline-offset: 2px; }

/* FILM-FIRST NUDGE (10-09): one friendly line when Interactive is opened before the film was watched; never blocks */
.ff-nudge { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 0; padding: 10px 14px; border-radius: 14px; background: var(--aa-card, rgba(255,255,255,.06)); border: 1px solid var(--aa-line, rgba(255,255,255,.12)); }
.ff-nudge p { margin: 0; flex: 1 1 240px; font-weight: 650; }
.ff-nudge .btn { min-height: 44px; }

/* RT1-N (Todd 10-09 "character blocks evenly gridded"): 10 characters = 5 x 2 on wide screens, 2 x 5 on phones; every tile the same width
   AND height (all rows 1fr, name on one line, the role clamped to two lines with a fixed caption height), same circle, centred. */
.cast { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; grid-auto-rows: 1fr; align-items: stretch; justify-content: center; max-width: 1080px; margin-inline: auto; }
@media (max-width: 699px) { .cast { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
.cast > a, .cast > div, .cast > button { display: flex !important; flex-direction: column; align-items: center; justify-content: flex-start; height: 100%; box-sizing: border-box; min-width: 0; }
.cast img { flex: 0 0 auto; width: 88px !important; height: 88px !important; }
.cast strong { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cast span:not(.sr) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; line-height: 1.35; min-height: 2.7em; max-width: 100%; }
/* RT1-Z6 (tester): footer links >= 44x44 (FAQ was 28 wide); inline links inside sentences are exempt (WCAG 2.5.8) */
footer a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
/* RT1-Z19 (audit #13): phones: no ~100 px blank band between the film block and the next section */
@media (max-width: 600px) { .watch-page ~ .section { padding-top: 40px; } }
/* RT1-Z20 (Todd 10-11): 'Two versions, one film' cards are whole-card links with a clear Watch CTA; tidy share row */
a.vcard { display: flex; flex-direction: column; color: inherit; text-decoration: none; min-height: 44px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
a.vcard p { flex: 1 1 auto; }
a.vcard:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.18); border-color: rgba(255,179,71,.55); }
a.vcard:focus-visible { outline: 3px solid #ffb347; outline-offset: 3px; }
a.vcard .vcard-cta { margin-top: 14px; font-weight: 700; color: var(--aa-accent, #ff9f1c); display: inline-flex; align-items: center; gap: .35em; min-height: 44px; }
a.vcard:hover .vcard-cta .arrow { transform: translateX(3px); }
.vcard-cta .arrow { transition: transform .18s ease; display: inline-block; }
@media (prefers-reduced-motion: reduce) { a.vcard, .vcard-cta .arrow { transition: none; } a.vcard:hover { transform: none; } }
.vshare { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .97rem; color: var(--aa-text-2, #b8b2a6); }
.vshare-h { font-weight: 650; }
.vshare-i { display: inline-flex; align-items: center; gap: 6px; }
.vshare-i a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.vshare-dot { opacity: .6; }
.vcopy, .vshow { min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--aa-hairline, rgba(255,255,255,.18)); background: transparent; color: inherit; font: inherit; font-size: .9rem; cursor: pointer; }
.vcopy:hover, .vshow:hover { border-color: rgba(255,179,71,.55); }
.vcopy:focus-visible, .vshow:focus-visible { outline: 3px solid #ffb347; outline-offset: 2px; }
.vcopy.on { border-color: #4ade80; color: #4ade80; }
.vshare-urls { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.vshare-urls code { font-size: .85rem; overflow-wrap: anywhere; }

/* RT1-Z21b: the share chips row (Copy / Share / Reddit) wraps on phones: it pushed / and /watch 14-17 px past the screen at 360-390 */
.aspect-switch { flex-wrap: wrap; max-width: 100%; min-width: 0; }
.watch-tools { min-width: 0; max-width: 100%; }
.watch-tools > * { min-width: 0; max-width: 100%; }

/* ================= v4 (RT1-Z26, Todd 10-12 "premium studio grade"): one cinematic system on top of the tokens above =================
   Dark cinema is the default (the light theme stays behind the toggle). Bigger type, calmer rhythm, real imagery, fast motion.
   Player internals (.stage internals, .sheet, rt-/nt-/ct-) are NOT touched here. */
:root {
  --v4-bg: #07080d; --v4-bg2: #0c0e15; --v4-card: #12151f; --v4-card2: #181c29; --v4-line: rgba(255,255,255,.08);
  --v4-gold: #f2b33d; --v4-gold2: #ffd27a; --v4-ink: #f4efe4; --v4-ink2: #cfc8b9; --v4-mute: #9aa1b4;
  --v4-max: 1240px; --v4-sec: clamp(84px, 10vw, 160px); --v4-ease: cubic-bezier(.22,.8,.24,1);
  --v4-h1: clamp(2.7rem, 1.6rem + 4.6vw, 5.6rem); --v4-h2: clamp(2rem, 1.3rem + 2.6vw, 3.4rem); --v4-lede: clamp(1.08rem, .98rem + .45vw, 1.32rem);
}
:root:not([data-theme="light"]) { --aa-bg: var(--v4-bg); --aa-bg-2: var(--v4-bg2); --aa-card: var(--v4-card); --aa-card-2: var(--v4-card2);
  --aa-text: var(--v4-ink); --aa-text-2: var(--v4-ink2); --aa-muted: var(--v4-mute); --aa-amber: var(--v4-gold); --aa-link: var(--v4-gold2); }
body { font-size: 1.06rem; line-height: 1.62; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.wrap { max-width: var(--v4-max); }
.section { padding-block: var(--v4-sec); }
.section h2, .v4-h2 { font-size: var(--v4-h2); letter-spacing: -.02em; line-height: 1.04; }
.lede { font-size: var(--v4-lede); line-height: 1.55; max-width: 62ch; }
.eyebrow { font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--v4-gold); font-weight: 650; }
.btn { min-height: 48px; padding-inline: 22px; border-radius: 999px; transition: transform .18s var(--v4-ease), background .18s, box-shadow .18s; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { box-shadow: 0 10px 30px -12px rgba(242,179,61,.6); }
.top { backdrop-filter: saturate(140%) blur(14px); }

/* ---- cinematic hero: the film reel under a soft vignette, words on the left third ---- */
.v4-hero { position: relative; min-height: min(92svh, 860px); display: grid; align-items: end; overflow: hidden; isolation: isolate; background: #000; color: #f6f1e6; }
.v4-hero .v4-media, .v4-hero .v4-media > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v4-hero .v4-media video { opacity: 0; transition: opacity .6s var(--v4-ease); }
.v4-hero .v4-media video.on { opacity: 1; }
.v4-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(5,6,10,.88) 0%, rgba(5,6,10,.55) 38%, rgba(5,6,10,0) 70%), linear-gradient(0deg, rgba(5,6,10,.95) 0%, rgba(5,6,10,0) 42%); }
.v4-hero .wrap { position: relative; z-index: 2; width: 100%; padding-block: clamp(110px, 16vh, 180px) clamp(44px, 8vh, 88px); }
.v4-hero .eyebrow { color: var(--v4-gold2); }
.v4-hero h1 { font-size: var(--v4-h1); line-height: .98; letter-spacing: -.03em; max-width: 13ch; margin: .25em 0 .3em; color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.45); }
.v4-hero h1 em { font-style: italic; color: var(--v4-gold2); }
.v4-hero .lede { color: #e9e2d3; max-width: 46ch; text-shadow: 0 1px 14px rgba(0,0,0,.5); }
.v4-hero .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.v4-hero .btn-ghost { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.28); color: #fff; backdrop-filter: blur(8px); }
.v4-sound { display: inline-flex; align-items: center; gap: 10px; }
.v4-sound svg { width: 20px; height: 20px; }
.v4-meta { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 34px 0 0; padding: 18px 0 0; list-style: none; border-top: 1px solid rgba(255,255,255,.16); color: #d8d1c2; font-size: .95rem; }
.v4-meta strong { color: #fff; }
@media (max-width: 699px) {
  .v4-hero { min-height: auto; align-items: stretch; display: block; }
  .v4-hero .v4-media { position: relative; aspect-ratio: 16 / 10; }
  .v4-hero::after { background: linear-gradient(0deg, var(--v4-bg) 0%, rgba(7,8,13,0) 34%); height: calc(100vw * 10 / 16); }
  .v4-hero .wrap { padding-block: 8px 44px; }
  .v4-hero h1 { color: var(--v4-ink); text-shadow: none; }
  .v4-hero .lede { color: var(--v4-ink2); text-shadow: none; }
}

/* ---- feature cards ("what we make") ---- */
.v4-grid { display: grid; gap: clamp(14px, 2vw, 24px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin-top: clamp(28px, 4vw, 48px); }
.v4-card { position: relative; background: linear-gradient(180deg, var(--v4-card2), var(--v4-card)); border: 1px solid var(--v4-line); border-radius: 26px; overflow: hidden;
  transition: transform .25s var(--v4-ease), border-color .25s; }
.v4-card:hover { transform: translateY(-3px); border-color: rgba(242,179,61,.35); }
.v4-card .pic { aspect-ratio: 16 / 9; background: #000; }
.v4-card .pic img, .v4-card .pic video { width: 100%; height: 100%; object-fit: cover; display: block; }
.v4-card .body { padding: 22px 24px 26px; }
.v4-card h3 { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); margin: .1em 0 .35em; }
.v4-card p { color: var(--aa-text-2); margin: 0; }
.v4-card .tag { display: inline-block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--v4-gold); margin-bottom: 6px; }
.v4-card a.cover { position: absolute; inset: 0; z-index: 1; }
.v4-card .soon { position: absolute; top: 14px; left: 14px; z-index: 2; background: rgba(7,8,13,.78); color: var(--v4-gold2); border: 1px solid rgba(242,179,61,.4); padding: 4px 10px; border-radius: 999px; font-size: .76rem; }

/* ---- films row ---- */
.v4-films { display: grid; gap: clamp(16px, 2vw, 26px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); margin-top: 34px; }
.v4-film { position: relative; border-radius: 28px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; isolation: isolate; }
.v4-film img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--v4-ease); }
.v4-film:hover img { transform: scale(1.03); }
.v4-film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,6,10,.92), rgba(5,6,10,0) 60%); z-index: 1; }
.v4-film .cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22px 24px; color: #fff; }
.v4-film .cap h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); margin: 0 0 4px; color: #fff; }
.v4-film .cap p { margin: 0; color: #ddd5c6; font-size: .95rem; }
.v4-film a { position: absolute; inset: 0; z-index: 3; }

/* ---- cast: two films, portrait chips ---- */
.v4-cast-h { margin: 34px 0 10px; font-family: var(--aa-sans); font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; color: var(--aa-muted); }
.cast a img { border-radius: 50%; box-shadow: 0 0 0 2px rgba(242,179,61,.0); transition: box-shadow .2s; }
.cast a:hover img { box-shadow: 0 0 0 3px rgba(242,179,61,.6); }

/* ---- pricing + trust ---- */
.v4-price { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); margin-top: 32px; }
.v4-price .v4-card .body { padding: 28px; }
.v4-price .big { font-family: var(--aa-display); font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); line-height: 1; margin: 6px 0 10px; color: var(--aa-text); }
.v4-price ul { margin: 14px 0 0; padding-left: 1.1em; color: var(--aa-text-2); }
.v4-trust { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); margin-top: 28px; }
.v4-trust div { padding: 18px 20px; border: 1px solid var(--v4-line); border-radius: 18px; background: var(--aa-card); }
.v4-trust strong { display: block; color: var(--aa-text); margin-bottom: 4px; }
.v4-trust span { color: var(--aa-muted); font-size: .95rem; }

/* ---- trailer lightbox (sound on) ---- */
.v4-modal { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; background: rgba(3,4,7,.9); backdrop-filter: blur(6px); padding: 4vw; }
.v4-modal[hidden] { display: none; }
.v4-modal video { width: min(1200px, 100%); max-height: 82svh; border-radius: 18px; background: #000; box-shadow: 0 40px 120px -30px #000; }
.v4-modal .x { position: absolute; top: 14px; right: 16px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff; font-size: 1.6rem; cursor: pointer; }

/* ---- footer: one line of trust ---- */
.foot .prod .v4-network a { color: var(--aa-link); text-decoration: underline; text-underline-offset: 3px; }

/* ---- billing page ---- */
.v4-billing .lede + .lede { margin-top: .6em; }
.v4-billing .faq { margin-top: 26px; }

/* reveals: faster, and never left hidden (failsafe in site.js) */
.rv { transition: opacity .42s var(--v4-ease), transform .42s var(--v4-ease); }
.rv.pre { opacity: 0; transform: translateY(14px); }
@media (prefers-reduced-motion: reduce) { .v4-hero .v4-media video { display: none; } .v4-card, .v4-film img { transition: none; } }
/* audit 10-12: the v3 scroll-driven "aa-rise" started at opacity 0 (fill both), so cards, cast tiles, frames, the signup and FAQ items were
   invisible until "entered" (blank in screenshots, link previews, crawler snapshots). Keep the motion, never hide content. */
@keyframes aa-rise { from { transform: translate3d(0, 22px, 0) scale(.985); } }

/* AA-1013 share row (every content page) */
.share-sec { padding: 8px 0 28px; }
.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.share-row-h { font-weight: 650; margin-right: 4px; color: var(--aa-text-2, #b8b2a6); }
.sr-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--text); font: 600 .9rem/1.2 var(--sans); text-decoration: none; cursor: pointer; }
.sr-btn:hover, .sr-btn:focus-visible { border-color: var(--amber); }
.sr-btn.on { border-color: var(--amber); color: var(--amber2); }
.sr-btn svg { flex: none; }
.sr-btn[hidden] { display: none; }
@media (max-width: 560px) { .sr-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .sr-btn { padding: 0; width: 44px; justify-content: center; } .sr-native span, .sr-cp span { position: static; width: auto; height: auto; clip: auto; } .sr-native, .sr-cp { width: auto; padding: 0 14px; } }
.cr-card .frame { margin-bottom: 14px; }
.cr-card .frame img { display: block; width: 100%; height: auto; border-radius: 12px; }

/* AA-1013 install chip */
.aa-install { position: fixed; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 2147483000; display: flex; align-items: center; gap: 2px; border-radius: 999px; background: var(--amber, #ffb347); box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.aa-install[hidden] { display: none; }
.aa-install button { min-height: 44px; border: 0; background: transparent; color: #0b0d14; font: 700 .95rem/1 var(--sans, system-ui); cursor: pointer; }
.aa-install-go { padding: 0 6px 0 16px; }
.aa-install-x { width: 40px; font-size: 1.3rem !important; }
body:has(.ct-started) .aa-install { display: none; }

/* AA-1013 What's new bar */
.aa-wn { display: flex; align-items: center; gap: 8px; max-width: 1180px; margin: 10px auto 0; padding: 0 12px 0 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,179,71,.08); }
.aa-wn-a { flex: 1; display: block; padding: 10px 0; color: var(--text); text-decoration: none; font: 500 .95rem/1.4 var(--sans); }
.aa-wn-a:hover strong { text-decoration: underline; }
.aa-wn-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--amber, #ffb347); color: #0b0d14; font-weight: 700; font-size: .78rem; }
.aa-wn-b { color: var(--aa-text-2, #b8b2a6); }
.aa-wn-more { color: var(--amber2, #ffc76b); font-weight: 600; }
.aa-wn-x { flex: none; width: 40px; height: 40px; border: 0; background: transparent; color: var(--text); font-size: 1.4rem; cursor: pointer; }
@media (max-width: 560px) { .aa-wn { margin: 8px 10px 0; } .aa-wn-b { display: none; } }

/* AA-1013 share notes + replies */
.share-note { margin: 10px 0 0; max-width: 640px; }
.share-note-l { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 4px; color: var(--aa-text-2, #b8b2a6); }
.share-note textarea, .shared-ta { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--text); font: 400 .95rem/1.4 var(--sans); resize: vertical; }
.share-replies { margin-top: 10px; max-width: 640px; }
.share-replies summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.share-reply { margin: 6px 0 0 12px; color: var(--aa-text-2, #b8b2a6); }
.shared-card { max-width: 1180px; margin: 10px auto 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(124,196,255,.06); }
.shared-h { margin: 0 0 8px; }
.shared-note { margin: 0 0 10px; padding: 8px 12px; border-left: 3px solid var(--amber, #ffb347); font-size: 1.05rem; }
.shared-row { display: flex; flex-wrap: wrap; gap: 8px; }
.shared-ta { margin: 10px 0 6px; }
.shared-msg { margin: 8px 0 0; min-height: 1.2em; color: var(--amber2, #ffc76b); }
@media (max-width: 560px) { .shared-card { margin: 8px 10px 0; } }

/* AA-1013 free AI note */
.aa-free { margin: 6px 10px 4px; padding: 6px 10px; border-radius: 10px; background: rgba(255,179,71,.10); color: var(--amber2, #ffc76b); font: 600 .82rem/1.35 var(--sans, system-ui); }
.aa-free a { color: inherit; text-decoration: underline; }

/* ===== POLISH1 (10-15, Todd: "get aa polished and fixed") ===== */
/* hero text had NO side gutter on phone and desktop: .v4-hero .wrap { width:100% } overrode .wrap's min(100% - 2*gutter) */
.v4-hero .wrap { width: min(100% - 2 * var(--gutter, 20px), var(--v4-max, 1180px)); margin-inline: auto;
  padding-bottom: max(clamp(44px, 8vh, 88px), calc(76px + env(safe-area-inset-bottom))); }   /* the meta line clears the network dock pill (fixed, bottom-left) */
/* cast grids: an incomplete last row sat left-aligned (David and Goliath 5/4 on desktop, 2/2/2/2/1 on phones): centre it */
.cast { display: flex !important; flex-wrap: wrap; justify-content: center; --cg: clamp(10px, 1.6vw, 18px); gap: var(--cg); }
.cast > a, .cast > div, .cast > button { flex: 0 0 calc((100% - 4 * var(--cg)) / 5); max-width: calc((100% - 4 * var(--cg)) / 5); height: auto; }
@media (max-width: 699px) { .cast > a, .cast > div, .cast > button { flex-basis: calc((100% - var(--cg)) / 2); max-width: calc((100% - var(--cg)) / 2); } }
/* footer "Launch updates": the title floated mid-height between an empty column and the form; title + line now sit together at the top */
@media (min-width: 900px) { .foot-sub { align-items: start; } .foot-sub > h2 { align-self: end; } .foot-sub > p { align-self: start; grid-row: 2; } .foot-sub > form { align-self: center; } }
/* footer / nav lists: links are inline-flex with a 44 px minimum tap width and centred content, so a short word ("FAQ") sat 8 px
   in from the others: keep the tap target, align the words */
.foot .cols a, .foot nav a, .foot li > a { justify-content: flex-start; }
/* ===== /POLISH1 ===== */
/* ===== AVATAR1 (aa-site-1017, Todd 10-17: avatars must fit their profile windows) =====
   Every character portrait is a 512 px head-and-shoulders crop with the face centred (re-cut from the films). One rule for every
   window it appears in (cast cards, the characters page, the chat header, the player's cast list): fill the frame (cover), keep the
   face on the focal point, never stretch, black behind it (no letterbox colour, no stretched edge). */
img[src*="/avatars/"] { object-fit: cover; object-position: 50% 40%; background: #000; aspect-ratio: 1 / 1; height: auto; }
.cast img, .who img, .who-img, .sheet-head .who-img { object-fit: cover; object-position: 50% 40%; background: #000; }
/* ===== /AVATAR1 ===== */
/* ===== BILLING1 (aa-site-1017): pricing cards, credit packs, the embedded-checkout dialog, the film unlock card, account boxes ===== */
.aa-prices { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin: 18px 0 8px; }
.aa-price { padding: 22px 20px; display: flex; flex-direction: column; gap: 6px; }
.aa-price .big { font-size: 2.2rem; font-weight: 700; line-height: 1.1; }
.aa-price .big small { font-size: 1rem; font-weight: 500; opacity: .75; }
.aa-price ul { margin: 6px 0 4px; padding-left: 1.1em; }
.aa-price.aa-hot { border-color: var(--aa-amber, #ffb347); box-shadow: 0 0 0 1px var(--aa-amber, #ffb347); }
.aa-packs { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); margin: 10px 0 16px; }
.aa-pack { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 64px; }
.aa-pack span { font-size: .95rem; opacity: .85; }
.aa-pay-net, .ff-net { font-size: .9rem; opacity: .8; margin-top: 10px; }
.acc-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin: 16px 0; }
.acc-box { padding: 18px; } .acc-box h2 { font-size: 1.25rem; margin: 0 0 8px; }
.acc-hist { width: 100%; border-collapse: collapse; font-size: .95rem; } .acc-hist td { padding: 6px 4px; border-bottom: 1px solid var(--aa-line, rgba(255,255,255,.12)); }
.aa-sponsor { padding: 20px; display: grid; gap: 14px; max-width: 640px; }
.aa-pay { position: fixed; inset: 0; z-index: 2147483600; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.72); }
.aa-pay.on { display: flex; }
html.aa-pay-open { overflow: hidden; }
html.aa-pay-open #netdock { display: none !important; }   /* the network dock (z 2147482000) never covers the payment window */
.aa-pay-box { background: var(--aa-card, #12141d); color: var(--aa-text, #f3efe6); width: min(100%, 560px); max-height: calc(100dvh - 32px); overflow: auto; border-radius: 18px; padding: 16px 16px 20px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.aa-pay-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.aa-pay-top h2 { font-size: 1.15rem; margin: 0; }
.aa-pay-x { min-width: 44px; min-height: 44px; border: 0; border-radius: 12px; background: transparent; color: inherit; font-size: 28px; line-height: 1; cursor: pointer; }
.aa-pay-line { font-size: .9rem; opacity: .8; margin: 4px 0 6px; } .aa-pay-msg { min-height: 1.2em; margin: 0 0 8px; }
.aa-pay-mount { background: #fff; border-radius: 12px; min-height: 120px; }
.ff-unlock .ff-row { flex-wrap: wrap; }
.ctc-paybtn { min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 0; background: var(--aa-amber, #ffb347); color: #0b0d14; font-weight: 600; cursor: pointer; margin: 6px 6px 0 0; }
/* ===== /BILLING1 ===== */
/* ===== STUDIO2 (aa-site-1017) ===== */
.st-products { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin: 18px 0; }
.st-prod { text-align: left; padding: 18px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; color: inherit; font: inherit; min-height: 44px; }
.st-prod.on { border-color: var(--aa-amber, #ffb347); box-shadow: 0 0 0 1px var(--aa-amber, #ffb347); }
.st-chat { padding: 16px; margin: 16px 0; } .st-chat textarea, .st-shots textarea, .st-shots input, .st-opts select { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: #12141d; color: inherit; font: inherit; }
.st-log { max-height: 260px; overflow: auto; display: grid; gap: 8px; margin: 8px 0; } .st-m { margin: 0; padding: 8px 12px; border-radius: 12px; } .st-u { background: rgba(255,179,71,.15); justify-self: end; } .st-c { background: rgba(255,255,255,.06); }
.st-opts { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: 10px 0; } .st-opts label { display: inline-flex; gap: 6px; align-items: center; min-height: 44px; }
.st-shots { display: grid; gap: 10px; padding: 0; list-style: none; } .st-shots li { padding: 14px; display: grid; gap: 8px; } .st-shot-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .st-shot-h input { width: 80px; }
.st-price { padding: 16px; margin: 14px 0; } .st-lines { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 4px; } .st-lines li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed rgba(255,255,255,.12); padding: 4px 0; }
.st-grid, .st-gallery { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.st-step, .st-gallery figure { padding: 10px; margin: 0; display: grid; gap: 6px; } .st-step video, .st-step img, .st-gallery video { width: 100%; border-radius: 10px; background: #000; } .st-step audio { width: 100%; }
/* ===== /STUDIO2 ===== */

/* NET-6 (10-17): labels never touch or read as one word. The network footer's group heading gets its own line; every link is its own
   flex item with a 14px gap; short site names never wrap inside. Selectors outrank the inline netfoot <style>. */
footer.foot nav.netfoot div.netfoot-g { display: block; margin: 0 0 14px; }
footer.foot nav.netfoot h3.netfoot-gh { display: block; margin: 0 0 8px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
footer.foot nav.netfoot ul.netfoot-l { display: flex; flex-wrap: wrap; gap: 8px 16px; }
footer.foot nav.netfoot ul.netfoot-l li { display: block; margin: 0; }
footer.foot nav.netfoot a { white-space: nowrap; display: inline-block; padding: 4px 0; }
.foot .cols ul { display: flex; flex-direction: column; gap: 8px; }
.foot .prod > * { min-width: 0; }
/* NET-7: /subscribe, /deals, subscribed state */
.aa-subbed-line { margin: 0; }
.aa-subbed-line a { margin-left: .2em; }
.aa-subpage { max-width: 560px; margin-top: 22px; }
.aa-sublist { margin: 22px 0 0; padding-left: 1.2em; display: grid; gap: 6px; color: var(--aa-muted, inherit); }
.aa-deals { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); margin-top: 24px; }
.aa-deal { display: flex; flex-direction: column; gap: 8px; }
.aa-deal h2 { font-size: 1.1rem; margin: 0; }
.aa-deal .aa-deal-price { font-size: 1.6rem; font-weight: 700; }
.aa-deal .aa-deal-end { font-size: .85rem; opacity: .75; }
.aa-deal .btn { margin-top: auto; align-self: flex-start; }
.aa-deals-sub { max-width: 560px; margin-top: 28px; }
.aa-deals-sub h2 { font-size: 1.1rem; margin: 0 0 10px; }
/* NET-6 header: every top-nav link box sits 8px+ from the next (pills keep their own padding); between 861 and 1180 px FAQ and Contact
   live in the footer (and the phone menu) so the row never crowds or runs into the brand */
@media (min-width: 861px) { .top .nav { gap: 8px; } }
@media (min-width: 1181px) { .top .nav a { padding: 10px 10px; } }
@media (min-width: 861px) and (max-width: 1180px) { .top .nav a { padding: 10px 6px; } .top .nav a[href="/faq"], .top .nav a[href="/contact"] { display: none; } }

/* NOTIFY1: the network bell sits beside the theme button; hidden until bell.js mounts it for a signed-in user */
.top .net-bell:empty { display: none; }
.top .net-bell { margin-left: 8px; }

/* AVATAR2: Animated / Realistic switch + the talking clip card in the chat */
.aa-seg { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--aa-wash, rgba(255,255,255,.06)); border: 1px solid var(--aa-line, rgba(255,255,255,.12)); vertical-align: middle; }
.aa-seg-b { appearance: none; border: 0; background: transparent; color: var(--aa-muted, #b9bdc9); font: 600 .82rem/1 var(--aa-sans, inherit); padding: 9px 14px; min-height: 36px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.aa-seg-b[aria-pressed="true"] { background: var(--aa-amber, #ffb347); color: #14110b; }
.aa-seg-b:focus-visible { outline: 2px solid var(--aa-amber, #ffb347); outline-offset: 2px; }
.ctc .ctc-who .aa-seg { margin-top: 6px; }
.ctc .ctc-who .aa-seg-b { padding: 6px 10px; min-height: 30px; font-size: .74rem; }
.aa-tv { display: flex; justify-content: center; padding: 8px 12px 4px; }
.aa-tv[hidden] { display: none; }
.aa-tv video { width: min(220px, 46vw); aspect-ratio: 1 / 1; border-radius: 18px; background: #000; object-fit: cover; box-shadow: 0 10px 30px -12px rgba(0,0,0,.7); }
.cast-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 14px; }
.cast-head .muted { margin: 0; }
.cast-film-h { margin: 40px 0 6px; }
.scene-list .aa-seg { margin-left: 4px; }

/* PILLS1 (human tour 10-17): smaller corner pills that never cover content; both can be closed (30 days) */
.aa-install button { min-height: 36px; font-size: .85rem; }
.aa-install-go { padding: 0 4px 0 14px; }
.aa-install-x { width: 34px; font-size: 1.1rem !important; }
#tokRadio .trPill, #tokRadio .trAsk { min-height: 36px !important; padding: 0 10px 0 10px !important; font-size: 13px; }
#tokRadio .aa-radio-close { border: 0; border-left: 1px solid #ffffff26; background: none; color: #fff; width: 34px; font-size: 18px; line-height: 1; cursor: pointer; }
html.aa-radio-x #tokRadio { display: none !important; }
.foot { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
/* NET-6 header (human tour 10-17: "How it works" / "What's next" wrapped onto two lines at 1280): labels never wrap; FAQ and Contact
   move to the footer (and the phone menu) below 1400 px so the row always fits on one line */
@media (min-width: 861px) { .top .nav a { white-space: nowrap; } }
@media (min-width: 861px) and (max-width: 1399px) { .top .nav a[href="/faq"], .top .nav a[href="/contact"] { display: none; } }
@media (min-width: 1181px) and (max-width: 1399px) { .top .nav a { padding: 10px 8px; } }
@media (min-width: 861px) and (max-width: 1099px) { .top .nav a[href="/education"], .top .nav a[href="/whats-next"] { display: none; } }
/* AVATAR2 dock chat: the talking clip is picture-in-picture on the film (top-right), the switch is a button in the dock row */
.aa-tv.aa-pip { position: absolute; top: 12px; right: 12px; z-index: 6; padding: 0; pointer-events: none; }
.aa-tv.aa-pip video { width: clamp(118px, 24%, 260px); border-radius: 16px; border: 2px solid rgba(255,255,255,.55); }
.ctc .aa-style-fb { white-space: nowrap; font-weight: 700; }
.ctc .aa-style-fb[aria-pressed="true"] { color: #ffb347; }
@media (max-width: 560px) { .ctc .aa-style-fb .ctc-lbl { display: none; } }
.ctc .aa-style-fb svg { flex: none; }

/* SOON1: buy buttons while payments are off */
.aa-soon { opacity: .65; cursor: default; }
/* GRID1 (grid-centering audit 10-17): a short last row is centred, never left-hanging. Cards keep one width per grid;
   flex + wrap + centre with a fixed basis and a max width (same look as before on full rows) */
.v4-grid { display: flex; flex-wrap: wrap; justify-content: center; }
.v4-grid > * { flex: 1 1 300px; max-width: calc((100% - 2 * clamp(14px, 2vw, 24px)) / 3); min-width: min(100%, 300px); }
@media (max-width: 1040px) { .v4-grid > * { max-width: calc((100% - clamp(14px, 2vw, 24px)) / 2); } }
@media (max-width: 660px) { .v4-grid > * { max-width: 100%; } }
.aa-deals { display: flex; flex-wrap: wrap; justify-content: center; }
.aa-deals > * { flex: 1 1 260px; max-width: 340px; }
.aa-prices { display: flex; flex-wrap: wrap; justify-content: center; }
.aa-prices > * { flex: 1 1 260px; max-width: 360px; }
.aa-packs { display: flex; flex-wrap: wrap; justify-content: center; }
.aa-packs > * { flex: 1 1 150px; max-width: 220px; }
@media (min-width: 760px) { .cast-wide { display: flex; flex-wrap: wrap; justify-content: center; } .cast-wide > * { flex: 0 1 calc(50% - 9px); } }
/* GRID1b: one card width per grid, the last row centred */
.aa-deals > * { flex: 0 1 280px; max-width: none; }
.aa-prices > * { flex: 0 1 340px; max-width: none; }
@media (min-width: 760px) { .cast-wide > * { flex: 0 0 calc(50% - 9px); min-width: 0; } }
/* DOCK1 (10-17): the fixed network dock (bottom-left, ~60px incl. its margin) never sits over the hero's last row at first view */
.v4-hero .wrap { padding-bottom: max(96px, clamp(44px, 8vh, 88px)); }
@media (max-width: 699px) { .v4-hero .wrap { padding-bottom: 84px; } }

/* ================= MOBILE1 (Todd 10-17: "perfect on mobile"; BROADCAST-MOBILE addendum) =================
   Phones (<= 640px): 20px gutters, 56px section rhythm, H1 30-34 / H2 22-26, body 16/1.55, eyebrows >= 12px, cards r16 p18,
   buttons >= 48px with a full-width primary CTA, tap targets >= 44px, footer text >= 14px, balanced footer link columns. */
@media (max-width: 640px) {
  :root { --gutter: 20px; --v4-h1: clamp(30px, 8.4vw, 34px); --v4-h2: clamp(22px, 6.4vw, 26px); --v4-sec: 56px; --aa-section: 56px; }
  body { font-size: 16px; line-height: 1.55; }
  h1 { font-size: clamp(30px, 8.4vw, 34px); line-height: 1.08; }
  h2 { font-size: clamp(22px, 6.4vw, 26px); line-height: 1.15; }
  h3 { font-size: 19px; line-height: 1.25; }
  .section { padding-block: 56px; }
  .eyebrow { font-size: 12px; letter-spacing: .14em; margin-bottom: 12px; }
  .lede, .v4-hero .lede { font-size: 17px; line-height: 1.55; }
  .card { border-radius: 16px; padding: 18px; }
  .v4-grid, .cast-wide, .aa-deals, .aa-prices { gap: 14px; }
  .btn { min-height: 48px; font-size: 16px; }
  .v4-hero .cta-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .v4-hero .cta-row .btn { width: 100%; }
  .v4-meta { gap: 6px 18px; font-size: 15px; }
  /* tap targets */
  .aa-seg-b { min-height: 44px; padding: 10px 16px; }
  .chip { min-height: 44px; }
  input[type="email"], input[type="text"], input[type="number"], select, textarea { min-height: 48px; font-size: 16px; }
  button[aria-label="Close"], .aa-wn-x, [data-wn-close], .whats-new button, .aa-install-x { min-width: 44px; min-height: 44px; }
  .foot, .foot p, .foot li, .foot a, .foot .prod { font-size: 14px; }
  .foot .cols { gap: 28px; }
  footer.foot nav.netfoot ul.netfoot-l { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
  footer.foot nav.netfoot a { padding: 10px 0; display: block; }
  .foot nav ul a { display: inline-block; padding: 10px 0; }
}
/* the film player's own controls and the greeting card: >= 44px targets, >= 14px text on phones */
@media (max-width: 640px) {
  .ct-ctl button, .pc-btn, .player-controls button, [class*="ctl"] > button { min-width: 44px; min-height: 44px; }
  .rt-greet p, .rt-greet, [class*="greet"] p { font-size: 14px; }
}
/* MOBILE1b (mobile sweep 10-17: H1 43px / H2 32px, footer 2100-2800px tall, 142px text inset on /characters, 36px buttons) */
@media (max-width: 640px) {
  html body main h1, html body .page-head h1, html body .v4-hero h1 { font-size: clamp(30px, 8.4vw, 34px); line-height: 1.08; }
  html body main h2 { font-size: clamp(22px, 6.4vw, 26px); line-height: 1.15; }
  html body main h3 { font-size: 19px; }
  /* /characters cards: portrait above the text, full-width text */
  .card.who { display: block; }
  .card.who > img { width: 72px; height: 72px; margin: 0 0 12px; }
  /* footer: compact, balanced */
  .foot .foot-sub { padding-bottom: 8px; }
  .foot .foot-sub p.muted { display: none; }
  .foot .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  .foot .cols > div:first-child { grid-column: 1 / -1; }
  .foot .cols > div:first-child p { margin: 8px 0 0; }
  .foot .cols ul { gap: 0; }
  .foot nav ul a { padding: 9px 0; }
  .foot .prod { gap: 6px; margin-top: 18px; padding-top: 14px; }
  .foot .prod > * { font-size: 13.5px; line-height: 1.45; }
  footer.foot nav.netfoot.aa-nf-shut div.netfoot-g { display: none !important; }   /* the network dock injects its own netfoot grid */
  .aa-nf-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; margin-top: 4px; padding: 0 4px; border: 0; border-top: 1px solid var(--aa-line, rgba(255,255,255,.12)); background: none; color: inherit; font: 600 15px/1 var(--aa-sans, inherit); cursor: pointer; }
  .aa-nf-toggle span { opacity: .7; font-weight: 500; }
}
@media (min-width: 641px) { .aa-nf-toggle { display: none; } }
@media (max-width: 640px) {
  /* the invisible human check keeps no empty box between the email field and the consent line */
  .subform .ts-box { min-height: 0 !important; margin: 0 !important; }
  .subform .ts-box:empty { display: none; }
  .subform .consent { margin: 10px 0 12px; line-height: 1.5; font-size: 14px; }
  .foot .cols ul li { margin: 0; }
  .foot nav ul a { padding: 7px 0; min-height: 40px; display: flex; align-items: center; }
}
/* GRID2 (tester LOW 10-17): share buttons and the wrapped player bar centre their short last row */
.share-row { justify-content: center; }
.ct-root.pc-two .ct-bar { justify-content: center; }
@media (max-width: 640px) {
  .ct-bar .ct-b { min-width: 44px; min-height: 44px; }
  .aa-deal .aa-deal-end { font-size: 14px; }
}
/* MOSQ1: the talking card fades in on its first playing frame (no flash); the mosquito duo is a wide 2:1 card */
.aa-tv { transition: opacity .25s ease; }
.aa-tv.aa-wide video { aspect-ratio: 2 / 1; width: min(420px, 86vw); }
.aa-tv.aa-pip.aa-wide video { width: clamp(220px, 46%, 420px); }
/* GRID2b (tester NO-GO 10-17): every wrapped row in the player bar and the share row is centred; the share row's status line is
   centred under it (and gone when empty); 641-1023px footer = brand on top, Explore | Help side by side (no empty column) */
.ct-root .ct-bar { justify-content: center; }
.share-row { justify-content: center !important; }
.share-row > span:last-child { flex-basis: 100%; text-align: center; }
.share-row > span:last-child:empty { display: none; }
@media (min-width: 641px) and (max-width: 1023px) { .foot .cols { grid-template-columns: 1fr 1fr; } .foot .cols > div:first-child { grid-column: 1 / -1; } }

/* PERF1: no layout shift from late content: the What's-new bar floats under the header; /deals keeps its space until the offers load */
.aa-wn.aa-wn-float { position: fixed; top: calc(72px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); width: min(1180px, calc(100% - 24px)); margin: 0; z-index: 60; background: var(--aa-bg, #0b0d14); box-shadow: 0 10px 30px -12px rgba(0,0,0,.6); }
@media (max-width: 560px) { .aa-wn.aa-wn-float { top: calc(68px + env(safe-area-inset-top, 0px)); } }
[data-aa-deals]:not(.aa-loaded) { min-height: 100vh; }
/* AAFIX2 10-29: phone tap targets >= 44 px in the footer (walk: 13-22 links per page were 17-20 px tall) */
@media (max-width: 760px) { footer a, footer button, .foot a, footer.foot nav.netfoot a, .foot .prod a { display: inline-flex !important; align-items: center; min-height: 44px !important; min-width: 44px; box-sizing: border-box; } footer.foot nav.netfoot ul.netfoot-l, .foot ul { gap: 0 16px !important; } }

/* ===== AAFIX4 (11-03, Todd: "aa looks bad" / "get animatedalive fixed") =====
   1. Light theme: the v4 layer and the legacy names (--text, --bg, --line...) kept their dark values in light mode, so card titles,
      share buttons, the What's-new bar and the footer sign-up went white-on-cream or dark-on-dark. Light values set explicitly.
   2. The hero and the film stage stay the dark cinema in both themes (their words and the ghost button stay light).
   3. The What's-new bar no longer follows the page down (it covered the top of every screen): it sits under the header and scrolls away. */
:root[data-theme="light"] {
  --bg: #fbf6ec; --bg2: #efe9dc; --panel: #ffffff; --line: #e2dacb; --text: #141826; --muted: #4f566b; --amber2: #a8480a; --sky: #1f5f99;
  --v4-bg: #fbf6ec; --v4-bg2: #efe9dc; --v4-card: #ffffff; --v4-card2: #fffcf6; --v4-line: rgba(20,24,38,.12);
  --v4-ink: #141826; --v4-ink2: #2c3245; --v4-mute: #4f566b; --v4-gold: #9a4208; --v4-gold2: #9a4208;
}
:root[data-theme="light"] .v4-card { box-shadow: 0 1px 2px rgba(20,24,38,.06), 0 18px 40px -28px rgba(20,24,38,.35); }
:root[data-theme="light"] .v4-card .soon { background: rgba(255,255,255,.92); color: #9a4208; border-color: rgba(154,66,8,.35); }
:root[data-theme="light"] .eyebrow { color: #9a4208; }
:root[data-theme="light"] .sr-btn { background: #fff; border-color: #d8cfbe; color: #141826; }
:root[data-theme="light"] .aa-wn { background: #fff; border-color: #e2dacb; }
:root[data-theme="light"] .aa-wn-more { color: #9a4208; }
:root[data-theme="light"] .chip { color: #141826; }
/* the hero is always the dark cinema */
.v4-hero { --v4-bg: #07080d; --v4-ink: #f4efe4; --v4-ink2: #cfc8b9; --v4-gold: #f2b33d; --v4-gold2: #ffd27a; --text: #f3efe6; --muted: #b3b9cb; }
.v4-hero .eyebrow, :root[data-theme="light"] .v4-hero .eyebrow { color: #ffd27a; }
:root[data-theme="light"] .v4-hero .btn-ghost { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); color: #fff; }
:root[data-theme="light"] .v4-hero .btn-ghost:hover { background: rgba(255,255,255,.16); color: #fff; }
/* the What's-new bar: under the header, scrolls away with the page (still no layout shift: it overlays, it does not push) */
.aa-wn.aa-wn-float { position: absolute; }
/* phone: one clear line, no wrapped "+4 more" orphan */
@media (max-width: 560px) { .aa-wn-a { font-size: .9rem; line-height: 1.35; } }
/* "Watch the full film first (recommended)" no longer breaks onto two cramped lines */
.watch .btn, .watch button.btn { white-space: normal; text-wrap: balance; line-height: 1.2; padding-block: 10px; }
/* AAFIX4b: payments-off buttons keep their product name ("Get Plus monthly: opens soon"); packs keep credits + price with a small tag */
.aa-soon-tag { display: block; font-style: normal; font-size: .74rem; letter-spacing: .04em; opacity: .85; margin-top: 2px; }
/* the network footer (now on every page) sits inside the footer rhythm */
footer.foot nav.netfoot { max-width: var(--v4-max, 1240px); }/* ===== /AAFIX4 ===== */

/* AA-FIX-7 11-03 (CLS 0.18-0.34 at 1440 on /watch, /david-and-goliath): the wide film box is 16:9 from the first paint and through the
   video swaps (a fresh <video> has no size until its metadata loads); phones in portrait keep the min-height rule above */
@media not all and (orientation: portrait) and (max-width: 699px) {
  .stage:not(.tall) > video, .stage.wide-built:not(.tall) video { aspect-ratio: 16 / 9; }
  .stage:not(.tall):empty { aspect-ratio: 16 / 9; max-height: calc(78svh + 48px); }
}

/* ===== AAFIX5B (11-04): axe target-size on stand-alone "more" links (home "Who they are...", "All questions"); brand on one line at desktop ===== */
main p > a:only-child:not(.btn) { display: inline-block; padding: 3px 0; }
@media (min-width: 1100px) { header.top .brand-word { white-space: nowrap; } }
/* ===== /AAFIX5B ===== */

/* ===== AAFIX5B-D (11-04, Todd): David and Goliath shows "Coming soon" (no player) ===== */
.aa-soon-badge { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 6px 12px; border-radius: 999px; background: var(--amber, #ffb347); color: #1a1206; font-weight: 800; font-size: .85rem; letter-spacing: .02em; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.aa-soon-frame, .v4-film.aa-soon { position: relative; }
.aa-soon-frame img { display: block; width: 100%; height: auto; border-radius: inherit; }
.aa-soon-tag { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 3px 10px; border-radius: 999px; background: rgba(255,179,71,.16); color: #b45309; font: 700 .78rem/1.4 Inter, system-ui, sans-serif; letter-spacing: .02em; }
:root:not([data-theme="light"]) .aa-soon-tag { color: #ffcf8a; }
/* ===== /AAFIX5B-D ===== */
/* AAFIX5B-E: "Coming soon" tag contrast (axe light 3.4:1 -> ~8:1) */
.aa-soon-tag { color: #7c2d12; background: #fde3bb; opacity: 1; }
:root:not([data-theme="light"]) .aa-soon-tag { color: #ffd59e; background: rgba(255,179,71,.18); }