/* ============================================================
   RESTNLOAD — Slayy Studio
   Built from research/05-build-brief.md
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Palette — day mode. Every pair below clears WCAG AA; the tightest is
     white-on-red at 4.50:1. See research/06-quality-audit.md. */
  --ink:         #0B0F1A;   /* primary text            19.13:1 on paper */
  --slate:       #4A5162;   /* body / secondary text    7.94:1 on paper */
  --paper:       #FFFFFF;   /* page base */
  --fog:         #F5F6FA;   /* alternating section ground */
  --mist:        #E9ECF5;   /* feature ground (was the dark band) */
  --indigo:      #3F4C8C;   /* brand accent             8.00:1 on paper */
  --indigo-lift: #4A5899;
  --red:         #D93B45;
  --red-deep:    #A82730;
  --signal:      #3DD68C;
  --white:       #FFFFFF;

  --muted:       #5D6472;   /* small labels — 5.04:1 even on the mist ground */
  --gold:        #B8770A;   /* rating stars — 3.13:1 on mist, clears 1.4.11 */

  --line-light: rgba(11,15,26,.10);
  --line-mid:   rgba(11,15,26,.16);

  /* Type */
  --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --body:    "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Rhythm */
  --pad:    clamp(1.25rem, 5vw, 3rem);
  --shell:  1200px;
  --sec-y:  clamp(4.5rem, 11vw, 9rem);
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  /* `overflow-x: hidden` on body forces overflow-y to `auto`, which turns body
     into a scroll container and breaks window.scrollTo and ScrollTrigger's
     default scroller. `clip` contains the same horizontal overflow without
     creating one. `hidden` is kept first as a fallback for older browsers. */
  overflow-x: hidden;
  overflow-x: clip;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
p { margin: 0 0 1rem; }
ul { margin: 0; padding: 0; list-style: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- 3. TYPE SCALE ---------- */
.h1 {
  font-family: var(--display);
  font-weight: 700;
  /* Max capped so the longest hero line ("NOT THE MATTRESS.") holds together on
     one line at desktop widths instead of breaking mid-phrase. */
  font-size: clamp(3.1rem, 7.4vw, 5.5rem);
  line-height: .94;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.35; }

.eyebrow {
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--indigo);
  margin: 0 0 1rem;
}
.eyebrow--light { color: var(--indigo); }
.spec { font-family: var(--mono); font-size: .8125rem; letter-spacing: .04em; }
.lede { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: var(--slate); max-width: 62ch; }
.measure { max-width: 68ch; }

/* ---------- 4. LAYOUT ---------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: var(--sec-y); }
/* The feature ground. Was a dark band in the original build; in day mode it is
   a soft indigo-tinted panel that still gives the page vertical rhythm. */
.section--tint { background: var(--mist); color: var(--ink); }
.section--fog  { background: var(--fog); }
.grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.center { text-align: center; }
.section-head { max-width: 760px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head.center { margin-inline: auto; }

/* Visually hidden but announced — used to give the star glyphs a real
   text equivalent, since the glyphs themselves are aria-hidden icons. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 5. SKIP LINK / FOCUS ---------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--red); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--indigo-lift); outline-offset: 3px; border-radius: 4px; }

/* ---------- 6. BUTTONS ---------- */
.btn {
  --btn-bg: var(--red);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem 1.9rem;
  font-family: var(--display);
  font-weight: 600; font-size: 1.0625rem; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: var(--btn-bg);
  border: 2px solid transparent; border-radius: 6px;
  cursor: pointer; overflow: hidden; isolation: isolate;
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--red-deep);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.btn:hover::after, .btn:focus-visible::after { transform: scaleX(1); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(217,59,69,.3); }
.btn:active { transform: translateY(0); }

.btn--ghost { background: transparent; border-color: var(--line-light); color: var(--ink); }
.btn--ghost::after { background: var(--ink); }
.btn--ghost:hover { color: #fff; box-shadow: none; }
/* Day mode: every ground is light, so ghost buttons use one treatment
   everywhere — dark label, hairline border, inverting on hover. */
.btn--ghost { border-color: var(--line-mid); }

.btn--amazon {
  background: transparent; border-color: var(--line-light); color: var(--ink);
  font-size: .9375rem; padding: .8rem 1.4rem;
}
.btn--amazon::after { background: var(--ink); }
.btn--amazon:hover { color: #fff; box-shadow: none; }
.btn--amazon { border-color: var(--line-mid); }

.btn-row { display: flex; flex-wrap: wrap; gap: .875rem; }

/* ---------- 7. HEADER ---------- */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 100;
  padding-block: 1.1rem;
  transition: background .35s ease, padding .35s ease, box-shadow .35s ease;
}
.hdr__in { display: flex; align-items: center; gap: 1.5rem; }
.hdr__logo { flex-shrink: 0; }
.hdr__logo img { height: 34px; width: auto; }
.hdr.is-stuck {
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding-block: .7rem;
  box-shadow: 0 1px 0 var(--line-light), 0 4px 24px rgba(11,15,26,.05);
}
.nav { margin-left: auto; display: flex; align-items: center; gap: 1.9rem; }
.nav a {
  font-family: var(--display); font-weight: 600; font-size: 1.0625rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink);
  position: relative; padding-block: .25rem;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: right;
  transition: transform .25s ease;
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
/* `.nav a` sets a dark label for the day-mode header, which out-specifies
   `.btn`'s white — so the red pill needs its white restored explicitly.
   Without this the pill renders ink-on-red at 4.25:1 and fails AA. */
.nav .btn { padding: .6rem 1.35rem; font-size: .9375rem; border-radius: 999px; color: #fff; }
.nav .btn::after { background: var(--red-deep); height: auto; transform: scaleX(0); }
.nav .btn:hover::after { transform: scaleX(1); }

/* Inner pages: the header is opaque from the start rather than fading in. */
.hdr--solid { background: var(--paper); position: sticky; box-shadow: 0 1px 0 var(--line-light); }

.burger {
  display: none; margin-left: auto;
  background: none; border: 0; padding: .5rem; cursor: pointer;
}
.burger span {
  display: block; width: 24px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .3s ease, opacity .2s ease;
}
.burger span + span { margin-top: 6px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 880px) {
  .burger { display: block; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(320px, 82vw);
    background: var(--paper); flex-direction: column; align-items: flex-start;
    gap: 1.5rem; padding: 6.5rem 2rem 2rem;
    border-left: 1px solid var(--line-light); overflow-y: auto;
    box-shadow: -18px 0 48px rgba(11,15,26,.10);
    transform: translateX(100%);
    /* `visibility` does two jobs: it keeps the closed drawer's links out of the
       tab order (an invisible link must not receive focus), and it guarantees
       the panel cannot be seen even if the transform is interrupted mid-flight
       — e.g. when the viewport is resized across this breakpoint. */
    visibility: hidden;
    transition: transform .38s cubic-bezier(.4,0,.2,1), visibility 0s linear .38s;
  }
  .nav.is-open {
    transform: none;
    visibility: visible;
    transition: transform .38s cubic-bezier(.4,0,.2,1), visibility 0s;
  }
  .nav a { font-size: 1.375rem; }
}

/* ---------- 8. HERO ---------- */
.hero {
  position: relative; color: var(--ink);
  background: linear-gradient(168deg, var(--mist) 0%, var(--fog) 46%, var(--paper) 100%);
  padding-block: clamp(8rem, 16vw, 11rem) clamp(4rem, 8vw, 6rem);
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; z-index: 0;
  width: 60vw; height: 60vw; max-width: 820px; max-height: 820px;
  right: -14vw; top: -12vw; border-radius: 50%;
  background: radial-gradient(circle, rgba(63,76,140,.10) 0%, rgba(63,76,140,0) 68%);
  pointer-events: none;
}
.hero__in { position: relative; z-index: 1; display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 960px) { .hero__in { grid-template-columns: 1.05fr .95fr; } }
.hero .h1 { margin-bottom: 1.5rem; }
.hero .h1 .accent { color: var(--red); }
.hero__sub { font-size: clamp(1.0625rem, 1.7vw, 1.3125rem); color: var(--slate); max-width: 48ch; margin-bottom: 2rem; }

.hero__media {
  position: relative;
  border: 1px solid var(--line-light); border-radius: 20px;
  background: var(--fog);
  box-shadow: 0 24px 60px rgba(11,15,26,.12);
  aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; will-change: transform;
}
.hero__media picture,
.hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  /* A whisper of indigo to tie the photograph to the palette. Deliberately very
     light so it does not grey down a bright daylight image. */
  background: radial-gradient(ellipse at 30% 20%, rgba(63,76,140,.07), transparent 66%);
  pointer-events: none;
}
.asset-note {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--slate); text-align: center; padding: 2rem; line-height: 2;
}
.asset-note strong { color: var(--indigo); display: block; font-size: .875rem; }

/* Trust strip */
.trust {
  display: flex; flex-wrap: wrap; gap: 1rem 2.25rem;
  margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--line-mid);
}
.trust__item { display: flex; flex-direction: column; gap: .1rem; }
.trust__val { font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1; }
.trust__lbl { font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--slate); }
.stars { color: var(--gold); letter-spacing: .05em; }

/* ---------- 9. PILLARS ---------- */
.pillar {
  background: var(--white); border: 1px solid var(--line-light); border-radius: 16px;
  padding: 2rem 1.75rem; height: 100%;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pillar:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(11,15,26,.09); border-color: var(--indigo-lift); }
.pillar__n { font-family: var(--mono); font-size: .75rem; letter-spacing: .12em; color: var(--indigo); margin-bottom: 1rem; }
.pillar h3 { margin-bottom: .6rem; }
.pillar p { color: var(--slate); font-size: .9688rem; margin: 0; }
.section--tint .pillar { background: var(--paper); border-color: transparent; box-shadow: 0 2px 10px rgba(11,15,26,.04); }

/* ---------- 10. FITMENT SPLIT ---------- */
.fit {
  position: relative; background: var(--white); border: 1px solid var(--line-light);
  border-radius: 20px; padding: 2.25rem; overflow: hidden; height: 100%;
  display: flex; flex-direction: column;
}
.fit__tag {
  align-self: flex-start;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase;
  background: var(--indigo); color: #fff; padding: .3rem .75rem; border-radius: 999px; margin-bottom: 1.25rem;
}
.fit h3 { font-family: var(--display); font-size: 1.9rem; text-transform: uppercase; letter-spacing: -.01em; margin-bottom: .75rem; }
.fit p { color: #4A5162; font-size: .9688rem; }
.fit__specs { margin: 1.25rem 0; padding: 1rem 1.25rem; background: var(--fog); border-radius: 12px; }
.fit__specs div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .3rem; font-family: var(--mono); font-size: .8125rem; }
.fit__specs dt, .fit__specs span:first-child { color: var(--muted); }
.fit__specs span:last-child { color: var(--ink); font-weight: 500; }
.fit__cta { margin-top: auto; padding-top: 1.25rem; }
.fit__cta a { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--red); }
.fit__cta a:hover { color: var(--red-deep); }

/* Magnet snap diagram */
.snap { position: relative; height: 120px; margin: 1.25rem 0; border-radius: 12px; background: var(--fog); overflow: hidden; }
.snap__rail { position: absolute; left: 0; right: 0; top: 50%; height: 22px; transform: translateY(-50%); background: #C7CCD8; }
.snap__mount {
  position: absolute; top: 50%; left: 12%; width: 54px; height: 40px;
  transform: translateY(-50%); background: var(--ink); border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  will-change: transform;
}
.snap__mount::after { content: ""; width: 22px; height: 22px; border-radius: 3px; background: var(--red); }

/* ---------- 11. PRODUCT CARDS ---------- */
.pcard {
  background: var(--white); border: 1px solid var(--line-light); border-radius: 18px;
  overflow: hidden; display: flex; flex-direction: column; height: 100%;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pcard:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(11,15,26,.11); border-color: var(--indigo-lift); }
.pcard__img { aspect-ratio: 4/3; background: var(--fog); overflow: hidden; }
.pcard__img img { width: 100%; height: 100%; object-fit: cover; }
.pcard__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.pcard__rating { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--muted); margin-bottom: .6rem; }
.pcard h3 { margin-bottom: .5rem; font-size: 1.125rem; }
.pcard p { font-size: .9375rem; color: #4A5162; margin-bottom: 1rem; }
.pcard__foot { margin-top: auto; }
.price { font-family: var(--display); font-weight: 700; font-size: 2rem; line-height: 1; }
.price sup { font-size: .95rem; top: -.75em; }
.stock { font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: #0F9960; display: flex; align-items: center; gap: .4rem; margin-top: .35rem; }
.stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); }

/* ---------- 12. STEPS ---------- */
.step { display: flex; gap: 1.5rem; padding-block: 1.75rem; border-top: 1px solid var(--line-mid); }
.step:last-child { border-bottom: 1px solid var(--line-mid); }
.step__n {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--indigo); color: var(--indigo);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: .875rem;
}
.step h3 { margin-bottom: .4rem; }
.step p { color: var(--slate); margin: 0; }

/* ---------- 13. REVIEWS ---------- */
.review {
  background: var(--white); border: 1px solid var(--line-light); border-radius: 16px;
  padding: 1.75rem; height: 100%; display: flex; flex-direction: column;
}
.review__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.review h3 { font-size: 1.0625rem; margin-bottom: .6rem; }
.review blockquote { margin: 0 0 1.25rem; font-size: .9375rem; color: #4A5162; line-height: 1.65; }
.review__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .8125rem; color: var(--muted); }
.tag {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase;
  background: var(--fog); color: var(--indigo); padding: .25rem .6rem; border-radius: 999px; white-space: nowrap;
}

/* ---------- 14. FAQ ---------- */
.faq { border-top: 1px solid var(--line-light); }
.faq__item { border-bottom: 1px solid var(--line-light); }
.faq__q {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.5rem 0; text-align: left;
  font-family: var(--body); font-weight: 600; font-size: 1.0625rem; line-height: 1.4;
  transition: color .2s ease;
}
.faq__q:hover { color: var(--indigo); }
.faq__icon { flex-shrink: 0; width: 22px; height: 22px; position: relative; margin-top: .25rem; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: var(--indigo);
  transform: translate(-50%,-50%); transition: transform .3s ease, opacity .3s ease;
}
.faq__icon::before { width: 14px; height: 2px; }
.faq__icon::after  { width: 2px; height: 14px; }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.faq__a { overflow: hidden; height: 0; }
.faq__a > div { padding-bottom: 1.5rem; color: #4A5162; max-width: 72ch; }
.faq__a p:last-child { margin-bottom: 0; }

/* ---------- 15. CALLOUTS ---------- */
.callout {
  border-left: 3px solid var(--red); background: var(--fog);
  padding: 1.5rem 1.75rem; border-radius: 0 12px 12px 0;
}
.callout p:last-child { margin-bottom: 0; }
.section--tint .callout { background: var(--paper); }

.note { font-size: .875rem; color: var(--muted); }

/* ---------- 16. BREADCRUMB ---------- */
.crumbs { font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: 1.5rem; }
.crumbs a:hover, .crumbs span { color: var(--ink); }
.crumbs--light { color: var(--muted); padding-top: 1.5rem; }

/* ---------- 17. PDP ---------- */
.pdp { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .pdp { grid-template-columns: 1fr 1fr; } }
.pdp__gallery { position: relative; border-radius: 20px; overflow: hidden; background: var(--fog); aspect-ratio: 1; }
.pdp__gallery img { width: 100%; height: 100%; object-fit: cover; }
.pdp h1 { font-family: var(--display); font-weight: 700; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1; text-transform: uppercase; letter-spacing: -.015em; margin-bottom: 1rem; }
.pdp__price { display: flex; align-items: baseline; gap: 1rem; margin-block: 1.5rem; }
.spec-table { width: 100%; border-collapse: collapse; margin-block: 1.5rem; }
.spec-table th, .spec-table td { text-align: left; padding: .75rem 0; border-bottom: 1px solid var(--line-light); font-size: .9375rem; }
.spec-table th { font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 500; width: 42%; }

/* ---------- 18. FORM ---------- */
.field { margin-bottom: 1.25rem; }
.field label { display: block; font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; }
.field input, .field textarea {
  width: 100%; padding: .875rem 1rem; font: inherit; font-size: 1rem;
  border: 1px solid var(--line-light); border-radius: 8px; background: var(--white); color: var(--ink);
  transition: border-color .2s ease;
}
.field input:focus, .field textarea:focus { border-color: var(--indigo); outline-offset: 1px; }
.field textarea { min-height: 150px; resize: vertical; }

/* ---------- 19. FOOTER ---------- */
.ftr { background: var(--mist); color: var(--slate); padding-block: clamp(3.5rem, 7vw, 5rem) 2rem; border-top: 1px solid var(--line-light); }
.ftr__grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.ftr h4 { font-family: var(--mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin: 0 0 1.1rem; font-weight: 500; }
.ftr li { margin-bottom: .55rem; }
.ftr a:hover { color: var(--indigo); }
.ftr__logo img { height: 34px; margin-bottom: 1rem; }
.ftr__tag { font-family: var(--display); font-size: 1.25rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink); }
.ftr__entity { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line-mid); font-size: .875rem; line-height: 1.8; }
.ftr__entity address { font-style: normal; }
.ftr__base { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line-mid); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .8125rem; }
.pay { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.pay span { font-family: var(--mono); font-size: .625rem; letter-spacing: .06em; border: 1px solid var(--line-mid); border-radius: 4px; padding: .25rem .5rem; }

/* ---------- 20. ANIMATION BASE ----------
   Below-fold `.reveal` elements start hidden only when motion is allowed AND
   JS has taken over (`.js-anim` is set by main.js), so no-JS and
   reduced-motion users always see fully-rendered content.                  */
@media (prefers-reduced-motion: no-preference) {
  .js-anim .reveal { opacity: 0; transform: translateY(40px); }
}

/* The hero headline is the LCP element, so its reveal is pure CSS and never
   waits on the GSAP CDN. If the CDN is slow, blocked or unavailable, the
   headline still paints and still animates. Reduced motion skips it
   entirely and the text renders immediately at full opacity.               */
@media (prefers-reduced-motion: no-preference) {
  .reveal-line { animation: lineIn .6s cubic-bezier(.16, 1, .3, 1) both; }
  .reveal-line:nth-child(1) { animation-delay: 0s; }
  .reveal-line:nth-child(2) { animation-delay: .07s; }
  .reveal-line:nth-child(3) { animation-delay: .14s; }
}
@keyframes lineIn {
  from { opacity: 0; transform: translateY(32px); clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; transform: none;             clip-path: inset(0 0 0% 0); }
}