/* SEG_F4ULT site components. Tokens only (no hex here: the tokens test guards it), no nesting, no !important. */

/* ── Beta form (D12, D22, D25, D40) ── */
.signup { display: grid; gap: var(--space-2); max-width: 32rem; position: relative; }
.signup__label { font: 500 var(--fs-small)/1.3 var(--font-sans); color: var(--text-secondary); }
.signup__row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.signup__input { flex: 1 1 14rem; min-width: 0; min-height: 44px; padding: 0 12px;
  background: var(--bg-void); color: var(--text-primary);
  border: 1px solid var(--text-muted); border-radius: var(--radius-ctrl);
  font: 400 16px/1.2 var(--font-sans); }
.signup__input::placeholder { color: var(--text-muted); opacity: 1; }
.signup__input[aria-invalid="true"] { border-color: var(--text-primary); border-width: 2px; }
.signup__button { flex: 0 0 auto; }
.signup[aria-busy="true"] .signup__button { cursor: progress; }
.signup__status:empty { display: none; }
.signup__status, .signup-msg { margin: 0; font-size: var(--fs-small); color: var(--text-primary);
  padding: var(--space-2) var(--space-3); border: 1px solid var(--text-muted); border-radius: var(--radius-ctrl); }
.signup__status[data-state="ok"], .signup-msg[data-code="ok"] { border-color: var(--live); }
.signup-msg { display: none; }
.signup-msg:target:not([hidden]) { display: block; }
.signup__consent { margin: 0; font-size: var(--fs-small); color: var(--text-muted); }
.signup__consent a { color: var(--text-secondary); }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 360px) { .signup__button { flex: 1 1 100%; } }

/* ── Skip link: off screen until focused ── */
.skip { position: absolute; left: var(--space-4); top: -100px; z-index: 10; padding: 10px 14px;
  background: var(--live); color: #111; font-weight: 500; border-radius: var(--radius-ctrl); text-decoration: none; }
.skip:focus { top: var(--space-4); }
.skip:hover { color: #111; }

/* ── App icon as the app (iOS squircle, D13) ── */
.app-icon { border-radius: 22.37%; }

/* ── "Footage coming" HUD placeholder (D16; used by the phone stage and the /home cards) ── */
.stage--placeholder { background-color: var(--bg-void);
  background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px); background-size: 20px 20px; }
.ph-label { position: absolute; left: 0; right: 0; text-align: center; font: 500 11px var(--font-mono);
  letter-spacing: .12em; color: rgb(244 244 244 / .7); }
/* The 9:16 bracket (40% wide, 1:1.4) spans 30.25%..61.75% of the stage height: labels sit just outside it */
.ph-top { top: calc(30% - 26px); }
.ph-bottom { top: calc(62% + 12px); }

/* ── Footer (partial:footer, shared by every page); inner box = 1200 px content + padding, so the wordmark lines up with .topbar ── */
.site-footer { background: var(--bg-void); border-top: 1px solid var(--border); }
.site-footer__inner { max-width: calc(1200px + 2 * var(--space-4)); margin-inline: auto; padding: var(--space-6) var(--space-4);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.site-footer .wordmark { margin: 0; }
.site-footer__links { display: flex; align-items: center; gap: var(--space-2); }
.site-footer__links a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 var(--space-2);
  color: var(--text-secondary); font-size: var(--fs-small); }
.site-footer__links a:hover { color: var(--text-primary); }
.icon-link { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; color: var(--text-secondary); }
.icon-link:hover { color: var(--text-primary); }
.icon-link svg { fill: currentColor; }

/* ── Top bar (D45): sticky on every page; the header partial (brand) plus a page-specific nav ── */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: 64px; padding-inline: max(var(--space-4), calc((100% - 1200px) / 2));
  background: var(--bg-primary); border-bottom: 1px solid var(--border); }
.topnav { display: flex; align-items: center; gap: var(--space-1); }
.topnav__link { display: none; align-items: center; min-height: 44px; padding: 0 var(--space-3);
  font: 400 14px var(--font-sans); color: var(--text-secondary); text-decoration: none; }
.topnav__link:hover { color: var(--text-primary); }
.topnav .btn-primary { margin-left: var(--space-2); }
@media (min-width: 720px) { .topnav__link { display: inline-flex; } }
/* Anchors, the form and anything scrolled into view for focus clear the sticky bar (WCAG 2.4.11) */
html { scroll-padding-top: 80px; }

/* ── Buttons: secondary and small (the primary lives in base.css) ── */
.btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 1ch; min-height: 44px; padding: 0 18px;
  background: transparent; color: var(--text-primary); border: 1px solid var(--text-muted); border-radius: var(--radius-ctrl);
  font: 500 15px/1.2 var(--font-sans); letter-spacing: -0.01em; text-decoration: none; cursor: pointer; }
.btn-ghost:hover { color: var(--text-primary); border-color: var(--text-primary); }
.btn-sm { min-height: 44px; padding: 0 14px; font-size: 14px; }

/* ── Header (partial:header, brand link only) ── */
.site-header { display: flex; align-items: center; }
.site-header__brand { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 44px; text-decoration: none; }
.site-header__brand .app-icon { width: 28px; height: 28px; }
.site-header__brand:hover .wordmark { color: var(--text-primary); }

/* ── Effect cards (D17, D18): placeholder and video states share the .stage frame ── */
.fx-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.fx-card { min-width: 0; background: var(--bg-surface); border: 1px solid var(--border-light); border-top: 2px solid var(--fx); padding: var(--space-3); }
.fx-card .stage { border: 0; }
.fx-name { margin: var(--space-3) 0 0; font-size: var(--fs-h3); line-height: 1.3; }
.fx-line { margin: var(--space-1) 0 0; font-size: var(--fs-small); line-height: 1.5; color: var(--text-secondary); }
.fx-chain { margin: var(--space-2) 0 0; font: 500 12px/1.4 var(--font-mono); letter-spacing: .04em; color: var(--text-muted); }
.fx-card--feature .bracket { width: 30%; }
.fx-card--feature .bracket.b1 { left: 38%; top: 43%; }
.fx-card--feature .bracket.b3 { left: 62%; top: 49%; }
.fx-video { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* Without scripting Chrome draws its own controls on a frameless video, which hide the poster image under it. */
@media (scripting: none) { .fx-video { display: none; } }
.fx-card .stage .ticks { z-index: 1; }
.fx-play { position: absolute; z-index: 3; left: 50%; top: 50%; translate: -50% -50%; min-width: 44px; min-height: 44px;
  max-width: calc(100% - 24px); padding: 8px 14px; background: rgba(23, 23, 23, .85); color: var(--text-primary);
  border: 1px solid var(--text-muted); border-radius: var(--radius-ctrl); font: 500 14px/1.3 var(--font-sans); cursor: pointer; }
.fx-play:hover { border-color: var(--text-primary); }
.fx-play[hidden] { display: none; }

/* ── Pause loops (WCAG 2.2.2, D43.1): shown by media.js only when loops autoplay ── */
.loops-toggle { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 14px;
  background: transparent; color: var(--text-primary); border: 1px solid var(--text-muted); border-radius: var(--radius-ctrl);
  font: 500 14px var(--font-sans); cursor: pointer; }
.loops-toggle::before { content: ''; width: 10px; height: 10px; background:
  linear-gradient(90deg, currentColor 0 3px, transparent 3px 7px, currentColor 7px 10px); }
.loops-toggle[aria-pressed="true"]::before { background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.loops-toggle:hover { border-color: var(--text-primary); }
.loops-toggle[hidden] { display: none; }

/* ── Coming to the App Store (D7): our own element, never Apple's badge ── */
.store-soon { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px;
  border: 1px solid var(--text-muted); border-radius: var(--radius-panel); color: var(--text-primary); text-decoration: none;
  font: 500 15px/1.2 var(--font-sans); }
.store-soon small { display: block; font: 400 11px/1.3 var(--font-sans); color: var(--text-muted); }
.store-soon:hover { color: var(--text-primary); border-color: var(--text-primary); }
.store-soon__icon { flex: none; }

/* ── Official badge, only once links.json appStore is a URL (apply-links.mjs writes it): unmodified, 40 px tall,
   clear space of a quarter of its height; Apple's legal line once in the footer ── */
.store-badge { display: inline-block; padding: 10px; margin: calc(var(--space-6) - 10px) 0 0 -10px; }
.store-badge img { height: 40px; width: auto; }
.apple-legal { flex-basis: 100%; margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-muted); }

/* ── Hero (D45): hero line with a Wretched rule, sub line, two buttons; the real app in an iPhone beside or under it ── */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10);
  padding: var(--space-10) max(var(--space-4), calc((100% - 1200px) / 2)) var(--space-12); }
.sys { margin: 0 0 var(--space-6); font: 500 var(--fs-hud)/1 var(--font-mono); letter-spacing: var(--tracking-wide); color: var(--text-muted); }
.hero__title { max-width: 16ch; text-wrap: balance; }
.hero__title::after { content: ''; display: block; width: 120px; height: 2px; margin-top: var(--space-6); background: var(--live); }
.hero__lead { margin: var(--space-6) 0 0; max-width: 40ch; line-height: 1.5; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-8) 0 0; }
.hero__device { display: grid; justify-items: center; }
@media (min-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr) 340px; align-items: center; column-gap: clamp(48px, 7vw, 128px);
    padding-block: var(--space-12) clamp(var(--space-12), 6vw, 96px); }
}

/* ── iPhone frame drawn in CSS (D47): bezel, status bar with the island, a 393:852 screen for the real app ── */
.iphone { position: relative; width: min(100%, 300px); padding: 9px; border-radius: 46px; background: #050505;
  border: 1px solid var(--border-emphasis); }
.iphone::before, .iphone::after { content: ''; position: absolute; width: 3px; border-radius: 2px; background: var(--border-emphasis); }
.iphone::before { left: -4px; top: 22%; height: 9%; }
.iphone::after { right: -4px; top: 28%; height: 14%; }
.iphone__status { display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 0 22px 0 26px;
  border-radius: 37px 37px 0 0; background: var(--gutter); font: 500 12px/1 var(--font-sans); color: var(--text-primary); }
.iphone__island { width: 30%; height: 20px; border-radius: 10px; background: #050505; }
.iphone__icons { display: flex; align-items: flex-end; gap: 2px; }
.iphone__icons i { width: 3px; height: 6px; border-radius: 1px; background: var(--text-primary); }
.iphone__icons i + i { height: 8px; }
.iphone__icons i + i + i { height: 10px; }
.iphone__icons b { width: 18px; height: 9px; margin-left: 4px; border: 1px solid var(--text-secondary); border-radius: 3px;
  background: linear-gradient(90deg, var(--text-primary) 0 70%, transparent 70%) content-box; padding: 1px; }
.iphone__screen { position: relative; aspect-ratio: 393 / 852; overflow: hidden; border-radius: 0 0 37px 37px; background: var(--gutter); }
.iphone--hero { width: min(100%, 320px); }
@media (min-width: 960px) { .iphone--hero { width: 340px; } }

/* ── Computer frame for the desktop still ── */
.window { border: 1px solid var(--border-emphasis); border-radius: var(--radius-panel); background: var(--gutter); overflow: hidden; }
.window__bar { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-bottom: 1px solid var(--border); background: var(--bg-void); }
.window__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-emphasis); }
.window__url { flex: 1; min-width: 0; margin-left: var(--space-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 500 11px/1 var(--font-mono); letter-spacing: .04em; color: var(--text-muted); }
.window__screen { position: relative; aspect-ratio: 1440 / 900; }

/* ── App media inside the frames (media-slots.mjs: .app-video, .app-shot, .app-shot--missing) ── */
.app-video, .app-shot { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: top center; }
.app-shot--missing { position: absolute; inset: 0; background-color: var(--bg-void);
  background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px); background-size: 16px 16px; }
.app-shot--missing::before { content: '● STANDBY'; position: absolute; left: 10px; top: 10px; padding: 3px 6px;
  font: 500 10px/1.3 var(--font-mono); letter-spacing: .12em; color: var(--text-secondary); background: rgba(24, 25, 27, .72); }
.app-shot--missing::after { content: 'CAPTURE COMING'; position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; text-align: center;
  font: 500 11px/1 var(--font-mono); letter-spacing: .12em; color: rgb(244 244 244 / .7); }
.iphone__screen .fx-play { z-index: 3; }

/* ── Numbered section labels (D45, D46): "01 ——— EFFECTS", uppercase in the HTML, number in Wretched ── */
.sec-label { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 var(--space-8);
  font: 500 13px/1 var(--font-mono); letter-spacing: var(--tracking-wide); color: var(--text-muted); }
.sec-label__num { font: 700 clamp(32px, 3vw + 20px, 48px)/1 var(--font-mono); letter-spacing: 0; color: var(--live); }
.sec-label__rule { letter-spacing: 0; color: var(--border-emphasis); }

/* Poster images under the loops (media-slots.mjs): cards lazy, the hero eager at high priority. The video paints
   over them once it has a frame; until then (preload="none", reduced motion, no JS) the image is what shows. */
.fx-poster, .app-poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.app-poster { object-position: top center; }
.fx-video, .app-video { position: relative; }