/* ============================================================
   Safha product theme — loaded AFTER style.css on Safha pages.
   The app's identity: ink on paper, monochrome, serif-italic
   emphasis. Colors mirror lib/core/theme/app_theme.dart:
   ink #111113 · bg #F6F6F7 · muted #6C6C71 · hairline #E6E6E9.
   ============================================================ */

:root {
  --ink: #111113;
  --ink-soft: #3c3c41;
  --muted: #6c6c71;
  /* Light sections sit on the app's soft grey scaffold. */
  --bg: #f6f6f7;
  --hairline: #e6e6e9;
  /* Accent tokens deliberately collapse to ink — every teal element
     (buttons, chips, kickers, numbered eyebrows) goes monochrome. */
  --teal: #111113;
  --teal-deep: #111113;
  --teal-wash: #ececee;
  --pill: #ececee;
  --gold: #cfcfd3;
  --blue: #c7c7cc;
}

/* The app has no gradient washes — backgrounds are flat. Hide the
   decorative blobs so sections sit on clean #F6F6F7, exactly like the
   app's scaffold background. (The hero re-enables its own, below.) */
.blob { display: none; }

/* ---- Dark hero ---------------------------------------------------
   The product hero uses the app's dark scaffold (#0A0A0B, surface
   #141417, hairline #2A2A2E) with soft blurred color washes behind —
   grey standing in where the studio site uses light green. */
.hero {
  background: #0a0a0b;
  color: #f5f5f6;
}
/* On a painted background, z-index:-1 children sink below it — lift the
   blobs to layer 0 and the content above them. Heavier blur than the
   studio site so the colors read as soft washes, not spots. */
.hero .blob { display: block; opacity: 0.5; z-index: 0; filter: blur(120px); }
.hero .wrap { position: relative; z-index: 1; }
.hero .blob-teal { background: #9ed9d4; }  /* the green stays in the hero */
.hero .blob-gold { background: #d9a05b; }
.hero .blob-blue { background: #5b8def; }

.hero .display { color: #f5f5f6; }
.hero .display .accent { color: #f5f5f6; }
.hero .lede { color: #b9b9be; }
.hero .hero-note { color: #85858c; }
.hero .hero-note a { color: #b9b9be; }
.hero .eyebrow {
  background: #141417;
  border-color: #2a2a2e;
  color: #9b9ba0;
}
.hero .chip {
  background: #141417;
  border-color: #2a2a2e;
  color: #d6d6da;
}
.hero .chip::before { color: #9b9ba0; }
.hero .store-badge {
  background: #141417;
  border-color: #34343a;
}
/* Left-pinned with the copy on desktop; recentered by the shared
   small-screen rules when the hero stacks. */
.hero .store-badges { justify-content: flex-start; }
@media (max-width: 900px) {
  .hero .store-badges { justify-content: center; }
}

/* The serif emphasis word keeps the headline's own color — exactly the
   app's SerifHeadline treatment (same ink, serif italic). */
.accent { color: inherit; }

/* The Download panel mirrors the hero: near-black card, light type,
   dark-surface store badges. */
.cta-panel {
  background: #0a0a0b;
  border-color: #232327;
}
.cta-panel h2 { color: #f5f5f6; }
.cta-panel .lede { color: #b9b9be; }
.cta-panel .hero-note { color: #85858c; }
.cta-panel .hero-note a { color: #d6d6da; }
.cta-panel .store-badge { background: #141417; border-color: #34343a; }

/* Safha brand mark in the nav/footer: the app icon — a white scan
   frame on a near-black rounded square. */
.safha-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #1b1b1f;
  display: grid;
  place-items: center;
  flex: none;
}
.safha-mark svg { width: 16px; height: 16px; display: block; }

/* Dynamic sticky header: white glass over light sections, dark glass
   while the dark hero is behind it (site.js toggles .on-dark). The
   backdrop blur from the base styles applies in both states. */
.site-header {
  background: rgba(255, 255, 255, 0.72);
  transition: background 0.25s ease, border-color 0.25s ease;
}
.site-header.on-dark {
  /* Near-solid, matching the hero's #0A0A0B — the blur only softens
     what slides beneath, it never greys the bar out. */
  background: rgba(10, 10, 11, 0.88);
  border-bottom-color: rgba(255, 255, 255, 0.07);
}
.site-header.on-dark .brand { color: #f5f5f6; }
.site-header.on-dark .nav-links a { color: #c9c9ce; }
.site-header.on-dark .nav-links a:hover,
.site-header.on-dark .nav-links a[aria-current="page"] { color: #fff; }
.site-header.on-dark .nav-toggle { color: #f5f5f6; border-color: rgba(255, 255, 255, 0.25); }
.site-header.on-dark .btn-ghost { color: #f5f5f6; border-color: rgba(255, 255, 255, 0.28); }
/* Primary CTA inverts, exactly like the app's dark-mode primary. */
.site-header.on-dark .btn-primary { background: #f5f5f6; color: #0a0a0b; }

/* Dark band icon chips lose the teal tint — plain white-on-dark. */
.band-dark .card-icon { background: rgba(255, 255, 255, 0.1); color: #f2f4f6; }

/* On dark surfaces the primary action inverts to white — the app's
   dark-mode primary (#F5F5F6 on #0A0A0B). */
.band-dark .btn-accent,
.band-dark .btn-primary {
  background: #f5f5f6;
  color: #0a0a0b;
}

/* Store badges on the dark hero and Download panel flip to the white
   badge variant: white ground, black Apple mark and text; the Play
   triangle keeps its brand colors. */
.hero .store-badge,
.cta-panel .store-badge {
  background: #fff;
  border-color: #fff;
  color: #0a0a0b;
}

/* Smooth-scroll targets clear the sticky header. */
section[id] { scroll-margin-top: 76px; }

/* Legal pages open with a dark band, like the product hero. The inner
   column mirrors the .prose card's geometry (760px + the same inline
   padding) so the title lines up with the document text below. */
.legal-hero { padding: clamp(84px, 10vw, 128px) 0 clamp(72px, 8vw, 104px); }
.legal-hero .display { font-size: clamp(2rem, 4.4vw, 3rem); }
.legal-hero .meta { color: #9b9ba0; margin-top: 12px; max-width: 620px; }

/* Legal body: sticky section nav in the left gutter, document card
   centered as before (1fr | 760px | 1fr keeps the card centered). */
.legal-grid {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(0, 760px) minmax(180px, 1fr);
  gap: 40px;
}
.legal-grid .toc { grid-column: 1; }
.legal-grid .prose { grid-column: 2; max-width: none; margin: 0; }
@media (max-width: 1080px) {
  .legal-grid { display: block; }
  .legal-grid .prose { max-width: 760px; margin: 0 auto; }
  .toc { display: none; }
}

.toc { position: sticky; top: 96px; align-self: start; }
.toc h4 {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--hairline); }
.toc a {
  display: block;
  padding: 5px 0 5px 14px;
  font-size: 0.87rem;
  line-height: 1.4;
  color: var(--muted);
  border-left: 2px solid transparent;
  margin-left: -1px;
}
.toc a:hover { color: var(--ink); text-decoration: none; }
.toc a.active { color: var(--ink); font-weight: 650; border-left-color: var(--ink); }

.prose h2 { scroll-margin-top: 100px; }