/* ============================================================
   FOUNDERS & MOVERS — SHARED DESIGN SYSTEM
   Fonts: Lexend (UI/body) · Literata weight 550 (display headlines)
   Radius: 0 — sharp corners throughout
   Theme: Paper light editorial — warm off-white, near-black ink, gold accent
   ============================================================ */

/* ── TOKENS ───────────────────────────────────────────────── */
:root {
  --background:        #f9f9f5;
  --foreground:        #1a1a18;
  --card:              #ffffff;
  --muted:             #f2f2ed;
  --muted-foreground:  #6b6b65;
  --accent:            #eed87e;
  --accent-foreground: #1a1a18;
  --border:            #e5e5e0;
  --destructive:       #dc2626;
  --font-sans:    'Lexend', system-ui, -apple-system, sans-serif;
  --font-display: 'Literata', Georgia, serif;
  --radius: 0;

  --signal-leadership-text:  #1d4ed8;
  --signal-leadership-bg:    #eff6ff;
  --signal-leadership-border:#bfdbfe;
  --signal-relocation-text:  #b45309;
  --signal-relocation-bg:    #fffbeb;
  --signal-relocation-border:#fde68a;
  --signal-capital-text:     #047857;
  --signal-capital-bg:       #ecfdf5;
  --signal-capital-border:   #a7f3d0;
  --signal-rebrand-text:     #7e22ce;
  --signal-rebrand-bg:       #faf5ff;
  --signal-rebrand-border:   #e9d5ff;
  --signal-distress-text:    #b91c1c;
  --signal-distress-bg:      #fef2f2;
  --signal-distress-border:  #fca5a5;
  --signal-new-text:         #047857;
  --signal-new-bg:           #ecfdf5;
  --signal-new-border:       #a7f3d0;
}

/* ── RESET ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { font-family: var(--font-sans); font-size: 15px; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body  { background: var(--background); color: var(--foreground); line-height: 1.6; }
a     { color: inherit; text-decoration: none; }
ul    { list-style: none; }

/* ── LAYOUT ───────────────────────────────────────────────── */
.container        { max-width: 1120px; margin: 0 auto; padding: 0 40px; }
.container-narrow { max-width: 760px;  margin: 0 auto; padding: 0 40px; }
.rule { height: 1px; background: var(--border); }
.section          { padding: 80px 0; }
.section-sm       { padding: 56px 0; }
.section-muted    { background: var(--muted); }

/* ── NAVIGATION ───────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(249,249,245,.96); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: 1120px; margin: 0 auto; padding: 0 40px;
  height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-size: 16px; font-weight: 600;
  letter-spacing: 0; white-space: nowrap; flex-shrink: 0;
}
.nav-logo-icon { width: 26px; height: 26px; flex-shrink: 0; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-link {
  padding: 7px 13px; font-size: 13px; font-weight: 500;
  color: var(--muted-foreground); transition: color .12s; border-radius: 0;
}
.nav-link:hover { color: var(--foreground); }
.nav-link.current {
  color: var(--foreground);
  box-shadow: 0 2px 0 0 var(--accent);
}
.nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid transparent; border-radius: 0;
  font-family: var(--font-sans); font-weight: 500; cursor: pointer;
  transition: all .15s; white-space: nowrap; text-decoration: none;
}
.btn:focus-visible { outline: 2px solid var(--foreground); outline-offset: 2px; }
.btn-xl  { height: 48px; padding: 0 24px; font-size: 16px; font-weight: 600; }
.btn-lg  { height: 40px; padding: 0 18px; font-size: 15px; }
.btn-md  { height: 34px; padding: 0 14px; font-size: 14px; }
.btn-sm  { height: 28px; padding: 0 10px; font-size: 13px; }
.btn-default  { background: var(--foreground); color: #fff; }
.btn-default:hover { background: #2a2a28; }
.btn-outline  { border-color: var(--border); background: transparent; color: var(--foreground); }
.btn-outline:hover { background: var(--muted); }
.btn-accent   { background: var(--accent); color: var(--foreground); }
.btn-accent:hover { background: #e5cb5a; }
.btn-ghost    { background: transparent; color: var(--foreground); }
.btn-ghost:hover  { background: var(--muted); }

/* ── BADGES ───────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 8px; border-radius: 0; border: 1px solid transparent;
  font-size: 12px; font-weight: 500; white-space: nowrap; font-family: var(--font-sans);
}
.badge-accent      { background: var(--accent); color: var(--foreground); }
.badge-muted       { background: var(--muted); color: var(--muted-foreground); border-color: var(--border); }
.badge-outline     { border-color: var(--border); color: var(--foreground); }
.badge-leadership  { background: var(--signal-leadership-bg); color: var(--signal-leadership-text); border-color: var(--signal-leadership-border); }
.badge-capital     { background: var(--signal-capital-bg);    color: var(--signal-capital-text);    border-color: var(--signal-capital-border); }
.badge-relocation  { background: var(--signal-relocation-bg); color: var(--signal-relocation-text); border-color: var(--signal-relocation-border); }
.badge-rebrand     { background: var(--signal-rebrand-bg);    color: var(--signal-rebrand-text);    border-color: var(--signal-rebrand-border); }
.badge-distress    { background: var(--signal-distress-bg);   color: var(--signal-distress-text);   border-color: var(--signal-distress-border); font-weight: 600; }
.badge-new         { background: var(--signal-new-bg);        color: var(--signal-new-text);        border-color: var(--signal-new-border); }

/* ── SCORE CHIP ───────────────────────────────────────────── */
.score-chip {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 700; padding: 2px 8px; border: 1px solid;
  white-space: nowrap; flex-shrink: 0;
}
.score-high { background: #fef2f2; color: #b91c1c; border-color: #fca5a5; }
.score-mid  { background: var(--signal-relocation-bg); color: var(--signal-relocation-text); border-color: var(--signal-relocation-border); }
.score-low  { background: var(--muted); color: var(--muted-foreground); border-color: var(--border); }

/* ── HERO (HOME) ──────────────────────────────────────────── */
.hero-section   { padding: 88px 0 80px; border-bottom: 1px solid var(--border); }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted-foreground); background: var(--muted); padding: 4px 10px; margin-bottom: 24px;
}
.hero-title {
  font-family: var(--font-display); font-size: clamp(36px, 5.5vw, 58px);
  font-weight: 550; line-height: 1.6; letter-spacing: -.02em;
  color: var(--foreground); margin-bottom: 24px; max-width: 740px;
}
.hero-title em { font-style: normal; background: var(--accent); padding: 0 4px 0; }
.hero-body {
  font-size: 18px; line-height: 1.7; color: var(--muted-foreground);
  max-width: 540px; margin-bottom: 36px;
}
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 40px; }
.hero-signals { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.hero-signals-label { font-size: 12px; color: var(--muted-foreground); font-weight: 500; margin-right: 4px; }

/* ── PAGE HERO (INTERIOR PAGES) ───────────────────────────── */
.page-hero {
  padding: 64px 0 56px; border-bottom: 1px solid var(--border);
}
.page-hero-eyebrow {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted-foreground); margin-bottom: 14px;
}
.page-hero-title {
  font-family: var(--font-display); font-size: clamp(28px, 4vw, 46px);
  font-weight: 550; line-height: 1.08; letter-spacing: -.015em;
  color: var(--foreground); max-width: 680px; margin-bottom: 16px;
}
.page-hero-body {
  font-size: 17px; line-height: 1.7; color: var(--muted-foreground); max-width: 520px;
  margin-bottom: 28px;
}

/* ── SECTION HEADER ───────────────────────────────────────── */
.section-header  { max-width: 600px; margin-bottom: 44px; }
.section-header.centered { margin-left: auto; margin-right: auto; text-align: center; }
.section-header.centered .section-sub { margin-left: auto; margin-right: auto; }
.section-eyebrow {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted-foreground); margin-bottom: 12px;
}
.section-title {
  font-family: var(--font-display); font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 550; line-height: 1.1; letter-spacing: -.015em;
}
.section-sub {
  font-size: 16px; color: var(--muted-foreground); line-height: 1.7;
  margin-top: 12px; max-width: 500px;
}

/* ── STAT STRIP ───────────────────────────────────────────── */
.stat-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border); background: var(--card);
}
.stat-item { padding: 28px 32px; border-right: 1px solid var(--border); }
.stat-item:last-child { border-right: none; }
.stat-value {
  font-family: var(--font-display); font-size: 34px; font-weight: 550;
  letter-spacing: -.02em; line-height: 1;
}
.stat-label { font-size: 13px; color: var(--muted-foreground); margin-top: 4px; }

/* ── CARDS (GENERIC) ──────────────────────────────────────── */
.card { background: var(--card); border-radius: 0; box-shadow: 0 0 0 1px rgba(26,26,24,.1); }
.card.featured { box-shadow: 0 0 0 2px var(--foreground); }

/* ── FEATURE GRID ─────────────────────────────────────────── */
.feature-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1px; background: var(--border);
}
.feature-card { background: var(--card); padding: 28px 24px; }
.feature-icon  { font-size: 22px; margin-bottom: 14px; line-height: 1; }
.feature-title { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.feature-body  { font-size: 13px; color: var(--muted-foreground); line-height: 1.65; }

/* ── SIGNAL CARDS ─────────────────────────────────────────── */
.signal-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border);
}
.signal-card { background: var(--card); padding: 24px 22px; }
.signal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.signal-emoji  { font-size: 28px; line-height: 1; }
.signal-urgency {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 3px 7px; border: 1px solid;
}
.urgency-high   { background: var(--signal-distress-bg); color: var(--signal-distress-text); border-color: var(--signal-distress-border); }
.urgency-medium { background: var(--signal-relocation-bg); color: var(--signal-relocation-text); border-color: var(--signal-relocation-border); }
.urgency-lower  { background: var(--muted); color: var(--muted-foreground); border-color: var(--border); }
.signal-name { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.signal-desc { font-size: 13px; color: var(--muted-foreground); line-height: 1.65; }
.signal-roles { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 14px; }
.signal-role-tag {
  font-size: 11px; font-weight: 500; padding: 2px 7px;
  background: var(--muted); color: var(--muted-foreground); border: 1px solid var(--border);
}

/* Home page: compact signal strip */
.signal-preview-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border);
}
.signal-preview-card {
  background: var(--card); padding: 20px;
  display: flex; align-items: flex-start; gap: 14px;
}
.signal-preview-emoji { font-size: 22px; line-height: 1.2; flex-shrink: 0; }
.signal-preview-name  { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.signal-preview-desc  { font-size: 13px; color: var(--muted-foreground); line-height: 1.55; }

/* ── HOW IT WORKS / STEPS ─────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); }
.step  { background: var(--card); padding: 28px 24px; }
.step-num {
  font-family: var(--font-display); font-size: 40px; font-weight: 550;
  color: var(--border); line-height: 1; margin-bottom: 14px;
}
.step-title { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.step-body  { font-size: 13px; color: var(--muted-foreground); line-height: 1.65; }
.step-time  {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted-foreground); margin-top: 14px;
}

/* ── AI FEATURES ──────────────────────────────────────────── */
.ai-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); }
.ai-card { background: var(--card); padding: 24px 22px; }
.ai-card-icon  { font-size: 20px; margin-bottom: 10px; line-height: 1; }
.ai-card-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.ai-card-sub   {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted-foreground); margin-bottom: 8px;
}
.ai-card-body  { font-size: 13px; color: var(--muted-foreground); line-height: 1.6; }

/* ── PERSONA TABS ─────────────────────────────────────────── */
.persona-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 20px; }
.persona-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; font-size: 13px; font-weight: 500;
  background: var(--muted); border: 1px solid var(--border); color: var(--muted-foreground);
  cursor: pointer; transition: all .12s; border-radius: 0; font-family: var(--font-sans);
}
.persona-tab:hover  { background: var(--card); color: var(--foreground); }
.persona-tab.active { background: var(--foreground); color: #fff; border-color: var(--foreground); }
.persona-panel  { display: none; }
.persona-panel.active { display: block; }
.persona-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border);
}
.persona-card { background: var(--card); padding: 20px; }
.persona-card-role    { font-size: 14px; font-weight: 600; margin-bottom: 5px; }
.persona-card-tagline { font-size: 12px; color: var(--muted-foreground); line-height: 1.5; margin-bottom: 10px; }
.persona-card-triggers { display: flex; flex-wrap: wrap; gap: 4px; }

/* ── TWO-PANEL ────────────────────────────────────────────── */
.two-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); }
.panel { background: var(--card); padding: 40px; }
.panel-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted-foreground); margin-bottom: 14px;
}
.panel-title { font-family: var(--font-display); font-size: 24px; font-weight: 550; letter-spacing: -.01em; margin-bottom: 20px; }
.panel-list  { display: flex; flex-direction: column; gap: 12px; }
.panel-item  { display: flex; gap: 12px; align-items: flex-start; }
.panel-item-icon { font-size: 15px; flex-shrink: 0; line-height: 1.5; color: var(--muted-foreground); }
.panel-item.positive .panel-item-icon { color: #047857; }
.panel-item-text { font-size: 14px; color: var(--muted-foreground); line-height: 1.6; }

/* ── QUOTE / TESTIMONIAL ──────────────────────────────────── */
.quote-block { background: var(--foreground); color: #e8e8e2; padding: 44px 48px; }
.quote-text {
  font-family: var(--font-display); font-size: 20px; font-weight: 350;
  line-height: 1.65; font-style: italic; max-width: 680px;
}
.quote-author { font-size: 13px; color: #6b6b65; margin-top: 18px; }
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); }
.testimonial-card { background: var(--card); padding: 28px 24px; }
.testimonial-text {
  font-family: var(--font-display); font-size: 15px; font-weight: 350;
  line-height: 1.7; font-style: italic; margin-bottom: 16px;
}
.testimonial-author { font-size: 12px; font-weight: 600; }
.testimonial-role   { font-size: 12px; color: var(--muted-foreground); margin-top: 2px; }

/* ── LEAD CARD DEMO ───────────────────────────────────────── */
.lead-card-demo {
  background: var(--card); box-shadow: 0 0 0 1px rgba(26,26,24,.1);
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
.lead-card-top  { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.lead-card-name { font-size: 14px; font-weight: 600; }
.lead-card-meta { font-size: 12px; color: var(--muted-foreground); display: flex; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
.lead-card-summary { font-size: 13px; color: var(--muted-foreground); line-height: 1.55; }
.lead-card-angle {
  font-size: 12px; background: var(--muted); padding: 8px 10px;
  line-height: 1.5; color: var(--muted-foreground); border-left: 3px solid var(--accent);
}
.lead-card-angle strong { color: var(--foreground); }

/* ── BRIEF PREVIEW ────────────────────────────────────────── */
.brief-preview { background: var(--card); box-shadow: 0 0 0 1px rgba(26,26,24,.12); overflow: hidden; }
.brief-header  { background: var(--foreground); color: #e8e8e2; padding: 16px 20px; }
.brief-subject { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.brief-meta    { font-size: 11px; color: #6b6b65; }
.brief-body    { padding: 20px; }
.brief-greeting { font-size: 14px; color: var(--muted-foreground); margin-bottom: 16px; }
.brief-lead    { background: var(--muted); padding: 14px; margin-bottom: 10px; border-left: 3px solid var(--accent); }
.brief-lead-name { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.brief-lead-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.brief-lead-angle { font-size: 12px; color: var(--muted-foreground); line-height: 1.5; }
.brief-lead-angle strong { color: var(--foreground); }
.brief-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

/* ── SCORING VISUAL (NON-TECHNICAL) ───────────────────────── */
.score-factors {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--border);
}
.score-factor { background: var(--card); padding: 28px 24px; }
.score-factor-title {
  font-family: var(--font-display); font-size: 22px; font-weight: 550;
  letter-spacing: -.01em; margin-bottom: 6px;
}
.score-factor-sub { font-size: 13px; color: var(--muted-foreground); margin-bottom: 18px; line-height: 1.5; }
.score-factor-items { display: flex; flex-direction: column; gap: 8px; }
.score-factor-item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted-foreground); }
.score-factor-item::before { content: '→'; color: var(--muted-foreground); flex-shrink: 0; }

/* ── AUDIENCE TILES (HOME) ────────────────────────────────── */
.audience-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--border);
}
.audience-tile { background: var(--card); padding: 24px 20px; }
.audience-tile-icon  { font-size: 24px; margin-bottom: 12px; line-height: 1; }
.audience-tile-title { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.audience-tile-desc  { font-size: 13px; color: var(--muted-foreground); line-height: 1.6; }
.audience-tile-roles { font-size: 12px; color: var(--muted-foreground); margin-top: 10px; line-height: 1.6; }

/* ── PRICING ──────────────────────────────────────────────── */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pricing-card { background: var(--card); padding: 32px 28px; box-shadow: 0 0 0 1px rgba(26,26,24,.1); }
.pricing-card.featured { box-shadow: 0 0 0 2px var(--foreground); }
.pricing-plan {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted-foreground); margin-bottom: 12px;
}
.pricing-plan-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pricing-price {
  font-family: var(--font-display); font-size: 38px; font-weight: 550;
  letter-spacing: -.02em; line-height: 1;
}
.pricing-price span { font-size: 14px; font-weight: 400; font-family: var(--font-sans); color: var(--muted-foreground); }
.pricing-period  { font-size: 12px; color: var(--muted-foreground); margin-top: 4px; }
.pricing-divider { height: 1px; background: var(--border); margin: 20px 0; }
.pricing-item { font-size: 13px; color: var(--muted-foreground); padding: 4px 0; display: flex; gap: 8px; }
.pricing-item::before { content: "✓"; color: #047857; font-weight: 700; flex-shrink: 0; }
.pricing-item strong { color: var(--foreground); font-weight: 600; }

/* Home page: pricing preview strip (3 plans at a glance) */
.pricing-preview {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border);
}
.pricing-preview-tile { background: var(--card); padding: 24px 22px; }
.pricing-preview-name {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted-foreground); margin-bottom: 8px;
}
.pricing-preview-price {
  font-family: var(--font-display); font-size: 30px; font-weight: 550;
  letter-spacing: -.02em; line-height: 1; margin-bottom: 4px;
}
.pricing-preview-price span { font-size: 14px; font-weight: 400; font-family: var(--font-sans); color: var(--muted-foreground); }
.pricing-preview-desc { font-size: 13px; color: var(--muted-foreground); line-height: 1.5; margin-top: 8px; }

/* ── COMPARE TABLE ────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); }
.compare-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.compare-table th {
  padding: 12px 16px; font-weight: 600; text-align: left;
  border-bottom: 1px solid var(--border); background: var(--muted);
}
.compare-table th:not(:first-child) { text-align: center; }
.compare-table td { padding: 10px 16px; border-bottom: 1px solid var(--border); color: var(--muted-foreground); }
.compare-table td:not(:first-child) { text-align: center; }
.compare-table tr:last-child td { border-bottom: none; }
.compare-table tbody tr:hover { background: var(--muted); }
.check { color: #047857; font-weight: 700; }
.dash  { color: var(--border); }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-top: 1px solid var(--border); }
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-question {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 0; font-size: 15px; font-weight: 500; cursor: pointer; user-select: none;
}
.faq-toggle { font-size: 20px; color: var(--muted-foreground); line-height: 1; flex-shrink: 0; transition: transform .2s; }
.faq-item.open .faq-toggle { transform: rotate(45deg); }
.faq-answer {
  font-size: 14px; color: var(--muted-foreground); line-height: 1.75;
  padding-bottom: 18px; display: none; max-width: 640px;
}
.faq-item.open .faq-answer { display: block; }

/* ── CROSS-PAGE LINKS ─────────────────────────────────────── */
.page-links-bar {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--border); border-top: 2px solid var(--foreground);
}
.page-link-item {
  background: var(--card); padding: 28px 32px; display: block;
  text-decoration: none; transition: background .12s;
}
.page-link-item:hover { background: var(--muted); }
.page-link-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted-foreground); margin-bottom: 6px;
}
.page-link-title { font-size: 16px; font-weight: 600; color: var(--foreground); }
.page-link-arrow { font-size: 18px; color: var(--muted-foreground); }

/* ── CTA SECTION ──────────────────────────────────────────── */
.cta-section { background: var(--foreground); color: #e8e8e2; padding: 80px 0; }
.cta-title {
  font-family: var(--font-display); font-size: clamp(28px, 4vw, 44px);
  font-weight: 550; line-height: 1.08; letter-spacing: -.015em; margin-bottom: 16px;
}
.cta-body  { font-size: 16px; color: #9a9a94; line-height: 1.65; max-width: 480px; margin-bottom: 32px; }
.cta-note  { font-size: 12px; color: #555; margin-top: 12px; }

/* ── FOOTER ───────────────────────────────────────────────── */
.footer { background: var(--foreground); color: #6b6b65; border-top: 1px solid #2a2a28; }
.footer-inner {
  max-width: 1120px; margin: 0 auto; padding: 48px 40px 32px;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr; gap: 28px;
}
.footer-brand { font-family: var(--font-sans); font-size: 17px; font-weight: 600; color: #e8e8e2; margin-bottom: 8px; letter-spacing: 0; display: flex; align-items: center; gap: 10px; }
.footer-brand-icon { width: 22px; height: 22px; flex-shrink: 0; }
.footer-brand-sub  { font-size: 13px; color: #555; line-height: 1.6; max-width: 240px; }
.footer-col-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #444; margin-bottom: 12px; }
.footer-link { display: block; font-size: 13px; color: #6b6b65; margin-bottom: 8px; transition: color .12s; }
.footer-link:hover { color: #ccc; }
.footer-bottom {
  max-width: 1120px; margin: 0 auto; padding: 20px 40px;
  border-top: 1px solid #2a2a28; display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: #444;
}
.footer-langs { display: flex; gap: 16px; }
.footer-lang  { font-size: 12px; color: #444; transition: color .12s; }
.footer-lang:hover { color: #999; }

/* ── CALLOUT ──────────────────────────────────────────────── */
.callout {
  padding: 14px 18px; font-size: 14px; line-height: 1.6;
  border-left: 3px solid var(--accent); background: #fffbeb; color: #92400e;
}

/* ── ONBOARDING STEPS ─────────────────────────────────────── */
.onboard-list { display: flex; flex-direction: column; gap: 0; }
.onboard-step { display: flex; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--border); align-items: flex-start; }
.onboard-step:last-child { border-bottom: none; }
.onboard-step-num {
  font-family: var(--font-display); font-size: 28px; font-weight: 550;
  color: var(--border); line-height: 1; flex-shrink: 0; width: 36px;
}
.onboard-step-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.onboard-step-body  { font-size: 13px; color: var(--muted-foreground); line-height: 1.65; }

/* ── QUICK-START TEMPLATES ────────────────────────────────── */
.template-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border);
}
.template-card { background: var(--card); padding: 18px 20px; }
.template-card-icon  { font-size: 18px; margin-bottom: 6px; line-height: 1; }
.template-card-title { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.template-card-desc  { font-size: 12px; color: var(--muted-foreground); line-height: 1.5; }

/* ── INLINE UTILITY ───────────────────────────────────────── */
.text-muted    { color: var(--muted-foreground); }
.text-xs       { font-size: 12px; }
.text-sm       { font-size: 13px; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .pricing-grid    { grid-template-columns: 1fr; max-width: 420px; }
  .signal-grid     { grid-template-columns: repeat(2, 1fr); }
  .steps           { grid-template-columns: repeat(2, 1fr); }
  .two-panel       { grid-template-columns: 1fr; }
  .stat-strip      { grid-template-columns: repeat(2, 1fr); }
  .stat-item:nth-child(2)  { border-right: none; }
  .persona-grid    { grid-template-columns: repeat(2, 1fr); }
  .footer-inner    { grid-template-columns: 1fr 1fr 1fr; }
  .audience-grid   { grid-template-columns: repeat(2, 1fr); }
  .signal-preview-grid { grid-template-columns: repeat(2, 1fr); }
  .template-grid   { grid-template-columns: repeat(2, 1fr); }
  .score-factors   { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .container, .container-narrow { padding: 0 20px; }
  .nav-links    { display: none; }
  .nav-inner    { padding: 0 20px; }
  .hero-section { padding: 56px 0 48px; }
  .section      { padding: 56px 0; }
  .section-sm   { padding: 40px 0; }
  .signal-grid  { grid-template-columns: 1fr; }
  .steps        { grid-template-columns: 1fr; }
  .ai-grid      { grid-template-columns: 1fr; }
  .testimonials-grid  { grid-template-columns: 1fr; }
  .persona-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-bottom{ flex-direction: column; gap: 12px; text-align: center; }
  .quote-block  { padding: 28px 24px; }
  .panel        { padding: 28px 24px; }
  .page-links-bar { grid-template-columns: 1fr; }
  .pricing-preview { grid-template-columns: 1fr; }
  .audience-grid   { grid-template-columns: 1fr; }
  .signal-preview-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .hero-title { font-size: 32px; }
  .pricing-grid { max-width: 100%; }
  .footer-inner { padding: 32px 20px; }
  .footer-bottom { padding: 16px 20px; }
}

/* ── ROLE PAGES ───────────────────────────────────────────── */
.role-signals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.role-signal-card {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 24px;
}
.role-signal-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.role-signal-card-name {
  font-weight: 600;
  font-size: 15px;
}
.role-signal-card-body {
  font-size: 14px;
  color: var(--muted-foreground);
  line-height: 1.6;
}

.timing-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border);
  margin-top: 32px;
}
.timing-col {
  padding: 28px;
}
.timing-col + .timing-col {
  border-left: 1px solid var(--border);
}
.timing-col-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 8px;
}
.timing-col-head {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 550;
  margin-bottom: 12px;
}
.timing-col-head.accent { color: #1a7a3c; }
.timing-col-head.muted  { color: var(--muted-foreground); }
.timing-col-body {
  font-size: 14px;
  color: var(--muted-foreground);
  line-height: 1.6;
}
.timing-col-body ul { padding-left: 16px; list-style: disc; }
.timing-col-body li { margin-bottom: 6px; }

.outreach-example {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border);
  margin-top: 32px;
}
.outreach-col {
  padding: 28px;
}
.outreach-col + .outreach-col {
  border-left: 1px solid var(--border);
}
.outreach-col-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.outreach-col-label.bad  { color: #b91c1c; }
.outreach-col-label.good { color: #047857; }
.outreach-message {
  background: var(--muted);
  border: 1px solid var(--border);
  padding: 16px 18px;
  font-size: 13px;
  line-height: 1.7;
  font-family: var(--font-sans);
  color: var(--foreground);
}
.outreach-message strong { font-weight: 600; }

.role-scenario {
  background: var(--foreground);
  color: #f0f0ec;
  padding: 40px 48px;
  margin-top: 32px;
}
.role-scenario-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.role-scenario-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 550;
  line-height: 1.3;
  margin-bottom: 20px;
}
.role-scenario-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
  margin-top: 24px;
}
.role-scenario-step {
  border-top: 2px solid rgba(238,216,126,.3);
  padding-top: 16px;
}
.role-scenario-step-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.role-scenario-step-text {
  font-size: 13px;
  color: #c8c8c4;
  line-height: 1.6;
}

.role-cta-inline {
  background: var(--muted);
  border: 1px solid var(--border);
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 40px;
}
.role-cta-inline-text {
  font-size: 15px;
  font-weight: 500;
}
.role-cta-inline-sub {
  font-size: 13px;
  color: var(--muted-foreground);
  margin-top: 4px;
}

.related-roles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 24px;
}
.related-role-link {
  border: 1px solid var(--border);
  padding: 16px 20px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background .15s, border-color .15s;
}
.related-role-link:hover {
  background: var(--card);
  border-color: var(--foreground);
}

/* linked persona cards */
a.persona-card {
  display: block;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s;
}
a.persona-card:hover {
  border-color: var(--foreground);
}
.persona-card-deep {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted-foreground);
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
a.persona-card:hover .persona-card-deep {
  color: var(--foreground);
}

@media (max-width: 768px) {
  .timing-comparison,
  .outreach-example { grid-template-columns: 1fr; }
  .timing-col + .timing-col,
  .outreach-col + .outreach-col { border-left: none; border-top: 1px solid var(--border); }
  .role-scenario { padding: 28px 24px; }
  .role-cta-inline { flex-direction: column; align-items: flex-start; }
}