/* ============================================================
   BP Labs Ecosystem Landings — Shared Design System
   Extends shared.css with public-page components.
   Each landing supplies brand accent via [data-brand="<slug>"].
   ============================================================ */

@import url("shared.css");

:root {
  /* Landing-only spacing (bigger than app spacing) */
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* Display type — landings use larger heads than app shells */
  --fs-display-sm: 36px;
  --fs-display-md: 48px;
  --fs-display-lg: 64px;
  --fs-display-xl: 80px;

  /* Constrained widths */
  --content-narrow: 720px;
  --content-base:   960px;
  --content-wide:   1200px;

  /* Section padding rhythm */
  --section-y: var(--sp-20);
}

@media (max-width: 768px) {
  :root { --section-y: var(--sp-12); }
}

/* ── Public-page body baseline ──────────────────────────────
   App shells use canvas; landings use surface as the base so
   sections can layer canvas/surface alternation cleanly.
   ─────────────────────────────────────────────────────────── */
body.landing {
  background: var(--surface);
  color: var(--ink);
}

/* ══════════════════════════════════════════════════════════
   NAV (public site header)
   ══════════════════════════════════════════════════════════ */
.public-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .public-nav { background: rgba(26,26,28,0.85); }

.public-nav-inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: var(--sp-3) var(--sp-6);
  display: flex; align-items: center; gap: var(--sp-6);
}
.public-nav-brand {
  display: flex; align-items: center; gap: var(--sp-2);
  font-weight: 800; font-size: var(--fs-lg); letter-spacing: -0.01em;
  color: var(--ink);
}
.public-nav-brand .brand-glyph { width: 32px; height: 32px; }

/* WORDMARK RULE (strict — applies to landing AND saas mock brand displays):
   ───────────────────────────────────────────────────────────────────────
   ff brands (fflo, ffide, ffit, ffaro, ffuse, ffree):
     <span><em class="ff">ff</em>lo</span>
     Only the "ff" prefix is wrapped in <em class="ff">. The em renders as
     a cyan→accent gradient text fill. The "lo"/"ide"/"it" suffix stays in
     --ink. NEVER wrap the whole word — that's not the locked spec.

   AA (advisor accelerator):
     <span class="wordmark-aa">advisor accelerator</span>
     The whole wordmark uses orange→cyan gradient (locked Apr 27 spec).
     Do NOT use class="ff" for AA — .ff is for ff brands only.

   bp labs:
     <span class="wordmark-bp"><span class="bp-cyan">bp</span> labs</span>
     "bp" in cyan, "labs" in --ink. No glyph alongside (would read "bp bp labs").

   butz peteza:
     <span><em class="ff">butz</em> peteza</span>
     "butz" gets cyan→electric gradient, "peteza" in --ink. */
.public-nav-brand .ff,
.brand-name .ff,
.footer-brand .ff,
em.ff {
  font-style: normal;
  background: linear-gradient(135deg, var(--cyan-500), var(--accent));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-brand="aa"] em.ff,
[data-brand="aa"] .public-nav-brand .ff,
[data-brand="aa"] .brand-name .ff,
[data-brand="aa"] .footer-brand .ff {
  background: linear-gradient(135deg, var(--orange) 0%, var(--cyan-500) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* .ph — Philippines marker, analogous to .ff for ff-brands.
   Wraps the "pinas" suffix in the InsurePinas wordmark so it picks up
   the flag-blue → flag-red gradient (matching the locked glyph). */
.public-nav-brand .ph,
.brand-name .ph,
.footer-brand .ph,
.wordmark .ph,
em.ph {
  font-style: normal;
  background: linear-gradient(90deg, var(--flagblue, #0038A8) 0%, var(--flagred, #CE1126) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* AA wordmark (no "ff" prefix — whole word is orange→cyan gradient) */
.wordmark-aa {
  background: linear-gradient(135deg, var(--orange) 0%, var(--cyan-500) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800; letter-spacing: -0.02em; text-transform: lowercase;
}

/* bp labs wordmark (cyan "bp" + ink "labs", text-only, no glyph alongside) */
.wordmark-bp { font-weight: 800; letter-spacing: -0.02em; text-transform: lowercase; color: var(--ink); }
.wordmark-bp .bp-cyan { color: var(--cyan-500); }

.public-nav-links {
  display: flex; align-items: center; gap: var(--sp-5);
  margin-left: var(--sp-5);
}
.public-nav-link {
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--ink-muted);
  transition: color var(--t-fast);
}
.public-nav-link:hover { color: var(--ink); }
.public-nav-link.active { color: var(--accent-text); font-weight: 600; }

.public-nav-cta { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }

/* Theme toggle — small icon button in the nav cta cluster.
   Shows sun in dark mode, moon in light mode. */
.theme-toggle {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--ink-muted);
  cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.theme-toggle:hover { color: var(--ink); border-color: var(--border-strong); background: var(--surface-2); }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

@media (max-width: 768px) {
  .public-nav-links { display: none; }
}

/* ══════════════════════════════════════════════════════════
   SECTION SCAFFOLD
   ══════════════════════════════════════════════════════════ */
.section {
  padding: var(--section-y) var(--sp-6);
  position: relative;
}
.section.alt   { background: var(--canvas); }
.section.dark  { background: #1E1E1E; color: #fff; }
[data-theme="dark"] .section.dark { background: #0A0A0C; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section.brand { background: var(--accent-grad); color: #fff; }
.section.tight { padding-top: var(--sp-12); padding-bottom: var(--sp-12); }

.section-inner {
  max-width: var(--content-wide); margin: 0 auto;
}
.section-inner.narrow { max-width: var(--content-narrow); }
.section-inner.base   { max-width: var(--content-base); }

.section-head {
  text-align: center; margin-bottom: var(--sp-12);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
}
.section-head.left { text-align: left; align-items: flex-start; }
.section-eyebrow {
  font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--accent-text);
}
.section.dark .section-eyebrow,
.section.brand .section-eyebrow { color: var(--electric); }
.section-title {
  font-size: var(--fs-display-md);
  font-weight: 800; letter-spacing: -0.025em; line-height: 1.05;
  max-width: 720px;
  text-wrap: balance;
}
.hero-title { text-wrap: balance; }
.section-title .grad {
  background: var(--accent-grad);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.section-sub {
  font-size: var(--fs-lg); color: var(--ink-muted);
  max-width: 640px; line-height: 1.5;
}
.section.dark .section-sub,
.section.brand .section-sub { color: rgba(255,255,255,0.85); }

@media (max-width: 768px) {
  .section { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .section-title { font-size: var(--fs-display-sm); }
  .section-sub   { font-size: var(--fs-base); }
}

/* ══════════════════════════════════════════════════════════
   HERO VARIANTS
   ══════════════════════════════════════════════════════════ */
.hero {
  padding: var(--sp-20) var(--sp-6) var(--sp-16);
  position: relative; overflow: hidden;
}
.hero-inner { max-width: var(--content-wide); margin: 0 auto; }

/* hero / SPLIT (text left, visual right) */
.hero-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--sp-12);
  align-items: center;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 6px 12px; border-radius: var(--r-full);
  background: var(--accent-50); color: var(--accent-text);
  font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: var(--sp-5);
}
.hero-eyebrow .dot { background: var(--accent); }
.hero-title {
  font-size: var(--fs-display-lg);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.02;
  margin-bottom: var(--sp-5);
}
.hero-title .grad {
  background: var(--accent-grad);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-sub {
  font-size: var(--fs-xl); color: var(--ink-muted);
  line-height: 1.45; margin-bottom: var(--sp-8);
  max-width: 560px;
}
.hero-cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.hero-meta {
  margin-top: var(--sp-6);
  display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
  font-size: var(--fs-sm); color: var(--ink-muted);
}
.hero-meta-item { display: inline-flex; align-items: center; gap: 6px; }
.hero-meta-item .icon { color: var(--success); }

/* hero / CENTERED (single column, used by content/SaaS) */
.hero-centered {
  text-align: center; max-width: var(--content-base); margin: 0 auto;
}
.hero-centered .hero-sub { margin-left: auto; margin-right: auto; }
.hero-centered .hero-cta { justify-content: center; }
.hero-centered .hero-meta { justify-content: center; }

/* hero / VISUAL (the right-side mockup) */
.hero-visual {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  background: var(--surface-2);
  aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
}
.hero-visual::before {
  content: ''; position: absolute; inset: 0;
  background: var(--accent-grad); opacity: 0.08; z-index: 0;
}
.hero-visual-inner { position: relative; z-index: 1; padding: var(--sp-6); width: 100%; }

/* hero / DECORATIVE GRADIENT BG */
.hero.with-glow { isolation: isolate; }
.hero.with-glow::before {
  content: ''; position: absolute; z-index: -1;
  top: -200px; right: -200px;
  width: 600px; height: 600px; border-radius: 50%;
  background: var(--accent-grad); opacity: 0.12;
  filter: blur(80px);
}
.hero.with-glow::after {
  content: ''; position: absolute; z-index: -1;
  bottom: -300px; left: -200px;
  width: 600px; height: 600px; border-radius: 50%;
  background: linear-gradient(135deg, var(--electric), var(--accent));
  opacity: 0.08; filter: blur(100px);
}

@media (max-width: 900px) {
  .hero { padding: var(--sp-12) var(--sp-4); }
  .hero-split { grid-template-columns: 1fr; gap: var(--sp-8); }
  .hero-title { font-size: var(--fs-display-md); }
  .hero-sub   { font-size: var(--fs-lg); }
}

/* ══════════════════════════════════════════════════════════
   AUDIENCE TOGGLE (for two-sided directories like ffide)
   ══════════════════════════════════════════════════════════ */
.audience-switch {
  display: inline-flex; padding: 4px;
  background: var(--surface-2); border-radius: var(--r-full);
  margin-bottom: var(--sp-6);
  border: 1px solid var(--border);
}
.audience-btn {
  padding: 8px 18px; border-radius: var(--r-full);
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--ink-muted);
  transition: background var(--t-fast), color var(--t-fast);
}
.audience-btn:hover { color: var(--ink); }
.audience-btn.active {
  background: var(--surface); color: var(--accent-text);
  box-shadow: var(--sh-sm);
}

/* Audience-specific content reveals */
.audience-content { display: none; }
.audience-content.active { display: block; }

/* ══════════════════════════════════════════════════════════
   LARGE BUTTONS (landing CTAs)
   ══════════════════════════════════════════════════════════ */
.btn-lg {
  padding: 14px 28px; font-size: var(--fs-base); font-weight: 700;
  border-radius: var(--r-md);
}
.btn-xl {
  padding: 16px 32px; font-size: var(--fs-lg); font-weight: 700;
  border-radius: var(--r-md);
}
.btn-primary.btn-glow {
  box-shadow: 0 0 0 0 rgba(0,157,211,0.45);
  animation: glow-pulse 2.4s ease-in-out infinite;
}
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,157,211,0.45); }
  50% { box-shadow: 0 0 0 8px rgba(0,157,211,0); }
}
.btn-arrow::after {
  content: '→'; margin-left: 4px;
  transition: transform var(--t-fast);
}
.btn-arrow:hover::after { transform: translateX(4px); }

/* ══════════════════════════════════════════════════════════
   LOGO WALL (social proof)
   ══════════════════════════════════════════════════════════ */
.logo-wall {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-6); align-items: center;
  padding: var(--sp-6) 0;
  opacity: 0.65;
}
.logo-wall-item {
  font-size: var(--fs-sm); font-weight: 700;
  color: var(--ink-muted); text-align: center;
  letter-spacing: -0.01em;
}
.logo-wall-label {
  text-align: center; font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-subtle); font-weight: 600;
  margin-bottom: var(--sp-4);
}
@media (max-width: 700px) {
  .logo-wall { grid-template-columns: repeat(3, 1fr); }
}

/* ══════════════════════════════════════════════════════════
   STATS BAND
   ══════════════════════════════════════════════════════════ */
.stat-band {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
}
.stat-band-item { text-align: center; }
.stat-band-value {
  font-size: var(--fs-display-md); font-weight: 800;
  letter-spacing: -0.025em; line-height: 1;
  background: var(--accent-grad);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.section.dark .stat-band-value,
.section.brand .stat-band-value {
  background: linear-gradient(135deg, #fff, var(--electric));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.stat-band-label {
  font-size: var(--fs-sm); color: var(--ink-muted);
  margin-top: var(--sp-2);
}
.section.dark .stat-band-label,
.section.brand .stat-band-label { color: rgba(255,255,255,0.75); }
@media (max-width: 700px) {
  .stat-band { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
  .stat-band-value { font-size: var(--fs-display-sm); }
}

/* ══════════════════════════════════════════════════════════
   FEATURE GRIDS
   ══════════════════════════════════════════════════════════ */
.feature-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
.feature-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.feature-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .feature-grid, .feature-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .feature-grid, .feature-grid.cols-2, .feature-grid.cols-4 { grid-template-columns: 1fr; } }

.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
  border-color: var(--accent-text);
}
.feature-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-md);
  background: var(--accent-50); color: var(--accent-text);
  margin-bottom: var(--sp-4);
}
.feature-icon .icon { width: 24px; height: 24px; }
.feature-title {
  font-size: var(--fs-lg); font-weight: 700;
  margin-bottom: var(--sp-2); letter-spacing: -0.01em;
}
.feature-desc {
  font-size: var(--fs-sm); color: var(--ink-muted);
  line-height: 1.55;
}

/* Feature row (alternating text/visual blocks) */
.feature-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-12); align-items: center;
  margin-bottom: var(--sp-16);
}
.feature-row:last-child { margin-bottom: 0; }
.feature-row.reverse > :first-child { order: 2; }
.feature-row-eyebrow {
  font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--accent-text); margin-bottom: var(--sp-3);
}
.feature-row-title {
  font-size: var(--fs-display-sm); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.1;
  margin-bottom: var(--sp-4);
}
.feature-row-body { font-size: var(--fs-base); color: var(--ink-muted); line-height: 1.6; margin-bottom: var(--sp-4); }
.feature-row-visual {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-xl); aspect-ratio: 4/3;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.feature-row-visual::before {
  content: ''; position: absolute; inset: 0;
  background: var(--accent-grad); opacity: 0.06;
}
.feature-list { list-style: none; padding: 0; margin: var(--sp-4) 0 0; }
.feature-list li {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  padding: var(--sp-2) 0;
  font-size: var(--fs-base); color: var(--ink);
}
.feature-list li::before {
  content: '✓'; flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent-50); color: var(--accent-text);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
  margin-top: 2px;
}
@media (max-width: 900px) {
  .feature-row { grid-template-columns: 1fr; gap: var(--sp-6); margin-bottom: var(--sp-12); }
  .feature-row.reverse > :first-child { order: 0; }
  .feature-row-title { font-size: var(--fs-2xl); }
}

/* ══════════════════════════════════════════════════════════
   HOW-IT-WORKS STEPPER
   ══════════════════════════════════════════════════════════ */
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8); position: relative;
}
.steps.cols-4 { grid-template-columns: repeat(4, 1fr); }
.steps::before {
  content: ''; position: absolute;
  top: 28px; left: 12%; right: 12%;
  height: 2px; background: var(--border);
  z-index: 0;
}
.step { text-align: center; position: relative; z-index: 1; }
.step-num {
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--surface); border: 2px solid var(--accent);
  color: var(--accent-text);
  font-weight: 800; font-size: var(--fs-xl);
  margin-bottom: var(--sp-4);
}
.step.done .step-num { background: var(--accent); color: #fff; }
.step-title { font-size: var(--fs-lg); font-weight: 700; margin-bottom: var(--sp-2); }
.step-desc  { font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.55; }
@media (max-width: 800px) {
  .steps { grid-template-columns: 1fr; gap: var(--sp-6); }
  .steps::before { display: none; }
}

/* ══════════════════════════════════════════════════════════
   PRICING CARDS
   ══════════════════════════════════════════════════════════ */
.pricing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5); align-items: stretch;
}
.pricing-grid.cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 720px; margin: 0 auto; }
.pricing-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .pricing-grid, .pricing-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .pricing-grid, .pricing-grid.cols-2, .pricing-grid.cols-4 { grid-template-columns: 1fr; } }

.pricing-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  display: flex; flex-direction: column;
  position: relative;
  transition: transform var(--t-med), box-shadow var(--t-med);
}
.pricing-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }

.pricing-card.featured {
  border: 2px solid var(--accent);
  box-shadow: 0 12px 36px rgba(0,157,211,0.18);
  transform: scale(1.02);
}
.pricing-card.featured:hover { transform: scale(1.02) translateY(-3px); }
.pricing-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--accent-grad); color: #fff;
  padding: 4px 12px; border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.pricing-tier {
  font-size: var(--fs-sm); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent-text); margin-bottom: var(--sp-2);
}
.pricing-price {
  font-size: var(--fs-display-sm); font-weight: 800;
  letter-spacing: -0.025em; line-height: 1;
  display: flex; align-items: baseline; gap: 4px;
  margin-bottom: var(--sp-1);
}
.pricing-price .currency { font-size: var(--fs-lg); color: var(--ink-muted); font-weight: 600; }
.pricing-price .period   { font-size: var(--fs-sm); color: var(--ink-muted); font-weight: 600; }
.pricing-desc {
  font-size: var(--fs-sm); color: var(--ink-muted);
  margin-bottom: var(--sp-5); line-height: 1.5;
}
.pricing-features {
  list-style: none; padding: 0; margin: 0 0 var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-2);
  flex: 1;
}
.pricing-features li {
  font-size: var(--fs-sm);
  display: flex; align-items: flex-start; gap: var(--sp-2);
  color: var(--ink);
}
.pricing-features li::before {
  content: '✓'; color: var(--success); font-weight: 800;
  flex-shrink: 0; margin-top: 1px;
}
.pricing-features li.muted { color: var(--ink-subtle); }
.pricing-features li.muted::before { content: '—'; color: var(--ink-subtle); }

/* ══════════════════════════════════════════════════════════
   TESTIMONIALS
   ══════════════════════════════════════════════════════════ */
.testimonial-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
@media (max-width: 1000px) { .testimonial-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .testimonial-grid { grid-template-columns: 1fr; } }

.testimonial {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  display: flex; flex-direction: column;
  gap: var(--sp-4);
}
.testimonial-quote {
  font-size: var(--fs-base); line-height: 1.55;
  color: var(--ink);
}
.testimonial-quote::before {
  content: '"'; display: block; font-size: 32px;
  font-weight: 800; color: var(--accent-text); line-height: 0.5;
  margin-bottom: var(--sp-2);
}
.testimonial-author {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: auto;
}
.testimonial-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent-grad); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--fs-sm);
  flex-shrink: 0;
}
.testimonial-name { font-size: var(--fs-sm); font-weight: 700; }
.testimonial-meta { font-size: var(--fs-xs); color: var(--ink-muted); }

.testimonial-feature {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-10) var(--sp-8);
  text-align: center; max-width: var(--content-base); margin: 0 auto;
}
.testimonial-feature .testimonial-quote {
  font-size: var(--fs-xl); font-weight: 500; line-height: 1.45;
  margin-bottom: var(--sp-6);
}
.testimonial-feature .testimonial-author { justify-content: center; }
.testimonial-feature .testimonial-avatar { width: 56px; height: 56px; }

/* ══════════════════════════════════════════════════════════
   FAQ ACCORDION
   ══════════════════════════════════════════════════════════ */
.faq-list {
  max-width: var(--content-narrow); margin: 0 auto;
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--t-fast);
}
.faq-item.open { border-color: var(--accent-text); }
.faq-q {
  width: 100%; padding: var(--sp-4) var(--sp-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  text-align: left; cursor: pointer;
  font-size: var(--fs-base); font-weight: 600;
  color: var(--ink);
  transition: background var(--t-fast);
}
.faq-q:hover { background: var(--surface-2); }
.faq-q .faq-toggle {
  width: 24px; height: 24px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--accent-50); color: var(--accent-text);
  transition: transform var(--t-med);
  font-weight: 800; font-size: 16px; line-height: 1;
}
.faq-item.open .faq-toggle { transform: rotate(45deg); }
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height var(--t-med);
}
.faq-item.open .faq-a { max-height: 600px; }
.faq-a-inner {
  padding: 0 var(--sp-5) var(--sp-4);
  font-size: var(--fs-sm); color: var(--ink-muted);
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════
   CTA BAND (closing call-to-action)
   ══════════════════════════════════════════════════════════ */
.cta-band {
  text-align: center;
  padding: var(--sp-16) var(--sp-6);
  background: var(--accent-grad);
  color: #fff;
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  max-width: var(--content-wide); margin: var(--sp-12) auto;
}
.cta-band::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.18), transparent 60%);
}
.cta-band > * { position: relative; }
.cta-band-title {
  font-size: var(--fs-display-md); font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.1;
  margin-bottom: var(--sp-3);
}
.cta-band-sub {
  font-size: var(--fs-lg); opacity: 0.92;
  max-width: 560px; margin: 0 auto var(--sp-6);
}
.cta-band .btn-primary {
  background: #fff; color: var(--accent-600);
}
.cta-band .btn-primary:hover { background: var(--surface-2); }
.cta-band .btn-secondary {
  background: rgba(255,255,255,0.12);
  color: #fff; border-color: rgba(255,255,255,0.3);
}
.cta-band .btn-secondary:hover { background: rgba(255,255,255,0.2); }

/* ══════════════════════════════════════════════════════════
   FOUNDER / TRUST BLOCK
   ══════════════════════════════════════════════════════════ */
.founder-block {
  display: grid; grid-template-columns: auto 1fr;
  gap: var(--sp-8); align-items: center;
  max-width: var(--content-base); margin: 0 auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: var(--sp-8);
}
.founder-photo {
  width: 200px; height: 200px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0;
  background: var(--accent-grad);
}
.founder-photo img { width: 100%; height: 100%; object-fit: cover; }
.founder-eyebrow {
  font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--accent-text); margin-bottom: var(--sp-2);
}
.founder-name { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.02em; margin-bottom: var(--sp-2); }
.founder-title { font-size: var(--fs-sm); color: var(--ink-muted); margin-bottom: var(--sp-3); }
.founder-bio { font-size: var(--fs-base); color: var(--ink); line-height: 1.6; }
@media (max-width: 800px) {
  .founder-block { grid-template-columns: 1fr; text-align: center; padding: var(--sp-6); }
  .founder-photo { margin: 0 auto; width: 140px; height: 140px; }
}

/* ══════════════════════════════════════════════════════════
   REGION SELECTOR (shared across all AA pages)
   ══════════════════════════════════════════════════════════ */
.region-selector { position: relative; }
.region-selector-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink-muted); font-size: var(--fs-xs);
  font-family: inherit; cursor: pointer; font-weight: 600;
}
.region-selector-btn:hover { border-color: var(--orange); color: var(--ink); }
.region-selector-flag { font-size: 14px; }
.region-selector-menu {
  position: absolute; top: calc(100% + 4px); right: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--sh-md); padding: 4px; min-width: 260px; max-height: 360px;
  overflow-y: auto; z-index: 100; display: none;
}
.region-selector.open .region-selector-menu { display: block; }
.region-selector-option {
  display: flex; align-items: center; gap: var(--sp-2); width: 100%;
  padding: 8px 10px; border: 0; background: transparent; color: var(--ink);
  text-align: left; font-family: inherit; font-size: var(--fs-sm); cursor: pointer;
  border-radius: var(--r-sm);
}
.region-selector-option:hover { background: var(--canvas); }
.region-selector-option.active { background: var(--canvas); font-weight: 700; color: var(--orange); }
.region-selector-option-sub { color: var(--ink-subtle); font-size: var(--fs-xs); margin-left: auto; }
.region-selector-group {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  color: var(--ink-subtle); padding: 8px 10px 4px 10px; letter-spacing: 0.08em;
}
/* Region-aware nav CTA toggle */
.nav-cta-ph { display: none; }
body[data-region="ph"] .nav-cta-default,
body[data-region="sea"] .nav-cta-default { display: none; }
body[data-region="ph"] .nav-cta-ph,
body[data-region="sea"] .nav-cta-ph { display: inline-flex; }
/* Active nav link */
.public-nav-link.aa-nav-active { color: var(--orange); font-weight: 700; }

/* ══════════════════════════════════════════════════════════
   PUBLIC FOOTER
   ══════════════════════════════════════════════════════════ */
.public-footer {
  background: #1E1E1E; color: rgba(255,255,255,0.7);
  padding: var(--sp-16) var(--sp-6) var(--sp-8);
  margin-top: var(--sp-12);
}
[data-theme="dark"] .public-footer { background: #0A0A0C; border-top: 1px solid #3F3F46; }
.public-footer-inner { max-width: var(--content-wide); margin: 0 auto; }
.public-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--sp-8);
  margin-bottom: var(--sp-12);
}
.footer-brand {
  display: flex; align-items: center; gap: var(--sp-2);
  font-weight: 800; font-size: var(--fs-xl); color: #fff;
  margin-bottom: var(--sp-3);
}
.footer-brand .ff { color: var(--electric); }
.footer-tagline { font-size: var(--fs-sm); line-height: 1.6; max-width: 320px; }
.footer-col-title {
  font-size: var(--fs-xs); font-weight: 700;
  color: #fff; text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: var(--sp-4);
}
.footer-col-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.footer-col-list a {
  color: rgba(255,255,255,0.7); font-size: var(--fs-sm);
  transition: color var(--t-fast);
}
.footer-col-list a:hover { color: var(--electric); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: var(--sp-6);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: var(--sp-3);
  font-size: var(--fs-xs);
}
.footer-bottom .legal { display: flex; gap: var(--sp-4); }
.footer-bottom .legal a { color: rgba(255,255,255,0.55); }
.footer-bottom .legal a:hover { color: var(--electric); }
@media (max-width: 800px) {
  .public-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
  .public-footer-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   DIRECTORY-SPECIFIC: search hero + result card
   ══════════════════════════════════════════════════════════ */
.search-hero {
  display: flex; align-items: center; gap: 0;
  background: var(--surface); border: 2px solid var(--border);
  border-radius: var(--r-full); padding: 6px 6px 6px var(--sp-5);
  max-width: 640px; margin: var(--sp-6) 0;
  box-shadow: var(--sh-md);
  transition: border-color var(--t-fast);
}
.search-hero:focus-within { border-color: var(--accent-text); }
.search-hero input {
  flex: 1; border: none; background: transparent;
  font-family: inherit; font-size: var(--fs-base); color: var(--ink);
  padding: var(--sp-2) 0; min-width: 0;
}
.search-hero input:focus { outline: none; }
.search-hero .btn { white-space: nowrap; }

.directory-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-5);
  display: flex; gap: var(--sp-4); align-items: flex-start;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.directory-card:hover { border-color: var(--accent-text); box-shadow: var(--sh-md); }
.directory-avatar {
  width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-grad); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: var(--fs-xl);
}
.directory-body { flex: 1; min-width: 0; }
.directory-name {
  font-size: var(--fs-lg); font-weight: 700;
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: 4px;
}
.directory-verified {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--ffide-green);
}
.directory-meta {
  font-size: var(--fs-sm); color: var(--ink-muted);
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.directory-meta-item { display: inline-flex; align-items: center; gap: 4px; }
.directory-tags {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-3);
}

/* ══════════════════════════════════════════════════════════
   USER-BRAND-KIT WRAPPER + powered-by-fflo bar + identity glyph.
   Used on the user's public profile page (fflo.io/[handle]),
   the lead-magnet landings, and the email-link gated quiz.
   The wrapper accepts inline custom-property overrides; every
   component below picks up the user's accent automatically.
   ══════════════════════════════════════════════════════════ */
.user-brand-kit {
  /* All children read --accent / --accent-grad / etc. The wrapper
     is the cascade boundary — supply the variables inline. */
}

/* The thin URL bar across the top. Shows we're on fflo.io/[handle]
   and credits "powered by fflo". */
.powered-by-fflo-bar {
  background: var(--surface-2);
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-xs); color: var(--ink-muted);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.powered-by-fflo {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Fira Sans', system-ui, sans-serif;
  color: var(--ink-subtle);
}
.powered-by-fflo-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--r-full);
  background: var(--cyan-50); color: var(--cyan-600);
  font-weight: 700;
}
.powered-by-fflo-pill img { width: 12px; height: 12px; object-fit: contain; }

/* Small identity glyph + wordmark — used in user-brand sticky nav. */
.user-glyph {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  background: var(--accent-grad); color: var(--accent-fg);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; flex-shrink: 0;
}
.user-wordmark { font-weight: 700; text-transform: lowercase; }

/* HERO HEADSHOT block — replaces the generic .hero-visual on profile pages.
   Photo or initials inside an accent-grad circle with a soft halo behind. */
.hero-headshot {
  display: flex; align-items: center; justify-content: center;
  position: relative; min-height: 380px;
}
.hero-headshot-halo {
  position: absolute;
  width: 340px; height: 340px; border-radius: 50%;
  background: var(--accent-grad);
  opacity: 0.18; filter: blur(40px);
  pointer-events: none;
}
.hero-headshot-photo {
  position: relative;
  width: 300px; height: 300px; border-radius: 50%;
  background: var(--accent-grad); color: var(--accent-fg);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 96px; letter-spacing: -0.02em;
  box-shadow: var(--sh-lg);
  border: 8px solid var(--surface);
}
.hero-headshot-photo img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}

/* HERO HALF-BODY — rectangular 4:5 portrait, used in place of the circular
   headshot whenever the user has uploaded one. Same halo treatment so the
   accent gradient still anchors the hero. */
.hero-halfbody {
  display: flex; align-items: center; justify-content: center;
  position: relative; min-height: 420px;
}
.hero-halfbody-photo {
  position: relative;
  width: clamp(260px, 32vw, 360px);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  border: 6px solid var(--surface);
}

/* LM card extras — small "Get this free →" tag and channel-meta line */
.lm-card-cta {
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--accent-text); margin-top: var(--sp-3);
}
.lm-card-meta {
  font-size: var(--fs-xs); color: var(--ink-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 600; margin-bottom: var(--sp-2);
}

/* ══════════════════════════════════════════════════════════
   CALENDAR BOOKING PAGE — used by the user's `book-call` tier.
   Two-pane: advisor card on left, calendar + slots + confirm on right.
   ══════════════════════════════════════════════════════════ */
.booking-grid {
  display: grid; grid-template-columns: 320px 1fr; gap: var(--sp-5);
  margin-top: var(--sp-5);
}
@media (max-width: 900px) { .booking-grid { grid-template-columns: 1fr; } }

.booking-advisor { padding: var(--sp-5); }
.booking-advisor-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.booking-advisor-photo {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-grad); color: var(--accent-fg);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: var(--fs-lg);
}
.booking-advisor-name { font-weight: 800; font-size: var(--fs-base); line-height: 1.2; }
.booking-advisor-title { font-size: var(--fs-xs); color: var(--ink-muted); margin-top: 2px; }
.booking-advisor-location { font-size: var(--fs-xs); color: var(--ink-muted); margin-top: 4px; }
.booking-meta-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-2);
  padding-top: var(--sp-4); border-top: 1px solid var(--border);
}
.booking-meta { text-align: center; }
.booking-meta-label { font-size: 10px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.booking-meta-value { font-size: var(--fs-sm); font-weight: 600; margin-top: 4px; }

.booking-main { padding: var(--sp-5); }

.booking-step-list { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.booking-step-pill {
  flex: 1; padding: 6px var(--sp-3); border-radius: var(--r-sm);
  font-size: var(--fs-xs); font-weight: 600;
  background: var(--surface-2); color: var(--ink-muted); text-align: center;
}
.booking-step-pill.done { background: var(--success-50); color: var(--success); }
.booking-step-pill.active { background: var(--accent); color: var(--accent-fg); }

.booking-cal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-3);
}
.booking-cal-month { font-weight: 700; font-size: var(--fs-base); }
.booking-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  margin-bottom: var(--sp-5);
}
.booking-cal-dow {
  font-size: 10px; color: var(--ink-muted); text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: 700; text-align: center;
  padding: 6px 0;
}
.booking-cal-day {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 600;
  background: var(--surface); color: var(--ink); cursor: pointer;
  transition: all var(--t-fast);
}
.booking-cal-day.available:hover { border-color: var(--accent); background: var(--accent-50); }
.booking-cal-day.selected { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.booking-cal-day.past, .booking-cal-day.closed, .booking-cal-day.booked {
  color: var(--ink-subtle); background: var(--surface-2);
  cursor: not-allowed; border-color: transparent;
}
.booking-cal-day.booked { text-decoration: line-through; }

.booking-slots-head {
  font-size: var(--fs-sm); color: var(--ink-muted);
  margin-bottom: var(--sp-3);
}
.booking-slots {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px;
  margin-bottom: var(--sp-5);
}
.booking-slot {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer; transition: all var(--t-fast);
}
.booking-slot:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-50); }
.booking-slot.selected { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.booking-slot.taken { color: var(--ink-subtle); background: var(--surface-2); cursor: not-allowed; text-decoration: line-through; }

.booking-confirm { padding-top: var(--sp-5); border-top: 1px solid var(--border); }
.booking-confirm-head {
  font-size: var(--fs-sm); color: var(--ink-muted);
  margin-bottom: var(--sp-4);
}
.booking-confirm-head strong { color: var(--ink); }

/* LM-landing fast-track row — secondary CTA below the email-capture form
   that skips the magnet flow and goes straight to booking. Reserved for
   warmer leads who already know they want a call. */
.lmlp-fasttrack {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-2); flex-wrap: wrap;
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.lmlp-fasttrack span { color: var(--ink-muted); }
.lmlp-fasttrack a { color: var(--accent-text); font-weight: 700; }
.lmlp-fasttrack a:hover { text-decoration: underline; }

/* Post card — feature-card with a hero image block at the top.
   Used in public profile recent-thinking (and anywhere a content
   post needs a visual). Image is a gradient block + large emoji. */
.post-card { padding: 0; overflow: hidden; }
.post-card > .lm-card-meta,
.post-card > .feature-title,
.post-card > .feature-desc { padding-left: var(--sp-5); padding-right: var(--sp-5); }
.post-card > .lm-card-meta { margin-top: var(--sp-4); }
.post-card > .feature-desc { padding-bottom: var(--sp-5); }
.post-card-image {
  height: 160px;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.post-card-image::after {
  /* subtle vignette so the emoji pops */
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at center, transparent 30%, rgba(0,0,0,0.18) 100%);
  pointer-events: none;
}
.post-card-image-emoji {
  font-size: 56px; line-height: 1;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.25));
  position: relative; z-index: 1;
}

/* ══════════════════════════════════════════════════════════
   COMPARISON TABLE (before / after)
   ══════════════════════════════════════════════════════════ */
.comparison {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  max-width: var(--content-base); margin: 0 auto;
}
.comparison-col {
  border-radius: var(--r-lg); padding: var(--sp-6);
  border: 1px solid var(--border);
}
.comparison-col.before { background: var(--surface-2); }
.comparison-col.after  { background: var(--accent-50); border-color: var(--accent-text); }
.comparison-label {
  font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: var(--sp-4);
}
.comparison-col.before .comparison-label { color: var(--ink-muted); }
.comparison-col.after .comparison-label { color: var(--accent-600); }
.comparison-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.comparison-list li { font-size: var(--fs-sm); display: flex; align-items: flex-start; gap: var(--sp-2); }
.comparison-col.before .comparison-list li::before {
  content: '✕'; color: var(--ink-subtle); font-weight: 800; flex-shrink: 0;
}
.comparison-col.after .comparison-list li::before {
  content: '✓'; color: var(--accent-text); font-weight: 800; flex-shrink: 0;
}
@media (max-width: 700px) { .comparison { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════
   VERIFICATION CARD  (ffide credential preview, public profiles
   that need to display verified-license badging)
   ══════════════════════════════════════════════════════════ */
.verification-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: var(--sp-5);
  box-shadow: var(--sh-md);
  width: 100%; max-width: 360px;
}
.vc-head {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.vc-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent-grad); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: var(--fs-xl);
  flex-shrink: 0;
}
.vc-name { font-weight: 800; font-size: var(--fs-lg); display: flex; align-items: center; gap: 6px; }
.vc-title { font-size: var(--fs-xs); color: var(--ink-muted); margin-top: 2px; }
.vc-meta { font-size: var(--fs-xs); color: var(--ink-muted); display: flex; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.vc-checks {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.vc-check {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--ffide-green);
}
.vc-rating { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.vc-stars { color: var(--aa-orange); letter-spacing: 1px; font-weight: 700; }

/* ══════════════════════════════════════════════════════════
   TRUST RING  (ffide trust score, reusable for any verified-rating
   display; conic-gradient driven by --score CSS var: 0–100)
   ══════════════════════════════════════════════════════════ */
.trust-ring {
  width: 140px; height: 140px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; position: relative;
  background: conic-gradient(var(--ffide-green) calc(var(--score, 87) * 1%), var(--surface-2) 0);
}
.trust-ring::before {
  content: ''; position: absolute; inset: 8px; border-radius: 50%;
  background: var(--surface);
}
.trust-ring > * { position: relative; z-index: 1; }
.trust-ring .score { font-size: 36px; font-weight: 800; line-height: 1; color: var(--ffide-green); }
.trust-ring .score-label { font-size: var(--fs-xs); color: var(--ink-muted); margin-top: 4px; }

/* ══════════════════════════════════════════════════════════
   PUBLIC SHELL  (consumer-facing pages: ffide directory,
   fflo profile, any /search or /p/[slug] page)
   ══════════════════════════════════════════════════════════ */
.public-shell { background: var(--surface); min-height: 100vh; }
.public-header {
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.85); backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 10;
}
[data-theme="dark"] .public-header { background: rgba(26,26,28,0.85); }
.public-header-row {
  max-width: 1100px; margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
}
.public-brand { font-weight: 800; font-size: var(--fs-xl); letter-spacing: -0.02em; }
.public-brand .ff { color: var(--accent); }

.btn-cta {
  background: #1E1E1E; color: #fff;
  padding: 6px 14px; border-radius: var(--r-md); font-weight: 600;
}
.btn-cta:hover { background: #000; }
[data-theme="dark"] .btn-cta { background: var(--accent); color: var(--accent-fg, #fff); }
[data-theme="dark"] .btn-cta:hover { background: var(--accent-600); }

/* ══════════════════════════════════════════════════════════
   HERO SEARCH  (directory/discovery hero with inline search box)
   ══════════════════════════════════════════════════════════ */
.hero-search { max-width: 560px; margin: 0 auto; display: flex; gap: var(--sp-2); }
.hero-search-input { flex: 1; position: relative; }
.hero-search-input svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--ink-subtle);
}
.hero-search input {
  width: 100%; padding: 14px 14px 14px 40px;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  font-family: inherit; font-size: var(--fs-sm);
  background: var(--surface); color: var(--ink);
}
.hero-search input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-50);
}
.hero-search button {
  background: #1E1E1E; color: #fff;
  padding: 0 24px; border-radius: var(--r-lg);
  font-weight: 700; font-size: var(--fs-sm);
}
[data-theme="dark"] .hero-search button { background: var(--accent); color: var(--accent-fg, #fff); }

/* ══════════════════════════════════════════════════════════
   HERO STATS  (3-up stat row under directory hero)
   ══════════════════════════════════════════════════════════ */
.hero-stats {
  max-width: 540px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3);
  padding: 24px;
}
.hero-stat-value {
  font-size: var(--fs-xl); font-weight: 800; font-family: 'Fira Sans', monospace;
}
.hero-stat-label {
  font-size: var(--fs-xs); color: var(--ink-subtle); margin-top: 4px;
}

/* ══════════════════════════════════════════════════════════
   HERO BADGE  (eyebrow pill above directory hero h1)
   ══════════════════════════════════════════════════════════ */
.hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(244,164,74,0.12); color: #B45309;
  border: 1px solid rgba(244,164,74,0.25);
  padding: 4px 14px; border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: var(--sp-4);
}
[data-theme="dark"] .hero-badge { background: rgba(244,164,74,0.18); color: #FCD34D; }

/* ══════════════════════════════════════════════════════════
   DIRECTORY  (results list page: ffide /search, future fflo /agents)
   ══════════════════════════════════════════════════════════ */
.dir-shell { background: var(--canvas); min-height: 100vh; }
.dir-search-bar {
  max-width: 1100px; margin: 0 auto; padding: 24px 24px 12px;
  display: flex; gap: var(--sp-2);
}
.dir-results-meta {
  max-width: 1100px; margin: 0 auto; padding: 0 24px var(--sp-3);
  color: var(--ink-muted); font-size: var(--fs-sm);
}
.dir-results {
  max-width: 1100px; margin: 0 auto; padding: 0 24px 60px;
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.pro-row {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 14px 20px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  cursor: pointer;
}
.pro-row:hover { border-color: var(--border-strong); box-shadow: var(--sh-sm); }
.pro-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface-2); color: var(--ink-muted);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--fs-sm); flex-shrink: 0;
}
.pro-name {
  display: flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: var(--fs-sm);
}
.pro-shield { color: var(--accent); width: 14px; height: 14px; }
.pro-pill-pro {
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(244,164,74,0.15); color: #B45309;
  padding: 2px 6px; border-radius: 3px;
}
.pro-meta { font-size: var(--fs-xs); color: var(--ink-subtle); margin-top: 2px; }
.pro-trust { text-align: right; flex-shrink: 0; }
.pro-trust-score {
  font-size: var(--fs-lg); font-weight: 800; font-family: 'Fira Sans', monospace;
}
.pro-trust-label { font-size: 9px; color: var(--ink-subtle); }
.pro-chevron { color: var(--ink-subtle); flex-shrink: 0; }
.pro-row:hover .pro-chevron { color: var(--ink-muted); }
.dir-pagination {
  max-width: 1100px; margin: 24px auto 0; padding: 0 24px;
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  color: var(--ink-muted); font-size: var(--fs-sm);
}
.dir-pagination a {
  padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--r-md);
  color: var(--ink-muted);
}
.dir-pagination a:hover { background: var(--surface); }

/* ══════════════════════════════════════════════════════════
   PROFILE DETAIL  (/p/[slug]) — ffide individual profile page
   ══════════════════════════════════════════════════════════ */
.profile-header {
  background: linear-gradient(135deg, #14B8A6, var(--ffide-green));
  color: #fff; padding: var(--sp-8); border-radius: var(--r-lg);
  margin-bottom: var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
}
.profile-photo {
  width: 96px; height: 96px; border-radius: 50%;
  background: rgba(255,255,255,0.2); border: 3px solid #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; font-weight: 700; flex-shrink: 0;
}
.profile-name { font-size: var(--fs-2xl); font-weight: 800; }
.profile-title { font-size: var(--fs-base); opacity: 0.92; }
.profile-badges { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.profile-badges .pill { background: rgba(255,255,255,0.18); color: #fff; }

/* ══════════════════════════════════════════════════════════
   KYC STEP LIST  (verification flow steps; ffide claim, fflo onboarding)
   ══════════════════════════════════════════════════════════ */
.kyc-step {
  display: flex; gap: var(--sp-3); padding: var(--sp-4); align-items: center;
  border: 1px solid var(--border); border-radius: var(--r-md);
  margin-bottom: var(--sp-2);
}
.kyc-step.done { background: rgba(42,157,92,0.06); border-color: rgba(42,157,92,0.3); }
.kyc-step.active { background: var(--accent-50); border-color: var(--accent); }
.kyc-step-icon {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--ink-muted);
  font-weight: 700; flex-shrink: 0;
}
.kyc-step.done .kyc-step-icon { background: var(--ffide-green); color: #fff; }
.kyc-step.active .kyc-step-icon { background: var(--accent); color: #fff; }

/* ══════════════════════════════════════════════════════════
   PUBLIC PROFILE (fflo.io/[username]) — per-user landing card
   ══════════════════════════════════════════════════════════ */
.pp-shell { max-width: 880px; margin: 0 auto; padding: var(--sp-8) var(--sp-6) var(--sp-16); }
.pp-url-bar {
  background: var(--surface-2); padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-xs);
  color: var(--ink-muted); font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.pp-url-bar .dot { width: 8px; height: 8px; border-radius: 50%; }
.pp-hero {
  display: grid; grid-template-columns: 140px 1fr; gap: var(--sp-6); align-items: center;
  padding-bottom: var(--sp-6); border-bottom: 1px solid var(--border);
}
.pp-photo {
  width: 140px; height: 140px; border-radius: 50%;
  background: var(--accent-grad); color: var(--accent-fg);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 48px;
  border: 4px solid var(--surface); box-shadow: var(--sh-md);
}
.pp-name {
  font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.05; margin-bottom: 4px;
}
.pp-title { font-size: var(--fs-base); color: var(--ink-muted); margin-bottom: var(--sp-3); }
.pp-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.pp-section { padding: var(--sp-6) 0; border-bottom: 1px solid var(--border); }
.pp-section:last-child { border-bottom: none; }
.pp-section h3 { font-size: var(--fs-lg); font-weight: 700; margin-bottom: var(--sp-3); }
.pp-bio { font-size: var(--fs-base); line-height: 1.65; color: var(--ink); }
.pp-cta-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin: var(--sp-4) 0;
}
.pp-cta-card {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-3);
  cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast);
}
.pp-cta-card:hover { border-color: var(--accent); background: var(--accent-50); }
.pp-cta-emoji { font-size: 28px; flex-shrink: 0; }
.pp-lm-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-3);
}
.pp-lm-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--sp-4);
  display: flex; flex-direction: column;
}
.pp-lm-card h4 { font-size: var(--fs-base); font-weight: 700; margin-bottom: 4px; }
.pp-lm-card p {
  font-size: var(--fs-sm); color: var(--ink-muted); margin-bottom: var(--sp-3);
  line-height: 1.5; flex: 1;
}
.pp-lm-clickable {
  cursor: pointer; text-decoration: none; color: var(--ink);
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.pp-lm-clickable:hover {
  transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--accent);
}
.pp-lm-emoji { font-size: 28px; margin-bottom: var(--sp-2); }
.pp-lm-cta {
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--accent-text); margin-top: var(--sp-3);
}
.pp-fflo-badge {
  text-align: center; padding: var(--sp-4); margin-top: var(--sp-6);
  font-size: var(--fs-xs); color: var(--ink-subtle);
}
.pp-fflo-badge .ff { color: var(--accent-text); font-weight: 700; }

/* ══════════════════════════════════════════════════════════
   LEAD-MAGNET LANDING PAGE  (one per magnet — first name + email
   capture; magnet delivered via email link only)
   ══════════════════════════════════════════════════════════ */
.lmlp-shell { max-width: 720px; margin: 0 auto; padding: var(--sp-12) var(--sp-6) var(--sp-16); }
.lmlp-emoji { font-size: 56px; margin-bottom: var(--sp-3); }
.lmlp-title {
  font-size: var(--fs-display-md, 48px); font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.05; margin-bottom: var(--sp-3);
}
.lmlp-sub {
  font-size: var(--fs-lg); color: var(--ink-muted);
  line-height: 1.45; margin-bottom: var(--sp-6);
}
.lmlp-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-6);
}
.lmlp-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.lmlp-form input {
  width: 100%; padding: 12px 14px; font-family: inherit; font-size: var(--fs-base);
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink);
}
.lmlp-form input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-50);
}
.lmlp-bullets {
  display: flex; flex-direction: column; gap: var(--sp-2);
  margin: var(--sp-5) 0; padding: var(--sp-4); background: var(--surface-2);
  border-radius: var(--r-md); font-size: var(--fs-sm);
}
.lmlp-bullets li { display: flex; align-items: center; gap: var(--sp-2); }
.lmlp-bullets li::before { content: '✓'; color: var(--success); font-weight: 800; }
.lmlp-disclaimer {
  font-size: var(--fs-xs); color: var(--ink-subtle);
  text-align: center; margin-top: var(--sp-3);
}
.lmlp-success {
  background: var(--success-50); border: 1px solid var(--success);
  border-radius: var(--r-md); padding: var(--sp-5); text-align: center;
  margin-top: var(--sp-5);
}
.lmlp-success-emoji { font-size: 40px; margin-bottom: var(--sp-2); }

/* ══════════════════════════════════════════════════════════
   LEAD-MAGNET EMAIL-LINK PAGE  (interactive quiz/calculator/checklist
   gated behind email link; sender bar + question + progress)
   ══════════════════════════════════════════════════════════ */
.lm-shell { max-width: 640px; margin: 0 auto; padding: var(--sp-12) var(--sp-6) var(--sp-16); }
.lm-from {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-6);
  background: var(--accent-50); border: 1px solid var(--border);
  border-radius: var(--r-md); font-size: var(--fs-sm);
}
.lm-from .lm-from-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent-grad); color: var(--accent-fg);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; flex-shrink: 0;
}
.lm-title {
  font-size: var(--fs-3xl); font-weight: 800;
  letter-spacing: -0.02em; margin-bottom: var(--sp-3);
}
.lm-quiz-q { font-size: var(--fs-lg); font-weight: 600; margin-bottom: var(--sp-3); }
.lm-quiz-opts { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.lm-quiz-opt {
  padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--surface);
  cursor: pointer; transition: all var(--t-fast);
  text-align: left; font-size: var(--fs-sm);
}
.lm-quiz-opt:hover { border-color: var(--accent); background: var(--accent-50); }
.lm-quiz-opt.selected { border-color: var(--accent); background: var(--accent-50); font-weight: 600; }
.lm-progress {
  height: 4px; background: var(--surface-2); border-radius: 2px;
  margin-bottom: var(--sp-6); overflow: hidden;
}
.lm-progress > span {
  display: block; height: 100%; background: var(--accent);
  transition: width var(--t-med);
}
.lm-actions { display: flex; justify-content: space-between; margin-top: var(--sp-5); }
.lm-results-bar {
  height: 12px; border-radius: 6px; background: var(--surface-2);
  overflow: hidden; margin: var(--sp-3) 0;
}
.lm-results-bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--warning), var(--success));
}

/* ══════════════════════════════════════════════════════════
   SCARCITY BAR  (pricing-page urgency banner: AA Q2 slots,
   fflo founding cohort, etc.)
   ══════════════════════════════════════════════════════════ */
.scarcity {
  background: #1E1E1E; color: #fff; text-align: center;
  padding: 8px var(--sp-4); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.04em;
}
.scarcity strong { color: var(--electric); }

/* ══════════════════════════════════════════════════════════
   COMPLIANCE CARD  (positioning callout — used on AA landing
   for the "compliance officer says yes" moat)
   ══════════════════════════════════════════════════════════ */
.compliance-card {
  background: var(--accent-50); border: 1px solid var(--accent);
  border-left: 4px solid var(--accent); border-radius: var(--r-md);
  padding: var(--sp-5); display: flex; gap: var(--sp-4); align-items: flex-start;
}
.compliance-card-icon { font-size: 32px; flex-shrink: 0; }
.compliance-card h3 { font-size: var(--fs-lg); font-weight: 700; margin-bottom: 6px; }
.compliance-card p {
  font-size: var(--fs-sm); color: var(--ink); line-height: 1.6; margin: 0;
}

/* ══════════════════════════════════════════════════════════
   PRODUCT SHOT  (landing-page hero visual — browser-frame mock
   of the in-app SaaS, fflo landing uses this for the chart preview)
   ══════════════════════════════════════════════════════════ */
.product-shot { margin: var(--sp-12) auto 0; max-width: 1080px; padding: 0 var(--sp-4); }
.product-frame {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: var(--sp-2);
  box-shadow: 0 24px 60px rgba(0,157,211,0.12), 0 8px 24px rgba(0,0,0,0.06);
  overflow: hidden;
}
.product-frame-bar {
  display: flex; align-items: center; gap: 6px;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.product-frame-bar .dot { width: 10px; height: 10px; border-radius: 50%; }
.product-frame-bar .url {
  margin-left: var(--sp-3); font-size: var(--fs-xs);
  color: var(--ink-muted); font-family: ui-monospace, monospace;
}
.product-canvas {
  background: var(--canvas); padding: var(--sp-5);
  display: grid; grid-template-columns: 200px 1fr; gap: var(--sp-4);
  min-height: 380px;
}
.pc-side {
  background: var(--surface); border-radius: var(--r-md);
  padding: var(--sp-3); display: flex; flex-direction: column; gap: 4px;
}
.pc-side-item {
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
  font-size: var(--fs-xs); color: var(--ink-muted);
  display: flex; align-items: center; gap: var(--sp-2);
}
.pc-side-item.active { background: var(--accent-50); color: var(--accent); font-weight: 700; }
.pc-side-item .pcs-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pc-main { display: flex; flex-direction: column; gap: var(--sp-3); }
.pc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.pc-stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--sp-3);
}
.pc-stat-l {
  font-size: 9px; color: var(--ink-muted); text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: 700; margin-bottom: 4px;
}
.pc-stat-v {
  font-size: var(--fs-xl); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1;
}
.pc-chart {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--sp-3); flex: 1; min-height: 200px;
  background-image:
    linear-gradient(180deg, transparent 70%, rgba(0,157,211,0.08) 100%),
    repeating-linear-gradient(0deg, transparent 0 24px, var(--border) 24px 25px);
  position: relative;
}
.pc-chart::before {
  content: ''; position: absolute; left: 24px; right: 24px; bottom: 32px; top: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'><polyline points='0,80 50,72 100,68 150,55 200,50 250,38 300,30 350,18 400,10' fill='none' stroke='%23009DD3' stroke-width='3' /><polyline points='0,80 50,72 100,68 150,55 200,50 250,38 300,30 350,18 400,10 400,100 0,100' fill='url(%23g)' opacity='0.18'/><defs><linearGradient id='g' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23009DD3'/><stop offset='1' stop-color='%23009DD3' stop-opacity='0'/></linearGradient></defs></svg>");
  background-size: 100% 100%; background-repeat: no-repeat;
}

/* ══════════════════════════════════════════════════════════
   TRUST BADGE  (small inline pill: "verified", "licensed", etc.)
   ══════════════════════════════════════════════════════════ */
.trust-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-full);
  background: var(--ffide-green-50); color: var(--ffide-green);
  font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.trust-badge svg { width: 14px; height: 14px; }

/* ══════════════════════════════════════════════════════════
   REGION-AWARE BLOCKS  (generic show/hide based on body[data-region])
   data-for accepts space-separated tokens: "na", "ph", "sea", "global",
   and the special "default" token (shown for any region that doesn't
   have a more-specific variant on the same page).
   ══════════════════════════════════════════════════════════ */
.region-block { display: none; }
body[data-region="global"] .region-block[data-for~="global"],
body[data-region="na"]     .region-block[data-for~="na"],
body[data-region="ph"]     .region-block[data-for~="ph"],
body[data-region="sea"]    .region-block[data-for~="sea"] { display: block; }
/* "default" matches all regions — use sparingly. Combined with a more
   specific token (e.g. data-for="na default") this stays NA-visible but
   also becomes the fallback for global/region-unset visitors. */
body[data-region="global"] .region-block[data-for~="default"] { display: block; }

/* ══════════════════════════════════════════════════════════
   STATUS RIBBON  (full-width strip above nav announcing
   pre-launch state, founding-cohort access, region notice)
   ══════════════════════════════════════════════════════════ */
.status-ribbon {
  background: linear-gradient(90deg, var(--orange) 0%, var(--cyan-500) 100%);
  color: #fff;
  padding: 8px var(--sp-4);
  text-align: center;
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.04em;
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  flex-wrap: wrap;
}
.status-ribbon .ribbon-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,0.25);
  animation: ribbonPulse 2s ease-in-out infinite;
}
@keyframes ribbonPulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(255,255,255,0.25); }
  50%     { box-shadow: 0 0 0 6px rgba(255,255,255,0.45); }
}
.status-ribbon a { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 800; }
.status-ribbon a:hover { color: rgba(255,255,255,0.9); }

/* ══════════════════════════════════════════════════════════
   PRODUCT MOCKUPS  (wireframe-style HTML+CSS app shells used
   on /fflo to show what the product surface looks like — no
   real screenshots, intentionally illustrative)
   ══════════════════════════════════════════════════════════ */
.mock-frame {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-lg);
  font-family: inherit;
}
.mock-chrome {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 10px var(--sp-4);
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--ink-muted);
}
.mock-chrome .dots { display: flex; gap: 6px; }
.mock-chrome .dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.mock-chrome .url-pill {
  background: var(--surface); padding: 4px var(--sp-3);
  border-radius: var(--r-full); border: 1px solid var(--border);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; color: var(--ink-muted);
  flex: 1; max-width: 380px; text-align: center;
}
.mock-body {
  display: grid; grid-template-columns: 180px 1fr;
  min-height: 360px;
}
.mock-body.single-col { grid-template-columns: 1fr; }
.mock-sidebar {
  background: var(--canvas); border-right: 1px solid var(--border);
  padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2);
  font-size: var(--fs-sm);
}
.mock-sidebar-item {
  padding: 8px 10px; border-radius: var(--r-sm);
  color: var(--ink-muted); display: flex; align-items: center; gap: 8px;
}
.mock-sidebar-item.active { background: var(--accent-50); color: var(--accent-text); font-weight: 600; }
.mock-sidebar-item::before { content: ''; width: 14px; height: 14px; border-radius: 3px; background: currentColor; opacity: 0.4; }
.mock-content { padding: var(--sp-5) var(--sp-6); background: var(--surface); }
.mock-section-title { font-weight: 800; font-size: var(--fs-lg); color: var(--ink); margin-bottom: var(--sp-4); }
.mock-card {
  background: var(--canvas); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--sp-4);
  margin-bottom: var(--sp-3);
}
.mock-card-row { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }
.mock-bar { height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.mock-bar > span { display: block; height: 100%; background: var(--accent); }
.mock-pill {
  display: inline-block; padding: 2px 8px; border-radius: var(--r-full);
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  background: var(--accent-50); color: var(--accent-text);
  text-transform: uppercase;
}
.mock-pill.ok { background: rgba(16,185,129,0.15); color: #047857; }
[data-theme="dark"] .mock-pill.ok { color: #34D399; }
.mock-skeleton {
  height: 12px; background: linear-gradient(90deg, var(--surface-2) 0%, var(--canvas) 50%, var(--surface-2) 100%);
  border-radius: 4px; margin: 6px 0;
}
.mock-skeleton.w-80 { width: 80%; }
.mock-skeleton.w-60 { width: 60%; }
.mock-skeleton.w-40 { width: 40%; }
@media (max-width: 720px) {
  .mock-body { grid-template-columns: 1fr; }
  .mock-sidebar { display: none; }
}

/* ══════════════════════════════════════════════════════════
   HUB THREAD MOCK (anonymized conversation strip for /community)
   ══════════════════════════════════════════════════════════ */
.thread-mock {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.thread-channel {
  font-size: var(--fs-xs); color: var(--ink-subtle);
  font-weight: 600; letter-spacing: 0.04em;
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border);
}
.thread-msg { display: flex; gap: var(--sp-3); }
.thread-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent-grad); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--fs-xs); flex-shrink: 0;
}
.thread-msg.reply { margin-left: var(--sp-8); }
.thread-msg.reply .thread-avatar { width: 28px; height: 28px; font-size: 10px; }
.thread-body { flex: 1; }
.thread-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.thread-name { font-weight: 700; font-size: var(--fs-sm); color: var(--ink); }
.thread-meta { font-size: 11px; color: var(--ink-subtle); }
.thread-text { font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.55; }
.thread-text strong { color: var(--ink); }
.thread-reactions { display: flex; gap: 6px; margin-top: 6px; }
.thread-reaction {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--canvas); border: 1px solid var(--border);
  border-radius: var(--r-full); padding: 2px 8px;
  font-size: 11px; color: var(--ink-muted);
}