/* ==========================================================================
   Expound — site styles. Consumes tokens.css semantic layer only.
   Discipline: no raw hex in this file. Hierarchy is built by de-emphasis.
   ========================================================================== */

/* ---- reset ---------------------------------------------------------------- */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

button, input { font: inherit; color: inherit; }

/* ---- a11y utilities -------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--sp-2); left: var(--sp-2);
  z-index: 100;
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg);
  color: var(--accent);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  transform: translateY(-200%);
  transition: transform 150ms var(--ease-page);
}
.skip-link:focus-visible { transform: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- typography ------------------------------------------------------------- */

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

h1 {
  font-size: var(--fluid-h1);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 700;
}

h2 {
  font-size: var(--fluid-h2);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h3 {
  font-size: var(--fluid-h3);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

p { max-width: 62ch; }

.lede {
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--text-2);
}

.tagline {
  font-family: var(--font-scripture);
  font-style: italic;
  font-size: var(--step-1);
  color: var(--text-2);
}

.scripture {
  font-family: var(--font-scripture);
  font-size: 18px;
  line-height: 30px; /* the app's exact setting */
}

.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* ---- buttons ----------------------------------------------------------------- */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 12px 28px;
  background: linear-gradient(to bottom, var(--btn-grad-a), var(--btn-grad-b));
  color: var(--btn-text);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: -0.01em;
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  text-decoration: none;
  transition: transform 150ms var(--ease-page), box-shadow 150ms var(--ease-page);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }
.btn-primary:active { transform: translateY(0) scale(0.98); }

.link-quiet {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.link-quiet:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ---- layout primitives ---------------------------------------------------------- */

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
}

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

.section-grouped { background: var(--bg-grouped); }

/* The story's dawn resolves into the daylight features surface, seam-flush
   in both schemes (.daylight pins --bg to --daylight; the dawn rises in the
   same token). The story's exit already gives the head a lit breath of
   travel, so the section opens tighter than the default rhythm. */
#features {
  padding-top: clamp(48px, 7vw, 88px);
  margin-top: -1px; /* svh rounding can leave a 1px strip of the page bg at the seam */
}

.section-head { max-width: var(--content-col); }
.section-head h2 { margin-bottom: var(--sp-3); }
.section-head p { color: var(--text-2); }
.section-standfirst { font-size: var(--step-1); max-width: 36ch; text-wrap: balance; }

/* ---- nav ---------------------------------------------------------------------- */

.nav-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  color: var(--text);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background-color 300ms var(--ease-page),
    border-color 300ms var(--ease-page),
    color 200ms var(--ease-page);
}

/* The scrolled state: liquid glass. */
.site-nav.condensed {
  background: var(--nav-veil);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  backdrop-filter: saturate(1.8) blur(20px);
  border-bottom-color: var(--hairline);
}

.nav-wordmark {
  display: block;
  width: 70px;
  height: 30px;
  background-color: currentColor;
  -webkit-mask: url("/assets/brand/wordmark-growth-ink.svg") no-repeat center / contain;
  mask: url("/assets/brand/wordmark-growth-ink.svg") no-repeat center / contain;
}

/* The bar reads the surface beneath it. main.js sets .on-night whenever a
   [data-surface="night"] region is under the bar: the hero, the whole story,
   and the philosophy interlude. Over night the glass is removed entirely
   rather than darkened, because the story's stage is a flat solid colour that
   needs no scrim and the liturgy should not be framed by a bar.
   Must follow .condensed: equal specificity, so source order decides. */
.site-nav.on-night {
  color: var(--text-inverse);
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
.site-nav.on-night .nav-links a { color: var(--text-inverse-2); }
.site-nav.on-night .nav-links a:hover { color: var(--text-inverse); }
.site-nav.on-night .nav-links .nav-cta {
  background: linear-gradient(to bottom, var(--btn-on-photo-a), var(--btn-on-photo-b));
  color: var(--btn-on-photo-text);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  height: 72px;
  transition: height 300ms var(--ease-page);
}
.site-nav.condensed .nav-inner { height: 56px; }

.nav-brand { display: inline-flex; align-items: center; color: inherit; }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  list-style: none;
  padding: 0;
}

.nav-links a {
  color: var(--text-2);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: var(--sp-2) 0;
  transition: color 150ms var(--ease-page);
}
.nav-links a:hover { color: var(--text); }

/* Scoped under .nav-links because `.nav-links a` (0,1,1) outranks a bare
   `.nav-cta` (0,1,0); unscoped, the link's `padding: 8px 0` won and the pill's
   label overhung its own background. */
.nav-links .nav-cta {
  min-height: 36px;
  padding: 6px 18px;
  font-size: 15px;
  border-radius: var(--r-sm);
}
/* .nav-links a's muted color must not reach the CTA pill's label */
.nav-links .nav-cta { color: var(--btn-text); }
.nav-links .nav-cta:hover { color: var(--btn-text); }

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  height: 1.5px;
  background: currentColor;
  transition: transform 300ms var(--ease-page), opacity 200ms;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 767px) {
  .menu-toggle { display: flex; }
  .nav-links {
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-2) var(--pad-inline) var(--sp-4);
    background: var(--bg);
    border-bottom: 1px solid var(--hairline);
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: var(--sp-3) 0; font-size: var(--step-0); }
  .nav-links .nav-cta {
    margin-top: var(--sp-3);
    justify-content: center;
  }
}

/* ---- hero ------------------------------------------------------------------------ */

.hero {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding: calc(clamp(56px, 8vw, 96px) + 72px) var(--pad-inline) clamp(48px, 9svh, 96px);
  text-align: center;
  background: var(--bg-inverse);
  color: var(--text-inverse);
  overflow: hidden;
}

.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 55%, var(--bg-inverse) 97%);
}

.hero > :not(.hero-photo) { position: relative; z-index: 1; }

.hero h1 {
  margin-inline: auto;
  margin-block: auto; /* centers the headline; the CTA stays pinned low */
  position: relative;
  top: -5svh; /* keep the whole headline above the book */
  color: var(--text-inverse);
}

.hero .h1-before {
  display: block;
  font-family: var(--font-scripture);
  font-style: italic;
  font-weight: 400;
  font-size: 0.92em;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--accent-on-dark);
}

.hero .btn-primary {
  background: linear-gradient(to bottom, var(--btn-on-photo-a), var(--btn-on-photo-b));
  color: var(--btn-on-photo-text);
}

@media (max-width: 767px) {
  .hero h1 {
    font-size: clamp(2.5rem, 11.5vw, 3rem);
  }
}

/* ---- story (liturgical pacing: asymmetric bars, composed silence, one climax)
   Base = flowing dark stanza, the complete experience for reduced-motion and
   non-supporting browsers. Motion is purely additive below. ---- */

.story {
  background: var(--bg-inverse);
  color: var(--text-inverse);
  min-height: 100svh;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2.5rem;
  padding: 18svh var(--pad-inline);
  text-align: center;
}
.stage, .beat { display: contents; }

.story .line--prose {
  font-size: clamp(1.375rem, 1.05rem + 1.6vw, 2.125rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  max-width: 22ch;
  text-wrap: balance;
}
.story .line--big {
  font-size: min(clamp(2.5rem, 1.4rem + 5vw, 4.75rem), 11vw);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
@media (max-width: 767px) {
  .story .line--big { font-size: min(clamp(2.5rem, 1.4rem + 5vw, 4.75rem), 8.8vw); }
}
.story .spirit {
  font-family: var(--font-scripture);
  font-style: italic;
  font-weight: 400;
  /* static tracking: animating letter-spacing would re-break balanced lines */
  letter-spacing: 0.01em;
  color: var(--accent-on-dark);
}
.story-tagline {
  font-family: var(--font-scripture);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 1.15rem + 1.8vw, 2.375rem);
  line-height: 1.35;
  max-width: 24ch;
  text-wrap: balance;
}
/* presentation-only layers stay out of the static page */
.story-tagline--ink, .dawn { display: none; }

/* ============ the choreography ============
   The pinned stage, the track height, and every animation live inside these
   two gates, so reduced-motion never builds a pin. Ordering is load-bearing:
   the `animation` shorthand RESETS animation-timeline and animation-range,
   so the shorthand always comes first. */
@media (prefers-reduced-motion: no-preference) {
  @supports (timeline-scope: --story) {

    /* hero hands the scroll off: holds, then releases upward */
    .hero h1,
    .hero .hero-cta {
      animation: hero-release 1ms linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 85%;
    }
    @keyframes hero-release {
      0%, 41% { opacity: 1; transform: none; }
      100%    { opacity: 0; transform: translateY(-16px); }
    }

    /* the track and the pinned stage */
    .story {
      display: block;
      height: 600svh;                 /* + 100svh viewport = 700svh cover */
      view-timeline: --story block;
      min-height: 0;
      padding: 0;
      /* align-content applies to BLOCK containers in modern engines and
         would center the sticky stage partway down the track */
      align-content: normal;
      justify-items: normal;
      gap: normal;
    }
    .stage {
      display: grid;
      place-items: center;
      position: sticky;
      top: 0;
      height: 100svh;
      overflow: hidden;
      padding: 0 var(--pad-inline);
    }
    .beat {
      display: block;
      grid-area: 1 / 1;    /* all beats share the one cell */
      z-index: 1;          /* text always paints above the dawn layer */
    }

    /* — L1 · recitative — */
    .beat--intro {
      animation: intro-pass 1ms linear both;
      animation-timeline: --story;
      animation-range: contain 2% contain 19%;
    }

    /* — triad · crescendo by accumulation: each line enters and STAYS;
         the finished stack dims to gray; all three leave as one — */
    .beat--triad {
      display: grid;
      gap: 0.4em;
      justify-items: center;
      font-size: min(clamp(2.5rem, 1.4rem + 5vw, 4.75rem), 11vw);
      animation: triad-dim 1ms linear both;
      animation-timeline: --story;
      animation-range: contain 43% contain 46.5%;
    }
    .beat--triad .line--big { font-size: 1em; }
    .beat--triad .line--big:nth-child(1),
    .beat--triad .line--big:nth-child(2),
    .beat--triad .line--big:nth-child(3) {
      /* exit fills FORWARDS only — a backwards fill would override the
         entry animation's hidden state before the range */
      animation: line-in 1ms linear both, triad-out 1ms linear forwards;
      animation-timeline: --story, --story;
    }
    .beat--triad .line--big:nth-child(1) { animation-range: contain 21% contain 25%,   contain 48.5% contain 52.5%; }
    .beat--triad .line--big:nth-child(2) { animation-range: contain 26.5% contain 30%, contain 48.5% contain 52.5%; }
    .beat--triad .line--big:nth-child(3) { animation-range: contain 31.5% contain 36%, contain 48.5% contain 52.5%; }

    /* — THE REST lives between contain 52.5% and 61.5%: no element, no
         keyframes — every animation is out of range and the stage is empty — */

    /* — L5 · clause-by-clause assembly, then the SPOTLIGHT: the sentence
         recedes to gray first; "the Holy Spirit" blooms azure a beat later — */
    .beat--climax {
      animation: climax-pass 1ms linear both, spirit-dim 1ms linear forwards;
      animation-timeline: --story, --story;
      animation-range: contain 61.5% contain 89%, contain 79.5% contain 82.5%;
    }
    .beat--climax .phrase {
      animation: phrase-in 1ms linear both;
      animation-timeline: --story;
    }
    .beat--climax .phrase:nth-of-type(1) { animation-range: contain 61.5% contain 65.5%; }
    .beat--climax .phrase:nth-of-type(2) { animation-range: contain 67% contain 70%; }
    .beat--climax .phrase:nth-of-type(3) { animation-range: contain 72.5% contain 76%; }
    .beat--climax .spirit {
      animation: spirit-bloom 1ms linear both;
      animation-timeline: --story;
      animation-range: contain 79.5% contain 83.5%;
    }

    /* — L6 · cadence: two stacked copies crossfade at the dawn line — */
    .beat--tagline { display: grid; place-items: center; }
    .beat--tagline .story-tagline { grid-area: 1 / 1; }
    .story-tagline--light {
      animation: tag-arrive 1ms linear both, tag-out 1ms linear forwards;
      animation-timeline: --story, --story;
      animation-range: contain 89% contain 94.5%, contain 98% contain 99.75%;
    }
    .story-tagline--ink {
      display: block;
      color: var(--daylight-text); /* fixed ink — the flip must read in dark mode too */
      animation: tag-in 1ms linear both;
      animation-timeline: --story;
      animation-range: contain 98% contain 99.75%;
    }

    /* — dawn: a light gradient rises through the stage (transform only).
         The stage is fully light before it un-docks, so the exit seam is
         light-meets-light with the white section below — */
    .dawn {
      display: block;
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 200%;
      z-index: 0;
      /* --daylight, not --bg: the dawn must rise LIGHT in dark mode too,
         landing on the same surface the daylight sections open with */
      background: linear-gradient(to top, var(--daylight) 50%, transparent);
      transform: translateY(100%);
      animation: dawn-rise 1ms linear both;
      animation-timeline: --story;
      animation-range: contain 94.5% contain 100%;
    }

    /* Scrubbed timelines are linear; all easing lives in the keyframes:
       entries front-load and land early; exits hold, then let go. */
    @keyframes intro-pass {
      0%   { opacity: 0; transform: translateY(24px); filter: blur(2px); }
      12%  { opacity: 0.55; }
      29%  { opacity: 1; transform: none; filter: blur(0); }
      77%  { opacity: 1; transform: none; }
      100% { opacity: 0; transform: translateY(-16px); }
    }
    @keyframes line-in {
      0%   { opacity: 0; transform: translateY(0.5em); }
      55%  { opacity: 0.82; transform: translateY(0.08em); }
      88%, 100% { opacity: 1; transform: none; }
    }
    @keyframes triad-dim {
      to { color: var(--text-inverse-2); }
    }
    @keyframes triad-out {
      0%   { opacity: 1; }
      15%  { opacity: 0.97; }
      100% { opacity: 0; }
    }
    @keyframes climax-pass {
      0%   { transform: translateY(12px); }
      15%  { transform: none; }
      89%  { opacity: 1; transform: none; }
      100% { opacity: 0; transform: translateY(-16px); }
    }
    @keyframes phrase-in {
      0%   { opacity: 0; }
      45%  { opacity: 0.72; }
      88%, 100% { opacity: 1; }
    }
    @keyframes spirit-dim {
      to { color: var(--text-inverse-2); }
    }
    @keyframes spirit-bloom {
      from { color: var(--text-inverse); }
      to   { color: var(--accent-on-dark); }
    }
    @keyframes tag-arrive {
      0%   { opacity: 0; transform: translateY(16px); filter: blur(1.5px); }
      40%  { opacity: 0.7; filter: blur(0.4px); }
      73%, 100% { opacity: 1; transform: none; filter: blur(0); }
    }
    @keyframes tag-out {
      to { opacity: 0; }
    }
    @keyframes tag-in {
      from { opacity: 0; }
    }
    @keyframes dawn-rise {
      to { transform: translateY(0); }
    }

    /* mobile: shorter track; THE REST and the long hold stay near 40svh;
       blur dropped from the entries */
    @media (max-width: 767px) {
      .story { height: 540svh; }
      .beat--triad { font-size: min(clamp(2.5rem, 1.4rem + 5vw, 4.75rem), 8.8vw); }
      @keyframes intro-pass {
        0%   { opacity: 0; transform: translateY(24px); }
        12%  { opacity: 0.55; }
        29%  { opacity: 1; transform: none; }
        77%  { opacity: 1; transform: none; }
        100% { opacity: 0; transform: translateY(-16px); }
      }
      @keyframes tag-arrive {
        0%   { opacity: 0; transform: translateY(16px); }
        40%  { opacity: 0.7; }
        73%, 100% { opacity: 1; transform: none; }
      }
    }
  }
}

/* ---- device frame ------------------------------------------------------------------ */

.device {
  --dw: clamp(240px, 32vw, 360px);
  width: var(--dw);
  margin: 0;
  box-sizing: content-box;
  padding: calc(var(--dw) * 0.03);
  border-radius: calc(var(--dw) * 0.175);
  background: var(--device-bezel);
  box-shadow: inset 0 0 0 1.5px var(--device-ring), var(--shadow-device);
}

.device .screen {
  aspect-ratio: 402 / 874;
  border-radius: calc(var(--dw) * 0.148);
  overflow: hidden;
  background: var(--bg-inverse);
}

.device .screen > video,
.device .screen > img,
.device .screen picture,
.device .screen picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.demo-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 6px 16px;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--text-2);
  background: none;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: color 150ms var(--ease-page), border-color 150ms var(--ease-page);
}
.demo-toggle:hover { color: var(--text); border-color: var(--text-3); }

/* The figure wraps the device; the toggle sits below the frame, never inside it. */
.demo-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}

/* ---- feature sections ------------------------------------------------------------------ */

.feature {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: clamp(40px, 6vw, 88px);
}

/* Phrasing, not a metronome. Every row used to sit one --section-pad from the
   next, so five equal claims arrived at five equal intervals and none of them
   led. The thesis row is the rule the other four obey, so it is isolated by
   the section's two widest gaps; the three tools after it run as a closer
   group. Reading the gaps alone should say: here is the rule, and here are the
   tools that keep it. */
.section-head + .feature { margin-top: clamp(48px, 7vw, 88px); }
.feature + .feature { margin-top: clamp(64px, 9vw, 104px); }
/* both (0,2,0) like the rule above, so source order decides */
.feature + .feature--thesis,
.feature--thesis + .feature { margin-top: clamp(104px, 15vw, 176px); }

.feature-copy h3 { margin-bottom: var(--sp-3); max-width: 18ch; }
/* Between the section's h2 and body: three levels instead of six equal ones. */
.feature-copy h3 { font-size: clamp(1.625rem, 1.3rem + 1.5vw, var(--step-3)); }
.feature-copy p { color: var(--text-2); }
.feature-copy p + p { margin-top: var(--sp-3); }

.feature-visual { justify-self: center; margin: 0; }

/* two columns and the flip arrive at the same breakpoint — no orphan window */
@media (min-width: 900px) {
  .feature { grid-template-columns: 1fr 1fr; }
  .feature.flip .feature-copy { order: 2; }
  .feature.flip .feature-visual { order: 1; }
}

.feature-fact {
  margin-top: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-2);
}

/* ---- philosophy band ---------------------------------------------------------------------- */

/* Pure ink and typography: the one dark interlude after the dawn, identical
   in both schemes. The gold-on-ink mark is the brand's reserved moment. */
.philosophy {
  background: var(--bg-inverse);
  color: var(--text-inverse);
  padding-block: clamp(96px, 14vw, 168px);
}

.philosophy .container { text-align: center; }

.philosophy-mark {
  width: 44px;
  height: auto;
  margin: 0 auto var(--sp-5);
}

.philosophy h2 { color: var(--text-inverse); }

.philosophy .pillar-story {
  max-width: 58ch;
  margin: var(--sp-4) auto 0;
  color: var(--text-inverse-2);
}

.philosophy .credo {
  font-family: var(--font-scripture);
  font-style: italic;
  font-size: var(--fluid-h3);
  line-height: 1.4;
  max-width: 30ch;
  margin: var(--sp-6) auto 0;
  color: var(--text-inverse);
}

/* the same azure the hero's "before" and the story's climax spend */
.spirit-phrase { color: var(--accent-on-dark); white-space: nowrap; }

/* ---- pricing -------------------------------------------------------------------------------
   One decision, stated plainly. Free is open air: an uncarded ledger, the
   ground the product stands on. Pro is the single committed object on the
   page: one ink surface, the same material as the primary button. The vow
   leads the section instead of trailing it. No azure here; nothing in this
   section is interactive. ---- */

.pricing-vow {
  font-family: var(--font-scripture);
  font-style: italic;
  font-size: var(--step-1);
  color: var(--text-2);
  margin-top: var(--sp-3);
  max-width: 36ch;
  text-wrap: balance;
}

.pricing-plans {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  gap: clamp(var(--sp-6), 7vw, 96px);
  align-items: start;
  margin-top: var(--sp-6);
}

@media (max-width: 899px) {
  .pricing-plans { grid-template-columns: 1fr; gap: var(--sp-6); }
}

/* Free: no card, no bullets. A quiet ledger. */
.plan-free .plan-name {
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.plan-free .plan-price {
  margin-top: var(--sp-1);
  font-size: var(--step-1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.plan-free .plan-price small {
  font-size: var(--step-0);
  font-weight: 400;
  color: var(--text-2);
}

.plan-ledger {
  list-style: none;
  padding: 0;
  margin-top: var(--sp-4);
}
.plan-ledger li {
  padding-block: 14px;
  border-top: 1px solid var(--hairline);
  color: var(--text-2);
  line-height: 1.5;
  max-width: 44ch;
}
.plan-ledger li:last-child { border-bottom: 1px solid var(--hairline); }
.plan-ledger strong {
  color: var(--text);
  font-weight: 500;
}

/* Pro: the one committed object. Same material as the primary button. */
.plan-pro {
  background: linear-gradient(to bottom, var(--btn-grad-a), var(--btn-grad-b));
  color: var(--text-inverse);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-5);
  box-shadow: var(--shadow-device);
}

.plan-pro .plan-name {
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.plan-pro .plan-price {
  margin-top: var(--sp-3);
  font-size: var(--step-4);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.plan-pro .plan-price small {
  font-size: var(--step-0);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-inverse-2);
}

.plan-pro .plan-alt {
  margin-top: var(--sp-2);
  font-size: 15px;
  color: var(--text-inverse-2);
}

.plan-pro ul {
  list-style: none;
  padding: 0;
  margin-top: var(--sp-5);
  display: grid;
  gap: var(--sp-2);
}
.plan-pro li { line-height: 1.5; }
.plan-pro li.plan-baseline { color: var(--text-inverse-2); }

.plan-pro .plan-trial {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid color-mix(in srgb, var(--text-inverse) 16%, transparent);
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--text-inverse-2);
}


/* ---- FAQ ------------------------------------------------------------------------------------- */

.faq-list {
  max-width: var(--content-col);
  margin-top: var(--sp-5);
  border-top: 1px solid var(--hairline);
}

.faq-item { border-bottom: 1px solid var(--hairline); }

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  min-height: 44px;
  padding: var(--sp-3) 0;
  background: none;
  border: 0;
  text-align: left;
  font-size: var(--step-0);
  font-weight: 600;
  cursor: pointer;
}

.faq-q .chev {
  flex: none;
  width: 12px; height: 12px;
  border-right: 1.5px solid var(--text-3);
  border-bottom: 1.5px solid var(--text-3);
  transform: rotate(45deg);
  transition: transform 300ms var(--ease-page);
  margin-bottom: 4px;
}
.faq-q[aria-expanded="true"] .chev { transform: rotate(225deg); margin-bottom: -4px; }

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms var(--ease-page);
}
.faq-a > div { overflow: hidden; }
.faq-a p {
  padding-bottom: var(--sp-4);
  color: var(--text-2);
}
.faq-a p + p { margin-top: 0; padding-top: 0; }
.faq-item.open .faq-a { grid-template-rows: 1fr; }

/* ---- final CTA -------------------------------------------------------------------------------- */

.final-cta { text-align: center; }

.final-cta h2 { margin-inline: auto; max-width: 16ch; }

.final-cta .hero-cta { margin-top: var(--sp-5); }

.final-cta .tagline { margin-top: var(--sp-5); }

/* ---- footer -------------------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--hairline);
  padding-block: var(--sp-6);
  font-size: var(--step--1);
  color: var(--text-2);
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.footer-mark { height: 22px; width: auto; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  list-style: none;
  padding: 0;
}

.footer-links a {
  color: var(--text-2);
  text-decoration: none;
}
.footer-links a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }

.footer-legal {
  margin-top: var(--sp-5);
  display: grid;
  gap: var(--sp-2);
  color: var(--text-2);
}
.footer-legal p { max-width: none; }

/* ---- dialog (email capture) ------------------------------------------------------------------------ */

.get-dialog {
  width: min(92vw, 440px);
  border: 0;
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow-device);
}
.get-dialog::backdrop { background: var(--scrim); }

.get-dialog h2 {
  font-size: var(--step-2);
  margin-bottom: var(--sp-1);
}

.get-dialog .sub {
  color: var(--text-2);
  font-size: 15px;
  margin-bottom: var(--sp-4);
}

.get-dialog form { display: grid; gap: var(--sp-3); }

.get-dialog label {
  display: grid;
  gap: 6px;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--text-2);
}

.get-dialog input {
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  background: var(--bg);
  font-size: var(--step-0);
}

.get-dialog .form-status {
  min-height: 1.4em;
  font-size: var(--step--1);
}
.get-dialog .form-status.error { color: var(--error); }
.get-dialog .form-status.ok { color: var(--text); }

.dialog-close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--text-3);
  font-size: var(--step-1);
  line-height: 1;
  cursor: pointer;
}
.dialog-close:hover { color: var(--text); }

/* ---- motion -------------------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  html.js .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity var(--dur-reveal) var(--ease-page),
      transform var(--dur-reveal) var(--ease-page);
  }
  html.js .reveal.is-visible { opacity: 1; transform: none; }

  html.js .reveal-group > * { transition-delay: calc(var(--i, 0) * var(--stagger)); }
  html.js .reveal-group > :nth-child(2) { --i: 1; }
  html.js .reveal-group > :nth-child(3) { --i: 2; }
  html.js .reveal-group > :nth-child(4) { --i: 3; }
  html.js .reveal-group > :nth-child(5) { --i: 4; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-nav, .nav-inner, .faq-a, .menu-toggle span, .btn-primary { transition: none; }
}

/* ---- legal pages ------------------------------------------------------------------------------------------ */

.legal-page {
  max-width: var(--content-col);
  margin-inline: auto;
  padding: calc(var(--sp-6) + 72px) var(--pad-inline) var(--section-pad);
}

.legal-page h1 {
  font-size: var(--fluid-h2);
  margin-bottom: var(--sp-2);
}

.legal-page .effective-date {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-2);
  margin-bottom: var(--sp-5);
}

.legal-page .container {
  max-width: none;
  padding-inline: 0;
}

.legal-page h2 {
  font-size: var(--fluid-h3);
  margin: var(--sp-5) 0 var(--sp-3);
}

.legal-page p, .legal-page li {
  color: var(--text-2);
  line-height: 1.6;
  margin-bottom: var(--sp-3);
}

.legal-page ul { padding-left: 1.2em; }
.legal-page li { margin-bottom: var(--sp-2); }

.legal-page strong { color: var(--text); font-weight: 600; }

.legal-page a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}