html { scroll-behavior: auto; }

body {
  min-height: 100svh;
  font-family: var(--ff-display);
  color: var(--c-text);
  /* Outermost ring of the radial gradient — so when you scroll past the hero
     (which carries the gradient), the page color is continuous, no jump. */
  background: #D9E7F6;
}

main { overflow: hidden; }

/* Per-character span injected by js/sections/stagger-headings.js (and
   js/sections/campaign.js) for the letter-by-letter stagger-in.
   inline-block lets GSAP translate y per glyph independently. */
.stagger-char {
  display: inline-block;
  will-change: transform, opacity;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  /* No gap — Rive icons bake in their own visual padding around the glyph. */
  gap: 0;
  padding: 18px 22px 18px 14px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  border-radius: var(--radius-pill);
  overflow: hidden; /* pill-clips the icon's outer corners cleanly */
  transition: background-color 200ms var(--ease-out);
}

.btn--primary {
  background: var(--c-navy);
  color: #fff;
}
/* No background change on hover — the Rive icon animation IS the
   hover feedback now. Re-adding a bg darken would compete with it. */

/* Icon spot — flush to the button's top/bottom edges so Rive icons get the full
   vertical canvas. Height = pad-top + content (14px @ line-height:1) + pad-bot = 50. */
.btn__icon {
  width: 50px;
  height: 50px;
  margin-block: -18px;
  flex: 0 0 auto;
}

/* Placeholder treatment for slots not yet wired to a Rive icon. */
span.btn__icon {
  background: var(--c-pink-placeholder);
  outline: 1px dashed var(--c-pink-outline);
}

/* Rive canvas icon — explicit display:block so the inline-default baseline
   alignment doesn't sneak in below the canvas. */
.btn__icon--rive {
  display: block;
}

/* Inline highlights inside body copy */
.pill-sage {
  background: var(--c-sage);
  color: #fff;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-weight: 600;
}

.underline-sketch {
  /* border-bottom (instead of text-decoration) so descenders like g/y don't
     intersect the line. Color is brand orange. */
  border-bottom: 3px solid var(--c-orange);
  padding-bottom: 0;
}

/* Body scroll lock while mobile menu is open */
body[data-menu="open"] { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Legal pages (privacy, terms) ─────────────────────────────────────────── */
/* Was: a narrow 760px white card floating on a light-blue background, which
   read like a popup. Now: a real page using the standard --container width
   with no card chrome, just inset content on the marketing background so it
   reads as part of the site. Prose blocks below are capped at ~880px so
   line-lengths stay readable inside the wider container. */
.legal-body { background: #fff; }
.legal-page {
  max-width: var(--container);
  margin: 40px auto 80px;
  padding: 48px var(--gutter) 56px;
  color: #222;
  font-size: 16px;
  line-height: 1.7;
}
.legal-page > p,
.legal-page > ul,
.legal-page > h2,
.legal-page > h3,
.legal-page > .legal-eyebrow,
.legal-page > h1,
.legal-page > .legal-updated {
  max-width: 880px;
}
.legal-page .legal-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  font-weight: 600;
  color: #6b7c8d;
  margin: 0 0 8px;
}
.legal-page h1 {
  font-size: clamp(32px, 4vw, 42px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: #1a2b3d;
}
.legal-page .legal-updated {
  font-size: 13px;
  color: #6b7c8d;
  margin: 0 0 32px;
}
.legal-page .legal-callout {
  background: #FFF8E7;
  border-left: 3px solid #E28E4A;
  padding: 14px 18px;
  margin: 0 0 32px;
  border-radius: 6px;
  font-size: 14px;
  color: #6b4e1f;
}
.legal-page h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 36px 0 12px;
  color: #1a2b3d;
}
.legal-page p {
  margin: 0 0 16px;
}
/* lp/css/reset.css strips list-style globally (ul, ol { list-style: none }).
   The padding-left here leaves room for markers but they never render
   without re-asserting list-style. Outside positioning keeps the bullet
   in the gutter so text aligns with surrounding paragraphs. */
.legal-page ul {
  margin: 0 0 16px;
  padding-left: 22px;
  list-style: disc outside;
}
.legal-page ol {
  margin: 0 0 16px;
  padding-left: 22px;
  list-style: decimal outside;
}
.legal-page li {
  margin-bottom: 6px;
}
.legal-page a {
  color: #395D7F;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-page a:hover { color: #1a2b3d; }