/* GoodStrata marketing site — "The Registry" design system (see docs/DESIGN.md).
   Matches the app: eucalypt on ink/paper, Public Sans + IBM Plex Mono,
   honours OS dark mode. Fonts self-hosted (no third-party requests). */
@font-face {
  font-family: "Public Sans Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/public-sans-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
    U+FFFD;
}
@font-face {
  font-family: "Public Sans Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/public-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
}

:root {
  --font-sans: "Public Sans Variable", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Public Sans Variable", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* paper & ink (light) */
  --paper: oklch(0.982 0.003 95);
  --card: oklch(1 0 0);
  --ink: oklch(0.21 0.035 260);
  --muted-ink: oklch(0.44 0.024 258);
  --faint-ink: oklch(0.47 0.02 256);
  --line: oklch(0.905 0.008 250);
  /* control boundary — a darker line for interactive edges (ghost buttons,
     dropzone). >=3:1 on paper/card for WCAG 2.1 1.4.11 (non-text contrast),
     unlike the hairline --line used for decorative rules. */
  --control-line: oklch(0.64 0.02 250);
  /* eucalypt */
  --primary: oklch(0.42 0.085 165);
  --primary-strong: oklch(0.35 0.08 165);
  --on-primary: oklch(0.982 0.003 95);
  --accent: oklch(0.965 0.018 165);
  --accent-ink: oklch(0.34 0.07 165);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* after hours — deep bluestone (matches the app .dark theme) */
    --paper: oklch(0.175 0.015 255);
    --card: oklch(0.215 0.018 255);
    --ink: oklch(0.93 0.006 250);
    --muted-ink: oklch(0.74 0.016 252);
    --faint-ink: oklch(0.64 0.015 252);
    --line: oklch(0.31 0.02 255);
    --control-line: oklch(0.52 0.02 255);
    --primary: oklch(0.78 0.09 165);
    --primary-strong: oklch(0.85 0.09 165);
    --on-primary: oklch(0.18 0.03 260);
    --accent: oklch(0.28 0.03 170);
    --accent-ink: oklch(0.85 0.07 165);
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
body {
  font-family: var(--font-sans);
  color: var(--ink);
  line-height: 1.65;
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection {
  background: color-mix(in oklch, var(--primary) 18%, transparent);
}
a {
  color: var(--primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}
a:hover {
  color: var(--primary-strong);
}
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 3px;
}
/* Keep in-page destinations clear of the sticky site header. This covers the
   legal contents links as well as existing deep links such as #hand-around. */
main [id] {
  scroll-margin-top: 104px;
}
/* skip-to-content — off-screen until a keyboard user tabs onto it, then it
   drops in as the very first focus stop on every page (WCAG 2.4.1) */
.skip-link {
  position: absolute;
  top: -100px;
  left: 24px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  top: 12px;
}
.wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px;
}

/* registry kicker — mono, uppercase, tracked (the app's Eyebrow) */
.kicker {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-ink);
  margin-bottom: 12px;
}

/* three stacked floor plates — the app's strata motif signature */
.motif {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  vertical-align: middle;
}
.motif span {
  display: block;
  height: 2px;
  width: 18px;
  border-radius: 2px;
  background: var(--primary);
}
.motif span:nth-child(1) {
  margin-left: 5px;
}
.motif span:nth-child(2) {
  margin-left: 2.5px;
}
/* motif leading a hairline rule, echoing the Registry Plate */
.plate-rule {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 0;
}
.plate-rule .line {
  height: 1px;
  flex: 1;
  background: var(--line);
}

header.site {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
}
header.site .logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
/* A translucent 3D square that slowly rotates around the logo's icon mark. */
.logo-orbit {
  position: absolute;
  left: 17px;
  top: 50%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  perspective: 260px;
  pointer-events: none;
  /* Hidden until the logo is hovered/focused, then it fades in. */
  opacity: 0;
  transition: opacity 0.45s ease;
}
.logo:hover .logo-orbit,
.logo:focus-visible .logo-orbit {
  opacity: 1;
}
.logo-cube {
  position: absolute;
  left: -18px;
  top: -18px;
  width: 36px;
  height: 36px;
  transform-style: preserve-3d;
  animation: cubeSpin 9s linear infinite;
}
.logo-cube .cf {
  position: absolute;
  inset: 0;
  border: 1.5px solid color-mix(in oklab, var(--primary) 34%, transparent);
  /* Very subtle sheen: a faint eucalypt gradient band drifts across each face. */
  background: linear-gradient(
    115deg,
    color-mix(in oklab, var(--primary) 2%, transparent) 30%,
    color-mix(in oklab, var(--primary) 11%, transparent) 50%,
    color-mix(in oklab, var(--primary) 2%, transparent) 70%
  );
  background-size: 220% 220%;
  animation: cfShimmer 6s ease-in-out infinite;
}
@keyframes cfShimmer {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
.cf-front {
  transform: translateZ(18px);
}
.cf-back {
  transform: rotateY(180deg) translateZ(18px);
}
.cf-right {
  transform: rotateY(90deg) translateZ(18px);
}
.cf-left {
  transform: rotateY(-90deg) translateZ(18px);
}
.cf-top {
  transform: rotateX(90deg) translateZ(18px);
}
.cf-bottom {
  transform: rotateX(-90deg) translateZ(18px);
}
@keyframes cubeSpin {
  from {
    transform: rotateX(-22deg) rotateY(0deg);
  }
  to {
    transform: rotateX(-22deg) rotateY(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .logo-cube {
    animation: none;
    transform: rotateX(-22deg) rotateY(-38deg);
  }
  .logo-cube .cf {
    animation: none;
  }
}
/* The logo ships as a <picture> (dark-scheme <source> + light <img>) so only
   the active theme's SVG downloads; width/height attributes on the <img>
   reserve the box before the file decodes — no nav jump on first paint. */
header.site .logo picture {
  display: flex;
}
header.site .logo img {
  display: block;
  height: 34px;
  width: auto;
}
header.site nav a {
  margin-left: 26px;
  text-decoration: none;
  font-size: 15px;
  color: var(--muted-ink);
}
header.site nav a:hover {
  color: var(--primary);
}

.hero {
  padding: 60px 0 76px;
  border-bottom: 1px solid var(--line);
}
.hero .eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.hero .eyebrow .kicker {
  margin-bottom: 0;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 5.4vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 15ch;
}
.hero h1 em,
article h1 em,
h2 em {
  font-style: normal;
  color: var(--primary);
}
.hero p.sub {
  margin-top: 24px;
  font-size: clamp(17px, 2.1vw, 20px);
  color: var(--muted-ink);
  max-width: 60ch;
}
.cta-row {
  margin-top: 34px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
/* Phones: a clean single-column stack beats three ragged-width pills. */
@media (max-width: 620px) {
  .cta-row {
    flex-direction: column;
    align-items: stretch;
  }
  .cta-row .btn {
    text-align: center;
  }
}
.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  font-size: 16px;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.08s ease;
}
.btn:active {
  transform: translateY(1px);
}
.btn.primary {
  background: var(--primary);
  color: var(--on-primary);
}
.btn.primary:hover {
  background: var(--primary-strong);
  color: var(--on-primary);
}
.btn.ghost {
  border: 1px solid var(--control-line);
  color: var(--ink);
}
.btn.ghost:hover {
  border-color: var(--primary);
  color: var(--primary);
}
/* microcopy that belongs to the CTA row above it (e.g. "the demo resets
   itself") — sits at the moment of deciding to click, not in the fine print */
.hero .cta-note {
  margin-top: 10px;
  font-size: 14px;
  color: var(--faint-ink);
}
.hero .fine {
  margin-top: 20px;
  font-size: 14px;
  color: var(--faint-ink);
  max-width: 62ch;
}

section {
  padding: 66px 0;
}
section.alt {
  background: var(--card);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(25px, 3.4vw, 34px);
  letter-spacing: -0.015em;
  line-height: 1.18;
  max-width: 22ch;
}
section p.lede {
  margin-top: 16px;
  font-size: 17.5px;
  color: var(--muted-ink);
  max-width: 68ch;
}
/* one bolded anchor per lede lands the eye on the load-bearing claim */
section p.lede strong,
section p.lede b {
  color: var(--ink);
  font-weight: 600;
}

.points {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 30px;
}
.point .rule {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 16px;
}
.point .rule span {
  display: block;
  height: 2px;
  width: 24px;
  border-radius: 2px;
  background: var(--primary);
}
.point .rule span:nth-child(1) {
  margin-left: 6px;
}
.point .rule span:nth-child(2) {
  margin-left: 3px;
}
.point h3 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.point p {
  font-size: 15px;
  color: var(--muted-ink);
}

.stats {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
}
.stat {
  border-left: 2px solid var(--primary);
  padding-left: 16px;
}
.stat b {
  display: block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.stat span {
  font-size: 13.5px;
  color: var(--muted-ink);
}

.closer {
  text-align: center;
  padding: 84px 0;
}
.closer h2 {
  margin: 0 auto;
}
.closer p {
  margin-top: 14px;
  color: var(--muted-ink);
}
.closer .cta-row {
  justify-content: center;
}

/* =====================================================================
   Site footer — one refined footer across every page. The small icon mark
   (not the wordmark), a one-line tagline, organised link columns, and a
   hairline base line. Registry tokens only; responsive; dark-mode aware.
   ===================================================================== */
.site-footer {
  margin-top: 0;
  border-top: 1px solid var(--line);
  background: var(--card);
  color: var(--faint-ink);
  font-size: 14px;
}
/* Footer spans the same width as the header bar, not the 880px prose column. */
.site-footer .wrap {
  max-width: 1280px;
}
.site-footer .footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 2fr);
  gap: 40px 48px;
  padding-top: 52px;
  padding-bottom: 38px;
}
.site-footer .footer-brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 34ch;
}
.site-footer .footer-mark {
  /* The wireframe-cube mark, cropped from the full logo lockup so the footer
     carries the same drawn cube as the header — icon only, no wordmark. */
  display: block;
  width: 37px;
  height: 34px;
  overflow: hidden;
}
/* Same single-download <picture> pattern as the header logo. */
.site-footer .footer-mark picture {
  display: block;
}
.site-footer .footer-mark img {
  display: block;
  height: 34px;
  width: auto;
  max-width: none;
}
.site-footer .footer-tag {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted-ink);
}
.site-footer .footer-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 24px;
}
.site-footer .footer-col {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.site-footer .footer-col h2 {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--faint-ink);
  margin: 0 0 3px;
  max-width: none;
}
.site-footer .footer-col a {
  width: fit-content;
  color: var(--muted-ink);
  text-decoration: none;
  font-size: 14.5px;
}
.site-footer .footer-col a:hover {
  color: var(--primary);
}
.site-footer .footer-base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding-top: 22px;
  padding-bottom: 40px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--faint-ink);
}
.site-footer .footer-base-meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--faint-ink);
}
@media (max-width: 720px) {
  .site-footer .footer-inner {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-top: 40px;
  }
  .site-footer .footer-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 20px;
  }
}
@media (max-width: 380px) {
  .site-footer .footer-cols {
    grid-template-columns: 1fr;
  }
}

/* ---- article (blog) ---- */
article {
  padding: 44px 0 84px;
}
article .wrap {
  max-width: 720px;
}
article h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.02em;
}
article .byline {
  margin: 18px 0 40px;
  color: var(--faint-ink);
  font-size: 14px;
  font-family: var(--font-mono);
}
/* Long legal pages need a compact map before the clauses start. A native
   details element keeps the list useful on phones without adding any script. */
.legal-toc {
  margin: 24px 0 34px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}
.legal-toc summary {
  padding: 13px 16px;
  cursor: pointer;
  color: var(--ink);
  font-weight: 600;
}
.legal-toc[open] summary {
  border-bottom: 1px solid var(--line);
}
.legal-toc ol {
  columns: 2;
  column-gap: 32px;
  padding: 16px 20px 18px 42px;
}
.legal-toc li {
  break-inside: avoid;
  margin: 0 0 8px;
  color: var(--faint-ink);
}
.legal-toc a {
  color: var(--muted-ink);
}
.legal-toc a:hover {
  color: var(--primary-strong);
}
@media (max-width: 620px) {
  .legal-toc ol {
    columns: 1;
  }
}
article h2 {
  font-size: 26px;
  margin: 46px 0 12px;
  max-width: none;
}
article h3 {
  font-size: 19px;
  font-weight: 600;
  margin: 34px 0 10px;
}
article p {
  margin: 15px 0;
  font-size: 17px;
}
article blockquote {
  margin: 20px 0;
  padding: 14px 20px;
  background: var(--accent);
  color: var(--accent-ink);
  border-left: 2px solid var(--primary);
  border-radius: 8px;
  font-size: 16px;
}
article table {
  width: 100%;
  border-collapse: collapse;
  margin: 22px 0;
  font-size: 15px;
}
article td,
article th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
article th {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted-ink);
}
article td {
  font-variant-numeric: tabular-nums;
}
article td:last-child {
  font-family: var(--font-mono);
  font-weight: 500;
}
article code {
  font-family: var(--font-mono);
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 0.88em;
  overflow-wrap: anywhere;
}
article hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 44px 0;
}
article .fine {
  color: var(--faint-ink);
  font-size: 15px;
}
article ul.trust li {
  margin: 12px 0 12px 20px;
  font-size: 16px;
  color: var(--muted-ink);
}
article ul.trust li b {
  color: var(--ink);
}

/* =====================================================================
   Multi-page extensions — nav, pillar bands, comparison, downloads.
   Tokens only; no off-system colour, no external requests.
   ===================================================================== */

:root {
  /* oxide — the "we refuse this" tone, from the app's --destructive */
  --critical: oklch(0.54 0.19 27);
}
@media (prefers-color-scheme: dark) {
  :root {
    --critical: oklch(0.68 0.16 27);
  }
}

/* ---- header nav across pages ---- */
/* The wrap that holds the header becomes a slim sticky bar. The BAR bleeds the
   full viewport width; the header content inside stays centered at the same
   1280px the homepage hero and footer use (1232px + the wrap's 2×24 padding). */
.wrap:has(> header.site) {
  position: sticky;
  top: 0;
  z-index: 60;
  max-width: none;
  background: transparent;
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease;
}
.wrap:has(> header.site) > header.site {
  max-width: 1232px;
  margin: 0 auto;
}
.wrap:has(> header.site).scrolled {
  /* 94% paper: translucent enough to feel light, opaque enough that video
     frames and dark bands scrolling beneath never turn the bar muddy. */
  background: color-mix(in oklab, var(--paper) 94%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
}
/* Soft fade just below the bar so content dissolves as it scrolls under the
   header instead of meeting a hard translucent edge — most noticeable on mobile,
   where dense sections pass close beneath. Keyed to .scrolled so it only shows
   once there's a bar to fade from; matches the bar's paper tint in both themes. */
.wrap:has(> header.site)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 22px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    color-mix(in oklab, var(--paper) 88%, transparent),
    transparent
  );
  opacity: 0;
  transition: opacity 0.2s ease;
}
.wrap:has(> header.site).scrolled::after {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .wrap:has(> header.site)::after {
    transition: none;
  }
}
header.site {
  gap: 16px;
}
header.site nav {
  display: flex;
  align-items: center;
  gap: 2px;
}
header.site nav a {
  position: relative;
  margin-left: 0;
  padding: 8px 12px;
  border-radius: 9px;
  color: var(--muted-ink);
  font-weight: 500;
  white-space: nowrap;
  transition:
    color 0.15s ease,
    background 0.15s ease;
}
/* A touch of air between the quiet links and the loud CTA on desktop. */
header.site nav .nav-btn {
  margin-left: 14px;
}
header.site nav a:hover {
  color: var(--ink);
  background: color-mix(in oklab, var(--ink) 6%, transparent);
}
header.site nav a[aria-current="page"] {
  color: var(--primary);
  font-weight: 600;
}
header.site nav .nav-btn {
  padding: 9px 16px;
  border-radius: 9px;
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    transform 0.08s ease;
}
header.site nav .nav-btn:hover {
  background: var(--primary-strong);
  color: var(--on-primary);
}
header.site nav .nav-btn:active {
  transform: translateY(1px);
}

/* Mobile menu toggle (injected by nav.js) — hidden on desktop. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-left: auto;
  margin-right: -12px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--ink);
}
.nav-toggle-bars,
.nav-toggle-bars span {
  display: block;
}
.nav-toggle-bars {
  width: 30px;
  height: 20px;
  position: relative;
}
.nav-toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2.5px;
  border-radius: 3px;
  background: currentColor;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}
.nav-toggle-bars span:nth-child(1) {
  top: 0;
}
.nav-toggle-bars span:nth-child(2) {
  top: 9px;
}
.nav-toggle-bars span:nth-child(3) {
  top: 18px;
}
.nav-open .nav-toggle-bars span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.nav-open .nav-toggle-bars span:nth-child(2) {
  opacity: 0;
}
.nav-open .nav-toggle-bars span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

@media (max-width: 1120px) {
  .nav-toggle {
    display: inline-flex;
  }
  header.site {
    position: relative;
  }
  header.site nav {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 24px 60px -24px rgb(0 0 0 / 30%);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
      opacity 0.18s ease,
      transform 0.18s ease,
      visibility 0.18s;
  }
  header.site.nav-open nav {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  header.site nav a {
    padding: 12px 14px;
    font-size: 16px;
  }
  header.site nav .nav-btn {
    margin-top: 6px;
    margin-left: 0;
    text-align: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  header.site nav,
  .nav-toggle-bars span {
    transition: none;
  }
}

/* ---- section heads & prose ---- */
.section-head {
  max-width: 62ch;
}
.section-body {
  margin-top: 18px;
  font-size: 17px;
  color: var(--muted-ink);
  max-width: 68ch;
}
.section-body p {
  margin-top: 15px;
}
.section-body p:first-child {
  margin-top: 0;
}
.section-body strong,
.section-body b {
  color: var(--ink);
  font-weight: 600;
}

/* stack of headed blocks within a pillar page */
.feature {
  padding: 40px 0;
  border-top: 1px solid var(--line);
}
.feature:first-child {
  border-top: none;
}
.feature h2 {
  font-size: clamp(22px, 2.9vw, 29px);
}

/* ---- checklist — plate-marked affirmative list ---- */
ul.checklist {
  list-style: none;
  margin-top: 26px;
  display: grid;
  gap: 15px;
  max-width: 70ch;
}
ul.checklist li {
  position: relative;
  padding-left: 30px;
  font-size: 16px;
  color: var(--ink);
}
ul.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--primary);
}
ul.checklist li strong,
ul.checklist li b {
  font-weight: 600;
}

/* ---- refusal list — the transparency wedge ---- */
ul.never {
  list-style: none;
  margin-top: 26px;
  display: grid;
  gap: 15px;
  max-width: 70ch;
}
ul.never li {
  position: relative;
  padding-left: 32px;
  font-size: 16px;
  color: var(--ink);
}
ul.never li::before {
  content: "\00d7";
  position: absolute;
  left: 0;
  top: -1px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  color: var(--critical);
}
ul.never li strong,
ul.never li b {
  font-weight: 600;
}

/* ---- side-by-side split (earn vs refuse) ---- */
.split {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 34px;
}
.split .col h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.split .col h3 .tag {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 5px;
  font-weight: 500;
}
.split .col h3 .tag.earn {
  background: var(--accent);
  color: var(--accent-ink);
}
.split .col h3 .tag.refuse {
  background: color-mix(in oklch, var(--critical) 15%, transparent);
  color: var(--critical);
}
.split .col ul.checklist,
.split .col ul.never {
  margin-top: 18px;
}

/* ---- comparison table ---- */
.table-scroll {
  margin-top: 34px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.table-scroll:focus-visible {
  outline-offset: 4px;
}
table.compare {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 15px;
}
table.compare th,
table.compare td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
table.compare tr:last-child td {
  border-bottom: none;
}
table.compare thead th {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted-ink);
  white-space: nowrap;
}
table.compare thead th.gs {
  color: var(--primary);
}
table.compare td {
  color: var(--muted-ink);
}
table.compare td:first-child {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
table.compare .gs {
  background: var(--accent);
  color: var(--accent-ink);
}
table.compare td.gs {
  font-weight: 500;
}

/* ---- numbered steps ---- */
ol.steps {
  list-style: none;
  counter-reset: step;
  margin-top: 30px;
  display: grid;
  gap: 22px;
  max-width: 74ch;
}
ol.steps li {
  position: relative;
  padding-left: 54px;
}
ol.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 2px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
  background: var(--accent);
  border-radius: 9px;
  font-size: 15px;
}
ol.steps li h4 {
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 5px;
}
ol.steps li p {
  font-size: 15px;
  color: var(--muted-ink);
}

/* ---- proof list ---- */
ul.proof-list {
  list-style: none;
  margin-top: 38px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px 36px;
}
ul.proof-list li {
  padding-left: 18px;
  border-left: 2px solid var(--primary);
  font-size: 15px;
  color: var(--muted-ink);
  line-height: 1.55;
}
ul.proof-list li strong {
  display: block;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 2px;
}

/* ---- big pitch quote ---- */
.pitch {
  margin-top: 30px;
  padding: 28px 32px;
  background: var(--accent);
  color: var(--accent-ink);
  border-left: 3px solid var(--primary);
  border-radius: 12px;
  max-width: 72ch;
}
.pitch p {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.3vw, 22px);
  line-height: 1.45;
  margin-top: 16px;
}
.pitch p:first-child {
  margin-top: 0;
}

/* ---- callout note ---- */
.note {
  margin-top: 26px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--primary);
  border-radius: 10px;
  background: var(--card);
  font-size: 15px;
  color: var(--muted-ink);
  max-width: 70ch;
}

/* ---- download cards ---- */
.download-cards {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 18px;
}
.download-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  text-decoration: none;
  color: var(--ink);
  transition:
    border-color 0.15s ease,
    transform 0.15s ease;
}
.download-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  color: var(--ink);
}
.download-card .kicker {
  margin-bottom: 10px;
}
.download-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.download-card p {
  font-size: 14.5px;
  color: var(--muted-ink);
  flex: 1;
}
.download-card .dl {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary);
}

/* ---- home feature cards (linked bands) ---- */
.band-cards {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.band-card {
  display: flex;
  flex-direction: column;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  text-decoration: none;
  color: var(--ink);
  transition:
    border-color 0.15s ease,
    transform 0.15s ease;
}
.band-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  color: var(--ink);
}
.band-card .rule {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 16px;
}
.band-card .rule span {
  display: block;
  height: 2px;
  width: 24px;
  border-radius: 2px;
  background: var(--primary);
}
.band-card .rule span:nth-child(1) {
  margin-left: 6px;
}
.band-card .rule span:nth-child(2) {
  margin-left: 3px;
}
.band-card .band-icon {
  display: block;
  width: 44px;
  height: 44px;
  color: var(--primary);
  margin-bottom: 14px;
}
.band-card h3 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.band-card p {
  font-size: 15px;
  color: var(--muted-ink);
  flex: 1;
}
.band-card .go {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
}

/* ---- inline lede link row ---- */
.lede-links {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: 15px;
}

/* smaller hero on interior pages */
.hero.interior {
  padding: 48px 0 56px;
}
.hero.interior h1 {
  max-width: 20ch;
}

/* tighten section rhythm on small screens */
@media (max-width: 620px) {
  section {
    padding: 48px 0;
  }
  .feature {
    padding: 32px 0;
  }
}

/* =====================================================================
   Round 2 — break the single-column monotony, front-load the number,
   raise reading contrast, and give the proof numbers a signature band.
   Tokens only; no off-system colour, no external requests.
   ===================================================================== */

:root {
  /* deep eucalypt band — the "proven / by the numbers" signature */
  --band-bg: oklch(0.3 0.052 165);
  --band-ink: oklch(0.965 0.012 165);
  --band-muted: oklch(0.83 0.03 165);
  --band-fig: oklch(0.87 0.115 165);
  --band-line: oklch(0.46 0.05 165);
}
@media (prefers-color-scheme: dark) {
  :root {
    --band-bg: oklch(0.235 0.038 165);
    --band-ink: oklch(0.95 0.012 165);
    --band-muted: oklch(0.79 0.03 165);
    --band-fig: oklch(0.85 0.115 165);
    --band-line: oklch(0.38 0.045 165);
  }
}

/* ---- hero: the clip on top, then headline + fee-receipt card ----
   The hero matches the header's 1280px width. The C1 clip takes the grid's
   full first row — the video leads on desktop exactly as it does on mobile —
   with the copy and the receipt side by side beneath it. */
.wrap.hero-grid {
  max-width: 1280px;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: 48px 56px;
  align-items: start;
}
.hero-copy h1 {
  max-width: none;
}
.hero-grid > .clip-wrap {
  grid-column: 1 / -1;
  grid-row: 1;
  min-width: 0;
}
.hero-grid > .clip-wrap .clip {
  margin: 0 auto;
  max-width: 960px;
}
.hero-grid .hero-copy {
  grid-column: 1;
  grid-row: 2;
}
.hero-grid .hero-receipt {
  grid-column: 2;
  grid-row: 2;
}
/* Video leads the page — keep only a small gap under the sticky header. */
.hero:has(.clip-wrap) {
  padding-top: 24px;
}
@media (max-width: 880px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* the receipt — a framed "$8,400 → $0" the reader hits above the fold */
.hero-receipt {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  padding: 24px 24px 22px;
  box-shadow: 0 22px 44px -32px rgba(15, 20, 28, 0.5);
}
.hero-receipt .receipt-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
}
.receipt-slider {
  margin-bottom: 20px;
}
.receipt-slider label {
  display: block;
  font-size: 14px;
  color: var(--muted-ink);
  margin-bottom: 11px;
}
.receipt-slider label b {
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.receipt-slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--primary) 24%, var(--line));
  cursor: pointer;
}
.receipt-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  border: 3px solid var(--card);
  box-shadow: 0 2px 9px -1px rgb(9 91 65 / 55%);
  cursor: grab;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease;
}
.receipt-slider input[type="range"]:hover::-webkit-slider-thumb {
  transform: scale(1.12);
  box-shadow: 0 3px 12px -1px rgb(9 91 65 / 65%);
}
.receipt-slider input[type="range"]:active::-webkit-slider-thumb {
  cursor: grabbing;
  transform: scale(1.08);
}
.receipt-slider input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 3px solid var(--card);
  border-radius: 50%;
  background: var(--primary);
  cursor: grab;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease;
}
.receipt-slider input[type="range"]:hover::-moz-range-thumb {
  transform: scale(1.12);
}
.receipt-slider input[type="range"]:active::-moz-range-thumb {
  cursor: grabbing;
  transform: scale(1.08);
}
.receipt-note {
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--faint-ink);
}
.receipt-hero,
.receipt-total {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.receipt-hero {
  margin-top: 18px;
}
.receipt-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted-ink);
}
.receipt-big {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: clamp(40px, 6.4vw, 54px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.receipt-big .yr {
  font-size: 0.36em;
  color: var(--muted-ink);
}
.receipt-big.struck {
  color: var(--ink);
  text-decoration: line-through;
  text-decoration-color: color-mix(in oklch, var(--critical) 72%, transparent);
  text-decoration-thickness: 3px;
}
.receipt-big.zero {
  color: var(--primary);
}
.receipt-lines {
  margin-top: 16px;
  border-top: 1px solid var(--line);
}
.receipt-lines .rl {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted-ink);
}
.receipt-lines .rl span:last-child {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.receipt-lines .rl.comm span:last-child {
  color: var(--critical);
  font-weight: 500;
}
.receipt-total {
  margin-top: 16px;
}
.receipt-cta {
  margin-top: 18px;
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}
.receipt-cta:hover {
  color: var(--primary-strong);
}

/* ---- signature dark band for proof / by-the-numbers sections ---- */
.proof-band {
  background: var(--band-bg);
  color: var(--band-ink);
  border-top: 1px solid var(--band-line);
  border-bottom: 1px solid var(--band-line);
}
.proof-band .kicker {
  color: var(--band-fig);
}
/* the global --primary focus ring only reaches ~1.65:1 on the band's dark
   --band-bg; use the light figure colour the band already gives its links so
   a keyboard focus indicator stays visible here (WCAG 2.4.11 / 1.4.11). */
.proof-band :focus-visible {
  outline-color: var(--band-fig);
}
.proof-band h2,
.proof-band .section-head {
  color: var(--band-ink);
}
.proof-band .lede {
  color: var(--band-muted);
}
.proof-band .lede strong,
.proof-band .lede b {
  color: var(--band-ink);
}
.proof-band .lede a {
  color: var(--band-fig);
  text-decoration-color: color-mix(in oklch, var(--band-fig) 45%, transparent);
}
.proof-band .lede a:hover {
  color: var(--band-ink);
}
.proof-band .stats {
  margin-top: 46px;
}
.proof-band .stat {
  border-left: 2px solid var(--band-fig);
}
.proof-band .stat b {
  color: var(--band-fig);
  font-size: clamp(36px, 5vw, 48px);
}
.proof-band .stat span {
  color: var(--band-muted);
  font-size: 14px;
}
.proof-band ul.proof-list li {
  border-left-color: var(--band-fig);
  color: var(--band-muted);
}
.proof-band ul.proof-list li strong {
  color: var(--band-fig);
  font-size: 23px;
}

/* =====================================================================
   Motion clip embed — the C1 "The Number" explainer under the hero.
   Self-contained muted <video>; poster reserves the box so there's no CLS.
   Playback is driven by clips.js (explicit play controls + reduced-motion).
   Tokens only; no external requests.
   ===================================================================== */

/* screen-reader-only helper (burned-in captions carry the visible narration;
   this exposes the same words + CTA to assistive tech and no-video users). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.clip {
  margin: 44px auto 0;
  max-width: 960px;
}
.clip-frame {
  position: relative;
  /* reserve the 16:9 box up front — the poster fills it, so no layout shift */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--band-bg);
  box-shadow: 0 30px 60px -42px rgba(15, 20, 28, 0.55);
}
.clip-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the poster is a mid-clip band frame; show it edge-to-edge before play */
  background: var(--band-bg) center / cover no-repeat;
}
.clip-cap {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.clip-cta {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary);
  text-decoration: none;
}
.clip-cta:hover {
  color: var(--primary-strong);
}

/* --- play-with-sound button ------------------------------------------------
   The clip stays paused until the visitor explicitly starts it.
   clips.js injects this full-frame button with a centred eucalypt play disc;
   pressing it plays the clip WITH SOUND from the start and hides the button. It
   returns (via [hidden] toggling) whenever the clip is paused. */
.clip-play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: color-mix(in oklab, var(--band-bg) 30%, transparent);
  transition: background 0.15s ease;
}
.clip-play:hover {
  background: color-mix(in oklab, var(--band-bg) 44%, transparent);
}
.clip-play[hidden] {
  display: none;
}
.clip-play-disc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 14px 34px -12px rgba(9, 91, 65, 0.85);
  transition: transform 0.15s ease;
}
.clip-play:hover .clip-play-disc {
  transform: scale(1.05);
}
/* CSS play triangle, optically centred in the disc */
.clip-play-disc::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent var(--on-primary);
  margin-left: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .clip-play,
  .clip-play-disc {
    transition: none;
  }
}
/* pending / loading: the disc stays put but swaps its play triangle for a
   spinner while the clip fetches + buffers, so a tap never looks like a no-op */
.clip-play.is-pending {
  cursor: progress;
}
.clip-play.is-pending .clip-play-disc::before {
  display: none;
}
.clip-play.is-pending .clip-play-disc::after {
  content: "";
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid color-mix(in oklab, var(--on-primary) 34%, transparent);
  border-top-color: var(--on-primary);
  animation: clip-spin 0.7s linear infinite;
}
@keyframes clip-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .clip-play.is-pending .clip-play-disc::after {
    animation: none;
  }
}

/* recoverable message bar — sits along the bottom of the frame when a clip
   fails to play or load; plain, in-voice, above the play/again overlays */
.clip-msg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  margin: 0;
  padding: 11px 16px;
  font-size: 13.5px;
  line-height: 1.4;
  text-align: center;
  color: #fff;
  background: rgba(15, 20, 28, 0.74);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.clip-msg[hidden] {
  display: none;
}

/* --- docked state (mobile only, driven by clips.js) ------------------------
   When a clip plays WITH SOUND on mobile it lifts to a full-width bar fixed at
   the top of the viewport so it stays visible while scrolling; a .clip-spacer
   of the exact frame height holds its place (zero layout shift). Corners are
   squared, side/top borders dropped, with a soft bottom shadow, above the
   sticky header. */
.clip-docked .clip-frame {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 120;
  border-radius: 0;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  box-shadow: 0 12px 26px -8px rgba(15, 20, 28, 0.55);
}
.clip-spacer {
  width: 100%;
}
/* ✕ dismiss — only visible while docked (pause + undock) */
.clip-dismiss {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  color: #fff;
  background: rgba(15, 20, 28, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.clip-docked .clip-dismiss {
  display: inline-flex;
}

/* --- "Watch again" overlay -------------------------------------------------
   When the user-started playthrough ends, clips.js reveals this full-frame
   button. Big tap target, on-brand eucalypt. */
.clip-again {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(9, 91, 65, 0.34);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  cursor: pointer;
}
.clip-again[hidden] {
  display: none;
}
/* both full-frame overlay buttons fill the clip-frame exactly, so the global
   focus ring (drawn 2px OUTSIDE the box) lands beyond the frame's
   overflow:hidden and vanishes — draw it inset instead (WCAG 2.4.7) */
.clip-play:focus-visible,
.clip-again:focus-visible {
  outline-offset: -4px;
}
.clip-again-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--on-primary);
  background: var(--primary);
  padding: 17px 32px;
  border-radius: 12px;
  box-shadow: 0 20px 44px -18px rgba(9, 91, 65, 0.85);
}
.clip-again:hover .clip-again-btn {
  background: var(--primary-strong);
}

/* --- mobile: put the clip ABOVE the hero copy + slider --------------------
   Desktop keeps the grid (copy + clip left, receipt right). At the point the
   hero stacks to one column, flip the grid to a flex column and pull the clip
   to the top with order — pure CSS, no JS reflow, box already reserved
   (aspect-ratio) so there's no CLS. */
@media (max-width: 880px) {
  .hero-grid {
    display: flex;
    flex-direction: column;
    gap: 36px;
  }
  .hero-grid > .clip-wrap {
    order: -1;
  }
  .hero-grid > .clip-wrap .clip {
    margin-top: 0;
  }
  /* The clip is the first thing under the sticky header on mobile — keep only a
     small gap so it reads as the hero, not a floating block below empty space. */
  .hero:has(.clip-wrap) {
    padding-top: 14px;
  }
}
@media (max-width: 620px) {
  .clip {
    margin-top: 34px;
  }
  .clip-frame {
    border-radius: 12px;
  }
  .clip-again-btn {
    font-size: 21px;
    padding: 21px 36px;
    border-radius: 14px;
  }
  .clip-sound {
    font-size: 13px;
    padding: 9px 15px;
  }
}