/* ══════════════════════════════════════════════════════════════════
   Chirp marketing site — mocha light (v2 shell)
   Tokens mirror the app's mocha theme (Chirp/WebApp/css/theme.css).
   Shadows are espresso-tinted, never gray-black.
   Motion doctrine: breathing, not bouncing.

   Architecture contract (SITE-ARCHITECTURE.md):
   · two design widths — 390 and 1120; canvas capped at 1440
   · breakpoints 1024 / 768 / 430 and no others
   · one type downshift, at 768, via the --size-* tokens below
   · shared components live HERE and only here
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* color */
  --bg: #F5F1E8;
  --panel: #FFFBF0;
  --espresso: #3E2415;
  --ink: #1C1410;
  --ink-soft: #5C4A3A;
  --border: #D4CAB8;
  --border-soft: #E3DACA;
  --success: #2B7A53;
  --error: #BF4646;
  --amber: #C48A28;
  --deep: #2A1810;
  --cream-on-deep: #F5F1E8;
  --clay-1: #5A3A20;
  --clay-2: #6B4A2E;
  --clay-3: #7E603F;
  --clay-4: #D4C4A8;
  --clay-5: #E8DCC8;
  /* type */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', 'Chirp Body Fallback', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  /* the single type scale — one downshift at 768 and never again */
  --size-h1: 48px;
  --size-h2: 40px;
  --size-h3: 22px;
  --size-body: 18px;
  --size-small: 15px;
  /* geometry */
  --container: 1120px;
  --gutter: 24px;
  --radius-card: 16px;
  --radius-band: 24px;
  --radius-pill: 999px;
  --pad-section: clamp(56px, 8vw, 104px);
  /* shadow — always espresso-tinted */
  --shadow-lift: 0 6px 24px rgba(62, 36, 21, 0.10);
  --shadow-card: 0 10px 40px rgba(62, 36, 21, 0.12);
  --shadow-showcase: 0 16px 64px rgba(62, 36, 21, 0.18);
  /* motion */
  --ease-breathe: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 768px) {
  :root {
    --size-h1: 32px;
    --size-h2: 28px;
    --size-body: 17px;
    --gutter: 20px;
  }
}

/* ── metric-matched fallback ──────────────────────────────────
   Inter arrives with display=swap; overriding the fallback face's
   metrics keeps the swap from moving the layout (CLS). */

@font-face {
  font-family: 'Chirp Body Fallback';
  src: local('Helvetica Neue'), local('Arial'), local('Liberation Sans');
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
  size-adjust: 107.12%;
}

/* ── base ─────────────────────────────────────────────────────── */

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

/* the hidden attribute always wins: an element's own display rule must
   never resurrect it (the chat-demo Replay button was visible mid-run
   because .cd-replay's inline-flex beat the UA's [hidden]) */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--clay-4) var(--bg);
}

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

/* the browser's own surfaces carry the palette too */
::selection { background: var(--espresso); color: var(--cream-on-deep); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--clay-4);
  border-radius: var(--radius-pill);
  border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--clay-3); }
input, textarea { caret-color: var(--amber); }

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

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

main { display: block; }

/* ── type ─────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 560;
  font-variation-settings: 'opsz' 72;
  letter-spacing: -0.012em;
  color: var(--espresso);
  margin: 0 0 0.45em;
  text-wrap: balance;
}

h1 { font-size: var(--size-h1); line-height: 1.06; }
h2, .h2 { font-size: var(--size-h2); line-height: 1.12; }
h3 { font-size: var(--size-h3); line-height: 1.3; font-variation-settings: 'opsz' 28; }

p { margin: 0 0 1em; }

a {
  color: var(--espresso);
  text-decoration-color: var(--clay-4);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
  transition: text-decoration-color 0.2s var(--ease-breathe);
}
a:hover { text-decoration-color: var(--amber); }

strong { font-weight: 620; color: var(--espresso); }

.num {
  font-family: var(--font-mono);
  font-size: 0.94em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ── layout ───────────────────────────────────────────────────── */

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

/* media may earn the screen edges on the phone; text never does */
@media (max-width: 768px) {
  .full-bleed {
    margin-inline: calc(-1 * var(--gutter));
    border-radius: 0;
  }
}

/* ── shared components (the whole test for "shared" is: in this file) ── */

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 640;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 14px;
}

.section-sub {
  font-size: var(--size-body);
  color: var(--ink-soft);
  max-width: 58ch;
  margin: 0 0 1.4em;
}

.microcopy {
  font-size: var(--size-small);
  color: var(--ink-soft);
  margin: 14px 0 0;
}

.badge-link {
  display: inline-block;
  border-radius: 8px;
  transition: transform 0.25s var(--ease-breathe), box-shadow 0.25s var(--ease-breathe);
}
.badge-link:hover { transform: translateY(-1px); }
.badge-link img { display: block; }

/* ── FAQ (details rows) ───────────────────────────────────────── */

.faq-list {
  border-top: 1px solid var(--border);
  max-width: 760px;
}

.faq-list details {
  border-bottom: 1px solid var(--border);
}

.faq-list summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 44px;
  padding: 18px 2px;
  font-family: var(--font-display);
  /* text-grade optical size: at 24+ Fraunces swaps in its display
     letterforms and the lowercase f grows a curled hook */
  font-variation-settings: 'opsz' 9;
  font-size: 19px;
  font-weight: 560;
  color: var(--espresso);
  transition: color 0.2s var(--ease-breathe);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--clay-1); }

.faq-list summary::after {
  content: '';
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  background:
    linear-gradient(var(--clay-2), var(--clay-2)) center / 12px 1.8px no-repeat,
    linear-gradient(var(--clay-2), var(--clay-2)) center / 1.8px 12px no-repeat;
  transition: transform 0.35s var(--ease-breathe);
}
.faq-list details[open] summary::after { transform: rotate(45deg); }

.faq-list details p {
  margin: 0 0 20px;
  padding-right: 34px;
  color: var(--ink-soft);
  max-width: 66ch;
}

/* ── price cards ──────────────────────────────────────────────── */

.pricing-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  max-width: 760px;
}

.price-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 30px 28px 26px;
  box-shadow: var(--shadow-lift);
}

.price-card.featured {
  border-color: var(--espresso);
  box-shadow: var(--shadow-card);
}

.price-tag {
  position: absolute;
  top: -12px;
  left: 24px;
  background: var(--espresso);
  color: var(--cream-on-deep);
  font-size: 12px;
  font-weight: 640;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  padding: 4px 12px;
}

.price-figure {
  font-family: var(--font-mono);
  font-size: 40px;
  font-weight: 560;
  letter-spacing: -0.03em;
  color: var(--espresso);
  line-height: 1;
  margin-bottom: 6px;
}
.price-figure .num { font-size: inherit; }
.price-per { font-size: 17px; color: var(--ink-soft); font-weight: 500; margin-left: 2px; }

.price-note { font-size: var(--size-small); color: var(--ink-soft); margin: 0 0 16px; }

.price-list {
  list-style: none;
  margin: 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--border-soft);
  font-size: 16px;
  color: var(--ink-soft);
}
.price-list li {
  padding: 5px 0 5px 26px;
  background: no-repeat left 9px / 14px 14px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B7A53' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

@media (max-width: 768px) {
  .pricing-cards { grid-template-columns: 1fr; gap: 26px; }
}

/* ── the CTA band (one closing component, every story page) ───── */

.cta-band { padding: var(--pad-section) 0; }

.cta-band-card {
  background: var(--deep);
  color: var(--cream-on-deep);
  border-radius: var(--radius-band);
  padding: clamp(44px, 6vw, 72px) clamp(24px, 5vw, 72px);
  text-align: center;
  box-shadow: var(--shadow-showcase);
  position: relative;
  overflow: hidden;
}

/* one quiet warm glow, not a gradient wash */
.cta-band-card::before {
  content: '';
  position: absolute;
  inset: -40% -20% auto;
  height: 90%;
  background: radial-gradient(50% 55% at 50% 0%, rgba(196, 138, 40, 0.22), transparent 70%);
  pointer-events: none;
}

.cta-band-card > * { position: relative; }

.cta-band-card h2 {
  color: var(--cream-on-deep);
  margin-bottom: 10px;
}

.cta-band-lede {
  color: rgba(245, 241, 232, 0.78);
  max-width: 52ch;
  margin: 0 auto 26px;
}

.cta-band-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
}

.cta-alt-link {
  color: var(--cream-on-deep);
  text-decoration-color: rgba(245, 241, 232, 0.4);
}
.cta-alt-link:hover { text-decoration-color: var(--amber); }

.cta-band-card .microcopy { color: rgba(245, 241, 232, 0.62); margin-top: 18px; }
.cta-band-card .microcopy .num { color: var(--cream-on-deep); }

/* ── reveal on scroll ─────────────────────────────────────────── */

/* hidden only when JS is present to reveal it again (html.js is set
   inline in head-common); without JS everything simply shows */
.js .reveal, .js .stagger > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--reveal-duration,.7s) var(--ease-breathe), transform var(--reveal-duration,.7s) var(--ease-breathe);
}

.reveal.is-in, .stagger.is-in > * {
  opacity: 1;
  transform: none;
}

.stagger.is-in > :nth-child(2) { transition-delay: calc(var(--reveal-step,.07s) * 1); }
.stagger.is-in > :nth-child(3) { transition-delay: calc(var(--reveal-step,.07s) * 2); }
.stagger.is-in > :nth-child(4) { transition-delay: calc(var(--reveal-step,.07s) * 3); }
.stagger.is-in > :nth-child(5) { transition-delay: calc(var(--reveal-step,.07s) * 4); }
.stagger.is-in > :nth-child(6) { transition-delay: calc(var(--reveal-step,.07s) * 5); }
.stagger.is-in > :nth-child(n+7) { transition-delay: calc(var(--reveal-step,.07s) * 6); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .stagger > * { opacity: 1; transform: none; transition: none; }
}

/* ── skip link ────────────────────────────────────────────────── */

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 200;
  background: var(--espresso);
  color: var(--cream-on-deep);
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  transform: translateY(-64px);
  opacity: 0;
  transition: transform 0.3s var(--ease-breathe), opacity 0.3s;
}
.skip-link:focus-visible {
  transform: none;
  opacity: 1;
  outline-offset: 1px;
}