/* ==========================================================================
   Lumoro v2 "Dawn" homepage stylesheet
   SMS morning wellness. One calm text at sunrise, no app, no feed.

   Structure
   1.  Tokens                    moved to tokens.css (canonical source)
   2.  Reset and base           dark plum page, cream Sora body
   3.  Typography helpers        Fraunces display, accent word
   4.  Layout primitives         container, section rhythm, hairlines
   5.  Buttons and links         amber primary, ghost secondary
   6.  Dawn spine + skip link    fixed UI chrome
   7.  Reveal arming             opt-in hide for JS-driven animation
   8.  Section 1  hero           cloudfire video over dawn fallback
   9.  Section 2  problem
   10. Section 3  product        box-breathing reset preview
   11. Section 4  proof          single proof modules, sage hairlines
   12. Section 5  pricing        warmest, two editorial price cards
   13. Section 6  FAQ            details, founder quote, quiet footer
   14. Responsive                mobile-first refinements at 768px
   15. Reduced motion            static dawn, everything visible
   No em dashes in comments. Commas and parentheses only.
   ========================================================================== */

/* 1. TOKENS ================================================================= */
/* :root tokens moved to tokens.css (canonical) */

/* 2. RESET AND BASE ========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 360;
  line-height: 1.62;
  letter-spacing: 0.002em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
canvas,
svg {
  display: block;
  max-width: 100%;
}

p {
  margin: 0 0 var(--space-4);
  max-width: var(--measure);
  /* Avoid short last-line runts in body copy (progressive; ignored where unsupported). */
  text-wrap: pretty;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

strong,
b {
  font-weight: 500;
}

::selection {
  background: rgba(255, 199, 107, 0.30);
  color: var(--cream);
}

/* 3. TYPOGRAPHY HELPERS ===================================================== */
.hero-title,
.section h2 {
  font-family: var(--font-display);
  font-weight: var(--serif-weight);
  font-style: normal;
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--cream);
  text-wrap: balance;
}

.section h2 {
  font-size: clamp(2.1rem, 3.8vw, 3.1rem);
  line-height: 1.04;
  margin: 0 0 var(--space-4);
  max-width: 20ch;
}

.section h3 {
  font-family: var(--font-display);
  font-weight: var(--serif-weight-soft);
  font-size: var(--step-2);
  line-height: 1.18;
  letter-spacing: -0.005em;
  margin: 0 0 var(--space-3);
  color: var(--cream);
}

/* The single signature serif word: amber, italic, a touch heavier optic. */
.accent-word {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 460;
  font-size: 1.06em;
  font-optical-sizing: auto;
  color: var(--amber);
  letter-spacing: -0.005em;
  /* A soft amber bloom so the one signature word reads as the crest of the line. */
  text-shadow: 0 0 24px rgba(255, 199, 107, 0.18);
}

/* Small label that opens each section. max-width: none lets the label box span
   the centered column so the text truly sits on the center axis. */
.eyebrow,
.hero-eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0 0 var(--space-3);
  max-width: none;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--cream);
}

.muted {
  color: var(--oat);
}

/* 4. LAYOUT PRIMITIVES ====================================================== */
.container,
.section-inner,
.hero-inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--outer-pad);
}

.section {
  position: relative;
  padding-block: var(--section-pad);
}

/* ONE calm centered river. Every section is a single centered content column;
   titles, eyebrows, and short prose sit on the page's center axis. Module sets
   (proof 3-up, price cards, FAQ accordion) stay left-aligned INSIDE the centered
   column so multi-line reading stays comfortable. No asymmetric grid, no
   left-right zigzag, no section numbering. */
.section-inner {
  display: block;
  max-width: 820px;
  text-align: center;
}

.section-inner .section-title {
  margin-inline: auto;
}

/* Short narrative prose: centered, one calm measure. */
.section-body {
  max-width: 52ch;
  margin: var(--space-4) auto 0;
}
.section-body p {
  margin: 0 0 var(--space-4);
  margin-inline: auto;
  color: var(--oat);
  line-height: 1.6;
}
.section-body p:last-child {
  margin-bottom: 0;
}

/* Sage hairline divider, used between editorial modules. */
.hairline {
  border: 0;
  height: 1px;
  background: var(--hairline);
  margin-block: var(--space-7);
  width: 100%;
}

/* 5. BUTTONS AND LINKS ====================================================== */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 13px 28px;
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 500;
  letter-spacing: 0.005em;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
  will-change: transform;
}

/* The one colored button on the page: amber fill, ink text. */
.button.primary {
  background: var(--amber);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12),
              0 12px 32px rgba(255, 199, 107, 0.16);
}

.button.primary:hover {
  background: var(--peach);   /* warm shift toward peach */
  transform: translateY(-1px);
}

.button.primary:active {
  transform: translateY(0);
}

/* Secondary actions are quiet: underlined text, never a second fill. */
.button.ghost,
.link-underline {
  background: transparent;
  color: var(--cream);
  padding: 13px 4px;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--hairline);
  font-weight: 460;
}

.button.ghost:hover,
.link-underline:hover {
  color: var(--amber);
  text-decoration-color: var(--amber);
}

/* Focus visible: 2px ring, contrast >= 3:1 against any background. */
a:focus-visible,
button:focus-visible,
.button:focus-visible,
summary:focus-visible,
details:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: 6px;
}

/* On the cream pricing band the amber ring needs an ink halo for 3:1. */
.offer .button.primary:focus-visible {
  outline-color: var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--amber);
}

/* CTA trust line under buttons. */
.cta-trust-line {
  font-size: var(--step--1);
  color: var(--oat);
  margin: var(--space-4) 0 0;
}

/* 6. DAWN SPINE + SKIP LINK ================================================ */
/* The top scroll-progress bar was removed in wave 5: two progress indicators
   read as app chrome on a calm brand. The dawn-spine below is the one scroll
   cue, and it reads as sunrise light rather than UI. */

/* Dawn-spine: fixed vertical rail on the left, a faint sage track with an amber
   gradient fill that grows top-down with scroll (home.js sets --spine on the
   fill's scaleY). Reads as the sunrise climbing the page. Desktop only. */
.dawn-spine {
  position: fixed;
  top: 14vh;
  bottom: 14vh;
  left: clamp(18px, 3.4vw, 48px);
  width: 2px;
  z-index: 8000;
  border-radius: 2px;
  background: linear-gradient(180deg,
    rgba(169, 191, 163, 0.20),
    rgba(169, 191, 163, 0.06));
  pointer-events: none;
  overflow: hidden;
}
.dawn-spine-fill {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: linear-gradient(180deg,
    var(--sage) 0%,
    var(--peach) 58%,
    var(--amber) 100%);
  transform: scaleY(var(--spine, 0));
  transform-origin: top center;
  box-shadow: 0 0 10px rgba(255, 199, 107, 0.35);
}
@media (max-width: 900px) {
  .dawn-spine { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  /* Static partial dawn instead of a scroll-driven fill. */
  .dawn-spine-fill { transform: scaleY(0.62); }
}

.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 10002;
  padding: 12px 18px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  background: var(--amber);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--step--1);
  border-radius: 8px;
  transition: top 160ms var(--ease);
}

.skip-link:focus {
  top: 12px;
}

/* Sticky header: slides in once the hero scrolls away (home.js toggles
   [data-hidden]) so the primary action is always reachable on a long page. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 10px clamp(16px, 5vw, 40px);
  border-bottom: 1px solid rgba(169, 191, 163, 0.16);
  transform: translateY(0);
  transition: transform 360ms var(--ease);
  /* No will-change here: promoting this fixed header to its own layer makes
     headless/real WebKit drop the element's OWN background+border raster while
     children still paint (naked wordmark over light content). */
}
/* WebKit refuses to paint this header's translucent surface when
   backdrop-filter is involved (tried on the element and on a pseudo; the
   filter's backdrop-root isolation swallows it both ways), leaving the
   wordmark naked over light content on real iPhones. So: no blur, just a
   near-opaque ink surface. Calmer anyway.
   Round E (council): 0.88 still ghosted section text through the bar at
   full hierarchy-destroying contrast. Near-solid surface + a short fade
   skirt below it so scrolling text dissolves before reaching the wordmark. */
.site-header {
  background: rgba(21, 17, 27, 0.96);
}
.site-header::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 28px;
  background: linear-gradient(180deg, rgba(21, 17, 27, 0.55), transparent);
  pointer-events: none;
}
.site-header[data-hidden] {
  transform: translateY(-101%);
}
.site-header-mark {
  font-family: var(--font-display);
  font-weight: var(--serif-weight);
  font-size: var(--step-1);
  letter-spacing: 0.02em;
  color: var(--cream);
  line-height: 1;
}
.site-header-cta.button.primary {
  min-height: 40px;
  padding: 9px 20px;
  font-size: var(--step--1);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), 0 8px 22px rgba(255, 199, 107, 0.20);
}
@media (max-width: 480px) {
  .site-header { padding: 8px 16px; }
  .site-header-cta.button.primary { padding: 9px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}

/* In-page anchor targets (#product, #pricing, #faq, the wordmark's #hero, the skip
   link's #main) land below the fixed header instead of underneath it. */
:root {
  --home-anchor-offset: 112px;
}

section[id],
main[id] {
  scroll-margin-top: var(--home-anchor-offset);
}

/* 7. REVEAL ARMING ========================================================== */
/* Default state: fully visible. Hidden ONLY once home.js opts in by adding
   html.scroll-animate, so no-JS, no-video, and reduced-motion all stay shown. */
html.scroll-animate .scroll-reveal {
  opacity: 0;
  transform: translateY(28px);
  will-change: opacity, transform;
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}

html.scroll-animate .scroll-reveal.is-in {
  opacity: 1;
  transform: none;
}

.will-animate {
  will-change: opacity, transform;
}

/* 8. SECTION 1  HERO ======================================================== */
.hero {
  position: relative;
  /* One composed launch frame, not a pinned effects scene. The video carries
     the cloudfire; CSS adds static fallback, lensing, and contrast. */
  min-height: min(82svh, 700px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: clamp(38px, 5vh, 68px);
  text-align: center;
  isolation: isolate;
  overflow: hidden;
  /* Fallback stack: poster first, then dawn gradients if media cannot load. */
  background:
    url("/static/v2/img/hero-cloudfire-cyclic60-075-20260613-web-poster.jpg") center center / cover no-repeat,
    radial-gradient(34% 26% at 50% 101%,
      rgba(255, 224, 158, 0.85),
      rgba(255, 199, 107, 0.40) 45%,
      transparent 72%),
    radial-gradient(120% 80% at 60% 92%,
      rgba(255, 199, 107, 0.55),
      rgba(242, 181, 140, 0.25) 35%,
      transparent 60%),
    radial-gradient(80% 60% at 18% 95%,
      rgba(169, 191, 163, 0.18),
      transparent 55%),
    linear-gradient(180deg,
      #15111B 0%,
      #2A2030 38%,
      #5A3B47 66%,
      #C98A6E 88%,
      #F2B58C 100%);
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  object-fit: cover;
  object-position: 50% 50%;
  pointer-events: none;
  background: #15111B url("/static/v2/img/hero-cloudfire-cyclic60-075-20260613-web-poster.jpg") center center / cover no-repeat;
  opacity: 0;
  transition: opacity 540ms linear;
  transform: translateZ(0);
}

.hero-video.is-active {
  opacity: 1;
}

.hero-video.is-seam-fading {
  will-change: opacity;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero::before {
  background:
    radial-gradient(ellipse 74% 54% at 50% 54%,
      transparent 0%,
      rgba(21, 17, 27, 0.10) 58%,
      rgba(21, 17, 27, 0.62) 100%),
    linear-gradient(180deg,
      rgba(21, 17, 27, 0.58) 0%,
      rgba(21, 17, 27, 0.04) 34%,
      rgba(21, 17, 27, 0.18) 72%,
      rgba(21, 17, 27, 0.56) 100%);
}

.hero::after {
  background:
    radial-gradient(ellipse 42% 22% at 50% 94%,
      rgba(255, 230, 166, 0.62),
      rgba(255, 199, 107, 0.24) 48%,
      transparent 72%),
    linear-gradient(180deg,
      transparent 0%,
      transparent 72%,
      rgba(255, 199, 107, 0.12) 100%);
  opacity: 0.82;
}

.hero-inner {
  position: relative;
  z-index: 2;
}

.hero-copy {
  position: relative;
  max-width: 46ch;
  padding: clamp(8px, 2vw, 16px);
  margin-inline: auto;
  text-align: center;
  border-radius: 18px;
}

/* Subtle scrim so text holds WCAG AA over the lightest gradient frame:
   AA 4.5:1 for body, 3:1 for the large H1. Soft, not a hard box. */
.hero-copy::before {
  content: "";
  position: absolute;
  inset: -14% -16% -16% -16%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse 70% 60% at 50% 48%,
    rgba(21, 17, 27, 0.58),
    rgba(21, 17, 27, 0.32) 52%,
    transparent 76%);
  filter: blur(10px);
  pointer-events: none;
}

.hero-title {
  font-size: 4.65rem;
  letter-spacing: 0;
  line-height: 1;
  margin: 0 auto var(--space-4);
  max-width: 16ch;
  /* LCP element. Plain text, no transition, paints immediately. */
}

@media (max-width: 1120px) and (min-width: 769px) {
  .hero-title {
    font-size: 4.1rem;
  }
}

.hero-sub {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--cream);
  max-width: 40ch;
  margin: 0 auto var(--space-5);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin: 0 0 var(--space-4);
}

.hero .button.primary {
  box-shadow:
    0 16px 38px rgba(21, 17, 27, 0.28),
    0 0 30px rgba(255, 199, 107, 0.18);
}

.hero-form {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 480px;
}

.hero-input {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 300;
  -webkit-appearance: none;
  outline: none;
}

.hero-input::placeholder {
  color: var(--oat);
  opacity: 0.6;
}

.hero-input:focus {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.12);
}

.hero-proof {
  margin: var(--space-4) 0 0;
  font-size: var(--step--1);
  color: var(--oat);
  letter-spacing: 0.01em;
}

/* 9. SECTION 2  PROBLEM ===================================================== */
/* The hero foot is bright peach; carry that dawn light down into the top of the
   first band and fade it to ink over ~30% so the sky SETS into the section
   instead of hard-cutting at a bright-to-dark seam. The warm bleed also reads as
   the clouds continuing past the hero edge. */
/* The dark narrative bands flow as ONE continuous twilight, not stacked flat
   blocks: each section's base is a vertical gradient whose bottom color equals
   the next section's top color, so the boundaries dissolve. The arc still climbs
   warmer toward the cream pricing climax. */
#problem {
  background:
    linear-gradient(180deg,
      rgba(242, 181, 140, 0.42) 0%,
      rgba(242, 181, 140, 0.18) 12%,
      rgba(201, 138, 110, 0.07) 24%,
      transparent 44%),
    linear-gradient(180deg, #1E1824 0%, #241B28 100%);
}

#problem h2 {
  max-width: 16ch;
}

/* 10. SECTION 3  PRODUCT ==================================================== */
#product {
  background:
    radial-gradient(74% 82% at 50% 52%, rgba(36, 22, 40, 0.12), transparent 78%),
    #E8E1D4;
  position: relative;
}

#product h2,
#product .reset-glimpse-title,
#product .method-token-line,
#product .founder-note p:not(.founder-note-kicker):not(.founder-note-sig),
#product .founder-sig-name {
  color: var(--ink);
  text-shadow: none;
}

#product .section-eyebrow,
#product .reset-glimpse-copy .section-eyebrow,
#product .founder-note-kicker,
#product .founder-sig-role {
  color: var(--plum-mauve);
}

#product .reset-glimpse {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top-color: rgba(21, 17, 27, 0.14);
  align-items: center;
}

#product .reset-glimpse-body {
  color: rgba(21, 17, 27, 0.72);
  text-shadow: none;
}

#product .reset-glimpse-media::after {
  background: radial-gradient(60% 60% at 50% 45%,
    rgba(255, 199, 107, 0.18),
    transparent 70%);
}

#product .breath-line,
#product .method-token-sub {
  color: rgba(21, 17, 27, 0.72);
  text-shadow: none;
}

#product .founder-note-row,
#product .method-token {
  border-color: rgba(21, 17, 27, 0.14);
}

#product .link-underline {
  color: var(--ink);
  text-decoration-color: rgba(21, 17, 27, 0.28);
}

#product .link-underline:hover {
  color: var(--plum-mauve);
  text-decoration-color: var(--plum-mauve);
}

.what-list {
  display: grid;
  gap: var(--space-6);
}

.what-list .what-item {
  padding-top: var(--space-5);
  border-top: 1px solid var(--hairline-faint);
}

.what-list .what-item:first-child {
  border-top: 0;
  padding-top: 0;
}

/* 11. SECTION 4  PROOF ====================================================== */
.experience {
  /* Flows from the product band into #proof's top (#352330). */
  background: linear-gradient(180deg, #2C1F2E 0%, #352330 100%);
  position: relative;
  overflow: hidden;
}

/* (The legacy lower-right warm pool moved into the .section-sky halo layer
   in Round C; .experience::after retired.) */

.experience .section-inner {
  position: relative;
  z-index: 1;
}

/* 12. SECTION 4  PROOF ====================================================== */
#proof {
  /* Warm corner pools + a 'first light' break at the bottom into the cream band,
     over a base that flows from the product section up warming toward the
     cream climax. */
  background:
    radial-gradient(80% 90% at 4% 4%, rgba(255, 199, 107, 0.07), transparent 58%),
    radial-gradient(70% 80% at 98% 96%, rgba(242, 181, 140, 0.09), transparent 60%),
    linear-gradient(0deg, rgba(234, 224, 208, 0.13), rgba(242, 181, 140, 0.05) 7%, transparent 13%),
    linear-gradient(180deg, #352330 0%, #412C38 100%);
}

/* The dark proof band ends where the cream pricing climax begins. An 80px
   gradient seam (transparent -> the offer's cream) at the foot of #proof so
   the dark-to-light transition reads as first light, not a hard cut.
   (#proof::before is the ember layer in home-motion.css; ::after is free.
   home-motion.css already sets #proof { position: relative; }.) */
#proof::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  background: linear-gradient(180deg, rgba(234, 224, 208, 0), var(--surface-pricing));
  pointer-events: none;
}

.proof-stack {
  display: grid;
  gap: 0;
  max-width: 880px;
}

/* Not boxed cards. Editorial modules separated by sage hairlines. */
.single-proof-card {
  padding-block: var(--space-7);
  border-top: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.single-proof-card:first-child {
  border-top: 0;
  padding-top: 0;
}

.single-proof-card .proof-quote {
  font-family: var(--font-display);
  font-weight: var(--serif-weight-soft);
  font-size: var(--step-2);
  line-height: 1.32;
  letter-spacing: -0.005em;
  color: var(--cream);
  margin: 0;
}

.single-proof-card .proof-source {
  font-family: var(--font-body);
  font-size: var(--step--1);
  color: var(--sage);
  letter-spacing: 0.04em;
}

.single-proof-card .proof-stat {
  font-family: var(--font-display);
  font-weight: 420;
  font-size: var(--step-3);
  color: var(--amber);
  line-height: 1;
}

/* 13. SECTION 6  PRICING (offer) ============================================ */
/* Brightest, warmest band: cream-tinted dawn. Text flips to ink here. */
.offer {
  background:
    radial-gradient(120% 90% at 78% 8%,
      rgba(255, 199, 107, 0.30), transparent 55%),
    radial-gradient(90% 80% at 12% 100%,
      rgba(242, 181, 140, 0.28), transparent 55%),
    var(--surface-pricing);
  color: var(--ink);
}

.offer h2,
.offer h3 {
  color: var(--ink);
}

.offer .eyebrow {
  color: var(--plum-mauve);
}

.offer p {
  color: rgba(21, 17, 27, 0.78);
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
  align-items: stretch;
  max-width: 800px;
  /* Centered block, left-aligned card text. */
  margin: var(--space-5) auto;
  text-align: left;
}

/* Editorial price cards: crisp lit objects on the cream band, not ghost panels. */
.price-card {
  position: relative;
  min-height: 100%;
  padding: clamp(26px, 3vw, 34px);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.80);
  border: 1px solid rgba(21, 17, 27, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 18px 48px rgba(58, 42, 62, 0.14);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  overflow: hidden;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease),
              border-color 220ms var(--ease);
}

.price-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg,
    rgba(255, 199, 107, 0.12),
    rgba(255, 199, 107, 0.78),
    rgba(242, 181, 140, 0.18));
  opacity: 0.72;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .price-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 199, 107, 0.36);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.7),
      0 20px 54px rgba(58, 42, 62, 0.18);
  }
}

/* The annual card is unmistakably the hero of the band: stronger amber frame
   and warm glow, while both cards keep equal height. */
.price-card.price-card-featured {
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.82),
    rgba(255, 199, 107, 0.32));
  border: 1.5px solid rgba(255, 199, 107, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 24px 60px rgba(255, 199, 107, 0.22);
}
/* Glow lift added by home.js after the cascade settles (class transition, not a
   per-frame box-shadow tween). */
.price-card.price-card-featured.is-glowing {
  transition: box-shadow 900ms var(--ease);
  box-shadow:
    0 0 26px rgba(255, 199, 107, 0.30),
    0 24px 60px rgba(255, 199, 107, 0.24);
}

.price-card .price-plan {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plum-mauve);
  margin: 0;
}

.price-card .price-amount {
  font-family: var(--font-display);
  font-weight: 420;
  font-size: var(--step-4);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}

.price-card .price-amount .price-cadence {
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  color: rgba(21, 17, 27, 0.62);
  letter-spacing: 0;
}

.price-card .price-note {
  font-size: var(--step--1);
  color: rgba(21, 17, 27, 0.70);
  margin: 0;
}

/* "Save $130" badge. Small tag radius per the design system. */
.price-card .price-card-flag {
  position: absolute;
  top: 16px;
  right: 16px;
  margin: 0;
  padding: 6px 14px;
  border-radius: 4px;
  background: var(--amber);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 14px rgba(255, 199, 107, 0.35);
}

.offer .price-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  text-align: center;
}

/* On the cream climax the amber CTA must be the most saturated object on screen,
   with even more presence than the hero button. */
.offer .price-actions .button.primary {
  padding: 16px 40px;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.12),
    0 16px 40px rgba(255, 199, 107, 0.40);
}

.offer .cta-trust-line {
  color: rgba(21, 17, 27, 0.80);
}

/* 14. SECTION 7  CLOSE  (FAQ, founder quote, footer) ======================== */
/* The cream pricing climax fades into the dusk close instead of hard-cutting:
   a faint warm bleed at the top settles into plum dusk, like the day's last
   light. Mirrors the hero -> #problem dawn seam at the other end of the arc. */
#faq {
  background:
    linear-gradient(180deg,
      rgba(234, 224, 208, 0.10) 0%,
      rgba(242, 181, 140, 0.045) 9%,
      transparent 24%),
    var(--surface-faq);
}

.faq-list {
  max-width: 680px;
  /* Centered as a block inside the river; question/answer text reads left. */
  margin: var(--space-5) auto var(--space-5);
  text-align: left;
}

.faq-list details {
  border-top: 1px solid var(--hairline);
  padding-block: var(--space-4);
}

.faq-list details:last-of-type {
  border-bottom: 1px solid var(--hairline);
}

.faq-list summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: var(--serif-weight-soft);
  font-size: var(--step-1);
  line-height: 1.3;
  color: var(--cream);
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

/* Plus (on the one accent color) that rotates to a minus when open. */
.faq-list summary::after {
  content: "+";
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--amber);
  transition: transform var(--dur) var(--ease);
  flex: none;
}

.faq-list details[open] summary::after {
  transform: rotate(45deg);
}

/* The answer eases open instead of hard-cutting on an otherwise animated page. */
.faq-list .faq-answer {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}
.faq-list details[open] .faq-answer {
  opacity: 1;
  transform: translateY(0);
}

.faq-list details > *:not(summary) {
  margin-top: var(--space-3);
  color: var(--oat);
  max-width: var(--measure);
}

/* Founder note + member quote: the proof section's human close. The note sits
   beside the one real quote on desktop, stacked on phones. Left-aligned text
   inside the centered river. */
.founder-note-row {
  display: block;
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--hairline);
}

.founder-note {
  text-align: left;
  max-width: 52ch;
  margin-inline: auto;
}

.founder-note-kicker {
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0 0 var(--space-4);
}

.founder-note p:not(.founder-note-kicker):not(.founder-note-sig) {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--serif-weight-soft);
  font-size: var(--step-1);
  line-height: 1.5;
  letter-spacing: -0.003em;
  color: var(--cream);
  margin: 0 0 var(--space-4);
  max-width: 52ch;
}

.founder-note-sig {
  margin: var(--space-5) 0 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
/* Round D: the signature is the section's one tangible thing. Large italic
   Fraunces name, quiet role tag, like a note actually signed. */
.founder-sig-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 420;
  font-size: clamp(1.7rem, 3vw, 2.1rem);
  line-height: 1;
  color: var(--cream);
  letter-spacing: 0.01em;
}
.founder-sig-role {
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
}

/* Quiet footer. */
footer {
  margin-top: 0;
  color: var(--oat);
  font-size: var(--step--1);
}

footer a {
  color: var(--oat);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--hairline);
}

footer a:hover {
  color: var(--cream);
}

/* 14. RESPONSIVE (mobile-first refinements at 768px) ======================== */
@media (max-width: 768px) {
  /* Tighten section rhythm on phones. The 96px+ desktop band reads as dead
     space on a narrow column, so pull it in for a denser, intentional flow. */
  :root {
    --section-pad: clamp(22px, 3vh, 32px);
    --outer-pad: clamp(20px, 6vw, 32px);
    --home-anchor-offset: 80px;
  }

  /* Tighten the display type a step so headlines do not run too tall on a
     375px column, and let them use the full width. */
  .section h2 {
    font-size: clamp(1.7rem, 6.6vw, 2.2rem);
    max-width: 100%;
  }

  .section-body {
    margin-top: var(--space-4);
  }

  /* The founder note and member quote stack on phones, note first. */
  .founder-note-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    margin-top: var(--space-6);
    padding-top: var(--space-5);
  }

  .hero {
    min-height: min(82vh, 700px);
    background:
      url("/static/v2/img/hero-cloudfire-cyclic60-075-20260613-mobile-poster.jpg") center center / cover no-repeat,
      radial-gradient(34% 26% at 50% 101%,
        rgba(255, 224, 158, 0.85),
        rgba(255, 199, 107, 0.40) 45%,
        transparent 72%),
      radial-gradient(120% 80% at 60% 92%,
        rgba(255, 199, 107, 0.55),
        rgba(242, 181, 140, 0.25) 35%,
        transparent 60%),
      radial-gradient(80% 60% at 18% 95%,
        rgba(169, 191, 163, 0.18),
        transparent 55%),
      linear-gradient(180deg,
        #15111B 0%,
        #2A2030 38%,
        #5A3B47 66%,
        #C98A6E 88%,
        #F2B58C 100%);
  }

  .hero-video {
    object-position: 50% 50%;
    background-image: url("/static/v2/img/hero-cloudfire-cyclic60-075-20260613-mobile-poster.jpg");
  }

  .hero-copy {
    padding: clamp(18px, 5vw, 26px);
    max-width: 100%;
  }

  .hero-title {
    font-size: clamp(2.6rem, 11vw, 3.4rem);
  }

  .hero-sub {
    font-size: var(--step-0);
    max-width: 100%;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }

  .hero-actions .button {
    width: 100%;
    font-size: var(--step--1);
    padding-inline: 16px;
  }

  .hero-form {
    flex-direction: column;
    max-width: 100%;
  }

  .hero-input {
    width: 100%;
    height: 48px;
  }

  #product .section-body {
    margin-top: var(--space-3);
  }

  .price-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    margin-block: var(--space-3);
  }

  /* Comfortable, not cavernous, padding inside the stacked price cards. */
  .price-card {
    padding: var(--space-4) var(--space-5);
    gap: var(--space-2);
  }

  .offer .price-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .offer .price-actions .button {
    width: 100%;
  }

}

/* 15. REDUCED MOTION ======================================================== */
/* Everything visible, nothing hidden, hero keeps its poster/dawn fallback
   with no dependence on video playback or JS. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* Force-reveal even if home.js had armed the scroll-animate class. */
  html.scroll-animate .scroll-reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .button.primary:hover {
    transform: none;
  }
}