/* ==========================================================================
   Petite Notes — landing page
   Inspired by Things 3's spacious, paper-feel aesthetic.
   Brand colors from app's Theme.swift (accentTeal / lightTeal).
   Complimentary palette proposed for future app expansion.
   ========================================================================== */

/* --- Design tokens ------------------------------------------------------- */
:root {
  /* Brand teal — taken from app Theme.swift */
  --teal-900: #0D5563;
  --teal-700: #117A8B;   /* accentTeal — primary brand */
  --teal-500: #3CA0B0;
  --teal-300: #82C7D2;   /* lightTeal — secondary */
  --teal-100: #DCEEF1;

  /* Paper backgrounds — Things 3 "has-lighter-bg / has-white-bg" tiers */
  --paper-50:  #FFFFFF;
  --paper-100: #FBF9F5;   /* lightest — primary page bg */
  --paper-200: #F5F1EA;   /* lighter — slice alt bg */
  --paper-300: #ECE6DC;   /* card hover / wells */

  /* Ink (text) */
  --ink-900: #1A1A1A;
  --ink-700: #3D3D3D;
  --ink-500: #6B6B6B;
  --ink-300: #A8A39B;
  --line:    #E5DFD3;

  /* Complimentary accents — proposed for app palette expansion */
  --coral-500: #E89B7A;   /* warm coral — direct complement of teal */
  --coral-100: #FBE7DC;
  --sand-300:  #F4DDB5;   /* soft sand — Mediterranean paper feel */
  --sand-100:  #FAF1DD;
  --navy-900:  #1F3540;   /* deep ink blue — pairs with teal */

  /* Type scale */
  --serif: "Fraunces", "Iowan Old Style", "Apple Garamond", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text",
           "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;

  /* Layout */
  --container: 1080px;
  /* Side gutter scales with viewport but never drops below 24px on
     mobile (4vw floor of 20px felt cramped against the screen edge).
     At 390px → 24px (~6.2% of viewport), at 768px → 38px, desktop → 40px. */
  --gutter: clamp(24px, 5vw, 40px);
  --radius: 14px;
  --radius-lg: 22px;

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-900);
  background: var(--paper-100);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }

/* --- Typography ---------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0;
}
h1 { font-size: clamp(48px, 8vw, 96px); font-weight: 400; font-variation-settings: "opsz" 96; }
h2 { font-size: clamp(36px, 5.5vw, 64px); font-variation-settings: "opsz" 72; }
h3 { font-size: clamp(26px, 3.4vw, 38px); font-variation-settings: "opsz" 48; }
h4 { font-size: clamp(20px, 2.2vw, 24px); font-variation-settings: "opsz" 24; line-height: 1.2; }

p  { margin: 0 0 1em; }
em { font-style: italic; }

.eyebrow {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-700);
  margin: 0 0 16px;
}

/* --- Layout primitives --------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.slice {
  padding: clamp(72px, 10vw, 140px) 0;
  position: relative;
}
.slice--paper    { background: var(--paper-100); }
.slice--cream    { background: var(--paper-200); }
.slice--white    { background: var(--paper-50); }
.slice--sand     { background: var(--sand-100); }
.slice--navy     { background: var(--navy-900); color: var(--paper-100); }

/* --- Navigation --------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(251, 249, 245, 0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease);
}
.nav.is-stuck { border-bottom-color: var(--line); }
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.nav__brand { display: flex; align-items: center; gap: 10px; }
.nav__brand svg { height: 30px; width: auto; }

/* Wordmark: mirrors the in-app brand mark from SignInView.swift.
   "petite" — Inter (sans), lowercase, ink color — reads as the
   weight-bearing half. "NOTES" — Fraunces (serif), uppercase, teal
   accent color — reads as the editorial half. Tight negative
   tracking so the two halves feel like one mark rather than two
   glued words, matching the app's optical alignment.

   Both halves share the same font-size so the rendered glyph
   heights line up visually — Fraunces caps and Inter lowercase
   occupy roughly the same vertical space at the same point size,
   so the mark reads as one height rather than "big half + small
   half". */
.nav__brand .wordmark {
  display: inline-flex;
  align-items: baseline;
  letter-spacing: -0.02em;
  font-feature-settings: "ss01", "cv11";
}
.nav__brand .wordmark__petite {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 24px;
  color: var(--ink-900);
}
.nav__brand .wordmark__notes {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 24px;
  color: var(--teal-700);
  margin-left: 1px;
}
/* Footer wordmark uses the same split but slightly larger so it
   carries the same presence as the nav at the bottom of the page. */
.footer__brand .wordmark__petite { font-size: 30px; }
.footer__brand .wordmark__notes  { font-size: 30px; }
.nav__links {
  display: flex; gap: 28px; align-items: center;
  font-size: 15px; color: var(--ink-700);
}
.nav__links a { transition: color .2s var(--ease); }
.nav__links a:hover { color: var(--teal-700); }
.nav__cta {
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--teal-700);
  color: white;
  font-weight: 500;
  transition: background .2s var(--ease), transform .15s var(--ease);
}
.nav__cta:hover { background: var(--teal-900); transform: translateY(-1px); }

/* Mobile nav: tighter height, hide brand text, smaller CTA pill,
   reduce horizontal padding so "Join the beta" doesn't crowd the logo. */
@media (max-width: 640px) {
  .nav__links a:not(.nav__cta) { display: none; }
  .nav__inner { height: 56px; }
  /* Hide the entire wordmark on mobile — the icon + the "Join the beta"
     pill is enough identity for the narrow screen. */
  .nav__brand .wordmark { display: none; }
  .nav__cta { padding: 7px 14px; font-size: 14px; }
}

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  padding: clamp(80px, 14vw, 160px) 0 clamp(60px, 10vw, 120px);
  text-align: center;
}
.hero__eyebrow { justify-self: center; }
.hero__title {
  margin: 0 auto;
  max-width: 14ch;
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  color: var(--ink-900);
}
.hero__title em { font-style: normal; color: var(--teal-700); }
.hero__sub {
  max-width: 56ch;
  margin: 28px auto 0;
  font-size: clamp(17px, 1.6vw, 21px);
  color: var(--ink-500);
  line-height: 1.5;
}
.hero__ctas {
  margin-top: 40px;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 16px;
  transition: background .2s var(--ease), color .2s var(--ease),
              transform .15s var(--ease), border-color .2s var(--ease);
  white-space: nowrap;
}
.btn--primary {
  background: var(--teal-700);
  color: white;
}
.btn--primary:hover { background: var(--teal-900); transform: translateY(-1px); }
.btn--ghost {
  background: transparent;
  color: var(--ink-900);
  border: 1.5px solid var(--ink-900);
}
.btn--ghost:hover { background: var(--ink-900); color: white; }
.btn--on-navy { color: var(--paper-100); border-color: var(--paper-100); }
.btn--on-navy:hover { background: var(--paper-100); color: var(--navy-900); }

.btn svg { width: 18px; height: 18px; }

/* Mobile CTAs: full-width stacked buttons for a cleaner thumb-friendly
   hero. The pill input/button combo in the waitlist gets its own
   treatment in .signup__form below. The buttons sit slightly inset
   from the container edge so the eye reads a small breathing gap
   between the button and the side of the screen, not a flush edge. */
@media (max-width: 640px) {
  .hero__ctas {
    flex-direction: column;
    align-items: stretch;
    width: calc(100% - 16px);
    margin-left: 8px;
    margin-right: 8px;
  }
  .hero__ctas .btn { width: 100%; justify-content: center; }
}

/* --- Panorama (hero screenshot) ----------------------------------------- */
.panorama {
  position: relative;
  margin-top: clamp(48px, 7vw, 96px);
  display: flex;
  justify-content: center;
}
.panorama__phone {
  width: min(420px, 86vw);
  height: auto;
  /* Pure portrait — no perspective warp. The original screenshots are
     already the right aspect ratio; we just need a soft shadow. */
  filter: drop-shadow(0 24px 48px rgba(17, 122, 139, 0.22))
          drop-shadow(0 8px 16px rgba(0, 0, 0, 0.06));
  border-radius: 28px;
}

/* Mobile hero: tighter top padding so the first fold shows the title +
   sub + at least one CTA without scrolling. Phone screenshot widens
   to 90vw on mobile (was 78vw) — the screenshot is the lead visual
   and 78vw read small against the 390px viewport. */
@media (max-width: 640px) {
  .hero {
    padding: 64px 0 48px;
    text-align: left;
  }
  .hero__title { text-align: left; }
  .hero__sub { text-align: left; margin-left: 0; margin-right: 0; font-size: 17px; }
  .hero__eyebrow { margin: 0 0 12px; }
  .panorama { margin-top: 36px; }
  .panorama__phone { width: 90vw; border-radius: 22px; }
}

/* --- Fancysection (Things 3 pattern) ----------------------------------- */
.fancy {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.fancy__icon {
  width: 64px; height: 64px;
  margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  background: var(--teal-100);
  border-radius: 18px;
  color: var(--teal-700);
}
.fancy__icon svg { width: 32px; height: 32px; }
.fancy h3 { margin: 0 0 14px; }
.fancy__desc {
  color: var(--ink-500);
  font-size: 17px;
  margin: 0 0 18px;
}
.fancy__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--teal-700);
  font-weight: 500;
  font-size: 15px;
}
.fancy__action::after { content: "→"; transition: transform .2s var(--ease); }
.fancy__action:hover::after { transform: translateX(3px); }

/* --- Collage of screenshots ------------------------------------------- */
.collage {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 4vw, 40px);
  align-items: end;
}
.collage__item {
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.10));
  border-radius: 22px;
  overflow: hidden;
  transition: transform .5s var(--ease), filter .5s var(--ease);
}
.collage__item:hover {
  transform: translateY(-6px);
  filter: drop-shadow(0 24px 40px rgba(17, 122, 139, 0.22));
}
.collage__item img { width: 100%; height: auto; display: block; }
@media (max-width: 720px) {
  .collage { grid-template-columns: 1fr 1fr; }
}

/* Mobile collage: switch to a clean single-column stack of phones.
   On a 390px viewport, 4 phones crammed into a 2x2 grid become
   unreadable — the text on each is microscopic and phones get clipped.
   One phone per row, centered, 90vw wide so the contents are
   legible without feeling oversized against the viewport. */
@media (max-width: 640px) {
  .collage {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 40px;
  }
  .collage__item {
    max-width: 90vw;
    margin: 0 auto;
    width: 90vw;
  }
  .collage__item:nth-child(even) {
    /* Subtle horizontal nudge on alternate rows so the column doesn't
       feel like a perfectly mechanical stack. Pure cosmetic; doesn't
       affect desktop (only applies inside this media query). */
    transform: translateX(6px);
  }
  .collage__item:nth-child(odd) {
    transform: translateX(-6px);
  }
}

/* --- Feature callout (alternating) ------------------------------------- */
.feature {
  padding: clamp(60px, 8vw, 110px) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.feature--reverse .feature__visual { order: -1; }
/* Heading → paragraph gap in feature copy. The digest section uses
   <h2> (other features use <h3>); target both so the rhythm is
   consistent across the page. 24px keeps the headline from feeling
   glued to the body line. */
.feature__copy h2,
.feature__copy h3 { margin: 0 0 24px; }
.feature__copy p { color: var(--ink-500); font-size: 17px; margin: 0; }
.feature__list {
  list-style: none;
  padding: 0; margin: 22px 0 0;
  display: grid; gap: 10px;
}
.feature__list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 16px; color: var(--ink-700);
}
.feature__list li::before {
  content: "";
  flex: 0 0 18px; height: 18px; margin-top: 4px;
  background: var(--teal-100);
  border-radius: 50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23117A8B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12 10 17 19 8'/></svg>");
  background-size: 14px 14px;
  background-position: center;
  background-repeat: no-repeat;
}
.feature__visual {
  display: flex;
  justify-content: center;
}
.feature__visual img {
  width: 100%;
  max-width: 360px;
  height: auto;
  border-radius: 22px;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.10));
}
@media (max-width: 760px) {
  .feature { grid-template-columns: 1fr; }
  .feature--reverse .feature__visual { order: 0; }
}

/* Mobile feature callouts: visual always leads (screenshot then copy).
   On desktop the layout alternates left/right for visual rhythm; on
   mobile that alternation breaks the eye — every section starts with
   the same "show me" first, then "tell me about it". Also tighten the
   vertical gap and widen the visuals to 90vw so the screenshots read
   clearly on a 390px viewport.

   EXCEPTION: every feature section wants copy first, screenshot second
   on mobile. The headline lands above the fold and the screenshot
   reads as supporting evidence rather than the lead. Desktop
   alternation is preserved (.feature--reverse still works on
   desktop). */
@media (max-width: 640px) {
  .feature { gap: 24px; padding: clamp(48px, 8vw, 72px) 0; }
  /* All feature visuals move below copy on mobile. */
  .feature .feature__visual { order: 1; }
  .feature--reverse .feature__visual { order: 1; }
  .feature .feature__visual img { width: 90vw; max-width: 90vw; height: auto; }
  .feature__copy { text-align: left; }
  .feature__copy h3 { font-size: 28px; }
  .feature__list { gap: 8px; margin-top: 16px; }
  .feature__list li { font-size: 15px; }
}

/* Mobile collage: hide the entire #features collage section. It shows
   the same 4 screenshots that each .feature block below it also shows
   — on mobile that doubles up to ~8 phone screenshots, blowing out
   the page height and reading as repetitive. Each feature block keeps
   its single screenshot, which is plenty. Desktop keeps the collage
   intact (it's part of the visual rhythm there). */
@media (max-width: 640px) {
  #features { display: none; }
}

/* --- Digests ----------------------------------------------------------- */
/*
  Self-contained email mockup for the digests feature section. Modeled
  on /Users/marcelschmidt/Applications/petite-notes/email_templates/scheduled_note_digest.html
  so the marketing claim matches what users actually receive.

  The mockup lives in .feature__visual — it's a div composition (not an
  image) so the typography, link colors, and tag chip all stay live and
  crisp on retina. Width is capped to match the rest of the feature
  visuals (360px on desktop) but expands to 90vw on mobile per the
  existing mobile-only rule for feature visuals.

  Colors mirror the real email template:
    - Header: --teal-700 (#117A8B) = app accentTeal
    - Card surface: --paper-50 (#FFFFFF)
    - Page bg of the email: --paper-200 (#F5F1EA) — appears as note card bg
    - Heading: --ink-900 (#1A1A1A)
    - Body: --ink-700 (#3D3D3D)
    - Eyebrow / muted: --ink-500 (#6B6B6B)
*/

.digest-mockup {
  /* Reset the default .feature__visual img sizing — this isn't an <img> */
  width: 100%;
  max-width: 420px;
  position: relative;
}

.digest-window {
  background: var(--paper-50);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(17, 122, 139, 0.06),
    0 12px 32px -8px rgba(26, 43, 51, 0.18),
    0 4px 12px -4px rgba(26, 43, 51, 0.08);
  border: 1px solid rgba(26, 43, 51, 0.06);
}

/* Header bar — matches email template's teal brand strip */
.digest-header {
  background: var(--teal-700);
  padding: 22px 22px;
}
.digest-header__brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
/* Higher specificity than .feature__visual img (which sets
   width: 100% / max-width: 360px) AND the mobile rule
   `.feature .feature__visual img { width: 90vw; ... }` (specificity
   0,3,0) — the mark icon inside the digest header must stay at the
   fixed brand-mark size, not stretch to fill the feature visual.
   Specificity 0,4,0 wins against the mobile rule. Sized 52px so the
   full plane glyph (which has ~17px top padding baked into its
   viewBox) clears the teal header without clipping the wing tips. */
.feature__visual .digest-header .digest-header__mark {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}
.digest-header__wordmark {
  display: inline-flex;
  align-items: baseline;
  letter-spacing: -0.02em;
  line-height: 1;
}
.digest-header__wordmark .wordmark__petite {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 28px;
  color: #FFFFFF;
}
.digest-header__wordmark .wordmark__notes {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 28px;
  color: #FFFFFF;
  margin-left: 1px;
}
.digest-header__tagline {
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  color: #D6EEF2;     /* soft cyan-white — matches email template */
  letter-spacing: 0.01em;
}

/* Body of the email */
.digest-body {
  padding: 28px 24px 24px;
}
.digest-h {
  margin: 0;
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.digest-greeting {
  margin: 12px 0 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-700);
}

/* Tag chip — small inline pill showing the common tag */
.digest-tag {
  display: inline-block;
  padding: 1px 8px;
  margin: 0 1px;
  background: var(--teal-100);
  color: var(--teal-900);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  border-radius: 999px;
  letter-spacing: 0.01em;
  vertical-align: 1px;
}

/* Note card — surface tint of --paper-200 on the white envelope */
.digest-card {
  margin-top: 16px;
  padding: 16px 18px;
  background: var(--paper-200);
  border-radius: 10px;
}
.digest-card__eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-500);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.digest-card__title {
  margin: 6px 0 0;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -0.005em;
  line-height: 1.35;
}
.digest-card__body {
  margin: 6px 0 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-700);
}
.digest-card__cta {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--teal-700);
  text-decoration: none;
}
.digest-card__cta:hover { color: var(--teal-900); }

/* Bottom CTA + fineprint */
.digest-footer-line {
  margin-top: 22px;
  text-align: center;
}
.digest-cta-pill {
  display: inline-block;
  padding: 12px 26px;
  background: var(--teal-700);
  color: #FFFFFF;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
}
.digest-cta-pill:hover { background: var(--teal-900); }
.digest-fineprint {
  margin: 10px 0 0;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-500);
}

/* Caption beneath the mockup — explains what's being shown */
.digest-caption {
  margin: 16px 8px 0;
  text-align: center;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-500);
}

/* Mobile digest mockup: a touch smaller padding so it doesn't dominate
   the screen; matches the existing mobile rule for feature visuals. */
@media (max-width: 640px) {
  .digest-mockup { max-width: 90vw; }
  .digest-header { padding: 18px 18px; }
  .feature__visual .digest-header .digest-header__mark { width: 44px; height: 44px; }
  .digest-header__wordmark .wordmark__petite { font-size: 24px; }
  .digest-header__wordmark .wordmark__notes  { font-size: 24px; }
  .digest-body { padding: 22px 18px 20px; }
  .digest-h { font-size: 18px; }
  .digest-card { padding: 14px 16px; }
}

/* --- Privacy promise ---------------------------------------------------- */
.privacy-promise {
  text-align: center;
}
.privacy-promise__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
  margin-top: 56px;
  text-align: left;
}
@media (max-width: 768px) {
  .privacy-promise__row {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}
.privacy-promise__item h4 {
  font-family: var(--serif);
  font-size: 22px;
  margin: 14px 0 8px;
}
.privacy-promise__item p {
  color: var(--ink-500);
  font-size: 15px;
  margin: 0;
}
.privacy-promise__icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--coral-100);
  color: var(--coral-500);
  border-radius: 12px;
}
.privacy-promise__icon svg { width: 22px; height: 22px; }

/* Mobile privacy: items stack as icon + heading + body in one row,
   tighter gap than desktop so the section doesn't dominate the page.
   Heading left-aligned for visual consistency with the feature blocks. */
@media (max-width: 640px) {
  .privacy-promise { text-align: left; }
  .privacy-promise h2 { font-size: 36px; }
  .privacy-promise__row { margin-top: 36px; gap: 28px; }
  .privacy-promise__item {
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto;
    column-gap: 16px;
    align-items: start;
  }
  .privacy-promise__icon { grid-row: 1 / 3; grid-column: 1; }
  .privacy-promise__item h4 { grid-row: 1; grid-column: 2; margin: 0; font-size: 20px; }
  .privacy-promise__item p { grid-row: 2; grid-column: 2; margin-top: 6px; font-size: 15px; }
}

/* --- Newsletter / waitlist --------------------------------------------- */
.signup {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}
.signup__form {
  display: flex;
  gap: 8px;
  margin-top: 28px;
  padding: 6px;
  background: var(--paper-50);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}
.signup__form input {
  flex: 1;
  border: 0; background: transparent;
  padding: 12px 18px;
  font: inherit;
  color: var(--ink-900);
  outline: none;
}
.signup__form input::placeholder { color: var(--ink-300); }
.signup__form button {
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--teal-700);
  color: white;
  font-weight: 500;
  transition: background .2s var(--ease);
}
.signup__form button:hover { background: var(--teal-900); }
.signup__fineprint {
  margin-top: 18px;
  font-size: 13px;
  color: var(--ink-500);
}
.signup__fineprint a { color: var(--ink-700); border-bottom: 1px solid var(--line); }
.signup__msg { min-height: 1.4em; margin: 12px 0 0; font-size: 14px; color: var(--ink-500); }
.signup__msg.is-ok { color: var(--teal-700); }
.signup__msg.is-err { color: #C0473A; }

/* Mobile waitlist: drop the pill, stack input above a full-width button.
   The pill form looks elegant on desktop but on a 390px screen the
   "Notify me" button wraps onto two lines and the input gets squeezed.
   Form sits slightly inset from the container edge so the input/button
   don't read as flush against the screen. */
@media (max-width: 640px) {
  .signup { text-align: left; }
  .signup h2 { font-size: 32px; }
  .signup__form {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    width: calc(100% - 16px);
    margin-left: 8px;
    margin-right: 8px;
  }
  .signup__form input {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--paper-50);
  }
  .signup__form button {
    width: 100%;
    padding: 14px 22px;
    border-radius: 999px;
  }
  .signup__fineprint { text-align: center; }
}

/* --- Footer ------------------------------------------------------------ */
.footer {
  padding: 64px 0 40px;
  border-top: 1px solid var(--line);
  background: var(--paper-100);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(24px, 4vw, 48px);
}
.footer__brand .nav__brand { margin-bottom: 12px; }
.footer__brand p {
  color: var(--ink-500);
  font-size: 14px;
  max-width: 32ch;
  margin: 0;
}
.footer__col h5 {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0 0 14px;
}
.footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer__col a {
  font-size: 15px;
  color: var(--ink-700);
  transition: color .2s var(--ease);
}
.footer__col a:hover { color: var(--teal-700); }
.footer__bottom {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink-500);
}
@media (max-width: 720px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__bottom { flex-direction: column; gap: 8px; }
}

/* Mobile footer: brand spans both columns at the top, then product /
   support sit side-by-side, then legal underneath. Centred "Back to
   top" link. Avoids the previous 1.4fr + 3-col layout where the brand
   description was orphaned to one side. */
@media (max-width: 640px) {
  .footer { padding: 48px 0 32px; }
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px 20px;
  }
  .footer__brand { grid-column: 1 / -1; }
  .footer__brand .nav__brand span { display: inline; }   /* show brand text in footer */
  .footer__bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    margin-top: 40px;
    padding-top: 20px;
  }
}

/* --- Legal / support pages --------------------------------------------- */
.page-header {
  padding: clamp(80px, 10vw, 120px) 0 clamp(40px, 5vw, 60px);
  text-align: center;
}
.page-header h1 { font-size: clamp(40px, 6vw, 64px); }
.page-header p { max-width: 56ch; margin: 20px auto 0; color: var(--ink-500); font-size: 18px; }

.prose {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) 0 clamp(80px, 12vw, 140px);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-700);
}
.prose h2 {
  font-size: clamp(24px, 3vw, 32px);
  margin: 56px 0 18px;
  padding-top: 8px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-size: 20px;
  margin: 36px 0 10px;
}
.prose p, .prose ul { margin: 0 0 18px; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--teal-700); border-bottom: 1px solid var(--teal-300); }
.prose a:hover { border-bottom-color: var(--teal-700); }
.prose code, .prose kbd {
  font-family: var(--mono);
  font-size: 0.92em;
  background: var(--paper-200);
  padding: 2px 6px;
  border-radius: 5px;
  color: var(--ink-900);
}
.prose .updated {
  display: inline-block;
  padding: 4px 12px;
  background: var(--teal-100);
  color: var(--teal-900);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 24px;
}

/* --- Support form ------------------------------------------------------- */
.support-form {
  max-width: 540px;
  margin: 0 auto;
  display: grid;
  gap: 18px;
}
.support-form label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-700);
  margin-bottom: 6px;
}
.support-form input,
.support-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  background: var(--paper-50);
  color: var(--ink-900);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.support-form input:focus,
.support-form textarea:focus {
  outline: none;
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px var(--teal-100);
}
.support-form textarea { min-height: 140px; resize: vertical; }
.support-form button[type="submit"] {
  margin-top: 8px;
  padding: 14px 28px;
  background: var(--teal-700);
  color: white;
  border-radius: 10px;
  font-weight: 500;
  font-size: 16px;
  transition: background .2s var(--ease);
  justify-self: start;
}
.support-form button[type="submit"]:hover { background: var(--teal-900); }
.support-form .hp {
  position: absolute;
  left: -10000px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* --- FAQ --------------------------------------------------------------- */
.faq { max-width: 720px; margin: 56px auto 0; }
.faq details {
  border-top: 1px solid var(--line);
  padding: 22px 0;
}
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink-900);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--sans);
  font-size: 28px;
  font-weight: 300;
  color: var(--teal-700);
  transition: transform .2s var(--ease);
}
.faq details[open] summary::after { content: "−"; }
.faq details p {
  margin: 14px 0 0;
  color: var(--ink-500);
}

/* --- Dashed flight path (SVG anchored to the page) -------------------- */
/* Spans the entire document height. Because it's absolutely positioned
   inside <body>, it scrolls with the content — the line is part of the
   page layout, not a viewport overlay. */
.flight-path {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
  /* height is set in JS to document height, so the viewBox stretches
     across the whole page (not just one viewport) */
}
.flight-path path { vector-effect: non-scaling-stroke; }

/* --- Three.js canvas (just the airplane + its shadow) ----------------- */
/* Position fixed; renders the airplane sprite and its drop-shadow sprite.
   The dashed line itself is in the .flight-path SVG above (page-anchored). */
.flight-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 60;
}
@media (prefers-reduced-motion: reduce) {
  .flight-canvas, .flight-path, .postbox-stage { display: none; }
}

/* Hide both on small screens — animation is too busy on mobile */
@media (max-width: 640px) {
  .flight-canvas, .flight-path, .postbox-stage { display: none; }
}

/* --- Postbox stage ---------------------------------------------------- */
/* The mailbox sits in its own container just above the footer so the
   flight path can target its slot via getBoundingClientRect. The
   .postbox__slot SVG rect is the actual aim point. The postbox is
   centered horizontally so the plane arrives at the visual centre of
   the page, not the right edge. */
.postbox-stage {
  padding: 0.5rem 0 2rem;
  max-width: var(--max);
  margin: 0 auto;
  pointer-events: none;
}
.postbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.postbox__art {
  width: 150px;
  height: auto;
  display: block;
  /* Let the hinged door swing past the viewBox edge without being clipped */
  overflow: visible;
  /* Very subtle drop-shadow under the mailbox itself */
  filter: drop-shadow(0 2px 0 rgba(13, 85, 99, 0.04));
}
.postbox__flap { transition: transform .12s linear; will-change: transform; }
.postbox__caption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--teal-700);
  opacity: 0.55;
  margin: 0;
  letter-spacing: 0.01em;
}

/* Mobile postbox: shrink the mailbox so it reads as a small punctuation
   mark above the footer instead of a featured illustration. (The
   three.js flight animation itself is already hidden on mobile.) */
@media (max-width: 640px) {
  .postbox-stage { padding: 0.25rem 0 1rem; }
  .postbox__art { width: 96px; }
  .postbox__caption { font-size: 0.85rem; }
}

/* --- Helpers ----------------------------------------------------------- */
.center { text-align: center; }
.muted  { color: var(--ink-500); }
.small  { font-size: 14px; }

/* --- Focus rings ------------------------------------------------------- */
:focus-visible {
  outline: 2.5px solid var(--teal-700);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --- Legal documents (terms, privacy) --------------------------------- */
/* Long-form text pages. Container keeps line length comfortable and
   the type stack falls back to readable system fonts. */
.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 4rem 1.5rem 6rem;
  color: var(--ink-700, #2a2a2a);
  font-size: 1rem;
  line-height: 1.65;
}
.legal h1 {
  font-family: var(--font-display, Georgia, serif);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--teal-900, #0D5563);
  margin: 0 0 0.4rem;
}
.legal .legal__lede {
  color: var(--ink-500, #6b6b6b);
  font-size: 0.95rem;
  margin: 0 0 2.5rem;
  font-style: italic;
}
.legal h2 {
  font-family: var(--font-display, Georgia, serif);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.25;
  color: var(--teal-900, #0D5563);
  margin: 2.6rem 0 0.7rem;
  scroll-margin-top: 80px;
}
.legal h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 1.6rem 0 0.5rem;
}
.legal p, .legal li { margin: 0 0 0.85rem; }
.legal ul, .legal ol { padding-left: 1.4rem; margin: 0 0 1rem; }
.legal li { margin-bottom: 0.35rem; }
.legal a { color: var(--teal-700, #117A8B); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--teal-900, #0D5563); }
.legal strong { font-weight: 600; }
.legal em { font-style: italic; }
.legal code, .legal pre {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: rgba(13, 85, 99, 0.06);
  padding: 0.05em 0.35em;
  border-radius: 4px;
}
.legal hr { border: 0; height: 1px; background: var(--ink-200, #e6e2da); margin: 2.6rem 0; }
.legal ul ul, .legal ol ol { margin: 0.4rem 0 0.6rem; }