: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 — narrower than v1's 720px so the prose sits
     like the page of a letter, not the deck of a marketing site. */
  --reading-width: 560px;
}

*, *::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 (the explainer, in 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;
}

/* The last paragraph is the three-clause refrain — give it a touch
   more weight so it lands as the summary it is. */
.letter p:last-child {
  font-style: italic;
  color: var(--ink-soft);
}

/* — 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. */
.phone-figure {
  display: flex;
  justify-content: flex-start;
}

.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;
}

/* Some Beehiiv builds wrap the form in an iframe with a default
   white frame. Setting the iframe element itself to transparent
   helps in modern Chromium/Safari at least. Also force the iframe
   to fill its parent so the email input inside has room for its
   full placeholder text — without this, on narrow viewports the
   placeholder clips to "Enter yo…". */
.waitlist-block iframe {
  border: 0 !important;
  background-color: transparent !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !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;
  }
}

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

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