:root {
  --bg:            #F8F0E2;
  --surface:       #FFFAF2;
  --surface-raised:#FFFFFF;
  --accent:        #C7763E;
  --accent-hover:  #B5683A;
  --accent-active: #A45D33;
  --accent-soft:   #F2D9BD;
  --ink:           #1C1F2E;
  --ink-soft:      #5C5752;
  --ink-faint:     #8C857A;
  --divider:       #D9CCB8;

  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --page-margin: 28px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-xxl: 64px;

  --radius-input: 14px;
  --radius-button: 14px;

  /* Reading column. Wide enough that the page doesn't read as
     under-filled on large desktop monitors (which is what 560px
     felt like) but narrow enough that the prose still wraps like
     a letter. Individual .letter paragraphs cap at 36em (~648px)
     so readability stays comfortable even if the page widens
     further later. */
  --reading-width: 720px;
}

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

html { scroll-behavior: smooth; }

body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
}

.page {
  flex: 1;
  width: 100%;
  max-width: var(--reading-width);
  margin: 0 auto;
  padding: clamp(40px, 6vh, 72px) var(--page-margin) var(--space-lg);
  display: flex;
  flex-direction: column;
}

/* — Brand header — */

.brand {
  margin-bottom: clamp(40px, 6vh, 72px);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.wordmark {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 24px;
  color: var(--accent);
  letter-spacing: 0.005em;
  line-height: 1;
}

/* Quiet release tag in serif italic — same family as the headline +
   the letter + the epigraph, so the page reads in one voice. The
   uppercase-tracked sans version we had before is the most common
   "editorial eyebrow" pattern in web design and reads as templated
   even when the copy doesn't. Italic Newsreader at body size with
   no tracking sits like a manuscript marginalia. */
.release-tag {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  color: var(--ink-faint);
  letter-spacing: 0.005em;
}

/* — Hero (just the headline; no subhead — the letter does that job) — */

.hero {
  margin-bottom: clamp(32px, 5vh, 56px);
}

.headline {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(34px, 5.8vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.014em;
  color: var(--ink);
  text-wrap: balance;
}

/* — Letter body (legacy — kept for backward compat in case
   anything still references it; new structure uses .prose) — */

.letter {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-bottom: clamp(48px, 7vh, 80px);
}

.letter p {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  text-wrap: pretty;
  max-width: 36em;
}

/* — Hero subhead (one line beneath the headline) — */

.hero-sub {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 2.4vw, 22px);
  line-height: 1.45;
  color: var(--ink-soft);
  text-wrap: pretty;
  max-width: 36em;
  margin-top: var(--space-md);
}

.hero-sub strong {
  font-weight: 500;
  font-style: italic;
  color: var(--ink);
}

/* — Prose sections (the new structured page body) —
   Each <section class="prose"> is a beat: an h2 title, then a
   short paragraph or two. Spaced so the page reads as a sequence
   of identifiable moments instead of one continuous letter. */

.prose {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: clamp(40px, 6vh, 64px);
}

.prose h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.006em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}

.prose p {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  text-wrap: pretty;
  max-width: 36em;
  margin: 0;
}

/* Bold thesis phrases inside prose paragraphs. The page picks them
   sparingly (3 places) to land the strongest sentences as visual
   punctums without the SaaS-broadcast register over-bolding
   creates. Slightly heavier weight + full ink color (vs the body's
   400/--ink) but not aggressive. */
.prose strong {
  font-weight: 600;
  color: var(--ink);
}

/* — Inline signup (between prose sections, above the screenshots) —
   No card chrome (no background, no border). Lives as a quiet
   moment between two beats of prose so users who are ready to
   commit before they finish reading have a clear place to do it.
   The full white card at the bottom remains the primary CTA;
   this one is the second chance. */

.inline-signup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  margin: clamp(40px, 6vh, 64px) 0;
  text-align: center;
}

.inline-signup-prompt {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 32em;
  margin: 0;
}

.inline-signup iframe {
  border: 0 !important;
  background-color: transparent !important;
  width: 100% !important;
  max-width: 540px !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  max-height: 140px !important;
}

/* — Moment (single product glimpse, integrated like a photograph) — */

.moment {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  margin-bottom: clamp(48px, 7vh, 80px);
}

.moment-lede {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 32em;
}

/* Phone left-aligned with the letter / hero / ledes. The whole page
   reads as a letter, top to bottom; centering the screenshots
   broke that rhythm and made them feel like a marketing showcase
   rather than two glimpses inside the prose. The sign-up card is
   the only thing on the page allowed to center its contents.

   Scroll-fade: starts hidden + slightly below resting position,
   becomes visible when the page's JS adds .is-visible on
   intersection. Animates once per page load. Reduced-motion
   override below skips the animation entirely. */
.phone-figure {
  display: flex;
  justify-content: flex-start;
  /* Reveal plays automatically on load (was scroll-gated, which
     left the first viewport looking like the whole page). */
  opacity: 0;
  transform: translateY(24px);
  animation: figureReveal 700ms cubic-bezier(0.2, 0.7, 0.3, 1) 150ms forwards;
  will-change: opacity, transform;
}

@keyframes figureReveal {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .phone-figure,
  .lp .phone-figure {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

.phone {
  width: 260px;
  padding: 3px;
  background: var(--ink);
  border-radius: 36px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 1px 2px rgba(28, 31, 46, 0.06),
    0 28px 48px -24px rgba(28, 31, 46, 0.28);
  transition: transform 320ms ease, box-shadow 320ms ease;
}

.phone:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 1px 2px rgba(28, 31, 46, 0.06),
    0 36px 56px -24px rgba(28, 31, 46, 0.32);
}

.phone img {
  width: 100%;
  aspect-ratio: 1170 / 2532;
  display: block;
  object-fit: cover;
  background: var(--surface);
  border-radius: 33px;
}

/* — Waitlist (quiet form, paper-card aesthetic) — */

/* The single surface on the page that center-aligns its contents.
   Acts as a small admission slip at the end of the letter: clearly
   demarcated, clearly the one place to act. Everything else on the
   page reads left-aligned so the eye flows top to bottom; this
   card breaks the rhythm intentionally because it's the CTA. */
.waitlist-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
  margin-bottom: clamp(48px, 7vh, 80px);
  padding: clamp(24px, 4vh, 36px) clamp(20px, 3vw, 28px);
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 18px;
}

.waitlist-lede {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 36em;
}

/* Form stacks vertically (input on top, button below) so the
   orange CTA sits centered as its own beat under the input rather
   than glued to the right side of a side-by-side row. Looks like
   a quiet two-step: type your email, then tap the button. */
.waitlist {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
}

.waitlist input[type="email"] {
  width: 100%;
  max-width: 360px;
}

.waitlist button {
  /* Width-fits the label so the button reads as a distinct action,
     not a full-width banner. align-items: center on .waitlist
     centers it horizontally. */
  align-self: center;
}

.waitlist input[type="email"] {
  min-width: 0;
  padding: 14px 16px;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--divider);
  border-radius: var(--radius-input);
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
  -webkit-appearance: none;
  appearance: none;
  text-align: center;
}

.waitlist input[type="email"]::placeholder {
  text-align: center;
}

.waitlist input[type="email"]::placeholder {
  color: var(--ink-faint);
}

.waitlist input[type="email"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(199, 118, 62, 0.15);
}

.waitlist button {
  padding: 14px 22px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: #FFFFFF;
  background: var(--accent);
  border: none;
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: background 140ms ease, transform 80ms ease;
  -webkit-appearance: none;
  appearance: none;
  letter-spacing: 0.005em;
}

.waitlist button:hover { background: var(--accent-hover); }
.waitlist button:active {
  background: var(--accent-active);
  transform: translateY(1px);
}

.form-note {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-faint);
  line-height: 1.5;
}

/* — Epigraph (left-aligned, sits like a margin gloss) — */

.epigraph {
  margin-bottom: clamp(48px, 7vh, 80px);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.epigraph-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink-soft);
  letter-spacing: 0.005em;
  max-width: 28em;
}

/* Attribution: serif italic with an em-dash prefix injected via
   ::before. Em-dash + name is the classical literary attribution
   form (think "— Melville") — distinct from the AI-tic em-dash
   mid-sentence we cleaned out of the body copy. Matches the
   release-tag treatment so the two small-text moments speak in
   the same voice. */
.epigraph-attribution {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  color: var(--ink-faint);
  letter-spacing: 0.005em;
}
.epigraph-attribution::before {
  content: "— ";
}

/* — Footer — */

.footer {
  margin-top: auto;
  padding-top: var(--space-xl);
  border-top: 1px solid var(--divider);
}

.footer nav {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.footer nav a {
  color: var(--ink-faint);
  text-decoration: none;
  transition: color 140ms ease;
}

.footer nav a:hover { color: var(--accent); }
.footer nav a:focus-visible {
  color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

/* — Beehiiv form integration —
   Beehiiv's loader.js injects the subscribe form inside the waitlist
   card. Its own CSS sometimes paints a white background on the
   form's outer container, breaking the cream-paper feel. These
   selectors force the wrapper transparent so the cream surface of
   .waitlist-block shows through. Works for div-based injection;
   has no effect on iframe inner content (use Beehiiv's Style tab
   to set the iframe's interior background). */
.waitlist-block iframe,
.waitlist-block iframe body,
.waitlist-block [class*="beehiiv"],
.waitlist-block [class*="Beehiiv"],
.waitlist-block [data-beehiiv-form],
.waitlist-block [data-beehiiv],
.waitlist-block div[id*="beehiiv"] {
  background: transparent !important;
  background-color: transparent !important;
}

/* Cap the form's width and center it. Beehiiv's embed otherwise stretches
   to the full card width with its content left-aligned, so the inputs hug
   the left edge on a wide card. */
.waitlist-block iframe {
  border: 0 !important;
  background-color: transparent !important;
  width: 100% !important;
  max-width: 540px !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}

/* v3 of Beehiiv's loader often injects the form as a same-origin
   <div>/<form>, not an <iframe> — which the iframe-only rule above missed,
   leaving it left-aligned. Center whichever element it drops in as a direct
   child. The lede + note are <p>, so they stay untouched. */
.waitlist-block,
.inline-signup { text-align: center; }
.waitlist-block > iframe, .waitlist-block > div, .waitlist-block > form,
.inline-signup > iframe, .inline-signup > div, .inline-signup > form {
  width: 100% !important;
  max-width: 540px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}

/* — Legal pages (privacy + terms) — */

/* Long-form prose container. Wider than the landing letter so legal
   text doesn't wrap awkwardly on tables / long URLs. Serif body for
   readability; same Newsreader as the rest of the site. */
.legal-page {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: clamp(40px, 6vh, 72px) var(--page-margin) clamp(60px, 8vh, 100px);
}

.legal-page .brand {
  margin-bottom: clamp(28px, 4vh, 48px);
}

.legal-page h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 5vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
}

.legal-page h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.25;
  color: var(--ink);
  margin-top: clamp(32px, 4vh, 48px);
  margin-bottom: var(--space-sm);
}

.legal-page h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 18px;
  color: var(--ink);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
}

.legal-page p,
.legal-page li {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: var(--space-sm);
  text-wrap: pretty;
}

.legal-page ul,
.legal-page ol {
  padding-left: 1.4em;
  margin-bottom: var(--space-md);
}

.legal-page li {
  margin-bottom: var(--space-xs);
}

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

.legal-page em {
  font-style: italic;
}

.legal-page a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 140ms ease;
}
.legal-page a:hover { color: var(--accent-hover); }

.legal-page hr {
  border: 0;
  border-top: 1px solid var(--divider);
  margin: clamp(40px, 5vh, 56px) 0;
}

.legal-page table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--serif);
  font-size: 15px;
  margin: var(--space-md) 0;
}

.legal-page th,
.legal-page td {
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--divider);
  vertical-align: top;
  line-height: 1.55;
}

.legal-page th {
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
}

.legal-page blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
  padding-left: var(--space-md);
  border-left: 2px solid var(--accent-soft);
  margin: var(--space-md) 0;
}

.legal-page .meta {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-faint);
  margin-bottom: var(--space-lg);
}

.legal-page .toc {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 14px;
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-xl);
}

.legal-page .toc p {
  margin-bottom: var(--space-xs);
  font-size: 15px;
}

.legal-page .back-link {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-faint);
  text-decoration: none;
  margin-bottom: var(--space-md);
  display: inline-block;
}
.legal-page .back-link:hover { color: var(--accent); }

/* — Responsive — */

/* Mobile (≤640px): the page is narrow enough that left-aligned
   phone figures sit awkwardly against the right margin. Center
   them so the rhythm matches the centered waitlist card below.
   The desktop left-alignment is intentional (phones read as
   inline glimpses inside the letter); on mobile the constraint
   inverts because the whole page becomes one column. */
@media (max-width: 640px) {
  .phone-figure {
    justify-content: center;
  }
  /* Maximize Beehiiv's iframe room on small screens so the full
     "Enter your email" placeholder renders, AND tighten the card's
     vertical rhythm (the iframe was reserving ~150px of vertical
     space for ~60px of form, leaving big cream gaps above and
     below the input).
       1. Wider breakout: -20px horizontal margins push the card
          to ~8px from each viewport edge.
       2. Almost no horizontal padding (4px) so iframe width is
          nearly the full card width.
       3. Tighter vertical padding (16px) so the lede and the
          trust line sit closer to the input.
       4. Smaller gap (12px) between lede / iframe / trust line so
          the column reads as one tight cluster instead of three
          separated rows.
       5. Cap the iframe's max-height so Beehiiv's reserved empty
          space is clipped. 140px fits input + button comfortably;
          anything past that is empty padding the iframe was
          painting itself. */
  .waitlist-block {
    margin-left: -20px;
    margin-right: -20px;
    padding: 8px 4px 16px;
    gap: 8px;
  }
  /* Cap iframe height to clip Beehiiv's reserved empty space,
     but keep it high enough that the form itself never clips.
     140px fits input + button comfortably; anything tighter
     started cutting the input's top edge on real renders. We
     accept some residual asymmetry above vs below the input
     (Beehiiv's internal form has more top padding than bottom)
     rather than overlapping content with negative margins. */
  .waitlist-block iframe {
    max-height: 140px !important;
  }

  /* Inline signup matches the bottom card's mobile breakout so
     both Beehiiv iframes render at the same width. Tighter
     margin top/bottom on mobile so the inline form sits as a
     quiet beat between prose sections instead of a tall gap. */
  .inline-signup {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: clamp(32px, 5vh, 48px);
    margin-bottom: clamp(32px, 5vh, 48px);
  }
}

@media (max-width: 480px) {
  .phone { width: 240px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ============================================================
   WAITLIST REDESIGN  (scoped to body.lp)
   Minimal, centered, FAQ-driven — built to read as a calm,
   trustworthy front door. Keeps the cream + terracotta brand;
   the .lp scope overrides the older literary-letter classes.
   ============================================================ */

body.lp {
  background:
    radial-gradient(130% 85% at 50% -15%, #FCEFDD 0%, rgba(252,239,221,0) 55%),
    #FFFAF2;
}

.lp-main { flex: 1; display: block; width: 100%; }

/* shared centered reading column */
.lp .hero,
.lp .faq,
.lp .closing,
.lp .epigraph {
  width: 100%;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-margin);
  padding-right: var(--page-margin);
}

/* — top bar — */
.topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 22px var(--page-margin);
}
.lp .wordmark {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 28px;
  color: var(--accent);
  letter-spacing: 0.2px;
  line-height: 1;
}
.topnav {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--divider);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.topnav:hover { color: var(--accent); border-color: var(--accent-soft); background: var(--surface); }

/* — hero — */
.lp .hero {
  text-align: center;
  padding-top: clamp(32px, 6vh, 80px);
  padding-bottom: clamp(8px, 2vh, 20px);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--accent-soft);
  padding: 7px 15px;
  border-radius: 999px;
  margin-bottom: 26px;
}
.display {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(40px, 7vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}
.lede {
  font-family: var(--sans);
  font-size: clamp(16px, 2.2vw, 18px);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 31em;
  margin: 22px auto 0;
  text-wrap: pretty;
}
.signup { width: 100%; margin-top: 30px; text-align: center; }
.microcopy {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-faint);
  margin-top: 14px;
}

/* Beehiiv form lives transparent inside .signup (the JS centers it). */
.signup iframe,
.signup [data-beehiiv-form],
.signup [class*="beehiiv"],
.signup [class*="Beehiiv"],
.signup [id*="beehiiv"] {
  background: transparent !important;
  background-color: transparent !important;
}

/* — showcase / device — */
.lp .showcase {
  position: relative;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(28px, 6vh, 60px) var(--page-margin) clamp(44px, 8vh, 96px);
}
.lp .showcase::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 14%;
  width: 480px;
  height: 480px;
  max-width: 90%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(199,118,62,0.18), rgba(199,118,62,0) 72%);
  pointer-events: none;
  z-index: 0;
}
.lp .phone-figure {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 32px;
  opacity: 0;
  transform: translateY(26px);
  animation: figureReveal 0.8s cubic-bezier(0.2,0.7,0.3,1) 150ms forwards;
  will-change: opacity, transform;
}
/* Two phones side by side, tops level. */
@media (max-width: 760px) {
  .lp .phone-figure { flex-direction: column; align-items: center; gap: 30px; }
}
.lp .phone {
  width: 300px;
  padding: 4px;
  background: var(--ink);
  border-radius: 42px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 2px 4px rgba(28,31,46,0.08),
    0 44px 80px -30px rgba(28,31,46,0.45);
}
.lp .phone img {
  width: 100%;
  aspect-ratio: 1170 / 2532;
  display: block;
  object-fit: cover;
  background: var(--surface);
  border-radius: 38px;
}

/* — FAQ — */
.lp .faq {
  padding-top: clamp(24px, 5vh, 56px);
  padding-bottom: clamp(24px, 5vh, 56px);
  text-align: center;
}
.faq-h {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(30px, 5vw, 40px);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.faq-intro {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink-faint);
  margin: 12px auto 32px;
}
.qa {
  text-align: left;
  background: var(--raised);
  border: 1px solid var(--divider);
  border-radius: 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(28,31,46,0.04), 0 14px 32px -22px rgba(28,31,46,0.20);
  transition: border-color 0.15s ease, box-shadow 0.2s ease;
}
.qa[open] { border-color: var(--accent-soft); box-shadow: 0 12px 32px -24px rgba(28,31,46,0.45); }
.qa summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 19px 22px;
  font-family: var(--sans);
  font-size: 16.5px;
  font-weight: 600;
  color: var(--ink);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--accent); }
.qa .plus {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}
.qa .plus::before,
.qa .plus::after {
  content: "";
  position: absolute;
  background: var(--accent);
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.qa .plus::before { left: 0; top: 8px; width: 18px; height: 2px; }
.qa .plus::after { left: 8px; top: 0; width: 2px; height: 18px; }
.qa[open] .plus::after { transform: rotate(90deg); opacity: 0; }
.qa p {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.62;
  color: var(--ink-soft);
  padding: 0 22px 22px;
  margin: 0;
}

/* — closing CTA — */
.lp .closing {
  text-align: center;
  padding-top: clamp(40px, 7vh, 80px);
  padding-bottom: clamp(56px, 9vh, 104px);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.closing-h {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 4vw, 34px);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 26px;
  text-wrap: balance;
}

/* — epigraph (recentred) — */
.lp .epigraph {
  text-align: center;
  padding-top: clamp(36px, 6vh, 64px);
  padding-bottom: clamp(16px, 3vh, 28px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
}
.lp .epigraph-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-soft);
  max-width: 26em;
}
.lp .epigraph-attribution {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-faint);
}
.lp .epigraph-attribution::before { content: "— "; }

/* — footer — */
.lp-footer {
  margin-top: auto;
  padding: 28px var(--page-margin) 40px;
  border-top: 1px solid var(--divider);
  text-align: center;
}
.lp-footer nav {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-faint);
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.lp-footer nav a { color: var(--ink-faint); text-decoration: none; transition: color 0.15s ease; }
.lp-footer nav a:hover { color: var(--accent); }
.lp-footer nav a:focus-visible { color: var(--accent); outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
.copyright { font-family: var(--sans); font-size: 11.5px; color: var(--ink-faint); letter-spacing: 0.02em; margin-top: 12px; }

/* — responsive — */
@media (max-width: 640px) {
  .lp .phone { width: 268px; }
  .display { font-size: clamp(34px, 11vw, 46px); }
  .topbar { padding: 18px var(--page-margin); }
}
@media (prefers-reduced-motion: reduce) {
  .lp .phone-figure { opacity: 1; transform: none; transition: none; }
}

/* App Store CTA — Apple's official badge (replaced the Beehiiv
   waitlist form at launch). Official artwork per Apple's marketing
   guidelines; scale via height only to keep its proportions. */
.store-badge { display: inline-block; }
.store-badge img { height: 56px; width: auto; display: block; }