/* ==========================================================================
   LogEM marketing site — tokens from the locked design system (v1)
   ========================================================================== */

:root {
  --bg: #F5F1EA;
  --surface: #FBF8F2;
  --flat-bg: #E9DDD8; /* the flat-lay photo's own background, so the ready section reads as one with the image */
  --sunken: #F1E9DD;
  --hairline: #E7E0D5;
  --ink: #1C1726;
  --muted: #6B6478;
  --faint: #8F8499;

  --hero: #8A2BE2;
  --deep: #7E22CE;
  --purple-ink: #581C87;
  --sibling: #A855F7;
  --tint100: #F3E8FF;
  --tint50: #F5F3FF;

  --coral: #FB7185;

  --dark-bg: #16131C;
  --dark-surface: #221C2E;
  --dark-hairline: #332B40;
  --dark-text: #EDE9F4;
  --dark-muted: #A89CB8;
  --dark-purple: #C4B5FD;

  --display: "Fraunces", Georgia, serif;
  --body: "DM Sans", -apple-system, "Segoe UI", sans-serif;

  --r-md: 12px;
  --r-lg: 16px;
  --r-card: 20px;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --shadow-float: 0 4px 16px rgba(28, 23, 38, 0.08);

  --phone-w: clamp(240px, 24vw, 320px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 84px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--deep); text-decoration: none; }
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--hero);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- shared type ---------- */

h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.15; color: var(--ink); }

h2 { font-size: clamp(2rem, 4.4vw, 3.25rem); letter-spacing: -0.01em; }

h2 em, .hero-title em, .free-title em {
  font-style: italic;
  font-weight: 600;
  color: var(--hero);
}

.eyebrow {
  font-family: var(--body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--deep);
  margin-bottom: 1rem;
}
.eyebrow-dark { color: var(--dark-purple); }

.lede { font-size: 1.125rem; color: var(--muted); max-width: 34em; margin-top: 1.25rem; }
.lede-dark { color: var(--dark-muted); }
.lede-center { margin-left: auto; margin-right: auto; }

.fineprint { font-size: 0.8125rem; color: var(--faint); margin-top: 2rem; max-width: 36em; }

.section-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

/* ---------- buttons & badges ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--body);
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.65rem 1.25rem;
  border-radius: var(--r-md);
  transition: background 160ms var(--ease), transform 160ms var(--ease);
}
.btn-primary { background: var(--hero); color: #fff; }
.btn-primary:hover { background: var(--deep); }
.btn-primary:active { transform: scale(0.97); }

.store-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 2rem;
}
.store-row-center { justify-content: center; }

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--ink);
  color: #fff;
  border-radius: 14px;
  padding: 0.65rem 1.35rem 0.7rem 1.1rem;
  min-height: 60px;
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.store-badge:hover { transform: translateY(-2px); box-shadow: var(--shadow-float); }
.badge-glyph { width: 26px; height: 30px; fill: #fff; flex: none; }
.badge-glyph.play { fill: none; }
.badge-text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.badge-text small { font-size: 0.6875rem; font-weight: 500; opacity: 0.85; }
.badge-text strong { font-size: 1.25rem; font-weight: 600; letter-spacing: 0.01em; }

/* Google Play: intentional "coming soon" state — muted, non-interactive */
.store-badge-soon {
  background: var(--sunken);
  color: var(--muted);
  border: 1px solid var(--hairline);
  cursor: default;
}
.store-badge-soon:hover { transform: none; box-shadow: none; }
.store-badge-soon .badge-glyph { filter: grayscale(1); opacity: 0.5; }
.store-badge-soon .badge-text small { color: var(--faint); opacity: 1; letter-spacing: 0.03em; }
.store-badge-soon .badge-text strong { color: var(--muted); }

.hero-note { margin-top: 1.25rem; font-size: 0.875rem; color: var(--faint); }

/* ---------- App Store QR popover (desktop enhancement) ---------- */
.qr-pop {
  position: fixed;
  z-index: 200;
  width: 232px;
  padding: 1.25rem 1.25rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: 0 14px 38px rgba(28, 23, 38, 0.18), 0 2px 8px rgba(28, 23, 38, 0.08);
  text-align: center;
  color: var(--ink);
}
.qr-pop[hidden] { display: none; }
.qr-pop:focus-visible { outline: 2px solid var(--hero); outline-offset: 3px; }
.qr-pop-img {
  width: 180px;
  height: 180px;
  margin: 0 auto 0.85rem;
  display: block;
}
.qr-pop-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--ink);
  line-height: 1.2;
}
.qr-pop-caption {
  margin-top: 0.3rem;
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.35;
}
.qr-pop-link {
  display: inline-block;
  margin-top: 0.85rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--deep);
}
.qr-pop-link:hover { text-decoration: underline; }
/* caret pointing at the badge */
.qr-pop::after {
  content: "";
  position: absolute;
  left: var(--caret-x, 50%);
  width: 14px;
  height: 14px;
  margin-left: -7px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  transform: rotate(45deg);
}
.qr-pop.is-above::after {
  bottom: -8px;
  border-top: none;
  border-left: none;
}
.qr-pop.is-below::after {
  top: -8px;
  border-bottom: none;
  border-right: none;
}

/* ---------- nav ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: rgba(245, 241, 234, 0.82);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 220ms var(--ease);
}
.nav.is-scrolled { border-bottom-color: var(--hairline); }

.nav-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0.875rem clamp(1.25rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* The lockup is wordmark then mark, mark on the right. Sized in em so the nav
   (1.5rem) and footer (2rem) versions both come off one rule.

   1.3em is a legibility floor, not a taste call: the mark is a 7x7 grid, and a
   cell needs roughly 4px before the eye reads a grid rather than texture. That
   puts the floor at ~30px, which 1.3em gives in the nav (31px) and comfortably
   clears in the footer (42px). Below this it degrades into a purple smudge.

   Baseline alignment (an img's baseline is its bottom edge) rather than centring:
   the grid's top rows are its palest cells, so its optical mass already sits in
   the cap band. Centring it geometrically pushes that mass below the baseline,
   where it competes with the descender of the "g". */
.wordmark {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
}
.wm-text { display: inline-block; }
.wm-mark { width: 1.3em; height: 1.3em; display: block; flex: none; }
.wm-log { color: var(--hero); }
.wm-em { color: var(--purple-ink); }
.wordmark-lg { font-size: 2rem; }

.nav-links { display: flex; gap: 1.75rem; margin-left: auto; }
.nav-links a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--muted);
  transition: color 160ms var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a { white-space: nowrap; }

@media (max-width: 760px) {
  /* Two rows on small screens: wordmark and CTA on the first, links on a second
     row that scrolls sideways if needed. No hamburger: five short labels do not
     need hiding, and always-visible links serve both reader and crawler. */
  .nav-inner { flex-wrap: wrap; gap: 0.55rem 0.9rem; }
  .nav-cta { margin-left: auto; order: 2; }
  .nav-links {
    order: 3; width: 100%; margin-left: 0; gap: 1.15rem;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding-bottom: 0.1rem;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { font-size: 0.875rem; }
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding: clamp(7rem, 14vh, 10rem) 0 0;
  overflow: clip;
}

#heatmap-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.hero-fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(245, 241, 234, 1) 0%,
      rgba(245, 241, 234, 0.94) 22%,
      rgba(245, 241, 234, 0.6) 38%,
      rgba(245, 241, 234, 0.18) 58%,
      rgba(245, 241, 234, 0.42) 82%,
      rgba(245, 241, 234, 1) 100%);
}

.hero-copy {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-title {
  font-size: clamp(2.75rem, 7vw, 5rem);
  letter-spacing: -0.015em;
  line-height: 1.06;
}
.hero-title .hero-line { display: block; }

.hero-sub {
  margin-top: 1.5rem;
  font-size: 1.125rem;
  color: var(--muted);
  max-width: 38em;
}

/* hero stage: phone + floating cards */

.hero-stage {
  position: relative;
  z-index: 2;
  max-width: 1160px;
  margin: clamp(2.5rem, 6vh, 4.5rem) auto 0;
  display: flex;
  justify-content: center;
}

.phone-wrap { position: relative; }

.phone {
  position: relative;
  width: var(--phone-w);
  border-radius: calc(var(--phone-w) * 0.155);
  background: #241E2E;
  padding: calc(var(--phone-w) * 0.028);
  box-shadow:
    0 24px 60px rgba(28, 23, 38, 0.22),
    0 4px 14px rgba(28, 23, 38, 0.12),
    inset 0 0 0 2px #3A3247;
}

.phone-screen {
  position: relative;
  border-radius: calc(var(--phone-w) * 0.128);
  overflow: hidden;
  background: var(--bg);
}

.phone-island {
  position: absolute;
  top: calc(var(--phone-w) * 0.052);
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--phone-w) * 0.28);
  height: calc(var(--phone-w) * 0.082);
  background: #0B0812;
  border-radius: 999px;
}

.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(var(--phone-w) * 0.032) calc(var(--phone-w) * 0.075) calc(var(--phone-w) * 0.012);
  background: var(--bg);
  color: var(--ink);
  font-size: calc(var(--phone-w) * 0.042);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.status-bar.sb-dark { background: var(--dark-bg); color: var(--dark-text); }
.sb-icons { display: inline-flex; align-items: center; gap: 5px; }
.sb-icons svg { height: calc(var(--phone-w) * 0.033); width: auto; fill: currentColor; color: inherit; }

/* the hero phone masks its bottom edge into the page */
.hero .phone-wrap::after {
  content: "";
  position: absolute;
  inset: auto -12% -2px;
  height: 26%;
  background: linear-gradient(to bottom, transparent, var(--bg) 82%);
  pointer-events: none;
  border-radius: 0;
}

/* floating cards */

.float-card {
  position: absolute;
  z-index: 3;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 1rem 1.15rem;
  box-shadow: var(--shadow-float);
  width: clamp(180px, 17vw, 230px);
}

.fc-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 0.5rem;
}
.fc-strong { font-size: 1.0625rem; font-weight: 600; color: var(--ink); }
.fc-strong.fc-num { font-family: var(--display); font-size: 1.375rem; }
.fc-muted { font-weight: 500; color: var(--faint); font-size: 0.875rem; }
.fc-micro { font-size: 0.75rem; color: var(--muted); margin-top: 0.45rem; }

/* fc-1: two solid app buttons with leading line icons */
.fc-btn-row { display: flex; flex-direction: column; gap: 0.5rem; }
.fc-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: var(--hero);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.55rem 0.75rem;
  border-radius: var(--r-md);
}
/* shared sizing only; each icon carries its own paint attributes (the probe is a
   filled vector, the syringe a stroked one), so nothing here sets fill or stroke.
   Equal boxes, exactly as the app renders both at size 18 */
.fc-pill-ico { width: 16px; height: 16px; flex: none; }

/* fc-2: current post */
.fc-post-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.fc-chip-current {
  flex: none;
  background: var(--tint100);
  color: var(--deep);
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* fc-5: entrustment level chip row */
.fc-elvl-row { display: flex; gap: 4px; }
.fc-elvl-chip {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--hairline);
  color: var(--faint);
}
.fc-elvl-chip.is-active { background: var(--hero); border-color: var(--hero); color: #fff; }

/* fc-6: export format pills */
.fc-export-row { display: flex; gap: 6px; margin-top: 0.5rem; }
.fc-export {
  background: var(--tint100);
  color: var(--deep);
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.25rem 0.625rem;
  border-radius: 8px;
}

.fc-ring-row { display: flex; align-items: center; gap: 0.75rem; }
.fc-ring svg { width: 44px; height: 44px; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--sunken); stroke-width: 5; }
.ring-fill {
  fill: none;
  stroke: var(--hero);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 100.5;
  stroke-dashoffset: 16; /* 21 of 25, progressing */
}

/* card positions (desktop) */
.fc-1 { left: max(2%, calc(50% - 560px)); top: 6%; }
.fc-2 { left: max(4%, calc(50% - 520px)); top: 38%; }
.fc-3 { left: max(2%, calc(50% - 545px)); top: 72%; }
.fc-4 { right: max(2%, calc(50% - 560px)); top: 9%; }
.fc-5 { right: max(4%, calc(50% - 515px)); top: 42%; width: clamp(200px, 19vw, 250px); }
.fc-6 { right: max(2%, calc(50% - 550px)); top: 74%; }

@media (max-width: 900px) {
  .float-card { display: none; }
  .fc-4, .fc-5 {
    display: block;
    position: absolute;
    width: clamp(150px, 42vw, 190px);
    padding: 0.8rem 0.9rem;
  }
  .fc-4 { left: 0; top: 26%; }
  .fc-5 { right: 0; top: 66%; }
}

/* ---------- flow / how it works (pinned split scrollytelling) ---------- */

.flow {
  background: var(--dark-bg);
  padding: clamp(4.5rem, 11vh, 8rem) 0 clamp(3rem, 7vh, 5rem);
}

.flow-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(2.5rem, 6vh, 4rem);
  padding: 0 1.25rem;
}
.flow-head .eyebrow { color: var(--dark-purple); }
.flow-head h2 { color: var(--dark-text); }
.flow-head h2 em { color: var(--dark-purple); }

/* local tone for the rail (sits on the dark band, so text is light) */
.hiw { --hiw-lilac: #C4A5F0; }

.hiw-stage {
  position: relative;
  overflow: clip;
}

/* --- ambient backdrop (behind the phone side only) --- */
.hiw-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hiw-ambient {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  filter: saturate(1.15) hue-rotate(6deg);
  /* an elliptical halo of light gathered behind and around the phone,
     intersected with a left fade so the rail zone stays clean and the
     stage corners return to the band's base dark */
  -webkit-mask-image:
    radial-gradient(ellipse 52% 46% at 72% 45%, #000 0%, #000 32%, transparent 80%),
    linear-gradient(to right, transparent 12%, #000 52%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(ellipse 52% 46% at 72% 45%, #000 0%, #000 32%, transparent 80%),
    linear-gradient(to right, transparent 12%, #000 52%);
  mask-composite: intersect;
}

/* --- stage grid: steps rail + phone --- */
.hiw-grid {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: minmax(440px, 520px) 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

/* --- steps rail --- */
.hiw-rail {
  position: relative;
  padding-left: 26px;
}

.hiw-progress {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--dark-hairline);
  overflow: hidden;
}
.hiw-progress-fill {
  position: absolute;
  inset: 0;
  background: var(--hero);
  transform: scaleY(0);
  transform-origin: top center;
}

.hiw-steps { list-style: none; }

.hiw-step {
  padding-block: 1.15rem;
  border-top: 1px solid var(--dark-hairline);
}
.hiw-step:first-child { border-top: 0; }

.hiw-step-head {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
}
.hiw-num {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  color: var(--hiw-lilac);
  transition: color 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hiw-step h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: color-mix(in srgb, var(--dark-text) 45%, transparent);
  transition: color 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hiw-step.is-active .hiw-num { color: var(--hero); }
.hiw-step.is-active h3 { color: var(--dark-text); }

/* no JS / reduced motion: render every row at full emphasis (nothing dimmed) */
html:not(.js) .hiw-step h3 { color: var(--dark-text); }

.hiw-step-body {
  overflow: hidden;
}
.hiw-step-body p {
  color: var(--dark-muted);
  font-size: 0.98rem;
  line-height: 1.55;
  max-width: 46ch;
  padding-top: 0.55rem;
}

/* the per-step screenshot is mobile-only; the phone shows it on desktop */
.hiw-shot { display: none; }

/* --- phone column --- */
.hiw-phone {
  display: flex;
  justify-content: center;
}
.phone-sm { --phone-w: clamp(240px, 22vw, 310px); }

.hiw-screens {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--phone-w) * 0.128);
}
.hiw-screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: 0;
  will-change: opacity, transform;
}
/* the first screen is relative so it holds the intrinsic height of the stack */
.hiw-screen:first-child { position: relative; height: auto; opacity: 1; }

/* desktop, JS on: pin the stage and start non-active bodies collapsed
   (GSAP then owns the expand / collapse, so no flash of all-open) */
@media (min-width: 901px) {
  .js .hiw-stage {
    height: 100vh;
    height: 100svh;
    display: flex;
    align-items: center;
  }
  .js .hiw-stage > .hiw-grid { width: 100%; }
  .js .hiw-step:not(.is-active) .hiw-step-body { height: 0; opacity: 0; }
}

/* --- mobile: plain stacked list, no pin, no video --- */
@media (max-width: 900px) {
  .flow { padding: clamp(3.5rem, 9vh, 6rem) 0; }

  .hiw-backdrop { display: none; }
  .hiw-phone { display: none; }

  .hiw-stage { height: auto; overflow: visible; }
  .hiw-grid {
    display: block;
    max-width: 560px;
    padding: 0 clamp(1.25rem, 6vw, 2rem);
  }

  .hiw-rail { padding-left: 22px; }
  .hiw-progress { display: none; }

  .hiw-step { padding-block: 1.5rem; }
  .hiw-step h3 { color: var(--dark-text); font-size: 1.35rem; }
  .hiw-num { color: var(--hiw-lilac); }
  .hiw-step-body { height: auto !important; opacity: 1 !important; }
  .hiw-step-body p { max-width: none; font-size: 1rem; }

  .hiw-shot {
    display: block;
    width: 72%;
    margin: 1.25rem auto 0;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--dark-hairline);
    box-shadow: var(--shadow-float);
  }
  .hiw-shot img { display: block; width: 100%; height: auto; }
}

/* ---------- curriculum ---------- */

.curriculum { padding: clamp(5rem, 12vh, 9rem) 0; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.split-media { display: flex; justify-content: center; }

.tilt { transform: rotate(3deg); }
.tilt-r { transform: rotate(-3deg); }

.stage-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.75rem;
}
.stage-chips li {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--deep);
  background: var(--tint100);
  border: 1px solid rgba(138, 43, 226, 0.22);
  border-radius: 999px;
  padding: 0.45rem 1rem;
}

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split-media { order: 2; margin-top: 1rem; }
}

/* ---------- privacy ---------- */

.privacy-band { padding: clamp(2rem, 6vh, 4rem) clamp(0.75rem, 2vw, 1.5rem); }

.privacy-card {
  position: relative;
  max-width: 1360px;
  margin: 0 auto;
  background: var(--dark-bg);
  border-radius: clamp(24px, 4vw, 48px);
  padding: clamp(3.5rem, 9vh, 7rem) 0;
  overflow: clip;
}

.privacy-card h2 { color: var(--dark-text); }

.privacy-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 90% 70% at 75% 15%, rgba(138, 43, 226, 0.16), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(196, 181, 253, 0.05) 34px 35px),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(196, 181, 253, 0.05) 34px 35px);
}

.privacy-card .section-inner { position: relative; }

.privacy-points {
  list-style: none;
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.privacy-points li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--dark-text);
  font-weight: 500;
}
.privacy-points li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: var(--dark-purple);
  flex: none;
}

/* ---------- free / final cta ---------- */

.free { padding: clamp(6rem, 14vh, 10rem) 0 clamp(2.5rem, 6vh, 4rem); text-align: center; }
.free-title { font-size: clamp(2.5rem, 5.6vw, 4.25rem); }
.free .lede { margin-top: 1.5rem; }
.free .store-row { margin-top: 2.5rem; }

/* ---------- ready / final cta + flat-lay ---------- */

/* The section colour has to meet the flat-lay's top edge invisibly, and that edge
   is NOT one flat tone: the backdrop catches more light on the left, so above the
   bottle the photo reads (238,229,226) while the right side sits nearer
   (232,220,212). A single --flat-bg matched the right but left a visible step
   above the bottle. These stops are sampled from the photo's own top 8 rows with
   the objects masked out, so the seam matches at every x. The section and the
   photo are both full-bleed, so "to right" maps 1:1 onto the image. Re-sample if
   the flat-lay is ever replaced: tools/sample-flatlay-top-edge.py. */
.ready {
  padding: clamp(2.5rem, 7vh, 5rem) 0 0;
  text-align: center;
  background: var(--flat-bg);
  background: linear-gradient(to right,
    #EEE5E2 0%, #ECE1DC 17%, #EADED9 33%, #E9DCD6 50%,
    #E8DBD4 67%, #E8DCD6 83%, #E9DDDA 100%);
}
.ready-title { font-size: clamp(2.5rem, 5.6vw, 4.25rem); }
.ready-sub { margin-top: 1.25rem; }
.ready .store-row { margin-top: 2.5rem; }

/* full-bleed flat-lay; the dashboard is baked onto the phone by tools/build-flatlay.py,
   so this is a flat photograph with nothing to align at runtime */
.flatlay {
  position: relative;
  width: 100%;
  margin-top: clamp(0.85rem, 2vh, 1.5rem);
  line-height: 0;
}

.flatlay-photo {
  width: 100%;
  height: auto;
  display: block;
}

/* soft feather so the photo blends into the ready section's colour at the bottom seam;
   the top edge renders at full contrast (no feather) so the bottle cap stays crisp */
.flatlay::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: clamp(40px, 6vw, 90px);
  pointer-events: none;
  z-index: 2;
}
.flatlay::after { bottom: 0; background: linear-gradient(to top, var(--flat-bg), transparent); }

/* ---------- footer ---------- */

.footer {
  border-top: 1px solid var(--hairline);
  padding: 3.5rem 0 2.5rem;
  background: var(--surface);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  align-items: flex-start;
}
.footer-tag { color: var(--muted); font-size: 0.9375rem; margin-top: 0.5rem; }
.footer-links { display: flex; flex-direction: column; gap: 0.6rem; text-align: right; }
.footer-links a { font-size: 0.9375rem; font-weight: 500; color: var(--muted); }
.footer-links a:hover { color: var(--deep); }
.footer-legal {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
}
.footer-legal p { font-size: 0.8125rem; color: var(--faint); max-width: 52em; }

@media (max-width: 700px) {
  .footer-links { text-align: left; }
}

/* ---------- animation initial states (JS removes) ---------- */

.js .hero-line { transform: translateY(28px); }  /* no opacity gate: the h1 is the LCP
   element and must paint on first CSS paint, not wait for the GSAP chain. It only ever
   moves upward, so there is no jump if the script is slow. */
.js .reveal { opacity: 0; transform: translateY(28px); }

.js .float-card { opacity: 0; transform: translateY(20px) scale(0.94); }

.js .phone-wrap { transform: translateY(60px); }

/* per-card micro-moment start states (JS animates them to finished) */
.js .fc-1 .fc-pill { opacity: 0; transform: scale(0.9); }
.js .fc-chip-current { opacity: 0; transform: scale(0.8); }
.js .fc-4 .ring-fill { stroke-dashoffset: 100.5; }
.js .fc-5 .fc-elvl-chip { opacity: 0; }
.js .fc-5 .fc-elvl-chip.is-active {
  background: var(--surface);
  border-color: var(--hairline);
  color: var(--faint);
}
.js .fc-6 .fc-export { opacity: 0; transform: translateY(6px); }

@media (prefers-reduced-motion: reduce) {
  .js .hero-line, .js .reveal, .js .float-card, .js .phone-wrap {
    opacity: 1; transform: none;
  }
}

/* footer: links to the deeper content pages */
.footer-explore {
  display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem;
  margin: 0 0 1.1rem;
}
.footer-explore a {
  font-size: 0.875rem; font-weight: 500; color: var(--muted);
  border: 1px solid var(--hairline); border-radius: 999px;
  padding: 0.3rem 0.8rem; text-decoration: none;
}
.footer-explore a:hover { color: var(--deep); border-color: var(--hero); }

/* ---------- site nav ---------- */
.nav-links a[aria-current="page"] { color: var(--purple-ink); font-weight: 600; }
.nav-cta { white-space: nowrap; }