/* ObsyMint Goals — website styles. Plain CSS, no framework, no build step. */

:root {
  --navy: #0D0D2B;             /* softened from brand #00001C — less "pure black", more charcoal-navy */
  --navy-deep: #08081c;        /* darker end of the hero/footer gradient */
  --green: #12B76A;            /* calmer, less neon than brand #06C970 — same hue family */
  --green-hover: #0e9c5c;
  --blue: #6765EC;
  --paper: #F7F7FF;

  /* Text-on-fill pairings verified for contrast (checked against the new tones above). */
  --on-navy: #F7F7FF;
  --on-green: #00001C;
  --on-blue: #17173A;
  --on-paper: #0C2E22;

  /* Light-surface tokens are green-tinted to match the homepage. They used to
     be navy/lavender from the original theme, which left the inner pages
     reading cooler and greyer than the homepage sitting next to them. */
  --muted-on-light: #2A5B48;   /* secondary text on paper bg */
  --muted-on-dark: #c7c7dd;    /* secondary text on navy bg */
  --border-on-light: #DCE9E3;
  --border-on-dark: #33335a;
  --card-bg: #EAF4EF;

  /* Brand gradients — the app icon's own green, for anything meant to feel premium and alive. */
  --gradient-green: linear-gradient(135deg, #4ADE80 0%, #14B866 45%, #076B48 100%);
  --gradient-green-soft: linear-gradient(135deg, rgba(74,222,128,0.16), rgba(7,107,72,0.10));
  --gradient-blue: linear-gradient(135deg, #9795F7 0%, #6765EC 55%, #423FC0 100%);
  --gradient-blue-soft: linear-gradient(135deg, rgba(151,149,247,0.16), rgba(66,63,192,0.10));
  --shadow-glow-green: 0 20px 60px -20px rgba(20,184,102,0.45);
  --shadow-glow-blue: 0 20px 60px -20px rgba(103,101,236,0.4);

  --max: 1120px;
  --gap: clamp(1.25rem, 3vw, 2.5rem);
  --radius: 16px;
  /* Apple's own SF Pro is a proprietary system font Apple doesn't license for
     use on non-Apple sites, so this uses Inter — the standard, freely-licensed
     stand-in most sites reach for specifically because its proportions and
     letterforms read as the same clean, geometric style as SF Pro. Kept
     -apple-system first in the *fallback* chain so real Apple devices still
     get true San Francisco if Inter is ever slow to load. */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html:focus-within { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--paper);
  color: var(--on-paper);
  line-height: 1.55;
  font-size: 16px;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 0.5em; font-weight: 700; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--green);
  color: var(--on-green);
  padding: 0.75em 1.25em;
  border-radius: 0 0 10px 0;
  font-weight: 600;
  z-index: 1000;
}
.skip-link:focus {
  left: 0;
}

/* Focus visibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Header ---------- */
.site-header {
  background: var(--navy);
  color: var(--on-navy);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--border-on-dark);
}
.site-header .wrap {
  max-width: 1320px;
  padding-left: clamp(1rem, 3vw, 1.75rem);
  padding-right: clamp(1rem, 3vw, 1.75rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 68px;
}
.header-cta { padding: 0.7em 1.3em; font-size: 0.92rem; }
.main-nav { flex-shrink: 1; min-width: 0; }
.brand { flex-shrink: 0; }
.header-cta { flex-shrink: 0; }
.brand {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-weight: 800;
  font-size: 1.6rem;
  text-decoration: none;
  color: var(--on-navy);
}
/* Full size, fully inside the bar — the bar's own padding (below) is sized
   to comfortably fit this instead of letting it overflow or shrinking it. */
.brand img { height: 76px; width: 76px; border-radius: 50%; }
.brand .brand-obsy { color: var(--on-navy); }
.brand .brand-mint { color: var(--green); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border-on-dark);
  color: var(--on-navy);
  border-radius: 8px;
  padding: 0.5em 0.7em;
  font-size: 1rem;
}
.main-nav ul {
  display: flex;
  gap: clamp(0.5rem, 1.2vw, 1rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav a {
  text-decoration: none;
  color: var(--muted-on-dark);
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.4em 0.1em;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: var(--on-navy);
  border-bottom-color: var(--green);
}
.header-cta {
  display: inline-flex;
}

/* Below ~600px the 76px logo + 1.6rem wordmark left no room for the menu
   toggle — it was rendering off the right edge of the viewport entirely.
   Scale both down enough that everything fits on a phone-width screen. */
@media (max-width: 600px) {
  .brand img { height: 40px; width: 40px; }
  .brand, .stage-nav .brand { font-size: 1.05rem; gap: 0.45em; }
}

@media (max-width: 1300px) {
  .nav-toggle { display: inline-flex; align-items: center; gap: 0.4em; }
  .main-nav {
    display: none;
    position: absolute;
    inset: 68px 0 auto 0;
    background: var(--navy);
    border-bottom: 1px solid var(--border-on-dark);
    padding: 1rem clamp(1.25rem, 4vw, 2.5rem) 1.5rem;
  }
  .main-nav.open { display: block; }
  .main-nav ul { flex-direction: column; gap: 0.25rem; }
  .main-nav a { display: block; padding: 0.6em 0.2em; }
  .header-cta.desktop-only { display: none; }
}
@media (min-width: 1301px) {
  .mobile-only { display: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.85em 1.5em;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  min-height: 44px;
}
.btn-primary { background: #06C970; color: var(--on-green); box-shadow: var(--shadow-glow-green); }
.btn-primary:hover { filter: brightness(1.06); }
.btn-secondary { background: transparent; color: var(--on-navy); border-color: var(--border-on-dark); }
.btn-secondary:hover { border-color: var(--green); }
.btn-on-light { background: var(--navy); color: var(--on-navy); }
.btn-on-light:hover { background: #14142f; }
.btn-outline-light { background: transparent; color: var(--on-paper); border-color: var(--border-on-light); }
.btn-outline-light:hover { border-color: var(--navy); }
.btn-block { width: 100%; }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(180deg, #14143a 0%, var(--navy) 55%, var(--navy-deep) 100%);
  color: var(--on-navy);
  padding: clamp(2.5rem, 8vw, 6rem) 0 clamp(3rem, 8vw, 6rem);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--gap);
  align-items: center;
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-actions { justify-content: center; }
  .hero-trust { justify-content: center; }
}
.eyebrow {
  display: inline-block;
  color: var(--green);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-bottom: 0.75em;
}
.hero h1 {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  margin-bottom: 0.4em;
}
.hero .lede {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--muted-on-dark);
  max-width: 46ch;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 1.75rem 0 1.5rem;
}
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted-on-dark);
}
.hero-trust li { display: flex; align-items: center; gap: 0.5em; }
.hero-trust svg { flex-shrink: 0; }

.hero-visual {
  position: relative;
  background: linear-gradient(165deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 28px;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.hero-visual::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  background: var(--gradient-green);
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.45;
  z-index: 0;
}
.hero-visual-inner { position: relative; z-index: 1; text-align: center; }
.hero-icon-tile {
  border-radius: 34px;
  box-shadow: var(--shadow-glow-green), 0 1px 0 rgba(255,255,255,0.25) inset;
  margin: 0 auto 1.25rem;
  display: block;
}
.hero-wordmark { font-weight: 800; font-size: 1.6rem; }
.hero-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.5em;
  background: rgba(13,13,43,0.85);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 0.55em 1em;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--on-navy);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
  z-index: 2;
  white-space: nowrap;
}
.hero-badge svg { color: var(--green); flex-shrink: 0; }
/* All four stack down the RIGHT side of the phone only. The left side is
   where the fluid-width text column lives (its own right edge moves with
   viewport width and font size), so any badge placed there can drift onto
   real text at some width. The right side of .orb-float has nothing next to
   it but the stage's own empty padding, so left:100%+gap can never collide
   with content, only ever get clipped by the stage's rounded edge on a
   narrow viewport — which the breakpoint below prevents. */
.hero-badge.badge-top-right,
.hero-badge.badge-top-left,
.hero-badge.badge-bottom-left,
.hero-badge.badge-bottom-right {
  left: 100%;
  margin-left: 18px;
}
.hero-badge.badge-top-right    { top: 6%; }
.hero-badge.badge-top-left     { top: 32%; }
.hero-badge.badge-bottom-left  { top: 58%; }
.hero-badge.badge-bottom-right { top: 84%; }
/* On the landing page these sit on frosted glass over a bright sky, not the
   old dark hero, so they need dark text instead of the white default above. */
.page-landing .hero-badge { color: #0C2E22; }
.page-landing .hero-badge.badge-top-right svg,
.page-landing .hero-badge.badge-bottom-left svg { color: #0F6B32; }
.page-landing .hero-badge.badge-top-left svg,
.page-landing .hero-badge.badge-bottom-right svg { color: var(--blue); }
@media (max-width: 1400px) {
  /* Badges sit a fixed 18px + their own width to the right of the phone,
     with no awareness of the viewport's actual edge. Below ~1360px that math
     leaves under 15px of margin (and under 1360px, none at all) — they'd
     clip off the page. 1400px is where real measurement showed a safe,
     consistent margin (~24px+) at every width above it. */
  .hero-badge { display: none; }
}

/* ---------- Sections ---------- */
.section {
  padding: clamp(3rem, 7vw, 5.5rem) 0;
}
.section-alt {
  background: var(--card-bg);
}
.section-dark {
  background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 40%, #14143a 100%);
  color: var(--on-navy);
}
.section-head {
  max-width: 62ch;
  margin: 0 auto 2.5rem;
  text-align: center;
}
.section-head h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); }
.section-head p { color: var(--muted-on-light); font-size: 1.05rem; }
.section-dark .section-head p { color: var(--muted-on-dark); }

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
}
@media (max-width: 860px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

.card {
  background: #fff;
  border: 1px solid var(--border-on-light);
  border-radius: var(--radius);
  padding: 1.75rem;
}
.section-alt .card { background: #fff; }
.card .icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-green);
  color: var(--on-green);
  margin-bottom: 1rem;
  box-shadow: 0 8px 20px -8px rgba(20,184,102,0.5);
}
.card.blue .icon { background: var(--gradient-blue); color: var(--on-blue); box-shadow: 0 8px 20px -8px rgba(103,101,236,0.5); }
.card h3 { font-size: 1.15rem; }
.card p { color: var(--muted-on-light); margin-bottom: 0; }
.card ul { color: var(--muted-on-light); padding-left: 1.1em; margin: 0.75em 0 0; }
.card li { margin-bottom: 0.35em; }

/* Steps (How it works) */
.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.25rem;
}
.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 1rem;
  align-items: start;
  background: #fff;
  border: 1px solid var(--border-on-light);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.step::before {
  content: counter(step);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gradient-blue);
  color: var(--on-blue);
  box-shadow: 0 8px 20px -8px rgba(103,101,236,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.step h3 { margin-bottom: 0.25em; font-size: 1.05rem; }
.step p { margin: 0; color: var(--muted-on-light); }
.step.has-media {
  grid-template-columns: 48px 1fr auto;
  align-items: center;
}
.step-media { justify-self: end; }
.step-media .phone-frame { box-shadow: 0 20px 40px -20px rgba(10,20,40,0.35); }

/* ---- screenshot lightbox (click any phone-frame screenshot to enlarge) ---- */
.phone-frame .screen img { cursor: zoom-in; }
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(8,8,28,0.86);
}
.lightbox-overlay[hidden] { display: none; }
.lightbox-overlay img {
  max-width: min(92vw, 420px);
  max-height: 88vh;
  width: auto;
  height: auto;
  border-radius: 34px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
  cursor: zoom-out;
}
@media (max-width: 700px) {
  .step.has-media { grid-template-columns: 48px 1fr; }
  .step-media { grid-column: 1 / -1; justify-self: center; margin-top: 1rem; }
}

/* Trust list */
.trust-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 2rem;
}
@media (max-width: 600px) { .trust-list { grid-template-columns: 1fr; } }
.trust-list li {
  display: flex;
  gap: 0.75em;
  align-items: flex-start;
}
.trust-list svg { flex-shrink: 0; margin-top: 0.15em; color: var(--green); }
.trust-list li:nth-child(even) svg { color: var(--blue); }
.trust-list strong { display: block; }
.trust-list span.desc { color: var(--muted-on-light); font-size: 0.95rem; }

/* CTA band */
.cta-band {
  background: linear-gradient(160deg, #14143a 0%, var(--navy) 60%, var(--navy-deep) 100%);
  color: var(--on-navy);
  border-radius: 24px;
  padding: clamp(2rem, 6vw, 3.5rem);
  text-align: center;
}
.cta-band h2 { margin-bottom: 0.4em; }
.cta-band p { color: var(--muted-on-dark); max-width: 55ch; margin: 0 auto 1.5rem; }
.cta-band .hero-actions { justify-content: center; }
.cta-band p.cta-band-note { font-size: 0.85rem; margin: 1.75rem auto 0; }

/* ---------- Feature highlight carousel (Features page) ----------
   Back to the deep-green gradient (same as the homepage's .privacy-strip)
   at the user's explicit request after a light-theme version was tried —
   this was the color they wanted kept. */
.highlight-section {
  background: linear-gradient(160deg, #0F3D2B 0%, #12503A 55%, #0B3550 100%);
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2rem);
  overflow: hidden;
}
/* Native horizontal scroll-snap, not a transform track: each slide is
   narrower than the carousel so the previous/next slide peeks in at the
   edges (dimmed, scaled down) — and it comes with touch-swipe for free.
   Side padding centers a slide close to the site's normal 1120px column on
   wide screens while leaving room on both sides for neighbors to peek in
   the full-bleed band; on narrow screens it collapses to the usual gutter. */
.highlight-carousel {
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, 3vw, 2rem);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-inline: max(1.25rem, calc((100% - 760px) / 2));
}
.highlight-carousel::-webkit-scrollbar { display: none; }
.highlight-slide {
  flex: 0 0 auto;
  /* Sized to fit its content (phone + text), not the old wider single-
     column layout's 1040px — that left a big empty gap to the right of the
     text once the layout became a row. */
  width: min(760px, 70vw);
  scroll-snap-align: center;
  /* Row layout: a real screenshot on one side, the claim on the other —
     like Apple's own carousels pair a product shot with the claim it
     proves, rather than an abstract icon standing in for it. */
  display: flex;
  flex-direction: row;
  align-items: center;
  /* Not justify-content:center — that centers the media+text as one small
     island in the middle of the card. Media pins to the left edge; the
     copy grows to fill the rest of the width on the right. */
  justify-content: flex-start;
  text-align: left;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 3rem);
  /* A fixed height, not min-height: flex stretches every slide (including
     off-screen ones) to match the row's tallest slide by default, which
     left shorter slides with dead white space at the bottom and the whole
     row overflowing the band. align-items: flex-start on the carousel
     above plus a fixed height here makes every slide identically sized
     regardless of its own content length. */
  height: 440px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 24px;
  box-shadow: 0 20px 50px -30px rgba(0,0,0,0.5);
  opacity: 0.4;
  transform: scale(0.94);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.highlight-slide.is-active { opacity: 1; transform: scale(1); }
.highlight-media { flex-shrink: 0; }
.highlight-media .phone-frame { box-shadow: 0 20px 40px -20px rgba(10,20,40,0.35); }
.icon-tile.lg { width: 64px; height: 64px; border-radius: 18px; margin-bottom: 0; }
.highlight-copy h3 { color: #FFFFFF; font-size: clamp(1.3rem, 2.6vw, 1.9rem); margin-bottom: 0.4em; }
.highlight-copy p { color: #BFE3CE; font-size: 1.02rem; max-width: 38ch; margin: 0; }
@media (max-width: 760px) {
  .highlight-slide {
    flex-direction: column;
    text-align: center;
    justify-content: center;
  }
  .highlight-copy p { max-width: 34ch; }
}
.highlight-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}
.highlight-dots { display: flex; align-items: center; gap: 0.5rem; }
.highlight-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.25);
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: width 0.35s var(--ease);
}
.highlight-dot.is-active { width: 34px; }
.highlight-dot-fill {
  position: absolute;
  inset: 0;
  /* Same bright green .privacy-strip already uses for its own icons on this
     exact gradient. */
  background: #7BE0A4;
  border-radius: inherit;
  transform-origin: left;
  transform: scaleX(0);
}
.js:not(.no-motion) .highlight-dot.is-active .highlight-dot-fill {
  animation: highlight-progress 6s linear forwards;
}
.no-motion .highlight-dot.is-active .highlight-dot-fill { transform: scaleX(1); }
@keyframes highlight-progress {
  to { transform: scaleX(1); }
}
.highlight-playpause {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid var(--border-light);
  color: #0C2E22;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px -6px rgba(20,80,59,0.25);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.highlight-playpause .icon-play { margin-left: 2px; } /* optically center the triangle */
.highlight-playpause:hover { background: #f4faf7; }
.js:not(.no-motion) .highlight-playpause:active { transform: scale(0.92); }
@media (max-width: 640px) {
  .icon-tile.lg { width: 52px; height: 52px; }
  /* Stacked layout now holds a full phone screenshot above the text (not
     just an icon), so it needs meaningfully more height than the old
     icon+text version did, not less. */
  .highlight-slide { height: 600px; gap: 0.85rem; }
}

/* ---------- Feature checklist (Features page) ----------
   The carousel above only has room for five headline claims; this is
   everywhere else, all at once, scannable without touching a control —
   the thing a carousel-only page structurally can't offer. */
.feature-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem 2rem;
}
@media (max-width: 700px) { .feature-checklist { grid-template-columns: 1fr; } }
.feature-checklist li { display: flex; align-items: flex-start; gap: 0.75em; }
.feature-checklist svg {
  flex-shrink: 0;
  margin-top: 0.2em;
  color: #06C970;
}
.feature-checklist li:nth-child(even) svg { color: var(--blue); }
.feature-checklist span { color: #0C2E22; }

/* ---------- Claim + proof rows (Features page: "See it in the app") ----------
   Replaces a plain screenshot row with generic captions: each row now
   pairs one specific claim with the one real screenshot that proves it,
   alternating sides so the eye has somewhere new to land each time. */
.feature-row {
  display: grid;
  /* Media's own track is auto (tight, fits the phone exactly) and text
     gets the 1fr track that fills the rest — the reverse of this left a
     wide empty gap between image and text on odd rows, since the media
     column stretched to 1fr while its content stayed a fixed width. */
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}
.feature-row:not(:last-child) { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.feature-row:nth-child(even) { grid-template-columns: 1fr auto; }
.feature-row:nth-child(even) .feature-row-media { order: 1; }
.feature-row-media { justify-self: center; }
.feature-row-media .phone-frame { box-shadow: 0 20px 40px -20px rgba(10,20,40,0.35); }
.feature-row-text h3 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin-bottom: 0.4em; }
.feature-row-text p { color: var(--muted-on-light); font-size: 1.05rem; max-width: 42ch; margin: 0; }
@media (max-width: 760px) {
  .feature-row,
  .feature-row:nth-child(even) {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }
  .feature-row:nth-child(even) .feature-row-media { order: 0; }
}

/* ---------- Legal / long-form content ---------- */
.legal {
  padding: clamp(2.5rem, 6vw, 4rem) 0 5rem;
}
.legal .wrap { max-width: 820px; }
.legal h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); }
.legal .updated {
  color: var(--muted-on-light);
  font-size: 0.9rem;
  margin-bottom: 2rem;
}
.legal h2 {
  font-size: 1.3rem;
  margin-top: 2.25em;
  padding-top: 0.5em;
  border-top: 1px solid var(--border-on-light);
}
.legal h2:first-of-type { border-top: none; margin-top: 1.5em; }
.legal p, .legal li { color: #2A5B48; } /* was #26264a: the old navy theme's body text */
.legal a { color: #0F6B32; text-decoration-thickness: 1px; }
.legal .toc {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}
.legal .toc h2 { margin-top: 0; padding-top: 0; border-top: none; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; }
.legal .toc ol { columns: 2; padding-left: 1.1em; }
@media (max-width: 600px) { .legal .toc ol { columns: 1; } }
.legal .note {
  background: var(--card-bg);
  border-left: 4px solid var(--blue);
  padding: 1rem 1.25rem;
  border-radius: 0 10px 10px 0;
  margin: 1.25em 0;
}

/* Guides row in the footer, under the four columns */
.footer-guides { margin: 0.5rem 0 1.25rem; }
.footer-guides h2 {
  color: var(--green);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.9em;
}
.footer-guides ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.footer-guides a { text-decoration: none; color: var(--muted-on-dark); font-size: 0.92rem; }
.footer-guides a:hover { color: var(--on-navy); }

/* ---------- Guide pages (SEO landing content, built on .legal) ---------- */
.legal .screens-row { margin: 2rem 0; }
.legal .guide-answer { font-size: 1.15rem; line-height: 1.6; margin-top: 0; }
.legal.guide h3 { font-size: 1.05rem; margin: 1.5em 0 0.3em; }
.legal.guide ul, .legal.guide ol { padding-left: 1.25em; }
.legal.guide li { margin-bottom: 0.5em; }
.legal ul.guide-related { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.legal ul.guide-related li { margin: 0; }
.legal ul.guide-related a {
  display: inline-block;
  padding: 0.5em 1em;
  border: 1px solid var(--border-on-light);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
}

/* ---------- Contact form ---------- */
.form-field {
  margin-bottom: 1.25rem;
}
.form-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4em;
}
.form-field input,
.form-field textarea {
  width: 100%;
  padding: 0.8em 1em;
  border: 1px solid var(--border-on-light);
  border-radius: 10px;
  font: inherit;
  background: #fff;
  color: var(--on-paper);
}
.form-field .hint {
  font-size: 0.85rem;
  color: var(--muted-on-light);
  margin-top: 0.3em;
}
.privacy-notice {
  font-size: 0.9rem;
  color: var(--muted-on-light);
  background: var(--card-bg);
  padding: 1rem 1.25rem;
  border-radius: 10px;
  margin: 1.5rem 0;
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--muted-on-dark);
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
  margin-top: clamp(55px, 8vw, 100px); /* room for the wave to rise over whatever came before */
}
/* Two-tone wave divider: a green wave, with a navy wave drawn slightly lower
   over it, so a green band stays visible along the crest. Both paths are
   transparent above the wave line, so the previous section's own background
   shows through the gaps, that's what makes it look like the footer is
   rising up rather than sitting in its own box. One smooth cubic arc per
   path (not two stitched segments), for a single continuous curve rather
   than a choppy double hump. The path data is a flat 0-90 viewBox stretched
   non-uniformly (preserveAspectRatio="none") to whatever height is set here,
   so resizing the wave is just this one clamp, no path edits needed. */
.footer-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  width: 100%;
  height: clamp(55px, 8vw, 100px);
  display: block;
}
/* stroke matches fill on each path: preserveAspectRatio="none" non-uniformly
   stretches this SVG, and at certain viewport widths / device pixel ratios
   that leaves a hairline of anti-aliasing between the two overlapping paths
   (or between a path and its own edge) showing the page background through
   as a thin line along the crest — inconsistent across devices, which is
   exactly why it only showed up on some screens/zoom levels and not others.
   A same-color stroke self-caulks that seam regardless of scale or DPR. */
.footer-wave .wave-accent { fill: var(--green); stroke: var(--green); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.footer-wave .wave-navy { fill: var(--navy); stroke: var(--navy); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.25rem;
  margin-bottom: 1rem;
}
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
}
.footer-grid h2 {
  color: var(--green);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.9em;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 0.65em; }
.footer-grid a { text-decoration: none; color: var(--muted-on-dark); font-size: 0.92rem; }
.footer-grid a:hover { color: var(--on-navy); }
/* "Goals" isn't wrapped in its own span like Obsy/Mint are, so it was
   inheriting the footer's muted body-text color instead of white. */
.footer-brand .brand { margin-bottom: 0.8rem; font-size: 1.3rem; color: var(--on-navy); }
.footer-brand .brand img { width: 48px; height: 48px; }
.footer-brand p { max-width: 33ch; font-size: 0.9rem; }
.footer-disclaimer {
  max-width: 36ch;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--muted-on-dark);
  margin-top: 0.9rem;
}
.footer-bottom {
  border-top: 1px solid var(--border-on-dark);
  margin-top: 2rem;
  padding-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  font-size: 0.82rem;
}

/* The landing page's footer is a deep forest green, not navy (see
   .page-landing .site-footer below), so its wave needs to match that instead. */
.page-landing .footer-wave .wave-accent { fill: #06C970; stroke: #06C970; stroke-width: 2px; vector-effect: non-scaling-stroke; }
.page-landing .footer-wave .wave-navy { fill: #0F3D2B; stroke: #0F3D2B; stroke-width: 2px; vector-effect: non-scaling-stroke; }

/* visually-hidden utility for screen-reader-only text */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Landing stage: glass over a grass-and-sky landscape.
   Scoped to .page-landing / .stage so other pages keep their look.
   Background is pure CSS (layered gradients + blur), no image files.
   ============================================================ */

.page-landing { background: #E9F4FB; }

.stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 30px;
  margin: clamp(0.5rem, 1.2vw, 1rem);
  min-height: min(94vh, 880px);
  display: flex;
  flex-direction: column;
  color: #0C2E22;
}

/* ---- the landscape scene (inline SVG, fills its container) ---- */
.stage-scene {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* ---- sky (legacy CSS layers, kept for reference) ---- */
.stage-sky {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(60% 34% at 50% 70%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 62%),
    radial-gradient(80% 55% at 74% 4%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg,
      #A6DCF3 0%,
      #C2E7F6 28%,
      #DBF1F6 50%,
      #EDF7F0 66%,
      #E9F4E4 100%);
}

/* ---- hills: soft ellipses, blur increases toward the foreground ---- */
.stage-hills { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.stage-hills i {
  position: absolute;
  display: block;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.hill-far {
  width: 150%; height: 20%;
  left: -38%; bottom: 30%;
  background: linear-gradient(180deg, #CFEAC4 0%, #A8D8A2 100%);
  filter: blur(7px);
  opacity: 0.7;
}
.hill-mid {
  width: 140%; height: 24%;
  left: 16%; bottom: 19%;
  background: linear-gradient(180deg, #A9DCA0 0%, #6EC081 100%);
  filter: blur(6px);
  opacity: 0.92;
}
.hill-near {
  width: 165%; height: 27%;
  left: -52%; bottom: 3%;
  background: linear-gradient(180deg, #7FCB8B 0%, #3F9D62 100%);
  filter: blur(5px);
}
/* soft light band along the ridge, the hazy sunlit look */
.stage-mist {
  position: absolute;
  left: 0; right: 0; bottom: 26%;
  height: 16%;
  z-index: -1;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.75) 45%, rgba(255,255,255,0.1) 100%);
  filter: blur(16px);
  pointer-events: none;
}
/* out-of-focus foreground grass, the shallow depth-of-field edge */
.stage-haze {
  position: absolute;
  left: -5%; right: -5%; bottom: -8%;
  height: 22%;
  z-index: -1;
  border-radius: 50% 50% 0 0 / 30% 30% 0 0;
  background: linear-gradient(180deg, rgba(78,168,104,0.55) 0%, rgba(47,136,80,0.9) 100%);
  filter: blur(26px);
  pointer-events: none;
}

/* ---- glass primitives ---- */
.glass {
  background: rgba(255,255,255,0.42);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 16px 46px -18px rgba(14,60,45,0.3), 0 1px 0 rgba(255,255,255,0.6) inset;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(255,255,255,0.62); }
}

/* ---- glass nav inside the stage ---- */
.stage-nav {
  position: relative;
  z-index: 5;
  margin: 0;
  border-radius: 0;
  /* Just enough vertical padding to keep the logo off the bar's edge — the
     logo itself, not extra padding, should drive most of the height. */
  padding: 0.5rem clamp(1.25rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.stage-nav .brand { color: #0C2E22; font-size: 1.6rem; flex-shrink: 0; }
.stage-nav .brand .brand-obsy { color: #0C2E22; }
.stage-nav .brand .brand-mint { color: #06C970; } /* the app's actual brand green, not the site's toned-down accent — logos get the real thing */
.stage-nav .main-nav a { color: #14503B; font-size: 1.25rem; }
.stage-nav .main-nav a:hover,
.stage-nav .main-nav a[aria-current="page"] { color: #0C2E22; border-bottom-color: #0F6B32; }
.stage-nav .nav-toggle { border-color: rgba(12,46,34,0.25); color: #0C2E22; }
.btn-glass {
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.75);
  color: #0C2E22;
  box-shadow: 0 8px 22px -12px rgba(14,60,45,0.5);
}
.btn-glass:hover { background: rgba(255,255,255,0.78); }

@media (max-width: 1300px) {
  .stage-nav .main-nav {
    inset: auto 0 auto 0;
    top: calc(100% + 8px);
    border-radius: 20px;
    background: rgba(255,255,255,0.88);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,0.7);
    padding: 0.75rem 1.25rem 1rem;
  }
  .stage-nav .main-nav a { color: #14503B; }
}

/* ---- stage content ---- */
.stage-content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(6rem, 11vw, 8.5rem) clamp(1.25rem, 4vw, 3.25rem) clamp(2rem, 4vw, 3rem);
}
.pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  border-radius: 999px;
  padding: 0.5em 1.1em;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #14503B;
  background: rgba(255,255,255,0.45);
  border: 1px solid rgba(255,255,255,0.7);
  margin-bottom: 1.25rem;
}
.stage h1 {
  font-size: clamp(2.7rem, 6.6vw, 5rem);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.02;
  color: #0C2E22;
  margin-bottom: 0.35em;
}
.stage h1 strong { font-weight: 600; color: #0B4A2C; }
.stage-lede {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: #1C4A3A;
  max-width: 40ch;
  margin-bottom: 1.75rem;
}
.stage-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
.stage-trust {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.86rem;
  color: #1C4A3A;
  font-weight: 500;
}
.stage-trust li { display: flex; align-items: center; gap: 0.45em; }
.stage-trust svg { color: #0F6B32; flex-shrink: 0; }

/* ---- floating app icon + glass preview cards ---- */
.stage-showcase { position: relative; display: flex; align-items: center; justify-content: center; min-height: 440px; }
.orb-tile {
  position: relative;
  z-index: 2;
  border-radius: 34px;
  padding: clamp(1rem, 1.8vw, 1.5rem);
  text-align: center;
}
.stage-orb {
  width: clamp(120px, 16vw, 168px);
  border-radius: 24%;
  margin: 0 auto;
  box-shadow: 0 22px 44px -18px rgba(10,60,40,0.55);
}
.orb-caption {
  margin: 0.9rem 0 0.2rem;
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: #0C2E22;
}
.orb-caption strong { font-weight: 700; color: #0F6B32; }
.stage-orb-glow {
  position: absolute;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.35) 45%, rgba(255,255,255,0) 72%);
  filter: blur(30px);
  opacity: 0.75;
  z-index: 1;
}
.glass-card {
  position: absolute;
  z-index: 3;
  border-radius: 20px;
  padding: 0.95rem 1.1rem;
  width: min(212px, 58%);
  color: #0C2E22;
}
.glass-card h3 { font-size: 0.88rem; font-weight: 600; margin-bottom: 0.6em; color: #14503B; }
.glass-card .metric { font-size: 1.5rem; font-weight: 600; line-height: 1; margin-bottom: 0.25em; }
.glass-card .metric-note { font-size: 0.76rem; color: #2A5B48; margin: 0; }
.card-top { top: -2%; right: -6%; }
.card-bottom { bottom: -2%; left: -14%; }
.bar-row { display: flex; align-items: flex-end; gap: 5px; height: 42px; margin-bottom: 0.6em; }
.bar-row span { flex: 1; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, #57C07C, #2F8850); opacity: 0.85; }

@media (max-width: 900px) {
  /* Single column below this width, but the text stays left-aligned, not
     centered: a centered multi-line paragraph is harder to scan and reads
     as an afterthought mobile layout rather than a deliberate one. Only the
     hero visual (icon + cards) is centered, as its own focal moment. */
  .stage-content { grid-template-columns: 1fr; }
  .stage-showcase { min-height: 0; flex-direction: column; gap: 1rem; margin-top: 2rem; }
  .glass-card { position: static; width: 100%; max-width: 320px; text-align: left; }
  .stage-orb-glow { display: none; }
}

/* ---- light sections below the stage ---- */
.page-landing .section-soft {
  background: linear-gradient(180deg, #E9F4FB 0%, #E5F3F5 100%);
  padding: clamp(3rem, 7vw, 5rem) 0;
}
.page-landing .soft-card {
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 22px;
  padding: 1.75rem;
  box-shadow: 0 14px 40px -22px rgba(20,80,59,0.45);
}
.page-landing .soft-card h3 { font-size: 1.1rem; color: #0C2E22; }
.page-landing .soft-card p,
.page-landing .soft-card li { color: #2A5B48; }
.page-landing .soft-card ul { margin: 0.5em 0 0; padding-left: 1.1em; }
.page-landing .soft-card li { margin-bottom: 0.35em; }
.page-landing .section-head h2 { color: #0C2E22; font-weight: 400; letter-spacing: -0.02em; }
.page-landing .section-head h2 strong { font-weight: 600; }
.page-landing .section-head p { color: #2A5B48; }
.icon-tile {
  width: 44px; height: 44px;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #6FD48C 0%, #2F8850 100%);
  color: #05301C;
  margin-bottom: 1rem;
  box-shadow: 0 10px 22px -10px rgba(20,120,70,0.7);
}
.icon-tile.sky { background: linear-gradient(135deg, #9BDDF7 0%, #3F9AD0 100%); color: #05283B; box-shadow: 0 10px 22px -10px rgba(40,120,170,0.7); }
/* Icon tile picks up a small pop of its own when its parent card lifts, so
   the icon reads as responsive rather than just along for the ride. */
.icon-tile { transition: transform 0.4s var(--ease); }
.js:not(.no-motion) .soft-card:hover .icon-tile { transform: scale(1.08) rotate(-4deg); }

/* ---- privacy strip ---- */
.page-landing .privacy-strip {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  margin: clamp(0.5rem, 1.2vw, 1rem);
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 5vw, 3rem);
  background: linear-gradient(160deg, #0F3D2B 0%, #12503A 55%, #0B3550 100%);
  color: #EAF7EF;
}
.page-landing .privacy-strip .section-head h2 { color: #FFFFFF; }
.page-landing .privacy-strip .section-head p { color: #BFE3CE; }
.page-landing .privacy-strip .trust-list svg { color: #7BE0A4; }
.page-landing .privacy-strip .trust-list li:nth-child(even) svg { color: #8FD7F5; }
.page-landing .privacy-strip .trust-list strong { color: #FFFFFF; }
.page-landing .privacy-strip .trust-list span.desc { color: #BFE3CE; }
.page-landing .privacy-strip .btn-glass {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.4);
  color: #FFFFFF;
}
.page-landing .privacy-strip .btn-glass:hover { background: rgba(255,255,255,0.26); }

/* ---- closing CTA over a soft landscape ---- */
.cta-scene {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  margin: clamp(0.5rem, 1.2vw, 1rem);
  padding: clamp(2.5rem, 7vw, 4.5rem) clamp(1.5rem, 5vw, 3rem);
  text-align: center;
  color: #0C2E22;
  isolation: isolate;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cta-scene h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 300; letter-spacing: -0.02em; }
.cta-scene h2 strong { font-weight: 600; }
.cta-scene p { color: #1C4A3A; max-width: 52ch; margin: 0 auto 1.75rem; }
.cta-scene .stage-actions { justify-content: center; }

/* ---- footer on the landing page ---- */
.page-landing .site-footer {
  background: linear-gradient(180deg, #0F3D2B 0%, #072A1E 100%);
  color: #BFE3CE;
}
.page-landing .site-footer .brand .brand-mint { color: #06C970; }
.page-landing .site-footer a:hover { color: #FFFFFF; }
.page-landing .footer-bottom { border-top-color: rgba(255,255,255,0.12); }

/* ============================================================
   Apple-ish polish + motion.
   Every animation is off when the visitor asks for reduced motion,
   and nothing is hidden unless JS is actually running (.js).
   ============================================================ */

:root {
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 { text-wrap: balance; }

/* ---- refined type scale ---- */
.stage h1 {
  font-size: clamp(2.9rem, 7.2vw, 5.6rem);
  letter-spacing: -0.038em;
  line-height: 0.98;
}
.stage-lede {
  font-size: clamp(1.05rem, 1.45vw, 1.22rem);
  line-height: 1.5;
  letter-spacing: -0.01em;
  max-width: 42ch;
}
.page-landing .section-head { max-width: 60ch; margin-bottom: 3rem; } /* was 40ch: too narrow for a 3.1rem heading, forced an ugly 4-line wrap */
.page-landing .section-head h2 {
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
}
.cta-scene h2 {
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  letter-spacing: -0.035em;
}
.page-landing .soft-card h3 { letter-spacing: -0.02em; font-size: 1.16rem; }

/* ---- softer, Apple-ish cards ---- */
.page-landing .soft-card {
  border: none;
  border-radius: 24px;
  box-shadow: 0 2px 4px rgba(20,80,59,0.04), 0 18px 44px -26px rgba(20,80,59,0.5);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.js:not(.no-motion) .page-landing .soft-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 4px 8px rgba(20,80,59,0.05), 0 28px 60px -28px rgba(20,80,59,0.55);
}

/* ---- buttons get a little life ---- */
.btn {
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
              background-color 0.35s var(--ease), filter 0.35s var(--ease);
}
.js:not(.no-motion) .btn:hover { transform: translateY(-2px); }
.js:not(.no-motion) .btn:active { transform: translateY(0) scale(0.985); }

/* ---- fixed, condensing nav ---- */
.stage-nav {
  /* Full-bleed bar, not a floating inset pill: the old version left visible
     gaps of hero background on either side, and when content scrolled
     underneath the fixed bar it could show through those gaps and look like
     it overlapped the nav. Touching both edges removes the gap entirely. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0;
  z-index: 60;
  transition: background-color 0.45s var(--ease-soft), box-shadow 0.45s var(--ease-soft),
              padding 0.45s var(--ease-soft);
}
.stage-nav.scrolled {
  background: rgba(255,255,255,0.74);
  box-shadow: 0 10px 34px -16px rgba(14,60,45,0.45);
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

/* ---- scroll reveals ---- */
.js:not(.no-motion) .reveal {
  opacity: 0;
  transform: translateY(30px);
}
.js:not(.no-motion) .reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity 0.95s var(--ease), transform 0.95s var(--ease);
  transition-delay: var(--d, 0s);
}

/* ---- hero entrance ---- */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes tileIn {
  from { opacity: 0; transform: translateY(30px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}
.js:not(.no-motion) .stage-intro > * {
  animation: riseIn 1s var(--ease) both;
}
.js:not(.no-motion) .stage-intro > *:nth-child(1) { animation-delay: 0.05s; }
.js:not(.no-motion) .stage-intro > *:nth-child(2) { animation-delay: 0.15s; }
.js:not(.no-motion) .stage-intro > *:nth-child(3) { animation-delay: 0.25s; }
.js:not(.no-motion) .stage-intro > *:nth-child(4) { animation-delay: 0.35s; }
.js:not(.no-motion) .stage-intro > *:nth-child(5) { animation-delay: 0.45s; }
.js:not(.no-motion) .orb-tile { animation: tileIn 1.1s var(--ease) 0.3s both; }
.js:not(.no-motion) .glass-card { animation: tileIn 1s var(--ease) both; }
.js:not(.no-motion) .card-top { animation-delay: 0.55s; }
.js:not(.no-motion) .card-bottom { animation-delay: 0.7s; }

/* ---- gentle floating, starts after the entrance finishes ---- */
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
.orb-float { position: relative; }
.js:not(.no-motion) .orb-float { animation: floaty 6.5s ease-in-out 1.4s infinite; }
.js:not(.no-motion) .card-top .glass-inner { animation: floaty 7.5s ease-in-out 1.8s infinite; }
.js:not(.no-motion) .card-bottom .glass-inner { animation: floaty 8.5s ease-in-out 2.1s infinite; }

/* ---- parallax layers ---- */
.js:not(.no-motion) .stage-scene,
.js:not(.no-motion) .stage-parallax { will-change: transform; }

/* ---- count-up keeps its space so nothing jumps ---- */
.glass-card .metric { font-variant-numeric: tabular-nums; }

/* ============================================================
   Liquid glass.
   Real refraction needs a shader, so this fakes the same cues:
   a bright specular rim that fades around the curve, an inner
   glow that reads as thickness, a contact shadow, and a shine
   that sweeps across on hover. Background-position drives the
   sweep (not transform) so nothing escapes the element and the
   nav's dropdown never gets clipped.
   ============================================================ */

/* Only the ones that are static by default need positioning for their rim.
   .glass users (.stage-nav, .orb-tile, .glass-card, the mobile panel) are all
   positioned already, and forcing relative here would undo that. */
.btn-glass,
.btn-primary,
.pill-badge {
  position: relative;
}
.glass,
.btn-glass,
.btn-primary,
.pill-badge {
  isolation: isolate;
}

/* refracting rim: brightest top-left, catches light again bottom-right.
   Removed from .btn-glass/.btn-primary (kept here only for .glass/.pill-badge,
   both currently unused) — the mask-composite: exclude technique that drew
   this ring left a visible bright sliver right at the semicircular cap on
   fully-rounded (999px) pill buttons: a real rendering seam at extreme
   curvature that a user caught on the "Download the App" button. The
   ::after specular sweep below still applies to buttons; only this static
   rim was pill-incompatible. */
.glass::before,
.pill-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(140deg,
    rgba(255,255,255,0.95) 0%,
    rgba(255,255,255,0.35) 28%,
    rgba(255,255,255,0.05) 52%,
    rgba(255,255,255,0.55) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}

/* specular sweep */
.glass::after,
.btn-glass::after,
.btn-primary::after,
.pill-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg,
    rgba(255,255,255,0) 34%,
    rgba(255,255,255,0.45) 47%,
    rgba(255,255,255,0) 61%);
  background-size: 260% 100%;
  background-position: 135% 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: background-position 1.1s var(--ease), opacity 0.4s var(--ease);
}
.js:not(.no-motion) .glass:hover::after,
.js:not(.no-motion) .btn-glass:hover::after,
.js:not(.no-motion) .btn-primary:hover::after,
.js:not(.no-motion) .btn-glass:focus-visible::after,
.js:not(.no-motion) .btn-primary:focus-visible::after {
  background-position: -35% 0;
  opacity: 1;
}

/* thickness: inner specular top edge, light bounce off the bottom */
.glass {
  background: rgba(255,255,255,0.34);
  -webkit-backdrop-filter: blur(20px) saturate(185%) brightness(1.06);
          backdrop-filter: blur(20px) saturate(185%) brightness(1.06);
  border: none;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.85),
    inset 0 -1px 2px rgba(255,255,255,0.45),
    inset 0 0 22px rgba(255,255,255,0.22),
    0 6px 14px -8px rgba(10,50,35,0.3),
    0 22px 48px -24px rgba(10,50,35,0.5);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(255,255,255,0.72); }
}

/* clear glass button */
.btn-glass {
  background: rgba(255,255,255,0.4);
  -webkit-backdrop-filter: blur(16px) saturate(180%) brightness(1.08);
          backdrop-filter: blur(16px) saturate(180%) brightness(1.08);
  border: none;
  color: #0C2E22;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.95),
    inset 0 -1px 2px rgba(255,255,255,0.5),
    inset 0 0 16px rgba(255,255,255,0.28),
    0 4px 10px -4px rgba(10,50,35,0.28),
    0 14px 30px -16px rgba(10,50,35,0.45);
}
.btn-glass:hover { background: rgba(255,255,255,0.55); }

/* tinted glass: keeps the brand green solid enough to stay the loudest thing
   on the page, but wears the same rim and highlights */
.btn-primary {
  background: #06C970;
  color: var(--on-green);
  border: none;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.6),
    inset 0 -2px 3px rgba(0,60,30,0.25),
    inset 0 0 18px rgba(255,255,255,0.18),
    0 6px 14px -6px rgba(12,110,66,0.5),
    0 18px 38px -18px rgba(12,110,66,0.6);
}
.btn-primary:hover { filter: brightness(1.05) saturate(1.05); }

/* press: the glass compresses and the rim flares */
.js:not(.no-motion) .btn-glass:active,
.js:not(.no-motion) .btn-primary:active {
  transform: translateY(0) scale(0.97);
}

/* badge reads as a thin sliver of glass */
.pill-badge {
  background: rgba(255,255,255,0.38);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
          backdrop-filter: blur(14px) saturate(170%);
  border: none;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.9),
    0 6px 16px -10px rgba(10,50,35,0.4);
}

/* ---- the menu bar ---- */
/* Solid, not glass — a flat opaque bar like a standard site header, matching
   the flat reference design instead of a translucent/blurred surface. */
.stage-nav {
  background: #FAFEFC;
  border-bottom: 1px solid rgba(12,46,34,0.08);
  box-shadow: none;
}
.stage-nav.scrolled {
  background: #FAFEFC;
  box-shadow: 0 4px 16px -8px rgba(10,50,35,0.2);
}

/* nav links get their own little glass pill on hover */
/* Flat text + underline instead of a glass pill: cleaner, closer to a
   standard site nav (color change + bottom rule for the current page). */
.stage-nav .main-nav a {
  border-radius: 0;
  padding: 0.4em 0.15em;
  margin: 0 0.55em;
  border-bottom: 2px solid transparent;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.stage-nav .main-nav a:hover {
  color: #0C2E22;
  border-bottom-color: rgba(6,201,112,0.45);
}
.stage-nav .main-nav a[aria-current="page"] {
  color: #06C970;
  border-bottom-color: #06C970;
  font-weight: 700;
}

/* mobile dropdown is a slab of the same material */
@media (max-width: 1300px) {
  /* Menus have to stay readable, so this one is much closer to opaque than the
     decorative glass elsewhere. Still frosted, just not see-through. */
  .stage-nav .main-nav {
    background: rgba(255,255,255,0.93);
    -webkit-backdrop-filter: blur(30px) saturate(190%);
            backdrop-filter: blur(30px) saturate(190%);
    border: none;
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,1),
      0 24px 50px -20px rgba(10,50,35,0.45);
  }
  /* Touch menu: hover isn't a real signal here (a finger can leave it stuck
     "hovering" the last-tapped row), and having it plus the current-page
     highlight on screen together read as two competing selections. Only the
     current page gets a resting highlight; other rows just get tap feedback. */
  .stage-nav .main-nav a {
    color: #0F4230;
    margin: 0;
    border-bottom: none;
    border-left: 3px solid transparent;
    padding-left: 0.6em;
  }
  .stage-nav .main-nav a:hover:not([aria-current="page"]) { background: transparent; }
  .stage-nav .main-nav a:active { background: rgba(6,201,112,0.14); }
  .stage-nav .main-nav a[aria-current="page"] {
    background: transparent;
    color: #06C970;
    font-weight: 700;
    border-left-color: #06C970;
  }
}

/* the toggle is a glass chip too */
.stage-nav .nav-toggle {
  border: none;
  border-radius: 999px;
  padding: 0.55em 0.95em;
  background: rgba(255,255,255,0.45);
  -webkit-backdrop-filter: blur(12px) saturate(170%);
          backdrop-filter: blur(12px) saturate(170%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.95),
    0 4px 12px -6px rgba(10,50,35,0.35);
  font-weight: 600;
  transition: background-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.stage-nav .nav-toggle:hover { background: rgba(255,255,255,0.62); }
.js:not(.no-motion) .stage-nav .nav-toggle:active { transform: scale(0.96); }

/* dark surfaces: same material, inverted so it stays legible */
.privacy-strip .btn-glass {
  background: rgba(255,255,255,0.14);
  color: #FFFFFF;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.5),
    inset 0 -1px 2px rgba(255,255,255,0.15),
    0 10px 26px -14px rgba(0,0,0,0.5);
}
.privacy-strip .btn-glass:hover { background: rgba(255,255,255,0.26); }

/* ============================================================
   Phone frame: wraps a real app screenshot in a CSS-drawn device
   bezel (notch, rounded corners, home indicator). No image asset
   needed, so it works at any size without a raster mockup file.
   Usage: <div class="phone-frame"><img src="..." alt="..."></div>
   ============================================================ */
.phone-frame {
  position: relative;
  width: clamp(220px, 24vw, 280px);
  /* Height is NOT forced here — it falls out of the screen's own
     aspect-ratio below plus this padding, so the two can never disagree
     and the screenshot never needs to be cropped to fit. */
  background: #0A0A18;
  border-radius: 15% / 6%;
  /* Asymmetric bezel on purpose: these screenshots are full-bleed app
     captures with no reserved space for a notch or home indicator, so
     those live in a real top/bottom bezel strip instead of floating over
     the screenshot, where they'd otherwise cover real UI (a tab bar, a
     bottom nav label). The screen area itself stays untouched. */
  padding: 7% 3% 5%;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 40px 80px -28px rgba(10,20,40,0.5),
    0 10px 24px -12px rgba(10,20,40,0.35);
}
.phone-frame .screen {
  position: relative;
  width: 100%;
  aspect-ratio: 1080 / 2266; /* the real screenshots' own resolution */
  border-radius: 6% / 2.8%;
  overflow: hidden;
  background: #fff;
}
.phone-frame .screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.phone-frame::before {
  /* speaker/camera pill, sitting in the top bezel strip, above the screen */
  content: "";
  position: absolute;
  top: 2.4%;
  left: 50%;
  transform: translateX(-50%);
  width: 26%;
  height: 1.8%;
  background: #000;
  border-radius: 999px;
}
.phone-frame::after {
  /* home indicator, sitting in the bottom bezel strip, below the screen */
  content: "";
  position: absolute;
  bottom: 1.8%;
  left: 50%;
  transform: translateX(-50%);
  width: 26%;
  height: 3px;
  background: rgba(255,255,255,0.35);
  border-radius: 999px;
}
.phone-frame.dark-bezel { background: #1a1a1a; }

/* Sizes for specific contexts */
.phone-frame.size-lg { width: clamp(250px, 28vw, 320px); }
.phone-frame.size-sm { width: clamp(150px, 15vw, 190px); }

/* ---------- Real app screenshots (Features / How It Works) ---------- */
.screens-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.screens-row figure { margin: 0; text-align: center; }
.screens-row figcaption {
  margin-top: 1.1rem;
  font-weight: 600;
  color: var(--on-paper);
}

/* ---------- Phone-frame screenshot carousel (hero) ---------- */
/* Multiple screenshots stacked in the same .screen; JS toggles .is-active
   to crossfade between them. Falls back gracefully with no JS/motion: the
   first image (the one marked is-active in the HTML) just stays put. */
.phone-frame .screen img.carousel-slide {
  opacity: 0;
  transition: opacity 0.9s var(--ease, ease);
}
.phone-frame .screen img.carousel-slide.is-active {
  opacity: 1;
  position: relative; /* stacks above the others while visible */
  z-index: 1;
}

/* ============================================================
   Inner-page banner: a shorter .stage for every page that isn't
   the homepage — same glass nav + sky/mountain scene, just a
   compact single-column title block instead of the full hero.
   ============================================================ */
.stage.stage-mini { min-height: clamp(300px, 38vw, 420px); }
.stage-mini .stage-content {
  grid-template-columns: 1fr;
  text-align: center;
  padding: clamp(7rem, 13vw, 9.5rem) clamp(1.25rem, 4vw, 3.25rem) clamp(2.5rem, 5vw, 3.5rem);
}
.stage-mini h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.1rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  color: #0C2E22;
  margin-bottom: 0.4em;
}
.stage-mini .stage-lede {
  max-width: 60ch;
  margin: 0 auto;
}

/* Legal pages (Privacy, Terms, Cookies, Contact): the long-form text sits in
   a soft card on the landing page's light background, same material as the
   feature cards, so it doesn't look like a leftover from the old theme. */
.page-landing .legal { padding-top: clamp(2.5rem, 6vw, 4rem); }
.page-landing .legal .wrap {
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 28px;
  box-shadow: 0 20px 50px -28px rgba(20,80,59,0.4);
  padding: clamp(2rem, 5vw, 3.5rem);
}
.page-landing .legal .toc,
.page-landing .privacy-notice,
.page-landing .form-field input,
.page-landing .form-field textarea {
  background: rgba(255,255,255,0.9);
}

/* How It Works steps, on the landing theme: same soft-card material as the
   feature cards elsewhere, instead of the old bordered box. */
.page-landing .step {
  border: none;
  border-radius: 22px;
  box-shadow: 0 14px 40px -24px rgba(20,80,59,0.4);
}

/* ==========================================================================
   Homepage-only redesign preview: flat split-screen hero, inspired by a
   reference "Nature Landing Page" template (plain nav, white left column,
   full-bleed color on the right with an organic wave boundary, single pill
   CTA). Scoped entirely under .split-nav / .split-hero so none of it touches
   the .stage-nav / .stage styling the other 7 pages still use — this is a
   preview on index.html only, not yet rolled out site-wide.
   ========================================================================== */

.split-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: #FFFFFF;
  border-bottom: 1px solid rgba(12,46,34,0.08);
  padding: 0.85rem clamp(1.25rem, 4vw, 3rem);
}
.split-brand {
  display: flex;
  align-items: center;
  gap: 0.6em;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.15rem;
  color: #0C2E22;
  flex-shrink: 0;
}
.split-brand img { height: 40px; width: 40px; border-radius: 50%; }
.split-nav .split-links { flex: 1; display: flex; justify-content: center; }
.split-nav .split-links ul {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.split-nav .split-links a {
  color: #45584F;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 0.3em 0.1em;
  border-bottom: 2px solid transparent;
}
.split-nav .split-links a:hover { color: #0C2E22; }
.split-nav .split-links a[aria-current="page"] {
  color: #0C2E22;
  border-bottom-color: #06C970;
}
.split-nav .split-links li.mobile-only { display: none; }
.split-nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(12,46,34,0.2);
  color: #0C2E22;
  border-radius: 8px;
  padding: 0.5em 0.7em;
  font-size: 0.95rem;
}
@media (max-width: 900px) {
  .split-nav-toggle { display: inline-flex; align-items: center; gap: 0.4em; }
  .split-nav .split-links {
    display: none;
    position: absolute;
    inset: 100% 0 auto 0;
    background: #FFFFFF;
    border-bottom: 1px solid rgba(12,46,34,0.08);
    box-shadow: 0 16px 32px -20px rgba(10,50,35,0.25);
    padding: 0.5rem clamp(1.25rem, 4vw, 2.5rem) 1rem;
  }
  .split-nav .split-links.open { display: block; }
  .split-nav .split-links ul { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
  .split-nav .split-links a { display: block; padding: 0.6em 0.1em; }
  .split-nav .split-links li.mobile-only { display: block; }
}

.split-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: clamp(480px, 66vh, 720px);
  background: #FFFFFF;
}
.split-hero-left {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 6vw, 4rem) clamp(1.5rem, 5vw, 4.5rem);
}
.split-kicker {
  color: #0F6B32;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.9em;
}
.split-hero-left h1 {
  font-size: clamp(2.2rem, 4.2vw, 3.3rem);
  font-weight: 700;
  line-height: 1.1;
  color: #101828;
  margin-bottom: 0.45em;
}
.split-lede {
  color: #5B6B65;
  font-size: clamp(0.98rem, 1.3vw, 1.08rem);
  max-width: 42ch;
  margin-bottom: 1.75rem;
}
.split-cta { align-self: flex-start; }

.split-hero-right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.split-wave {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.split-phone-wrap {
  position: relative;
  z-index: 2;
  padding: clamp(1.5rem, 4vw, 3rem);
}
.split-illustration {
  position: relative;
  z-index: 2;
  width: min(78%, 480px);
  aspect-ratio: 700 / 900;
  height: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 20px 40px rgba(6,50,30,0.25));
}

@media (max-width: 900px) {
  .split-hero { grid-template-columns: 1fr; min-height: 0; }
  .split-hero-left { padding-bottom: 1rem; text-align: left; }
  .split-hero-right { min-height: 420px; }
}

/* ==========================================================================
   Homepage hero, take two: a single bordered rounded "scene card" with the
   nav floating directly on an illustrated gradient landscape (mountain, lake
   reflection, a walking figure, birds), centered heading + pill CTA, and a
   location-style caption bottom-left — inspired by a travel-site reference.
   This REPLACES the split-hero above; that CSS is left in place (unused) in
   case of a revert, rather than deleted mid-iteration. Scoped under
   .scene-* so it can't collide with .stage-nav on the other 7 pages.
   ========================================================================== */
.scene-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: clamp(0.75rem, 2vw, 1.5rem);
  border-radius: 28px;
  border: 1.5px solid rgba(7,31,20,0.18);
  min-height: clamp(560px, 82vh, 820px);
  display: flex;
  flex-direction: column;
}
.scene-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.scene-nav {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1.25rem, 4vw, 2.5rem);
}
.scene-brand {
  display: flex;
  align-items: center;
  gap: 0.5em;
  text-decoration: none;
  color: #FFFFFF;
  font-weight: 800;
  font-size: 1.05rem;
  flex-shrink: 0;
}
.scene-brand img { height: 34px; width: 34px; border-radius: 50%; }
.scene-nav .scene-links { flex: 1; display: flex; justify-content: center; }
.scene-nav .scene-links ul {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.scene-nav .scene-links a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
}
.scene-nav .scene-links a:hover,
.scene-nav .scene-links a[aria-current="page"] { color: #FFFFFF; }
.scene-nav .scene-links li.mobile-only { display: none; }
.scene-signin {
  flex-shrink: 0;
  background: #FFFFFF;
  color: #0B4A30;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.55em 1.3em;
  border-radius: 999px;
  text-decoration: none;
}
.scene-nav-toggle {
  display: none;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.45);
  color: #FFFFFF;
  border-radius: 8px;
  padding: 0.5em 0.7em;
  font-size: 0.95rem;
}

.scene-content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1.5rem 6rem;
}
.scene-content h1 {
  color: #FFFFFF;
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.08;
  margin: 0 0 1.6rem;
  text-shadow: 0 4px 24px rgba(0,30,15,0.3);
}
.scene-explore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  color: #0B4A30;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.9em 2.1em;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 14px 34px -12px rgba(0,0,0,0.4);
}

.scene-caption {
  position: absolute;
  z-index: 2;
  left: clamp(1.25rem, 4vw, 2.5rem);
  bottom: clamp(1.25rem, 4vw, 2rem);
  color: #FFFFFF;
}
.scene-caption strong { display: block; font-size: 1.05rem; font-weight: 700; }
.scene-caption span { display: block; font-size: 0.85rem; color: rgba(255,255,255,0.75); }

@media (max-width: 1300px) {
  .scene-nav-toggle { display: inline-flex; align-items: center; gap: 0.4em; }
  .scene-nav .scene-links {
    display: none;
    position: absolute;
    inset: 100% 1rem auto auto;
    right: clamp(1rem, 3vw, 1.5rem);
    background: #0B4A30;
    border-radius: 16px;
    padding: 0.75rem 1.25rem 1rem;
    box-shadow: 0 20px 40px -20px rgba(0,0,0,0.5);
    min-width: 200px;
  }
  .scene-nav .scene-links.open { display: block; }
  .scene-nav .scene-links ul { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .scene-nav .scene-links a { display: block; padding: 0.3em 0.1em; }
  .scene-nav .scene-links li.mobile-only { display: block; }
  .scene-signin.desktop-only { display: none; }
}
@media (max-width: 640px) {
  .scene-card { min-height: 640px; }
  .scene-content { padding-bottom: 4rem; }
}

/* ==========================================================================
   Homepage hero, take three: a supplied illustration (hiker on a green
   mountain trail) with a plain flat nav above it, not overlaid. The image
   was drawn with a built-in negative-space "pocket" top-left — text is
   positioned to sit inside that pocket rather than on top of busy artwork.
   The .scene-* CSS above is left in place (unused) from the previous
   iteration; not deleted mid-experiment in case of a revert.
   ========================================================================== */
.photo-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: #FFFFFF;
  border-bottom: 1px solid rgba(12,46,34,0.08);
  /* Vertical padding trimmed to offset the bigger 48px logo (was 36px) — the
     bar's own height is unset, driven by its tallest child plus this
     padding, so growing the logo without this would grow the whole bar too. */
  padding: 0.475rem clamp(1.25rem, 4vw, 3rem);
}
.photo-brand {
  display: flex;
  align-items: center;
  gap: 0.55em;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.1rem;
  color: #0C2E22;
  flex-shrink: 0;
}
.photo-brand img { height: 48px; width: 48px; border-radius: 50%; }
.photo-brand .brand-obsy { color: #0C2E22; }
.photo-brand .brand-mint { color: #06C970; } /* the app's real brand green, same as the footer wordmark */
.photo-nav .photo-links { flex: 1; display: flex; justify-content: center; }
.photo-nav .photo-links ul {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.photo-nav .photo-links a {
  color: #45584F;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 0.3em 0.1em;
  border-bottom: 2px solid transparent;
}
.photo-nav .photo-links a:hover { color: #0C2E22; }
.photo-nav .photo-links a[aria-current="page"] { color: #0C2E22; border-bottom-color: #06C970; }
.photo-nav .photo-links li.mobile-only { display: none; }
.photo-nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(12,46,34,0.2);
  color: #0C2E22;
  border-radius: 8px;
  padding: 0.5em 0.7em;
  font-size: 0.95rem;
}
.photo-nav-cta { padding: 0.6em 1.4em; font-size: 0.92rem; }

/* Inner-page banner. The homepage hero is a full illustration; the other
   pages get this flat header instead, using the same type tokens so the
   two read as one system. Replaces the old SVG landscape banner. */
.page-header {
  background: linear-gradient(180deg, #E9F4FB 0%, #E5F3F5 100%);
  padding: clamp(2.75rem, 6vw, 4.5rem) 0 clamp(2.25rem, 4.5vw, 3.25rem);
  text-align: center;
}
.page-header-eyebrow {
  color: #0F6B32;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.8em;
}
.page-header h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.12;
  color: #101828;
  margin-bottom: 0.4em;
}
.page-header-lede {
  color: #5B6B65;
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  max-width: 58ch;
  margin: 0 auto;
}
.page-header-actions { margin: 1.75rem 0 0; }
/* How It Works hero: full-bleed like the homepage's .photo-hero, with the
   copy overlaid on the open sky at top-left instead of a separate text
   block above a boxed-in card. */
.how-it-works-hero .photo-hero-content { top: 8%; width: 38%; }

/* Features page only: the summit illustration sits behind the page header as
   a faint backdrop. It's drawn on a pseudo-element rather than as a
   background on .page-header itself so the opacity applies to the artwork
   alone and never washes out the heading text sitting on top of it. The
   mask fades it out toward the bottom so it dissolves into the page. */
/* The backdrop lives on a wrapper around BOTH the header and the first card
   row, not on .page-header alone — confined to the header it only covered a
   ~250px band; the user wanted it to keep going down alongside the feature
   cards. .page-header's own solid gradient background would otherwise paint
   over the backdrop (normal-flow content paints after a negative z-index
   pseudo-element in the same stacking context), so that gradient moves up
   to the wrapper too and .page-header itself goes transparent. */
.page-features .page-hero-wrap {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #E9F4FB 0%, #E5F3F5 100%);
  /* The backdrop's climber/flag/mountain composition was tuned for a tall
     box — originally the header plus a cards row that lived in this same
     wrap. Now that the carousel is its own section outside the wrap, the
     wrap shrank to just the header's natural height (~250px), which left
     almost the entire backdrop clipped off by overflow:hidden. Restoring
     that height here (independent of content) gives the backdrop the room
     it needs without pulling unrelated sections back into this wrapper. */
  min-height: min(560px, 44vw);
}
.page-features .page-header { background: transparent; }
.page-features .page-hero-wrap::after {
  content: "";
  position: absolute;
  /* inset:0 now safely matches the wrap's own min-height above (no longer a
     variable, content-dependent box), so the backdrop just fills it exactly
     — reusing the original, gap-tested position/zoom (140% zoom, 0% 28%
     position keeps the climber, flag and mountain peak all inside frame;
     0-100% position is always gap-safe at that zoom, by construction). */
  inset: 0;
  z-index: -1;
  background: url("../img/flag-hero-original.webp") 0% 28% / 140% no-repeat;
  opacity: 0.44;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 75%, rgba(0,0,0,0.2) 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 75%, rgba(0,0,0,0.2) 100%);
  pointer-events: none;
}
.page-features .page-hero-wrap > .page-header > .wrap { position: relative; z-index: 1; }
@media (prefers-reduced-transparency: reduce) {
  .page-features .page-hero-wrap::after { opacity: 0.2; }
}

/* Inner-page sections, aligned to the homepage's soft palette. The alternating
   band used the old lavender --card-bg, which read as a different theme when
   placed next to the homepage's blue-to-mint sections. */
.page-landing .section-alt {
  background: linear-gradient(180deg, #E9F4FB 0%, #E5F3F5 100%);
}
.page-landing .cta-band {
  background: #FFFFFF;
  border: 1px solid rgba(12,46,34,0.08);
  border-radius: 22px;
  box-shadow: 0 14px 40px -24px rgba(20,80,59,0.4);
  padding: clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.page-landing .cta-band h2 { color: #0C2E22; }
.page-landing .cta-band p { color: #2A5B48; max-width: 56ch; margin-inline: auto; }
.page-landing .cta-band .hero-actions { justify-content: center; margin-bottom: 0; }

.photo-hero {
  position: relative;
}
.photo-hero-img {
  display: block;
  width: 100%;
  height: auto;
}
.photo-hero-content {
  position: absolute;
  z-index: 2;
  left: 5%;
  top: 12%;
  width: 34%;
}
.photo-kicker {
  color: #0F6B32;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.9em;
}
.photo-hero-content h1 {
  font-size: clamp(1.7rem, 3vw, 2.7rem);
  font-weight: 700;
  line-height: 1.1;
  color: #101828;
  margin-bottom: 0.5em;
}
.photo-lede {
  color: #5B6B65;
  font-size: clamp(0.9rem, 1vw, 1rem);
  margin-bottom: 1.5rem;
}
.hero-pricing-note { margin: 0.85rem 0 0; font-size: 0.85rem; color: #5B6B65; }

@media (max-width: 1300px) {
  .photo-nav-toggle { display: inline-flex; align-items: center; gap: 0.4em; }
  .photo-nav .photo-links {
    display: none;
    position: absolute;
    inset: 100% 0 auto 0;
    background: #FFFFFF;
    border-bottom: 1px solid rgba(12,46,34,0.08);
    box-shadow: 0 16px 32px -20px rgba(10,50,35,0.25);
    padding: 0.5rem clamp(1.25rem, 4vw, 2.5rem) 1rem;
  }
  .photo-nav .photo-links.open { display: block; }
  .photo-nav .photo-links ul { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
  .photo-nav .photo-links a { display: block; padding: 0.6em 0.1em; }
  .photo-nav .photo-links li.mobile-only { display: block; }
  .photo-nav-cta.desktop-only { display: none; }
}

@media (max-width: 820px) {
  /* The negative-space "pocket" in the artwork is a specific fixed shape —
     it doesn't scale down to a usable text column on narrow screens, so
     below this width the text drops out of overlay and stacks under the
     image in plain flow instead of trying to force-fit it. */
  .photo-hero-content {
    position: static;
    width: auto;
    padding: 2rem clamp(1.25rem, 5vw, 2rem) 0.5rem;
  }
  /* .how-it-works-hero .photo-hero-content (2 classes, same specificity as
     this override) won a tie against this rule on at least one real
     browser despite appearing earlier in the file -- source-order alone
     wasn't reliably breaking the tie. Adding the body class makes this
     unambiguously more specific (3 classes vs 2) instead of depending on
     that tie-break. */
  .page-how-it-works .how-it-works-hero .photo-hero-content {
    width: auto;
    top: auto;
  }
}