/* ==========================================================================
   marketing.css — Zap.bz public-site redesign ("Honest Utility")
   Loads AFTER styles.css on marketing pages only; scoped via .landing-page
   to avoid touching dashboard/app UI. Overrides cascade by load order.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,300..900,0..100;1,9..144,300..900,0..100&family=Geist:wght@300..800&family=JetBrains+Mono:wght@400;500&display=swap');

/* --- 1. SCOPED TOKENS ----------------------------------------------------- */

.landing-page {
  /* Bright tech palette — refreshed 2026-05-20, inspired by the
   * green ↔ indigo transcription/translation mockup. Replaces the
   * "Honest Utility" cream + deep-forest + warm-clay scheme. Token
   * NAMES are preserved (--ink, --cream, --forest, --clay, --rule)
   * so every rule referencing them automatically picks up the new
   * hex values — one block of edits ships a full re-skin. */

  /* Slate ink — clean modern dark, replaces the near-black forest */
  --ink: #0f172a;          /* slate-900 — primary text */
  --ink-soft: #475569;     /* slate-600 — secondary text */
  --ink-muted: #94a3b8;    /* slate-400 — tertiary text */

  /* Cool surfaces — pure white with slate undertones, replaces the
   * warm cream family. The token name "cream" stays to keep all
   * existing rules working. */
  --cream: #ffffff;        /* primary surface */
  --cream-soft: #f8fafc;   /* slate-50 — subtle elevation */
  --cream-dim: #e2e8f0;    /* slate-200 — dimmer surface */

  /* Primary brand — emerald green from the left chat panel.
   * Brighter and more saturated than the old deep forest, sits in
   * the same hue family so existing semantic associations
   * (transcription/voice/recording) still read correctly. */
  --forest: #10b981;       /* emerald-500 */
  --forest-deep: #059669;  /* emerald-600 */
  --forest-light: #34d399; /* emerald-400 */

  /* Secondary accent — indigo from the right chat panel.
   * Replaces the warm clay orange with a cool complement to the
   * emerald primary. Reads as "translation / outbound / second
   * party" in the conversation metaphor. */
  --clay: #6366f1;         /* indigo-500 */
  --clay-deep: #4f46e5;    /* indigo-600 */

  /* Rules — neutral slate-tinted lines, replaces the warm cream-
   * tinted rules. The slight blue cast harmonizes with the new
   * indigo accent. */
  --rule: rgba(15, 23, 42, 0.08);
  --rule-strong: rgba(15, 23, 42, 0.18);
  --rule-ink: rgba(15, 23, 42, 0.92);

  /* Type */
  --font-display: 'Fraunces', Georgia, ui-serif, serif;
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Rhythm — tightened 2026-05-20 for the single-page layout. The
   * old 80-144px rhythm worked when each section had its own page;
   * now that everything lives on one scrollable page, sections need
   * to feel connected rather than isolated. */
  --pad-section: clamp(48px, 6vw, 88px);
  --pad-section-sm: clamp(36px, 4.5vw, 64px);
  --container: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
}

/* When .public-page is composed with .landing-page (as on the
 * single-page home, which carries both classes so that
 * .public-page descendant selectors like .public-card-cmd and
 * .public-card--lift:hover stay usable), neutralize the page-level
 * rules from styles.css:866 that assume .public-page is the body of
 * a standalone page. Those rules add a teal/cyan gradient, a
 * 100vh min-height, and 14-34px outer padding which conflict with
 * the .landing-page Honest Utility palette and the section rhythm. */
.landing-page.public-page {
  background: none;
  min-height: 0;
  padding: 0;
}

/* Descendant-level bleed: the .public-page descendant rules in
 * styles.css decorate the eyebrow with a bottom underline (::after)
 * and bottom-padding, designed to be the *only* eyebrow decoration
 * on sub-pages. On the home page the landing-page eyebrow uses a
 * left dash decoration (::before) instead. With both applied the
 * eyebrow gets a left dash AND an underline + extra padding —
 * visually noisy. Kill the ::after underline and padding inside
 * .landing-page.public-page so only the dash remains. */
.landing-page.public-page .section-eyebrow {
  padding-bottom: 0;
}

.landing-page.public-page .section-eyebrow::after {
  display: none;
}

/* The .public-page .public-card--lift rules in styles.css give each
 * card a rounded 16px border + lift-on-hover translate. That works
 * on the standalone sub-pages where each card sits alone. Inside
 * the landing-page .public-card-grid we use an editorial 1px hairline
 * grid (background: var(--rule); gap: 1px) which expects cards with
 * FLAT edges and no individual border. Strip the round borders, lift
 * shadow, and translateY so the editorial grid effect comes through. */
.landing-page.public-page .public-card--lift {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: background-color 200ms ease;
}

.landing-page.public-page .public-card--lift:hover {
  background: var(--cream-soft);
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

/* .public-page .public-card-badge renders as a 32px green circle in
 * styles.css. Marketing.css redefines it as a small uppercase mono
 * label, but doesn't reset the inherited circle dimensions/colour,
 * so badges like "01" or "Pairing" end up as awkward green pills.
 * Strip the circle styling inside .landing-page.public-page. */
.landing-page.public-page .public-card-badge {
  background: transparent;
  border-radius: 0;
  color: var(--clay);
  height: auto;
  min-width: 0;
  padding: 0;
}

/* .public-page .public-card-cmd in styles.css uses the OLD deep-mint
 * palette (rgba(13,122,95,0.08) bg + --accent-strong text). On the
 * new emerald-primary landing page the green is the wrong shade and
 * sits dull. Refresh to the new emerald token so the in-chat command
 * badges (/help, /balance, etc.) read as "Zap-branded code" instead
 * of "legacy CSS bleed". Also bump the padding so the badge sits
 * comfortably on its own line above the card title. */
.landing-page.public-page .public-card-cmd {
  background: rgba(16, 185, 129, 0.10);
  color: var(--forest-deep);
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 600;
  align-self: flex-start;
}

/* Command cards have short titles ("List commands", "Check your wallet")
 * that look oversized at the default .public-card h2 size (clamp 20-26px,
 * sized for the longer feature-grid titles). Step them down here. */
.landing-page.public-page .public-card--command h2 {
  font-size: clamp(17px, 1.6vw, 20px);
}

/* ==========================================================================
 * .flow-section (How It Works) — strip legacy chrome from styles.css
 * --------------------------------------------------------------------------
 * styles.css carries FOUR competing .flow-section rule blocks from
 * earlier designs:
 *   1552  .flow-section            (dark-green gradient + 2-col grid +
 *                                   rounded card + green shadow)
 *   3029  .landing-page .flow-section  (white bg, light border, rounded)
 *   3431  .landing-page .flow-section  (padding-block override)
 *   3597  .landing-page .flow-section  (DARK GREEN bg + rounded card)
 *
 * They cascade and the latest (3597) wins — wallpapering the section
 * with a dark-green box that looks nothing like the new emerald + slate
 * palette, plus a side-by-side title/list layout from rule 1552 that
 * isn't part of the new design. Strip all of it.
 * ========================================================================== */

.landing-page.public-page .flow-section {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: block;
  grid-template-columns: none;
  /* DO NOT set margin-inline / max-width / padding-inline here — the
   * UNIFIED SECTION RHYTHM block earlier in this file already does it
   * via .landing-page.public-page > section. Re-declaring those props
   * at higher specificity (this rule is 0,3,0 vs the unified rule's
   * 0,2,1) would override the unified container and put the flow
   * section full-bleed with no horizontal margin — which is exactly
   * the misalignment fixed here. Strip ONLY the visual chrome from
   * the legacy dark-green design; leave layout to the unified rule. */
}

/* Section heading + lead use the shared .section-head treatment, but
 * styles.css line 3605 forces .flow-section h2 to white (#fff) — meant
 * for the old dark-green background. Restore to the standard slate ink. */
.landing-page.public-page .flow-section .section-head h2,
.landing-page.public-page .flow-section .section-head--sub h3 {
  color: var(--ink);
}

.landing-page.public-page .flow-section .section-head p,
.landing-page.public-page .flow-section .section-head--sub p {
  color: var(--ink-soft);
  margin-top: 0;
}

/* Flow list items — styles.css line 3050 dresses each li as a rounded
 * white card with a border. The new design uses the editorial top-
 * border divider pattern (already declared in marketing.css), so kill
 * the card chrome and let the divider style read through. */
.landing-page.public-page .flow-list li {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  padding: 24px 0;
}

.landing-page.public-page .flow-list li:last-child {
  border-bottom: 1px solid var(--rule);
}

/* styles.css line 3059 targets .flow-list span:first-child with high
 * specificity (matches the pseudo-class) and turns the step badge
 * into a 30x30 emerald rounded square with white numerals. Override
 * the badge sizing + corner radius on a higher-specificity path so
 * the bigger filled-square design from the section above wins. */
.landing-page.public-page .flow-list li .flow-step-number {
  background: var(--forest);
  border: 0;
  border-radius: 10px;
  color: var(--cream);
  flex: 0 0 auto;
  width: clamp(56px, 6vw, 72px);
  height: clamp(56px, 6vw, 72px);
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 600;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.18);
}

/* ==========================================================================
 * UNIFIED SECTION RHYTHM
 * --------------------------------------------------------------------------
 * styles.css carries per-section overrides from earlier designs that
 * gave each section a DIFFERENT layout:
 *
 *   compare-section : max-width 960px      (narrow)
 *   faq-section     : max-width 920px      (narrowest)
 *   pricing-section : max-width 1240px     (wide, rounded card)
 *   use-case-section: max-width 1240px     (wide)
 *   flow-section    : max-width 1240px     (wide, dark green box)
 *
 * Plus each had its own padding-block (60-120px, 64-112px, etc.),
 * its own margins, sometimes a border-radius, sometimes a shadow.
 * The result: visitors saw sections as independent fragments at
 * different widths rather than a single coherent page.
 *
 * One unified rule below forces EVERY section to follow the same
 * organization: centered container of 1200px, gutter 20-40px,
 * padding-block 48-88px, no border, no border-radius, no shadow.
 * Selector .landing-page.public-page > section beats every legacy
 * .landing-page .x-section rule by load order + compound-class
 * specificity (0,2,1 vs the legacy 0,2,0).
 * ========================================================================== */

.landing-page.public-page > section,
.landing-page.public-page > .proof-strip,
.landing-page.public-page > .site-footer {
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0 auto;
  max-width: var(--container);
  padding-inline: var(--gutter);
  width: 100%;
}

.landing-page.public-page > section {
  padding-block: var(--pad-section);
  scroll-margin-top: 96px;
}

/* Hero gets MORE top padding to clear the sticky header (top:14px
 * + ~72px tall = 86px) and give the page a strong opening, but its
 * BOTTOM padding matches every other section. So the hero→next gap
 * reads identical to every section-to-section transition further
 * down the page. No more special-case overrides. */
.landing-page.public-page > section.hero {
  padding-block: clamp(56px, 7vw, 96px) var(--pad-section);
}

/* --- 2. RESET landing-specific overrides from styles.css ----------------- */

.landing-page {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-feature-settings: 'ss01' 1, 'cv11' 1, 'tnum' 0;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.55;
  padding: 14px clamp(14px, 3vw, 34px) 0;
  position: relative;
  isolation: isolate;
}

/* Soft paper grain over the page — tiny SVG noise as data URI, very low
 * opacity so it reads as texture, not as visible noise. Fixed-attachment
 * so it doesn't scroll with content (feels more like printed paper). */
.landing-page::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.55;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.06 0 0 0 0 0.085 0 0 0 0 0.08 0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.landing-page,
.landing-page section,
.landing-page header,
.landing-page footer {
  background-color: transparent;
}

.landing-page p {
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.55;
  margin: 0;
}

.landing-page h1,
.landing-page h2,
.landing-page h3,
.landing-page h4 {
  color: var(--ink);
  font-family: var(--font-display);
  font-feature-settings: 'ss01' 1, 'ss02' 1;
  font-style: normal;
  font-variation-settings: 'opsz' 96, 'SOFT' 30;
  font-weight: 450;
  letter-spacing: -0.025em;
  line-height: 1.02;
  margin: 0;
}

.landing-page strong { font-weight: 600; color: var(--ink); }
.landing-page em { font-style: italic; }

.landing-page a { color: inherit; }

.landing-page code {
  background: var(--cream-soft);
  border: 1px solid var(--rule);
  border-radius: 4px;
  color: var(--forest-deep);
  font-family: var(--font-mono);
  font-size: 0.9em;
  font-weight: 500;
  padding: 1px 6px;
}

/* --- 3. CONTAINER + SECTION FRAME ---------------------------------------- */

.landing-page > section,
.landing-page > .proof-strip,
.landing-page > .site-footer {
  margin: 0 auto;
  max-width: var(--container);
  padding-inline: var(--gutter);
  width: 100%;
}

.landing-page > section {
  padding-block: var(--pad-section);
  /* When the visitor jumps to an in-page anchor, offset the scroll so
   * the sticky header (14px top + ~72px tall) doesn't cover the
   * section heading. */
  scroll-margin-top: 96px;
}

/* Section dividers — hairline rule between content blocks instead of
 * pure spacing. Reads as editorial structure, not as empty space. */
.landing-page > section + section,
.landing-page > .proof-strip + section {
  border-top: 1px solid var(--rule);
}

/* --- 4. HEADER ----------------------------------------------------------- */

.landing-page .site-header {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: 0 1px 0 var(--rule);
  margin: 0 auto;
  max-width: var(--container);
  padding: 14px 20px;
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  position: sticky;
  top: 14px;
  z-index: 30;
}

.landing-page .brand-lockup {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 17px;
  font-variation-settings: 'opsz' 24, 'SOFT' 30;
  font-weight: 500;
  letter-spacing: -0.022em;
}

.landing-page .brand-mark {
  background: var(--ink);
  border-radius: 4px;
  box-shadow: none;
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 19px;
  font-style: italic;
  font-variation-settings: 'opsz' 24, 'wght' 600;
  height: 34px;
  width: 34px;
}

/* Landing-page brand tagline — recolor with design tokens so it sits
 * harmoniously next to the Honest Utility palette. */
.landing-page .brand-tagline {
  color: var(--ink-soft);
  font-family: var(--font-mono);
}

.landing-page .site-nav a {
  border-radius: 0;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  min-height: 32px;
  padding: 8px 10px;
  text-transform: uppercase;
}

.landing-page .site-nav a:hover {
  background: transparent;
  color: var(--ink);
}

.landing-page .site-nav a:hover::after {
  content: '';
  display: block;
  height: 1px;
  background: var(--ink);
  margin-top: 2px;
}

.landing-page .site-actions { gap: 10px; }

/* --- 5. BUTTONS ---------------------------------------------------------- */

.landing-page .button-link {
  align-items: center;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  gap: 10px;
  letter-spacing: -0.01em;
  min-height: 52px;
  padding: 0 26px;
  text-decoration: none;
  transition: transform 200ms cubic-bezier(.2,.8,.2,1),
              background-color 180ms ease,
              color 180ms ease,
              box-shadow 200ms ease,
              border-color 180ms ease;
  white-space: nowrap;
}

.landing-page .button-link.primary {
  background: var(--ink);
  border: 1px solid var(--ink);
  box-shadow: 0 1px 0 #000, 0 4px 0 var(--ink);
  color: var(--cream);
}

.landing-page .button-link.primary:hover {
  background: var(--forest);
  border-color: var(--forest);
  box-shadow: 0 1px 0 var(--forest-deep), 0 6px 0 var(--forest), 0 12px 24px rgba(16, 185, 129, 0.22);
  color: var(--cream);
  transform: translateY(-2px);
}

.landing-page .button-link.primary:active {
  box-shadow: 0 1px 0 var(--forest-deep), 0 2px 0 var(--forest);
  transform: translateY(0);
}

.landing-page .button-link.secondary {
  background: transparent;
  border: 1.5px solid var(--ink);
  box-shadow: none;
  color: var(--ink);
}

.landing-page .button-link.secondary:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
  transform: translateY(-2px);
}

/* --- 6. HERO ------------------------------------------------------------- */

.landing-page .hero {
  border-top: none !important;
  /* Hero padding is set in the UNIFIED SECTION RHYTHM block above
   * via .landing-page.public-page > section.hero. Don't redeclare
   * padding-block here — would re-create the per-section drift the
   * unified block is meant to eliminate. */
}

.landing-page .hero-grid {
  align-items: start;
  display: grid;
  gap: clamp(40px, 5vw, 72px);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}

@media (max-width: 920px) {
  .landing-page .hero-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* Hero tag (small pricetag annotation) */
.landing-page .hero-tag {
  align-items: center;
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: 100px;
  color: var(--ink);
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  gap: 8px;
  letter-spacing: 0.06em;
  margin-bottom: 28px;
  padding: 7px 14px;
  text-transform: uppercase;
}

.landing-page .hero-tag::before {
  background: var(--clay);
  border-radius: 50%;
  content: '';
  height: 7px;
  width: 7px;
  animation: dot-pulse 2.4s ease-in-out infinite;
}

@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.6); }
  50%      { box-shadow: 0 0 0 6px rgba(99, 102, 241, 0); }
}

/* Headline — Fraunces, large display optical size, slight negative tracking */
.landing-page .hero-headline {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.8vw, 76px);
  font-variation-settings: 'opsz' 144, 'SOFT' 50, 'wght' 440;
  font-weight: 440;
  letter-spacing: -0.028em;
  line-height: 1.0;
  margin-block: 0 28px;
  max-width: 14ch;
}

.landing-page .hero-headline em {
  color: var(--forest);
  font-feature-settings: 'ss01' 1;
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 440;
}

/* PRICE — the visual moment. Big numerals, tabular, with clay $ sign */
.landing-page .hero-price {
  align-items: baseline;
  border-bottom: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-block: 28px 32px;
  padding: 28px 0;
  position: relative;
}

.landing-page .hero-price::before {
  background: var(--clay);
  content: '';
  height: 1px;
  left: 0;
  position: absolute;
  top: -1px;
  width: 64px;
}

.landing-page .hero-price-figure {
  color: var(--ink);
  font-family: var(--font-display);
  font-feature-settings: 'tnum' 1, 'ss01' 1;
  font-size: clamp(72px, 13vw, 148px);
  font-variation-settings: 'opsz' 144, 'SOFT' 50, 'wght' 500;
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.85;
}

.landing-page .hero-price-figure .currency {
  color: var(--clay);
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 500;
  margin-right: -0.05em;
}

.landing-page .hero-price-tail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-block: clamp(10px, 1.4vw, 22px);
}

.landing-page .hero-price-unit {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 28px);
  font-style: italic;
  font-variation-settings: 'opsz' 48, 'SOFT' 100, 'wght' 500;
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1;
}

.landing-page .hero-price-note {
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.landing-page .hero-lead {
  color: var(--ink-soft);
  font-size: clamp(17px, 1.2vw, 19px);
  line-height: 1.5;
  margin-bottom: 28px;
  max-width: 48ch;
}

.landing-page .hero-points {
  display: grid;
  gap: 16px 28px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
}

@media (max-width: 600px) {
  .landing-page .hero-points { grid-template-columns: 1fr; }
}

.landing-page .hero-points li {
  border-left: 2px solid var(--forest);
  padding-left: 14px;
}

.landing-page .hero-points strong {
  color: var(--ink);
  display: block;
  font-family: var(--font-display);
  font-size: 16px;
  font-variation-settings: 'opsz' 24, 'SOFT' 50, 'wght' 600;
  font-weight: 600;
  letter-spacing: -0.012em;
  margin-bottom: 2px;
}

.landing-page .hero-points span {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.45;
}

.landing-page .hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Hero stage — frame around the WhatsApp preview */
.landing-page .hero-stage {
  align-items: center;
  background:
    linear-gradient(135deg, var(--cream-soft) 0%, var(--cream-dim) 100%);
  border: 1px solid var(--rule);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 32px 24px 24px;
  position: relative;
  isolation: isolate;
}

.landing-page .hero-stage::before {
  background:
    radial-gradient(circle at 22% 28%, rgba(16, 185, 129, 0.08), transparent 60%),
    radial-gradient(circle at 78% 72%, rgba(99, 102, 241, 0.06), transparent 60%);
  content: '';
  inset: 0;
  position: absolute;
  pointer-events: none;
  z-index: -1;
  border-radius: inherit;
}

.landing-page .hero-stage-label {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 100px;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-bottom: 18px;
  padding: 5px 12px;
  text-transform: uppercase;
}

.landing-page .hero-stage-label::before { content: '◉ '; color: var(--clay); }

/* --- 6b. HERO DEMO (ported from inline <style>, restyled) --------------- */

.landing-page .hero-demo {
  animation: hero-demo-rise 0.8s cubic-bezier(.2,.8,.2,1) both;
  background: #f8fafc;
  border-radius: 18px;
  box-shadow:
    0 1px 0 rgba(0,0,0,0.06),
    0 24px 50px rgba(16, 185, 129, 0.16),
    0 4px 12px rgba(0, 0, 0, 0.08);
  max-inline-size: 360px;
  padding: 16px;
  width: 100%;
}

@keyframes hero-demo-rise {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

.landing-page .hero-demo-head {
  align-items: center;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  display: flex;
  gap: 10px;
  padding: 6px 6px 12px;
}

.landing-page .hero-demo-avatar {
  align-items: center;
  background: var(--forest);
  border-radius: 50%;
  block-size: 36px;
  color: var(--cream);
  display: flex;
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: 'opsz' 24, 'wght' 600;
  font-weight: 600;
  inline-size: 36px;
  justify-content: center;
}

.landing-page .hero-demo-name {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 15px;
  font-variation-settings: 'opsz' 24, 'wght' 600;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.landing-page .hero-demo-status {
  color: var(--forest-light);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
}

.landing-page .hero-demo-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-block-size: 320px;
  padding: 14px 6px;
}

.landing-page .hero-bubble {
  animation: hero-bubble-in 14s ease-in-out infinite;
  animation-fill-mode: forwards;
  border-radius: 14px;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  max-inline-size: 86%;
  opacity: 0;
  padding: 10px 14px;
}

.landing-page .hero-bubble.them {
  align-self: flex-start;
  background: #ffffff;
  border-top-left-radius: 4px;
}

.landing-page .hero-bubble.us {
  align-self: flex-end;
  background: #d3f5e3;
  border-top-right-radius: 4px;
}

.landing-page .hero-bubble.voice {
  align-items: center;
  animation-delay: 0s;
  display: flex;
  gap: 10px;
}

.landing-page .hero-bubble.transcribing {
  animation-delay: 2s;
  color: var(--forest-light);
  font-style: italic;
}

.landing-page .hero-bubble.transcript { animation-delay: 4s; }

.landing-page .hero-bubble.action {
  animation-delay: 6s;
  /* amber pop — a small warm highlight matching the orange accent
   * in the reference image (pie chart segment, round badges) — used
   * here to flag "action item / task extracted by AI". */
  background: #fef3c7;
  border-left: 3px solid #d97706;
}

.landing-page .hero-bubble.translation {
  animation-delay: 8s;
  /* indigo pale — matches the right "translation" chat panel from
   * the reference image. Pairs with the mint .us bubble to mirror
   * the green ↔ indigo color story across the page. */
  background: #eef2ff;
  border-left: 3px solid var(--clay);
}

@keyframes hero-bubble-in {
  0%      { opacity: 0; transform: translateY(6px); }
  7%, 93% { opacity: 1; transform: none; }
  100%    { opacity: 0; transform: translateY(-4px); }
}

.landing-page .hero-voice-bar { align-items: center; display: flex; flex: 1; gap: 3px; }
.landing-page .hero-voice-bar span {
  animation: hero-wave 1.2s ease-in-out infinite;
  background: var(--forest);
  border-radius: 2px;
  inline-size: 3px;
}
.landing-page .hero-voice-bar span:nth-child(1) { block-size:  8px; animation-delay: 0.0s; }
.landing-page .hero-voice-bar span:nth-child(2) { block-size: 14px; animation-delay: 0.1s; }
.landing-page .hero-voice-bar span:nth-child(3) { block-size: 18px; animation-delay: 0.2s; }
.landing-page .hero-voice-bar span:nth-child(4) { block-size: 11px; animation-delay: 0.3s; }
.landing-page .hero-voice-bar span:nth-child(5) { block-size: 16px; animation-delay: 0.4s; }
.landing-page .hero-voice-bar span:nth-child(6) { block-size:  9px; animation-delay: 0.5s; }
@keyframes hero-wave {
  0%, 100% { transform: scaleY(0.6); }
  50%      { transform: scaleY(1.2); }
}

.landing-page .hero-typing { display: inline-flex; gap: 4px; }
.landing-page .hero-typing span {
  animation: hero-typing 1.2s ease-in-out infinite;
  background: var(--forest-light);
  block-size: 6px;
  border-radius: 50%;
  inline-size: 6px;
}
.landing-page .hero-typing span:nth-child(2) { animation-delay: 0.15s; }
.landing-page .hero-typing span:nth-child(3) { animation-delay: 0.30s; }
@keyframes hero-typing {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.85); }
  40%           { opacity: 1; transform: scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .landing-page .hero-demo,
  .landing-page .hero-bubble,
  .landing-page .hero-voice-bar span,
  .landing-page .hero-typing span,
  .landing-page .hero-tag::before { animation: none !important; }
  .landing-page .hero-bubble { opacity: 1; }
}

/* --- 7. PROOF STRIP ------------------------------------------------------ */

.landing-page .proof-strip {
  align-items: center;
  border-bottom: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 32px 48px;
  justify-content: center;
  padding-block: 28px;
}

.landing-page .proof-chip {
  align-items: center;
  color: var(--ink-soft);
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  gap: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.landing-page .proof-chip svg {
  color: var(--forest);
  flex-shrink: 0;
}

/* --- 8. SECTION HEADS ---------------------------------------------------- */

.landing-page .section-head {
  margin-bottom: clamp(32px, 4vw, 56px);
  max-width: 760px;
}

/* The .section-head--center modifier used to opt sections into a
 * centered layout (FAQ, Coming Soon). For the single-page layout we
 * standardize on left-aligned headings everywhere, so the modifier is
 * neutralized rather than removed from the markup. Keeping the class
 * around lets us flip individual sections back to centered later
 * without re-touching HTML — just change this block. */
.landing-page .section-head--center {
  margin-inline: 0;
  text-align: left;
}

.landing-page .section-head--center h2,
.landing-page .section-head--center p {
  margin-inline: 0;
}

/* Subsection — a smaller, in-section grouping with its own eyebrow and
 * h3 heading. Used for in-section breakdowns like "in-chat commands"
 * (inside How it works), the 9-card feature grid (inside Features),
 * and the cost-per-note + savings tables (inside Pricing). Smaller
 * top padding than a full section because it lives inside one. */
.landing-page .subsection {
  margin-top: clamp(40px, 5vw, 72px);
}

.landing-page .section-head--sub {
  margin-bottom: clamp(24px, 3vw, 40px);
}

.landing-page .section-head--sub h3 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.8vw, 36px);
  font-variation-settings: 'opsz' 64, 'SOFT' 50, 'wght' 500;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 12px;
  max-width: 22ch;
}

.landing-page .section-head--sub p {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.5;
  max-width: 56ch;
}

.landing-page .section-eyebrow {
  align-items: center;
  color: var(--clay-deep);
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  gap: 8px;
  letter-spacing: 0.12em;
  margin-bottom: 18px;
  text-transform: uppercase;
}

.landing-page .section-eyebrow::before {
  background: var(--clay);
  content: '';
  display: inline-block;
  height: 1px;
  width: 24px;
}

.landing-page .section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.6vw, 60px);
  font-variation-settings: 'opsz' 96, 'SOFT' 50, 'wght' 450;
  font-weight: 450;
  letter-spacing: -0.028em;
  line-height: 1.0;
  margin-bottom: 18px;
  max-width: 18ch;
}

.landing-page .section-head--center h2 { margin-inline: 0; }

.landing-page .section-head h2 em {
  color: var(--forest);
  font-style: italic;
  font-variation-settings: 'opsz' 96, 'SOFT' 100, 'wght' 450;
}

.landing-page .section-head p {
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.5;
  max-width: 56ch;
}

.landing-page .section-head--center p { margin-inline: 0; }

/* --- 9. COMPARISON TABLE ------------------------------------------------- */

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

.landing-page .compare-table {
  border-collapse: collapse;
  font-family: var(--font-sans);
  width: 100%;
}

.landing-page .compare-table thead th {
  background: transparent;
  border-bottom: 1.5px solid var(--ink);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 14px 20px;
  text-align: left;
  text-transform: uppercase;
}

.landing-page .compare-table thead th:nth-child(2) {
  color: var(--forest);
}

.landing-page .compare-table tbody tr {
  border-bottom: 1px solid var(--rule);
  transition: background-color 200ms ease;
}

.landing-page .compare-table tbody tr:hover { background: rgba(16, 185, 129, 0.025); }

.landing-page .compare-table tbody th {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  font-variation-settings: 'opsz' 36, 'SOFT' 50, 'wght' 450;
  font-weight: 450;
  letter-spacing: -0.018em;
  padding: 28px 20px;
  text-align: left;
  vertical-align: middle;
}

.landing-page .compare-table tbody td {
  font-family: var(--font-sans);
  font-size: 16px;
  padding: 28px 20px;
  vertical-align: middle;
}

.landing-page .compare-table .yes {
  color: var(--forest);
  font-weight: 600;
}

.landing-page .compare-table .yes::before {
  color: var(--forest);
  content: '✓';
  display: inline-block;
  font-weight: 700;
  margin-right: 10px;
}

.landing-page .compare-table .no {
  color: var(--ink-muted);
  font-weight: 400;
}

.landing-page .compare-table .no::before {
  color: var(--ink-muted);
  content: '×';
  display: inline-block;
  font-size: 1.2em;
  margin-right: 12px;
}

@media (max-width: 720px) {
  .landing-page .compare-table tbody th,
  .landing-page .compare-table tbody td {
    font-size: 14px;
    padding: 18px 10px;
  }
  .landing-page .compare-table tbody th { font-size: 17px; }
}

/* --- 10. USE CASES (showcase blocks) ------------------------------------ */

.landing-page .use-case-section { padding-block: var(--pad-section); }

.landing-page .showcase {
  display: grid;
  gap: clamp(72px, 8vw, 128px);
}

.landing-page .showcase-block {
  align-items: center;
  display: grid;
  gap: clamp(28px, 4vw, 64px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.landing-page .showcase-block--reverse .showcase-image { order: 2; }
.landing-page .showcase-block--reverse .showcase-copy  { order: 1; }

@media (max-width: 820px) {
  .landing-page .showcase-block,
  .landing-page .showcase-block--reverse {
    grid-template-columns: 1fr;
  }
  .landing-page .showcase-block--reverse .showcase-image { order: 0; }
  .landing-page .showcase-block--reverse .showcase-copy  { order: 0; }
}

.landing-page .showcase-image {
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  transition: transform 400ms cubic-bezier(.2,.8,.2,1);
}

.landing-page .showcase-image::after {
  background: linear-gradient(135deg, transparent 65%, rgba(16, 185, 129, 0.04));
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.landing-page .showcase-image:hover { transform: translateY(-4px); }

.landing-page .showcase-image img {
  display: block;
  height: auto;
  width: 100%;
}

.landing-page .showcase-copy { padding-block: 8px; }

.landing-page .showcase-badge {
  align-items: center;
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  color: var(--ink);
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  gap: 8px;
  letter-spacing: 0.1em;
  margin-bottom: 18px;
  padding: 5px 12px;
  text-transform: uppercase;
}

.landing-page .showcase-badge::before {
  color: var(--clay);
  content: '#';
}

.landing-page .showcase-copy h3 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 38px);
  font-variation-settings: 'opsz' 48, 'SOFT' 50, 'wght' 450;
  font-weight: 450;
  letter-spacing: -0.024em;
  line-height: 1.05;
  margin-bottom: 14px;
  max-width: 18ch;
}

.landing-page .showcase-copy p {
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.55;
  max-width: 48ch;
}

/* --- 11. HOW IT WORKS ---------------------------------------------------- */

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

.landing-page .flow-list {
  counter-reset: step;
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.landing-page .flow-list li {
  align-items: start;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 20px;
  grid-template-columns: auto minmax(0, 1fr);
  /* 24px (was 32px) — 4 steps + the in-chat-commands subsection were
   * stacking up to a very tall section after the palette refresh. */
  padding: 24px 0;
}

.landing-page .flow-list li:last-child { border-bottom: 1px solid var(--rule); }

/* Step badge — emerald-filled square with cream numerals, replaces
 * the plain outlined slate box. Ties the step sequence directly to
 * the new brand primary so the 4 steps read as one branded unit.
 * Slight border-radius softens the editorial sharp-corner look
 * without going full bubble. */
.landing-page .flow-step-number {
  background: var(--forest);
  border: 0;
  border-radius: 10px;
  color: var(--cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-feature-settings: 'tnum' 1;
  font-size: clamp(28px, 3vw, 40px);
  font-variation-settings: 'opsz' 48, 'SOFT' 50, 'wght' 600;
  font-weight: 600;
  font-style: italic;
  height: clamp(56px, 6vw, 72px);
  width: clamp(56px, 6vw, 72px);
  letter-spacing: -0.02em;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.18);
}

.landing-page .flow-step-text {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 28px);
  font-variation-settings: 'opsz' 36, 'SOFT' 50, 'wght' 400;
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1.25;
  padding-top: clamp(8px, 1vw, 16px);
}

/* --- 12. COMING + SECOND BRAIN (merged) ---------------------------------- */

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

.landing-page .coming-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

/* Featured card — Second Brain takes 2/3 width on desktop */
.landing-page .coming-card.featured {
  background: var(--ink);
  color: var(--cream);
  grid-column: span 8;
  padding: clamp(28px, 4vw, 48px);
  position: relative;
  overflow: hidden;
}

.landing-page .coming-card.featured::before {
  background:
    radial-gradient(circle at 85% 20%, rgba(99, 102, 241, 0.22), transparent 50%),
    radial-gradient(circle at 15% 110%, rgba(16, 185, 129, 0.45), transparent 50%);
  content: '';
  inset: 0;
  position: absolute;
  pointer-events: none;
}

.landing-page .coming-card.featured > * { position: relative; z-index: 1; }

.landing-page .coming-card.featured h3 {
  color: var(--cream);
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 44px);
  font-variation-settings: 'opsz' 96, 'SOFT' 50, 'wght' 450;
  font-weight: 450;
  letter-spacing: -0.025em;
  line-height: 1.0;
  margin-block: 16px 16px;
  max-width: 18ch;
}

.landing-page .coming-card.featured h3 em {
  color: var(--clay);
  font-style: italic;
  font-variation-settings: 'opsz' 96, 'SOFT' 100, 'wght' 450;
}

.landing-page .coming-card.featured p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 17px;
  max-width: 52ch;
}

/* Standard coming cards (4 small) */
.landing-page .coming-card:not(.featured) {
  background: var(--cream-soft);
  border: 1px solid var(--rule);
  grid-column: span 4;
  padding: 28px;
  transition: transform 200ms ease, background-color 200ms ease;
}

.landing-page .coming-card:not(.featured):hover {
  background: var(--cream-dim);
  transform: translateY(-2px);
}

@media (max-width: 980px) {
  .landing-page .coming-card.featured        { grid-column: span 12; }
  .landing-page .coming-card:not(.featured)  { grid-column: span 6; }
}
@media (max-width: 560px) {
  .landing-page .coming-card:not(.featured)  { grid-column: span 12; }
}

.landing-page .coming-card-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 16px;
}

.landing-page .coming-icon {
  align-items: center;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 6px;
  color: var(--forest);
  display: inline-flex;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.landing-page .coming-card.featured .coming-icon {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--clay);
}

.landing-page .coming-badge {
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: 100px;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  text-transform: uppercase;
}

.landing-page .coming-card.featured .coming-badge {
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--clay);
}

.landing-page .coming-card:not(.featured) h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-variation-settings: 'opsz' 36, 'SOFT' 50, 'wght' 500;
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.1;
  margin-bottom: 10px;
}

.landing-page .coming-card:not(.featured) p {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.5;
}

/* Recall preview inside featured card */
.landing-page .featured-preview {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  margin-top: 24px;
  padding: 16px 18px;
}

.landing-page .featured-preview-query {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.landing-page .featured-preview-query-label {
  background: var(--clay);
  border-radius: 4px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
}

.landing-page .featured-preview-query-text {
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-mono);
  font-size: 13px;
}

.landing-page .featured-preview-result {
  border-top: 1px dashed rgba(255, 255, 255, 0.18);
  font-size: 14px;
  margin-top: 10px;
  padding-top: 10px;
}

.landing-page .featured-preview-result:first-of-type {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.landing-page .featured-preview-time {
  color: var(--clay);
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.landing-page .featured-preview-text {
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
}

/* --- 13. PRICING + REFERRAL (combined) ---------------------------------- */

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

.landing-page .pricing-grid {
  align-items: stretch;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}

@media (max-width: 820px) {
  .landing-page .pricing-grid { grid-template-columns: 1fr; }
}

.landing-page .pricing-card {
  background: var(--ink);
  border: 1px solid var(--ink);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: clamp(28px, 4vw, 48px);
  position: relative;
}

.landing-page .pricing-card-eyebrow {
  color: var(--clay);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.landing-page .pricing-card-figure {
  color: var(--cream);
  font-family: var(--font-display);
  font-feature-settings: 'tnum' 1;
  font-size: clamp(72px, 12vw, 132px);
  font-variation-settings: 'opsz' 144, 'SOFT' 50, 'wght' 500;
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.9;
}

.landing-page .pricing-card-figure .currency {
  color: var(--clay);
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 500;
}

.landing-page .pricing-card-detail {
  color: rgba(255, 255, 255, 0.78);
  font-size: 16px;
  line-height: 1.55;
}

.landing-page .pricing-card .button-link.primary {
  background: var(--clay);
  border-color: var(--clay);
  box-shadow: 0 1px 0 var(--clay-deep), 0 4px 0 var(--clay);
  color: var(--ink);
  margin-top: auto;
  align-self: flex-start;
}

.landing-page .pricing-card .button-link.primary:hover {
  background: var(--cream);
  border-color: var(--cream);
  box-shadow: 0 1px 0 var(--cream-dim), 0 6px 0 var(--cream), 0 12px 24px rgba(255, 255, 255, 0.18);
  color: var(--ink);
}

.landing-page .referral-card {
  background: var(--cream-soft);
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(28px, 4vw, 40px);
}

.landing-page .referral-tag {
  align-self: flex-start;
  background: var(--clay);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  text-transform: uppercase;
}

.landing-page .referral-card h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 40px);
  font-variation-settings: 'opsz' 64, 'SOFT' 50, 'wght' 450;
  font-weight: 450;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.landing-page .referral-card p {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.55;
}

.landing-page .referral-card .button-link { align-self: flex-start; margin-top: auto; }

/* --- 14. FAQ ------------------------------------------------------------- */

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

.landing-page .faq-list { display: flex; flex-direction: column; }

.landing-page .faq-item {
  border-top: 1px solid var(--rule);
  padding: 0;
}

.landing-page .faq-item:last-child { border-bottom: 1px solid var(--rule); }

.landing-page .faq-item summary {
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-variation-settings: 'opsz' 36, 'SOFT' 50, 'wght' 450;
  font-weight: 450;
  justify-content: space-between;
  letter-spacing: -0.02em;
  list-style: none;
  padding: 24px 0;
  transition: color 200ms ease;
}

.landing-page .faq-item summary::-webkit-details-marker { display: none; }

.landing-page .faq-item summary::after {
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  content: '+';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  height: 32px;
  width: 32px;
  transition: transform 200ms ease, background-color 200ms ease, color 200ms ease;
}

.landing-page .faq-item summary:hover { color: var(--forest); }
.landing-page .faq-item summary:hover::after {
  background: var(--ink);
  color: var(--cream);
}

.landing-page .faq-item[open] summary::after {
  background: var(--ink);
  color: var(--cream);
  content: '−';
}

.landing-page .faq-answer {
  padding: 0 0 28px;
  max-width: 64ch;
}

.landing-page .faq-answer p {
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.6;
}

.landing-page .faq-answer a {
  color: var(--forest);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.landing-page .faq-foot {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 48px;
  padding-block: 32px;
  border-top: 1px solid var(--rule);
}

.landing-page .faq-foot p {
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
}

.landing-page .faq-foot-link {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* --- 15. FINAL CTA ------------------------------------------------------- */

.landing-page .final-cta {
  border-top: 1px solid var(--rule);
  text-align: center;
  padding-block: var(--pad-section);
}

.landing-page .final-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  font-variation-settings: 'opsz' 144, 'SOFT' 50, 'wght' 450;
  font-weight: 450;
  letter-spacing: -0.028em;
  line-height: 1.0;
  margin-inline: auto;
  margin-bottom: 24px;
  max-width: 16ch;
}

.landing-page .final-cta h2 em {
  color: var(--forest);
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 450;
}

.landing-page .final-cta p {
  color: var(--ink-soft);
  font-size: 18px;
  margin-inline: auto;
  margin-bottom: 32px;
  max-width: 52ch;
}

.landing-page .final-cta .button-link { margin-inline: 6px; }

/* --- 16. FOOTER ---------------------------------------------------------- */

.landing-page .site-footer {
  border-top: 1px solid var(--rule-strong);
  display: grid;
  gap: clamp(32px, 4vw, 48px);
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr);
  margin-inline: auto;
  margin-top: 0 !important;
  max-width: var(--container);
  padding-block: clamp(48px, 6vw, 80px) clamp(24px, 3vw, 40px) !important;
}

@media (max-width: 800px) {
  .landing-page .site-footer { grid-template-columns: 1fr; }
}

.landing-page .footer-brand .brand-lockup { margin-bottom: 16px; }
.landing-page .footer-brand p {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: 8px;
  max-width: 42ch;
}

.landing-page .footer-brand a { color: var(--forest); }

.landing-page .footer-grid {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 560px) {
  .landing-page .footer-grid { grid-template-columns: 1fr 1fr; }
}

.landing-page .footer-grid section { display: flex; flex-direction: column; gap: 10px; }

.landing-page .footer-grid h2 {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.landing-page .footer-grid a,
.landing-page .footer-grid button {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--ink-soft);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.005em;
  min-height: 0;
  padding: 0;
  text-align: left;
  text-decoration: none;
  transition: color 180ms ease;
}

.landing-page .footer-grid a:hover,
.landing-page .footer-grid button:hover {
  background: transparent;
  color: var(--ink);
}

.landing-page .footer-bottom {
  border-top: 1px solid var(--rule);
  color: var(--ink-muted);
  display: flex;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  gap: 12px 32px;
  grid-column: 1 / -1;
  justify-content: space-between;
  letter-spacing: 0.02em;
  margin-top: 16px;
  padding-top: 24px;
}

/* --- 17. FADE-UP on scroll (already wired in index.html JS) -------------- */

.landing-page .fade-up-ready { opacity: 0; transform: translateY(16px); }
.landing-page .fade-up-visible {
  opacity: 1;
  transform: none;
  transition: opacity 600ms cubic-bezier(.2,.8,.2,1), transform 600ms cubic-bezier(.2,.8,.2,1);
}

/* --- 18. RESPONSIVE catch-alls ------------------------------------------ */

@media (max-width: 720px) {
  .landing-page .site-header { padding: 12px 14px; }
  .landing-page .site-nav { display: none; }
  .landing-page .hero-price { gap: 8px 18px; padding: 22px 0; }
}

/* ==========================================================================
   SUB-PAGE COMPONENTS (features / pricing / how-it-works / contact)
   Applied when <body> carries both .public-page and .landing-page classes.
   ========================================================================== */

/* Sub-pages put .landing-page on <body> — reset the section-level padding
 * that was designed for index.html's inner .landing-page section wrapper. */
body.landing-page {
  padding: 0;
}

/* --- section-intro alias (.section-intro is used in sub-pages) ----------- */

.landing-page .section-intro {
  margin-bottom: clamp(40px, 5vw, 64px);
  max-width: 760px;
}

.landing-page .section-intro--centered {
  margin-inline: auto;
  text-align: center;
}

.landing-page .section-intro h2,
.landing-page .section-intro h1 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 56px);
  font-variation-settings: 'opsz' 96, 'SOFT' 50, 'wght' 450;
  font-weight: 450;
  letter-spacing: -0.025em;
  line-height: 1.02;
  margin-bottom: 16px;
  max-width: 18ch;
}

.landing-page .section-intro--centered h2,
.landing-page .section-intro--centered h1 { margin-inline: auto; }

.landing-page .section-intro p {
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.5;
  max-width: 56ch;
}

.landing-page .section-intro--centered p { margin-inline: auto; }

/* --- public-main --------------------------------------------------------- */

.landing-page .public-main {
  margin: 0 auto;
  max-width: var(--container);
  padding-inline: var(--gutter);
  padding-top: clamp(32px, 4vw, 56px);
}

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

.landing-page .public-hero {
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(56px, 7vw, 112px) clamp(48px, 6vw, 80px);
}

.landing-page .public-hero .section-eyebrow {
  display: inline-flex;
  margin-bottom: 20px;
}

.landing-page .public-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(44px, 6.5vw, 88px);
  font-variation-settings: 'opsz' 144, 'SOFT' 50, 'wght' 440;
  font-weight: 440;
  letter-spacing: -0.03em;
  line-height: 0.98;
  margin-bottom: 24px;
  max-width: 14ch;
}

.landing-page .public-hero p {
  color: var(--ink-soft);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.5;
  max-width: 52ch;
}

/* --- public-section-wrap ------------------------------------------------- */

.landing-page .public-section-wrap {
  border-top: 1px solid var(--rule);
  padding-block: var(--pad-section);
}

/* --- public-card-grid ---------------------------------------------------- */

.landing-page .public-card-grid {
  background: var(--rule);
  border: 1px solid var(--rule);
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
}

@media (max-width: 900px) {
  .landing-page .public-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .landing-page .public-card-grid { grid-template-columns: 1fr; }
}

/* --- public-card --------------------------------------------------------- */

.landing-page .public-card {
  background: var(--cream);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(24px, 3vw, 36px);
  transition: background-color 200ms ease;
}

.landing-page .public-card--lift:hover { background: var(--cream-soft); }

.landing-page .public-card-badge {
  color: var(--clay);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.landing-page .public-card h2 {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  font-variation-settings: 'opsz' 36, 'SOFT' 50, 'wght' 500;
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.1;
}

.landing-page .public-card p {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
  margin-top: auto;
}

/* --- public-panel -------------------------------------------------------- */

.landing-page .public-panel {
  border: 1px solid var(--rule);
  padding: clamp(24px, 3vw, 40px);
}

.landing-page .public-panel--tinted { background: var(--cream-soft); }

.landing-page .public-panel ul {
  display: flex;
  flex-direction: column;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.landing-page .public-panel ul li {
  border-left: 2px solid var(--forest);
  font-size: 16px;
  line-height: 1.55;
  padding-left: 16px;
}

.landing-page .public-panel ul li strong {
  color: var(--ink);
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  font-variation-settings: 'opsz' 24, 'SOFT' 50, 'wght' 600;
  font-weight: 600;
  letter-spacing: -0.012em;
  margin-bottom: 4px;
}

.landing-page .public-panel ul li span { color: var(--ink-soft); }

/* --- footer on sub-pages (footer-bottom already sibling of footer-grid) -- */

body.landing-page .site-footer {
  border-top: 1px solid var(--rule-strong);
  display: grid;
  gap: clamp(32px, 4vw, 48px);
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr);
  margin: 0 auto;
  max-width: var(--container);
  padding-block: clamp(48px, 6vw, 80px) clamp(24px, 3vw, 40px);
  padding-inline: var(--gutter);
}

body.landing-page .footer-bottom {
  border-top: 1px solid var(--rule);
  color: var(--ink-muted);
  display: flex;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  gap: 12px 32px;
  grid-column: 1 / -1;
  justify-content: space-between;
  letter-spacing: 0.02em;
  padding-top: 24px;
}

@media (max-width: 800px) {
  body.landing-page .site-footer { grid-template-columns: 1fr; }
}