/* 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);
}
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; line-height: 0.98; }
/* A storefront that sets its headings in caps says so in theme.chrome.heading_transform. Public
   pages only: the portal handles caps inside each signature, and the admin stays sentence case. */
.public h1, .public h2 { text-transform: var(--heading-transform, none); }
.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(--header-bg, var(--bg)) 94%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom-color: var(--header-line, var(--line)); }
.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 (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) {
  /* One line at every width. This used to become a four-track grid, which was fine for four clips
     and wrapped the fifth and sixth onto a second row once real content landed. Scrolling sideways
     keeps each set readable as a single run and keeps the page short. */
  .tiles { gap: 20px; padding: 4px 0 18px; margin: 0; scroll-padding: 0; }
  .tile { flex: 0 0 265px; max-width: 265px; }
}

/* ---------- carousel ---------- */
/* The arrows are for pointer users; touch swipes and the keyboard already work through the
   scroller itself. They hide entirely when everything fits, and each one disables at its end. */
.carousel { position: relative; }
.carousel .tiles { scrollbar-width: none; }
.carousel .tiles::-webkit-scrollbar { display: none; }
.car-nav { position: absolute; top: 33%; z-index: 3; width: 40px; height: 40px; display: none; place-items: center; padding: 0; cursor: pointer; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); }
.car-nav:hover:not(:disabled) { background: var(--surface); }
.car-nav:disabled { opacity: 0.3; cursor: default; }
.car-nav.prev { left: -14px; }
.car-nav.next { right: -14px; }
.car-nav svg { width: 17px; height: 17px; }
.carousel.has-overflow .car-nav { display: grid; }
@media (hover: none) { .car-nav { display: none !important; } }

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

/* ==========================================================================================
   /results: the proof-of-performance page (RCSS step 7, docs/PLAYBOOK-GAP.md). Same language as
   the landing: display type, hairline grid, counters. Aggregate only, so there is nothing here
   that renders a person.
   ========================================================================================== */

.res-hero { padding-bottom: 8px; }
.res-hero .hero-title { max-width: 16ch; }
.res-counters { width: 100%; }
.res-counters .counter { padding: 22px 20px; }
.res-counters .counter .n { font-size: clamp(34px, 8vw, 56px); }
.res-counters .counter .l { margin-top: 10px; }
.res-note { margin: 18px 0 0; max-width: 66ch; }
.res-how { margin-top: 0; }
.res-how li { font-size: clamp(16px, 2vw, 20px); font-weight: 400; }
.res-empty { max-width: 720px; }
.res-empty-title { font-size: clamp(36px, 8vw, 72px); margin: 10px 0 18px; }
.res-cta { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin: 24px 0 0; }
@media (min-width: 900px) {
  .res-counters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- storefront-matched hero ----------
   digipop runs copy left, product right, on white, with the deal as ticked rows and a soft pink
   CTA. Driven by the same chrome tokens as the header, so a brand with no hero image keeps the
   original single-column hero. */
.hero.has-media { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
/* the brand's own corner, not a fixed 10px: Sugoi and Bruised are hard-edged brands */
.hero-media img { width: 100%; height: auto; border-radius: var(--radius, 10px); display: block; }
@media (min-width: 900px) {
  .hero.has-media { grid-template-columns: 1.05fr 0.95fr; gap: 56px; padding-block: 56px; }
  /* 40ch throttled the copy column to ~400px, which left a dead gap before the image and made the
     deal rows wrap far more than they need to. */
  .hero.has-media .hero-copy { max-width: 52ch; }
}
/* the deal rows read as ticked product benefits, the way the store lists them */
.deal div { position: relative; padding-left: 30px; }
.deal div::before { content: ""; position: absolute; left: 0; top: calc(10px + 0.7em - 9.5px); width: 19px; height: 19px; border-radius: 999px; background: var(--accent2, var(--accent)); }
.deal div::after { content: ""; position: absolute; left: 6px; top: calc(10px + 0.7em - 3.5px); width: 7px; height: 4px; border-left: 2px solid var(--btn-ink, #fff); border-bottom: 2px solid var(--btn-ink, #fff); transform: rotate(-45deg); }
.deal dt { color: var(--muted); }
/* the counters sit as one proof strip under the button, like the review cluster on the store */
.hero-counters { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }


/* two-column hero: the headline has half the width, so it cannot run at full display size */
@media (min-width: 900px) {
  .hero.has-media .hero-title { font-size: clamp(40px, 4.4vw, 62px); max-width: 14ch; }
  .hero.has-media .hero-lead { font-size: 18px; }
  .hero.has-media .deal { margin-top: 22px; }
  .hero.has-media .hero-counters { margin-top: 26px; }
}
.hero.has-media .hero-title { font-size: clamp(38px, 8.5vw, 60px); max-width: 15ch; }


/* more air: the hero was tight against the chrome above and the first section below */
.hero { padding: 56px 0 72px; }
.hero-title { margin: 18px 0 22px; }
.hero-lead { margin: 0 0 8px; }
@media (min-width: 860px) {
  .hero.has-media { gap: 72px; padding-block: 76px; }
}