/* ============================================================================
   ExpensesHub marketing website — design system + components
   ----------------------------------------------------------------------------
   Brand:  Forest #2A3D33 (primary text, headers), Camel #C9A671 (CTA, accents),
           Linen #F8F4ED (soft surfaces).
   Static site only — no build step. Mirrors the Flutter app's tokens so the
   web experience reads as the same product.
   ============================================================================ */

:root {
  --c-forest:        #2A3D33;
  --c-forest-deep:   #1B2823;
  --c-forest-mid:    #3A5145;
  --c-camel:         #C9A671;
  --c-camel-deep:    #A6864F;
  --c-camel-light:   #E0C599;
  --c-linen:         #F8F4ED;
  --c-bg:            #FFFFFF;
  --c-bg-soft:       #F5F2EA;
  --c-bg-elevated:   #FAF8F2;
  --c-text:          #2A3D33;
  --c-text-sec:      #6B7570;
  --c-text-hint:     #9CA39E;
  --c-border:        #E5DFD3;
  --c-border-strong: #C9C2B0;
  --c-success:       #5A8A6B;
  --c-error:         #C0392B;

  --fz-hero:    clamp(2.4rem, 6vw, 4rem);
  --fz-h1:      clamp(2rem, 4.5vw, 3rem);
  --fz-h2:      clamp(1.6rem, 3vw, 2.2rem);
  --fz-h3:      clamp(1.15rem, 1.6vw, 1.4rem);
  --fz-body:    1.05rem;
  --fz-body-lg: 1.15rem;
  --fz-small:   0.9rem;
  --fz-eyebrow: 0.78rem;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  --container: 1180px;
  --container-narrow: 820px;
  --radius:    14px;
  --radius-sm: 8px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(42, 61, 51, 0.05);
  --shadow:    0 6px 24px -8px rgba(42, 61, 51, 0.18);
  --shadow-lg: 0 24px 60px -20px rgba(42, 61, 51, 0.28);

  --easing: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 180ms;
  --t-base: 320ms;
  --t-slow: 600ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-bg:            #0F1512;
    --c-bg-soft:       #182320;
    --c-bg-elevated:   #1F2C28;
    --c-text:          #F8F4ED;
    --c-text-sec:      #B8AFA0;
    --c-text-hint:     #6B7570;
    --c-border:        #2F3F38;
    --c-border-strong: #3F574C;
    --c-linen:         #1F2C28;
  }
}

/* ── Reset / base ────────────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--fz-body);
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

::selection { background: var(--c-camel); color: var(--c-forest-deep); }

/* Skip-to-content for keyboard users / screen readers */
.skip-link {
  position: absolute; top: -40px; left: 8px;
  background: var(--c-forest); color: #fff;
  padding: var(--s-2) var(--s-4); border-radius: var(--radius-sm);
  z-index: 1000; transition: top var(--t-fast) var(--easing);
}
.skip-link:focus { top: 8px; }

/* ── Typography ──────────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  margin: 0 0 var(--s-4) 0;
  color: var(--c-text);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
h1 { font-size: var(--fz-h1); font-weight: 800; }
h2 { font-size: var(--fz-h2); font-weight: 800; }
h3 { font-size: var(--fz-h3); font-weight: 700; }
p  { margin: 0 0 var(--s-4) 0; color: var(--c-text-sec); }
.lead { font-size: var(--fz-body-lg); color: var(--c-text-sec); }

.eyebrow {
  display: inline-block;
  font-size: var(--fz-eyebrow);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-camel-deep);
  margin-bottom: var(--s-3);
}

/* ── Layout primitives ──────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s-5);
}
.container--narrow { max-width: var(--container-narrow); }

section { padding: var(--s-9) 0; }
.section-tight { padding: var(--s-7) 0; }

.section-head {
  text-align: center;
  margin: 0 auto var(--s-7);
  max-width: 760px;
}

.row { display: flex; flex-wrap: wrap; gap: var(--s-5); }

.grid {
  display: grid;
  gap: var(--s-5);
}
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }

@media (min-width: 700px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ── Header / nav ───────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--c-border);
}
@media (prefers-color-scheme: dark) {
  .site-header { background: rgba(15, 21, 18, 0.78); }
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-3) 0;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--c-text);
  letter-spacing: -0.01em;
}
/* Brand mark = real ExpensesHub logo SVG. Set as a square that scales
   crisply at any size. The SVG already contains its own background
   gradient, glow, and color palette — we just constrain the box. */
.brand-mark {
  width: 32px; height: 32px;
  border-radius: 9px;
  display: inline-block;
  flex-shrink: 0;
  object-fit: contain;
}

.nav-links {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: var(--s-5);
  list-style: none;
  padding: 0; margin-bottom: 0;
}
.nav-links a {
  color: var(--c-text-sec);
  font-weight: 500;
  font-size: 0.95rem;
  transition: color var(--t-fast) var(--easing);
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--c-text); }

/* Stable "Sign In" link in the top nav. Same shape on every page so
   nothing about the right side of the navbar shifts when the user
   navigates between pages. Subtle pill outline distinguishes it as
   the auth entry point without making it shout. The pill keeps the
   same width/height across pages so there is no layout jump. */
.nav-signin {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  color: var(--c-text);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: border-color var(--t-fast) var(--easing),
              color var(--t-fast) var(--easing),
              background var(--t-fast) var(--easing);
}
.nav-signin:hover,
.nav-signin[aria-current="page"] {
  border-color: var(--c-camel);
  color: var(--c-camel-deep);
}

.nav-cta { margin-left: auto; }
@media (min-width: 880px) {
  .nav-links { display: flex; }
  .nav-cta { margin-left: 0; }
}

.nav-toggle {
  display: inline-flex;
  margin-left: auto;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--c-border);
  border-radius: var(--radius-sm); cursor: pointer;
  color: var(--c-text);
}
@media (min-width: 880px) { .nav-toggle { display: none; } }

.mobile-menu {
  display: none;
  border-top: 1px solid var(--c-border);
  padding: var(--s-3) 0 var(--s-5);
}
.mobile-menu.is-open { display: block; }
.mobile-menu ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--s-1);
}
.mobile-menu a {
  display: block; padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-sm); font-weight: 500;
  color: var(--c-text-sec);
}
.mobile-menu a:hover { background: var(--c-bg-soft); color: var(--c-text); }
.mobile-menu .btn { margin-top: var(--s-3); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 14px 22px;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: transform var(--t-fast) var(--easing),
              background var(--t-fast) var(--easing),
              box-shadow var(--t-base) var(--easing),
              color var(--t-fast) var(--easing),
              border-color var(--t-fast) var(--easing);
  will-change: transform;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--c-camel);
  color: var(--c-forest-deep);
  box-shadow: var(--shadow);
}
.btn-primary:hover { background: var(--c-camel-deep); color: #fff; box-shadow: var(--shadow-lg); }

.btn-ghost {
  background: transparent;
  border-color: var(--c-border-strong);
  color: var(--c-text);
}
.btn-ghost:hover { border-color: var(--c-camel); color: var(--c-camel-deep); }

.btn-disabled {
  background: var(--c-bg-soft);
  border-color: var(--c-border);
  color: var(--c-text-hint);
  cursor: not-allowed;
}
.btn-disabled:hover { transform: none; box-shadow: none; }

.btn-sm { padding: 9px 14px; font-size: 0.85rem; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: clamp(var(--s-8), 12vw, var(--s-10)) 0 var(--s-9);
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(201, 166, 113, 0.18) 0%, transparent 45%),
    radial-gradient(circle at 85% 70%, rgba(42, 61, 51, 0.10)  0%, transparent 45%),
    var(--c-bg);
}
.hero-grid {
  display: grid;
  gap: var(--s-7);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 980px) {
  /* Visual column intentionally wider than the text column so the
     animated product scene reads as the dominant element of the hero,
     not a small accessory. */
  .hero-grid { grid-template-columns: 1fr 1.3fr; gap: var(--s-7); }
}

.hero-title {
  font-size: var(--fz-hero);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: var(--s-5);
}
.hero-title .accent {
  background: linear-gradient(135deg, var(--c-camel) 0%, var(--c-camel-deep) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero-sub {
  font-size: var(--fz-body-lg);
  color: var(--c-text-sec);
  max-width: 560px;
  margin-bottom: var(--s-6);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-5); }
.hero-trust {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  font-size: var(--fz-small); color: var(--c-text-hint);
}
.hero-trust span { display: inline-flex; align-items: center; gap: var(--s-2); }
.hero-trust svg { width: 16px; height: 16px; color: var(--c-success); }

/* ============================================================================
   Hero scene — single inline SVG product demo (camera → data stream → phone).
   ----------------------------------------------------------------------------
   The entire visual is a self-contained <svg viewBox="0 0 720 600"> in
   index.html. Everything below styles individual SVG groups by class and
   drives the motion via CSS keyframes. No more absolutely-positioned tiny
   cards layered over each other — one coherent illustration scaled by the
   viewBox.
   ============================================================================ */
.hero-visual {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}
.hero-scene {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 24px 60px rgba(42, 61, 51, 0.12));
}

/* ── Camera scanline ─────────────────────────────────────────────────────
   Sweeps top → bottom inside the camera box every 2.5 seconds. */
.hero-scene .hs-scanline {
  animation: hs-scan 2.5s linear infinite;
}
@keyframes hs-scan {
  0%   { transform: translateY(0px);   opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(244px); opacity: 0; }
}

/* ── Live indicator dot pulse ───────────────────────────────────────── */
.hero-scene .hs-live {
  animation: hs-live-pulse 2.4s ease-out infinite;
  transform-origin: 20px 20px;
  transform-box: fill-box;
}
@keyframes hs-live-pulse {
  0%   { transform: scale(1);   opacity: 1; }
  60%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(1);   opacity: 0; }
}

/* ── Data stream chips ─────────────────────────────────────────────────
   Five chips travel from the camera's right edge into the phone's left
   edge. 4-second cycle, staggered by 0.8s so a chip arrives roughly every
   0.8s — the stream feels continuous, not a one-off motion. */
.hero-scene .hs-stream .chip {
  animation: hs-stream 4s linear infinite;
  opacity: 0;
}
.hero-scene .hs-stream .chip-1 { animation-delay: 0s;   }
.hero-scene .hs-stream .chip-2 { animation-delay: 0.8s; }
.hero-scene .hs-stream .chip-3 { animation-delay: 1.6s; }
.hero-scene .hs-stream .chip-4 { animation-delay: 2.4s; }
.hero-scene .hs-stream .chip-5 { animation-delay: 3.2s; }

@keyframes hs-stream {
  0%   { transform: translate(225px, 295px) scale(0.7); opacity: 0; }
  10%  { transform: translate(244px, 282px) scale(1);   opacity: 1; }
  50%  { transform: translate(316px, 248px) scale(1);   opacity: 1; }
  90%  { transform: translate(388px, 268px) scale(1);   opacity: 1; }
  100% { transform: translate(420px, 290px) scale(0.7); opacity: 0; }
}

/* ── Animated dashed flow path between camera and phone ─────────────── */
.hero-scene .hs-flow-path {
  animation: hs-flow 1s linear infinite;
}
@keyframes hs-flow {
  to { stroke-dashoffset: -16; }
}

/* ── Net KPI tile pulse ─────────────────────────────────────────────────
   Net tile pulses every 3s — aligned with the stream tempo so each
   "save" lands as the chip enters the phone. */
.hero-scene .hs-net-tile {
  animation: hs-net-pulse 3s var(--easing) infinite;
  transform-origin: 612px 156px;
}
@keyframes hs-net-pulse {
  0%, 70%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(201, 166, 113, 0));
  }
  85% {
    transform: scale(1.04);
    filter: drop-shadow(0 0 6px rgba(201, 166, 113, 0.85));
  }
}

/* ── Phone toast (cycles three messages) ──────────────────────────────
   Three <g class="toast-msg"> children share the same keyframe; staggered
   delays mean only one is visible at any moment, each holding ~2s. */
.hero-scene .hs-toast .toast-msg {
  opacity: 0;
  transform: translateY(-8px);
  animation: hs-toast 9s var(--easing) infinite;
}
.hero-scene .hs-toast .msg-a { animation-delay: 0s;  }
.hero-scene .hs-toast .msg-b { animation-delay: -3s; }
.hero-scene .hs-toast .msg-c { animation-delay: -6s; }

@keyframes hs-toast {
  0%   { opacity: 0; transform: translateY(-8px); }
  4%   { opacity: 1; transform: translateY(0); }
  26%  { opacity: 1; transform: translateY(0); }
  30%  { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 0; transform: translateY(-8px); }
}

/* ── Mobile (<700px) ──────────────────────────────────────────────────
   Hide camera + stream + flow path; CSS-translate the phone <g> from its
   desktop position (x=420) to a more centered x≈230. CSS transform
   overrides the SVG transform attribute. */
@media (max-width: 700px) {
  .hero-scene .hs-camera,
  .hero-scene .hs-stream,
  .hero-scene .hs-flow-path,
  .hero-scene .hs-bg-glow { display: none; }
  .hero-scene .hs-phone {
    transform: translate(230px, 40px);
  }
}

/* ── Section: features grid ─────────────────────────────────────────────── */
.feature-card {
  position: relative;
  padding: var(--s-5);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  transition: transform var(--t-base) var(--easing),
              border-color var(--t-base) var(--easing),
              box-shadow var(--t-base) var(--easing);
}
.feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--c-camel);
  box-shadow: var(--shadow);
}
.feature-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(201, 166, 113, 0.15), rgba(201, 166, 113, 0.05));
  color: var(--c-camel-deep);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: var(--s-4);
}
.feature-icon svg { width: 22px; height: 22px; }
.feature-card h3 { font-size: 1.1rem; margin-bottom: var(--s-2); }
.feature-card p { font-size: 0.95rem; margin: 0; }

/* ── Use-case chips ─────────────────────────────────────────────────────── */
.chip-grid {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  justify-content: center;
}
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  font-size: 0.9rem; font-weight: 600;
  color: var(--c-text-sec);
  transition: transform var(--t-fast) var(--easing),
              border-color var(--t-fast) var(--easing),
              color var(--t-fast) var(--easing);
}
.chip:hover {
  transform: translateY(-1px);
  border-color: var(--c-camel);
  color: var(--c-camel-deep);
}
.chip svg { width: 14px; height: 14px; }

/* ── How-it-works steps ─────────────────────────────────────────────────── */
.steps {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .steps { grid-template-columns: repeat(4, 1fr); } }

.step {
  position: relative;
  padding: var(--s-5);
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  transition: transform var(--t-base) var(--easing),
              box-shadow var(--t-base) var(--easing);
}
.step:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--c-forest);
  color: var(--c-camel-light);
  font-weight: 800;
  margin-bottom: var(--s-3);
}
.step h3 { font-size: 1.05rem; margin-bottom: var(--s-2); }
.step p { font-size: 0.92rem; margin: 0; }

/* ── Alternating feature blocks (Features page) ─────────────────────────── */
.split {
  display: grid;
  gap: var(--s-7);
  align-items: center;
  grid-template-columns: 1fr;
  margin-bottom: var(--s-9);
}
@media (min-width: 880px) { .split { grid-template-columns: 1fr 1fr; gap: var(--s-9); } }
.split.reverse > div:first-child { order: 2; }
@media (max-width: 879px) { .split.reverse > div:first-child { order: 0; } }

.split-visual {
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--c-bg-soft), var(--c-bg-elevated));
  border: 1px solid var(--c-border);
  padding: var(--s-7);
  min-height: 280px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.split-visual svg { max-width: 100%; height: auto; }

/* ── Trust strip ────────────────────────────────────────────────────────── */
.trust-strip {
  background: var(--c-forest);
  color: var(--c-linen);
  padding: var(--s-7) 0;
  text-align: center;
}
.trust-strip h2 { color: var(--c-linen); }
.trust-strip p { color: rgba(248, 244, 237, 0.78); }
.trust-grid {
  margin-top: var(--s-6);
  display: grid; gap: var(--s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .trust-grid { grid-template-columns: repeat(3, 1fr); } }
.trust-item {
  padding: var(--s-5);
  background: rgba(248, 244, 237, 0.06);
  border: 1px solid rgba(248, 244, 237, 0.14);
  border-radius: var(--radius);
}
.trust-item h3 { color: var(--c-camel-light); margin-bottom: var(--s-2); }
.trust-item p { color: rgba(248, 244, 237, 0.78); margin: 0; font-size: 0.95rem; }

/* ── Accountants block ─────────────────────────────────────────────────── */
.accountants {
  background: linear-gradient(135deg, var(--c-bg-soft), var(--c-bg-elevated));
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--s-7);
  display: grid; gap: var(--s-6);
  grid-template-columns: 1fr;
}
@media (min-width: 880px) { .accountants { grid-template-columns: 1.4fr 1fr; align-items: center; } }
.accountants-visual {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(2, 1fr);
}
.tag {
  padding: 10px 14px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  font-size: 0.88rem; font-weight: 600;
  text-align: center;
}

/* ── CTA banner ─────────────────────────────────────────────────────────── */
.cta-banner {
  background: linear-gradient(135deg, var(--c-forest) 0%, var(--c-forest-deep) 100%);
  color: var(--c-linen);
  padding: var(--s-8) var(--s-5);
  border-radius: var(--radius-lg);
  text-align: center;
  position: relative; overflow: hidden;
  margin: var(--s-8) auto;
  max-width: var(--container-narrow);
}
.cta-banner::before {
  content: '';
  position: absolute; top: -40%; right: -30%;
  width: 60%; aspect-ratio: 1;
  background: radial-gradient(circle, var(--c-camel) 0%, transparent 70%);
  opacity: 0.4;
}
.cta-banner h2 { color: var(--c-linen); }
.cta-banner p { color: rgba(248, 244, 237, 0.78); max-width: 540px; margin-left: auto; margin-right: auto; }
.cta-banner .btn-primary { box-shadow: 0 16px 40px -10px rgba(201, 166, 113, 0.5); }

/* ── Page header (interior pages) ──────────────────────────────────────── */
.page-header {
  padding: var(--s-9) 0 var(--s-7);
  background:
    radial-gradient(circle at 70% 0%, rgba(201, 166, 113, 0.14) 0%, transparent 55%),
    var(--c-bg);
  text-align: center;
}
.page-header h1 { margin-bottom: var(--s-3); }
.page-header p { font-size: var(--fz-body-lg); max-width: 720px; margin: 0 auto; }

/* ── Long-form content (legal pages, guide) ─────────────────────────────── */
.prose {
  max-width: var(--container-narrow);
  margin: 0 auto;
  font-size: var(--fz-body);
}
.prose h2 { margin-top: var(--s-7); margin-bottom: var(--s-4); }
.prose h3 { margin-top: var(--s-6); margin-bottom: var(--s-3); }
.prose ul, .prose ol { color: var(--c-text-sec); padding-left: 1.4em; }
.prose li { margin-bottom: var(--s-2); }
.prose strong { color: var(--c-text); }
.prose a {
  color: var(--c-camel-deep); border-bottom: 1px solid currentColor;
  transition: color var(--t-fast) var(--easing);
}
.prose a:hover { color: var(--c-forest); }
.prose .lede {
  font-size: var(--fz-body-lg);
  color: var(--c-text-sec);
  border-left: 3px solid var(--c-camel);
  padding-left: var(--s-4);
}
.prose .meta {
  display: inline-block;
  padding: var(--s-1) var(--s-3);
  background: var(--c-bg-soft);
  border-radius: var(--radius-pill);
  font-size: var(--fz-small);
  color: var(--c-text-hint);
  margin-bottom: var(--s-5);
}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq-list { max-width: var(--container-narrow); margin: 0 auto; }
.faq {
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg);
  margin-bottom: var(--s-3);
  overflow: hidden;
  transition: border-color var(--t-fast) var(--easing);
}
.faq[open] { border-color: var(--c-camel); }
.faq summary {
  padding: var(--s-4) var(--s-5);
  cursor: pointer; font-weight: 700;
  list-style: none;
  display: flex; align-items: center; gap: var(--s-3);
  color: var(--c-text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; margin-left: auto;
  width: 12px; height: 12px;
  border-right: 2px solid var(--c-text-sec);
  border-bottom: 2px solid var(--c-text-sec);
  transform: rotate(45deg);
  transition: transform var(--t-fast) var(--easing);
}
.faq[open] summary::after { transform: rotate(-135deg); }
.faq .faq-body { padding: 0 var(--s-5) var(--s-5); color: var(--c-text-sec); }
.faq .faq-body p:last-child { margin-bottom: 0; }

/* ── Contact card ──────────────────────────────────────────────────────── */
.contact-card {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 700px) { .contact-card { grid-template-columns: auto 1fr auto; } }
.contact-card .ic {
  width: 54px; height: 54px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(201, 166, 113, 0.18), rgba(201, 166, 113, 0.05));
  color: var(--c-camel-deep);
  display: inline-flex; align-items: center; justify-content: center;
}
.contact-card h3 { margin-bottom: var(--s-1); }
.contact-card .email { color: var(--c-camel-deep); font-weight: 700; }
.contact-card .email:hover { color: var(--c-forest); }

/* ── Footer ────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--c-bg-soft);
  border-top: 1px solid var(--c-border);
  padding: var(--s-8) 0 var(--s-5);
  margin-top: var(--s-8);
}
.footer-grid {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
  margin-bottom: var(--s-6);
}
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-col h4 {
  font-size: var(--fz-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-hint);
  margin-bottom: var(--s-3);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: var(--s-2); }
.footer-col a {
  color: var(--c-text-sec);
  font-size: 0.92rem;
  transition: color var(--t-fast) var(--easing);
}
.footer-col a:hover { color: var(--c-text); }
.footer-tagline { color: var(--c-text-sec); font-size: 0.95rem; max-width: 320px; }
.footer-bottom {
  border-top: 1px solid var(--c-border);
  padding-top: var(--s-4);
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  justify-content: space-between;
  font-size: 0.85rem; color: var(--c-text-hint);
}
.footer-bottom a { color: var(--c-text-sec); }
.footer-bottom a:hover { color: var(--c-text); }

/* ── Reveal-on-scroll animation (progressive enhancement) ───────────────
   Default state is VISIBLE — content always renders, even if site.js
   fails to load (file:// quirks, CSP, ad blockers, scripting disabled).
   The hide-then-reveal animation only activates inside
   `@media (scripting: enabled)`, which is true exactly when the browser
   reports active JavaScript. With JS off, the page reads as a plain
   document. With JS on, .reveal elements wait for site.js to add
   .is-visible (driven by IntersectionObserver). This was the root
   cause of /guide.html appearing empty when opened via file:// — the
   wrap-everything-in-reveal pattern stayed at opacity:0 if anything
   in the JS chain hiccuped. */
.reveal { opacity: 1; transform: none; }

@media (scripting: enabled) {
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--t-slow) var(--easing),
                transform var(--t-slow) var(--easing);
  }
  .reveal.is-visible { opacity: 1; transform: translateY(0); }
  .reveal[data-delay="1"] { transition-delay: 80ms; }
  .reveal[data-delay="2"] { transition-delay: 160ms; }
  .reveal[data-delay="3"] { transition-delay: 240ms; }
  .reveal[data-delay="4"] { transition-delay: 320ms; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ── Utility ────────────────────────────────────────────────────────────── */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-3 { margin-bottom: var(--s-3); }
.mb-5 { margin-bottom: var(--s-5); }
.muted { color: var(--c-text-sec); }
.hidden { display: none; }
.divider { height: 1px; background: var(--c-border); margin: var(--s-7) 0; }