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

:root {
  --bg: #F5F1EA;
  --surface: #FBF8F2;
  --flat-bg: #E8D7CF; /* the flat-lay photo's own background, so the ready section reads as one with the image */
  --sunken: #F1E9DD;
  --hairline: #E7E0D5;
  --ink: #201813;
  --muted: #70665F;
  --faint: #918780;

  --hero: #C33C00;
  --deep: #B53000;
  --hero-ink: #811D00;
  --sibling: #E65A2A;
  --tint100: #FED8C7;
  --tint50: #FFEDE5;

  --teal: #1A6F80;

  --dark-bg: #1B130D;
  --dark-surface: #2B1C12;
  --dark-hairline: #3C2C21;
  --dark-text: #F4E9E2;
  --dark-muted: #B29E91;
  --dark-hero: #FFB7A0;

  --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(32, 24, 19, 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-hero); }

.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(32, 24, 19, 0.18), 0 2px 8px rgba(32, 24, 19, 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 an orange 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(--hero-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: #2B1C12;
  padding: calc(var(--phone-w) * 0.028);
  box-shadow:
    0 24px 60px rgba(32, 24, 19, 0.22),
    0 4px 14px rgba(32, 24, 19, 0.12),
    inset 0 0 0 2px #3C2C21;
}

.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: #120C07;
  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-hero); }
.flow-head h2 { color: var(--dark-text); }
.flow-head h2 em { color: var(--dark-hero); }

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

.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-ember);
  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-ember); }
  .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(195, 60, 0, 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(195, 60, 0, 0.16), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(255, 183, 160, 0.05) 34px 35px),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(255, 183, 160, 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-hero);
  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 (236,224,217) while the right side sits nearer
   (231,213,205). 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. Thirteen stops
   rather than seven because this photo's falloff is less linear than the last one's:
   seven left a 5.6-value residual against the photo's own smoothed edge, and a step
   becomes perceptible from about three. Thirteen brings it to 2.7. */
.ready {
  padding: clamp(2.5rem, 7vh, 5rem) 0 0;
  text-align: center;
  background: var(--flat-bg);
  background: linear-gradient(to right,
    #ECE0D9 0%, #ECE0D9 8%, #E9D9D0 17%, #E9D8CF 25%,
    #E8D7CF 33%, #E9D8CF 42%, #E8D7CE 50%, #E9D7CF 58%,
    #E9D8CF 67%, #E9D8CF 75%, #E8D7CF 83%, #E7D5CC 92%,
    #E7D5CD 100%);
}

/* The flat-lay is a photograph, so its backdrop carries paper grain. The section above
   it was a clean CSS gradient, so the two met at exactly the right colour but not at the
   same material, and the eye read the top edge of the image as a seam anyway. This lays
   the photograph's own grain over the section.

   Measured off the flat-lay's clean backdrop (columns 338-2090 of the top strip, the
   only region with no object in it): achromatic, sd 1.68 / 1.76 / 2.05 per channel, and
   close to flat in energy from 6 to 96 photo pixels rather than falling off.

   That flatness is why this is three single-octave fields rather than one fractalNoise.
   fractalNoise is 1/f: most of its energy lands in the coarsest octave and it reads as
   blobs, measuring 1.5x the photo's coarse mottle and 0.4x its fine grain. Three bands
   at 96, 24 and 8 units, weighted 0.9 / 0.9 / 1.55, land every band within 20% and the
   overall amplitude within 1%.

   The tile is 512 units shown at 512/3072 of the width, and 3072 is the photograph's own
   width, so one tile unit is one photo pixel at every viewport size. The grain is
   therefore the same size on both sides of the join whatever the screen. Verified at
   1440 and at iPhone 14 Pro: grain ratio 1.02, colour delta across the join 0.28.

   The per-channel slopes are not equal because soft-light's effect scales with each
   channel's headroom, and this backdrop is much brighter in red (233) than blue (207).
   Equal slopes gave a blue-skewed grain; 1.56 / 0.855 / 0.855 lands it achromatic, as
   the photograph's is.

   soft-light leaves mid grey untouched, so the texture adds no colour shift and the
   sampled gradient stops above stay exact. Gated behind @supports: without blend-mode
   support the section falls back to the plain gradient it had before, which is correct,
   rather than a flat grey rectangle.

   Re-run tools/build-ready-grain.py after replacing the flat-lay: it re-measures the
   photograph and prints the parameters to paste back in. */
@supports (background-blend-mode: soft-light) {
  .ready {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27512%27%20height%3D%27512%27%3E%3Cfilter%20id%3D%27g%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20color-interpolation-filters%3D%27sRGB%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.0104%27%20numOctaves%3D%271%27%20stitchTiles%3D%27stitch%27%20seed%3D%277%27%20result%3D%27c%27%2F%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.0417%27%20numOctaves%3D%271%27%20stitchTiles%3D%27stitch%27%20seed%3D%2711%27%20result%3D%27m%27%2F%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.125%27%20numOctaves%3D%271%27%20stitchTiles%3D%27stitch%27%20seed%3D%2719%27%20result%3D%27f%27%2F%3E%3CfeComposite%20in%3D%27c%27%20in2%3D%27m%27%20operator%3D%27arithmetic%27%20k1%3D%270%27%20k2%3D%270.5000%27%20k3%3D%270.5000%27%20k4%3D%270%27%20result%3D%27cm%27%2F%3E%3CfeComposite%20in%3D%27cm%27%20in2%3D%27f%27%20operator%3D%27arithmetic%27%20k1%3D%270%27%20k2%3D%270.5373%27%20k3%3D%270.4627%27%20k4%3D%270%27%20result%3D%27n%27%2F%3E%3CfeColorMatrix%20in%3D%27n%27%20type%3D%27matrix%27%20values%3D%270.3333%200.3333%200.3333%200%200%20%200.3333%200.3333%200.3333%200%200%20%200.3333%200.3333%200.3333%200%200%20%200%200%200%200%201%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type%3D%27linear%27%20slope%3D%271.56%27%20intercept%3D%27-0.2800%27%2F%3E%3CfeFuncG%20type%3D%27linear%27%20slope%3D%270.855%27%20intercept%3D%270.0725%27%2F%3E%3CfeFuncB%20type%3D%27linear%27%20slope%3D%270.855%27%20intercept%3D%270.0725%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27512%27%20height%3D%27512%27%20filter%3D%27url%28%23g%29%27%2F%3E%3C%2Fsvg%3E"), linear-gradient(to right,
      #ECE0D9 0%, #ECE0D9 8%, #E9D9D0 17%, #E9D8CF 25%,
      #E8D7CF 33%, #E9D8CF 42%, #E8D7CE 50%, #E9D7CF 58%,
      #E9D8CF 67%, #E9D8CF 75%, #E8D7CF 83%, #E7D5CC 92%,
      #E7D5CD 100%);
    background-size: 16.6667% auto, auto;
    background-repeat: repeat, no-repeat;
    background-blend-mode: soft-light, normal;
  }
}
.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(--hero-ink); font-weight: 600; }
.nav-cta { white-space: nowrap; }