/* kozu.gg, the landing page (the signed out home at "/", and still at /draft): its one stylesheet.
   THE EDITORS SIDE OF KOZUMEDIA.COM, RULE FOR RULE (ben, 2026-10-13: "swap it to be very similar to the kozumedia.com for
   editors page"). Everything down to the marker below is site/styles.css as that page serves it: the same tokens, type
   (Anybody and Figtree, from Google Fonts as his page loads them), colours, spacing, cards, phones, motion, breakpoints and
   html.lite twins. A rule is here exactly as it is there, with its declarations untouched; what is NOT here is what only
   the other side of his page, its side switch, its contact form or its other pages use. The page carries
   data-side="editors" on <html>, so his selectors apply as written. tests/kozugg_landing.mjs holds every rule above the
   marker to site/styles.css, and every costly effect to its html.lite twin.
   Below the marker is the short list of rules that are kozu.gg's own, each one reviewed in that suite.
   No inline style anywhere: the policy is style-src 'self' and the Google Fonts stylesheet, nothing else. */
:root {
  --cream: #f8f5f2;
  --cream-2: #efe8e0;
  --card: #ffffff;
  --ink: #131415;
  --ink-2: #3a3a3b;
  --muted: #666666;
  --hair: rgba(19, 20, 21, 0.07);
  --hair-2: rgba(19, 20, 21, 0.13);
  --accent: #1d4ed8;
  --accent-ink: #1d4ed8;
  --accent-hover: #1a43bd;
  --accent-light: #7aa2ff;
  --accent-soft: rgba(29, 78, 216, 0.10);
  --night: #0b0b0c;
  --night-2: #161719;
  --night-hair: rgba(255, 255, 255, 0.10);
  --good: #0e7a28;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 18px 42px rgba(60, 40, 25, 0.10);
  --shadow-soft: 0 10px 24px rgba(60, 40, 25, 0.08);
  --shadow-accent: 0 12px 28px rgba(29, 78, 216, 0.30);
  --r-card: 20px;
  --r-pill: 999px;
  --nav-h: 72px;
  --pad: clamp(18px, 4vw, 48px);
  --max: 1240px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-soft: cubic-bezier(.45, .05, .2, 1);
  --accent-text: #1d4ed8;
  --pill-bg: #131415; --pill-fg: #ffffff;
  --phone: #131415;
  --surface-2: rgba(19, 20, 21, 0.05); --surface-3: rgba(19, 20, 21, 0.09);
  --eyebrow-bg: rgba(255, 255, 255, 0.75);
  --contact-wash: rgba(255, 255, 255, 0.6);
  --glass-a: rgba(255, 255, 255, 0.72); --glass-b: rgba(255, 255, 255, 0.44);
  --glass-rim: rgba(255, 255, 255, 0.75); --glass-line: rgba(19, 20, 21, 0.07); --glass-shadow: rgba(60, 40, 25, 0.14);
  --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;
}
html[data-side="editors"] {
  color-scheme: dark;
  --cream: #0b0b0c; --cream-2: #141517; --card: #151618;
  --ink: #ffffff; --ink-2: rgba(255, 255, 255, 0.78); --muted: rgba(255, 255, 255, 0.6);
  --hair: rgba(255, 255, 255, 0.08); --hair-2: rgba(255, 255, 255, 0.16);
  --accent-ink: #7aa2ff; --accent-text: #6f9bff; --accent-soft: rgba(122, 162, 255, 0.14);
  --night: #000000; --night-2: #111214;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 18px 42px rgba(0, 0, 0, 0.5);
  --shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.4);
  --pill-bg: #ffffff; --pill-fg: #0b0b0c;
  --surface-2: rgba(255, 255, 255, 0.07); --surface-3: rgba(255, 255, 255, 0.12);
  --eyebrow-bg: rgba(255, 255, 255, 0.06);
  --contact-wash: rgba(255, 255, 255, 0.03);
  --glass-a: rgba(28, 28, 31, 0.78); --glass-b: rgba(28, 28, 31, 0.56);
  --glass-rim: rgba(255, 255, 255, 0.16); --glass-line: rgba(0, 0, 0, 0.5); --glass-shadow: rgba(0, 0, 0, 0.55);
  --band-bg: #0b0b0c; --band-fg: rgba(255, 255, 255, 0.72); --band-head: #ffffff; --band-hair: rgba(255, 255, 255, 0.10);
}
*, *::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 { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); }
.mark { width: 26px; height: 26px; transform: translateY(-2.5px); }
.mark-out { fill: var(--accent); }
.mark-in { fill: var(--pill-fg); }
.wordmark { font-family: var(--f-display); font-weight: 900; font-size: 1.45rem; letter-spacing: -0.05em; line-height: 1; }
.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;
}
.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; }
.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);
}
.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; }
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 18px; border-radius: var(--r-pill);
  font-weight: 700; font-size: .92rem; text-decoration: none; white-space: nowrap;
  transition: transform .18s, box-shadow .18s, background .18s;
}
.pill:hover { transform: translateY(-1px); }
.pill-ghost { background: var(--card); border: 1px solid var(--hair-2); box-shadow: var(--shadow-soft); }
.pill-ink { background: var(--pill-bg); color: var(--pill-fg); }
.pill-ink:hover { box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 58px; padding: 0 26px; border-radius: 16px; border: 0; cursor: pointer;
  font-weight: 700; font-size: 1.04rem; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
  transition: transform .18s, box-shadow .18s, background .18s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .arr { display: inline-block; transition: transform .2s; }
.btn:hover .arr { transform: translateX(4px); }
.btn-accent { background: var(--accent); color: #fff; box-shadow: var(--shadow-accent); }
.btn-accent:hover { background: var(--accent-hover); box-shadow: 0 16px 34px rgba(29, 78, 216, 0.38); }
.btn-white { background: var(--card); color: var(--ink); box-shadow: var(--shadow-soft), 0 0 0 1px var(--hair) inset; }
.btn-lg { height: 58px; padding: 0 28px; }
.btn-wide { width: 100%; }
.glow { position: absolute; pointer-events: none; z-index: 0; }
.glow-hero {
  inset: -120px -10% 0 -10%;
  background:
    radial-gradient(50% 55% at 76% 36%, rgba(29, 78, 216, 0.13), transparent 68%),
    radial-gradient(36% 40% at 100% 92%, rgba(122, 162, 255, 0.20), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
.glow-how { inset: 0; background: radial-gradient(40% 50% at 0% 30%, rgba(29, 78, 216, 0.06), transparent 70%); }
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.kicker { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 14px; }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.18); flex: none; }
.hero { position: relative; padding: calc(var(--nav-h) + 40px) 0 48px; overflow: hidden; }
.hero-grid { position: relative; z-index: 1; display: grid; gap: 44px; align-items: center; }
.hero-copy { min-width: 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 12px; border-radius: var(--r-pill);
  background: var(--eyebrow-bg); border: 1px solid var(--hair); box-shadow: var(--shadow-soft);
  font-size: .86rem; font-weight: 600; color: var(--ink-2);
}
.hero-title {
  margin-top: 24px;
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(2.7rem, 10.5vw, 5rem); line-height: 0.95; letter-spacing: -0.045em;
}
.hero-title .ln { display: block; }
.ln-accent { color: var(--accent-text); margin-top: .08em; }
.hero-sub { margin-top: 22px; max-width: 40ch; font-size: clamp(1.05rem, 2.6vw, 1.2rem); color: var(--ink-2); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-cta .btn { flex: 1 1 auto; }
.hero-fine { margin-top: 16px; font-size: .88rem; color: var(--muted); }
.hero-art { 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; }
.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;
}
.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-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); }
.pos-b .scr-foot { opacity: 0; }
.sound-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 { transform: scale(1.06); }
.sound-ctrl[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: transparent; }
.sound-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; }
html:not(.js) .sound-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; }
.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% + 66px); 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; }
.stats { position: relative; z-index: 1; padding: 40px 0 64px; }
.stat-grid { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--hair-2); border-bottom: 1px solid var(--hair-2); }
.stat { padding: 30px 8px 26px; text-align: center; }
.stat + .stat { border-top: 1px solid var(--hair-2); }
.stat-n { font-family: var(--f-display); font-weight: 900; font-size: clamp(3.2rem, 13vw, 5rem); line-height: .94; letter-spacing: -0.05em; }
.stat-n .u { font-size: .6em; letter-spacing: -0.03em; margin-left: .03em; }
.stat-n .p { font-size: .5em; margin-left: .03em; vertical-align: .72em; line-height: 0; color: var(--accent-text); }
.stat-l { margin-top: 10px; font-weight: 600; color: var(--ink-2); }
.stat-note { margin-top: 14px; text-align: center; font-size: .76rem; color: var(--muted); }
.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-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; }
.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: 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-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; }
.mock-bar::after { content: ""; display: block; height: 100%; width: var(--p, 40%); background: #16a34a; border-radius: 99px; }
.mock-btn { display: block; text-align: center; margin-top: 12px; padding: 14px; border-radius: 12px; background: #1d4ed8; color: #fff; font-weight: 700; font-size: .95rem; }
.mock-big { font-family: var(--f-display); font-weight: 900; font-size: clamp(2.2rem, 6vw, 2.8rem); letter-spacing: -0.04em; line-height: 1; margin: 6px 0 12px; font-variant-numeric: tabular-nums; }
.mock-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; }
@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; }
.join-card { padding: 24px; }
.join-card ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.join-card li { position: relative; padding-left: 22px; font-size: 1rem; line-height: 1.5; color: var(--ink-2); }
.join-card li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.join-card b { color: var(--ink); }
.head .btn + .mail-card { margin-top: 22px; }
.faq-head { display: flex; flex-direction: column; align-items: flex-start; }
.faq-lead { margin: 18px 0 26px; }
.faq-body { margin-top: 36px; }
.faq-label { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--hair-2); font-family: var(--f-body); font-size: .82rem; font-weight: 700; color: var(--muted); }
.faq-list { margin-top: 8px; }
.qa { border-bottom: 1px solid var(--hair-2); }
.q {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 1.06rem; letter-spacing: -0.02em; line-height: 1.35; color: var(--ink);
}
.q::-webkit-details-marker { display: none; }
.q:hover { color: var(--accent-ink); }
.plus {
  flex: none; width: 32px; height: 32px; padding: 7px; border-radius: 50%;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round;
  color: var(--muted); background: var(--surface-2);
  transition: transform .25s var(--ease), color .2s, background .2s;
}
.q:hover .plus { color: var(--ink); background: var(--surface-3); }
.qa[open] .plus { transform: rotate(45deg); color: #fff; background: var(--accent); }
.a { max-width: 62ch; padding: 0 0 22px; font-size: .98rem; line-height: 1.8; color: var(--ink-2); }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .qa::details-content { block-size: 0; overflow: hidden; transition: block-size .32s var(--ease), content-visibility .32s allow-discrete; }
  .qa[open]::details-content { block-size: auto; }
}
.inline { font-weight: 700; color: var(--ink); text-underline-offset: 3px; }
.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); }
.close { position: relative; padding: 88px 0; background: var(--band-bg); color: var(--band-head); overflow: hidden; }
.close::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 60% at 8% 50%, rgba(70, 120, 255, 0.22), transparent 70%); }
.close-grid { position: relative; display: grid; gap: 44px; align-items: center; }
.close .accent { color: var(--accent-text); }
.close .hero-cta { margin-top: 28px; }
.close .btn-white { background: #fff; color: #131415; box-shadow: var(--shadow-soft); }
.close-cards { display: flex; justify-content: center; gap: 14px; }
.ccard { width: clamp(96px, 26vw, 180px); aspect-ratio: 9 / 16; margin: 0; border-radius: 18px; overflow: hidden; background: #1b1c1e; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.ccard .vid { width: 100%; height: 100%; object-fit: cover; }
.c1 { transform: rotate(-4deg) translateY(6px); }
.c2 { transform: translateY(26px); }
.c3 { transform: rotate(4deg) translateY(6px); }
.ftr { background: var(--band-bg); color: var(--band-fg); padding: 64px 0 40px; border-top: 1px solid var(--band-hair); }
.ftr-grid { display: grid; gap: 40px; padding-bottom: 36px; border-bottom: 1px solid var(--band-hair); }
.ftr-brand { display: flex; flex-direction: column; align-items: flex-start; }
.ftr-tag { margin-top: 14px; max-width: 30ch; }
.pill-discord { margin-top: 20px; background: #5865f2; color: #fff; }
.pill-discord:hover { box-shadow: 0 8px 18px rgba(88, 101, 242, 0.4); }
.ftr-legal a { text-decoration: none; }
.ftr-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.col-h { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--band-head); margin-bottom: 14px; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ftr a { text-decoration: none; transition: color .2s; }
.ftr a:hover { color: var(--band-head); }
.ftr-legal { padding-top: 24px; font-size: .88rem; }
@media (max-width: 360px) {
  .nav-r .pill { padding: 0 14px; font-size: .84rem; }
  .btn { padding: 0 20px; }
}
@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(3, minmax(0, 200px)); }
  .scr-views { font-size: 1.45rem; }
}
@media (min-width: 900px) {
  .nav-links { display: flex; }
  .nav-r .nav-hide-sm { display: inline-flex; }
  .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; }
}
@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 { display: none; }
}
@media (min-width: 900px) and (min-height: 820px) {
  .faq-head { position: sticky; top: calc(var(--nav-h) + 40px); }
}
html.lite { scroll-behavior: auto; }
html.lite .hdr::before {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.88));
  transition: opacity .5s var(--ease-soft);
}
html.lite[data-side="editors"] .hdr::before { background: linear-gradient(180deg, rgba(28, 28, 31, 0.96), rgba(28, 28, 31, 0.9)); }
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(29, 78, 216, 0.13), transparent 68%),
    radial-gradient(36% 40% at 100% 92%, rgba(122, 162, 255, 0.20), transparent 70%);
}
html.lite .amb { filter: none; }
html.lite .phone { transition: transform .8s var(--ease); }
html.lite .phone::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: #000; opacity: 0; pointer-events: none; transition: opacity .8s; }
html.lite .pos-l, html.lite .pos-r, html.lite .pos-b { filter: none; }
html.lite .pos-l::after, html.lite .pos-r::after { opacity: .18; }
html.lite .pos-b::after { opacity: .4; }
html.lite.js .reveal { transform: none; transition: opacity .4s var(--ease); }
html.lite.js .mock.run .mock-checks li, html.lite.js .mock.run .mock-list li, html.lite.js .mock.run .mock-btn, html.lite.js .mock.run .mock-note, html.lite.js .mock.run .ck, html.lite.js .mock.run .mock-bar::after, html.lite.js .mock.run [data-count] { animation: none; }
@media print {
  html[data-side="editors"] {
    --cream: #ffffff; --cream-2: #f2f2f2; --card: #ffffff; --ink: #131415; --ink-2: #3a3a3b; --muted: #666666;
    --hair: rgba(19, 20, 21, 0.07); --hair-2: rgba(19, 20, 21, 0.13); --accent-ink: #1d4ed8; --accent-text: #1d4ed8;
    --pill-bg: #131415; --pill-fg: #ffffff; --night: #0b0b0c; --night-2: #161719;
  }
  .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; }
}
/* kozu.gg:start */
/* The hidden attribute wins over a class that sets display (a button, a pill, a note): the script shows and hides the calls
   to action by it, and as written the page needs no script to be right. */
[hidden] { display: none !important; }
/* On kozumedia.com every block that differs by side sits in a grid that holds both sides. Here there is one side, so the
   one block that relied on that grid to centre its card is a grid itself. */
.row-card { display: grid; }
.row-card > * { min-width: 0; }
/* The same grid, on his page, keeps the space above the list of questions apart from the space above its label. */
.faq-body { display: flow-root; }
/* Where his page has the side switch, this one has the place for one line: how many campaigns are live now, a link to
   Explore, in his own eyebrow pill. The place is kept whether or not the line is there, so the title never moves. */
.live-slot { display: flex; align-items: center; min-height: 46px; margin-bottom: 46px; }
a.eyebrow { text-decoration: none; transition: color .2s, border-color .2s; }
a.eyebrow:hover { color: var(--ink); border-color: var(--hair-2); }
/* The lines the app says about signing in (not available, the session ended): the fine print's place, a size up. */
.hero-note { margin-top: 16px; max-width: 46ch; font-size: .95rem; font-weight: 600; color: var(--ink-2); }
/* THE ROOM HIS PAGE KEEPS. On kozumedia.com each block that differs by side is as tall as the taller of its two sides, so the
   editors page has room under some blocks that the other side fills. The same room is kept here, as measured on his page at
   every width from 320 to 1920 pixels (2026-10-13): two lines for the line under the title; three lines for the first row's
   text, four on a phone; the height of his other side's card in the second and third row (the third grows with its own big
   figure); a third line for the FAQ title beside the list; and on a phone a third or fourth line for the "how it works"
   title, a fourth or fifth for its lead, and a third for the closing title and the FAQ title. Each width below is the last
   one at which his other side still takes that line. */
.hero-sub { min-height: 3.1em; }
.row:nth-child(1) .row-text p { min-height: 4.65em; }
.row:nth-child(2) .row-card { min-height: 422px; }
.row:nth-child(3) .row-card { min-height: calc(351.5px + clamp(2.2rem, 6vw, 2.8rem)); }
@media (max-width: 437px) {
  .how-head .lead { min-height: 6.2em; }
}
@media (max-width: 418px) {
  .how-head .h2 { min-height: 2.94em; }
}
@media (max-width: 408px) {
  .close-copy .h2 { min-height: 2.94em; }
}
@media (max-width: 399px) {
  .row:nth-child(1) .row-text p { min-height: 6.2em; }
}
@media (max-width: 348px) {
  .how-head .lead { min-height: 7.75em; }
}
@media (max-width: 344px) {
  .how-head .h2 { min-height: 3.92em; }
}
@media (max-width: 341px) {
  .faq-head .h2 { min-height: 2.94em; }
}
@media (min-width: 900px) {
  .faq-head .h2 { min-height: 2.94em; }
}
/* On the narrowest phones the three closing cards are wider than the column, and on his page they hold it wider than the
   screen: the title and the buttons are cut off at the right edge at 320px. Here nothing in the band holds the column wider
   than the screen: the cards give way and the title wraps. */
.close-grid > * { min-width: 0; }
/* The join block has a row of buttons where his has one button, and one line more under its lead. */
.lead-more { margin-top: -12px; }
.head .hero-cta { margin-top: 0; }
.head .hero-cta .btn { flex: 0 0 auto; }
.head .mail-card { margin-top: 22px; }
/* THE PAIRS OF BUTTONS. The words on these buttons are longer than his, so a pair runs out of room where his still shares a
   row: the join pair in a column narrower than 426px, the closing pair in one narrower than 438px, the hero pair between 900
   and 939px. Left to wrap, each button kept its own width and the two stood ragged. A pair that cannot share a row now
   stands as one column as wide as its wider button, so both are one width. Under 640px the hero and closing pairs are his
   own full width column and are left alone. */
.close-copy, .head { container-type: inline-size; }
@container (max-width: 425.9px) {
  .head .hero-cta { display: grid; grid-template-columns: max-content; }
}
@media (min-width: 640px) {
  @container (max-width: 437.9px) {
    .close .hero-cta { display: grid; grid-template-columns: max-content; }
  }
}
@media (min-width: 900px) and (max-width: 939px) {
  .hero .hero-cta { display: grid; grid-template-columns: max-content; }
}
/* BEFORE THE SCRIPT HAS RUN his stylesheet takes the row of controls under the stack away, and puts it back when the script
   arrives: on a first visit the hero grew by the row (54px) a moment after it was drawn, and everything under it moved.
   The row keeps its room from the start, with nothing drawn and nothing to press, so nothing moves. */
html:not(.js) .art-ctrl { display: flex; visibility: hidden; }
html:not(.js) .sound-ctrl { display: grid; }
/* His one filled bar is set in the markup (style="--p:62%"); the policy here allows no style attribute. */
.mock-bar { --p: 62%; }
/* A pill, the sound control and the live line 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. */
.pill, .sound-ctrl, a.eyebrow { position: relative; }
.pill::after, .sound-ctrl::after, a.eyebrow::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
/* kozu.gg:end */