/* ==========================================================================
   Lumoro v2 dawn homepage - MODULES LAYER (split from home.css 2026-06-10).
   Loads AFTER home.css; rule order across the two files is byte-identical to
   the original single file, so the cascade is unchanged. Holds: integration
   reconciliation, elevation batch, sky architecture, rounds A-F modules.
   ========================================================================== */
/* ============================================================
   v2 INTEGRATION RECONCILIATION
   Styles the body partial's actual sub-class names (the body and
   CSS specialists diverged on names) + softens the hero scrim.
   ============================================================ */

/* Hero copy gets a faint hairline frame so it reads as a deliberate plate
   catching the dawn, not a floating block. A tighter, less-blurred scrim keeps
   the text commanding while still holding WCAG AA over the lightest gradient. */
/* Centered hero: no card frame, just a soft symmetric scrim behind the text so
   it holds WCAG AA over the dawn gradient without reading as a boxed plate. */
.hero-copy {
  border: 0;
}
/* Round B: the old vertical linear scrim showed hard left/right edges over the
   bright cloud plates on desktop (a visible dark column). Radial pockets are
   feathered on every side by construction: one centered pool for the copy, one
   lower pool where the gradient is brightest peach (CTA + trust line). */
.hero-copy::before {
  inset: -14% -18% -18% -18%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 72% 64% at 50% 46%,
      rgba(21, 17, 27, 0.50),
      rgba(21, 17, 27, 0.30) 55%,
      transparent 78%),
    radial-gradient(ellipse 56% 36% at 50% 88%,
      rgba(21, 17, 27, 0.42),
      transparent 72%);
  filter: blur(20px);
  will-change: transform;
  transform: translateZ(0);
}
/* The eyebrow and trust line are the two lines that wash out over bright
   clouds: give each its own whisper of ground, not a box. */
.hero-eyebrow {
  text-shadow:
    0 1px 14px rgba(21, 17, 27, 0.60),
    0 0 3px rgba(21, 17, 27, 0.40);
}
.hero .cta-trust-line {
  color: rgba(244, 238, 228, 0.92);
  text-shadow:
    0 1px 12px rgba(21, 17, 27, 0.60),
    0 0 3px rgba(21, 17, 27, 0.40);
}
/* Mobile: the fire clouds are the show. Lighter, tighter scrim; the scene
   carries the frame and the copy floats in it. */
@media (max-width: 767px) {
  .hero { padding-top: clamp(96px, 18vh, 150px); }
  .hero-copy::before {
    inset: -4% -6% -8% -6%;
    background: linear-gradient(180deg,
      rgba(21, 17, 27, 0.10) 0%,
      rgba(21, 17, 27, 0.26) 55%,
      rgba(21, 17, 27, 0.36) 100%);
    filter: blur(22px);
  }
  /* Round E (council): the kicker is the first line a visitor meets and sage
     drowned in the bright cloud patch on phones. Cream wins over brand-cool
     here; the heavier ground shadow does the rest. */
  .hero-eyebrow {
    color: rgba(244, 238, 228, 0.95);
    text-shadow:
      0 1px 18px rgba(21, 17, 27, 0.85),
      0 0 4px rgba(21, 17, 27, 0.55);
  }
}

/* Section eyebrow: a quiet centered label. The 01..06 numbering and trailing
   rule were dropped in wave 5; both fought the centered axis. */
.section-eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0 0 var(--space-3);
  max-width: none;
}

/* Quiet centered jump links (homepage FAQ -> /faq). */
.faq-more {
  max-width: none;
}

/* Proof list: editorial 3-up, sage-hairline modules. Left-aligned text inside
   the centered river. */
.proof-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3.5vw, 44px);
  margin-top: var(--space-5);
  text-align: left;
}

/* In the horizontal 3-up / 2-up row, every module carries its own top hairline
   so the row reads as a set of equal columns, not one card missing its rule.
   (The single-column mobile stack restores the first-child-no-rule behavior.) */
.proof-list .single-proof-card {
  border-top: 1px solid var(--hairline);
  padding-top: var(--space-5);
  padding-bottom: 0;
}
.proof-list .single-proof-card:first-child {
  border-top: 1px solid var(--hairline);
  padding-top: var(--space-5);
}
.single-proof-kicker {
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0 0 var(--space-3);
}
/* A single amber tick, echoing the price-list bullets, so the one accent color
   also appears in the proof row instead of it reading as colorless columns. */
.single-proof-kicker::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 2px;
  border-radius: 1px;
  background: var(--amber);
  margin-right: var(--space-2);
  vertical-align: middle;
}
.single-proof-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-2);
  line-height: 1.12;
  color: var(--cream);
  margin: 0 0 var(--space-4);
  /* Hold the same baseline across the 3-up so the single-line third title does
     not pull its body copy up out of alignment with the other two. */
  min-height: 2.24em;
}

/* Pricing card sub-classes (body uses .price-card-* names) */
.price-card-name {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.16em; /* 100x pass: opened from 0.14em to match the eyebrows */
  text-transform: uppercase;
  color: var(--plum-mauve);
  margin: 0;
}
.price-card-amount {
  font-family: var(--font-display);
  font-weight: 420;
  font-size: clamp(3.05rem, 5vw, 4.1rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: var(--space-2) 0 0;
  /* Lining tabular figures so $14.99 and $49.99 align decimal-for-decimal. */
  font-variant-numeric: tabular-nums lining-nums;
}
.price-card-period {
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  color: rgba(21, 17, 27, 0.80);
  letter-spacing: 0;
}
.price-card-note {
  font-size: var(--step--1);
  color: rgba(21, 17, 27, 0.85);
  margin: var(--space-1) 0 0;
}
.price-card-list {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.price-card-list li {
  position: relative;
  padding-left: var(--space-4);
  font-size: var(--step--1);
  color: rgba(21, 17, 27, 0.78);
  line-height: 1.34;
}
.price-card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 10px;
  height: 2px;
  border-radius: 1px;
  /* Amber, not sage: sage fails AA non-text contrast on the cream cards and is
     near-invisible on the white featured card. Amber also carries the one accent
     into the list, echoing the proof ticks. */
  background: var(--amber);
}

/* Offer band is cream: force dark, readable text for its sub-classes.
   Sage fails AA on the cream band, so the eyebrow flips to plum. */
.offer .section-eyebrow { color: var(--plum-mauve); }
.offer .section-body p { color: rgba(21, 17, 27, 0.80); }
.offer-sub {
  max-width: 54ch;
  margin: var(--space-4) auto 0;
  font-size: var(--step-1);
  color: rgba(21, 17, 27, 0.78);
}

/* High-contrast preference: flip the quietest texts to solid ink/cream so no
   reduced-opacity body copy sits near the AA floor for users who opt in. */
@media (prefers-contrast: more) {
  .offer p, .offer-sub, .price-card-note, .price-card-list li,
  .offer .cta-trust-line { color: var(--ink); }
  .section-body p, .cta-trust-line, .hero-proof,
  .single-proof-card p, .footer-disclaimer, .footer-copy { color: var(--cream); }
}

/* Proof modules step down 3-up to 2-up at tablet, only collapsing to 1-up on
   phones, so the editorial cadence survives the mid-width range. */
@media (max-width: 1024px) {
  .proof-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .proof-list { grid-template-columns: 1fr; gap: 0; }
  /* Stacked modules do not need the 3-up baseline lock; drop the reserved height. */
  .single-proof-title { min-height: 0; }
  /* Stacked proof modules: tighter than the desktop 3-up since they now sit one
     under another. Each keeps its hairline; the first opens clean. */
  .proof-list .single-proof-card {
    padding-top: var(--space-5);
    padding-bottom: var(--space-4);
  }
  .proof-list .single-proof-card:first-child {
    border-top: 0;
    padding-top: 0;
  }
  /* The closing testimonial does not need 96px of runway on a phone. */
  .proof-list + .proof-quote {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
  }
}

/* The one real member quote: a display pull-quote with an amber accent bar,
   sitting beside the founder note. */
.founder-note-row .proof-quote {
  margin: 0;
  padding-left: var(--space-5);
  border-left: 2px solid rgba(255, 199, 107, 0.55);
  max-width: 24ch;
}
.founder-note-row .proof-quote blockquote {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--serif-weight-soft);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.34;
  letter-spacing: -0.005em;
  color: var(--cream);
  text-wrap: balance;
  hanging-punctuation: first last;
}
.founder-note-row .proof-quote figcaption {
  font-family: var(--font-body);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--sage);
}

/* Final CTA before the footer: one clear last action for readers who reach the
   end. Centered, set apart with a sage hairline above the founder/footer rhythm. */
.final-cta {
  max-width: 760px;
  margin: var(--space-6) auto 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--hairline);
  text-align: center;
  position: relative;
}
/* Round B: the close gets its own last-light moment. A soft sunrise reprise
   blooms behind "Tomorrow morning can start calm." so the final line sits in
   sky, not on flat dark. Decorative, feathered, behind text. */
.final-cta::before {
  content: "";
  position: absolute;
  inset: -14% -18% -16% -18%;
  z-index: -1;
  background:
    radial-gradient(56% 60% at 50% 40%,
      rgba(255, 178, 102, 0.34),
      rgba(242, 181, 140, 0.15) 52%,
      transparent 76%),
    radial-gradient(34% 30% at 50% 34%,
      rgba(255, 214, 150, 0.18),
      transparent 70%);
  filter: blur(16px);
  pointer-events: none;
  will-change: transform;
  transform: translateZ(0);
}
.final-cta-line {
  font-family: var(--font-display);
  font-weight: var(--serif-weight-soft);
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  line-height: 1.2;
  color: var(--cream);
  margin: 0 auto var(--space-5);
  max-width: 22ch;
}
.final-cta .button.primary {
  padding: 16px 40px;
}
.final-cta .cta-trust-line {
  margin-top: var(--space-4);
  margin-inline: auto;
}

/* ============================================================
   Footer: the page's exhale, not a sitemap. One closing line in
   Fraunces italic, one slim link row, the crisis line, and a
   quiet wordmark + copyright. Centered, like everything above.
   ============================================================ */
.site-footer {
  background: var(--dark-plum-ash, #22202A);
  text-align: center;
  padding: 56px 24px 32px;
}

.footer-exhale {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: var(--plum-light, #B0A8BF);
  margin: 0 0 36px;
  letter-spacing: 0.01em;
}

.footer-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 20px;
}

.footer-nav-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer-nav-group a {
  font-family: var(--font-body);
  font-weight: 420;
  font-size: 0.75rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(232, 224, 211, 0.78);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 199, 107, 0.18);
  padding: 3px 2px 5px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease),
              transform 0.2s var(--ease);
}

.footer-nav-group a:hover {
  color: var(--amber, #FFC76B);
  border-bottom-color: rgba(255, 199, 107, 0.72);
  transform: translateY(-1px);
}

.footer-nav-group--legal a {
  font-size: 0.7rem;
  color: rgba(222, 212, 197, 0.68);
  border-bottom-color: rgba(222, 212, 197, 0.14);
  opacity: 1;
}

.footer-nav-divider {
  width: 1px;
  height: 12px;
  background: var(--stone, #7A7368);
  opacity: 0.35;
  margin: 0 20px;
}

.footer-save-contact {
  display: inline-block;
  margin: 0 0 20px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: rgba(232, 224, 211, 0.80);
  text-decoration: none;
  font-style: italic;
  border: 1px solid rgba(255, 199, 107, 0.24);
  border-radius: 20px;
  padding: 4px 14px;
  transition: border-color 0.2s, color 0.2s;
}

.footer-save-contact:hover {
  border-color: rgba(255, 199, 107, 0.62);
  color: var(--amber, #FFC76B);
}

.footer-copy {
  font-family: var(--font-body);
  font-weight: 200;
  font-size: 0.65rem;
  color: rgba(222, 212, 197, 0.58);
  opacity: 1;
  margin: 0 0 16px;
  letter-spacing: 0.05em;
}

.footer-mark {
  font-family: var(--font-display);
  font-style: italic;
}

.footer-disclaimer {
  font-family: var(--font-body);
  font-weight: 200;
  font-size: 0.62rem;
  color: rgba(222, 212, 197, 0.58);
  opacity: 1;
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.6;
  border-top: 1px solid rgba(122, 115, 104, 0.15);
  padding-top: 16px;
}

@media (max-width: 640px) {
  .footer-nav {
    flex-direction: column;
    gap: 12px;
  }
  .footer-nav-divider {
    width: 24px;
    height: 1px;
    margin: 0;
  }
  .footer-nav-group {
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .faq-list { margin-block: var(--space-5); }
}

/* ===========================================================================
   ELEVATION BATCH 1 — Builder 1 additions (2026-06-10)
   Items 1.1-1.10 from homepage-elevation-spec.md
   =========================================================================== */

/* 1.1 STICKY BOTTOM CTA BAR ================================================ */
/* Mobile-only (<1024px). Glass surface. Safe-area-aware. Appears on scroll-up
   after hero exits; hides on scroll-down (native-app-chrome pattern). */
.sticky-bar {
  display: none;          /* hidden until JS arms it at <1024px */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 8900;          /* below consent (9999) but above everything else */
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: rgba(15, 11, 20, 0.72);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  backdrop-filter: saturate(140%) blur(16px);
  border-top: 1px solid rgba(244, 238, 228, 0.08);
  /* Hidden state: translated off-screen */
  transform: translateY(100%);
  transition: transform 300ms var(--ease);
  pointer-events: none;
  will-change: transform;
}

.sticky-bar--visible {
  transform: translateY(0);
  pointer-events: auto;
}

.sticky-bar-label {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--oat);
  white-space: nowrap;
  flex-shrink: 0;
}

.sticky-bar-cta {
  /* 52px tall, generous width */
  min-height: 52px;
  padding: 14px 28px;
  font-size: var(--step-0);
  flex-shrink: 0;
  /* Override the general button box-shadow for the bar context */
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.16), 0 8px 24px rgba(255, 199, 107, 0.22);
  /* Ensure label text doesn't truncate */
  white-space: nowrap;
}


/* Desktop: never show sticky bar */
@media (min-width: 1024px) {
  .sticky-bar { display: none !important; }
}

/* Mobile: flex layout */
@media (max-width: 1023px) {
  .sticky-bar { display: flex; }
}

/* 1.2 TESTIMONIAL AS RECEIVED-SMS BUBBLE =================================== */
/* Member quote restyled as a received SMS bubble — warm translucent surface,
   timestamp whisper, no name. Sage hairline + 40px gap from founder note. */

.founder-note-row .proof-sms-bubble {
  margin: 0;
  padding-left: 0;
  border-left: 0;
}

/* The received-message bubble. 100x pass: this is the hero testimonial (the
   line that closes a skeptic), so it gets more presence than the three
   attributed quotes below it: larger type, more vertical room, and a big
   quiet Fraunces quotation mark as a watermark. */
.proof-sms-surface {
  position: relative;   /* anchors the ::before quotation mark */
  background: linear-gradient(160deg, #FBF6EC 0%, #F6EAD8 100%);
  border-radius: 16px 16px 16px 4px;   /* received-message tail: bottom-left */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.70),
    0 12px 32px rgba(21, 17, 27, 0.28);
  padding: 26px 22px 20px;
  display: inline-block;
  max-width: 28ch;
  text-align: left;
}

.proof-sms-surface::before {
  content: "\201C";
  position: absolute;
  top: -0.06em;
  left: 0.04em;
  font-family: var(--font-display);
  font-weight: 420;
  font-size: 4rem;
  line-height: 1;
  color: rgba(21, 17, 27, 0.30); /* ink at 0.3: a watermark, not a glyph */
  pointer-events: none;
}

.proof-sms-text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--serif-weight-soft);
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  line-height: 1.38;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 10px;
  text-wrap: balance;
  hanging-punctuation: first last;
}

.proof-sms-meta {
  font-family: var(--font-body);
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(21, 17, 27, 0.55);
  font-variant-numeric: tabular-nums;
  margin: 0;
  max-width: none;
}

/* Caption leads the bubble as a quiet kicker (Round D). */
.proof-sms-caption {
  display: block;
  margin: 0 0 var(--space-3);
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
}

/* Round E: the contrast moment resolves into the product. A quiet bridge. */
.contrast-bridge {
  font-family: var(--font-body);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--sage);
  margin: var(--space-5) auto 0;
  max-width: none;
  text-align: center;
}

/* The founder spread's right column: member quote + craft strip stacked, so
   the desktop grid balances instead of leaving a dead column (Round E). */
.founder-note-side {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: start;
  gap: clamp(24px, 4vw, 42px);
  margin-top: var(--space-4);
}

.founder-note-side .proof-sms-bubble {
  margin: 0;
}

/* Round F: the three attributed member quotes, stacked quiet under the lead
   bubble. Real words, real names; hairline rhythm, no card chrome. */
.member-words {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.member-word {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--hairline-faint);
}
.member-word:first-child {
  border-top: 0;
  padding-top: 0;
}
.member-word-line {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--serif-weight-soft);
  font-size: clamp(1.02rem, 1.55vw, 1.16rem);
  line-height: 1.36;
  color: rgba(244, 238, 228, 0.92);
  margin: 0 0 var(--space-1);
  max-width: 34ch;
}
.member-word-cite {
  font-family: var(--font-body);
  font-size: var(--step--2);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0;
}

/* Round D: craft-transparency strip. One honest fact, set like a colophon.
   Round E: lives inside the founder spread's right column. */
.craft-strip {
  grid-column: 1 / -1;
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline-faint);
  text-align: center;
}
.craft-strip-line {
  font-family: var(--font-display);
  font-weight: var(--serif-weight-soft);
  font-size: clamp(1.18rem, 1.8vw, 1.42rem);
  line-height: 1.25;
  color: var(--cream);
  margin: 0 0 var(--space-2);
  max-width: none;
  text-wrap: balance;
}
.craft-strip-line .accent-word {
  font-size: 1em;
  text-shadow: none;
}
.craft-strip-sub {
  font-family: var(--font-body);
  font-size: var(--step--1);
  color: rgba(232, 224, 211, 0.85);
  margin: 0;
  max-width: 44ch;
  margin-inline: auto;
}

@media (max-width: 760px) {
  .founder-note-side {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .proof-sms-surface {
    max-width: 100%;
    padding: 22px 20px 18px;
  }
  .member-word {
    padding-block: var(--space-2);
  }
  .craft-strip {
    text-align: left;
  }
  .craft-strip-sub {
    margin-inline: 0;
  }
}

/* Sage hairline + 40px gap between founder note and SMS bubble on mobile stack */
@media (max-width: 768px) {
  .founder-note-row .proof-sms-bubble {
    padding-top: 40px;
    border-top: 1px solid var(--hairline);
  }
}

/* 1.3 ANNUAL IN-CARD CTA =================================================== */
/* 100x pass: the Annual card is the recommended plan, so its CTA carries the
   same filled amber as the page's primary buttons. The Monthly card has no
   in-card CTA, which keeps the visual hierarchy (annual leads). Reuses
   data-cta tracking. */
.price-card-inline-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  width: 100%;
  margin-top: auto;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  background: var(--amber);
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12),
              0 12px 32px rgba(255, 199, 107, 0.16);
  transition: background 200ms var(--ease), transform 200ms var(--ease),
              box-shadow 200ms var(--ease);
}

.price-card-inline-cta:hover {
  background: var(--peach);   /* same warm shift as .button.primary */
  transform: translateY(-1px);
}

.price-card-inline-cta:active {
  transform: translateY(0);
}

.price-card-inline-cta--secondary {
  color: rgba(21, 17, 27, 0.78);
  background: rgba(255, 255, 255, 0.34);
  border: 1px solid rgba(21, 17, 27, 0.18);
}
.price-card-inline-cta--secondary:hover {
  color: var(--ink, #15111B);
  background: rgba(255, 199, 107, 0.18);
  border-color: rgba(255, 199, 107, 0.54);
}

/* 1.4 BREATH LINE =========================================================== */
/* 22px Fraunces italic cream, 36px top margin, its own moment. */
.breath-line {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--serif-weight-soft);
  font-size: clamp(1.3rem, 3.4vw, 1.375rem);  /* ~22px at base */
  line-height: 1.48;
  letter-spacing: -0.003em;
  color: var(--cream);
  margin: 36px auto 0;
  max-width: 42ch;
  text-align: center;
  text-shadow: 0 1px 16px rgba(20, 14, 24, 0.60), 0 0 3px rgba(20, 14, 24, 0.35);
}

/* 100x pass: the curation coda under the breath line. Same italic voice,
   a step quieter so the first line keeps the moment. */
.breath-line--coda {
  margin-top: var(--space-3);
  font-size: clamp(1.1rem, 2.8vw, 1.2rem);
  color: rgba(244, 238, 228, 0.82);
}

/* 1.5 SPACING: +48px above FAQ; hero vert-pad at <=375px; trust line trim == HTML */
/* +48px above FAQ section */
#faq {
  padding-top: calc(var(--section-pad) + 48px);
}

/* Hero vertical padding: -24px at <=375 height 700 so trust line clears Safari chrome */
@media (max-width: 375px) and (max-height: 700px) {
  .hero {
    padding-block: clamp(12px, 2vh, 28px);
  }
}

/* 1.6 TOUCH TARGETS ========================================================= */
/* Nav logo link min-height 44px */
.site-header-mark {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Nav pill +1px vertical padding */
.site-header-cta.button.primary {
  padding-block: calc(9px + 1px);
}

/* 1.7 WEBKIT ANNUAL-CARD TEXT OVERFLOW FIX ================================== */
/* "billed once a year." cut off mid-word in webkit at 390px.
   The card is in a 2-col grid that goes 1-col at 768px mobile, but at 390px
   the 2-col grid is still active (above the 768px breakpoint only collapses
   at 768px; the mobile breakpoint fires at <=768px so the 2-col grid at 390px
   does NOT fire). The card padding at the 2-col layout leaves too little text
   width.
   Fix: ensure the card does not clip and the note wraps. */
.price-card-note {
  word-break: normal;
  overflow-wrap: break-word;
  white-space: normal;
  /* Ensure the note is never hidden/clipped by an overly tight card */
  overflow: visible;
}

/* At small widths, reduce card padding so text has more room */
@media (max-width: 480px) {
  .price-card {
    padding: var(--space-5) var(--space-4);
  }
  .price-card .price-card-flag {
    top: 12px;
    right: 12px;
    padding: 4px 10px;
  }
}

/* 1.8 CHAT BUBBLE OVERLAP =================================================== */
/* Founder/proof sections: chat bubble shifts 8px further right so it does not
   clip the right-side content text at <=430px. The bubble is in chat-widget.html
   at fixed bottom:20px right:20px on mobile — bump right to 28px at <=430w. */
@media (max-width: 430px) {
  .chat-bubble {
    right: 28px !important;
  }
}

/* 1.9 CONSENT BANNER COMPACTNESS =========================================== */
/* Reduce banner padding and font at <=430px; buttons stay >=44px (no logic change). */
@media (max-width: 430px) {
  .lum-consent-banner {
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  }
  .lum-consent-copy {
    font-size: 12px;
    line-height: 1.35;
  }
}

/* When the consent banner is open, keep the sticky bar hidden.
   The JS also enforces this (MutationObserver on body class), but CSS is
   belt-and-suspenders so it never flickers visible. */
body.consent-open .sticky-bar,
body.consent-open .sticky-bar--visible {
  transform: translateY(100%) !important;
  pointer-events: none !important;
}

/* Round B2 (council): on phones the chat bubble collided with copy in nearly
   every frame, and a floating chat contradicts "nothing wants something from
   you". Homepage only (this sheet only loads here); other pages keep it. */
@media (max-width: 767px) {
  .chat-bubble { display: none !important; }
}
/* Round E (council): on desktop the amber bubble was a permanent second amber
   element competing with every CTA. Demoted: smaller, dimmed at rest, full
   presence only on approach. Homepage only. */
@media (min-width: 768px) {
  .chat-bubble {
    width: 46px !important;
    height: 46px !important;
    opacity: 0;
  }
  .chat-bubble.visible { opacity: 0.55; }
  .chat-bubble.visible:hover,
  .chat-bubble.visible:focus-visible,
  .chat-bubble.open { opacity: 1; }
  .chat-bubble svg { width: 22px !important; height: 22px !important; }
}

/* Round B2 (council): on first load the consent banner covers the hero trust
   line on phones. Give the hero room to exhale while consent is open. */
@media (max-width: 767px) {
  body.consent-open .hero { padding-bottom: clamp(96px, 14vh, 132px); }
}

/* 1.10 H1 MEASURE CHECK ==================================================== */
/* At 390px the H1 should be 38-44px with letter-spacing -0.02 to -0.03em,
   line-height ~1.1. The current clamp(2.6rem, 11vw, 3.4rem) at 390px gives
   ~2.86rem = 45.8px (just over the 44px ceiling). Tighten the clamp slightly. */
@media (max-width: 390px) {
  .hero-title {
    font-size: clamp(2.375rem, 10.2vw, 2.875rem);   /* ~38-46px range, ~40px at 390 */
    letter-spacing: -0.025em;
    line-height: 1.1;
  }
}

/* ================================================================
   SOLID HOMEPAGE BANDS (2026-06-12)
   Keep the hero atmospheric, then let the page scroll through clean
   editorial planes. Earlier sky and feather layers were too gradient-heavy
   between sections and made the page feel mushy.
   ================================================================ */
#problem { background: #1E1B18; }
#product { background: #E8E1D4; }
#proof   { background: #281D2B; }
#faq     { background: #17111D; }

#problem, #product, #proof, .offer, #faq {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

#problem,
#product,
#proof,
.offer,
#faq {
  background-image: none;
}

#product,
#proof,
.offer,
#faq {
  border-top: 1px solid rgba(244, 238, 228, 0.10);
}

#product,
.offer {
  border-top-color: rgba(21, 17, 27, 0.12);
}

#proof::after {
  display: none;
}

.section-sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: none;
}

.pricing-trust-pair {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 28px 0 0;
  max-width: 640px;
  margin-inline: auto;
}

.pricing-trust-item {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--step--1);
  color: var(--stone, #7A7368);
  text-align: center;
  max-width: 280px;
  line-height: 1.55;
}

.pricing-trust-item strong {
  display: block;
  color: var(--ink, #15111B);
  font-weight: 400;
  margin-bottom: 4px;
}

@media (max-width: 640px) {
  .price-card-amount {
    margin-top: var(--space-1);
  }

  .price-card-note {
    margin-top: var(--space-1);
  }

  .price-card-list {
    margin-top: var(--space-3);
    gap: var(--space-2);
  }

  .pricing-trust-pair {
    flex-direction: column;
    gap: 12px;
  }
  .pricing-trust-item {
    max-width: 100%;
  }
}

/* Feature triplet: quiet glass plates instead of flat text stacks. */
.single-proof-card {
  background: linear-gradient(180deg, rgba(244, 238, 228, 0.045), rgba(244, 238, 228, 0.015));
  border: 1px solid rgba(244, 238, 228, 0.10);
  border-radius: 16px;
  padding: 26px 24px 22px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.single-proof-card .single-proof-kicker { margin-top: 0; }
.single-proof-card > p:last-child { margin-bottom: 0; }

/* Desktop: the feature triplet escapes the prose column so each card gets a
   real line length instead of one-word-per-line wrapping. */
@media (min-width: 1024px) {
  .proof-list {
    width: min(1080px, calc(100vw - 96px));
    margin-left: 50%;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .single-proof-card { padding: 30px 28px 26px; }
}

/* ================================================================
   ROUND A, THE ARGUMENT (2026-06-10)
   Message-architecture modules: ordinary-vs-Lumoro contrast,
   reset glimpse. Composed calm, typography and
   hairlines only, no infographic chrome.
   ================================================================ */

/* Contrast moment: two quiet lines side by side. The ordinary morning
   stays dim and italic; the Lumoro morning carries the serif voice,
   a warmer rule, and the page's one accent on its last two words. */
.contrast-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  max-width: 760px;
  margin: var(--space-7) auto 0;
  text-align: left;
}
.contrast-col {
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline-faint);
}
.contrast-lumoro {
  border-top-color: rgba(255, 199, 107, 0.50);
}
.contrast-label {
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 var(--space-3);
  color: rgba(222, 212, 197, 0.72);
  max-width: none;
}
.contrast-lumoro .contrast-label {
  color: var(--sage);
}
.contrast-line {
  font-family: var(--font-display);
  font-weight: var(--serif-weight-soft);
  font-size: var(--step-1);
  line-height: 1.42;
  margin: 0;
  max-width: none;
  text-wrap: balance;
}
.contrast-ordinary .contrast-line {
  font-style: italic;
  color: rgba(222, 212, 197, 0.74);
}
.contrast-lumoro .contrast-line {
  color: var(--cream);
}
/* The accent inside the contrast line stays calm: inherit size, no bloom. */
.contrast-lumoro .contrast-line .accent-word {
  font-size: 1em;
  text-shadow: none;
}
@media (max-width: 640px) {
  .contrast-row {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    margin-top: var(--space-6);
  }
  /* Stacked: the opposition needs visible rules at both columns. */
  .contrast-col {
    border-top-color: rgba(169, 191, 163, 0.30);
  }
  .contrast-lumoro {
    border-top-color: rgba(255, 199, 107, 0.55);
  }
}

/* Method tokens: the product named in three quiet phrases. Centered row,
   serif lines, whisper subs. Reads as a poem fragment, not feature cards. */
.method-tokens {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3vw, 48px);
  max-width: 680px;
  margin: var(--space-6) auto 0;
}
.method-token {
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline-faint);
  position: relative;
}
/* A single amber tick on each rule, echoing the proof and price ticks. */
.method-token::before {
  content: "";
  position: absolute;
  top: -1px;
  left: calc(50% - 9px);
  width: 18px;
  height: 1px;
  background: var(--amber);
}
.method-token-line {
  font-family: var(--font-display);
  font-weight: var(--serif-weight-soft);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.22;
  color: var(--cream);
  margin: 0 auto var(--space-2);
  max-width: none;
  text-wrap: balance;
}
.method-token-sub {
  font-family: var(--font-body);
  font-size: var(--step--1);
  color: rgba(232, 224, 211, 0.92);
  margin: 0 auto;
  max-width: none;
  text-shadow: 0 1px 10px rgba(20, 14, 24, 0.55);
}
@media (max-width: 640px) {
  .breath-line {
    margin-top: var(--space-4);
  }

  .method-tokens {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    max-width: 30rem;
    margin-top: var(--space-5);
  }

  .method-token {
    padding-top: var(--space-3);
  }
}

/* Reset glimpse: the second product shot. A real frame of the web reset's
   breath dial beside one short claim. Media and copy sit side by side on
   desktop, stack on phones. The image is its own dark plum scene, so it
   only needs a hairline and the room to glow. */
.reset-glimpse {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  max-width: 860px;
  margin: var(--space-8) auto 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--hairline-faint);
  text-align: left;
}
.reset-glimpse-media {
  margin: 0;
  position: relative;
}
.reset-glimpse-media img,
.home-reset-orb {
  width: 100%;
  max-width: 320px;
  margin-inline: auto;
  position: relative;
  aspect-ratio: 1;
  display: block;
  --breath-value: 0.34;
  --phase-progress: 0;
}

/* The same breath chronograph language used by /m: brass ticks, central
   aperture, phase ring, and a large quiet count. */
.home-reset-orb .orb-shell {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 248, 232, 0.10) 0%, transparent 22%),
    radial-gradient(circle at 50% 56%, rgba(255, 199, 107, 0.07) 0%, transparent 38%),
    radial-gradient(circle at 50% 70%, rgba(0, 0, 0, 0.20) 0%, transparent 56%),
    #14101A;
  overflow: hidden;
  border: 1px solid rgba(244, 238, 228, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 24px 60px rgba(10, 7, 14, 0.55);
}

.home-reset-orb .orb-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 199, 107, 0.11), transparent 22%),
    radial-gradient(circle at 70% 76%, rgba(242, 181, 140, 0.07), transparent 26%);
  pointer-events: none;
}

.home-reset-orb[data-phase="exhale"] .orb-shell::after {
  background:
    radial-gradient(circle at 30% 28%, rgba(242, 181, 140, 0.11), transparent 22%),
    radial-gradient(circle at 70% 76%, rgba(255, 199, 107, 0.06), transparent 28%);
}

.home-reset-orb .breath-instrument,
.home-reset-orb .breath-pulse,
.home-reset-orb .breath-aperture,
.home-reset-orb .breath-cardinals {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.home-reset-orb .breath-instrument {
  background:
    repeating-conic-gradient(
      from -90deg,
      rgba(214, 178, 122, 0.50) 0deg 0.7deg,
      transparent 0.7deg 7.5deg
    );
  opacity: 0.32;
  filter: blur(0.3px);
  mask: radial-gradient(circle, transparent 0 70%, #000 71% 72.5%, transparent 73.5%);
}

.home-reset-orb .breath-pulse {
  inset: auto;
  left: 50%;
  top: 50%;
  width: 62%;
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 232, 192, 0.34), transparent 36%),
    radial-gradient(circle at 50% 50%, rgba(255, 199, 107, 0.30), transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(242, 181, 140, 0.16), transparent 80%);
  opacity: calc(0.16 + (var(--breath-value) * 0.78));
  transform: translate(-50%, -50%) scale(calc(0.58 + (var(--breath-value) * 0.66)));
  filter: blur(1px);
  transition: opacity 180ms linear, transform 180ms linear, background 800ms ease;
}

.home-reset-orb[data-phase="exhale"] .breath-pulse {
  background:
    radial-gradient(circle at 50% 50%, rgba(208, 196, 222, 0.22), transparent 38%),
    radial-gradient(circle at 50% 50%, rgba(176, 162, 191, 0.20), transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(109, 98, 120, 0.16), transparent 80%);
}

.home-reset-orb .breath-aperture {
  inset: auto;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 38%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(242, 237, 227, 0.13);
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 0 49.5%, rgba(242, 237, 227, 0.10) 49.5% 50.5%, transparent 50.5%),
    linear-gradient(0deg, transparent 0 49.5%, rgba(242, 237, 227, 0.08) 49.5% 50.5%, transparent 50.5%),
    conic-gradient(
      from -90deg,
      rgba(214, 178, 122, 0.18),
      transparent 42deg,
      rgba(184, 163, 212, 0.12) 96deg,
      transparent 154deg,
      rgba(214, 178, 122, 0.16) 236deg,
      transparent 314deg,
      rgba(214, 178, 122, 0.18)
    );
  box-shadow:
    0 0 0 1px rgba(214, 178, 122, 0.04) inset,
    0 0 52px rgba(214, 178, 122, 0.08);
  opacity: 1;
  transform: translate(-50%, -50%) scale(calc(0.88 + (var(--breath-value) * 0.12)));
  transition: transform 4s cubic-bezier(0.45, 0, 0.55, 1);
}

.home-reset-orb .breath-aperture::before,
.home-reset-orb .breath-aperture::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.home-reset-orb .breath-aperture::before {
  top: 22%;
  width: 30%;
  height: 1px;
  border-radius: 999px;
  background: rgba(244, 216, 156, 0.72);
  box-shadow: 0 0 16px rgba(214, 178, 122, 0.22);
  opacity: calc(0.44 + (var(--breath-value) * 0.18));
}

.home-reset-orb .breath-aperture::after {
  width: 68%;
  height: 68%;
  border: 1px solid rgba(214, 178, 122, 0.16);
  border-radius: 50%;
  opacity: calc(0.32 + (var(--breath-value) * 0.20));
}

.home-reset-orb .breath-cardinals {
  z-index: 1;
  inset: 9%;
  opacity: 0.15;
  filter: blur(0.4px);
  transform: rotate(calc(var(--phase-progress) * 10deg));
  transition: opacity 180ms linear;
}

.home-reset-orb .breath-cardinals span {
  position: absolute;
  width: 26px;
  height: 1px;
  background:
    linear-gradient(90deg, transparent, rgba(244, 216, 156, 0.64), transparent);
  opacity: 0.46;
}

.home-reset-orb .breath-cardinals .north,
.home-reset-orb .breath-cardinals .south {
  left: 50%;
  transform: translateX(-50%);
}

.home-reset-orb .breath-cardinals .east,
.home-reset-orb .breath-cardinals .west {
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
}

.home-reset-orb .breath-cardinals .north { top: 4%; }
.home-reset-orb .breath-cardinals .east { right: 4%; }
.home-reset-orb .breath-cardinals .south { bottom: 4%; }
.home-reset-orb .breath-cardinals .west { left: 4%; }

.home-reset-orb .breath-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  overflow: visible;
}

.home-reset-orb .ring-track,
.home-reset-orb .ring-fill,
.home-reset-orb .breath-phase-ring {
  fill: none;
}

.home-reset-orb .ring-track {
  stroke: rgba(242, 237, 227, 0.13);
  stroke-width: 1px;
}

.home-reset-orb .ring-fill {
  stroke: rgba(226, 191, 125, 0.98);
  stroke-width: 1.4px;
  stroke-linecap: round;
  stroke-dasharray: 565.49;
  stroke-dashoffset: 565.49;
  filter: drop-shadow(0 0 14px rgba(255, 199, 107, 0.40));
  transition: stroke 600ms ease;
}

.home-reset-orb .breath-phase-ring {
  stroke: rgba(255, 199, 107, 0.46);
  stroke-width: 1.4px;
  stroke-linecap: round;
  stroke-dasharray: 464.96;
  stroke-dashoffset: 464.96;
  filter:
    drop-shadow(0 0 6px rgba(255, 199, 107, 0.42))
    drop-shadow(0 0 2px rgba(255, 199, 107, 0.62));
}

.home-reset-orb[data-phase="exhale"] .ring-fill {
  stroke: rgba(186, 172, 202, 0.88);
}

.home-reset-orb[data-phase="exhale"] .breath-phase-ring {
  stroke: rgba(186, 172, 202, 0.50);
  filter: drop-shadow(0 0 6px rgba(176, 162, 191, 0.40));
}

.home-reset-orb[data-phase="hold"] .ring-fill {
  stroke: rgba(244, 238, 228, 0.80);
  transition: stroke 320ms ease;
}

.home-reset-orb .orb-lite-phase {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 74%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 9px;
  text-align: center;
}

.home-reset-orb .breath-label {
  color: rgba(244, 239, 230, 0.55);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: none;
  font-variant-caps: all-small-caps;
  text-shadow: none;
}

.home-reset-orb .breath-countdown {
  color: rgba(244, 239, 230, 0.98);
  font-family: var(--font-display);
  font-size: clamp(78px, 22vw, 112px);
  font-weight: 440;
  line-height: 0.9;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 24px rgba(255, 199, 107, 0.16), 0 14px 60px rgba(0, 0, 0, 0.50);
  transition: opacity 700ms cubic-bezier(0.5, 0, 0.5, 1);
}

.home-reset-orb .breath-sub,
.home-reset-orb .status-line {
  color: rgba(242, 237, 227, 0.42);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.10em;
  line-height: 1.45;
  text-transform: none;
  font-variant-caps: all-small-caps;
}

.home-reset-orb .breath-sub {
  display: block;
  max-width: 190px;
}

.home-reset-orb .status-line {
  margin: 12px 0 0;
  text-align: center;
  color: rgba(21, 17, 27, 0.50);
}

.home-reset-orb .round-progress {
  display: none;
}

/* A faint amber bloom behind the dial frame, grounding it in the band light. */
.reset-glimpse-media::after {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -1;
  background: radial-gradient(60% 60% at 50% 45%,
    rgba(255, 199, 107, 0.12),
    transparent 70%);
  filter: blur(8px);
  pointer-events: none;
}
.reset-glimpse-copy .section-eyebrow {
  text-align: left;
}
.reset-glimpse-title {
  font-family: var(--font-display);
  font-weight: var(--serif-weight-soft);
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  line-height: 1.22;
  letter-spacing: -0.005em;
  color: var(--cream);
  margin: 0 0 var(--space-4);
  max-width: 22ch;
  text-wrap: balance;
}
.reset-glimpse-body {
  color: rgba(244, 238, 228, 0.90);
  line-height: 1.6;
  margin: 0;
  max-width: 44ch;
  text-shadow: 0 1px 10px rgba(20, 14, 24, 0.45);
}
@media (max-width: 760px) {
  .reset-glimpse {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    margin-top: var(--space-7);
    text-align: center;
  }
  .reset-glimpse-media img,
  .home-reset-orb {
    max-width: min(58vw, 236px);
  }
  .reset-glimpse-copy .section-eyebrow { text-align: center; }
  .reset-glimpse-title {
    margin-inline: auto;
  }
  .reset-glimpse-body {
    margin-inline: auto;
  }
}