/* edited.gg, the editors' landing page: its one stylesheet.
   THE LOOK IS BEN'S TWO EDITOR PAGES, suki.gg and kozu.gg, which are themselves the editors sides of sukiaudios.com and
   kozumedia.com. Everything down to "edited.gg's own" is suki.gg's landing.css as it draws that page (the same rules,
   sizes, breakpoints, motion and lite mode block), with kozu.gg's stat strip and its brand of a mark beside a wordmark.
   What changed: Edited orange where his blue was (one solid colour; the gradient belongs to the logo tile alone), type
   on the orange near black for contrast, and the room his pages kept for the other side of sukiaudios.com and
   kozumedia.com, which this page has no use for. What is new is short and sits under "edited.gg's own" near the end:
   the switch between the two divisions (sukiaudios.com's own toggle), and the buttons that wait for their invites.
   Near black, white type, dark cards and one loud colour: Edited orange carries every primary action.
   Mobile first: every rule works at 320px, and the media queries only add.
   FONTS: Anybody and Figtree from Google Fonts, as his pages load them (the policy names the two hosts).
   NO INLINE STYLE: the policy allows none, so the bar width his page set in a style attribute is a rule here. */

:root {
  color-scheme: light;
  --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);
  /* ben, 2026-10-14: the logo is red (#8a1418 to #ea1c24); option B's look in the logo's bright red, solid, on the words and the buttons, white type on it */
  --logo-grad: linear-gradient(90deg, #b81820, #ea1c24 55%);
  --accent: #ea1c24;
  --accent-fg: #ffffff;
  --accent-ink: #ea1c24;
  --accent-hover: #c8161d;
  --accent-soft: rgba(234, 28, 36, 0.12);
  --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(234, 28, 36, 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 */

  --accent-text: #ea1c24;
  --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 are the page colour: no jump into the closing band */
  --band-bg: #f8f5f2; --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;
}

/* DARK BY DEFAULT (ben, 2026-10-14): the page opens dark; the switch in the header sets data-theme="light" and the
   light colours above apply. These are his editors pages' dark colours. */
html[data-theme="dark"] {
  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);
  --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: #0b0b0c; --band-fg: rgba(255, 255, 255, 0.72); --band-head: #ffffff; --band-hair: rgba(255, 255, 255, 0.10);
}
html[data-theme="dark"] .lg { filter: invert(1) brightness(1.15); }
html.lite[data-theme="dark"] { --glass-a: rgba(28, 28, 31, 0.96); --glass-b: rgba(28, 28, 31, 0.92); }

/* THE THEME SWITCH in the header: shows the sun while dark (to go light) and the moon while light */
.theme-switch { width: 40px; height: 40px; flex: none; display: inline-grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid var(--hair-2); background: transparent; color: var(--ink); cursor: pointer; transition: background .2s; }
.theme-switch:hover { background: var(--surface-2); }
.theme-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-switch svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-switch .moon { fill: currentColor; stroke: none; }
html[data-theme="dark"] .theme-switch .moon, html[data-theme="light"] .theme-switch .sun { display: none; }
/* the client logos are dark artwork: drawn white on this page */

*, *::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 Edited tile beside the wordmark, as kozu.gg sets its mark beside "kozu" ─── */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.mark { width: 30px; height: 30px; border-radius: 7px; }
.wordmark { font-family: var(--f-display); font-weight: 900; font-size: 1.45rem; letter-spacing: -0.05em; line-height: 1; }
.wordmark-img { display: block; height: 30px; width: auto; }
.ftr .mark { width: 40px; height: 40px; border-radius: 9px; }
.ftr .wordmark { font-size: 1.9rem; }

/* ─── 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 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; }

/* ─── 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-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: var(--accent-fg); box-shadow: var(--shadow-accent); }
.btn-accent:hover { background: var(--accent-hover); box-shadow: 0 16px 34px rgba(234, 28, 36, 0.32); }
.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; }

/* ─── 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(234, 28, 36, 0.11), transparent 68%),
    radial-gradient(36% 40% at 100% 92%, rgba(234, 28, 36, 0.15), 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(234, 28, 36, 0.05), 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; }

/* ═══ 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; }
.hero-title {
  margin-top: 0;
  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: four phones playing real edits. Positions are classes so script.js can turn the stack. */
.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 { 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 beside it 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; }

/* The sound toggle sits in the control row beside the dots and always plays the edit in front. One edit is
   audible at a time (script.js), and sound never holds the stack.
   The motion toggle on the other side of the dots pauses everything that moves by itself (script.js, WCAG
   2.2.2): pressed, it shows play; with reduced motion nothing moves by itself, so it is not shown. */
.sound-ctrl, .motion-ctrl {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--hair-2); cursor: pointer;
  background: var(--card); color: var(--ink); box-shadow: var(--shadow-soft);
  display: grid; place-items: center; transition: background .2s, color .2s, transform .2s, border-color .2s;
}
.sound-ctrl:hover, .motion-ctrl:hover { transform: scale(1.06); }
.sound-ctrl[aria-pressed="true"], .motion-ctrl[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); border-color: transparent; }
.sound-ctrl .ico, .motion-ctrl .ico { width: 17px; height: 17px; }
.sound-ctrl .ico-on, .sound-ctrl[aria-pressed="true"] .ico-off { display: none; }
.sound-ctrl[aria-pressed="true"] .ico-on { display: block; }
.motion-ctrl .ico-play, .motion-ctrl[aria-pressed="true"] .ico-pause { display: none; }
.motion-ctrl[aria-pressed="true"] .ico-play { display: block; }
.motion-ctrl .ico-play { fill: currentColor; }

.art-ctrl { position: relative; 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); position: relative; overflow: hidden; }
/* The active dot fills over one turn (script.js sets --turn from its timer), so a held stack shows a frozen bar
   and the Paused label beside it. The fill is a pseudo-element: re-applying .on recreates it, which restarts it. */
.dots i.on::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; animation: dotfill var(--turn, 4.2s) linear forwards; }
@keyframes dotfill { to { transform: scaleX(1); } }
.hero-art.is-held .dots i.on::after { animation-play-state: paused; }
.hold {
  position: absolute; left: calc(50% + 91px); top: 50%; display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--f-body); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap;
  opacity: 0; transform: translate(-6px, -50%); transition: opacity .25s, transform .25s var(--ease); pointer-events: none;
}
.hold svg { width: 9px; height: 9px; fill: currentColor; }
.hero-art.is-held .hold { opacity: 1; transform: translate(0, -50%); }
/* before the script has run the row of controls keeps its room, with nothing drawn and nothing to press, so the
   stack does not move up when the script arrives (suki.gg's own rule) */
html:not(.js) .art-ctrl { visibility: hidden; }

/* ═══ EDITED AUDIOS: THE 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);
}
/* Each set is six repeats of the three logos, wide enough (4698px at the 56px padding cap) to cover a 4K
   screen on its own. The loop moves exactly one set. 19s per group of three. */
.ticker-track { display: flex; width: max-content; animation: tick 114s linear infinite; }
.ticker:hover .ticker-track, html.motion-paused .ticker-track { animation-play-state: paused; }
/* without script there is no pause control, so nothing moves by itself: the strip stands still */
html:not(.js) .ticker-track { animation: none; }
.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%); } }

/* ═══ EDITED STREAMERS: THE TWO FIGURES (kozu.gg's strip) ═══ */
.stats { position: relative; z-index: 1; padding: 24px 0 64px; }
.stats-h { margin-bottom: 18px; }
.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.money::before { content: "$"; }
.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); }

/* THE LOGO'S GRADIENT, mixed in (ben, 2026-10-14: "you can mix in the logos too though", "i mean the gradients"): the
   big figures and the playing slide's bar. Only these two use it; everything else is the solid orange (option B). */
.stat-n { background: var(--logo-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-n .u, .stat-n .p { color: transparent; }
.dots i.on::after { background: var(--logo-grad); }
.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); }

.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); }

/* ═══ 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 { display: grid; justify-items: center; }
.row-card > * { align-self: center; }
/* the mock is a white product card, 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-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: #2a2b2e; 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-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 > 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; --p: 62%; }
.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: var(--accent); color: var(--accent-fg); 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-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, 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 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 [data-count] { animation: mockNum 7s linear infinite both; }

/* the editors' checklists beside the join call, one for each division */
.join-cards { display: grid; gap: 16px; min-width: 0; }
.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); }

/* ═══ FAQ ═══
   Native <details>, one list per division, each with its own name: 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. */
.faq-head { display: flex; flex-direction: column; align-items: flex-start; }
.faq-lead { margin: 18px 0 26px; }
.faq-body { margin-top: 36px; display: flow-root; }
.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: var(--accent-fg); 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); }

/* ═══ JOIN (the contact band of his pages, with both servers) ═══ */
.contact { background: linear-gradient(180deg, transparent, var(--contact-wash) 20%, var(--contact-wash) 80%, transparent); }

/* ═══ 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(234, 28, 36, 0.16), 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; }
.ftr-joins { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.pill-discord { background: #5865f2; color: #fff; }
.pill-discord:hover { box-shadow: 0 8px 18px rgba(88, 101, 242, 0.4); }
.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; }

/* ═══ edited.gg's own ═══ */
/* an element the script has taken away is not drawn, whatever its class says about display */
[hidden] { display: none !important; }

/* THE TWO DIVISIONS. sukiaudios.com's toggle (".seg", the switch between its two sides) picks the division here, in the
   heads of "how it works" and the FAQ; the two switches are one choice. Each block that differs by division holds both,
   and shows one: in "how it works" both sit in one grid cell (sukiaudios.com's shared cells), so the rows keep the height
   of the taller and nothing above a switch moves when it is pressed; the FAQ swaps its list, below its switch. With no
   script (or before it has run, where the browser cannot say), both divisions stand one after the other, each under
   its own name, and no switch is drawn. */
.seg { display: inline-flex; gap: 4px; padding: 4px; 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: 0; border-radius: var(--r-pill); cursor: pointer;
  background: transparent; font-weight: 700; font-size: .9rem; color: var(--muted); white-space: nowrap;
  transition: background-color .25s, color .25s;
}
.seg-btn:hover { color: var(--ink); }
.seg-btn[aria-pressed="true"] { background: var(--pill-bg); color: var(--pill-fg); }
.how-head .seg { margin-top: 30px; }
@media (scripting: none) {
  .seg { display: none; }
}
@media (scripting: enabled) {
  .alt { display: grid; }
  .alt > * { grid-area: 1 / 1; min-width: 0; }
  html[data-div="audios"] [data-alt="streamers"], html[data-div="streamers"] [data-alt="audios"] { visibility: hidden; pointer-events: none; }
  html[data-div="audios"] [data-only="streamers"], html[data-div="streamers"] [data-only="audios"] { display: none; }
}
/* the same, for a browser that cannot answer the scripting query, once the script has run */
html.js .alt { display: grid; }
html.js .alt > * { grid-area: 1 / 1; min-width: 0; }
html.js[data-div="audios"] [data-alt="streamers"], html.js[data-div="streamers"] [data-alt="audios"] { visibility: hidden; pointer-events: none; }
html.js[data-div="audios"] [data-only="streamers"], html.js[data-div="streamers"] [data-only="audios"] { display: none; }
/* each division's block says whose it is */
.div-k { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.row-text .div-k { margin: 0 0 10px; max-width: none; font-size: .72rem; color: var(--muted); }
/* both lists stacked (no script): the second keeps its distance from the first on a wide screen too */
@media (scripting: none) {
  .faq-group + .faq-group .faq-label { margin-top: 44px; }
}

/* THE JOIN BUTTONS are always drawn: the page prints each server's invite (ben, 2026-10-14: a failed live read must
   never leave an editor with no way to join), and script.js only replaces it with a newer one read from /gg/live.json. */
/* the join band's buttons keep their own width at every size, as his do there */
.head .hero-cta { margin-top: 0; }
.head .hero-cta .btn { flex: 0 0 auto; }
/* "the Discord" in the FAQ is plain words until its invite is known */
.inline { font-weight: 700; color: var(--ink); text-underline-offset: 3px; }
.inline:not([href]) { font-weight: inherit; color: inherit; text-decoration: none; }

/* THE PAIRS OF BUTTONS (his rule). A pair that cannot share a row stands as one column as wide as its wider button,
   so both are one width: "Join Edited Audios" and "Join Edited Streamers" side by side measure 451px (459px in the join
   band's larger size), 2026-10-14. Under 640px the hero and closing pairs are his full width column and are left alone. */
.close-copy, .head, .hero-copy { container-type: inline-size; }
@container (max-width: 463.9px) {
  .head .hero-cta { display: grid; grid-template-columns: max-content; }
}
@media (min-width: 640px) {
  @container (max-width: 455.9px) {
    .close .hero-cta, .hero .hero-cta { display: grid; grid-template-columns: max-content; }
  }
}
/* on the narrowest phones nothing in the closing band holds the column wider than the screen (his rule) */
.close-grid > * { min-width: 0; }
.row > *, .row-card > *, .split > * { min-width: 0; }
/* A pill and the round controls are under 44px tall, as his are. Each takes a tap over 44px: an area with nothing
   drawn in it, so the look is his (kozu.gg's own rule). */
.pill, .sound-ctrl, .motion-ctrl, .seg-btn { position: relative; }
.pill::after, .sound-ctrl::after, .motion-ctrl::after, .seg-btn::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }

/* ═══ the narrowest phones ═══ */
@media (max-width: 380px) {
  .seg-btn { padding: 0 11px; font-size: .84rem; }
}
@media (max-width: 360px) {
  .nav-r .pill { padding: 0 14px; font-size: .84rem; }
  .btn { padding: 0 20px; }
}

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

/* ═══════════ ≥ 900px ═══════════ */
@media (min-width: 900px) {
  .nav-links { display: 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) */
  .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; }
  .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; }
  .dots i.on::after, .hold, .motion-ctrl { display: 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; }
  .ticker-set { flex-wrap: wrap; justify-content: center; }
  .ticker-set li:nth-child(n+4), .ticker-set[aria-hidden="true"] { display: none; }
}
/* scripting off: one centred row of the three logos, as under reduced motion */
@media (scripting: none) {
  .ticker { mask-image: none; -webkit-mask-image: none; }
  .ticker-track { animation: none; width: auto; justify-content: center; }
  .ticker-set { flex-wrap: wrap; justify-content: center; }
  .ticker-set li:nth-child(n+4), .ticker-set[aria-hidden="true"] { display: none; }
}

/* ═══ lite mode: the browser draws on the CPU (lite.js, in the head, puts .lite on <html>) ═══
   The same page without what costs a frame there. EVERY backdrop-filter, large blur, mask and infinite animation
   above has its override here under the same selector with html.lite in front, and the page tests fail on one that
   has none. Motion that is brief, or moves one small layer by transform or opacity, stays: the reveals, the stack's
   turn, the header's pill, hover. */
html.lite { scroll-behavior: auto; --glass-a: rgba(255, 255, 255, 0.96); --glass-b: rgba(255, 255, 255, 0.92); }
/* the header's glass: with no backdrop to blur, the panel itself is nearly solid, in the same tint */
html.lite .hdr::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* the hero glow faded out through a mask; the same fade is painted over it in the page colour instead */
html.lite .glow-hero {
  -webkit-mask-image: none; mask-image: none;
  background:
    linear-gradient(to bottom, transparent 55%, var(--cream) 100%),
    radial-gradient(50% 55% at 76% 36%, rgba(234, 28, 36, 0.11), transparent 68%),
    radial-gradient(36% 40% at 100% 92%, rgba(234, 28, 36, 0.15), transparent 70%);
}
/* the phones behind were dimmed with a filter, which is worked out again for every frame of the edit playing
   beside them; a black veil over the screen dims by the same amount (brightness .82 is 18% black) and only its
   opacity moves on a turn */
html.lite .phone { transition: transform .8s var(--ease), opacity .8s; }
html.lite .pos-l, html.lite .pos-r, html.lite .pos-b { filter: none; }
html.lite .scr::after { content: ""; position: absolute; inset: 0; z-index: 3; background: #000; opacity: 0; pointer-events: none; transition: opacity .8s; }
html.lite .pos-l .scr::after, html.lite .pos-r .scr::after { opacity: .18; }
html.lite .pos-b .scr::after { opacity: .4; }
/* the ambient fill: script.js paints each canvas once from its edit's poster, softened and dimmed in the canvas */
html.lite .amb { filter: none; }
/* the logo strip keeps moving (one strip, transform alone); its faded ends were a mask over the moving strip and
   are two still fades in the page colour instead */
html.lite .ticker { position: relative; -webkit-mask-image: none; mask-image: none; }
html.lite .ticker::before, html.lite .ticker::after { content: ""; position: absolute; top: 0; bottom: 0; width: 12%; z-index: 1; pointer-events: none; }
html.lite .ticker::before { left: 0; background: linear-gradient(to right, var(--cream), transparent); }
html.lite .ticker::after { right: 0; background: linear-gradient(to left, var(--cream), transparent); }
@media (prefers-reduced-motion: reduce) { html.lite .ticker::before, html.lite .ticker::after { display: none; } }
/* the product cards stand on their finished frame (script.js does not start their loop either) */
html.lite .mock.run .mock-checks li, html.lite .mock.run .mock-list li, html.lite .mock.run .mock-btn, html.lite .mock.run .mock-note,
html.lite .mock.run .ck, html.lite .mock.run .mock-bar::after,
html.lite .mock.run [data-count] { animation: none; }
/* an answer opens at once: sliding it open lays out and repaints everything below it on every frame */
html.lite .qa::details-content { transition: none; }

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

/* ═══ print: everything visible, nothing fixed ═══ */
@media print {
  /* paper is light */
  :root {
    --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: #b34a00; --accent-text: #b34a00;
    --pill-bg: #131415; --pill-fg: #ffffff; --night: #0b0b0c; --night-2: #161719;
  }
  .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 { display: none !important; }
  .qa::details-content { block-size: auto !important; content-visibility: visible !important; }
}