/* Suki Audios marketing site.
   Warm cream, ink type, white cards and one loud colour: Suki blue carries every primary action.
   Mobile first: every rule works at 320px, and the media queries only add. */

:root {
  --cream: #f8f5f2;
  --cream-2: #efe8e0;
  --card: #ffffff;
  --ink: #131415;
  --ink-2: #3a3a3b;
  --muted: #666666;
  --hair: rgba(19, 20, 21, 0.07);
  --hair-2: rgba(19, 20, 21, 0.13);
  --accent: #1d4ed8;          /* Suki blue: buttons, accent type, glows. 6.7:1 with white, 6.1:1 on cream */
  --accent-ink: #1d4ed8;
  --accent-hover: #1a43bd;
  --accent-light: #7aa2ff;    /* accent on the dark band: 7.9:1 */
  --accent-soft: rgba(29, 78, 216, 0.10);
  --night: #0b0b0c;
  --night-2: #161719;
  --night-hair: rgba(255, 255, 255, 0.10);
  --good: #0e7a28;

  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 18px 42px rgba(60, 40, 25, 0.10);
  --shadow-soft: 0 10px 24px rgba(60, 40, 25, 0.08);
  --shadow-accent: 0 12px 28px rgba(29, 78, 216, 0.30);

  --r-card: 20px;
  --r-pill: 999px;
  --nav-h: 72px;
  --pad: clamp(18px, 4vw, 48px);
  --max: 1240px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-soft: cubic-bezier(.45, .05, .2, 1); /* the header compaction: slower and gentler than the snap of the rest */

  /* tokens that swap with the side (see html[data-side="editors"] below) */
  --accent-text: #1d4ed8;
  --pill-bg: #131415; --pill-fg: #ffffff;
  --phone: #131415;
  --surface-2: rgba(19, 20, 21, 0.05); --surface-3: rgba(19, 20, 21, 0.09);
  --eyebrow-bg: rgba(255, 255, 255, 0.75);
  --contact-wash: rgba(255, 255, 255, 0.6);
  --glass-a: rgba(255, 255, 255, 0.72); --glass-b: rgba(255, 255, 255, 0.44);
  --glass-rim: rgba(255, 255, 255, 0.75); --glass-line: rgba(19, 20, 21, 0.07); --glass-shadow: rgba(60, 40, 25, 0.14);
  /* the closing band and the footer follow the side: warm and light with the labels page, black with the editors page */
  --band-bg: #efe8e0; --band-fg: #3a3a3b; --band-head: #131415; --band-hair: rgba(19, 20, 21, 0.12);

  --f-display: "Anybody", "Figtree", system-ui, sans-serif;
  --f-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* THE EDITORS PAGE IS DARK, like kozumedia.com's: the same tokens with other values, so no rule needs to know
   which side it is drawing. The switch is atomic (see the side-switching hold), so no colour ever crossfades. */
html[data-side="editors"] {
  color-scheme: dark;
  --cream: #0b0b0c; --cream-2: #141517; --card: #151618;
  --ink: #ffffff; --ink-2: rgba(255, 255, 255, 0.78); --muted: rgba(255, 255, 255, 0.6);
  --hair: rgba(255, 255, 255, 0.08); --hair-2: rgba(255, 255, 255, 0.16);
  --accent-ink: #7aa2ff; --accent-text: #6f9bff; --accent-soft: rgba(122, 162, 255, 0.14);
  --night: #000000; --night-2: #111214;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 18px 42px rgba(0, 0, 0, 0.5);
  --shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.4);
  --pill-bg: #ffffff; --pill-fg: #0b0b0c;
  --surface-2: rgba(255, 255, 255, 0.07); --surface-3: rgba(255, 255, 255, 0.12);
  --eyebrow-bg: rgba(255, 255, 255, 0.06);
  --contact-wash: rgba(255, 255, 255, 0.03);
  --glass-a: rgba(28, 28, 31, 0.78); --glass-b: rgba(28, 28, 31, 0.56);
  --glass-rim: rgba(255, 255, 255, 0.16); --glass-line: rgba(0, 0, 0, 0.5); --glass-shadow: rgba(0, 0, 0, 0.55);
  --band-bg: #000000; --band-fg: rgba(255, 255, 255, 0.72); --band-head: #ffffff; --band-hair: rgba(255, 255, 255, 0.10);
}
html[data-side="editors"] .lg { filter: invert(1) brightness(1.15); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
svg, img, video { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p, figure { margin: 0; }
h1, h2, h3 { margin: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.accent { color: var(--accent-text); }
.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--pill-bg); color: var(--pill-fg); padding: 10px 16px; border-radius: 10px;
  text-decoration: none; font-weight: 700; transition: top .2s;
}
.skip:focus { top: 12px; }

/* ─── brand: the Suki tag, cut out of its black square as ink (header) and white (footer) ─── */
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.logo { height: 46px; width: auto; }
.ftr .logo { height: 64px; }

/* ─── header ───
   THE COMPACTION IS COMPOSITED, AND THE BAR IS GLASS. The bar keeps its full-width box; once the page moves its
   frosted panel (the ::before) fades in and is clipped into a floating pill (clip-path), the two groups of
   controls slide inward (transform), and the pill's rim (the ::after) fades in (opacity) only after the slide has
   landed, so the rim never crosses the logo mid-way. No width, height, padding or radius animates, so no frame
   lays anything out. The pill geometry comes from the bar's own width in container units; every piece that uses
   them is a descendant of the bar, because an element's own cqi would fall back to the viewport. */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h);
  display: flex; align-items: center;
  container-type: inline-size;
  --hw: 100cqi;
  --rest-left: max(var(--pad), calc((var(--hw) + -1240px) / 2 + var(--pad)));
  --pill-w: min(1040px, calc(var(--hw) + -40px));
  --pill-left: calc((var(--hw) + (var(--pill-w) * -1)) / 2);
  --sx: 0px; --sr: 0px;
}
/* the glass: translucent white over a blurred, saturated backdrop, with a brighter top so it reads as a surface */
.hdr::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--glass-a), var(--glass-b));
  -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8);
  border-bottom: 1px solid var(--glass-rim);
  box-shadow: 0 8px 24px var(--glass-shadow);
  opacity: 0;
  clip-path: inset(0 0 0 0 round 0);
  transition: clip-path .8s var(--ease-soft), opacity .5s var(--ease-soft);
}
.hdr.is-stuck::before { opacity: 1; }
/* the rim: a hairline of light on the pill's edge and a soft drop shadow, on its own layer so only opacity animates */
.hdr::after {
  content: ""; position: absolute; top: 12px; left: var(--pill-left); width: var(--pill-w); height: 60px; border-radius: 999px;
  pointer-events: none; opacity: 0;
  border: 1px solid var(--glass-rim);
  box-shadow: inset 0 1px 0 var(--glass-rim), inset 0 -1px 0 var(--glass-line), 0 0 0 1px var(--glass-line), 0 16px 40px var(--glass-shadow);
  transition: opacity .2s var(--ease-soft);
}
/* a restored scroll position on load must not animate the pill in */
.hdr.no-anim, .hdr.no-anim::before, .hdr.no-anim::after, .hdr.no-anim .brand, .hdr.no-anim .nav-links, .hdr.no-anim .nav-r { transition: none !important; }
.hdr .brand, .hdr .nav-links, .hdr .nav-r { transition: transform .8s var(--ease-soft); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nav-links { display: none; align-items: center; gap: 26px; margin-left: 30px; margin-right: auto; }
.nav-links a { font-weight: 600; font-size: .94rem; text-decoration: none; color: var(--ink-2); transition: color .2s; }
.nav-links a:hover { color: var(--ink); }
.nav-r { display: flex; align-items: center; gap: 10px; }
.nav-r .nav-hide-sm { display: none; }

/* ─── two pages in one document ───
   The Worker sets data-side on <html> from the address; the other side is simply not displayed, so each address
   is a complete page with no script. The switch is one frame: a View Transition where the browser has one, a
   short fade of the body where it does not. Hover transitions are held off for that frame. */
html[data-side="brands"] [data-for="editors"], html[data-side="editors"] [data-for="brands"] { display: none !important; }
/* SHARED CELLS: both variants of a block sit in the same grid cell, so the layout is the taller of the two and
   nothing on the page moves when the side changes; the other variant is invisible, not gone. */
.alt { display: grid; }
.alt > * { grid-area: 1 / 1; min-width: 0; }
.alt > .eyebrow { justify-self: start; }
.alt > .join-card { align-self: center; }
html[data-side="brands"] [data-alt="editors"], html[data-side="editors"] [data-alt="brands"] { visibility: hidden; pointer-events: none; }
/* on one column the tall form would leave the editors' join card floating in a hole, so that one cell is not
   shared below 900px: only the footer moves when the side changes there, and it is below everything */
@media (max-width: 899px) {
  .split-contact > .alt:last-child { display: block; }
  html[data-side="brands"] .split-contact > .alt:last-child > [data-alt="editors"],
  html[data-side="editors"] .split-contact > .alt:last-child > [data-alt="brands"] { display: none; }
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; animation-timing-function: ease; }
body { transition: opacity .16s ease; }
html.side-fading body { opacity: 0; }
html.side-switching .btn, html.side-switching .pill, html.side-switching .seg-btn, html.side-switching .q, html.side-switching .nav-links a,
html.side-switching .quiet, html.side-switching .ftr a, html.side-switching .hdr::before, html.side-switching .hdr::after,
html.side-switching .plus, html.side-switching .dots i, html.side-switching .lg, html.side-switching .clip, html.side-switching .disc,
html.side-switching .rbtn, html.side-switching .eyebrow, html.side-switching .seg { transition: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* the toggle in the hero */
.seg { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 22px; border-radius: var(--r-pill); background: var(--eyebrow-bg); border: 1px solid var(--hair); box-shadow: var(--shadow-soft); }
.seg-btn {
  display: inline-flex; align-items: center; height: 36px; padding: 0 15px; border-radius: var(--r-pill);
  font-weight: 700; font-size: .9rem; color: var(--muted); text-decoration: none; white-space: nowrap;
  transition: background-color .25s, color .25s;
}
.seg-btn:hover { color: var(--ink); }
html[data-side="brands"] .seg-btn[data-side="brands"], html[data-side="editors"] .seg-btn[data-side="editors"] { background: var(--pill-bg); color: var(--pill-fg); }

/* ─── pills + buttons ─── */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 18px; border-radius: var(--r-pill);
  font-weight: 700; font-size: .92rem; text-decoration: none; white-space: nowrap;
  transition: transform .18s, box-shadow .18s, background .18s;
}
.pill:hover { transform: translateY(-1px); }
.pill-ghost { background: var(--card); border: 1px solid var(--hair-2); box-shadow: var(--shadow-soft); }
.pill-ink { background: var(--pill-bg); color: var(--pill-fg); }
.pill-ink:hover { box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 58px; padding: 0 26px; border-radius: 16px; border: 0; cursor: pointer;
  font-weight: 700; font-size: 1.04rem; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
  transition: transform .18s, box-shadow .18s, background .18s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .arr { display: inline-block; transition: transform .2s; }
.btn:hover .arr { transform: translateX(4px); }
.btn-accent { background: var(--accent); color: #fff; box-shadow: var(--shadow-accent); }
.btn-accent:hover { background: var(--accent-hover); box-shadow: 0 16px 34px rgba(29, 78, 216, 0.38); }
.btn-white { background: var(--card); color: var(--ink); box-shadow: var(--shadow-soft), 0 0 0 1px var(--hair) inset; }
.btn-lg { height: 58px; padding: 0 28px; }
.btn-wide { width: 100%; }

/* ─── glows ─── */
.glow { position: absolute; pointer-events: none; z-index: 0; }
.glow-hero {
  inset: -120px -10% 0 -10%;
  background:
    radial-gradient(50% 55% at 76% 36%, rgba(29, 78, 216, 0.13), transparent 68%),
    radial-gradient(36% 40% at 100% 92%, rgba(122, 162, 255, 0.20), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
.glow-how { inset: 0; background: radial-gradient(40% 50% at 0% 30%, rgba(29, 78, 216, 0.06), transparent 70%); }

/* ─── reveal on scroll: armed only once script.js adds .js, so with no script everything is visible ─── */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ─── shared labels ─── */
.kicker { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 14px; }
.kicker-light { color: var(--accent-light); }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.18); flex: none; }

/* ═══ HERO ═══ */
.hero { position: relative; padding: calc(var(--nav-h) + 40px) 0 48px; overflow: hidden; }
.hero-grid { position: relative; z-index: 1; display: grid; gap: 44px; align-items: center; }
.hero-copy { min-width: 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 12px; border-radius: var(--r-pill);
  background: var(--eyebrow-bg); border: 1px solid var(--hair); box-shadow: var(--shadow-soft);
  font-size: .86rem; font-weight: 600; color: var(--ink-2);
}
.hero-title {
  margin-top: 24px;
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(2.7rem, 10.5vw, 5rem); line-height: 0.95; letter-spacing: -0.045em;
}
.hero-title .ln { display: block; }
.ln-accent { color: var(--accent-text); margin-top: .08em; }
.hero-sub { margin-top: 22px; max-width: 40ch; font-size: clamp(1.05rem, 2.6vw, 1.2rem); color: var(--ink-2); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-cta .btn { flex: 1 1 auto; }
.hero-fine { margin-top: 16px; font-size: .88rem; color: var(--muted); }

/* hero art: three phones playing real edits. Positions are classes so script.js can rotate the front one. */
.hero-art { position: relative; }
.stage { position: relative; height: 400px; max-width: 460px; margin: 0 auto; --side: 110px; }
.phone {
  position: absolute; top: 50%; left: 50%;
  width: 196px; height: 380px; margin: -190px 0 0 -98px;
  background: var(--phone); border-radius: 34px; padding: 8px;
  box-shadow: 0 30px 60px rgba(60, 40, 25, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.4);
  transition: transform .8s var(--ease), opacity .8s, filter .8s;
}
.scr { position: relative; height: 100%; border-radius: 27px; overflow: hidden; background: #1b1c1e; }
.scr .vid, .clip-media .vid { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
/* Ambient fill: script.js paints each playing video into a tiny canvas that is blurred up behind it, so an
   edit that is not 9:16 sits on its own colours instead of black bars. Without script it is simply dark. */
.amb { position: absolute; inset: -8%; width: 116%; height: 116%; filter: blur(18px) saturate(1.3) brightness(.7); opacity: .95; }
.scr-foot {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 14px 16px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), transparent);
  transition: opacity .6s;
}
/* only the phone in front carries its caption; the two behind would collide with it */
.pos-l .scr-foot, .pos-r .scr-foot { opacity: 0; }
.scr-foot { z-index: 2; }
.scr-id { display: grid; gap: 2px; min-width: 0; }
.scr-id b { font-size: .82rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr-niche { font-size: .68rem; font-weight: 600; opacity: .8; white-space: nowrap; }
.scr-views { font-family: var(--f-display); font-weight: 900; font-size: 1.25rem; letter-spacing: -0.03em; white-space: nowrap; line-height: 1; }
.pos-l { transform: translateX(calc(var(--side) * -1)) translateY(12px) rotate(-8deg) scale(.84); z-index: 1; filter: brightness(.82); }
.pos-r { transform: translateX(var(--side)) translateY(12px) rotate(8deg) scale(.84); z-index: 1; filter: brightness(.82); }
.pos-c { transform: none; z-index: 3; }
.pos-b { transform: translateY(-16px) scale(.7); z-index: 0; filter: brightness(.6); } /* hidden by the front phone, not by fading */
.pos-b .scr-foot { opacity: 0; }

.art-ctrl { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.dots { display: flex; justify-content: center; gap: 6px; }
.dots i { width: 6px; height: 6px; border-radius: 99px; background: var(--hair-2); transition: width .3s, background .3s; }
.dots i.on { width: 22px; background: var(--ink); }
html:not(.js) .art-ctrl { display: none; }

/* ═══ COMPANIES ═══ */
.logos { padding: 24px 0 40px; }
.logos-h { text-align: center; font-family: var(--f-body); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ticker {
  margin-top: 18px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.ticker-track { display: flex; width: max-content; animation: tick 38s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-set { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.ticker-set li { padding: 14px clamp(28px, 5vw, 56px); }
.lg { width: auto; height: 30px; opacity: .72; transition: opacity .2s; }
.lg:hover { opacity: 1; }
.lg-1 { height: 22px; }
.lg-2 { height: 38px; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ═══ STATS ═══ */
.stats { position: relative; z-index: 1; padding: 40px 0 64px; }
.stat-grid { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--hair-2); border-bottom: 1px solid var(--hair-2); }
.stat { padding: 30px 8px 26px; text-align: center; }
.stat + .stat { border-top: 1px solid var(--hair-2); }
.stat-n { font-family: var(--f-display); font-weight: 900; font-size: clamp(3.2rem, 13vw, 5rem); line-height: .94; letter-spacing: -0.05em; }
.stat-n .u { font-size: .6em; letter-spacing: -0.03em; margin-left: .03em; }
.stat-n .p { font-size: .5em; margin-left: .03em; vertical-align: .72em; line-height: 0; color: var(--accent-text); }
.stat-l { margin-top: 10px; font-weight: 600; color: var(--ink-2); }
.stat-note { margin-top: 14px; text-align: center; font-size: .76rem; color: var(--muted); }

/* ═══ shared section layout ═══ */
.how, .faq, .contact { position: relative; padding: 88px 0; }
.split { position: relative; z-index: 1; display: grid; gap: 44px; }
.head { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.h2 { font-family: var(--f-display); font-weight: 900; font-size: clamp(2.5rem, 9.5vw, 4rem); line-height: .98; letter-spacing: -0.045em; }
.lead { margin: 20px 0 28px; max-width: 42ch; font-size: 1.08rem; color: var(--ink-2); }
.quiet { margin-top: 18px; font-weight: 600; font-size: .95rem; color: var(--ink-2); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--hair-2); }
.quiet:hover { color: var(--ink); text-decoration-color: currentColor; }

.card { background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow-card); border: 1px solid var(--hair); }
.card-k { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.badge { display: inline-block; font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 5px 9px; border-radius: 7px; background: var(--accent-soft); color: var(--accent-ink); }

/* ═══ HOW: alternating rows of copy and a product card, like a walk through the tool ═══ */
.how-head { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.how-head .lead { margin: 18px auto 0; }
.how-rows { display: grid; gap: 64px; margin-top: 56px; }
.row { display: grid; gap: 28px; align-items: center; }
.row-text > div { border-top: 1px solid var(--hair-2); padding-top: 26px; }
.row-text h3 { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.7rem, 4.5vw, 2.3rem); letter-spacing: -0.035em; line-height: 1.05; }
.row-text p { margin-top: 12px; color: var(--ink-2); max-width: 46ch; font-size: 1.04rem; }
.row-card { justify-items: center; }
.row-card > * { align-self: center; } /* a shorter card keeps its own height inside the shared cell */
/* the mock is a white product card on both sides, like a screenshot of the tool; its colours are fixed */
.mock { width: 100%; max-width: 480px; background: #fff; color: #131415; border-radius: 22px; padding: 22px; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.06); font-family: var(--f-body); }
.mock-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.mock-k { font-size: .78rem; font-weight: 600; color: #6b6b6b; }
.mock-badge { font-size: .72rem; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: #f1f1f2; color: #3a3a3b; white-space: nowrap; }
.mock-badge.good { background: rgba(14, 122, 40, 0.12); color: #0b6a22; }
.mock-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.mock-tabs span { flex: 1; text-align: center; font-size: .82rem; font-weight: 700; padding: 9px 0; border-radius: 999px; background: #f1f1f2; color: #3a3a3b; }
.mock-tabs .on { background: #1d4ed8; color: #fff; }
.mock-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: #f6f6f7; margin-bottom: 12px; min-width: 0; }
.mock-row > div { min-width: 0; }
.mock-av { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, #131415, #3a3f6b); flex: none; object-fit: cover; display: block; }
.mock-row b { display: block; font-size: .95rem; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-row small { display: block; font-size: .78rem; color: #6b6b6b; margin-top: 2px; }
.mock-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mock-checks li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #f6f6f7; font-size: .9rem; font-weight: 600; }
.ck { width: 20px; height: 20px; border-radius: 50%; background: #16a34a; display: grid; place-items: center; flex: none; }
.ck svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mock-checks .off { color: #9a9a9a; font-weight: 500; }
.mock-checks .off .ck { background: #e3e3e5; }
.mock-field { padding: 12px 14px 14px; border-radius: 12px; background: #f6f6f7; margin-bottom: 10px; }
.mock-field > span { display: flex; justify-content: space-between; font-size: .78rem; font-weight: 600; color: #6b6b6b; }
.mock-field em { font-style: normal; }
.mock-field > b { display: block; margin-top: 4px; font-family: var(--f-display); font-weight: 900; font-size: 1.35rem; letter-spacing: -0.03em; }
.mock-field b small { font-family: var(--f-body); font-weight: 600; font-size: .76rem; color: #6b6b6b; letter-spacing: 0; }
.mock-bar { display: block; height: 6px; border-radius: 99px; background: #e3e3e5; margin-top: 10px; overflow: hidden; }
.mock-bar::after { content: ""; display: block; height: 100%; width: var(--p, 40%); background: #16a34a; border-radius: 99px; }
.mock-btn { display: block; text-align: center; margin-top: 12px; padding: 14px; border-radius: 12px; background: #1d4ed8; color: #fff; font-weight: 700; font-size: .95rem; }
.mock-big { font-family: var(--f-display); font-weight: 900; font-size: clamp(2.2rem, 6vw, 2.8rem); letter-spacing: -0.04em; line-height: 1; margin: 6px 0 12px; font-variant-numeric: tabular-nums; }
.mock-spark { width: 60%; height: 48px; display: block; margin: 0 0 18px; overflow: visible; }
.mock-note { font-size: .86rem; color: #3a3a3b; margin-top: 10px; line-height: 1.5; }
.mock-list { list-style: none; margin: 8px 0 0; padding: 0; }
.mock-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid #ececee; font-size: .9rem; }
.mock-list li:first-child { border-top: 0; }
.mock-list b { font-weight: 800; }
/* THE CARDS LOOP while they are on screen (script.js adds .run as a card comes into view and removes it as it
   leaves; without script, or with reduced motion, nothing here applies and the cards simply stand still).
   One seven-second cycle: rules tick in one by one, bars fill, the sparkline draws itself and its end dot pops,
   numbers count up (script.js), everything holds, then fades out and the cycle starts again. */
@keyframes mockIn { 0% { opacity: 0; transform: translateY(8px); } 8% { opacity: 1; transform: none; } 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes mockPop { 0% { transform: scale(0); } 8% { transform: scale(1); } 88% { transform: scale(1); } 95%, 100% { transform: scale(0); } }
@keyframes mockFill { 0%, 5% { width: 0; } 28% { width: var(--p, 40%); } 88% { width: var(--p, 40%); } 95%, 100% { width: 0; } }
@keyframes mockDraw { 0%, 5% { stroke-dashoffset: 320; } 34% { stroke-dashoffset: 0; } 88% { stroke-dashoffset: 0; } 95%, 100% { stroke-dashoffset: 320; } }
@keyframes mockDot { 0%, 30% { transform: scale(0); } 37% { transform: scale(1); } 88% { transform: scale(1); } 95%, 100% { transform: scale(0); } }
@keyframes mockNum { 0% { opacity: 0; } 5% { opacity: 1; } 88% { opacity: 1; } 95%, 100% { opacity: 0; } }
.js .mock.run .mock-checks li, .js .mock.run .mock-list li, .js .mock.run .mock-btn, .js .mock.run .mock-note { animation: mockIn 7s var(--ease) infinite both; }
.js .mock.run .mock-checks li:nth-child(2), .js .mock.run .mock-list li:nth-child(2) { animation-delay: .15s; }
.js .mock.run .mock-checks li:nth-child(3), .js .mock.run .mock-list li:nth-child(3) { animation-delay: .3s; }
.js .mock.run .mock-checks li:nth-child(4) { animation-delay: .45s; }
.js .mock.run .mock-btn, .js .mock.run .mock-note { animation-delay: .6s; }
.js .mock.run .ck { animation: mockPop 7s cubic-bezier(.34, 1.56, .64, 1) infinite both; animation-delay: .2s; }
.js .mock.run .mock-checks li:nth-child(2) .ck { animation-delay: .35s; }
.js .mock.run .mock-checks li:nth-child(3) .ck { animation-delay: .5s; }
.js .mock.run .mock-checks li:nth-child(4) .ck { animation-delay: .65s; }
.js .mock.run .mock-bar::after { animation: mockFill 7s var(--ease) infinite both; }
.js .mock.run .mock-spark path { stroke-dasharray: 320; animation: mockDraw 7s var(--ease) infinite both; }
.js .mock.run .mock-spark circle { transform-box: fill-box; transform-origin: center; animation: mockDot 7s cubic-bezier(.34, 1.56, .64, 1) infinite both; }
.js .mock.run [data-count] { animation: mockNum 7s linear infinite both; }

/* the editors' checklist beside the join call */
.join-card { padding: 24px; }
.join-card ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.join-card li { position: relative; padding-left: 22px; font-size: 1rem; line-height: 1.5; color: var(--ink-2); }
.join-card li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.join-card b { color: var(--ink); }
.head .btn + .mail-card { margin-top: 22px; }

/* ═══ THE WORK ═══ */
.work { position: relative; padding: 88px 0 72px; background: var(--night); color: #fff; overflow: hidden; }
.work::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(46% 60% at 88% 0%, rgba(70, 120, 255, 0.24), transparent 70%);
}
.work-head { position: relative; display: grid; gap: 8px; align-items: end; }
.lead-light { color: rgba(255, 255, 255, 0.72); margin-bottom: 0; }

/* The reel scrolls sideways on its own track; the padding lines the first card up with the page margin. */
.reel-wrap { position: relative; margin-top: 40px; }
.reel {
  list-style: none; margin: 0; padding: 4px max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad))) 24px;
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad)));
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.reel::-webkit-scrollbar { display: none; }
.clip {
  flex: 0 0 clamp(250px, 74vw, 292px); scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--night-2); border: 1px solid var(--night-hair); border-radius: 24px; overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s;
}
.clip:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.2); }
.clip-media { position: relative; aspect-ratio: 4 / 5; background: #1f2023; overflow: hidden; }
.clip-plat, .clip-views, .sound { z-index: 2; }
.clip-plat { position: absolute; top: 12px; left: 12px; width: 34px; height: 34px; border-radius: 10px; overflow: hidden; background: #000; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); }
.clip-plat img { width: 100%; height: 100%; object-fit: cover; }
.clip-views {
  position: absolute; top: 12px; right: 12px; padding: 7px 11px; border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-family: var(--f-display); font-weight: 900; font-size: .95rem; letter-spacing: -0.02em; line-height: 1;
}
.sound {
  position: absolute; right: 12px; bottom: 12px; width: 42px; height: 42px; border-radius: 50%;
  border: 0; cursor: pointer; background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background .2s, transform .2s;
}
.sound:hover { transform: scale(1.06); }
.sound[aria-pressed="true"] { background: var(--accent); }
.sound { display: grid; place-items: center; color: #fff; }
.sound .ico { width: 20px; height: 20px; }
.sound .ico-on, .sound[aria-pressed="true"] .ico-off { display: none; }
.sound[aria-pressed="true"] .ico-on { display: block; }
html:not(.js) .sound { display: none; }
.clip-b { padding: 16px 16px 18px; display: flex; flex-direction: column; flex: 1; }
.clip-k { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-light); }
.clip-t { margin-top: 8px; font-size: .92rem; line-height: 1.5; color: rgba(255, 255, 255, 0.78); flex: 1; }
.who { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--night-hair); font-weight: 600; font-size: .92rem; }
.who img:first-child { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.who .tick { width: 16px; height: 16px; }

.reel-ctrl { position: relative; display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.rbtn {
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.24);
  font-size: 1.1rem; transition: background .2s, border-color .2s, opacity .2s;
}
.rbtn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.5); }
.rbtn:disabled { opacity: .3; cursor: default; }
.reel-ctrl.is-idle { visibility: hidden; }
html:not(.js) .reel-ctrl { display: none; }

/* ═══ FAQ ═══
   Native <details name="faq">: one answer open at a time with no script, and every answer reachable with
   none. Where the browser can animate to height:auto the answer slides; elsewhere it simply opens. */
.faq-head { display: flex; flex-direction: column; align-items: flex-start; }
.faq-lead { margin: 18px 0 26px; }
.faq-body { margin-top: 36px; }
.faq-label { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--hair-2); font-family: var(--f-body); font-size: .82rem; font-weight: 700; color: var(--muted); }
.faq-list { margin-top: 8px; }
.qa { border-bottom: 1px solid var(--hair-2); }
.q {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 1.06rem; letter-spacing: -0.02em; line-height: 1.35; color: var(--ink);
}
.q::-webkit-details-marker { display: none; }
.q:hover { color: var(--accent-ink); }
.plus {
  flex: none; width: 32px; height: 32px; padding: 7px; border-radius: 50%;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round;
  color: var(--muted); background: var(--surface-2);
  transition: transform .25s var(--ease), color .2s, background .2s;
}
.q:hover .plus { color: var(--ink); background: var(--surface-3); }
.qa[open] .plus { transform: rotate(45deg); color: #fff; background: var(--accent); }
.a { max-width: 62ch; padding: 0 0 22px; font-size: .98rem; line-height: 1.8; color: var(--ink-2); }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .qa::details-content { block-size: 0; overflow: hidden; transition: block-size .32s var(--ease), content-visibility .32s allow-discrete; }
  .qa[open]::details-content { block-size: auto; }
}
.faq-more { margin-top: 28px; font-size: .95rem; color: var(--ink-2); }
.faq-more a { font-weight: 700; color: var(--ink); text-underline-offset: 3px; }
.faq-more a:hover { color: var(--accent-ink); }

/* ═══ CONTACT ═══ */
.contact { background: linear-gradient(180deg, transparent, var(--contact-wash) 20%, var(--contact-wash) 80%, transparent); }
.mail-card { display: flex; gap: 14px; align-items: flex-start; padding: 18px; width: 100%; max-width: 400px; }
.mail-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); flex: none; }
.mail-k { font-size: .8rem; font-weight: 600; color: var(--muted); }
.mail-a { display: inline-block; margin-top: 2px; font-weight: 700; text-decoration: none; word-break: break-all; }
.mail-a:hover { color: var(--accent-ink); }
.mail-s { margin-top: 2px; font-size: .86rem; color: var(--ink-2); }

.form { padding: 24px; display: grid; gap: 16px; min-width: 0; }
.form-row { display: grid; gap: 16px; }
.field { display: grid; gap: 7px; min-width: 0; }
.field > span { font-size: .86rem; font-weight: 700; }
.field em { font-style: normal; font-weight: 500; color: var(--muted); }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; color: var(--ink); background: var(--cream);
  border: 1px solid #8f887f; border-radius: 12px; padding: 13px 14px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.field select {
  -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23131415' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid transparent; outline-offset: 2px; background-color: #fff; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.field input[aria-invalid="true"] { border-color: #b3261e; }
.msg { padding: 14px 16px; border-radius: 12px; font-weight: 600; font-size: .95rem; line-height: 1.45; }
/* the honeypot: off screen, never display:none (bots skip fields that are display:none) */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* the Turnstile box: nothing until the Worker hands over a site key, then the widget sits above the button */
.captcha { margin: 0; min-height: 0; }
.captcha:empty { display: none; }
.msg.good { background: rgba(14, 122, 40, 0.10); color: #0b6a22; border: 1px solid rgba(14, 122, 40, 0.25); }
.msg.bad { background: rgba(179, 38, 30, 0.08); color: #a3261a; border: 1px solid rgba(179, 38, 30, 0.25); }
.msg a { color: inherit; }
.form-fine { font-size: .82rem; color: var(--muted); text-align: center; }
.form-fine a { color: var(--ink-2); }

/* ═══ CLOSE: the last word and three edits ═══ */
.close { position: relative; padding: 88px 0; background: var(--band-bg); color: var(--band-head); overflow: hidden; }
.close::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 60% at 8% 50%, rgba(70, 120, 255, 0.22), transparent 70%); }
.close-grid { position: relative; display: grid; gap: 44px; align-items: center; }
.close .accent { color: var(--accent-text); }
.close .hero-cta { margin-top: 28px; }
.close .btn-white { background: #fff; color: #131415; box-shadow: var(--shadow-soft); }
.close-cards { display: flex; justify-content: center; gap: 14px; }
.ccard { width: clamp(96px, 26vw, 180px); aspect-ratio: 9 / 16; margin: 0; border-radius: 18px; overflow: hidden; background: #1b1c1e; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.ccard .vid { width: 100%; height: 100%; object-fit: cover; }
.c1 { transform: rotate(-4deg) translateY(6px); }
.c2 { transform: translateY(26px); }
.c3 { transform: rotate(4deg) translateY(6px); }

/* ═══ FOOTER ═══ */
.ftr { background: var(--band-bg); color: var(--band-fg); padding: 64px 0 40px; border-top: 1px solid var(--band-hair); }
.ftr-grid { display: grid; gap: 40px; padding-bottom: 36px; border-bottom: 1px solid var(--band-hair); }
.ftr-brand { display: flex; flex-direction: column; align-items: flex-start; }
.ftr-tag { margin-top: 14px; max-width: 30ch; }
.pill-discord { margin-top: 20px; background: #5865f2; color: #fff; }
.pill-discord:hover { box-shadow: 0 8px 18px rgba(88, 101, 242, 0.4); }
.ftr-legal a { text-decoration: none; }
.ftr-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.col-h { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--band-head); margin-bottom: 14px; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ftr a { text-decoration: none; transition: color .2s; }
.ftr a:hover { color: var(--band-head); }
.ftr-legal { padding-top: 24px; font-size: .88rem; }

/* ═══ the narrowest phones: logo and the header button must share 284px ═══ */
@media (max-width: 360px) {
  .nav-r .pill { padding: 0 14px; font-size: .84rem; }
  .logo { height: 40px; }
  .btn { padding: 0 20px; }
}

/* ═══════════ ≥ 640px ═══════════ */
@media (min-width: 640px) {
  .hero-cta .btn { flex: 0 0 auto; }
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
  .stat + .stat { border-top: 0; border-left: 1px solid var(--hair-2); }
  .form-row { grid-template-columns: 1fr 1fr; }
  .form { padding: 30px; }
  .ftr-cols { grid-template-columns: repeat(3, minmax(0, 200px)); }
  .scr-views { font-size: 1.45rem; }
}

/* ═══════════ ≥ 900px ═══════════ */
@media (min-width: 900px) {
  .nav-links { display: flex; }
  .nav-r .nav-hide-sm { display: inline-flex; }
  /* once the page moves, the bar is clipped into a pill 12px off the top, 60px tall, at most 1040px wide, and the
     controls slide to sit 24px inside its left end and 12px inside its right end, 6px lower (the pill's centre) */
  /* at rest the (invisible) panel is already a pill just outside the logo and the buttons, so when the page moves
     its edges fade in close to them and ease inward together with them, instead of sweeping in from the viewport edge */
  .hdr::before { clip-path: inset(12px max(0px, calc(var(--rest-left) + -28px)) 0 max(0px, calc(var(--rest-left) + -28px)) round 999px); border-bottom-color: transparent; box-shadow: none; }
  .hdr.is-stuck::before { clip-path: inset(12px var(--pill-left) 0 var(--pill-left) round 999px); }
  .hdr.is-stuck {
    --sx: calc(var(--pill-left) + 24px + (var(--rest-left) * -1));
    --sr: calc(var(--pill-left) + var(--pill-w) + -12px + ((var(--hw) + (var(--rest-left) * -1)) * -1)); }
  .hdr.is-stuck::after { opacity: 1; transition: opacity .35s var(--ease-soft) .5s; }
  .hdr.is-stuck .brand, .hdr.is-stuck .nav-links { transform: translate(var(--sx), 6px); }
  .hdr.is-stuck .nav-r { transform: translate(var(--sr), 6px); }

  .hero { padding: calc(var(--nav-h) + 64px) 0 64px; }
  .hero-grid { grid-template-columns: 1.1fr .9fr; gap: 40px; }
  .stage { height: 490px; max-width: 520px; --side: 148px; }
  .phone { width: 238px; height: 470px; margin: -235px 0 0 -119px; }

  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
  .how-rows { gap: 88px; margin-top: 72px; }
  .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
  .row.flip .row-text { order: 2; }
  .row.flip .row-card { order: 1; }
  .close-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; }
  .close-cards { gap: 18px; padding: 30px 0; }
  .ccard { width: 200px; }
  .split-contact { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; }
  .work-head { grid-template-columns: 1fr 1fr; gap: 64px; }
  .faq-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
  .faq-body { margin-top: 0; }
  .faq-body .faq-label { margin-top: 0; }
  .ftr-grid { grid-template-columns: 1fr auto; align-items: start; }
}

/* ═══════════ ≥ 1100px ═══════════ */
@media (min-width: 1100px) {
  .stage { height: 520px; --side: 162px; }
  .phone { width: 252px; height: 500px; margin: -250px 0 0 -126px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  /* no motion: one centred row of the three logos, wrapping on narrow screens, no fade at the edges */
  .ticker { mask-image: none; -webkit-mask-image: none; }
  .ticker-track { animation: none; width: auto; justify-content: center; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .ticker-set { flex-wrap: wrap; justify-content: center; }
  .ticker-set li:nth-child(n+4), .ticker-set[aria-hidden="true"] { display: none; }
}

/* ═══ sticky section heads, only where the screen is tall enough to hold one ═══ */
@media (min-width: 900px) and (min-height: 820px) {
  .split > .head, .split > .alt:first-child, .faq-head { position: sticky; top: calc(var(--nav-h) + 40px); }
  .split-contact > .head, .split-contact > .alt:first-child { position: static; }
}

/* ═══ print: everything visible, nothing fixed ═══ */
@media print {
  /* paper is light whichever side was showing */
  html[data-side="editors"] {
    --cream: #ffffff; --cream-2: #f2f2f2; --card: #ffffff; --ink: #131415; --ink-2: #3a3a3b; --muted: #666666;
    --hair: rgba(19, 20, 21, 0.07); --hair-2: rgba(19, 20, 21, 0.13); --accent-ink: #1d4ed8; --accent-text: #1d4ed8;
    --pill-bg: #131415; --pill-fg: #ffffff; --night: #0b0b0c; --night-2: #161719;
  }
  html[data-side="editors"] .lg { filter: none; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .hdr { position: static; }
  .hdr::before, .hdr::after { display: none; }
  .hdr .brand, .hdr .nav-links, .hdr .nav-r { transform: none !important; }
  .art-ctrl, .glow, .reel-ctrl, .sound { display: none !important; }
  .qa::details-content { block-size: auto !important; content-visibility: visible !important; }
}

/* ═══ inner pages: legal text and the not-found page, same header and footer as the home page ═══ */
.page { padding: calc(var(--nav-h) + 56px) 0 96px; }
.article { max-width: 720px; }
.article .h1 { font-family: var(--f-display); font-weight: 900; font-size: clamp(2.1rem, 6vw, 3.4rem); line-height: 1.02; letter-spacing: -0.02em; }
.article .page-lead { margin-top: 14px; color: var(--muted); font-size: .95rem; }
.article-body { margin-top: 36px; display: grid; gap: 18px; font-size: 1.04rem; line-height: 1.75; color: var(--ink-2); max-width: 66ch; }
.article-body p { margin: 0; }
.article-body a { color: var(--accent); }
.article-body a:hover { color: var(--accent-hover); }
.notice { margin-top: 36px; padding: 22px 24px; border-left: 4px solid var(--accent); }
.notice p + p { margin-top: 10px; }
.nf { text-align: center; padding: calc(var(--nav-h) + 96px) 0 120px; }
.nf .h1 { font-family: var(--f-display); font-weight: 900; font-size: clamp(2.2rem, 7vw, 4rem); line-height: 1; letter-spacing: -0.02em; }
.nf .lead { margin: 18px auto 0; max-width: 42ch; }
.nf-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
@media (min-width: 640px) {
  .page { padding-top: calc(var(--nav-h) + 80px); }
}

/* the answer takes focus after a submit; a ring around a sentence reads as an error, so none */
#formMsg:focus { outline: none; }