/* ============================================================ */
/*  SnapTrace - global styles                                   */
/*  All colors, type & spacing via the token system.            */
/* ============================================================ */

/* ---------- Base / reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface-canvas);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
canvas { display: block; max-width: 100%; }
video { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

/* ============================================================ */
/*  Sticky header + nav - always the old frosted-cream look     */
/*  (no scroll-state change); the hero tucks up behind it.      */
/* ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Frosted glass - semi-transparent cream over a heavy blur. */
  background: rgba(238, 243, 249, 0.20);
  -webkit-backdrop-filter: blur(50px) saturate(2.4);
  backdrop-filter: blur(50px) saturate(2.4);
  border-bottom: 1px solid rgba(22, 37, 70, 0.08);
  box-shadow: 0 1px 12px rgba(1, 26, 73, 0.06);
  transition: background-color 0.25s ease, border-color 0.25s ease,
              box-shadow 0.25s ease;
}

/* Hero tuck: on home, the .scrolly-head slides up under the sticky header
   so the hero image is visible behind the frosted bar from the very top. */
body:has(.scrolly-head) .site-header {
  margin-bottom: calc(-1 * var(--header-h, 72px));
}

.site-header-inner {
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding: var(--spacing-12) var(--spacing-16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-12);
  flex-shrink: 0;
}

.site-logo img {
  height: 48px;
  width: 48px;
  object-fit: cover;
}

.site-logo-word {
  font-family: var(--font-display);
  font-size: var(--text-heading-sm);
  font-weight: 600;
  color: var(--color-navy);
  white-space: nowrap;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-24);
}

.site-nav a {
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--color-navy);   /* navy on cream for contrast */
  white-space: nowrap;
  transition: color 0.2s ease;
}

.site-nav a {
  position: relative;
  padding-bottom: 4px;
}
.site-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--color-primary-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.site-nav a:hover { color: var(--color-primary-accent); }
.site-nav a:hover::after { transform: scaleX(1); }
/* Active page link: neon-blue shimmering gradient text (very slow drift).
   Background-clip: text so only the letters carry the moving light. */
.site-nav a.is-active {
  background: linear-gradient(90deg,
    #0086fd 0%,
    #0060d6 25%,
    #013a8f 50%,
    #0060d6 75%,
    #0086fd 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: nav-shimmer 4s ease-in-out infinite;
}
.site-nav a.is-active::after { transform: scaleX(1); }
@keyframes nav-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav a.is-active {
    animation: none;
    background: none;
    color: var(--color-primary-accent);
  }
}

/* Very faint navy scrim on the right (0.15 max) - just a whisper of depth
   behind the copy, no visible blue wash. */
.scrolly-head::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(1, 26, 73, 0) 0%,
    rgba(1, 26, 73, 0.08) 55%,
    rgba(1, 26, 73, 0.15) 100%);
  pointer-events: none;
}

/* ============================================================ */
/*  Scrollytelling section - intro, chips, CTA                  */
/* ============================================================ */
.scrolly {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.scrolly-head {
  position: relative;
  /* Tuck height so the hero still fills the viewport once the header pulls
     up behind it. Height driven by the real header height (header.js). */
  min-height: calc(88vh + var(--header-h, 72px));
  display: flex;
  align-items: center;      /* vertically centered */
  justify-content: flex-end; /* push copy into the right portion */
  padding: var(--spacing-48) var(--spacing-16);
  /* Full-bleed hero, parallax: the background stays fixed while the page
     scrolls over it. `center left` keeps the couple (left focal point) in
     frame; `fixed` gives the parallax effect. */
  background: url('public/images/snaptrace_bg.jpg') center left / cover no-repeat fixed;
  overflow: visible;        /* don't clip the fixed background */
}



.scrolly-head > * { position: relative; z-index: 1; }

/* Center-right copy block: spans roughly 55–90% across the hero */
.hero-copy {
  width: min(560px, 42%);
  margin-right: 8%;
}

/* ============================================================ */
/*  Scroll-down indicator (hero bottom)                         */
/* ============================================================ */
.scroll-indicator {
  position: absolute;
  left: 50%;
  bottom: var(--spacing-32);
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: scroll-indicator-in 0.6s ease 0.8s forwards;
  pointer-events: none;
}
.scroll-track {
  width: 22px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.65);
  border-radius: 12px;
}
.scroll-dot {
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: var(--radius-full);
  background: #ffffff;
  animation: scroll-dot-bob 1.8s ease-in-out 1.4s infinite;
}
@keyframes scroll-indicator-in { to { opacity: 1; } }
@keyframes scroll-dot-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(16px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-indicator { animation: none; opacity: 1; }
  .scroll-dot { animation: none; }
}

/* Hide the scroll cue on narrow screens (mobile text sits bottom, so the
   cue would overlap the copy; the "See how it works" arrow still scrolls.) */
@media (max-width: 1023.98px) {
  .scroll-indicator { display: none; }
}

/* ============================================================ */
/*  Scroll-reveal (secondary sections + feature rows)           */
/* ============================================================ */
/* Scroll-reveal for secondary sections + feature rows.
   Visible by default so content is never hidden when JS is off. When JS is
   enabled (class .js added inline in <head>) sections start hidden and fade
   in on scroll via the IntersectionObserver in script.js. */
.anim-fade {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js .anim-fade {
  opacity: 0;
  transform: translateY(24px);
}
.js .anim-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .js .anim-fade {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================ */
/*  Card hover lift                                             */
/* ============================================================ */
.feature-image,
.placeholder-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
@media (hover: hover) {
  .feature-image:hover,
  .placeholder-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(22, 37, 70, 0.12),
                0 8px 10px -6px rgba(22, 37, 70, 0.08);
  }
}

.eyebrow {
  margin: 0 0 var(--spacing-8);
  font-family: var(--font-display);
  font-size: var(--text-body-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-accent);
}

.scrolly-title {
  margin: 0 0 var(--spacing-16);
  font-family: var(--font-display);
  font-size: clamp(var(--text-heading-lg), 6vw, var(--text-display));
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: 500;
  /* Main headline -> pure white; soft shadow keeps it readable now that
     the navy scrim is removed from the hero. */
  color: #ffffff;
  text-shadow: 0 4px 32px rgba(0, 0, 0, 0.6), 0 2px 10px rgba(0, 0, 0, 0.4), 0 8px 48px rgba(0, 0, 0, 0.35);
}

/* Second line "matched to you." keeps the brand accent blue (#0086fd) — reads
   clearly against the dark scrim. */
.accent-text { color: var(--color-primary-accent); }

.scrolly-intro {
  margin: 0 0 var(--spacing-24);
  max-width: 54ch;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  /* Soft off-white / light grey (#dbe3ee) for a gentler hierarchy */
  color: var(--color-sand);
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.55), 0 4px 32px rgba(0, 0, 0, 0.3);
}

/* CTA text link - understated pointer into the sequence below */
.see-how-link {
  display: block;
  width: fit-content;
  margin: var(--spacing-16) 0 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 500;
  /* White, with the same hover treatment (underline reveal) as before */
  color: #ffffff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55), 0 4px 28px rgba(0, 0, 0, 0.3);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.2s ease;
}
.see-how-link:hover { text-decoration-color: currentColor; }

/* CTA button */
.btn { border: 1px solid transparent; cursor: pointer; }
.btn-primary {
  background: var(--color-primary-accent);
  color: #fff;
  padding: var(--spacing-12) var(--spacing-24);
  border-radius: var(--radius-buttons);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 500;
  transition: background-color 0.2s ease;
}
.btn-primary:hover { background: var(--color-navy); }


/* Outline (secondary) button - primary-accent outline, navy on hover */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  margin-top: var(--spacing-16);
  padding: var(--spacing-12) var(--spacing-24);
  border: 1px solid var(--color-primary-accent);
  border-radius: var(--radius-buttons);
  background: transparent;
  color: var(--color-primary-accent);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-secondary:hover {
  background: var(--color-primary-accent);
  color: #fff;
}
.btn-arrow {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.btn-secondary:hover .btn-arrow { transform: translateX(4px); }

/* ============================================================ */
/*  DESKTOP (>=1024px) - decoupled stage                        */
/*  Camera canvas FIXED left; text track translates right.       */
/* ============================================================ */
@media (min-width: 1024px) {
  .scrolly-stage {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--spacing-32);
    overflow: hidden;
  }

  /* Left column - canvas is NOT translated */
  .stage-media {
    position: relative;
    padding-left: var(--spacing-16);
  }

  .stage-clip-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-cards);
    border: 1px solid var(--color-sand);
    box-shadow: var(--shadow-md);
    background-color: var(--color-sand);
  }

  .hero-canvas {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* Hide the mobile autoplay video on desktop */
  .mobile-video { display: none; }

  .stage-dots {
    display: flex;
    justify-content: center;
    gap: var(--spacing-8);
    margin-top: var(--spacing-16);
  }

  .stage-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-sand);
    transition: background-color 0.3s ease, transform 0.3s ease;
  }
  .stage-dot.is-active {
    background: var(--color-primary-accent);
    transform: scale(1.25);
  }

  .media-caption {
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
    margin-top: var(--spacing-12);
    font-size: var(--text-body-sm);
    color: var(--color-fog);
  }

  .caption-pip {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-primary-accent-soft);
  }

  /* Right column - horizontally translating text track */
  .stage-track-wrap {
    overflow: hidden;
  }

  .stage-track {
    display: flex;
    flex-wrap: nowrap;
    will-change: transform;
  }

  .scrolly-panel {
    flex: 0 0 100%;
    padding: 0 var(--spacing-16);
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
  }

  .feature-kicker {
    margin: 0 0 var(--spacing-12);
    font-family: var(--font-display);
    font-size: var(--text-body-sm);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary-accent);
  }

  .feature-title {
    margin: 0 0 var(--spacing-16);
    max-width: 24ch;
    font-family: var(--font-display);
    font-size: var(--text-heading-lg);
    line-height: var(--leading-heading-lg);
    letter-spacing: var(--tracking-heading-lg);
    font-weight: 500;
    color: var(--color-ink);
  }

  .feature-copy {
    margin: 0;
    max-width: 44ch;
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--color-graphite);
  }

  .feature-divider {
    width: var(--spacing-48);
    height: 3px;
    margin-top: var(--spacing-32);
    border-radius: var(--radius-pills);
    background: var(--gradient-brand);
  }
}

 /* ============================================================ */
/*  MOBILE (<1024px) - simple vertical stack, no hijack         */
/* ============================================================ */
@media (max-width: 1023.98px) {
  .site-header-inner { padding: var(--spacing-8) var(--spacing-12); }
  .site-logo img { height: 40px; width: 40px; }
  .site-logo-word { font-size: var(--text-subheading); }
  .site-nav { gap: var(--spacing-12); }
  .site-nav a { font-size: var(--text-caption); }

  .scrolly {
    min-height: 0;
    display: block;
    overflow: visible;
  }

    .scrolly-head {
    min-height: calc(80svh + var(--header-h, 56px));
    align-items: flex-end;       /* stack the text block at the bottom */
    justify-content: flex-start; /* full-width block on mobile */
    padding: var(--spacing-24) var(--spacing-16) var(--spacing-24);
    background-position: center; /* portrait crop, center-weighted */
    background-attachment: scroll; /* iOS-safe: no fixed bg on touch */
  }

  /* Bottom-weighted vertical scrim on narrow widths */
  .scrolly-head::before {
    background: linear-gradient(180deg,
      rgba(1, 26, 73, 0) 0%,
      rgba(1, 26, 73, 0.75) 100%);
  }

  .hero-copy {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-bottom: var(--spacing-24);
  }

  .scrolly-stage {
    display: block;
  }

  .stage-media {
    padding: var(--spacing-16);
  }

  /* Same clip frame as desktop, just a softer shadow to match other
     mobile cards; the compiled mp4 autoplays independently here since
     nothing pins/scrubs on mobile. */
  .stage-clip-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-cards);
    border: 1px solid var(--color-sand);
    box-shadow: var(--shadow-subtle);
    background-color: var(--color-sand);
  }

  /* Mobile shows the autoplay video, hides the scrub canvas */
  .hero-canvas { display: none; }
  .mobile-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .stage-dots {
    display: flex;
    justify-content: center;
    gap: var(--spacing-8);
    margin-top: var(--spacing-16);
  }

  .stage-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-sand);
    transition: background-color 0.3s ease, transform 0.3s ease;
  }
  .stage-dot.is-active {
    background: var(--color-primary-accent);
    transform: scale(1.25);
  }

  .media-caption {
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
    margin-top: var(--spacing-12);
    font-size: var(--text-caption);
    color: var(--color-fog);
  }

  .caption-pip {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-primary-accent-soft);
  }

  /* Sequential text blocks below the video */
  .stage-track-wrap { overflow: visible; }
  .stage-track { display: block; }

  .scrolly-panel {
    flex: none;
    margin: 0 var(--spacing-16) var(--spacing-24);
    padding: var(--spacing-16);
    border-radius: var(--radius-cards);
    border: 1px solid var(--color-sand);
    background: var(--surface-card);
    box-shadow: var(--shadow-subtle);
  }

  .feature-kicker {
    margin: 0 0 var(--spacing-8);
    font-family: var(--font-display);
    font-size: var(--text-caption);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary-accent);
  }

  .feature-title {
    margin: 0 0 var(--spacing-12);
    font-family: var(--font-display);
    font-size: var(--text-heading-sm);
    line-height: var(--leading-heading-sm);
    font-weight: 500;
    color: var(--color-ink);
  }

  .feature-copy {
    margin: 0;
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--color-graphite);
  }

  .feature-divider { display: none; }
}

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

/* ============================================================ */
/*  Inner pages (Pricing / Photographers / Contact)              */
/* ============================================================ */
.page {
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding: var(--spacing-64) var(--spacing-16) var(--section-gap);
}

.page-hero { margin-bottom: var(--spacing-48); }

.page-title {
  margin: 0 0 var(--spacing-12);
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: 500;
  color: var(--color-ink);
}

.page-sub {
  margin: 0;
  font-size: var(--text-subheading);
  color: var(--color-fog);
}

.placeholder-card,
.contact-card {
  max-width: 720px;
  padding: var(--spacing-32);
  border-radius: var(--radius-cards);
  border: 1px solid var(--color-sand);
  background: var(--surface-card);
  box-shadow: var(--shadow-subtle);
}

.placeholder-card h2 {
  margin: 0 0 var(--spacing-12);
  font-family: var(--font-display);
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  color: var(--color-ink);
}

.placeholder-card p {
  margin: 0;
  color: var(--color-fog);
}

.placeholder-badge {
  display: inline-block;
  margin-bottom: var(--spacing-16);
  padding: var(--spacing-4) var(--spacing-12);
  border-radius: var(--radius-pills);
  background: var(--color-primary-accent-soft);
  color: var(--color-navy-deep);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Contact form */
.contact-form { display: grid; gap: var(--spacing-16); }

.field { display: grid; gap: var(--spacing-8); }
.field span {
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--color-ink);
}
.field input,
.field textarea {
  width: 100%;
  padding: var(--spacing-12) var(--spacing-16);
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-inputs);
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-primary-accent);
  box-shadow: var(--shadow-focus);
}

.form-note {
  margin: 0;
  font-size: var(--text-caption);
  color: var(--color-fog);
}

/* ============================================================ */
/*  Secondary Features - alternating two-column blocks          */
/*  (image card | content), navy / primary-accent / cream brand tokens   */
/* ============================================================ */
.secondary-features {
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding: var(--spacing-64) var(--spacing-16);
}

.secondary-features-head {
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--spacing-48);
  text-align: center;
}

.secondary-features-title {
  margin: 0 0 var(--spacing-12);
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
}

.secondary-features-intro {
  margin: 0;
  font-size: var(--text-subheading);
  color: var(--color-fog);
}

.feature-rows {
  display: grid;
  gap: var(--spacing-120);
}

.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--spacing-48);
}

.feature-row.is-reversed {
  direction: rtl;
  background: var(--surface-card);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
  padding: var(--spacing-48) var(--spacing-32);
}

.feature-row.is-reversed > * {
  direction: ltr;
}

.feature-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-cards);
  border: 1px solid var(--color-sand);
  background: linear-gradient(135deg, var(--color-primary-accent-soft) 0%, var(--surface-card) 40%, var(--color-primary-accent) 100%);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.feature-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-cards);
  background: radial-gradient(circle at 50% 50%, rgba(0,134,253,0.10) 0%, transparent 60%);
  pointer-events: none;
}

.feature-image-label {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: var(--text-heading-sm);
  font-weight: 500;
  color: var(--color-navy-deep);
  letter-spacing: -0.01em;
}

/* Real-photo variant: image fills the card, label becomes an overlay chip */
.feature-image.has-photo img,
.feature-image.has-photo video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.feature-image.has-photo .feature-image-label {
  padding: var(--spacing-8) var(--spacing-16);
  border-radius: var(--radius-pills);
  background: rgba(238, 243, 249, 0.85);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.feature-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

.feature-sub {
  margin: 0;
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary-accent);
}

.feature-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading-lg);
  font-weight: 500;
  letter-spacing: var(--tracking-heading-lg);
  color: var(--color-navy);
}

.feature-desc {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-graphite);
}

.feature-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.feature-bullets li {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-graphite);
}

/* Privacy note folded into the Event Extras card - a tinted inset so the
   message keeps its own voice inside a card that is otherwise feature copy. */
.feature-privacy-note {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-12);
  padding: var(--spacing-16);
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-cards);
  background: var(--color-primary-accent-soft);
}

.privacy-note-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--color-navy);
}

.privacy-note-title {
  margin: 0 0 var(--spacing-4);
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-navy);
}

.privacy-note-copy {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-graphite);
}

.bullet-icon {
  display: block;
  width: 20px;
  height: 20px;
  padding: 6px;
  flex-shrink: 0;
  box-sizing: content-box;
  border-radius: var(--radius-full);
  background: var(--color-primary-accent-soft);
  color: var(--color-primary-accent);
}

/* The icon is scaled on entry ("pop"), so pin its origin and promote it to
   its own layer. .bullet-text wraps the label so it can trail the icon in. */
.bullet-icon {
  transform-origin: 50% 50%;
  will-change: transform;
}

.bullet-text {
  display: inline-block;
}

/* ============================================================ */
/*  Stacking deck (desktop)                                     */
/* ============================================================ */
/* .is-stacked is added by script.js, and only in the desktop
   non-reduced-motion matchMedia context - so the rows keep their ordinary
   flowed layout for no-JS, reduced-motion, and small screens.

   The pinning is pure CSS: every row is sticky, and each one sticks one
   --stack-lip lower than the row behind it, which is what leaves the
   previous card's top edge peeking above the current one. GSAP only scrubs
   the scale on top of this. */
@media (min-width: 1024px) {
  .feature-rows.is-stacked {
    /* Cards sit flush: the scroll distance a card is pinned for is its own
       height, so each one holds roughly a screen before the next covers it. */
    gap: 0;
  }

  .feature-rows.is-stacked .feature-row {
    position: sticky;
    top: calc(var(--stack-top, 96px) + var(--stack-i, 0) * var(--stack-lip, 14px));
    /* Just enough taller than the content to breathe - a full-viewport card
       would leave a sea of empty surface, since these rows are wide not tall. */
    min-height: min(58vh, 520px);
    align-content: center;
    /* Every card needs its own opaque surface now that they overlap - in the
       flowed layout only .is-reversed rows carried one. */
    background: var(--surface-card);
    border: 1px solid var(--color-sand);
    border-radius: var(--radius-cards);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-48);
    /* Contains the entrance slide, so media never flies in over the card
       behind this one. Safe for sticky: only an ANCESTOR's overflow breaks it. */
    overflow: hidden;
    transform-origin: center top;
    will-change: transform;
  }

  /* The alternating row keeps its column flip; the surface above now wins. */
  .feature-rows.is-stacked .feature-row.is-reversed {
    padding: var(--spacing-48);
  }

  /* Text-only steps sit shorter than the homepage's media rows, but they stay
     flush: a card is pinned for exactly its own height, so any gap would show
     page background between cards and break the deck. */
  .feature-rows.fp-step-rows.is-stacked .feature-row {
    min-height: min(50vh, 420px);
    align-content: center;
    padding: var(--spacing-48);
  }
}

/* Mobile: stack the alternating rows */
@media (max-width: 1023.98px) {
  .feature-row {
    grid-template-columns: 1fr;
    direction: ltr;
  }
  .feature-row.is-reversed {
    direction: ltr;
    padding: var(--spacing-32) var(--spacing-20);
  }
  .feature-row.is-reversed > * {
    direction: ltr;
  }

  .feature-rows {
    gap: var(--spacing-64);
  }
}

/* ============================================================ */
/*  Contact form live status - primary-accent --shadow-focus ring language */
/* ============================================================ */
.form-status {
  margin-top: var(--spacing-8);
  font-size: var(--text-caption);
  min-height: 1.25em;
}
.form-status .form-ok   { color: var(--color-primary-accent); font-weight: 600; }
.form-status .form-warn { color: var(--color-primary-accent); font-style: italic; }
.form-status .form-busy { color: var(--color-fog); }
.form-status .form-error {
  color: var(--color-primary-accent);
  font-weight: 600;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-inputs);
  padding: var(--spacing-8) var(--spacing-12);
}

/*  For Photographers page                                         */
/* ============================================================ */
/* For Photographers page                                         */
/* ============================================================ */
/* Hero - full-bleed parallax background, navy scrim, copy stacked on
   the left (photographer silhouette occupies the right side of the
   image), sticky header tucked up behind it. */
.page-hero--fp {
  position: relative;
  /* Full-bleed + tuck under the sticky header (page has max-width,
     padding-inline and padding-top to compensate for). */
  margin: calc(-1 * var(--spacing-64) - var(--header-h, 72px)) calc(50% - 50vw) var(--spacing-48);
  min-height: calc(92vh + var(--header-h, 72px));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--spacing-16);
  padding: calc(var(--spacing-64) + var(--header-h, 72px)) var(--spacing-16) var(--spacing-48);
  padding-inline: max(var(--spacing-48), calc((100vw - var(--page-max-width)) / 2 + var(--spacing-16))) var(--spacing-16);
  background: url('public/images/fpbg.jpg') center left / cover no-repeat fixed;
  overflow: visible;
}
.page-hero--fp::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Soft navy scrim, heavier behind the copy block (left side). */
  background: linear-gradient(90deg,
    rgba(1, 26, 73, 0.65) 0%,
    rgba(1, 26, 73, 0.4) 45%,
    rgba(1, 26, 73, 0.05) 100%);
  pointer-events: none;
}
.page-hero--fp > * { position: relative; z-index: 1; }
.page-hero--fp .page-title {
  color: #ffffff;
  text-shadow: 0 1px 24px rgba(1, 26, 73, 0.45);
}
.page-hero--fp .page-sub {
  max-width: 56ch;
  color: var(--color-sand);
  text-shadow: 0 1px 16px rgba(1, 26, 73, 0.45);
}
.page-hero--fp .page-title,
.page-hero--fp .page-sub { max-width: 560px; }

/* The problem block shares the hero's photograph, so it takes the hero's
   light-on-dark treatment and stays inside the same left column - clear of
   the photographer on the right of the image. */
.fp-hero-problem {
  max-width: 560px;
  margin-top: var(--spacing-64);
  padding-top: var(--spacing-32);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.fp-hero-problem-title {
  margin: 0 0 var(--spacing-12);
  font-family: var(--font-display);
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
  font-weight: 500;
  color: #ffffff;
  text-shadow: 0 1px 24px rgba(1, 26, 73, 0.45);
}

.fp-hero-problem-copy {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-sand);
  text-shadow: 0 1px 16px rgba(1, 26, 73, 0.45);
}
@media (max-width: 1023.98px) {
  /* Mobile: iOS-safe scroll attachment, portrait crop, bottom scrim. */
  .page-hero--fp {
    min-height: calc(72svh + var(--header-h, 56px));
    padding-inline: var(--spacing-16);
    background-attachment: scroll;
    background-position: 30% center;
    margin-top: calc(-1 * var(--spacing-64) - var(--header-h, 56px));
  }
  .page-hero--fp::before {
    background: linear-gradient(180deg,
      rgba(1, 26, 73, 0) 0%,
      rgba(1, 26, 73, 0.75) 100%);
  }
  .page-hero--fp .page-title,
  .page-hero--fp .page-sub,
  .page-hero--fp .fp-hero-problem { max-width: none; }
  .fp-hero-problem { margin-top: var(--spacing-40); }
}


/* Getting Started - three-point grid */
.fp-getting {
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding: var(--spacing-48) var(--spacing-16) var(--spacing-80);
}
.fp-getting-head { max-width: 640px; margin-inline: auto; text-align: center; }
.fp-getting-grid {
  display: grid;
  /* Four across keeps every card on one row, which is what lets the deal
     fan them out (see setupDeal's oneRow rule in script.js). */
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-24);
  margin-top: var(--spacing-32);
}
.fp-card {
  margin: 0;
  padding: var(--spacing-24);
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-cards);
  background: var(--surface-card);
  box-shadow: var(--shadow-subtle);
}
.fp-card-icon {
  display: block;
  width: 24px;
  height: 24px;
  padding: 8px;
  margin-bottom: var(--spacing-16);
  box-sizing: content-box;
  border-radius: var(--radius-full);
  background: var(--color-primary-accent-soft);
  color: var(--color-primary-accent);
}

.fp-card h3 {
  margin: 0 0 var(--spacing-8);
  font-family: var(--font-display);
  font-size: var(--text-heading-sm);
  font-weight: 500;
  color: var(--color-ink);
}
.fp-card p { margin: 0; color: var(--color-graphite); }

.fp-card-eyebrow {
  margin: 0 0 var(--spacing-8);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary-accent);
}
@media (max-width: 1199.98px) {
  .fp-getting-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 699.98px) {
  .fp-getting-grid { grid-template-columns: 1fr; }
}

/* Closing CTA - WhatsApp button + reply note */
.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  margin-top: var(--spacing-16);
  padding: var(--spacing-12) var(--spacing-24);
  border-radius: var(--radius-buttons);
  background: #25d366;
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: var(--text-subheading);
  font-weight: 500;
  transition: background-color 0.2s ease;
}
.btn-whatsapp:hover { background: #1da851; }
.btn-whatsapp svg { flex-shrink: 0; }
/* CTA actions row - WhatsApp + email buttons */
.fp-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-12);
}
.btn-email {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  margin-top: var(--spacing-16);
  padding: var(--spacing-12) var(--spacing-24);
  border-radius: var(--radius-buttons);
  background: var(--color-primary-accent);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: var(--text-subheading);
  font-weight: 500;
  transition: background-color 0.2s ease;
}
.btn-email:hover { background: var(--color-navy); }
.btn-email svg { flex-shrink: 0; }
.fp-cta-note {
  margin: var(--spacing-8) 0 0;
  font-size: var(--text-body-sm);
  color: var(--color-sand);
}

/* How It Works - static 4-across step grid (always visible, no scrolling) */
/* "How it works" steps. The rows themselves are the shared .feature-row
   cards (see the stacking deck further down); this only supplies the page
   container and the step numeral. */
.fp-step-rows {
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding: var(--spacing-32) var(--spacing-16) 0;
}

/* Every step is a card here, in every layout. The home page alternates bare
   and surfaced rows on purpose; these four read as one uniform set, which is
   how they looked before the deck. Lower specificity than the stacked rule,
   so the deck still wins when it's on. */
.fp-step-rows .feature-row {
  background: var(--surface-card);
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
  padding: var(--spacing-32) var(--spacing-24);
  /* Text-only steps: the numeral takes a narrow column of its own beside the
     copy, instead of the media/content split the homepage rows use. */
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--spacing-32);
}

.fp-step-rows .feature-content {
  max-width: 62ch;
}

@media (max-width: 767.98px) {
  .fp-step-rows .feature-row {
    grid-template-columns: 1fr;
    gap: var(--spacing-12);
  }
}

/* The numeral the deck is built around - promoted from the old 6%-opacity
   watermark to a real element, so a covered card is identifiable from the
   sliver of it still showing above the card in front. */
.step-num {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-primary-accent);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .step-num {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.feature-row .feature-divider {
  width: var(--spacing-48);
  height: 3px;
  margin-top: var(--spacing-8);
  border-radius: var(--radius-pills);
  background: var(--gradient-brand);
}

/* ---------------------------------------------------------------- */
/*  FP page polish: ghost step numerals, staggered card reveals,     */
/*  animated CTA sheen                                               */
/* ---------------------------------------------------------------- */


/* Staggered scroll-reveal for step cards + getting-started cards
   (JS adds .is-visible via the IntersectionObserver in script.js) */
.js .fp-stagger {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js .fp-stagger.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .js .fp-stagger {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Sheen sweep + button lift - CTA banners and the shared site footer.
   Applies to every .cta-banner (not just a specific id) so the effect
   is consistent across every page, not just the ones that happened to
   set a matching id. This is the STANDALONE version, used when a
   .cta-banner or .site-footer isn't sitting inside a .cta-footer-band
   (see below) - e.g. a page with no closing CTA, like Contact. */
.cta-banner,
.site-footer {
  position: relative;
  overflow: hidden;
}
.cta-banner::after,
.site-footer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(0, 134, 253, 0.14) 50%, transparent 65%);
  background-size: 250% 100%;
  animation: fp-cta-sheen 8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes fp-cta-sheen {
  0%, 100% { background-position: 120% 0; }
  50%      { background-position: -20% 0; }
}
.cta-banner .btn-whatsapp,
.cta-banner .btn-email {
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.cta-banner .btn-whatsapp:hover,
.cta-banner .btn-email:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .cta-banner::after,
  .site-footer::after { animation: none; }
}

/* ============================================================ */
/*  CTA banner + footer - ONE shared background band             */
/*  On pages that close with a CTA banner, the banner markup and  */
/*  footer.js's mount point both live inside this single wrapper  */
/*  (see index.html/pricing.html/for-photographers.html + the     */
/*  #ctaFooterBand check in footer.js). One background, one       */
/*  shimmer, computed across the combined box - not two separate  */
/*  boxes trying to visually match each other.                    */
/* ============================================================ */
.cta-footer-band {
  position: relative;
  overflow: hidden;
  margin-inline: calc(50% - 50vw);
  background:
    radial-gradient(120% 90% at 85% 6%, rgba(0, 134, 253, 0.25) 0%, transparent 55%),
    var(--color-navy-deep);
}
.cta-footer-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(0, 134, 253, 0.14) 50%, transparent 65%);
  background-size: 250% 100%;
  animation: fp-cta-sheen 8s ease-in-out infinite;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .cta-footer-band::after { animation: none; }
}
body:has(.cta-footer-band) { overflow-x: clip; }
.page:has(+ .cta-footer-band) { padding-bottom: 0; }

/* The banner and footer go transparent inside the band, and skip their
   own standalone background/shimmer entirely - the band supplies both,
   once, across the whole combined height. */
.cta-footer-band > .cta-banner,
.cta-footer-band > .site-footer {
  position: static;
  overflow: visible;
  background: none;
  margin-top: 0;
}
/* Inside the band the footer follows the banner directly, so its own top
   padding would stack on the banner's. Keep only the bottom. */
.cta-footer-band > .site-footer {
  padding-top: 0;
}
.cta-footer-band > .cta-banner::after,
.cta-footer-band > .site-footer::after { content: none; }

/* ============================================================ */
/*  Site footer - injected by footer.js on every page           */
/*  gradient background (same as .cta-banner), cream text, accent links */
/* ============================================================ */
.site-footer {
  margin-top: var(--spacing-48);
  padding: var(--spacing-32) 0;
  background:
    radial-gradient(120% 140% at 85% 10%, rgba(0, 134, 253, 0.25) 0%, transparent 55%),
    var(--color-navy-deep);
  color: var(--color-cream);
}
.site-footer a { color: var(--color-primary-accent); }
.site-footer a:hover { color: var(--color-primary-accent-soft); text-decoration: underline; }
.site-footer-inner {
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--spacing-16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-12);
}
.site-footer-by    { font-size: var(--text-body-sm); color: var(--color-fog); }
.site-footer-links { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-12); }
.site-footer-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}
.site-footer-links svg { display: block; }
/* ============================================================ */
/*  Privacy trust moment - calm, text-only, spacious            */
/* ============================================================ */
.privacy-trust {
  max-width: 640px;
  margin-inline: auto;
  padding: var(--spacing-112) var(--spacing-16);
  text-align: center;
}

.privacy-icon {
  width: 32px;
  height: 32px;
  margin-bottom: var(--spacing-16);
  color: var(--color-primary-accent);
}

.privacy-eyebrow {
  margin: 0 0 var(--spacing-12);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-accent);
}

.privacy-title {
  margin: 0 0 var(--spacing-20);
  font-family: var(--font-display);
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  font-weight: 500;
  color: var(--color-ink);
}

.privacy-copy {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-slate);
}

/* ============================================================ */
/*  Closing CTA banner - full-width final moment                */
/* ============================================================ */
.cta-banner {
  background:
    radial-gradient(120% 140% at 85% 10%, rgba(0, 134, 253, 0.25) 0%, transparent 55%),
    var(--color-navy-deep);
  color: var(--color-cream);
}

.cta-banner-inner {
  max-width: 640px;
  margin-inline: auto;
  padding: var(--spacing-64) var(--spacing-16) var(--spacing-48);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-20);
}

.cta-banner-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
  font-weight: 500;
  color: #ffffff;
}

.cta-banner-copy {
  margin: 0;
  max-width: 46ch;
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  color: var(--color-primary-accent-soft);
}

.cta-banner-btn {
  margin-top: var(--spacing-8);
  font-size: var(--text-subheading);
  padding: var(--spacing-16) var(--spacing-32);
}

/* ============================================================ */
/*  Pricing page                                                */
/* ============================================================ */

/* Per Event / Monthly segmented toggle */
.plan-toggle {
  display: inline-flex;
  gap: var(--spacing-4);
  margin: 0 auto var(--spacing-48);
  padding: var(--spacing-4);
  border-radius: var(--radius-pills);
  background: var(--color-cream);
  border: 1px solid var(--color-sand);
}
.page:has(.plan-toggle) .plan-toggle { display: flex; width: fit-content; }
.plan-toggle-btn {
  border: none;
  cursor: pointer;
  padding: var(--spacing-8) var(--spacing-20);
  border-radius: var(--radius-pills);
  background: transparent;
  color: var(--color-slate);
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.plan-toggle-btn.is-active {
  background: var(--color-navy);
  color: #ffffff;
}
@media (hover: hover) {
  .plan-toggle-btn:not(.is-active):hover { color: var(--color-ink); }
}

/* Cards in a dealt grid move as a unit - promote them for the fan. */
[data-deal] > * {
  will-change: transform;
}

/* Tier card grid */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--spacing-20);
}
@media (max-width: 1099.98px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599.98px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

.price-card {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-24);
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-cards);
  background: var(--surface-card);
  box-shadow: var(--shadow-subtle);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
@media (hover: hover) {
  .price-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
  }
}
.price-card.is-featured {
  border-color: var(--color-primary-accent);
  box-shadow: 0 0 0 2px var(--color-primary-accent-soft), var(--shadow-md);
}

.price-tier-name {
  margin: 0 0 var(--spacing-8);
  font-family: var(--font-display);
  font-size: var(--text-heading-sm);
  font-weight: 500;
  color: var(--color-ink);
}

.price-amount {
  margin: 0 0 var(--spacing-16);
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: 500;
  color: var(--color-navy);
}
.price-amount span {
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  font-weight: 400;
  color: var(--color-fog);
}
.price-amount .tbd { color: var(--color-fog); }

.price-meta {
  flex: 1;
  margin: 0 0 var(--spacing-20);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--spacing-8);
  font-size: var(--text-body-sm);
  color: var(--color-graphite);
}
.price-meta-highlight { color: var(--color-primary-accent); font-weight: 500; }

.price-cta { width: 100%; text-align: center; margin-top: 0; }

/* Draft styling for the Monthly grid until real numbers land */
.price-card--draft {
  border-style: dashed;
  background: var(--color-cream);
}

.badge-tbd {
  display: inline-block;
  margin-bottom: var(--spacing-8);
  padding: var(--spacing-4) var(--spacing-12);
  border-radius: var(--radius-pills);
  background: #fff3d6;
  color: #8a5a00;
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pricing-view-note {
  max-width: 720px;
  margin: 0 auto var(--spacing-24);
  text-align: center;
  color: var(--color-fog);
  font-size: var(--text-body-sm);
}
.pricing-view-note code {
  padding: 0 var(--spacing-4);
  background: var(--color-cream);
  border-radius: var(--radius-badges);
}

/* Bulk pack note */
.bulk-note {
  max-width: 920px;
  margin: var(--spacing-48) auto 0;
  padding: var(--spacing-24);
  border-radius: var(--radius-cards);
  border: 1px solid var(--color-sand);
  background: var(--surface-card);
}
.bulk-note h3 {
  margin: 0 0 var(--spacing-8);
  font-family: var(--font-display);
  font-size: var(--text-heading-sm);
  font-weight: 500;
  color: var(--color-ink);
}
.bulk-note p { margin: 0 0 var(--spacing-12); color: var(--color-graphite); }
.bulk-note-tbd { margin-bottom: 0 !important; color: var(--color-fog); font-size: var(--text-body-sm); }
.bulk-table-wrap { margin: var(--spacing-8) 0 var(--spacing-12); }
.bulk-table-wrap .compare-table { min-width: 560px; }
.bulk-note-discount {
  margin: 0 !important;
  color: var(--color-fog);
  font-size: var(--text-body-sm);
}

/* Top-ups */
.topup-section {
  max-width: var(--page-max-width);
  margin: var(--spacing-80) auto 0;
  padding: 0 var(--spacing-16);
}
.topup-layout {
  display: grid;
  grid-template-columns: minmax(280px, 440px) 1fr;
  gap: var(--spacing-32);
  align-items: start;
  margin-top: var(--spacing-32);
}
@media (max-width: 899.98px) {
  .topup-layout { grid-template-columns: 1fr; }
}
.topup-pricing .compare-table-wrap { margin-top: 0; }
.topup-pricing .compare-table { min-width: 0; }
.topup-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-24);
}
.topup-card p:last-child { margin-bottom: 0; }

/* Rollover trust band extras */
.rollover-tbd { margin-top: var(--spacing-8); }
.rollover-placeholder { color: var(--color-fog) !important; font-size: var(--text-body-sm); }

/* Feature comparison table */
.compare-section {
  max-width: var(--page-max-width);
  margin: var(--spacing-80) auto 0;
  padding: 0 var(--spacing-16);
}

/* Grouped block for features identical on every tier, so the table
   below only has to carry the rows that actually differ. */
.included-everywhere {
  margin-top: var(--spacing-32);
  padding: var(--spacing-24);
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-cards);
  background: var(--surface-card);
}
.included-everywhere-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-heading-sm);
  font-weight: 500;
  color: var(--color-ink);
}
.included-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-12) var(--spacing-32);
  margin: var(--spacing-16) 0 0;
  padding: 0;
  list-style: none;
}
.included-list li {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-8);
  color: var(--color-graphite);
  font-size: var(--text-body-sm);
}
.check-mark { color: #1a8a4a; font-weight: 700; }
@media (max-width: 599.98px) {
  .included-list { grid-template-columns: 1fr; }
}

.compare-diff-title {
  margin: var(--spacing-40) 0 0;
  font-family: var(--font-display);
  font-size: var(--text-heading-sm);
  font-weight: 500;
  color: var(--color-ink);
}

.compare-table-wrap {
  margin-top: var(--spacing-16);
  overflow-x: auto;
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-cards);
}
.compare-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: var(--surface-card);
  font-size: var(--text-body-sm);
}
.compare-table th,
.compare-table td {
  padding: var(--spacing-12) var(--spacing-16);
  border-bottom: 1px solid var(--color-sand);
  text-align: center;
}
.compare-table thead th {
  background: var(--color-cream);
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--color-ink);
}
.compare-table tbody th {
  text-align: left;
  font-weight: 500;
  color: var(--color-ink);
  white-space: nowrap;
}
.compare-table tbody tr:last-child td,
.compare-table tbody tr:last-child th { border-bottom: none; }
.cell-yes { color: #1a8a4a; font-weight: 600; }
.cell-no { color: var(--color-sand); }
.cell-tbd { color: var(--color-fog); font-style: italic; }
.cell-note { color: var(--color-graphite); font-size: var(--text-caption); white-space: nowrap; }
.compare-note {
  margin-top: var(--spacing-16);
  color: var(--color-fog);
  font-size: var(--text-body-sm);
}

.topup-note {
  margin: var(--spacing-12) 0 0;
  color: var(--color-fog);
  font-size: var(--text-body-sm);
}

@media (max-width: 599.98px) {
  .topup-section,
  .compare-section { margin-top: var(--spacing-64); }
}

/* ============================================================ */
/*  Log in / Sign up - nav trigger + modal                      */
/*  Markup and behaviour live in auth.js.                       */
/* ============================================================ */
.nav-auth {
  margin-left: var(--spacing-24);
  padding: var(--spacing-8) var(--spacing-20);
  font-family: inherit;
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--color-cream);
  background: var(--color-primary-accent);
  border: 1px solid transparent;
  border-radius: var(--radius-pills);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
@media (hover: hover) {
  .nav-auth:hover { background: var(--color-navy); transform: translateY(-1px); }
}
.nav-auth:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 2px;
}

/* The page must not scroll behind an open dialog. */
body.has-auth-open { overflow: hidden; }

.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-16);
}
.auth-modal[hidden] { display: none; }

.auth-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 26, 73, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.auth-dialog {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 92vh;
  overflow-y: auto;
  padding: var(--spacing-32);
  border-radius: var(--radius-cards);
  background: var(--surface-card);
  box-shadow: 0 24px 60px rgba(1, 26, 73, 0.28);
}
@media (prefers-reduced-motion: no-preference) {
  .auth-modal:not([hidden]) .auth-dialog {
    animation: auth-rise 0.28s ease-out;
  }
}
@keyframes auth-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.auth-close {
  position: absolute;
  top: var(--spacing-12);
  right: var(--spacing-12);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--color-graphite);
  background: none;
  border: 0;
  border-radius: var(--radius-full);
  cursor: pointer;
}
.auth-close:hover { background: var(--color-primary-accent-soft); }

.auth-title {
  margin: 0 0 var(--spacing-4);
  font-family: var(--font-display);
  font-size: var(--text-heading-sm);
  font-weight: 500;
  color: var(--color-navy);
}
.auth-sub {
  margin: 0 0 var(--spacing-24);
  font-size: var(--text-body-sm);
  color: var(--color-graphite);
}

/* Honest status line - shown when a submit cannot go through. */
.auth-notice {
  margin: 0 0 var(--spacing-16);
  padding: var(--spacing-12);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-navy);
  background: var(--color-primary-accent-soft);
  border-radius: var(--radius-cards);
}

.auth-form { display: flex; flex-direction: column; gap: var(--spacing-16); }
/* An author `display` beats the hidden attribute's UA rule, so the inactive
   view has to be hidden explicitly or both forms render at once. */
.auth-form[hidden] { display: none; }

.auth-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  width: 100%;
  padding: var(--spacing-12);
  font-family: inherit;
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--color-navy);
  background: var(--surface-card);
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-pills);
  cursor: pointer;
}
.auth-google:hover { background: var(--color-mist, #eef3f9); }

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  margin: 0;
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-fog);
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-sand);
}

.auth-field { display: flex; flex-direction: column; gap: var(--spacing-4); }
.auth-field label {
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--color-navy);
}
.auth-field input,
.auth-field select {
  padding: var(--spacing-12);
  font-family: inherit;
  font-size: var(--text-body);
  color: var(--color-ink);
  background: var(--surface-card);
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-cards);
}
.auth-field input:focus-visible,
.auth-field select:focus-visible {
  outline: 2px solid var(--color-primary-accent);
  outline-offset: 1px;
}
.auth-field.has-error input,
.auth-field.has-error select { border-color: #c0392b; }

.auth-error {
  margin: 0;
  font-size: var(--text-caption);
  color: #c0392b;
}
.auth-error:empty { display: none; }

.auth-hint {
  margin: 0;
  font-size: var(--text-caption);
  color: var(--color-fog);
}

.auth-submit { width: 100%; justify-content: center; }

.auth-forgot {
  margin: calc(-1 * var(--spacing-8)) 0 0;
  text-align: right;
}
.auth-forgot button {
  font: inherit;
  font-size: var(--text-caption);
  color: var(--color-primary-accent);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

.auth-switch {
  margin: 0;
  font-size: var(--text-body-sm);
  text-align: center;
  color: var(--color-graphite);
}
.auth-switch button {
  font: inherit;
  font-weight: 600;
  color: var(--color-primary-accent);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

@media (max-width: 767.98px) {
  /* Two rows: logo and button, then the nav centred underneath. Without this
     the nav overflows and its last link sits on top of the button, swallowing
     the taps meant for it. */
  .site-header-inner { flex-wrap: wrap; row-gap: var(--spacing-8); }
  .site-logo { order: 1; }
  .nav-auth { order: 2; margin-left: auto; }
  .site-nav {
    order: 3;
    width: 100%;
    justify-content: center;
    gap: var(--spacing-16);
  }
}

@media (max-width: 599.98px) {
  .auth-dialog { padding: var(--spacing-24) var(--spacing-20); }
  .nav-auth { padding: var(--spacing-8) var(--spacing-16); }
}

/* ============================================================ */
/*  Footer - legal links row (injected by footer.js)            */
/* ============================================================ */
.site-footer-legal {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8) var(--spacing-24);
  padding-top: var(--spacing-12);
  border-top: 1px solid rgba(238, 243, 249, 0.14);
  font-size: var(--text-body-sm);
}
.site-footer .site-footer-legal a { color: var(--color-cream); }
.site-footer .site-footer-legal a:hover,
.site-footer .site-footer-legal a[aria-current="page"] { color: var(--color-primary-accent-soft); }
.site-footer-legal a:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: 4px; }

/* ============================================================ */
/*  Legal pages - privacy, terms, refund & cancellation         */
/*  Long-form reading: a narrow measure, a sticky contents list */
/*  on wide screens, tables that scroll inside their own box.   */
/* ============================================================ */
.legal-hero { margin-bottom: var(--spacing-40); }
.legal-hero .page-title { font-size: clamp(36px, 6vw, var(--text-display)); text-wrap: balance; }
.legal-hero .page-sub { max-width: 60ch; }
.legal-eyebrow {
  margin: 0 0 var(--spacing-8);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-accent);
}
.legal-meta {
  margin: var(--spacing-12) 0 0;
  font-size: var(--text-body-sm);
  color: var(--color-fog);
}
.legal-switch {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
  margin-top: var(--spacing-24);
}
.legal-switch a {
  padding: var(--spacing-8) var(--spacing-16);
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-pills);
  background: var(--color-paper);
  color: var(--color-graphite);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.legal-switch a:hover { border-color: var(--color-primary-accent); color: var(--color-navy); }
.legal-switch a[aria-current="page"] {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-paper);
}
.legal-switch a:focus-visible,
.legal-toc a:focus-visible,
.legal-body a:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: 4px; }

.legal-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--spacing-48);
  align-items: start;
}

.legal-toc {
  position: sticky;
  top: calc(var(--header-h, 72px) + var(--spacing-24));
  max-height: calc(100vh - var(--header-h, 72px) - var(--spacing-48));
  overflow-y: auto;
  font-size: var(--text-body-sm);
}
.legal-toc summary {
  margin-bottom: var(--spacing-12);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-fog);
  list-style: none;
  pointer-events: none;
}
.legal-toc summary::-webkit-details-marker { display: none; }
.legal-toc ol {
  margin: 0;
  padding: 0 0 0 var(--spacing-12);
  list-style: none;
  border-left: 1px solid var(--color-sand);
  display: grid;
  gap: var(--spacing-8);
}
.legal-toc a { color: var(--color-iron); text-decoration: none; line-height: 1.4; }
.legal-toc a:hover { color: var(--color-primary-accent); }

.legal-body {
  max-width: 72ch;
  color: var(--color-graphite);
  font-size: var(--text-body);
  line-height: 1.7;
}
.legal-body section { scroll-margin-top: calc(var(--header-h, 72px) + var(--spacing-24)); }
.legal-body section + section { margin-top: var(--spacing-48); }
.legal-body h2 {
  margin: 0 0 var(--spacing-16);
  font-family: var(--font-display);
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--font-weight-medium);
  color: var(--color-ink);
  text-wrap: balance;
}
.legal-body h3 {
  margin: var(--spacing-24) 0 var(--spacing-8);
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-medium);
  color: var(--color-ink);
}
.legal-body p { margin: 0 0 var(--spacing-12); }
.legal-body ul,
.legal-body ol { margin: 0 0 var(--spacing-12); padding-left: var(--spacing-24); }
.legal-body li + li { margin-top: var(--spacing-8); }
.legal-body strong { color: var(--color-ink); font-weight: var(--font-weight-semibold); }
.legal-body a { color: var(--color-primary-accent); text-underline-offset: 2px; }
.legal-body a:hover { color: var(--color-navy); }

/* A short notice with no contents list: one centred reading column. */
.legal-body--solo { margin-inline: auto; }
.legal-meta a { color: var(--color-primary-accent); }

.legal-callout {
  margin-bottom: var(--spacing-48);
  padding: var(--spacing-24);
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-cards);
  background: var(--color-paper);
  box-shadow: var(--shadow-subtle);
}
.legal-body .legal-callout-title {
  margin-bottom: var(--spacing-12);
  font-size: var(--text-subheading);
}
.legal-callout ul { margin-bottom: 0; }

.legal-table {
  margin: var(--spacing-16) 0;
  overflow-x: auto;
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
}
.legal-table table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: var(--text-body-sm);
  line-height: 1.55;
}
.legal-table th {
  padding: var(--spacing-12) var(--spacing-16);
  background: var(--color-cream);
  border-bottom: 1px solid var(--color-sand);
  text-align: left;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-iron);
}
.legal-table td {
  padding: var(--spacing-12) var(--spacing-16);
  border-bottom: 1px solid var(--color-sand);
  vertical-align: top;
}
.legal-table tr:last-child td { border-bottom: 0; }
.legal-table td:first-child { color: var(--color-ink); font-weight: var(--font-weight-medium); }
.legal-body .legal-tight { margin: var(--spacing-8) 0 0; }
.legal-body .legal-tight li + li { margin-top: 2px; }

.legal-badge {
  display: inline-block;
  padding: 2px var(--spacing-8);
  border-radius: var(--radius-pills);
  background: var(--color-cream);
  color: var(--color-iron);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}
.legal-badge--no  { background: #fdecec; color: #a12a2a; }
.legal-badge--yes { background: #e6f4ea; color: #1e6b3a; }

.legal-contact,
.legal-defs {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--spacing-8) var(--spacing-24);
  margin: var(--spacing-12) 0 var(--spacing-16);
}
.legal-contact dt,
.legal-defs dt { font-weight: var(--font-weight-semibold); color: var(--color-ink); }
.legal-contact dd,
.legal-defs dd { margin: 0; }

.legal-code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--color-cream);
}
.legal-body .legal-footnote {
  margin-top: var(--spacing-48);
  padding-top: var(--spacing-16);
  border-top: 1px solid var(--color-sand);
  font-size: var(--text-body-sm);
  color: var(--color-fog);
}

@media (max-width: 899.98px) {
  .legal-layout { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-24); }
  .legal-toc {
    position: static;
    max-height: none;
    padding: var(--spacing-12) var(--spacing-16);
    border: 1px solid var(--color-sand);
    border-radius: var(--radius-lg);
    background: var(--color-paper);
  }
  .legal-toc summary { margin-bottom: 0; pointer-events: auto; cursor: pointer; }
  .legal-toc[open] summary { margin-bottom: var(--spacing-12); }
  .legal-contact,
  .legal-defs { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .legal-contact dd,
  .legal-defs dd { margin-bottom: var(--spacing-8); }
}