/* ===================================================================
   Shea v3 editorial — shea.one
   Mobile-first. Warm cream + terracotta + honey. DM Sans (variable).
   =================================================================== */

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

/* -------------------------------------------------------------------
   Design tokens
   ------------------------------------------------------------------- */
:root {
  /* Surfaces — V2 Bloom: warm cream body, white + warm-cream cards */
  --cream:           #FFFBF5;
  --cream-warm:      #FFF4E6;
  --cream-soft:      #FBE8D2;
  --cream-deep:      #F3DCC4;
  --pearl:           #FFFFFF;
  --ivory:           #FFEFE0;

  /* Ink — warm-brown ramp */
  --ink:             #2E1A0E;
  --ink-soft:        #5C4332;
  --ink-muted:       #9C7F65;
  --ink-mute2:       #C9B197;
  --ink-quiet:       #C9B197;

  /* Terracotta — brand primary */
  --terra:           #E07B5C;
  --terra-deep:      #C8624A;
  --terra-glow:      rgba(224, 123, 92, 0.40);
  --terra-rim:       rgba(224, 123, 92, 0.20);
  --terra-rim-strong:rgba(224, 123, 92, 0.42);

  /* Honey — warmth / wash-day accent (was "gold") */
  --gold-pale:       #FCE4C2;
  --gold-rich:       #F2B265;
  --gold-amber:      #F2B265;
  --gold-rim:        rgba(252, 228, 194, 0.55);

  /* Sage + rose — supporting V2 accents */
  --sage:            #8FB89A;
  --sage-soft:       #D7E8DC;
  --rose:            #F5BFB0;

  /* Warm dark — the app's ink tone, for the one rich CTA moment */
  --coffee-1:        #2E1A0E;
  --coffee-2:        #1E1009;
  --coffee-3:        #3A2114;
  --coffee-warm:     #43251A;
  --coffee-ink:      #6B4836;

  /* Shadow + glass */
  --shadow-soft:     0 4px 14px rgba(46, 26, 14, 0.08);
  --shadow-md:       0 10px 28px rgba(46, 26, 14, 0.10);
  --shadow-lg:       0 24px 60px rgba(46, 26, 14, 0.14);
  --shadow-card:     0 12px 32px rgba(46, 26, 14, 0.10);
  --shadow-cta:      0 10px 28px rgba(224, 123, 92, 0.42), 0 22px 48px rgba(46, 26, 14, 0.18);
  --glass-cream:     rgba(255, 248, 238, 0.65);
  --glass-cream-strong: rgba(255, 248, 238, 0.85);
  --glass-white:     rgba(255, 255, 255, 0.55);
  --glass-rim:       rgba(255, 255, 255, 0.70);

  /* Radii */
  --r-xs:            10px;
  --r-sm:            14px;
  --r-md:            18px;
  --r-lg:            24px;
  --r-xl:            32px;
  --r-pill:          999px;

  /* Spacing — fluid */
  --space-xxs:       8px;
  --space-xs:        12px;
  --space-sm:        18px;
  --space-md:        clamp(22px, 3.5vw, 32px);
  --space-lg:        clamp(34px, 5vw, 56px);
  --space-xl:        clamp(56px, 8vw, 96px);
  --space-2xl:       clamp(72px, 11vw, 130px);

  /* Type */
  --serif:           'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sans:            'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-caps:          clamp(10.5px, 1.1vw, 11.5px);
  --t-micro:         clamp(11.5px, 1.2vw, 12.5px);
  --t-small:         clamp(13px, 1.4vw, 14px);
  --t-body:          clamp(15px, 1.6vw, 16.5px);
  --t-lead:          clamp(16.5px, 1.9vw, 19px);
  --t-h3:            clamp(20px, 2.4vw, 24px);
  --t-h2:            clamp(28px, 4.5vw, 44px);
  --t-h1:            clamp(38px, 7.5vw, 72px);
  --t-display:       clamp(46px, 9vw, 96px);

  /* Layout */
  --shell-max:       1180px;
  --shell-pad:       clamp(20px, 5vw, 40px);

  /* Motion */
  --ease:            cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
}

/* -------------------------------------------------------------------
   V2 global overrides (Bloom). DM Sans is upright everywhere — the old
   editorial direction leaned on Fraunces italics, which V2 doesn't use.
   !important so this wins over the per-component italic declarations
   without having to touch each one. Weight still comes from each rule's
   font-variation-settings "wght" axis (DM Sans is loaded variable).
   ------------------------------------------------------------------- */
.display, .display em,
.headline, .headline em,
.lead,
.section-head .lead,
.pill-stat strong, .pill-stat strong em,
.ritual-card h3, .ritual-card h3 em,
.app-headline, .app-headline em, .app-lead,
.app-feature h3, .app-feature h3 em,
.app-faq h2, .app-faq h2 em, .app-faq-q,
.app-second-cta h2, .app-second-cta p,
.join-card h1, .join-card h1 em, .join-card .lead,
.legal-hero h1, .legal-hero h1 em, .legal-hero p,
h1, h2, h3, h4 {
  font-style: normal !important;
}

/* -------------------------------------------------------------------
   Base
   ------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--sans);
  font-size: var(--t-body);
  color: var(--ink);
  line-height: 1.55;
  background: var(--cream-warm);
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "ss02", "kern", "liga";
  overflow-x: hidden;
}

/* -------------------------------------------------------------------
   Liquid-glass background — sits behind every page.
   Five soft, blurred, drifting blobs in sage / gold / peach / pink /
   terra. GPU-only transforms + filter blur. Honors reduced-motion.
   ------------------------------------------------------------------- */
.liquid-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  /* Faintest cream-to-cream wash underneath the blobs so the canvas
     isn't ever totally flat between blob centers. */
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 252, 244, 0.85), transparent 55%),
    var(--cream-warm);
}
.liquid-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
  mix-blend-mode: normal;
  opacity: 0.85;
}
/* Blob 1 — large peach-cream, top-left */
.liquid-blob.b1 {
  top: -8%; left: -10%;
  width: 46vw; height: 46vw;
  min-width: 320px; min-height: 320px;
  background: radial-gradient(circle at 35% 35%, rgba(244, 201, 165, 0.85), rgba(244, 201, 165, 0) 70%);
  animation: liquid-float-1 22s ease-in-out infinite;
}
/* Blob 2 — gold-pale, top-right */
.liquid-blob.b2 {
  top: -6%; right: -12%;
  width: 50vw; height: 50vw;
  min-width: 340px; min-height: 340px;
  background: radial-gradient(circle at 60% 40%, rgba(232, 199, 127, 0.78), rgba(232, 199, 127, 0) 70%);
  animation: liquid-float-2 28s ease-in-out infinite;
}
/* Blob 3 — warm pink, mid-left */
.liquid-blob.b3 {
  top: 36%; left: -14%;
  width: 42vw; height: 42vw;
  min-width: 280px; min-height: 280px;
  background: radial-gradient(circle at 50% 50%, rgba(240, 188, 172, 0.72), rgba(240, 188, 172, 0) 70%);
  animation: liquid-float-3 25s ease-in-out infinite;
}
/* Blob 4 — soft sage, bottom-right */
.liquid-blob.b4 {
  bottom: -10%; right: -8%;
  width: 48vw; height: 48vw;
  min-width: 320px; min-height: 320px;
  background: radial-gradient(circle at 40% 60%, rgba(181, 197, 160, 0.65), rgba(181, 197, 160, 0) 70%);
  animation: liquid-float-4 30s ease-in-out infinite;
}
/* Blob 5 — terra accent, lower-mid */
.liquid-blob.b5 {
  bottom: 12%; left: 38%;
  width: 38vw; height: 38vw;
  min-width: 260px; min-height: 260px;
  background: radial-gradient(circle at 50% 50%, rgba(224, 123, 92, 0.42), rgba(224, 123, 92, 0) 70%);
  animation: liquid-float-5 19s ease-in-out infinite;
}

@keyframes liquid-float-1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(70px, 50px, 0) scale(1.10); }
  66%      { transform: translate3d(40px, 110px, 0) scale(0.94); }
}
@keyframes liquid-float-2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  40%      { transform: translate3d(-90px, 70px, 0) scale(1.14); }
  75%      { transform: translate3d(-40px, 30px, 0) scale(0.96); }
}
@keyframes liquid-float-3 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  35%      { transform: translate3d(80px, -60px, 0) scale(1.08); }
  70%      { transform: translate3d(-30px, 40px, 0) scale(1.15); }
}
@keyframes liquid-float-4 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-60px, -90px, 0) scale(1.12); }
}
@keyframes liquid-float-5 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(40px, -50px, 0) scale(1.22); }
}

/* Reduced motion — freeze everything but keep the layered glow. */
@media (prefers-reduced-motion: reduce) {
  .liquid-blob,
  .btn-gold,
  .btn-gold::before,
  .section-dark::before,
  .section-dark::after { animation: none !important; }
}

a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; background: transparent; border: 0; color: inherit; }
ul, ol { list-style: none; }

::selection { background: var(--gold-pale); color: var(--ink); }

/* Focus ring — accessible without being ugly */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 3px;
  border-radius: 6px;
}

/* -------------------------------------------------------------------
   Type primitives
   ------------------------------------------------------------------- */
.caps {
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--t-caps);
  letter-spacing: 0.22em;
  color: var(--terra);
  text-transform: uppercase;
  margin: 0;
}
.caps-rule {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--terra);
}
.caps-rule::before {
  content: "";
  display: block;
  width: 22px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--terra));
}

.display {
  font-family: var(--serif);
  font-size: var(--t-h1);
  font-weight: 500;
  font-variation-settings: "opsz" 96, "SOFT" 80, "wght" 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0;
}
.display em {
  font-style: italic;
  color: var(--terra-deep);
  font-variation-settings: "opsz" 96, "SOFT" 80, "wght" 500;
}

.headline {
  font-family: var(--serif);
  font-size: var(--t-h2);
  font-weight: 500;
  font-variation-settings: "opsz" 72, "SOFT" 80, "wght" 500;
  letter-spacing: -0.018em;
  line-height: 1.08;
  color: var(--ink);
  margin: 0;
}
.headline em {
  font-style: italic;
  color: var(--terra-deep);
}

.lead {
  font-family: var(--serif);
  font-size: var(--t-lead);
  font-weight: 400;
  font-variation-settings: "opsz" 36, "SOFT" 80, "wght" 400;
  font-style: italic;
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0;
}

.eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-small);
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

/* In dark sections, headlines and leads flip to cream */
.section-dark .display,
.section-dark .headline { color: var(--cream); }
.section-dark .display em,
.section-dark .headline em { color: var(--gold-pale); }
.section-dark .lead { color: rgba(255, 245, 230, 0.78); }
.section-dark .caps { color: var(--gold-pale); }
.section-dark .caps-rule::before {
  background: linear-gradient(to right, transparent, var(--gold-pale));
}

/* -------------------------------------------------------------------
   Layout primitives
   ------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
  padding-left: var(--shell-pad);
  padding-right: var(--shell-pad);
}

.section {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  position: relative;
}
.section--tight { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }

/* Cream scaffold is the default page bg.
   The dark coffee section paints its own gradient over a 100% wide band. */
.section-dark {
  position: relative;
  color: var(--cream);
  background:
    linear-gradient(140deg, var(--coffee-1), var(--coffee-2) 50%, var(--coffee-3));
  overflow: hidden;
}
.section-dark::before,
.section-dark::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  will-change: transform;
}
.section-dark::before {
  width: 360px; height: 360px;
  top: -90px; left: -110px;
  background: radial-gradient(circle, rgba(232, 199, 127, 0.55), rgba(232, 199, 127, 0) 70%);
  animation: liquid-float-1 24s ease-in-out infinite;
}
.section-dark::after {
  width: 440px; height: 440px;
  bottom: -130px; right: -100px;
  background: radial-gradient(circle, rgba(240, 188, 172, 0.60), rgba(240, 188, 172, 0) 70%);
  animation: liquid-float-4 28s ease-in-out infinite;
}

/* -------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------- */
.btn-primary,
.btn-secondary,
.btn-gold,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 26px;
  border-radius: var(--r-md);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.012em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease);
  min-height: 54px;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

/* Deep terra solid — for CREAM surfaces */
.btn-primary {
  color: var(--cream);
  background:
    linear-gradient(160deg, #E07B5C 0%, #C8624A 100%);
  box-shadow: var(--shadow-cta);
}
.btn-primary::after {
  content: "";
  position: absolute;
  top: 1px; left: 14px; right: 14px;
  height: 1px;
  background: linear-gradient(to right, rgba(255, 224, 196, 0), rgba(255, 224, 196, 0.55), rgba(255, 224, 196, 0));
  border-radius: 1px;
  pointer-events: none;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(224, 123, 92, 0.50), 0 26px 56px rgba(40, 18, 8, 0.22); }
.btn-primary:active { transform: translateY(0); }

/* Cream glass — for cream surfaces */
.btn-secondary {
  background: var(--glass-cream-strong);
  color: var(--terra-deep);
  border: 1px solid var(--terra-rim);
  box-shadow: var(--shadow-soft);
}
.btn-secondary:hover {
  transform: translateY(-2px);
  background: var(--pearl);
  box-shadow: var(--shadow-md);
}

/* Iridescent sage → gold → peach → pink CTA — ONLY on dark surfaces.
   Soft pastel ribbon that shimmers across the button. Dark ink text
   on light pastels keeps WCAG-AA contrast.  */
.btn-gold {
  color: var(--ink);
  background:
    linear-gradient(
      135deg,
      #B5C5A0 0%,    /* sage    */
      #E8C77F 28%,   /* gold    */
      #F4C9A5 56%,   /* peach   */
      #F0BCAC 82%,   /* pink    */
      #B5C5A0 100%   /* sage loop */
    );
  background-size: 220% 220%;
  background-position: 0% 50%;
  animation: iridescent-shimmer 9s ease-in-out infinite;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(140, 77, 51, 0.10),
    0 8px 22px rgba(217, 168, 95, 0.38),
    0 16px 40px rgba(240, 188, 172, 0.32),
    0 26px 60px rgba(40, 18, 8, 0.36);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  font-weight: 700;
  letter-spacing: 0.018em;
}
/* Glass highlight band that slides slowly across the button surface */
.btn-gold::before {
  content: "";
  position: absolute;
  top: 0; left: -30%;
  width: 50%; height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 45%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0.55) 55%,
    transparent 100%
  );
  transform: skewX(-18deg);
  animation: iridescent-sheen 6.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.btn-gold > * { position: relative; z-index: 1; }
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.70),
    inset 0 -1px 0 rgba(140, 77, 51, 0.12),
    0 12px 30px rgba(217, 168, 95, 0.50),
    0 22px 52px rgba(240, 188, 172, 0.40),
    0 32px 72px rgba(40, 18, 8, 0.40);
  animation-duration: 4.5s;
}
.btn-gold:active { transform: translateY(0); }

@keyframes iridescent-shimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes iridescent-sheen {
  0%   { left: -30%; opacity: 0.0; }
  20%  { opacity: 0.85; }
  50%  { left: 120%; opacity: 0.85; }
  51%  { opacity: 0; }
  100% { left: -30%; opacity: 0; }
}

/* Ghost — minimal text link button */
.btn-ghost {
  background: transparent;
  color: var(--terra-deep);
  padding-left: 4px;
  padding-right: 4px;
  min-height: 44px;
  box-shadow: none;
}
.btn-ghost:hover { color: var(--terra); }

/* Stack on small screens when CTAs are paired */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.cta-row > * { flex: 1 1 240px; }
@media (min-width: 640px) {
  .cta-row > * { flex: 0 0 auto; }
}

/* -------------------------------------------------------------------
   Cards
   ------------------------------------------------------------------- */
.glass-card {
  background: var(--glass-cream);
  border: 1px solid var(--terra-rim);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.solid-card {
  background: var(--cream);
  border: 1px solid var(--terra-rim);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}

.dark-card {
  background: linear-gradient(160deg, #2A1408 0%, #1B0F08 60%, #150A06 100%);
  border: 1px solid rgba(255, 229, 176, 0.18);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  color: var(--cream);
}

/* Decorative gold rim (for premium emphasis) */
.gold-rim {
  border: 1.5px solid transparent;
  background-clip: padding-box;
  position: relative;
}
.gold-rim::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  background: linear-gradient(140deg, var(--gold-pale), var(--gold-rich));
  z-index: -1;
}

/* -------------------------------------------------------------------
   Gold medallion (used in empty states, /join, etc.)
   ------------------------------------------------------------------- */
.gold-medallion {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--gold-pale), var(--gold-rich) 78%);
  box-shadow:
    0 16px 36px rgba(217, 168, 95, 0.42),
    0 4px 14px rgba(40, 18, 8, 0.20),
    inset 0 -10px 18px rgba(140, 77, 51, 0.20);
  display: grid;
  place-items: center;
  color: var(--cream);
  position: relative;
}
.gold-medallion::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 252, 244, 0.45);
}
.gold-medallion svg,
.gold-medallion img { width: 38px; height: 38px; }

/* -------------------------------------------------------------------
   Navigation
   ------------------------------------------------------------------- */
.site-nav-wrap {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 14px 0;
  transition: background 0.25s var(--ease), backdrop-filter 0.25s var(--ease), border-color 0.25s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-nav-wrap.is-scrolled {
  background: rgba(250, 246, 240, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--terra-rim);
}
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: min(var(--shell-max), 100% - 32px);
  margin: 0 auto;
  padding: 0 16px;
}
.nav-logo img {
  height: 30px;
  width: auto;
}
.nav-links {
  display: none;
  gap: 28px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14.5px;
  color: var(--ink);
}
.nav-links a {
  position: relative;
  padding: 6px 0;
  transition: color 0.2s var(--ease);
}
.nav-links a:hover { color: var(--terra-deep); }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0;
  height: 1.5px;
  background: var(--terra);
  border-radius: 2px;
  transition: left 0.2s var(--ease), right 0.2s var(--ease);
}
.nav-links a:hover::after { left: 0; right: 0; }

.nav-cta {
  padding: 11px 18px;
  min-height: 0;
  font-size: 13.5px;
  border-radius: var(--r-pill);
}

.nav-mobile-smart-download { display: inline-flex; }
.nav-download { display: none; }

@media (min-width: 880px) {
  .nav-links { display: inline-flex; }
  .nav-mobile-smart-download { display: none; }
  .nav-download { display: inline-flex; }
}

/* -------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------- */
.site-footer {
  padding: var(--space-xl) 0 28px;
  background: linear-gradient(180deg, transparent, rgba(224, 123, 92, 0.06));
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(var(--shell-max), calc(100% - 64px));
  height: 1px;
  background: linear-gradient(to right, transparent, var(--terra-rim), transparent);
}
.footer-inner {
  width: min(var(--shell-max), 100% - 32px);
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}
@media (min-width: 720px) {
  .footer-inner { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; }
}
.footer-brand .footer-logo img { height: 32px; }
.footer-brand p {
  margin-top: 14px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 32ch;
}
.footer-links h4 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 14px;
}
.footer-links a {
  display: block;
  padding: 7px 0;
  font-size: 14px;
  color: var(--ink-soft);
  transition: color 0.2s var(--ease);
}
.footer-links a:hover { color: var(--terra-deep); }

.footer-bottom {
  width: min(var(--shell-max), 100% - 32px);
  margin: 40px auto 0;
  padding: 22px 16px 0;
  border-top: 1px solid var(--terra-rim);
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--ink-mute2);
}
.footer-bottom div { display: flex; gap: 16px; }
.footer-bottom a:hover { color: var(--terra-deep); }
@media (min-width: 640px) {
  .footer-bottom { flex-direction: row; align-items: center; }
}

/* -------------------------------------------------------------------
   Reveal animation
   ------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ===================================================================
   HOMEPAGE  ( / )
   =================================================================== */

/* ── HERO ──────────────────────────────────────────────────────────── */
.home-hero {
  padding-top: clamp(36px, 6vw, 68px);
  padding-bottom: var(--space-xl);
  position: relative;
}
.home-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: center;
}
@media (min-width: 880px) {
  .home-hero-grid { grid-template-columns: 1.1fr 1fr; gap: var(--space-xl); }
}

.home-hero .caps { margin-bottom: 18px; }
.home-hero .display { margin-bottom: 18px; }
.home-hero .lead {
  max-width: 30ch;
  margin-bottom: 28px;
}
.home-hero .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}
.hero-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-muted);
}
.hero-meta .star { color: var(--gold-amber); font-size: 14px; letter-spacing: 0.04em; }
.hero-meta .dot { width: 3px; height: 3px; background: var(--terra-rim-strong); border-radius: 50%; }

/* Phone-card slider */
.hero-visual {
  position: relative;
}
.hero-blob {
  position: relative;
  background: linear-gradient(160deg, rgba(255, 252, 244, 0.85), rgba(255, 252, 244, 0.55));
  border: 1px solid var(--terra-rim);
  border-radius: 36px;
  padding: 22px;
  box-shadow: 0 30px 80px rgba(58, 30, 16, 0.16);
  overflow: hidden;
}
.hero-blob::before {
  content: "";
  position: absolute;
  inset: -40% -40% auto auto;
  width: 80%; height: 80%;
  background: radial-gradient(circle, rgba(255, 229, 176, 0.50), transparent 65%);
  pointer-events: none;
}
.hero-blob::after {
  content: "";
  position: absolute;
  inset: auto auto -40% -40%;
  width: 80%; height: 80%;
  background: radial-gradient(circle, rgba(224, 123, 92, 0.25), transparent 65%);
  pointer-events: none;
}

/* ── PROOF STRIP ──────────────────────────────────────────────────── */
.proof-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding-top: 12px;
}
@media (min-width: 720px) { .proof-strip { grid-template-columns: repeat(4, 1fr); } }

.pill-stat {
  padding: 18px 16px;
  text-align: center;
  background: var(--glass-cream-strong);
  border: 1px solid var(--terra-rim);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
}
.pill-stat strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 600;
  font-variation-settings: "opsz" 72, "wght" 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 4px;
}
.pill-stat strong em { font-style: italic; color: var(--terra-deep); }
.pill-stat span {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
}

/* ── RITUALS (3-step) ─────────────────────────────────────────────── */
.rituals {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: var(--space-lg);
}
@media (min-width: 880px) { .rituals { grid-template-columns: repeat(3, 1fr); gap: 22px; } }

.ritual-card {
  padding: 28px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  background: var(--glass-cream-strong);
  border: 1px solid var(--terra-rim);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.ritual-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.ritual-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 34px;
  font-weight: 600;
  color: var(--terra-deep);
  line-height: 1;
  letter-spacing: -0.02em;
}
.ritual-card h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  font-variation-settings: "opsz" 72, "wght" 600;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}
.ritual-card h3 em { font-style: italic; color: var(--terra-deep); }
.ritual-card p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-muted);
}

/* ── FEATURES GRID ────────────────────────────────────────────────── */
.section-head {
  max-width: 720px;
  margin-bottom: var(--space-lg);
}
.section-head .caps { margin-bottom: 14px; }
.section-head .headline { margin-bottom: 16px; }
.section-head .lead { color: var(--ink-muted); font-style: italic; }

.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .features-grid { grid-template-columns: repeat(3, 1fr); } }

.feature-card {
  padding: 26px 22px;
  background: var(--glass-cream-strong);
  border: 1px solid var(--terra-rim);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.feature-icon {
  width: 44px; height: 44px;
  border-radius: 14px;
  background: rgba(255, 229, 176, 0.30);
  border: 1px solid rgba(255, 229, 176, 0.50);
  display: grid; place-items: center;
  margin-bottom: 14px;
}
.feature-icon img { width: 22px; height: 22px; }
.feature-card h3 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  font-variation-settings: "opsz" 36, "wght" 600;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  color: var(--ink);
}
.feature-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-muted);
}

/* ── SCAN MOMENT ──────────────────────────────────────────────────── */
.scan-moment {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: stretch;
}
@media (min-width: 880px) { .scan-moment { grid-template-columns: 1.15fr 1fr; gap: 32px; } }

.scan-story {
  padding: 36px 30px;
  background: var(--glass-cream-strong);
  border: 1px solid var(--terra-rim);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
}
.scan-story .caps { margin-bottom: 12px; }
.scan-story .headline { margin-bottom: 16px; }
.scan-story .lead { color: var(--ink-muted); margin-bottom: 22px; }

.scan-bullets { display: flex; flex-direction: column; gap: 14px; }
.scan-bullets p {
  padding-left: 22px;
  position: relative;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.scan-bullets p::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--terra);
}

/* Sample score card — dark, like the in-app dark scan result */
.scan-panel {
  padding: 32px 28px;
  background:
    linear-gradient(160deg, var(--coffee-warm), var(--coffee-1) 50%, var(--coffee-3));
  border: 1px solid rgba(255, 229, 176, 0.22);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.scan-panel::before {
  content: "";
  position: absolute;
  top: -30%; right: -20%;
  width: 60%; height: 60%;
  background: radial-gradient(circle, rgba(255, 229, 176, 0.35), transparent 70%);
  pointer-events: none;
}
.scan-score {
  width: 134px; height: 134px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 229, 176, 0.16), rgba(255, 229, 176, 0.04));
  border: 1.5px solid rgba(255, 229, 176, 0.40);
  display: grid; place-items: center;
  margin-bottom: 22px;
}
.scan-score-inner {
  text-align: center;
}
.scan-score-inner strong {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 58px;
  line-height: 1;
  color: var(--gold-pale);
  font-variation-settings: "opsz" 144, "wght" 600;
}
.scan-score-inner span {
  display: block;
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(255, 229, 176, 0.85);
  text-transform: uppercase;
}
.scan-panel .scan-bullets p {
  color: rgba(255, 245, 230, 0.85);
}
.scan-panel .scan-bullets p::before { background: var(--gold-pale); }
.scan-panel .scan-bullets strong { color: var(--gold-pale); font-weight: 700; }

/* ── COMMUNITY BAND ───────────────────────────────────────────────── */
.community-band {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  position: relative;
}
.community-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}
@media (min-width: 880px) { .community-grid { grid-template-columns: 1fr 1fr; gap: 48px; } }

.community-feed {
  padding: 28px 26px;
  background: var(--glass-cream-strong);
  border: 1px solid var(--terra-rim);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.community-feed .caps { margin-bottom: 6px; }
.feed-item {
  padding: 14px 16px;
  background: var(--cream);
  border: 1px solid var(--terra-rim);
  border-radius: var(--r-md);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.feed-item::before {
  content: "";
  width: 30px; height: 30px; flex: 0 0 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--gold-pale), var(--gold-rich));
  display: block;
}
.feed-item strong { color: var(--ink); font-weight: 600; }

/* ── FINAL CTA ────────────────────────────────────────────────────── */
.final-cta {
  text-align: center;
  padding: 60px 28px;
  background: linear-gradient(160deg, var(--cream), var(--cream-warm));
  border: 1px solid var(--terra-rim);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: "";
  position: absolute;
  inset: -30% -30% auto auto;
  width: 60%; height: 60%;
  background: radial-gradient(circle, rgba(255, 229, 176, 0.50), transparent 70%);
  pointer-events: none;
}
.final-cta .caps { margin-bottom: 12px; justify-content: center; display: inline-flex; }
.final-cta .headline { margin-bottom: 14px; }
.final-cta .lead { margin: 0 auto 26px; max-width: 38ch; }
.final-cta .hero-actions { justify-content: center; }

/* ===================================================================
   /app  — landing page (ad campaign destination)
   =================================================================== */
.app-page {
  min-height: 100vh;
  padding: 24px 0 120px;
  position: relative;
}
.app-shell {
  width: min(760px, 100% - 36px);
  margin: 0 auto;
}
.app-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 4px auto 22px;
  padding: 0;
  width: 100%;
}
.app-logo img { height: 30px; }

/* HERO — the most important block */
.app-hero {
  text-align: center;
  padding: 32px 24px 30px;
  position: relative;
}
.app-hero .caps { display: inline-flex; margin-bottom: 16px; justify-content: center; }
.app-headline {
  font-family: var(--serif);
  font-size: clamp(34px, 8.5vw, 56px);
  font-weight: 500;
  font-variation-settings: "opsz" 96, "SOFT" 80, "wght" 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
  margin-bottom: 16px;
}
.app-headline em { font-style: italic; color: var(--terra-deep); }
.app-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(15px, 2.3vw, 17.5px);
  font-variation-settings: "opsz" 36, "wght" 400;
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 36ch;
  margin: 0 auto 26px;
}

.app-cta-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}
.app-cta-wrap .btn-primary { width: 100%; }
.app-download-btn { display: none; } /* JS toggles which one is visible */

.app-social-proof {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.app-social-proof .star { color: var(--gold-amber); font-size: 13px; }
.app-social-proof .dot { width: 3px; height: 3px; background: var(--terra-rim-strong); border-radius: 50%; }

/* Phone preview block */
.app-shot-section {
  padding: 22px 22px 14px;
  margin: 20px 0 24px;
  background: linear-gradient(160deg, rgba(255, 252, 244, 0.78), rgba(255, 252, 244, 0.52));
  border: 1px solid var(--terra-rim);
  border-radius: 32px;
  box-shadow: 0 28px 60px rgba(58, 30, 16, 0.14);
  position: relative;
  overflow: hidden;
}
.app-shot-section::before {
  content: "";
  position: absolute;
  inset: -30% -30% auto auto;
  width: 70%; height: 70%;
  background: radial-gradient(circle, rgba(255, 229, 176, 0.45), transparent 65%);
  pointer-events: none;
}

/* Proof strip on /app */
.app-proof-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 18px 0 4px;
  border-top: 1px dashed var(--terra-rim);
}
.app-proof-strip .stat {
  text-align: center;
  padding: 8px;
}
.app-proof-strip .stat strong {
  display: block;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  font-variation-settings: "opsz" 72, "wght" 600;
  color: var(--ink);
}
.app-proof-strip .stat span {
  display: block;
  margin-top: 2px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  text-transform: uppercase;
}

/* Features list inside /app */
.app-features {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 28px 0;
}
.app-feature {
  display: flex;
  gap: 14px;
  padding: 18px 18px;
  background: var(--glass-cream-strong);
  border: 1px solid var(--terra-rim);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}
.app-feature .icon {
  width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: 14px;
  background: rgba(255, 229, 176, 0.32);
  border: 1px solid rgba(255, 229, 176, 0.55);
  display: grid; place-items: center;
}
.app-feature .icon img { width: 20px; height: 20px; }
.app-feature h3 {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  font-variation-settings: "opsz" 36, "wght" 600;
  color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: -0.005em;
}
.app-feature h3 em { font-style: italic; color: var(--terra-deep); }
.app-feature p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-muted);
}

/* Quote card */
.app-quote {
  padding: 26px 24px;
  background: linear-gradient(160deg, var(--cream), var(--cream-warm));
  border: 1px solid var(--terra-rim);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  margin: 28px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.app-quote::before {
  content: "";
  position: absolute;
  inset: -40% -40% auto auto;
  width: 70%; height: 70%;
  background: radial-gradient(circle, rgba(255, 229, 176, 0.40), transparent 70%);
  pointer-events: none;
}
.app-quote .stars {
  color: var(--gold-amber);
  font-size: 14px;
  letter-spacing: 0.14em;
  margin-bottom: 12px;
}
.app-quote blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 3vw, 22px);
  font-weight: 500;
  font-variation-settings: "opsz" 72, "wght" 500;
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: 14px;
  letter-spacing: -0.005em;
}
.app-quote cite {
  font-family: var(--sans);
  font-style: normal;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--terra-deep);
}

/* FAQ */
.app-faq {
  margin: 28px 0 16px;
}
.app-faq .caps { display: inline-flex; margin-bottom: 14px; }
.app-faq h2 {
  font-family: var(--serif);
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 500;
  font-variation-settings: "opsz" 72, "SOFT" 80, "wght" 500;
  letter-spacing: -0.018em;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 20px;
}
.app-faq h2 em { font-style: italic; color: var(--terra-deep); }
.faq-item {
  padding: 0;
  background: var(--glass-cream-strong);
  border: 1px solid var(--terra-rim);
  border-radius: var(--r-md);
  margin-bottom: 10px;
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 50px 16px 20px;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  font-variation-settings: "opsz" 36, "wght" 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  position: relative;
  transition: color 0.2s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--terra-deep);
  transition: transform 0.25s var(--ease);
}
.faq-item[open] summary { color: var(--terra-deep); }
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item .faq-body {
  padding: 0 20px 18px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* Second / footer CTA on /app */
.app-second-cta {
  text-align: center;
  margin-top: 20px;
  padding: 28px 22px;
  background: linear-gradient(160deg, var(--coffee-warm), var(--coffee-1) 50%, var(--coffee-3));
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.app-second-cta::before {
  content: "";
  position: absolute;
  inset: -40% auto auto -30%;
  width: 60%; height: 60%;
  background: radial-gradient(circle, rgba(255, 229, 176, 0.35), transparent 70%);
  pointer-events: none;
}
.app-second-cta::after {
  content: "";
  position: absolute;
  inset: auto -30% -40% auto;
  width: 60%; height: 60%;
  background: radial-gradient(circle, rgba(226, 155, 111, 0.55), transparent 70%);
  pointer-events: none;
}
.app-second-cta p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17px, 2.5vw, 20px);
  font-variation-settings: "opsz" 72, "wght" 500;
  line-height: 1.4;
  color: rgba(255, 245, 230, 0.92);
  margin-bottom: 22px;
}
.app-second-cta .btn-gold { width: 100%; max-width: 380px; margin-bottom: 10px; }
.app-second-cta .app-ios-link {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--gold-pale);
  text-decoration: underline;
  text-decoration-color: rgba(255, 229, 176, 0.40);
  text-underline-offset: 4px;
  padding: 4px 10px;
}

/* Sticky mobile CTA bar */
.app-sticky-cta {
  position: fixed;
  bottom: 12px; left: 12px; right: 12px;
  z-index: 60;
  padding: 10px;
  background: rgba(255, 252, 244, 0.92);
  border: 1px solid var(--terra-rim);
  border-radius: var(--r-pill);
  box-shadow: 0 18px 40px rgba(58, 30, 16, 0.22);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transform: translateY(140%);
  transition: transform 0.4s var(--ease-out);
  display: flex;
  align-items: center;
  gap: 12px;
}
.app-sticky-cta.is-visible { transform: none; }
.app-sticky-cta .label {
  flex: 1;
  padding-left: 14px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  font-variation-settings: "opsz" 36, "wght" 500;
  color: var(--ink);
}
.app-sticky-cta .label strong { font-weight: 600; font-style: normal; }
.app-sticky-cta .btn-primary {
  min-height: 46px;
  padding: 10px 18px;
  font-size: 14px;
}
@media (min-width: 880px) {
  .app-sticky-cta { display: none; }
}

/* ===================================================================
   /join — circle invite (deep link)
   =================================================================== */
.join-page {
  min-height: 80vh;
  display: grid;
  place-items: center;
  padding: 60px 24px 100px;
}
.join-shell { width: 100%; max-width: 540px; }

.join-card {
  text-align: center;
  padding: 44px 28px 32px;
  background: linear-gradient(170deg, rgba(255, 252, 244, 0.92), rgba(255, 252, 244, 0.70));
  border: 1px solid var(--terra-rim);
  border-radius: var(--r-xl);
  box-shadow: 0 30px 70px rgba(58, 30, 16, 0.18);
  position: relative;
  overflow: hidden;
}
.join-card::before {
  content: "";
  position: absolute;
  inset: -40% -30% auto auto;
  width: 70%; height: 70%;
  background: radial-gradient(circle, rgba(255, 229, 176, 0.55), transparent 65%);
  pointer-events: none;
}
.join-card::after {
  content: "";
  position: absolute;
  inset: auto auto -40% -30%;
  width: 60%; height: 60%;
  background: radial-gradient(circle, rgba(224, 123, 92, 0.20), transparent 65%);
  pointer-events: none;
}
.join-card > * { position: relative; }
.join-card .gold-medallion { margin: 0 auto 18px; }
.join-badge {
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 14px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terra-deep);
  background: rgba(255, 229, 176, 0.45);
  border: 1px solid rgba(255, 229, 176, 0.65);
  border-radius: var(--r-pill);
}
.join-card h1 {
  font-family: var(--serif);
  font-size: clamp(32px, 7vw, 44px);
  font-weight: 500;
  font-variation-settings: "opsz" 96, "SOFT" 80, "wght" 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
  margin-bottom: 14px;
}
.join-card h1 em { font-style: italic; color: var(--terra-deep); }
.join-card > p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  font-variation-settings: "opsz" 36, "wght" 400;
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 32ch;
  margin: 0 auto 22px;
}
.join-code {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: var(--cream);
  border: 1px dashed var(--terra-rim-strong);
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
  margin-bottom: 22px;
}
.join-code strong {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  font-variation-settings: "opsz" 36, "wght" 600;
  color: var(--terra-deep);
  letter-spacing: 0.05em;
}
.join-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.join-sub {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}
.join-sub .dot { display: inline-block; margin: 0 6px; opacity: 0.5; }

/* ===================================================================
   /privacy and /terms — editorial legal
   =================================================================== */
.legal-page {
  padding: 30px 0 var(--space-2xl);
}
.legal-hero {
  width: min(820px, 100% - 32px);
  margin: 0 auto var(--space-xl);
  padding: 0 16px;
}
.legal-hero .caps { display: inline-flex; margin-bottom: 14px; }
.legal-hero h1 {
  font-family: var(--serif);
  font-size: clamp(38px, 7.5vw, 64px);
  font-weight: 500;
  font-variation-settings: "opsz" 96, "SOFT" 80, "wght" 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
  margin-bottom: 12px;
}
.legal-hero h1 em { font-style: italic; color: var(--terra-deep); }
.legal-hero p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  font-variation-settings: "opsz" 36, "wght" 400;
  color: var(--ink-muted);
}

.legal-content {
  width: min(720px, 100% - 32px);
  margin: 0 auto;
  padding: 0 16px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.legal-callout {
  padding: 22px 24px;
  background: rgba(255, 229, 176, 0.30);
  border: 1px solid rgba(255, 229, 176, 0.60);
  border-radius: var(--r-md);
  margin-bottom: 36px;
}
.legal-callout p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  font-variation-settings: "opsz" 36, "wght" 400;
  line-height: 1.55;
  color: var(--ink);
}
.legal-callout strong {
  font-style: normal;
  font-weight: 600;
  font-variation-settings: "opsz" 36, "wght" 600;
  color: var(--terra-deep);
}

.legal-content h2 {
  font-family: var(--serif);
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 600;
  font-variation-settings: "opsz" 72, "wght" 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 38px 0 12px;
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.legal-content h2::before {
  content: "";
  width: 18px; height: 1px;
  background: var(--terra);
  flex: 0 0 18px;
  align-self: center;
}
.legal-content p { margin-bottom: 14px; }
.legal-content ul {
  margin: 4px 0 18px 0;
  padding-left: 0;
}
.legal-content ul li {
  position: relative;
  padding: 8px 0 8px 22px;
  line-height: 1.55;
}
.legal-content ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 16px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--terra);
}
.legal-content a { color: var(--terra-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--terra-rim-strong); }
.legal-content a:hover { color: var(--terra); }
.legal-content strong { color: var(--ink); font-weight: 600; }

.legal-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0 26px;
  background: var(--glass-cream-strong);
  border: 1px solid var(--terra-rim);
  border-radius: var(--r-md);
  overflow: hidden;
  font-size: 14px;
}
.legal-content thead th {
  text-align: left;
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra-deep);
  background: rgba(255, 229, 176, 0.30);
  border-bottom: 1px solid var(--terra-rim);
}
.legal-content tbody td {
  padding: 14px 14px;
  border-top: 1px solid rgba(224, 123, 92, 0.10);
  color: var(--ink-soft);
  line-height: 1.5;
}
.legal-content tbody tr:first-child td { border-top: 0; }
.legal-content tbody td strong { color: var(--ink); }

/* ===================================================================
   App-shot slider (used on / and /app) — preserve JS hooks
   =================================================================== */
.app-shot-slider {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
}
.app-shot-track {
  display: flex;
  gap: 14px;
  transition: transform 0.6s var(--ease-out);
}
.app-shot-slide {
  flex: 0 0 calc((100% - 14px) / 2);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  background: var(--cream-soft);
  box-shadow: 0 18px 40px rgba(58, 30, 16, 0.16), 0 0 0 1px var(--terra-rim);
}
.app-shot-slide img {
  width: 100%;
  height: auto;
  display: block;
  cursor: zoom-in;
}
.hero-shot-slider .app-shot-slide,
.app-hero-shot-slider .app-shot-slide {
  aspect-ratio: 9 / 19;
  background: linear-gradient(160deg, var(--cream-soft), var(--cream-deep));
}
.hero-shot-slider .app-shot-slide img,
.app-hero-shot-slider .app-shot-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app-shot-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 16px;
}
.app-shot-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(224, 123, 92, 0.30);
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease), width 0.25s var(--ease);
}
.app-shot-dot.is-active {
  width: 24px;
  border-radius: 4px;
  background: linear-gradient(to right, var(--gold-rich), var(--terra));
}

/* Empty state placeholder */
.hero-shot-empty {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 60px 24px;
  text-align: center;
  border: 1px dashed var(--terra-rim-strong);
  border-radius: var(--r-lg);
  background: var(--glass-cream);
  color: var(--ink-muted);
  font-size: 13.5px;
  line-height: 1.55;
}
.hero-shot-empty strong {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  font-variation-settings: "opsz" 36, "wght" 500;
  color: var(--ink);
}
.hero-shot-empty code {
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--terra-deep);
  background: rgba(255, 229, 176, 0.32);
  padding: 1px 6px;
  border-radius: 4px;
}

/* Lightbox */
.shot-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(20, 10, 6, 0.86);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.shot-lightbox.is-open { display: flex; }
.shot-lightbox-content {
  position: relative;
  max-width: min(420px, 100%);
  max-height: 92vh;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 229, 176, 0.30);
  animation: shot-pop 0.35s var(--ease-out);
}
.shot-lightbox-content img { width: 100%; height: auto; display: block; }
.shot-lightbox-close {
  position: absolute;
  top: 10px; right: 10px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255, 252, 244, 0.92);
  color: var(--ink);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  display: grid; place-items: center;
  border: 1px solid var(--terra-rim);
}
@keyframes shot-pop {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* -------------------------------------------------------------------
   Mobile-first: small adjustments for very narrow screens
   ------------------------------------------------------------------- */
@media (max-width: 380px) {
  :root { --shell-pad: 18px; }
  .hero-blob { padding: 14px; border-radius: 28px; }
  .ritual-card, .feature-card { padding: 22px 18px; }
  .scan-story, .scan-panel { padding: 26px 22px; }
  .join-card { padding: 36px 22px 28px; }
  .app-shot-slide { flex-basis: 100%; }
}

/* Print — collapse interactivity */
@media print {
  .site-nav-wrap, .site-footer, .btn-primary, .btn-secondary, .app-sticky-cta { display: none !important; }
  body { background: white; color: black; }
  .section-dark { background: white; color: black; }
}

/* ────────────────────────────────────────────────────────────────────
   App Store + Google Play badges — shared across / and /app
   ────────────────────────────────────────────────────────────────────
   Visibility is driven by a `platform-*` class stamped on <html> by
   the inline detection script in `includes/header.php`. Without JS,
   neither rule matches and the cascade falls back to both badges
   visible — graceful degradation for the < 1 % of users with JS off.

   Sizing follows Apple's HIG (badge ≥ 40 px tall, ≥ 16 px clear
   space) and Google's brand guidelines (badge ≥ 44 px tall on web).
   We render 54 px on desktop / 48 px on mobile, which sits in the
   sweet spot for both. ───────────────────────────────────────────── */
.store-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0;
}
.store-badge {
  display: inline-block;
  line-height: 0;            /* removes the descender gap under <img> */
  transition: transform 0.18s var(--ease), opacity 0.18s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.store-badge:hover {
  transform: translateY(-2px);
}
.store-badge:active {
  transform: translateY(0);
}
.store-badge img {
  display: block;
  height: 54px;
  width: auto;
  /* Apple + Google ask that the badges never appear distorted; explicit
     width:auto + object-fit guards against parent rules forcing a width. */
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
@media (max-width: 480px) {
  .store-badge img { height: 48px; }
  .store-badges { gap: 10px; }
}

/* Platform-aware visibility. The .platform-* class is added to <html>
   by the inline detect script in header.php — see comment there. */
html.platform-ios     .store-badge-android { display: none; }
html.platform-android .store-badge-ios     { display: none; }
/* Desktop (platform-desktop class) keeps both visible — no rule needed. */

/* No-JS fallback already covered: with no platform class on <html>,
   neither selector matches and both badges render. */