/* editedgroup.com, the client page: sukiaudios.com's labels and artists page and kozumedia.com's streamers and brands
   page in one document, on sukiaudios.com's stylesheet (kozumedia.com's is the same design) with Edited's colour.
   Warm cream, ink type, white cards and one loud colour: Edited orange carries every primary action.
   Mobile first: every rule works at 320px, and the media queries only add. Both sides are light, as both client
   pages are, so the side switch changes words and pictures, never a colour. */

: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);
  /* Edited orange, deepened until it reads: white on it 5.0:1, it on cream 4.6:1, it on white 5.0:1. The logo's own
     #FF7A12 gives 2.6:1 with white and 2.4:1 on cream, under the 4.5:1 a button label or a kicker needs, so the bright
     orange stays in the logo tile and this one carries the words, the buttons and the glows. */
  /* 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-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 */

  /* tokens his pages swap for their dark editors side; both client sides here are light, so they stay */
  --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: warm and light, as on both client pages */
  --band-bg: #f8f5f2; --band-fg: #3a3a3b; --band-head: #131415; --band-hair: rgba(19, 20, 21, 0.12); /* the page colour: no jump into the closing band (ben, 2026-09-24) */

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

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

*, *::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 logo tile and the word, as kozumedia.com sets its star and "kozu" (Anybody 900) ─── */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.mark { width: 34px; height: 34px; border-radius: 9px; flex: none; }
.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; }

/* ─── 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 ───
   / ships with data-side="labels" and /brands with data-side="brands" (two files, the second built from the first by
   tests/group.build.mjs); 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. A block only one side has (the logo strip, the figures,
   each side's edits) is data-for and takes no room on the other side. */
html[data-side="labels"] [data-for="brands"], html[data-side="brands"] [data-for="labels"] { 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; }
html[data-side="labels"] [data-alt="brands"], html[data-side="brands"] [data-alt="labels"] { visibility: hidden; pointer-events: 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 .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 .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="labels"] .seg-btn[data-side="labels"], html[data-side="brands"] .seg-btn[data-side="brands"] { 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: var(--accent-fg); box-shadow: var(--shadow-accent); }
.btn-accent:hover { background: var(--accent-hover); box-shadow: 0 16px 34px rgba(194, 71, 11, 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(194, 71, 11, 0.12), transparent 68%),
    radial-gradient(36% 40% at 100% 92%, rgba(234, 28, 36, 0.16), 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(194, 71, 11, 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; }

/* ═══ 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: 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); }
/* the hero's copy: each side's headline, line, buttons and note are one block in one shared cell. The two sides'
   headlines differ by two lines (his pages pair blocks of one height), so block by block the brands side would open a
   hole in the middle of its copy; as one block it sits together under the toggle, and the toggle and the stack
   beside it stay where they are on a switch. On one column the cell is not shared (as sukiaudios.com does for its
   contact cell): the space would sit between the copy and the stack, and the section after the hero changes with
   the side there anyway (the logo strip or the figures). */
@media (max-width: 899px) {
  .hero-sides { display: block; }
  html[data-side="labels"] .hero-sides > [data-alt="brands"], html[data-side="brands"] .hero-sides > [data-alt="labels"] { display: none; }
}

/* hero art: phones playing real edits, one stack per side (the other side's is not displayed, so its videos never
   play). 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 { 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; }

/* The sound toggle sits in the control row beside the dots and always plays the edit in front (ben,
   2026-09-24). 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; }
html:not(.js) .sound-ctrl, html:not(.js) .motion-ctrl { display: none; }

.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%); }
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);
}
/* 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, so a set narrower than the screen leaves a blank strip
   at the right edge on every loop, which is what a 1728px screen showed. 19s per group of three keeps the
   speed the two-repeat, 38s version had. */
.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 (with scripting
   off, noscript.css also lays it out as the one centred row it has under reduced motion) */
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%); } }

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

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

/* ═══ 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, its one
   colour the accent (his blue there becomes the Edited orange with the rest of the page) */
.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: var(--accent); color: var(--accent-fg); }
.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; }
/* how far each budget bar is spent: his pages set it in a style attribute, which this site's policy refuses */
.mock-bar.p38 { --p: 38%; }
.mock-bar.p39 { --p: 39%; }
.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-spark { width: 60%; height: 48px; display: block; margin: 0 0 18px; overflow: visible; }
.mock-spark path { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.mock-spark circle { fill: var(--accent); }
.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; }

/* ═══ 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: 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); }

/* ═══ 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;
  /* his chevron, as a file: the policy refuses data: images */
  background-image: url("/group/assets/select-chevron.svg?v=954db259");
  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; }
.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(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; }
/* where his footers put "Join the Discord" (the editors' way in), a small line to the editors' own site */
.ftr-editors { margin-top: 18px; font-size: .95rem; }
.ftr .ftr-editors a { font-weight: 700; color: var(--band-head); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hair-2); }
.ftr .ftr-editors a:hover { color: var(--accent-ink); text-decoration-color: currentColor; }
.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; }
.ftr-legal.ftr-sister { padding-top: 6px; }

/* ═══ the narrowest phones: logo and the header button must share 284px ═══ */
@media (max-width: 360px) {
  .nav-r .pill { padding: 0 14px; font-size: .84rem; }
  .mark { width: 30px; height: 30px; border-radius: 8px; }
  .wordmark { font-size: 1.3rem; }
  .btn { padding: 0 20px; }
  /* the toggle's two labels are longer than his "Labels & artists" and "Editors": tighter, so both fit at 320px */
  .seg-btn { padding: 0 11px; font-size: .84rem; }
}

/* ═══════════ ≥ 640px ═══════════ */
@media (min-width: 640px) {
  .hero-cta .btn { flex: 0 0 auto; }
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } /* one column per stat, whatever the count (ben, 2026-09-24: "stats arent centred") */
  .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; }
  .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; }
  ::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; }
}

/* ═══ 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 tests/pages.test.mjs fails on
   one that has none: a new effect is not finished until its lite counterpart is written. 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(194, 71, 11, 0.12), transparent 68%),
    radial-gradient(36% 40% at 100% 92%, rgba(234, 28, 36, 0.16), 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 .mock-spark path, html.lite .mock.run .mock-spark circle,
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) {
  .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 {
  .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; }
}

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