/* Public funnel. Mobile first. Every colour is a brand or semantic variable from base.css and
   the layout, so light and dark both work for any brand. Display type comes from --font-display,
   which is a single-weight face for most brands, so headings here are weight 400.

   Three funnel-local tokens exist because the shared semantic colours are tuned for chips on
   cards, not for small text on the page background, and they measured below WCAG AA there:
   --good-ink / --warn-ink darken the light-theme greens and ambers to clear 4.5:1 on both --bg
   and --surface, and --control-line gives form controls the 3:1 boundary that 1.4.11 asks for
   (the raw --line hairline is 1.3:1, fine for decoration, invisible as a field edge). */

body.public {
  overflow-x: hidden;
  --good-ink: color-mix(in srgb, var(--good) 78%, #000);
  --warn-ink: color-mix(in srgb, var(--warn) 72%, #000);
  --control-line: color-mix(in srgb, var(--ink) 55%, transparent);
  --label-ink: color-mix(in srgb, var(--ink) 78%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.public { --good-ink: var(--good); --warn-ink: var(--warn); }
}
:root[data-theme="dark"] body.public { --good-ink: var(--good); --warn-ink: var(--warn); }

.display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; line-height: 0.98; }
.lead { font-size: 18px; line-height: 1.5; max-width: 640px; }
.eyebrow span { color: var(--muted); }

/* Keyboard focus. The brand --accent2 is a pale tint for some brands (digipop light measured
   1.96:1 against the page), so the funnel rings in --ink, which is the body contrast pair and
   therefore never below 12:1 in either theme. */
body.public :focus-visible,
body.public .btn:focus-visible,
body.public a:focus-visible,
body.public input:focus-visible,
body.public select:focus-visible,
body.public textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
body.public .menu-overlay :focus-visible { outline-color: var(--bg); }
body.public .track-card:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; }

/* ---------- top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 40; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.menu-toggle { justify-self: start; width: 44px; height: 44px; padding: 0; background: none; border: 0; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.menu-icon { display: inline-flex; flex-direction: column; justify-content: space-between; width: 22px; height: 14px; }
.menu-icon span { display: block; height: 2px; background: currentColor; border-radius: 1px; }
.brand-lock { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; text-decoration: none; color: var(--ink); }
/* Single-colour logos with alpha are painted in --ink through a mask, so a white logo shows on a
   light page and a black logo shows on a dark one. One request: the mask is the only consumer. */
.logo-mask { display: block; width: 118px; height: 32px; background: var(--ink); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.brand-creators { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; }
.utility { justify-self: end; display: inline-flex; align-items: center; gap: 10px; }
.casting { display: none; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); align-items: center; gap: 8px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); display: inline-block; flex: none; }
.dot.live { background: var(--accent2, var(--accent)); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
body.public .theme-toggle { color: var(--ink); width: 44px; height: 44px; border-color: transparent; }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .tt-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .tt-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .tt-moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle .tt-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .tt-moon { display: none; }
@media (min-width: 720px) {
  .topbar { padding: 10px 28px; }
  .logo-mask { width: 148px; height: 40px; }
  .casting { display: inline-flex; }
}

/* ---------- menu overlay ---------- */
.menu-overlay { position: fixed; inset: 0; z-index: 100; background: var(--ink); color: var(--bg); overflow-y: auto; animation: fade 0.18s ease; }
.menu-overlay[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.menu-close { position: absolute; top: 8px; left: 10px; width: 48px; height: 48px; background: none; border: 0; color: inherit; cursor: pointer; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
.menu-close:hover { background: color-mix(in srgb, var(--bg) 10%, transparent); }
.menu-panel { max-width: 720px; margin: 0 auto; padding: 84px 24px 48px; display: flex; flex-direction: column; }
.menu-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; padding-bottom: 20px; margin-bottom: 8px; border-bottom: 1px solid color-mix(in srgb, var(--bg) 18%, transparent); }
.menu-eyebrow span { opacity: 0.55; }
.menu-item { display: flex; gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid color-mix(in srgb, var(--bg) 10%, transparent); color: inherit; text-decoration: none; font-family: var(--font-display); font-size: clamp(28px, 7vw, 44px); line-height: 1; letter-spacing: -0.01em; transition: padding-left 0.2s ease, opacity 0.15s ease; }
.menu-item:hover { padding-left: 8px; opacity: 0.75; }
.menu-num { font-family: var(--font-mono); font-size: 12px; opacity: 0.6; width: 40px; flex: none; letter-spacing: 0.08em; }
.menu-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 24px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.menu-links a { color: inherit; opacity: 0.8; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; }
.menu-links a:hover { opacity: 1; }
.menu-foot { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; }
body.menu-open { overflow: hidden; }

/* ---------- hero ---------- */
.hero { padding: 36px 0 48px; }
.hero-eyebrow { display: flex; align-items: center; gap: 10px; }
.hero-title { font-size: clamp(42px, 11.5vw, 128px); margin: 14px 0 20px; max-width: 12ch; }
.hero-lead { font-size: 18px; line-height: 1.4; max-width: 620px; margin: 0 0 20px; }
.hero-lead strong { font-weight: 600; }
/* The deal, above the fold: what you get, what you give, what it costs you right now. */
.deal { display: grid; gap: 0; margin: 0 0 24px; max-width: 620px; border-top: 1px solid var(--line); }
.deal > div { display: grid; grid-template-columns: 82px 1fr; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); }
.deal dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.deal dd { margin: 0; font-size: 15px; line-height: 1.4; }
/* Flex, not the base grid: the box shrinks to however many counters the brand shows, cells
   grow to fill their row, and a wrap never leaves an empty track. Hairlines are each cell's
   left and top border, pulled 1px outward so later cells paint them over earlier ones and the
   first row and column tuck under the outer border. */
.hero-counters { display: flex; flex-wrap: wrap; gap: 0; width: fit-content; max-width: 100%; margin: 0; background: transparent; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.hero-counters .counter { flex: 1 1 150px; min-width: 150px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); margin: -1px 0 0 -1px; }
.hero-cta { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 28px; }
.btn.lg { padding: 18px 28px; font-size: 13px; min-height: 44px; }
.scroll-hint { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.scroll-hint::before { content: ''; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.scroll-hint:hover { color: var(--ink); }
@media (min-width: 900px) {
  .hero { padding: 72px 0 80px; }
  .hero-title { margin: 18px 0 24px; }
  .hero-lead { font-size: 20px; margin-bottom: 28px; }
  .deal > div { grid-template-columns: 104px 1fr; }
  .deal dd { font-size: 16px; }
  .hero-cta { margin-bottom: 36px; }
}

/* ---------- sections ---------- */
.section { border-top: 1px solid var(--line); padding: 56px 0; }
.section-head { margin-bottom: 28px; max-width: 860px; }
.section-title { font-size: clamp(40px, 10vw, 96px); margin: 10px 0 14px; }
.section-sub { font-size: 17px; line-height: 1.5; color: var(--muted); max-width: 620px; margin: 0; }
.section-bad .section-title { color: var(--bad); }
@media (min-width: 900px) {
  .section { padding: 96px 0; }
  .section-head { margin-bottom: 40px; }
}

/* ---------- video tiles ---------- */
.tiles { display: flex; align-items: start; gap: 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 0 16px; padding: 4px 16px 16px; margin: 0 -16px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.tile { flex: 0 0 76vw; max-width: 300px; scroll-snap-align: start; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.tile .video-tile { border-radius: 0; flex: none; }
.tile-body { padding: 14px 16px 16px; }
.tile-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.tile-head .eyebrow { margin: 0; white-space: nowrap; }
.tile-good .tier { color: var(--good-ink); }
.tile-bad .tier { color: var(--bad); }
.tile .chip { white-space: normal; text-align: left; }
.tile .chip.pos { color: var(--good-ink); border-color: var(--good-ink); }
.tile .chip.neu { color: var(--warn-ink); border-color: var(--warn-ink); }
/* Grade badges sit on top of video, so a semantic fill would land on unknown pixels and the
   white-on-green pairing measured 2.2:1 in dark. A solid surface chip with the semantic colour
   as text and border clears 4.5:1 in every brand and theme. */
.tile .grade-badge { background: var(--surface); border: 1px solid currentColor; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35); }
.tile .grade-badge.great, .tile .grade-badge.good, .tile .grade-badge.okay { color: var(--good-ink); }
.tile .grade-badge.mid { color: var(--ink); border-color: var(--line); }
.tile .grade-badge.low, .tile .grade-badge.fail { color: var(--bad); }
.tile .video-tile .num { background: rgba(0, 0, 0, 0.55); border-radius: 2px; padding: 2px 5px; opacity: 1; }
.tile-note { margin: 12px 0 0; padding: 10px 12px; font-size: 13px; line-height: 1.45; font-style: italic; color: var(--muted); border-left: 2px solid var(--line); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.tile-good .tile-note { border-left-color: var(--good-ink); }
.tile-bad .tile-note { border-left-color: var(--bad); }
/* Placeholder for a clip with no poster frame yet: a still black box reads as broken. */
.tile-fallback { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.32); background: repeating-linear-gradient(135deg, #1a1a1a 0 12px, #141414 12px 24px); }
.tile-fallback::after { content: ''; width: 0; height: 0; border-left: 26px solid rgba(255, 255, 255, 0.32); border-top: 16px solid transparent; border-bottom: 16px solid transparent; }
.video-tile.no-poster .tile-fallback { display: flex; }
.video-tile.no-poster.is-playing .tile-fallback { display: none; }
.tile-play { position: absolute; inset: 0; margin: auto; width: auto; height: 44px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(0, 0, 0, 0.62); color: #fff; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
.tile-play[hidden] { display: none; }
.tp-glyph { width: 0; height: 0; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.tile-noscript { position: absolute; inset: auto 0 0 0; padding: 12px; text-align: center; background: rgba(0, 0, 0, 0.65); color: #fff; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.unmute { position: absolute; right: 8px; bottom: 8px; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(0, 0, 0, 0.62); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.unmute svg { width: 20px; height: 20px; }
.unmute .vu-on, .unmute .vu-off { display: none; }
.unmute[data-state="muted"] .vu-off { display: block; }
.unmute[data-state="unmuted"] .vu-on { display: block; }
.unmute[data-state="unmuted"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
@media (min-width: 900px) {
  /* --cols is the tile count capped at four, so two clips do not sit in a four-track grid with
     three empty columns. */
  .tiles { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(180px, 265px)); justify-content: start; gap: 20px; overflow: visible; padding: 0; margin: 0; }
  .tile { flex: none; max-width: none; }
}

/* ---------- teaching list (shown until graded examples exist) ---------- */
.teach { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); max-width: 860px; }
.teach li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: clamp(18px, 2.4vw, 24px); line-height: 1.3; font-weight: 500; }
.teach-num { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; }
.teach-good .teach-num { color: var(--good-ink); }
.teach-bad .teach-num { color: var(--bad); }

/* ---------- rubric ---------- */
.rubric { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.rubric-card { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 22px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); align-items: start; }
.rubric-num { font-family: var(--font-mono); font-size: 16px; font-weight: 700; line-height: 1.3; }
.rubric-card h3 { font-size: 17px; margin: 0 0 6px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; line-height: 1.3; }
.rubric-card p { font-size: 14px; line-height: 1.5; color: var(--muted); margin: 0; }
.rubric-card.required { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.rubric-pass { margin: 16px 0 0; max-width: 620px; }
@media (min-width: 640px) { .rubric { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .rubric { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- apply form ---------- */
.apply-form { max-width: 880px; display: flex; flex-direction: column; gap: 32px; }
.apply-form[hidden] { display: none; }
.form-block { border: 0; margin: 0; padding: 24px 0 0; border-top: 1px solid var(--line); min-width: 0; }
.form-block[hidden] { display: none; }
.form-legend { float: left; width: 100%; padding: 0; margin: 0 0 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); display: flex; gap: 10px; align-items: center; }
.form-legend span { background: var(--ink); color: var(--bg); padding: 2px 8px; border-radius: 2px; }
.form-fields { clear: both; }
.block-hint { margin: 0 0 16px; }
.field-hint { margin: 0; }
.apply-form .field { margin-bottom: 16px; }
/* 11px uppercase mono in --muted is a caption, not a form label. These get read on a phone. */
.apply-form .field label, .details-form .field label { font-size: 12px; letter-spacing: 0.1em; color: var(--label-ink); }
.apply-form input, .apply-form select, .apply-form textarea,
.recover-form input { border-color: var(--control-line); min-height: 46px; }
.apply-form textarea { min-height: 128px; }
.apply-form input:focus, .apply-form select:focus, .apply-form textarea:focus { border-color: var(--ink); }
.apply-form .track-card { font-family: var(--font-body); font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.4; padding: 18px 18px 18px 46px; min-height: 60px; display: flex; align-items: center; border-color: var(--control-line); }
.apply-form .track-card::before { content: ''; position: absolute; left: 18px; top: 50%; margin-top: -8px; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--control-line); background: var(--bg); }
.apply-form .track-card:has(input:checked)::before { border: 5px solid var(--bg); background: var(--accent); }
.field-error { color: var(--bad); font-size: 13px; margin: 0; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--bad); border-width: 2px; }
.form-foot { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; border-top: 1px solid var(--line); padding-top: 24px; }
.form-foot .field { margin: 0; }
.form-foot .check { min-height: 44px; align-items: center; }
.form-foot .check input { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.status-msg:empty { display: none; }
.contact-strip { margin-top: 32px; padding: 18px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); max-width: 880px; display: flex; flex-direction: column; gap: 6px; }
.contact-strip .eyebrow { margin: 0; }
.contact-strip a { display: inline-flex; align-items: center; min-height: 44px; font-size: 18px; text-decoration: none; border-bottom: 1px solid var(--ink); align-self: flex-start; }
.success-card { max-width: 720px; }
.success-card[hidden] { display: none; }
.success-card .section-title { margin-bottom: 18px; }
.success-card h2:focus-visible { outline-offset: 6px; }
.portal-cta { margin: 0 0 18px; }
.already-card { max-width: 720px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.already-card .lead { margin-bottom: 20px; }

/* ---------- details step: shipping and sizing, after the application is in ---------- */
.details-step { max-width: 880px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
[data-details-slot][hidden] { display: none; }
.details-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 4vw, 32px); letter-spacing: -0.01em; margin: 0 0 8px; }
.details-step .hint { max-width: 560px; margin-bottom: 8px; }
.details-form { margin-top: 8px; gap: 28px; }
.details-saved { max-width: 880px; margin-top: 32px; }

/* ---------- narrow pages: applied, recover ---------- */
.narrow-page { padding: 48px 0 80px; }
.narrow-page .back-row { margin-top: 28px; }
.recover h1 { font-size: clamp(40px, 9vw, 64px); margin: 8px 0 14px; }
.recover-form { max-width: 460px; margin-top: 24px; }
.recover-form .field label { font-size: 12px; letter-spacing: 0.1em; color: var(--label-ink); }
.recover-foot { margin-top: 32px; }
.recover-foot a, .foot-recover a { display: inline-block; padding: 12px 0; }

/* ---------- legal ---------- */
.legal { padding: 44px 0 80px; }
.legal h1 { font-size: clamp(36px, 8vw, 64px); margin: 8px 0 8px; }
.legal-updated { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 28px; }
.legal-lead { font-size: 17px; line-height: 1.6; margin: 0 0 32px; }
.legal section { border-top: 1px solid var(--line); padding: 28px 0 10px; }
.legal h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 4vw, 32px); margin: 0 0 12px; letter-spacing: -0.01em; }
.legal h3 { font-size: 16px; margin: 18px 0 6px; }
.legal p, .legal li { font-size: 15px; line-height: 1.65; }
.legal ul { padding-left: 20px; margin: 0 0 14px; }
.legal li { margin-bottom: 6px; }
.legal .back-row { margin-top: 32px; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding: 24px 0 36px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.foot-grid { display: grid; gap: 8px; }
.foot-brand { font-weight: 700; }
.foot-links { display: flex; gap: 16px; margin-left: -6px; }
.foot-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }
.foot-recover { margin: 0; text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: 14px; color: var(--muted); }
.foot-recover a { color: var(--ink); }
@media (min-width: 900px) {
  .foot-grid { grid-template-columns: auto 1fr auto; align-items: center; }
  .foot-line { text-align: center; }
  .foot-recover { grid-column: 1 / -1; }
}