/* ===== Tokens & reset ===== */
:root {
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --accent: #457ade;        /* large text, icons, bloom, focus ring only (4.12:1) */
  --accent-text: #376ac8;   /* small blue text & links (5.1:1 on white) */
  --hairline: rgba(29, 29, 31, 0.12);   /* decorative dividers only */
  --control-border: #8e8e93;            /* form controls (3.3:1) */
  --radius: 22px;
  --nav-h: 64px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  font-family: "Open Runde", -apple-system, "SF Pro Rounded", system-ui, sans-serif;
  font-synthesis: none;
  color: var(--ink);
  background: #fff;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { text-wrap: balance; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }

/* ===== Fonts ===== */
@font-face { font-family: "Open Runde"; src: url("/assets/fonts/OpenRunde-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Open Runde"; src: url("/assets/fonts/OpenRunde-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Open Runde"; src: url("/assets/fonts/OpenRunde-Semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Open Runde"; src: url("/assets/fonts/OpenRunde-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/InstrumentSerif-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/InstrumentSerif-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

/* ===== Accessibility ===== */
.skip-link {
  position: absolute; left: 16px; top: -56px; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 999px;
  text-decoration: none; transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ===== Buttons (44px min target) ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 22px; border-radius: 999px;
  font: 500 1rem/1 "Open Runde", system-ui, sans-serif;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease;
}
.btn:active { transform: scale(0.96); }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #000; }
.btn-blue { background: #0071e3; color: #fff; }
.btn-blue:hover { background: #0077ed; }
.btn-grey { background: #e4e4e9; color: var(--ink); }
.btn-grey:hover { background: #dcdce2; }
.text-link { color: var(--accent-text); font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.text-link:hover { text-decoration: underline; }

/* ===== Nav ===== */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid transparent;
  transform-origin: 50% 0;
  transition: border-color 0.2s ease, background-color 0.3s ease, box-shadow 0.35s ease,
    -webkit-backdrop-filter 0.3s ease, backdrop-filter 0.3s ease;
}
.site-nav.scrolled { border-bottom-color: var(--hairline); }
/* Pill state. Colors/blur/shadow transition here; nav-morph.js springs the
   geometry (width, y, radius, height). Without JS the class is never added
   and the header stays the plain sticky bar above. */
.site-nav.is-pill {
  border-color: var(--hairline);
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 12px 32px rgba(29, 29, 31, 0.08), 0 2px 8px rgba(29, 29, 31, 0.05);
}
.nav-inner {
  max-width: 1120px; margin: 0 auto; min-height: var(--nav-h);
  padding: 0 20px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.nav-links { display: flex; gap: 8px; list-style: none; }
.nav-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px;
  text-decoration: none; color: var(--muted); font-weight: 500; font-size: 0.95rem;
}
.nav-links a:hover { color: var(--ink); }
.wordmark { height: 30px; width: auto; }
.nav-logo { height: 36px; width: auto; }
.nav-logo-link { display: inline-flex; align-items: center; justify-self: start; min-height: 44px; min-width: 44px; }
.nav-cta { justify-self: end; }
@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-inner { grid-template-columns: auto 1fr auto; }
}

/* ===== Reveal (JS + motion-preference gated; no-JS = fully visible) ===== */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal { opacity: 0; transform: translateY(8px); transition: opacity 0.18s ease, transform 0.18s ease; }
  html.js .reveal.visible { opacity: 1; transform: none; }
}

/* ===== Reduced motion: disable ALL motion ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .btn:active { transform: none; }
}

/* ===== Page surface (reveal-footer mechanics) =====
   The page rides above the sticky footer, carries its own background and
   rounds off where it ends, so the footer appears to slide out from under
   it as you scroll the last stretch. Pure CSS — works without JS. */
main {
  position: relative; z-index: 1;
  background: #fff;
  border-radius: 0 0 32px 32px;
  box-shadow: 0 26px 52px rgba(29, 29, 31, 0.14);
  padding-bottom: 12px;
}

/* ===== Footer (slide-under reveal; photo fuses into the surface) ===== */
.site-footer {
  position: sticky; bottom: 0; z-index: 0;
  background: #faf6ef;   /* matched to the photo's sky */
  text-align: center;
}
.footer-inner {
  max-width: 1120px; margin: 0 auto; padding: 128px 20px 104px;
  display: flex; flex-direction: column; align-items: center; gap: 40px;
}
.footer-inner .wordmark { height: 30px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 28px; align-items: center; justify-content: center; list-style: none; font-size: 0.9rem; color: var(--muted); }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: none; }
.footer-links a:hover { color: var(--ink); }
.footer-photo { position: relative; }
.footer-photo img {
  display: block; width: 100%;
  height: clamp(260px, 44vh, 460px);
  object-fit: cover; object-position: 50% 68%;
}
/* Guarantees the sky-to-surface blend regardless of viewport crop. */
.footer-photo::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 45%; z-index: 1;
  background: linear-gradient(180deg, #faf6ef, rgba(250, 246, 239, 0));
  pointer-events: none;
}

/* ===== Legal pages ===== */
/* Text column centered via padding (not max-width) so <main> itself stays
   full-width — it is the reveal surface above the footer. */
.legal-page { padding: 64px max(20px, calc((100% - 68ch) / 2)) 96px; }
.legal-page h1 { font-size: 2.2rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 8px; }
.legal-page .effective { color: var(--muted); margin-bottom: 40px; }
.legal-page h2 { font-size: 1.35rem; font-weight: 600; margin: 40px 0 12px; }
.legal-page p, .legal-page li { margin-bottom: 12px; color: #3a3a3c; line-height: 1.65; }
.legal-page ul { padding-left: 22px; }
.legal-page strong { color: var(--ink); }

/* ===== Error pages (404/500) ===== */
.error-page {
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  display: grid; place-content: center; justify-items: center;
  text-align: center; padding: 64px 20px 96px;
}
.error-code { color: var(--muted); font-weight: 600; letter-spacing: 0.08em; }
.error-page h1 { font-size: clamp(2.75rem, 7vw, 4.5rem); line-height: 1.1; margin: 10px 0 14px; }
.error-page h1 em {
  font-style: italic; font-weight: 400;
  color: #7a7266;   /* warm taupe from the logo palette, as in the hero headline */
}
.error-page p { color: #3a3a3c; line-height: 1.65; max-width: 44ch; text-wrap: pretty; }
.error-actions { margin-top: 30px; }

/* ===== Hero (gradient panel, rounded bottom, warm neutral palette) ===== */
.hero {
  position: relative; text-align: center;
  margin: 0 12px;
  /* The panel always fills the first screenful exactly: viewport minus
     the sticky header and a 12px reveal below the rounded corners.
     svh (stable smallest viewport on mobile) overrides vh where
     supported. The 660px floor keeps type and photo usable in very short
     windows — those scroll instead of crushing. */
  height: calc(100vh - var(--nav-h) - 12px);
  height: calc(100svh - var(--nav-h) - 12px);
  min-height: 660px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  /* Bottom padding reserves the photo band (bottom 66% of the panel, same
     formula as .hero-photo) so the copy centers in the airy zone above
     it; the max() arms match the min-height floor (660px × 0.66). The
     taller top padding biases the copy block downward, toward the photo. */
  padding: clamp(40px, 8vh, 96px) 20px max(436px, calc((100vh - var(--nav-h) - 12px) * 0.66));
  padding: clamp(40px, 8vh, 96px) 20px max(436px, calc((100svh - var(--nav-h) - 12px) * 0.66));
  background: linear-gradient(180deg, #fff 0%, #f9f7f5 55%, #f7f4f0 100%);
  border-radius: 0 0 32px 32px;
  overflow: hidden;
}
.hero > :not(.hero-photo) { position: relative; z-index: 1; }
/* Sized so the headline's width lands on (or a touch past) the subhead's
   fixed ~556px line on desktop; the 17.5vw arm keeps it on one line on
   narrow phones. */
.hero h1 { font-size: clamp(3.25rem, min(5vw + 56px, 17.5vw), 8rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; }
.hero h1 em {
  font-style: italic; font-weight: 400;
  color: #7a7266;   /* warm taupe from the logo palette; ~4.4:1 on the gradient (large text) */
}
.subhead { max-width: 34rem; margin: 6px auto 0; color: #5d5c61; font-size: clamp(1.05rem, 2vw, 1.25rem); text-wrap: pretty; }
/* One line once it genuinely fits (~560px with 20px side padding);
   narrower screens wrap rather than clip against the hero's edges. */
@media (min-width: 560px) { .subhead { max-width: none; white-space: nowrap; } }
/* The CTA floats over the photo near the panel's bottom edge, just below
   the phone in her hand — Apple-blue so it reads against the sweater.
   (.hero .hero-cta so position:absolute outranks the .hero > :not(…)
   rule that sets position:relative on hero children.) */
.hero .hero-cta {
  position: absolute; left: 0; right: 0; bottom: clamp(24px, 4.5vh, 48px);
  display: flex; justify-content: center;
}
.hero-cta .btn-primary { background: #0071e3; }
.hero-cta .btn-primary:hover { background: #0077ed; }
/* The photo is a bottom-anchored band spanning 58% of the panel height.
   The img keeps its aspect and is sized by band height, centered: wide
   windows show it whole (side fades melt its edges into the matching
   #f9f7f6 backdrop), narrow windows crop it symmetrically — the framing
   zooms with the viewport and nothing ever spills. Top fade lives on the
   wrapper, side fades on the img — nested masks multiply, giving both
   fades without mask-composite. */
.hero-photo {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 0;
  height: max(436px, calc((100vh - var(--nav-h) - 12px) * 0.66));
  height: max(436px, calc((100svh - var(--nav-h) - 12px) * 0.66));
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%);
  mask-image: linear-gradient(180deg, transparent 0, #000 14%);
}
.hero-photo img {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  height: 100%; width: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

/* ===== Features ===== */
.features { max-width: 820px; margin: 0 auto; padding: 64px 20px; display: grid; gap: 56px; }
.feature { max-width: 34rem; }
.feature:nth-child(even) { justify-self: end; text-align: right; }
.feature:nth-child(even) .feature-icon { margin-left: auto; }
.feature-icon { width: 32px; height: 32px; fill: var(--accent); margin-bottom: 14px; }
.feature h3 { font-size: 1.85rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 8px; }
.feature p { color: var(--muted); font-size: 1.05rem; text-wrap: pretty; }
.feature-media { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin-top: 22px; border-radius: 20px; box-shadow: 0 14px 36px rgba(29, 29, 31, 0.12); }
.tag { display: inline-block; vertical-align: middle; margin-left: 10px; padding: 4px 12px; border-radius: 999px; background: rgba(69, 122, 222, 0.08); color: var(--accent-text); font-size: 0.75rem; font-weight: 600; }
@media (max-width: 720px) { .feature:nth-child(even) { justify-self: start; text-align: left; } .feature:nth-child(even) .feature-icon { margin-left: 0; } }

/* ===== Fuel bento cards =====
   The full-width surfaces in the features flow: Apple-grey panels a step
   darker than the page, grouped tight (16px) so the pair reads as one
   bento. The wrapper is not a .feature, so the section's nth-child
   alignment rhythm is untouched. Plate card: copy right (its slot's
   alignment), plate bleeds off the left edge. Harvest card: centered
   statement, the held-up produce rises from the card's bottom edge.
   overflow crops every bleed. */
.fuel-bento { display: grid; gap: 16px; }
.feature.feature-card {
  max-width: none; justify-self: stretch; text-align: right;
  background: #f5f5f7;
  border-radius: 32px;
  overflow: hidden;
}
.feature.feature-card--plate {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: 40px;
  padding: 56px;
}
.feature.feature-card--plate .feature-icon { margin-left: auto; }
.feature-card--plate .feature-card-copy { grid-area: 1 / 2; }
.feature-card-plate {
  grid-area: 1 / 1;
  width: 360px; height: auto;
  margin-left: -100px;   /* past the 56px padding: ~44px of plate crops off the edge */
  filter: drop-shadow(0 18px 36px rgba(29, 29, 31, 0.16));
}
.feature.feature-card--strength {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 40px;
  padding: 56px 48px 0 56px;   /* no bottom padding: the frame's posts run off the edge */
  text-align: left;
}
.feature.feature-card--strength .feature-icon { margin-left: 0; }
.feature-card-pullup {
  width: min(340px, 34vw); height: auto;
  align-self: end;
  filter: drop-shadow(0 18px 36px rgba(29, 29, 31, 0.16));
}
.feature.feature-card--cardio {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 36px;
  padding: 56px;
  text-align: left;
}
/* The map tile leans out of the card's right edge — tossed on the table.
   The 56px padding absorbs the rotated corners top and bottom. */
.feature-card-map {
  width: 460px; max-width: none; height: auto;
  margin-right: -120px;
  transform: rotate(-4deg);
  filter: drop-shadow(0 24px 44px rgba(29, 29, 31, 0.18));
}
.cardio-bento { display: grid; gap: 16px; }
.feature.feature-card--pulse { text-align: center; padding: 56px 32px 0; }
.feature.feature-card--pulse > p { max-width: 46ch; margin: 0 auto; }
.hr-brands {
  list-style: none;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 18px 36px; margin: 26px auto 0;
}
.hr-brands img { height: 17px; width: auto; display: block; }
.hr-brands li:nth-child(2) img { height: 21px; }   /* Garmin's compact wordmark */
.hr-brands li:nth-child(3) img { height: 20px; }   /* Suunto's taller letterforms */
.feature-card-wearables {
  width: min(430px, 76%); height: auto;
  margin: 34px auto -30px;   /* the chest strap runs off the card's bottom edge */
  filter: drop-shadow(0 18px 36px rgba(29, 29, 31, 0.16));
}
.feature.feature-card--harvest { text-align: center; padding: 56px 32px 0; }
.feature.feature-card--harvest p { max-width: 44ch; margin: 0 auto; }
.feature-card-veg {
  width: min(560px, 88%); height: auto;
  margin: 28px auto 0;   /* wrists sit flush on the card's bottom edge */
  filter: drop-shadow(0 18px 36px rgba(29, 29, 31, 0.16));
}
.feature.feature-card--social { text-align: center; padding: 56px 32px 44px; }
.feature.feature-card--social .feature-icon { margin: 0 auto 14px; }
.feature.feature-card--social p { max-width: 44ch; margin: 0 auto; }
/* The arms run edge-to-edge: pull the image through the side padding so
   both forearms bleed off the card. max-width:none overrides the global
   img cap so the calc() width can exceed the content box. */
.feature-card-bump {
  width: calc(100% + 64px); max-width: none; height: auto;
  margin: 22px -32px 0;
  filter: drop-shadow(0 18px 36px rgba(29, 29, 31, 0.16));
}
@media (max-width: 720px) {
  .feature.feature-card { text-align: left; }
  .feature.feature-card--plate { grid-template-columns: 1fr; gap: 0; padding: 40px 28px 0; }
  .feature.feature-card--plate .feature-icon { margin-left: 0; }
  .feature-card-copy { grid-area: auto; }
  .feature-card-plate { grid-area: auto; width: min(300px, 84%); margin: 24px auto -32px; }
  .feature.feature-card--strength { grid-template-columns: 1fr; gap: 0; padding: 40px 28px 0; }
  .feature-card-pullup { width: min(300px, 78%); margin: 16px auto 0; align-self: auto; }
  .feature.feature-card--cardio { grid-template-columns: 1fr; gap: 0; padding: 40px 28px 36px; }
  .feature-card-map { width: calc(100% + 40px); max-width: none; margin: 24px -52px 0 0; transform: rotate(-3deg); }
  .feature.feature-card--pulse { text-align: center; padding: 40px 24px 0; }
  .hr-brands { gap: 14px 26px; }
  .feature-card-wearables { width: min(340px, 88%); margin: 26px auto -22px; }
  .feature.feature-card--harvest { text-align: center; padding: 40px 24px 0; }
  .feature-card-veg { width: 100%; margin-top: 20px; }
  .feature.feature-card--social { text-align: center; padding: 40px 24px 32px; }
  .feature-card-bump { width: calc(100% + 48px); margin: 18px -24px 0; }
}

/* ===== Runs band (compact showcase) =====
   A short fixed-height panel. The photo is right-anchored at full band
   height with its complete frame — the waist cut lands exactly on the
   band's top edge (a deliberate instant cut, no fade). Its bottom 22%
   is soil, and ::after continues that ground line across the rest of
   the band in the photo's own soil color; the photo's left-edge mask
   blends its texture into the flat strip. Frosted telemetry pills hang
   off the photo box (fixed aspect), so their positions stay locked to
   the stride. runs-band.js scrubs a slow drift into copy and pills on
   scroll (transforms only); without JS or with reduced motion this is
   simply a static composition. Below 960px it stacks: copy, then the
   full-frame photo in flow. */
.runs-band {
  position: relative; overflow: hidden;
  margin: 8px 12px 24px;
  border-radius: 32px;
  background: #e3dedb;   /* matched to the photo's left-edge sky */
  height: clamp(400px, 44vw, 580px);
}
.runs-band::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 22%;
  background: #2e2822;   /* sampled from the photo's soil */
}
.runs-copy { position: relative; z-index: 2; text-align: left; padding: clamp(40px, 7vh, 72px) 20px 0 clamp(24px, 6vw, 88px); }
.runs-copy h2 { max-width: 11ch; font-size: clamp(2.4rem, 5vw, 4.25rem); font-weight: 400; letter-spacing: -0.01em; line-height: 1.03; }
.runs-copy h2 em {
  font-style: italic;
  color: #7a7266;   /* warm taupe from the logo palette; ~3.6:1 on the sky (large text) */
}
.runs-sub { margin: 14px 0 0; max-width: 36ch; color: #55524f; font-size: clamp(1rem, 1.6vw, 1.15rem); text-wrap: pretty; }
.runs-stage {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 1;
  aspect-ratio: 1448 / 1086;
}
/* The wide left fade absorbs the photo's vignette so sky and soil both
   dissolve into the band's flat colors with no visible seam. */
.runs-photo {
  display: block; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%);
  mask-image: linear-gradient(90deg, transparent 0, #000 30%);
}
@media (max-width: 960px) {
  .runs-band { height: auto; }
  .runs-band::after { display: none; }
  .runs-stage { position: relative; aspect-ratio: auto; margin-top: 8px; }
  .runs-photo { height: auto; -webkit-mask-image: none; mask-image: none; }
}
.runs-tags { list-style: none; }
.runs-tag {
  position: absolute; z-index: 1;
  padding: 10px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.66);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(29, 29, 31, 0.08);
  box-shadow: 0 8px 24px rgba(29, 29, 31, 0.1);
  font-size: 0.9rem; font-weight: 500; color: var(--ink);
  will-change: transform;
}
.runs-tag--route     { left: 7%;   top: 18%; }
.runs-tag--splits    { right: 7%;  top: 14%; }
.runs-tag--pace      { left: 20%;  top: 58%; }
.runs-tag--elevation { right: 11%; top: 44%; }
.runs-tag--bpm       { left: 45%;  top: 52%; }
@media (max-width: 720px) {
  .runs-band { margin-bottom: 16px; }
  .runs-tag--pace, .runs-tag--elevation, .runs-tag--bpm { display: none; }
  .runs-tag--route  { left: 6%;  top: 14%; }
  .runs-tag--splits { right: 5%; top: 20%; }
}

/* ===== Privacy band ===== */
.privacy-band { text-align: center; max-width: 40rem; margin: 0 auto; padding: 80px 20px; border-top: 1px solid var(--hairline); }
.privacy-band .feature-icon { margin: 0 auto 16px; }
.privacy-band h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 14px; }
.privacy-band p { color: var(--muted); font-size: 1.05rem; text-wrap: pretty; }

/* ===== Pricing ===== */
.pricing { max-width: 720px; margin: 0 auto; padding: 80px 20px 8px; text-align: center; }
.pricing h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; }
.pricing h2 em {
  font-style: italic;
  color: #7a7266;   /* warm taupe, as in the hero headline */
}
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 36px; text-align: center; }
.price-card { background: #f5f5f7; border-radius: 24px; padding: 36px 28px 32px; display: flex; flex-direction: column; }
.price-plan { font-weight: 600; margin-bottom: 12px; }
.price {
  font-family: "Instrument Serif", Georgia, serif; font-weight: 400;
  font-size: clamp(3rem, 6vw, 3.75rem); line-height: 1; letter-spacing: -0.01em;
}
.price-period {
  font-family: "Open Runde", -apple-system, system-ui, sans-serif;
  font-size: 1rem; color: var(--muted); margin-left: 5px;
}
.price-compare { font-size: 0.45em; color: var(--muted); text-decoration-thickness: 2px; margin-right: 10px; }
.price-features {
  list-style: none; text-align: left;
  width: 100%; max-width: 250px; margin: 26px auto 28px;
  display: grid; gap: 10px;
  color: #3a3a3c; font-size: 0.95rem;
}
.price-features li { display: flex; align-items: flex-start; gap: 12px; }
.price-feature-icon {
  flex: none;
  width: 19px; height: 19px;
  margin-top: 1px;
  fill: var(--ink);
}
.price-features .tag { margin-left: 6px; }
/* margin-top:auto pins the buttons level across both cards */
.price-card .btn { margin-top: auto; width: 100%; }
@media (max-width: 600px) { .price-grid { grid-template-columns: 1fr; } }

/* ===== Signup ===== */
.signup { text-align: center; max-width: 30rem; margin: 0 auto; padding: 80px 20px 96px; }
.signup h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; }
.signup > p { color: var(--muted); margin: 10px 0 24px; }
#signup-fallback { margin-bottom: 0; }
#beta-form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
#beta-form[hidden] { display: none; }
#email { min-height: 44px; padding: 0 18px; border: 1px solid var(--control-border); border-radius: 999px; font: 400 1rem "Open Runde", system-ui, sans-serif; min-width: 240px; }
#email:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#form-status { margin-top: 14px; font-size: 0.95rem; color: var(--ink); min-height: 1.4em; }
#form-status.error { color: #c0392b; }

/* ===== Closing CTA band (full-bleed photo) ===== */
.cta-band { position: relative; isolation: isolate; margin: 24px 20px 8px; min-height: clamp(420px, 62vh, 600px); border-radius: 32px; overflow: hidden; display: grid; place-items: center; }
.cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 17, 29, 0.48) 0%, rgba(12, 17, 29, 0.72) 100%); }
.cta-inner { text-align: center; padding: 56px 24px; }
.cta-inner h2 { color: #fff; font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 26px; text-wrap: balance; text-shadow: 0 2px 28px rgba(0, 0, 0, 0.35); }
.btn-on-photo { background: #fff; color: var(--ink); }
.btn-on-photo:hover { background: #f0f0f2; }

/* ===== Serif display headings (Instrument Serif; body/UI stay Open Runde) =====
   Last in the cascade so it wins the family/weight ties against the
   per-component rules above. Single 400 weight — it's a display face. */
.hero h1,
.feature h3,
.runs-copy h2,
.privacy-band h2,
.pricing h2,
.signup h2,
.cta-inner h2,
.legal-page h1,
.error-page h1 {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* ===== Squircle corners (progressive enhancement) =====
   Native CSS superellipse — the Apple/Figma continuous-corner look.
   Chromium 139+ renders the squircle; every other browser ignores
   `corner-shape` and falls back to the existing border-radius. No JS,
   no assets, CSP-clean. */
.btn,
#email,
.tag,
.skip-link,
.feature-media,
.feature-card,
.price-card,
.runs-band,
.cta-band { corner-shape: squircle; }

/* ===== clip-path squircles (applied by squircle.js — cross-browser incl. Safari) =====
   The clip-path now defines the shape, so border-radius is zeroed; clip-path
   clips box-shadow, so swap in a drop-shadow that follows the squircle. */
.is-squircled { border-radius: 0; }
.feature-media.is-squircled { box-shadow: none; filter: drop-shadow(0 14px 30px rgba(29, 29, 31, 0.14)); }