/* =========================================================================
   BITS & SETS — landing page
   Plain hand-written CSS. No build step. Square corners everywhere.
   All fonts self-hosted. All motion gated on prefers-reduced-motion.

   Third of the house: the same Anton-sheared display, Archivo body and
   yellow/magenta/cyan on near-black as Stray and LOUD. Structurally it is
   Stray's page — hero, marquee, steps with real screenshots, a yellow "deal"
   band — because that is the shape the product design was drawn in. The
   app itself is Apple-blue and rounded; the site is not, on purpose: this
   is the Grunt poster, and the phone in the frame is the product.
   ========================================================================= */

/* ----------------------------- Fonts (self-hosted) ----------------------- */
@font-face {
  font-family: "Anton";
  src: url("assets/fonts/anton-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-800.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}

/* --------------------------------- Tokens -------------------------------- */
:root {
  --ink:      #0A0A0C;
  --ink-2:    #16151C;
  --text:     #FFFFFF;
  --muted:    rgba(255,255,255,0.62);
  --faint:    rgba(255,255,255,0.35);
  --hair:     rgba(255,255,255,0.12);
  --yellow:   #FFC400;
  --magenta:  #E9008F;
  --cyan:     #00C2FF;

  --ease: cubic-bezier(.16,.9,.24,1);
  --sh-cyan:    8px 0 0 rgba(0,194,255,0.5);
  --sh-magenta: 8px 0 0 rgba(233,0,143,0.6);

  --wrap: 1240px;
  --pad: clamp(20px, 5vw, 64px);
}

/* --------------------------------- Reset --------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; border-radius: 0; }

html { -webkit-text-size-adjust: 100%; }
body {
  background:
    radial-gradient(60% 40% at 85% 0%, rgba(233,0,143,0.22), rgba(233,0,143,0) 60%),
    radial-gradient(50% 30% at 0% 40%, rgba(0,194,255,0.12), rgba(0,194,255,0) 60%),
    var(--ink);
  background-repeat: no-repeat;
  color: var(--text);
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  overflow-x: clip;            /* skew/translate must never scroll the page */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
ul { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

/* ------------------------------ Focus / skip ----------------------------- */
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--yellow); color: var(--ink);
  font-family: "Anton", "Archivo", system-ui, sans-serif; font-weight: 400; text-transform: uppercase;
  letter-spacing: .12em; padding: 12px 18px; transition: top .15s var(--ease);
}
.skip-link:focus { top: 12px; }

/* ------------------------------- Utilities ------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }

.c-yellow  { color: var(--yellow); }
.c-cyan    { color: var(--cyan); }
.c-magenta { color: var(--magenta); }
.sh-cyan    { text-shadow: var(--sh-cyan); }
.sh-magenta { text-shadow: var(--sh-magenta); }

/* Display word: Anton, forced 400, uppercase, sheared. The shear is the brand. */
.dw {
  display: block;
  font-family: "Anton", "Archivo", system-ui, sans-serif; font-weight: 400;
  text-transform: uppercase;
  line-height: 0.8;
  transform: skewX(-10deg);
  transform-origin: left bottom;
}

.eyebrow {
  font-family: "Anton", "Archivo", system-ui, sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(14px, 1.4vw, 17px); letter-spacing: 0.3em; line-height: 1;
}
.eyebrow-cyan { color: var(--cyan); }
.eyebrow-ink  { color: var(--ink); }

/* --------------------------------- Buttons ------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-height: 52px; padding: 14px 26px;
  font-family: "Anton", "Archivo", system-ui, sans-serif; font-weight: 400; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: clamp(16px, 1.6vw, 19px);
  transform: skewX(-10deg);
  transition: transform .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.btn > * { transform: skewX(10deg); }   /* un-skew the label */
.btn-sm { min-height: 48px; padding: 10px 18px; font-size: 15px; }

.btn-yellow { background: var(--yellow); color: var(--ink); }
.btn-yellow:hover { background: #ffd23f; }
.btn-ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5); }
.btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--text); }
.btn:hover { transform: skewX(-10deg) translateY(-2px); }

/* ================================ HEADER ================================= */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10,10,12,0.82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hair);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 64px; gap: 16px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; padding: 8px 0; }
.brand-icon { width: 34px; height: 34px; }
.brand-word {
  font-family: "Anton", "Archivo", system-ui, sans-serif; font-weight: 400; font-size: 24px;
  text-transform: uppercase; letter-spacing: .02em;
  transform: skewX(-10deg);
}
.brand-word .amp { color: var(--yellow); }

.primary-nav ul { display: flex; align-items: center; gap: 6px; }
.primary-nav a:not(.btn) {
  display: inline-flex; align-items: center; min-height: 48px; padding: 12px 16px;
  font-family: "Anton", "Archivo", system-ui, sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: 15px; letter-spacing: 0.2em; color: var(--muted);
  transition: color .15s var(--ease);
}
.primary-nav a:not(.btn):hover { color: var(--yellow); }

.nav-toggle {
  display: none;
  min-height: 48px; padding: 10px 16px;
  font-family: "Anton", "Archivo", system-ui, sans-serif; font-weight: 400; text-transform: uppercase;
  letter-spacing: .2em; font-size: 15px; color: var(--text);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5);
}

/* ================================= HERO ================================== */
.hero { position: relative; overflow: clip; }
.hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding-block: clamp(48px, 7vw, 96px);
}
.hero-copy { min-width: 0; }
.hero-eyebrow { margin-bottom: 22px; }

/* Four lines, like Stray's: "GREEN ROOMS." is the widest at twelve glyphs,
   and at 8.2vw it holds one line inside the 1.15fr copy column from the
   900px grid breakpoint up to the 1240 wrap. Measured, not derived: 11vw and
   9.5vw both broke it in two at 1032, where the column is ~490px. */
.hero-title {
  font-size: clamp(3rem, 8.2vw, 106px);
  margin-bottom: 30px;
}
.hero-title .dw { letter-spacing: .005em; }
.dw-2 { transform: translateX(min(30px, 5vw)) skewX(-10deg); }
.dw-3 { transform: translateX(min(8px, 1.5vw))  skewX(-10deg); }
.dw-4 { transform: translateX(min(38px, 6vw))  skewX(-10deg); }

.hero-body {
  font-family: "Archivo", system-ui, sans-serif; font-weight: 600; font-size: clamp(17px, 1.7vw, 19px);
  color: var(--text); max-width: 520px; margin-bottom: 30px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* The phone in the hero: one real screenshot in a hairline frame, offset by a
   flat magenta plate the way LOUD's artboard is. Not a drawn handset. */
.hero-figure { justify-self: center; width: min(360px, 100%); }
.hero-figure .mock-frame { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09), 24px 24px 0 rgba(233,0,143,0.25); }

/* ================================ MARQUEE =============================== */
.marquee {
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  background: var(--ink-2);
  overflow: hidden;
}
.marquee-track { display: flex; width: max-content; }
.marquee-group { display: flex; align-items: center; flex: none; padding: 18px 0; }
.mq, .dot {
  font-family: "Anton", "Archivo", system-ui, sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: 30px; line-height: 1; white-space: nowrap;
  padding-inline: 22px;
}
/* 42% white, not the 35% token: the band is decorative (aria-hidden) but
   still clears large-text 3:1. */
.mq  { color: rgba(255,255,255,0.42); letter-spacing: .04em; }
.dot { font-size: 16px; padding-inline: 4px; }
.dot-m { color: var(--magenta); }
.dot-c { color: var(--cyan); }
.dot-y { color: var(--yellow); }

/* ============================= HOW IT WORKS ============================= */
.how { padding-block: clamp(64px, 9vw, 128px); }
.how-title {
  /* 0.9, not the .dw 0.8: two full-stop-heavy lines at this size collide at
     the cascade on a phone, and the second line is a different colour, so
     the collision reads as clipping rather than as a tight stack. */
  font-size: clamp(2.4rem, 9vw, 96px); line-height: 0.9;
  margin: 14px 0 clamp(40px, 6vw, 72px);
}
.how-title .dw:nth-child(2) { transform: translateX(min(18px,3vw)) skewX(-8deg); }

/* Four steps, each a row of copy beside the screen it describes, sides
   alternating so the page zigzags down. list-style none: the steps draw
   their own 01–04, and the browser's "1." would show the number twice. */
.steps { list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: clamp(48px, 7vw, 96px); }
.step {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
.step:nth-child(even) .step-copy { order: 2; }
.step-copy { position: relative; padding-top: 22px; }
.step-copy::before { content: ""; position: absolute; top: 0; left: 0; width: 64px; height: 3px; }
.step-y .step-copy::before { background: var(--yellow); }
.step-c .step-copy::before { background: var(--cyan); }
.step-m .step-copy::before { background: var(--magenta); }
.step-w .step-copy::before { background: var(--text); }
.step-num {
  display: block; font-family: "Anton", "Archivo", system-ui, sans-serif; font-weight: 400; font-size: clamp(48px, 6vw, 72px);
  color: rgba(255,255,255,0.42);   /* faded, but clears large-text 3:1 */
  line-height: 1; transform: skewX(-8deg); transform-origin: left;
}
.step-title {
  font-family: "Anton", "Archivo", system-ui, sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(28px, 3.4vw, 40px); letter-spacing: .01em;
  margin: 10px 0 12px; transform: skewX(-8deg); transform-origin: left;
}
.step-body { color: var(--muted); font-size: clamp(16px, 1.6vw, 17px); max-width: 44ch; }
.step-body strong { color: var(--text); font-weight: 600; }
/* The beat marks as the app draws them: a small square badge, one colour
   each, the glyph inside. Colour is never the only signal — the word follows. */
.mark {
  display: inline-block; min-width: 1.35em; padding: 0 .3em; margin-inline: .1em 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700;
  font-size: .85em; line-height: 1.5; text-align: center; color: var(--ink);
}
.mark-p { background: var(--cyan); }
.mark-t { background: var(--yellow); }
.mark-o { background: var(--magenta); color: var(--text); }
.step-mock { width: min(300px, 100%); justify-self: center; }

/* Real screenshot in a hairline frame; the aspect ratio reserves the box so
   nothing reflows while the image loads. 919×1989 is what the encoder
   produced from a 1242×2688 capture. */
.mock-frame {
  position: relative; width: 100%; aspect-ratio: 919 / 1989;
  background: var(--ink-2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09), 16px 16px 0 rgba(0,194,255,0.18);
  overflow: hidden;
}
.mock-shot {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
}

/* ================================ THE DEAL ============================== */
.privacy { background: var(--yellow); color: var(--ink); padding-block: clamp(64px, 9vw, 128px); }
.privacy-title {
  font-size: clamp(3rem, 11vw, 112px); line-height: 0.82; margin: 14px 0 28px;
  /* Skew the block, not each line: the shear is measured from the last
     baseline, so every line above it steps further right and the stack leans
     as one slab. Per-line shear leaves them flush left and kills the cascade. */
  transform: skewX(-10deg);
  transform-origin: left bottom;
}
.privacy-title .dw { transform: none; line-height: 0.87; }
.privacy-lead {
  font-family: "Archivo", system-ui, sans-serif; font-weight: 800; font-size: clamp(19px, 2.1vw, 22px);
  max-width: 640px; margin-bottom: clamp(36px, 5vw, 56px);
}
.deal-table { max-width: 900px; }
.deal-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 20px 0; border-bottom: 2px solid var(--ink);
}
.deal-row:first-child { border-top: 2px solid var(--ink); }
.deal-row dt {
  font-family: "Anton", "Archivo", system-ui, sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(18px, 2.6vw, 30px); letter-spacing: .02em;
  transform: skewX(-8deg); transform-origin: left;
}
/* Value text stays ink: magenta on yellow is 2.7:1 and fails for text. The
   magenta lives in the underline rule instead. */
.deal-row dd {
  font-family: "Anton", "Archivo", system-ui, sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(18px, 2.6vw, 30px); letter-spacing: .02em;
  text-align: right; color: var(--ink);
  box-shadow: inset 0 -6px 0 var(--magenta);
  transform: skewX(-8deg); transform-origin: right;
}
.deal-foot { margin-top: 22px; max-width: 640px; font-weight: 600; font-size: 15px; color: rgba(10,10,12,0.75); }

/* ================================= GET IT =============================== */
.get { position: relative; overflow: clip; padding-block: clamp(72px, 10vw, 140px); text-align: center; }
.get::before {
  content: ""; position: absolute; z-index: 0; left: 50%; bottom: -30%;
  width: 90vw; height: 60vw; max-width: 900px; max-height: 620px; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0,194,255,0.28), transparent 62%);
  pointer-events: none;
}
.get-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.get-icon { width: 96px; height: 96px; margin-bottom: 22px; }
.get-title { font-size: clamp(3.2rem, 12vw, 120px); line-height: 0.8; }
.get-title .dw { text-align: center; transform-origin: center; }
.get-sub {
  font-family: "Archivo", system-ui, sans-serif; font-weight: 600; font-size: clamp(17px, 1.9vw, 20px);
  color: var(--muted); margin: 26px 0 0; max-width: 560px;
}
.get-sub strong { color: var(--text); }
.get-actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 34px; }
/* Store buttons stack two lines: platform on top, where to join underneath —
   Stray's pattern, so the three sites' store controls read as one family. */
.btn-store { flex-direction: column; gap: 2px; min-height: 64px; line-height: 1; }
.soon {
  font-family: "Archivo", system-ui, sans-serif; font-weight: 800; font-size: 11px;
  letter-spacing: .18em; opacity: .8;
}

/* ============================ ALSO FROM GRUNT ============================ */
/* The two siblings, one card each. A footnote, not a second call to action:
   hairline boxes, muted copy, ghost links. */
.sibling {
  border-top: 1px solid var(--hair);
  background: var(--ink-2);
  padding-block: clamp(36px, 5vw, 60px);
}
.sibling-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.sibling-card {
  display: flex; flex-direction: column; gap: 12px;
  border: 1px solid var(--hair); padding: clamp(24px, 3.2vw, 38px);
  transition: border-color .15s var(--ease);
}
.sibling-card:hover { border-color: rgba(255,255,255,0.4); }
.sibling-title { font-size: clamp(38px, 5.4vw, 60px); }
.sibling-tag {
  font-family: "Archivo", system-ui, sans-serif; font-weight: 800;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--text);
}
.sibling-body { color: var(--muted); max-width: 54ch; }
.sibling-go {
  margin-top: auto; padding-top: 8px;
  font-family: "Anton", "Archivo", system-ui, sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: 14px; letter-spacing: .2em; color: var(--yellow);
}

/* ================================= FOOTER ============================== */
.site-footer { border-top: 1px solid var(--hair); padding-block: 34px; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.footer-brand {
  font-family: "Anton", "Archivo", system-ui, sans-serif; font-weight: 400; text-transform: uppercase;
  letter-spacing: .12em; color: var(--muted); transform: skewX(-8deg);
}
.footer-nav ul { display: flex; flex-wrap: wrap; gap: 4px; }
.footer-nav a {
  display: inline-flex; align-items: center; min-height: 48px; padding: 10px 16px;
  font-family: "Anton", "Archivo", system-ui, sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: 14px; letter-spacing: .2em; color: var(--muted);
}
.footer-nav a:hover { color: var(--yellow); }

/* ============================ LEGAL PAGES ==============================
   privacy.html and support.html. Same tokens and type as the landing page,
   measured for reading: ~76ch line length and a calmer heading scale. No JS
   on these pages, so the nav is always visible rather than toggled. */
.legal-nav ul { display: flex; flex-wrap: wrap; gap: 2px; }
.legal-nav a {
  display: inline-flex; align-items: center; min-height: 48px; padding: 8px 12px;
  font-family: "Anton", "Archivo", system-ui, sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: 13px; letter-spacing: .16em; color: var(--muted);
}
.legal-nav a:hover { color: var(--yellow); }

.legal-head { padding-block: clamp(48px, 7vw, 96px) clamp(24px, 3vw, 40px); }
.legal-title {
  font-family: "Anton", "Archivo", system-ui, sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(3rem, 9vw, 92px); line-height: .84; margin: 12px 0 20px;
}
.legal-title .dw:nth-child(even) { transform: translateX(min(14px,2.2vw)) skewX(-8deg); }
.legal-updated {
  font-family: "Anton", "Archivo", system-ui, sans-serif; font-weight: 400; text-transform: uppercase;
  letter-spacing: .16em; font-size: 15px; color: var(--muted);
}

.legal { padding-bottom: clamp(64px, 9vw, 120px); }
.legal-wrap { max-width: 76ch; }
.legal h2 {
  font-family: "Anton", "Archivo", system-ui, sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(24px, 3.4vw, 38px); line-height: 1.05; letter-spacing: .01em;
  transform: skewX(-8deg); transform-origin: left;
  margin: clamp(40px, 5vw, 64px) 0 16px;
  padding-top: 18px; border-top: 2px solid var(--hair);
}
.legal h3 {
  font-family: "Archivo", system-ui, sans-serif; font-weight: 800; color: var(--text);
  font-size: clamp(17px, 1.9vw, 20px); line-height: 1.3;
  margin: clamp(28px, 3.2vw, 38px) 0 10px;
}
.legal p, .legal li {
  font-size: clamp(16px, 1.7vw, 18px); line-height: 1.65; color: var(--muted);
  margin-bottom: 14px;
}
.legal strong { color: var(--text); font-weight: 600; }
.legal ul { padding-left: 1.15em; margin-bottom: 18px; list-style: disc; }
.legal li { margin-bottom: 10px; }
.legal li::marker { color: var(--cyan); }
.legal a { color: var(--cyan); text-underline-offset: 3px; text-decoration: underline; }
.legal a:hover { color: var(--yellow); }
.legal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em; color: var(--text);
  background: rgba(255,255,255,0.07); padding: .1em .38em;
}

/* The headline claim, set louder than the body around it. */
.legal-lead {
  font-family: "Archivo", system-ui, sans-serif; font-weight: 800;
  font-size: clamp(19px, 2.2vw, 24px) !important;
  line-height: 1.4 !important; color: var(--text) !important;
}
/* An aside the reader should not skim past. */
.legal-note {
  border-left: 3px solid var(--magenta); padding: 4px 0 4px 16px;
  color: var(--text) !important;
}

.legal-tablewrap { overflow-x: auto; margin-bottom: 20px; }
.legal-table { width: 100%; border-collapse: collapse; text-align: left; }
.legal-table th, .legal-table td {
  padding: 14px 16px 14px 0; border-bottom: 1px solid var(--hair);
  font-size: clamp(15px, 1.6vw, 17px); line-height: 1.5; vertical-align: top;
}
.legal-table thead th {
  font-family: "Anton", "Archivo", system-ui, sans-serif; font-weight: 400; text-transform: uppercase;
  letter-spacing: .12em; font-size: 13px; color: var(--muted);
  border-bottom: 2px solid rgba(255,255,255,0.2);
}
.legal-table tbody th { color: var(--text); font-weight: 600; padding-right: 28px; }
.legal-table tbody td { color: var(--muted); }

/* ============================== RESPONSIVE ============================== */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  /* Copy first on a phone: a 650px screenshot ahead of the headline pushed
     the whole pitch below the first screen. The figure follows, smaller. */
  .hero-figure { width: min(280px, 72vw); justify-self: start; }
  .step { grid-template-columns: 1fr; }
  .step:nth-child(even) .step-copy { order: 0; }
  .step-mock { width: min(280px, 78vw); justify-self: start; }
  .sibling-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .nav-toggle { display: inline-flex; align-items: center; }
  .primary-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: rgba(10,10,12,0.96);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .header-inner { position: relative; }
  .nav-toggle[aria-expanded="true"] ~ .primary-nav { display: block; }
  .primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 10px var(--pad) 18px; }
  .primary-nav li { border-top: 1px solid rgba(255,255,255,0.08); }
  .primary-nav .btn { margin-top: 14px; width: 100%; }
}

/* The legal pages carry no JS, so their nav has no toggle to hide behind —
   it has to fit by wrapping. Below 820px .primary-nav is display:none until
   opened, so wrapping the row changes nothing on the landing page. */
@media (max-width: 700px) {
  .header-inner { flex-wrap: wrap; row-gap: 2px; }
  .legal-nav { width: 100%; }
  .legal-nav a { padding: 8px 10px; letter-spacing: .1em; }
}

@media (max-width: 560px) {
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .hero-title { font-size: clamp(2.6rem, 13.5vw, 64px); }
  .deal-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .deal-row dd { text-align: left; transform-origin: left; }
}

/* ============================= FORCED COLORS ============================ */
@media (forced-colors: active) {
  .btn-ghost { border: 2px solid currentColor; }
  .step-copy::before, .deal-row dd, .mark { forced-color-adjust: none; }
}

/* =============================== MOTION ================================= */
/* Everything animated lives here → reduced-motion users get none of it. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes wIn    { from { translate: -80px 0; opacity: 0 } to { translate: 0 0; opacity: 1 } }
  @keyframes wUp    { from { translate: 0 40px;  opacity: 0 } to { translate: 0 0; opacity: 1 } }
  @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
  @keyframes marq   { from { transform: translateX(0) } to { transform: translateX(-50%) } }

  .hero-eyebrow { animation: wUp .5s var(--ease) both; }
  .hero-title .dw { animation: wIn .5s var(--ease) both; }
  .hero-title .dw-1 { animation-delay: .10s; }
  .hero-title .dw-2 { animation-delay: .20s; }
  .hero-title .dw-3 { animation-delay: .30s; }
  .hero-title .dw-4 { animation-delay: .40s; }
  .hero-body    { animation: wUp .5s var(--ease) .45s both; }
  .hero-actions { animation: wUp .5s var(--ease) .55s both; }
  .hero-figure  { animation: fadeIn .7s var(--ease) .2s both; }

  .marquee-track { animation: marq 36s linear infinite; }
}

/* Reduced motion: a quiet 150ms fade instead of movement; marquee is dead still. */
@media (prefers-reduced-motion: reduce) {
  @keyframes fadeInRM { from { opacity: 0 } to { opacity: 1 } }
  .hero-eyebrow, .hero-title .dw, .hero-body, .hero-actions, .hero-figure {
    animation: fadeInRM .15s ease both;
  }
}