/* ==========================================================================
   SportsDaddy — main stylesheet
   Rebuilt 1:1 from the Webflow staging design (see planning/webflow-reference).
   ========================================================================== */

/* ---- Design tokens ---- */
:root {
  --bg:            #080808;
  --grid-bg:       #0f0e0d;
  --grid-line:     #161514;
  --surface:       #171717;
  --surface-2:     #272727;
  --black:         #000;
  --border:        #222;
  --border-2:      #383838;
  --text:          #fff;
  --muted:         #848484;
  /* Fill colour — carries WHITE text, so it must be dark enough: 4.95:1. */
  --accent:        #2a8039;
  --accent-hover:  #1e7631;
  --accent-bg:     #18291a;
  /* Green used AS text/icons/borders on the dark surfaces — must be light
     enough instead: 5.5:1–6.1:1 on #171717/#0f0e0d/#080808. */
  --accent-on-dark:       #35a24b;
  --accent-on-dark-hover: #4cb867;

  --font-heading: "Righteous", "Arial Narrow", Arial, sans-serif;
  --font-body:    "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --container: 90rem;   /* 1440px */
  --gutter: 5%;

  --radius-pill:   999px;
  --radius-card:   16px;
  --radius-pricing:24px;
  --radius-inner:  12px;
  --radius-sm:     8px;

  /* ---- Motion tokens ----
     Shared vocabulary mirroring the app: calm, ~300ms, gentle ease-out-expo.
     Every animation below is gated behind prefers-reduced-motion. */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:      0.15s;
  --dur:           0.3s;
  --dur-slow:      0.5s;
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---- Lenis smooth scroll (vendored: /js/lenis.min.js) ----
   JS adds `.lenis` to <html> only when motion is allowed; when active, Lenis
   owns smoothing so we disable native smooth to avoid the two fighting. With
   no JS or reduced motion, the block above (or instant native) still applies. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---- Global keyboard focus ring ----
   Consistent, visible focus for keyboard users across links/buttons.
   Components with their own focus treatment (form fields, switch) keep it. */
a:focus-visible,
button:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--accent-on-dark);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--grid-bg);
  background-image:
    linear-gradient(to right,  transparent 63px, var(--grid-line) 63px, var(--grid-line) 64px),
    linear-gradient(to bottom, transparent 63px, var(--grid-line) 63px, var(--grid-line) 64px);
  background-size: 64px 64px;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-heading); font-weight: 400; text-transform: uppercase; }
p { margin: 0; }

/* ---- Headings scale ---- */
.h1 { font-size: 4.25rem; line-height: 1.04; text-wrap: balance; }
.h2 { font-size: 3rem;    line-height: 1.04; text-wrap: balance; }
.h3 { font-size: 2.5rem;  line-height: 1.14; }
.h4 { font-size: 2rem;    line-height: 1.14; }
.h5 { font-size: 1.5rem;  line-height: 1.24; }

.lead { font-size: 1.125rem; line-height: 1.6; text-wrap: balance; }
.muted { color: var(--muted); }

/* ---- Layout helpers ---- */
.section { padding: 7rem var(--gutter); }
.container { width: 100%; max-width: var(--container); margin-inline: auto; }
.max-w-lg { width: 100%; max-width: 48rem; }
.max-w-sm { width: 100%; max-width: 30rem; }
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }

/* ---- Buttons ---- */
.button {
  display: inline-block;
  padding: .75rem 1.5rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  color: var(--text);
  background-color: var(--accent);
  border: 1px solid var(--black);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.button:hover { background-color: var(--accent-hover); }
@media (prefers-reduced-motion: no-preference) {
  .button:hover { transform: translateY(-1px); }
}
.button:active { transform: translateY(1px); }
.button.is-small { padding: .5rem 1.25rem; }
.button.is-secondary { background-color: var(--surface); border-color: var(--border); }
.button.is-secondary:hover { background-color: #202020; }
/* Hero CTA: dark fill, green outline */
.button.is-alternate { background-color: var(--surface); border-color: var(--accent-on-dark); }
.button.is-alternate:hover { background-color: var(--accent-bg); }
.button.full-width { width: 100%; }

/* ---- Skip link (WCAG 2.4.1 Bypass Blocks) ----
   Off-screen until focused, then pinned to the top-left. */
.skip-link {
  position: fixed; top: 1rem; left: 1rem;
  z-index: 400;
  padding: .75rem 1.25rem;
  font-weight: 600;
  color: var(--text);
  background-color: var(--surface);
  border: 2px solid var(--accent-on-dark);
  border-radius: var(--radius-sm);
  /* Translate by its own height rather than a viewport percentage, so it
     hides reliably regardless of viewport size. */
  transform: translateY(calc(-100% - 2rem));
  transition: transform .15s ease;
}
.skip-link:focus { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }

/* The skip target must not be left with a stray outline after the jump. */
main:focus { outline: none; }

/* ==========================================================================
   Navbar
   ========================================================================== */
.navbar {
  position: relative; z-index: 10;
  min-height: 4.5rem;
  padding-inline: var(--gutter);
  background-color: transparent;  /* let the page's grid background show through */
}
.navbar__container {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: var(--container); min-height: 4.5rem; margin-inline: auto;
}
.navbar__logo { font-family: var(--font-heading); font-size: 1.5rem; line-height: 1.04; text-transform: uppercase; }
.navbar__menu { display: flex; align-items: center; gap: 0; }
.navbar__links { display: flex; align-items: center; }
.navbar__link { padding: .5rem 1rem; font-weight: 600; opacity: .9; transition: opacity .2s ease; }
.navbar__link:hover { opacity: 1; }
.navbar__buttons { display: flex; align-items: center; gap: 1rem; margin-left: 1rem; }

.navbar__toggle {
  display: none;
  width: 48px; height: 48px; padding: 12px;
  background: none; border: 0; cursor: pointer;
}
.navbar__toggle span { display: block; height: 2px; background: var(--text); margin: 5px 0; transition: transform .3s ease, opacity .3s ease; }
.navbar__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navbar__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; overflow-x: clip; }  /* clip sides only; let top glow rise behind the nav */
.hero .container { position: relative; z-index: 1; }

/* Three green radial glows behind the hero content */
.hero__glows { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__glow { position: absolute; border-radius: 50%; filter: blur(70px); }
.hero__glow--top {
  width: 820px; height: 620px; top: -180px; left: 50%; transform: translateX(-45%);
  background: radial-gradient(closest-side, rgba(45, 138, 63, .5), rgba(45, 138, 63, 0) 70%);
}
.hero__glow--left {
  width: 640px; height: 640px; top: 260px; left: -260px;
  background: radial-gradient(closest-side, rgba(45, 138, 63, .42), rgba(45, 138, 63, 0) 70%);
}
.hero__glow--right {
  width: 640px; height: 640px; top: 120px; right: -260px;
  background: radial-gradient(closest-side, rgba(45, 138, 63, .42), rgba(45, 138, 63, 0) 70%);
}
@media (max-width: 767px) {
  .hero__glow { filter: blur(50px); }
  .hero__glow--top { width: 520px; height: 420px; top: -120px; }
  .hero__glow--left { width: 420px; height: 420px; top: 300px; left: -220px; }
  .hero__glow--right { width: 420px; height: 420px; top: 200px; right: -220px; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero__glow { will-change: transform; }
}

.hero__content { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__subtitle { margin-top: 1.5rem; }
.hero__cta { margin-top: 1.5rem; }
.hero__image-wrap { margin-top: 6rem; }
.hero__image { width: 100%; border-radius: var(--radius-card); }

/* ==========================================================================
   Logo strip
   ========================================================================== */
.logos__head > p { margin-top: 1.5rem; }

/* Full-bleed scrolling marquee */
.logos__marquee {
  margin-top: 4rem;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logos__track {
  display: flex;
  align-items: center;
  gap: 4rem;
  width: max-content;
  animation: logos-scroll 40s linear infinite;
}
.logos__track img {
  height: 64px; width: 64px;
  object-fit: contain;
  flex: none;
  opacity: .95;
}
.logos__marquee:hover .logos__track { animation-play-state: paused; }

@keyframes logos-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .logos__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: 1.5rem 2.5rem;
  }
}

/* ==========================================================================
   Features (bento)
   ========================================================================== */
.section__head { max-width: 48rem; margin-bottom: 5rem; }
.section__head > p { margin-top: 1.5rem; }

.features__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.feature-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  min-height: 70vh; padding: 2.5rem;
  background-color: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  transition: transform var(--dur) var(--ease-out-expo),
              border-color var(--dur) var(--ease-out-expo),
              box-shadow var(--dur) var(--ease-out-expo);
}
@media (prefers-reduced-motion: no-preference) {
  .feature-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-2);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  }
}
.feature-card.is-large {
  grid-column: 1 / -1;
  justify-content: flex-start; gap: 2rem; min-height: 40vh;
}
.feature-card.is-large .feature-card__img { width: 100%; }
.feature-card__text { max-width: 30rem; }
.feature-card__title { margin-bottom: .5rem; }
.feature-card__desc { color: #d0d0d0; text-wrap: balance; }
.feature-card__img { align-self: center; }
.feature-card__img.is-rounded { border-radius: var(--radius-inner); }
.feature-card__img-wrap { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin-top: 2rem; }
/* Portrait phone screenshot (Mobile responsive card): cap height and center */
.feature-card__img--phone { width: auto; max-height: 30rem; margin-inline: auto; }
/* Soft green radial glow rising from the bottom of every feature card,
   sitting below the text and image. */
.feature-card > * { position: relative; z-index: 1; }
.feature-card::after {
  content: ""; position: absolute; z-index: 0;
  left: 50%; bottom: 0; transform: translate(-50%, 38%);
  width: 360px; height: 360px; border-radius: 999px;
  background-image: radial-gradient(circle, rgba(45,138,63,.5), rgba(45,138,63,0) 70%);
  filter: blur(50px);
  pointer-events: none;
}

/* ==========================================================================
   Pricing
   ========================================================================== */
.pricing-card {
  display: grid; grid-template-columns: 35% 1fr; gap: 5rem;
  padding: 1rem; background-color: var(--black); border-radius: var(--radius-pricing);
}
.pricing__left {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 2.5rem 2rem;
}
.pricing__left h3 { margin-bottom: 1.5rem; }
.pricing__stepper { margin-top: 2rem; }
.stepper-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1rem;
  color: rgba(255,255,255,.6);
  background-color: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
}
.stepper-card.is-active { color: var(--text); background-color: var(--accent-bg); border-color: var(--accent-on-dark); }
.stepper-card .price { font-family: var(--font-heading); font-size: 1.5rem; text-transform: uppercase; }
.stepper-card .per { color: var(--muted); font-size: .95rem; }
.stepper-card .final { color: var(--muted); font-size: .85rem; }
.stepper-dash { display: flex; justify-content: center; }
.stepper-dash span { width: 1px; height: 16px; background: var(--border-2); }

.pricing__right {
  padding: 2.5rem 2.5rem 1.5rem;
  background-color: var(--surface);
  border-radius: var(--radius-inner);
}
.pricing__label { font-weight: 600; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 1.5rem; }
.pricing__price { display: flex; align-items: baseline; gap: .25rem; }
.pricing__price .amount { font-family: var(--font-heading); font-size: 5rem; line-height: 1; text-transform: uppercase; }
.pricing__price .per { color: var(--muted); }
.pricing__features {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3rem;
}
/* Set by JS when any point wraps to a second line: collapse to one column */
.pricing__features.is-stacked { grid-template-columns: 1fr; }
.feature-check { display: flex; align-items: center; gap: .5rem; font-weight: 500; }
.feature-check svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--accent-on-dark); }
.feature-check.is-muted { opacity: .6; }
.pricing__button { margin-top: 3rem; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { padding: 5rem var(--gutter); }
.footer__inner { width: 100%; max-width: var(--container); margin-inline: auto; }
.footer__top { display: grid; grid-template-columns: .75fr 1fr; gap: 1rem 8vw; align-items: start; padding-bottom: 3rem; }
.footer__logo {
  display: inline-block;
  font-family: var(--font-heading); text-transform: uppercase; line-height: 1.04;
  font-size: 3rem; margin-bottom: 1.5rem;
}
.footer__disclaimer { color: #cfcfcf; max-width: 42rem; }
.footer__menus { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; place-items: start end; }
.footer__col-title { font-weight: 600; margin-bottom: 1rem; }
.footer__links { display: flex; flex-direction: column; gap: .75rem; }
.footer__links a { opacity: .85; transition: opacity .2s ease; }
.footer__links a:hover { opacity: 1; }
.footer__social { display: flex; align-items: center; gap: .5rem; }
.footer__social svg { width: 1.25rem; height: 1.25rem; }
.footer__divider { height: 1px; background: var(--border); }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 2rem; flex-wrap: wrap; }
.footer__legal { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer__legal a { opacity: .7; text-decoration: underline; }
.footer__legal a:hover { opacity: 1; }
.footer__credit { color: var(--muted); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 991px) {
  .section { padding: 5rem var(--gutter); }
  .h1 { font-size: 3.5rem; }
  .h2 { font-size: 2.75rem; }
  .h3 { font-size: 2.25rem; }
  .h4 { font-size: 1.75rem; }
  .section__head { margin-bottom: 4.5rem; }
  .pricing-card { grid-template-columns: 1fr; gap: 1rem; }
  .footer__top { grid-template-columns: 1fr; gap: 4rem; }
  .features__grid { grid-template-columns: 1fr; }

  /* Mobile nav */
  .navbar__toggle { display: block; }
  .navbar__menu {
    position: fixed; inset: 4.5rem 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 1.5rem var(--gutter) 2rem;
    background: var(--bg); border-bottom: 1px solid var(--border);
    transform: translateY(-120%); transition: transform .3s ease; visibility: hidden;
  }
  .navbar__menu.is-open { transform: translateY(0); visibility: visible; }
  .navbar__links { flex-direction: column; align-items: stretch; }
  .navbar__link { padding: .75rem 0; font-size: 1.125rem; }
  .navbar__buttons { flex-direction: column; align-items: stretch; gap: 1rem; margin: 1.5rem 0 0; }
}

@media (max-width: 767px) {
  .h1 { font-size: 2.75rem; }
  .h2 { font-size: 2.25rem; }
  .h3 { font-size: 2rem; }
  .h4 { font-size: 1.5rem; }
  .lead { font-size: 1rem; }
  .hero__image-wrap { margin-top: 3.5rem; }
  .feature-card { min-height: 0; padding: 2rem; }
  .feature-card.is-large { gap: 1.5rem; min-height: 0; }
  .pricing__features { grid-template-columns: 1fr; }
  .pricing__right { padding: 2rem; }
  .pricing__left { padding: 2rem 1.5rem; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 479px) {
  .h1 { font-size: 2.25rem; }
  .pricing__price .amount { font-size: 4rem; }
}

/* ==========================================================================
   Subpages — centered header + prose (legal) + contact form
   ========================================================================== */
.page-header { max-width: 48rem; margin: 0 auto; padding-top: 2rem; text-align: center; }
.page-header__meta { margin-top: 1rem; color: var(--muted); }

/* Prose / rich-text (Privacy, Terms) */
.prose { max-width: 48rem; margin: 3.5rem auto 0; }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: 1.75rem; line-height: 1.14; margin: 2.75rem 0 1rem; }
.prose h3 { font-size: 1.25rem; line-height: 1.24; margin: 2rem 0 .75rem; }
.prose p { margin: 0 0 1rem; line-height: 1.7; color: #c7c7c7; }
.prose ul { margin: 0 0 1.25rem; padding-left: 1.25rem; color: #c7c7c7; }
.prose li { margin-bottom: .5rem; line-height: 1.7; }
.prose a { color: var(--accent-on-dark); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--accent-on-dark-hover); }
.prose strong { color: var(--text); font-weight: 700; }

/* Contact form */
.contact-form { max-width: 35rem; margin: 3rem auto 0; }
.form-field { margin-bottom: 1.25rem; }
.form-field label { display: block; margin-bottom: .5rem; font-weight: 600; font-size: .95rem; }
.form-input, .form-textarea {
  width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--text);
  background-color: var(--surface-2); border: 1px solid var(--border-2);
  transition: border-color .2s ease;
}
.form-input { padding: .7rem 1.25rem; border-radius: var(--radius-pill); }
.form-textarea { padding: .9rem 1.25rem; border-radius: var(--radius-card); min-height: 180px; resize: vertical; }
.form-input::placeholder, .form-textarea::placeholder { color: var(--muted); }
.form-input:focus, .form-textarea:focus { outline: none; border-color: var(--accent-on-dark); box-shadow: 0 0 0 1px var(--accent-on-dark); }
.form-consent { display: flex; align-items: flex-start; gap: .6rem; margin: 0 0 1.5rem; font-size: .9rem; color: #c7c7c7; }
.form-consent input { margin-top: .15rem; width: 1rem; height: 1rem; accent-color: var(--accent); flex: none; }
.form-consent a { color: var(--accent-on-dark); text-decoration: underline; }
/* Contact-form honeypot: off-screen rather than display:none, which some bots skip. */
.form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-form__submit { text-align: center; }

/* ==========================================================================
   Cookie consent — banner (bottom-right) + preferences modal
   ========================================================================== */
.cookie-banner {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 200;
  width: min(380px, calc(100vw - 3rem));
  padding: 1.5rem;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
}
/* While the banner is up it floats over the page, so reserve room for it:
   scroll-padding keeps keyboard focus from landing underneath, and the body
   padding means bottom-of-page content can always be scrolled clear of it. */
html.cc-banner-open { scroll-padding-bottom: var(--cc-clearance, 22rem); }
body.cc-banner-open { padding-bottom: var(--cc-clearance, 22rem); }

.cookie-banner__text { font-size: .875rem; line-height: 1.55; color: #c7c7c7; }
.cookie-banner__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: 1.25rem;
}
.cookie-banner__actions .button { flex: 1 1 auto; }

/* Text link (Manage Preferences / Cookies Settings) */
.cookie-link {
  flex: 1 0 100%;
  order: 3;                 /* under the two buttons in the banner */
  padding: 0; margin-top: .25rem;
  font-family: var(--font-body); font-size: .875rem; font-weight: 600;
  color: var(--muted); background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px; text-align: center;
  transition: color .2s ease;
}
.cookie-link:hover { color: var(--text); }

/* Modal */
.cookie-modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 1.5rem; }
.cookie-modal__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .65); backdrop-filter: blur(4px); }
.cookie-modal__card {
  position: relative; z-index: 1;
  width: 100%; max-width: 480px; max-height: calc(100vh - 3rem); overflow-y: auto;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6);
}
.cookie-modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.5rem; border-bottom: 1px solid var(--border);
}
.cookie-modal__head .h5 { font-size: 1.25rem; }
.cookie-modal__close {
  display: grid; place-items: center; width: 2rem; height: 2rem; flex: none;
  font-size: 1.5rem; line-height: 1; color: var(--muted);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-pill);
  cursor: pointer; transition: color .2s ease, border-color .2s ease;
}
.cookie-modal__close:hover { color: var(--text); border-color: var(--border-2); }
.cookie-modal__body { padding: .5rem 1.5rem; }
.cookie-modal__foot {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem;
  padding: 1.25rem 1.5rem; border-top: 1px solid var(--border);
}

.cookie-pref { padding: 1.25rem 0; border-bottom: 1px solid var(--border); }
.cookie-pref:last-child { border-bottom: 0; }
.cookie-pref__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cookie-pref__name { font-weight: 600; font-size: 1rem; }
.cookie-pref__desc { margin-top: .5rem; font-size: .85rem; line-height: 1.5; color: var(--muted); }
.cookie-pref__pill {
  font-size: .75rem; font-weight: 600; color: var(--muted);
  padding: .25rem .75rem; border: 1px solid var(--border-2); border-radius: var(--radius-pill);
}

/* Toggle switch */
.switch { position: relative; display: inline-flex; flex: none; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  width: 44px; height: 24px; border-radius: var(--radius-pill);
  background-color: var(--border-2); transition: background-color .2s ease;
}
.switch__knob {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  background: #fff; border-radius: 50%; transition: transform .2s ease;
}
.switch input:checked + .switch__track { background-color: var(--accent); }
.switch input:checked + .switch__track .switch__knob { transform: translateX(20px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--accent-on-dark); outline-offset: 2px; }

@media (max-width: 479px) {
  .cookie-banner { right: 1rem; left: 1rem; bottom: 1rem; width: auto; }
  .cookie-modal__foot .button { flex: 1 1 auto; }
}

/* ==========================================================================
   Motion — scroll reveal, hero entrance, stagger
   Progressive enhancement: the initial hidden state applies ONLY when JS is
   available (html.js) AND the visitor allows motion. Without either, content
   renders fully visible. JS toggles `.is-visible` via IntersectionObserver.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* --- Scroll reveal --- */
  .js .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--dur-slow) var(--ease-out-expo),
                transform var(--dur-slow) var(--ease-out-expo);
    will-change: opacity, transform;
  }
  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  /* Feature grid: gentle left→right cascade within each pair (right column trails) */
  .js .features__grid > .feature-card:nth-child(even) { transition-delay: 80ms; }

  /* Pricing checklist: stagger the check rows once the pricing card scrolls in */
  .js .pricing-card .feature-check {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--dur) var(--ease-out-expo),
                transform var(--dur) var(--ease-out-expo);
  }
  .js .pricing-card.is-visible .feature-check { opacity: 1; transform: none; }
  .js .pricing-card.is-visible .feature-check:nth-child(1) { transition-delay: 100ms; }
  .js .pricing-card.is-visible .feature-check:nth-child(2) { transition-delay: 150ms; }
  .js .pricing-card.is-visible .feature-check:nth-child(3) { transition-delay: 200ms; }
  .js .pricing-card.is-visible .feature-check:nth-child(4) { transition-delay: 250ms; }
  .js .pricing-card.is-visible .feature-check:nth-child(5) { transition-delay: 300ms; }
  .js .pricing-card.is-visible .feature-check:nth-child(6) { transition-delay: 350ms; }
  .js .pricing-card.is-visible .feature-check:nth-child(7) { transition-delay: 400ms; }
  .js .pricing-card.is-visible .feature-check:nth-child(8) { transition-delay: 450ms; }
  .js .pricing-card.is-visible .feature-check:nth-child(9) { transition-delay: 500ms; }
}