/* ===== Design tokens (mirrored from src/styles.css) ===== */
:root {
  --navy: #0D1B2A;
  --navy-mid: #1A2E45;
  --navy-light: #243B55;
  --gold: #B8972E;
  --gold-light: #D4AF5A;
  --cream: #F8F5EE;
  --cream-dark: #EDE8DC;
  --text-mid: #3D4F63;
  --text-muted: #6B7F94;
  --border: #E2DBCC;
  --font-serif: "Playfair Display", Georgia, serif;
  --font-sans: "DM Sans", system-ui, sans-serif;
  --content: 1100px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 400; line-height: 1.1; letter-spacing: -0.012em; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
em { font-style: italic; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ===== Type helpers ===== */
.h1 { font-family: var(--font-serif); font-size: clamp(42px, 4.8vw, 68px); line-height: 1.02; font-weight: 400; color: var(--navy); max-width: 880px; margin-left: auto; margin-right: auto; }
.h2 { font-family: var(--font-serif); font-size: clamp(30px, 3.2vw, 44px); line-height: 1.12; font-weight: 400; color: var(--navy); }
.h3 { font-family: var(--font-serif); font-size: 22px; font-weight: 400; letter-spacing: -0.01em; color: var(--navy); }
.lead { color: var(--text-mid); line-height: 1.65; }

.eyebrow {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 600; color: var(--gold);
  display: inline-flex; align-items: center; gap: 14px;
}
.eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--gold); display: inline-block; }
.eyebrow.lines::after { content: ""; width: 32px; height: 1px; background: var(--gold); display: inline-block; }
.eyebrow.center { justify-content: center; }
.eyebrow.center::before, .eyebrow.center::after { content: ""; width: 40px; height: 1px; background: var(--gold); }
.eyebrow.light { color: var(--gold-light); }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 30px; font-size: 11px; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; border-radius: 2px; transition: all 0.2s ease;
  cursor: pointer; white-space: nowrap; border: none; font-family: var(--font-sans);
}
.btn .arw { width: 14px; height: 14px; }
.btn-gold { background: var(--gold); color: var(--navy); }
.btn-gold:hover { background: var(--gold-light); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-mid); }
.btn-outline { background: transparent; border: 1px solid rgba(13,27,42,0.3); color: var(--navy); }
.btn-outline:hover { border-color: var(--navy); background: rgba(13,27,42,0.04); }
.btn-outline-white { background: transparent; border: 1px solid rgba(255,255,255,0.3); color: #fff; }
.btn-outline-white:hover { border-color: #fff; background: rgba(255,255,255,0.06); }
.btn-block { width: 100%; }

.gold-rule { width: 32px; height: 1px; background: var(--gold); }

/* ===== Navbar ===== */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--cream); border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 24px;
  height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 46px; width: auto; }
.brand .name { font-family: var(--font-serif); font-size: 15px; color: var(--navy); line-height: 1.1; }
.brand .sub { font-size: 10px; color: var(--gold); text-transform: uppercase; letter-spacing: 0.18em; }
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a.link { font-size: 13px; font-weight: 500; color: var(--navy); text-decoration: none; letter-spacing: 0.015em; }
.nav-links a.link:hover { color: var(--gold); }
.nav-sep { width: 1px; height: 16px; background: var(--border); }
.nav-links a.muted { font-size: 13px; font-weight: 500; color: var(--text-muted); text-decoration: none; }
.nav-links a.muted:hover { color: var(--gold); }
.nav-cta { padding: 12px 20px !important; font-size: 12px; }
.mobile-nav-actions { display: none; align-items: center; gap: 8px; }
.mobile-apply-btn { padding: 10px 14px; font-size: 10px; letter-spacing: 0.08em; }
.mobile-menu-btn { display: none; background: transparent; border: none; color: var(--navy); width: 44px; height: 40px; align-items: center; justify-content: center; cursor: pointer; }
.mobile-menu-btn span { display: block; width: 20px; height: 2px; background: var(--navy); position: relative; }
.mobile-menu-btn span::before, .mobile-menu-btn span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--navy); }
.mobile-menu-btn span::before { top: -7px; }
.mobile-menu-btn span::after { top: 7px; }
.mobile-menu { display: none; border-top: 1px solid var(--border); background: var(--cream); padding: 18px 24px 24px; }
.mobile-menu.open { display: block; }
.mobile-menu a:not(.btn) { display: block; padding: 13px 0; border-bottom: 1px solid var(--border); font-size: 15px; color: var(--navy); }
.mobile-menu .mobile-actions { display: grid; gap: 10px; margin-top: 18px; }
.mobile-menu .btn { width: 100%; }
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-inner { height: auto; min-height: 72px; padding: 12px 18px; }
  .brand img { height: 42px; max-width: 230px; object-fit: contain; }
  .mobile-nav-actions { display: inline-flex; }
  .mobile-menu-btn { display: inline-flex; }
}
@media (max-width: 430px) {
  .brand img { max-width: 210px; }
}

/* ===== Section frame ===== */
section { padding: 96px 0; }
.sec-head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.sec-head .h2 { margin-top: 20px; }
.sec-head p { margin-top: 22px; color: var(--text-mid); }

/* ===== Hero ===== */
.hero { display: block; padding: 0; border-bottom: 3px solid var(--gold); }
.hero-copy { background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.65), transparent 46%), var(--cream); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 124px 64px 112px; }
.hero-copy .inner { max-width: 760px; }
.hero-badge, .hero .cta-row, .hero .divider { justify-content: center; }
.hero-badge { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 28px;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; color: var(--gold); }
.hero-badge::before, .hero-badge::after { content: ""; width: 40px; height: 1px; background: var(--gold); }
.stars { color: var(--gold); letter-spacing: 2px; font-size: 12px; }
.hero h1 { margin-bottom: 0; }
.hero .sub { margin: 28px auto 0; font-size: 18px; line-height: 1.6; color: var(--text-mid); max-width: 780px; }
.hero .cta-row { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero .divider { margin: 32px 0; display: flex; align-items: center; gap: 16px; }
.hero .divider .ln { height: 1px; flex: 1; background: rgba(184,151,46,0.3); }
.hero .divider .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.hero .note { font-size: 14px; color: var(--text-mid); }
.hero .note a { color: var(--gold); font-weight: 500; white-space: nowrap; }
.hero .note a:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .hero-copy { padding: 72px 28px; }
}

/* ===== Social proof / stats bar ===== */
.proof { background: var(--navy); color: #fff; padding: 56px 0; }
.proof .label { text-align: center; font-size: 16px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 36px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 980px; margin: 0 auto; }
.stat { text-align: center; padding: 0 12px; border-left: 1px solid rgba(255,255,255,0.1); }
.stat:first-child { border-left: none; }
.stat .num { font-family: var(--font-serif); font-size: 40px; color: var(--gold-light); line-height: 1; }
.stat .cap { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,255,255,0.6); margin-top: 12px; }
@media (max-width: 760px) {
  .stats { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
  .stat:nth-child(3) { border-left: none; }
}

/* ===== Benefits ===== */
.benefits { background: #fff; }
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; max-width: var(--content); margin: 0 auto; }
.benefit { padding: 56px 40px; }
.benefit.a, .benefit.c { background: var(--cream); color: var(--navy); }
.benefit.b { background: var(--navy); color: #fff; }
.benefit .n { font-family: var(--font-serif); font-size: 64px; line-height: 1; color: rgba(126,97,28,0.34); }
.benefit.b .n { color: rgba(226,201,111,0.72); }
.benefit .rule { width: 32px; height: 1px; background: var(--gold); margin: 20px 0; }
.benefit h3 { font-family: var(--font-serif); font-size: 25px; font-weight: 400; letter-spacing: -0.01em; }
.benefit p { margin-top: 16px; font-size: 15px; color: var(--text-mid); }
.benefit.b p { color: rgba(255,255,255,0.7); }
@media (max-width: 860px) { .benefit-grid { grid-template-columns: 1fr; } }

/* ===== Process ===== */
.process { background: var(--cream-dark); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: var(--content); margin: 0 auto; }
.step { background: #fff; border-top: 2px solid var(--gold); padding: 36px 32px; }
.step .n { font-family: var(--font-serif); font-size: 40px; color: var(--gold); line-height: 1; }
.step h3 { font-family: var(--font-serif); font-size: 22px; font-weight: 400; letter-spacing: -0.01em; margin-top: 14px; color: var(--navy); }
.step p { margin-top: 14px; font-size: 14px; color: var(--text-mid); }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* ===== Features ===== */
.features { background: var(--cream); }
.feature-list { max-width: var(--content); margin: 0 auto; display: grid; gap: 2px; }
.feature { background: #fff; display: grid; grid-template-columns: 56px 1fr; gap: 24px; padding: 32px 36px; align-items: start; }
.feature .fn { font-family: var(--font-serif); font-size: 30px; color: var(--gold); line-height: 1; }
.feature h3 { font-family: var(--font-serif); font-size: 22px; font-weight: 400; letter-spacing: -0.01em; color: var(--navy); }
.feature p { margin-top: 8px; color: var(--text-mid); }
@media (max-width: 600px) { .feature { grid-template-columns: 1fr; gap: 8px; padding: 28px 24px; } }

/* ===== Cadence ===== */
.cadence { background: #fff; }
.cadence-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: var(--content); margin: 0 auto; }
.cad-card { background: var(--cream); border-top: 2px solid var(--gold); padding: 32px 28px; }
.cad-card .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--gold); }
.cad-card h3 { font-family: var(--font-serif); font-size: 21px; font-weight: 400; letter-spacing: -0.01em; color: var(--navy); margin-top: 10px; }
.cad-card ul { margin-top: 18px; display: grid; gap: 8px; }
.cad-card li { font-size: 14px; color: var(--text-mid); display: flex; gap: 10px; }
.cad-card li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); margin-top: 9px; flex-shrink: 0; }
@media (max-width: 860px) { .cadence-grid { grid-template-columns: 1fr; } }

/* ===== Offer / Pricing ===== */
.offer { background: var(--navy); color: #fff; }
.offer .sec-head .h2 { color: #fff; }
.offer .sec-head p { color: rgba(255,255,255,0.7); }
.price-grid { display: grid; grid-template-columns: 1fr; gap: 24px; max-width: 460px; margin: 0 auto; align-items: stretch; }
.price-card { background: var(--navy-mid); border: 1px solid rgba(255,255,255,0.12); padding: 40px; display: flex; flex-direction: column; }
.price-card.featured { border-color: var(--gold); }
.price-card .tier { font-size: 11px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--gold-light); }
.price-card .ribbon { display: inline-block; align-self: flex-start; background: var(--gold); color: var(--navy); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; padding: 4px 10px; margin-bottom: 14px; }
.price-card .amt { font-family: var(--font-serif); font-size: 44px; color: #fff; line-height: 1; margin-top: 14px; }
.price-card .amt.byapp { font-size: 30px; color: var(--gold-light); }
.price-card .amt .mo { font-family: var(--font-sans); font-size: 18px; color: rgba(255,255,255,0.55); margin-left: 4px; }
.price-card .per { font-size: 13px; color: rgba(255,255,255,0.55); margin-top: 10px; line-height: 1.5; }
.price-card .plus { font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--gold-light); margin: 26px 0 0; }
.price-card .plist { margin: 20px 0 28px; display: grid; gap: 11px; }
.price-card .plist li { display: flex; gap: 11px; font-size: 14px; color: rgba(255,255,255,0.82); line-height: 1.5; }
.price-card .plist .chk { color: var(--gold); flex-shrink: 0; }
.price-card .btn { margin-top: auto; }
.offer .ladder-note { margin-top: 32px; text-align: center; font-size: 13.5px; color: var(--gold-light); }
.offer .ladder-note::before { content: ""; display: block; width: 40px; height: 1px; background: rgba(212,175,90,0.5); margin: 0 auto 16px; }
.offer .fine { margin-top: 14px; text-align: center; font-size: 12px; color: rgba(255,255,255,0.5); }
@media (max-width: 760px) { .price-grid { grid-template-columns: 1fr; } }

/* ===== Network / Experts ===== */
.network { background: #fff; }
.expert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; max-width: var(--content); margin: 0 auto; }
.expert { background: var(--cream); padding: 32px 28px; text-align: center; }
.expert .ph { width: 104px; height: 104px; border-radius: 50%; margin: 0 auto 16px;
  object-fit: cover; object-position: center 20%; filter: grayscale(100%);
  background: var(--cream-dark); }
.expert .nm { font-family: var(--font-serif); font-size: 19px; font-weight: 400; letter-spacing: -0.01em; color: var(--navy); }
.expert .tt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); margin-top: 7px; line-height: 1.5; font-weight: 600; }
.expert .hl { font-size: 14px; color: var(--text-mid); margin-top: 12px; line-height: 1.55; }
.network .foot { text-align: center; margin-top: 40px; color: var(--text-mid); font-size: 15px; }
@media (max-width: 860px) { .expert-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .expert-grid { grid-template-columns: 1fr; } }

/* ===== Why now (statement cards) ===== */
.testi { background: var(--cream); }
.quote-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: var(--content); margin: 0 auto; }
.quote { position: relative; background: #fff; border: 1px solid var(--border); padding: 32px; margin: 0; }
.quote .why-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--gold); font-weight: 600; }
.quote p { position: relative; font-family: var(--font-serif); font-size: 19px; line-height: 1.45; color: var(--navy); margin-top: 14px; }
@media (max-width: 760px) { .quote-grid { grid-template-columns: 1fr; } }

/* ===== FAQ ===== */
.faq { background: #fff; }
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 24px 0; display: flex; justify-content: space-between; gap: 24px;
  font-family: var(--font-serif); font-size: 19px; color: var(--navy);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .ic { color: var(--gold); font-size: 22px; flex-shrink: 0; transition: transform 0.2s ease; line-height: 1; }
.faq-item[open] summary .ic { transform: rotate(45deg); }
.faq-item p { padding: 0 0 26px; color: var(--text-mid); max-width: 700px; }

/* ===== Final CTA ===== */
.final { background: var(--cream-dark); text-align: center; }
.final .inner { max-width: 720px; margin: 0 auto; }
.final p { margin-top: 22px; color: var(--text-mid); }
.final .cta-row { margin-top: 36px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ===== Footer ===== */
footer { background: var(--navy); color: #fff; }
.foot-top { max-width: 1280px; margin: 0 auto; padding: 64px 24px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.foot-brand img { width: 200px; max-width: 100%; height: auto; filter: brightness(0) invert(1); opacity: 0.92; }
.foot-brand p { font-size: 14px; color: rgba(255,255,255,0.78); margin-top: 24px; max-width: 320px; }
.foot-col h4 { font-size: 10px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--gold-light); margin-bottom: 20px; }
.foot-col li { margin-bottom: 12px; }
.foot-col a { font-size: 14px; color: rgba(255,255,255,0.86); }
.foot-col a:hover { color: #fff; }
.foot-bottom { border-top: 1px solid rgba(255,255,255,0.1); }
.foot-bottom .inner { max-width: 1280px; margin: 0 auto; padding: 20px 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 12px; color: rgba(255,255,255,0.72); }
@media (max-width: 760px) { .foot-top { grid-template-columns: 1fr; gap: 32px; } }

/* ===== Premium art direction pass ===== */
:root { --gold: #7E611C; --gold-light: #E2C96F; --cream: #F7F2E8; --cream-dark: #E9E0D1; --text-mid: #33475C; --text-muted: #52677B; --border: rgba(13,27,42,0.12); }
body { background: var(--cream); }
section { padding: 104px 0; }
.wrap { max-width: 1120px; }
.sec-head { margin-bottom: 56px; }
.sec-head .h2 { margin-top: 22px; }
::selection { background: rgba(226,201,111,0.45); }
.nav { background: rgba(247,242,232,0.96); backdrop-filter: blur(10px); }
.nav-inner { max-width: 1180px; }
.brand img { height: 62px; }
.btn { border-radius: 0; }
.btn-gold { background: var(--navy); color: #fff; }
.btn-gold:hover { background: var(--navy-mid); }
.hero { border-bottom: 1px solid var(--gold); }
.hero-copy { min-height: min(calc(100vh - 72px), 860px); background: linear-gradient(180deg, rgba(255,255,255,0.54), rgba(247,242,232,0.86)), var(--cream); }
.hero-copy .inner { max-width: 900px; }
.hero-badge { margin-bottom: 34px; color: var(--gold); }
.hero .sub { max-width: 690px; color: #2F4358; }
.hero .divider { display: none; }
.hero .note { max-width: 660px; margin: 34px auto 0; padding-top: 28px; border-top: 1px solid rgba(169,130,43,0.26); }
#audiences { background: #fff !important; border-bottom: 0 !important; padding: 96px 0 !important; }
#audiences .sec-head { max-width: 860px; }
.lscr-audience-grid { gap: 0 !important; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.lscr-audience-card { background: transparent !important; border: 0 !important; padding: 48px !important; display: flex; flex-direction: column; align-items: flex-start; }
.lscr-audience-card .lead { margin-bottom: 28px; }
.lscr-audience-card .audience-card-btn { margin-top: auto; }
.lscr-audience-card + .lscr-audience-card { border-left: 1px solid var(--border) !important; }
.benefit, .step, .feature, .cad-card, .expert, .quote, .price-card { box-shadow: none; }
.benefit { padding: 52px 44px; }
.feature { background: transparent; border-top: 1px solid var(--border); padding: 34px 0; }
.feature-list { gap: 0; }
.step, .cad-card, .expert, .quote { border: 0; border-top: 1px solid var(--gold); background: rgba(255,255,255,0.58); }
.expert-grid { gap: 24px; }
.expert { padding: 38px 30px; }
.faq { background: var(--cream); }
.final { background: #fff; }
@media (max-width: 900px) {
  section { padding: 64px 0; }
  .brand img { height: 44px; }
  .hero-copy { min-height: auto; padding: 76px 28px 68px; }
}
@media (max-width: 700px) {
  #audiences { padding: 70px 0 !important; }
  .lscr-audience-grid { border: 0; }
  .lscr-audience-card { padding: 30px 22px !important; border-top: 1px solid var(--border) !important; }
  .lscr-audience-card + .lscr-audience-card { border-left: 0 !important; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 22px; }
  section { padding: 68px 0; }
  .nav-inner { min-height: 64px; padding: 10px 14px; gap: 10px; }
  .brand { min-width: 0; }
  .brand img { height: 38px; max-width: 170px; }
  .mobile-nav-actions { gap: 4px; flex-shrink: 0; }
  .mobile-apply-btn { padding: 9px 11px; font-size: 9px; }
  .mobile-menu-btn { width: 36px; height: 36px; }
  .mobile-menu { padding: 12px 22px 22px; }
  .mobile-menu a:not(.btn) { padding: 11px 0; font-size: 14px; }
  .hero-copy { padding: 72px 22px 64px; }
  .hero-badge { margin-bottom: 24px; font-size: 10px; letter-spacing: 0.13em; }
  .hero-badge::before, .hero-badge::after { width: 24px; }
  .h1 { font-size: clamp(38px, 12vw, 48px); line-height: 1.03; }
  .h2 { font-size: clamp(29px, 9vw, 36px); line-height: 1.12; }
  .hero .sub { margin-top: 22px; font-size: 16px; line-height: 1.58; }
  .hero .cta-row { margin-top: 28px; display: grid; width: 100%; gap: 10px; }
  .hero .cta-row .btn { width: 100%; white-space: normal; }
  .hero .note { margin-top: 28px; padding-top: 22px; font-size: 13.5px; line-height: 1.6; }
  .sec-head { margin-bottom: 34px; }
  .sec-head p { margin-top: 16px; }
  #audiences { padding: 62px 0 !important; }
  #audiences .sec-head { margin-bottom: 22px !important; }
  .lscr-audience-card { text-align: left !important; padding: 28px 0 !important; }
  .lscr-audience-card .h3 { font-size: 23px !important; }
  .lscr-audience-card .btn { margin-top: 18px !important; }
  .benefit { padding: 42px 26px; }
  .features { padding: 64px 0; }
  .features .sec-head { text-align: left; margin-bottom: 28px; }
  .features .eyebrow.center { justify-content: flex-start; }
  .features .eyebrow.center::before { width: 28px; }
  .features .eyebrow.center::after { display: none; }
  .features .h2 { font-size: 34px; }
  .feature { grid-template-columns: 34px 1fr; gap: 14px; padding: 22px 0; align-items: start; }
  .feature .fn { font-size: 18px; line-height: 1.25; padding-top: 3px; }
  .feature h3 { font-size: 20px; line-height: 1.18; }
  .feature p { margin-top: 10px; font-size: 14.5px; line-height: 1.58; }
  .steps, .cadence-grid, .price-grid, .quote-grid { gap: 16px; }
  .step, .cad-card, .price-card, .quote { padding: 28px 24px; }
  .expert-grid { gap: 16px; }
  .expert { padding: 30px 24px; }
  .testi { padding: 64px 0; }
  .testi .sec-head { text-align: left; margin-bottom: 24px; }
  .testi .eyebrow.center { justify-content: flex-start; display: block; font-size: 10px; letter-spacing: 0.14em; margin-bottom: 12px; }
  .testi .eyebrow.center::before, .testi .eyebrow.center::after { display: none; }
  .testi .h2 { font-size: 34px; margin-top: 0; }
  .quote-grid { gap: 0; border-top: 1px solid var(--border); }
  .quote { padding: 22px 0; background: transparent; border-top: 0; border-bottom: 1px solid var(--border); }
  .quote .mark { display: none; }
  .quote p { font-size: 17px; line-height: 1.42; }
  .quote cite { margin-top: 14px; font-size: 10px; line-height: 1.35; letter-spacing: 0.13em; }
  .faq-item summary { padding: 20px 0; font-size: 18px; line-height: 1.25; }
  .final .cta-row { display: grid; gap: 10px; }
  .final .cta-row .btn { width: 100%; white-space: normal; }
  .foot-top { padding: 48px 22px; }
}
@media (max-width: 380px) {
  .brand img { max-width: 150px; }
  .mobile-apply-btn { padding: 8px 9px; }
  .h1 { font-size: 35px; }
}

.arw::after { content: "\2192"; }

/* ===== Social proof / stats + audiences (was inline <style> in body) ===== */
.lscr-stat-row { display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; max-width:820px; margin:0 auto; }
.lscr-stat-col { padding:6px 20px; text-align:center; }
.lscr-stat-col:not(:last-child) { border-right:1px solid rgba(212,175,90,0.18); }
.lscr-detail-grid { display:grid; grid-template-columns: 1fr 1fr; margin-top:28px; }
.lscr-detail-cell { padding:24px; text-align:center; border-top:1px solid rgba(212,175,90,0.2); }
.lscr-detail-cell:nth-child(odd) { border-right:1px solid rgba(212,175,90,0.2); }
.lscr-detail-cell:nth-child(1), .lscr-detail-cell:nth-child(2) { border-bottom:1px solid rgba(212,175,90,0.2); }
.lscr-audience-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.lscr-audience-card { background:var(--cream); border:1px solid var(--border); padding:34px; }
@media (max-width:700px) {
  #audiences { padding:52px 0 !important; }
  #audiences .sec-head { margin-bottom:26px !important; }
  #audiences .h2 { font-size:28px; }
  .lscr-audience-grid { grid-template-columns:1fr; gap:14px; }
  .lscr-audience-card { padding:24px 22px; text-align:center; }
  .lscr-audience-card .h3 { font-size:23px !important; }
  .lscr-audience-card .btn { width:100%; white-space:normal; }
}
@media (max-width:640px) {
  .lscr-stat-row { grid-template-columns:1fr 1fr; row-gap:24px; }
  .lscr-stat-col:nth-child(2n) { border-right:none; }
  .lscr-stat-col:nth-child(-n+2) { border-bottom:1px solid rgba(212,175,90,0.2); padding-bottom:16px; }
  .lscr-detail-grid { grid-template-columns:1fr; }
  .lscr-detail-cell:nth-child(odd) { border-right:none !important; }
}

/* ===== Network expert cards (was inline <style> in body) ===== */
.network a.expert { display:block; text-decoration:none; transition: transform .15s ease, box-shadow .15s ease; }
      .network a.expert:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(13,27,42,0.08); }
      .network a.expert:hover .nm { color: var(--gold); }
      .network .expert .vp { font-size:11px; text-transform:uppercase; letter-spacing:0.14em; color:var(--gold); margin-top:16px; }

/* ===================================================================
   Component classes extracted from former inline style="" attributes
   =================================================================== */

/* Audiences */
.audiences-head { margin-bottom: 36px; }
.audiences-photo { display: block; width: 100%; max-width: 720px; margin: 0 auto 48px; border-radius: 12px; }
.audience-card-title { font-size: 26px; margin-bottom: 14px; }
.audience-card-btn { margin-top: 24px; }

/* Founder / stats band */
.founder { background: var(--navy); padding: 104px 24px 96px; width: 100%; }
.founder-intro { max-width: 760px; margin: 0 auto 64px; text-align: center; }
.founder .eyebrow.center::before, .founder .eyebrow.center::after { background: rgba(212,175,90,0.5); }
.founder-h2 { font-family: var(--font-serif); font-size: clamp(26px, 3vw, 38px); line-height: 1.15; color: #fff; margin: 22px auto 0; max-width: 640px; }
.founder-person { display: flex; flex-direction: column; align-items: center; gap: 24px; margin-top: 48px; }
.founder-photo { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; object-position: center 20%; filter: grayscale(100%); background: var(--cream-dark);
  outline: 1px solid rgba(212,175,90,0.45); outline-offset: 7px; }
.founder-bio { text-align: center; max-width: 560px; }
.founder-name { font-family: var(--font-serif); font-size: 30px; line-height: 1.1; color: #fff; }
.founder-role { color: var(--gold-light); text-transform: uppercase; letter-spacing: 0.2em; font-size: 10.5px; font-weight: 600; margin-top: 10px; }
.founder-desc { color: rgba(255,255,255,0.68); font-size: 15px; line-height: 1.7; margin-top: 16px; }

/* Founder stat cells — typographic, no icons */
.stat-num { font-family: var(--font-serif); font-weight: 400; font-size: 38px; line-height: 1; color: var(--gold-light); }
.stat-cap { text-transform: uppercase; letter-spacing: 0.16em; font-size: 10.5px; color: rgba(255,255,255,0.55); margin-top: 12px; }

/* Founder expandable detail */
.founder-detail { display: none; max-width: 640px; margin: 0 auto; }
.chip-row { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.chip-row.mb { margin-bottom: 8px; }
.chip { font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--navy); background: var(--gold-light); padding: 4px 10px; border-radius: 2px; font-weight: 600; }
.chip-outline { font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold-light); background: transparent; border: 1px solid rgba(212,175,90,0.55); padding: 3px 9px; border-radius: 2px; font-weight: 600; }
.detail-text { font-size: 12px; color: rgba(255,255,255,0.72); }
.detail-note { font-size: 10px; color: rgba(255,255,255,0.45); margin-bottom: 6px; }
.founder-toggle-wrap { text-align: center; margin-top: 44px; }
.founder-toggle-btn { background: transparent; border: none; color: var(--gold-light); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; cursor: pointer; padding: 6px 4px; opacity: 0.85; transition: opacity 0.2s ease; }
.founder-toggle-btn:hover { opacity: 1; }
.founder-toggle-icon { font-size: 13px; margin-left: 6px; vertical-align: -1px; }
.founder-quote { font-family: var(--font-serif); font-style: italic; font-size: 18px; color: rgba(255,255,255,0.8); max-width: 580px; margin: 56px auto 0; text-align: center; line-height: 1.7; }
.founder-quote::before { content: ""; display: block; width: 40px; height: 1px; background: rgba(212,175,90,0.5); margin: 0 auto 26px; }
.founder-quote-hl { color: var(--gold-light); font-style: italic; }

/* Final CTA heading */
.final .h2 { margin-top: 20px; }

/* ===== Hero: animated network + entrance ===== */
.hero-copy { position: relative; overflow: hidden; }
.hero-canvas {
  position: absolute; top: -10%; left: -10%; width: 120%; height: 120%;
  pointer-events: none; z-index: 0; will-change: transform;
}
/* Drift runs on the GPU compositor, at constant velocity in a seamless loop
   (linear, no alternate) so it never decelerates, stops, or jumps. A slow
   out-of-phase opacity "breath" per layer makes the field feel alive even
   where nothing moves. */
.hero-canvas.a { animation: heroDriftA 48s linear infinite, heroBreathe 11s ease-in-out infinite alternate; }
.hero-canvas.b { animation: heroDriftB 60s linear infinite, heroBreathe 17s ease-in-out infinite alternate-reverse; }
@keyframes heroBreathe {
  from { opacity: 0.68; }
  to   { opacity: 1; }
}
.hero-copy .inner { position: relative; z-index: 1; }

@keyframes heroDriftA {
  0%   { transform: translate3d(-1.6%, -1.0%, 0) scale(1.035); }
  20%  { transform: translate3d( 0.2%, -1.6%, 0) scale(1.045); }
  40%  { transform: translate3d( 1.6%, -0.2%, 0) scale(1.040); }
  60%  { transform: translate3d( 1.0%,  1.4%, 0) scale(1.030); }
  80%  { transform: translate3d(-1.2%,  1.2%, 0) scale(1.030); }
  100% { transform: translate3d(-1.6%, -1.0%, 0) scale(1.035); }
}
@keyframes heroDriftB {
  0%   { transform: translate3d( 1.4%,  1.2%, 0) scale(1.045); }
  20%  { transform: translate3d(-0.4%,  1.6%, 0) scale(1.035); }
  40%  { transform: translate3d(-1.6%,  0.4%, 0) scale(1.030); }
  60%  { transform: translate3d(-1.0%, -1.4%, 0) scale(1.040); }
  80%  { transform: translate3d( 1.2%, -1.2%, 0) scale(1.045); }
  100% { transform: translate3d( 1.4%,  1.2%, 0) scale(1.045); }
}

@keyframes heroRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-anim { opacity: 0; animation: heroRise 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.hero-anim.d1 { animation-delay: 0.05s; }
.hero-anim.d2 { animation-delay: 0.18s; }
.hero-anim.d3 { animation-delay: 0.34s; }
.hero-anim.d4 { animation-delay: 0.50s; }
.hero-anim.d5 { animation-delay: 0.64s; }

@media (prefers-reduced-motion: reduce) {
  .hero-anim { opacity: 1; animation: none; transform: none; }
  .hero-canvas { display: none; }
}

/* ===== Scroll reveal (applied page-wide via .anim on <html>) ===== */
.anim .sec-head,
.anim .lscr-audience-card,
.anim .founder-intro,
.anim .lscr-stat-col,
.anim .founder-quote,
.anim .benefit,
.anim .step,
.anim .feature,
.anim .price-card,
.anim .cad-card,
.anim .quote,
.anim .faq-item,
.anim .final .inner {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.anim .sec-head.is-visible,
.anim .lscr-audience-card.is-visible,
.anim .founder-intro.is-visible,
.anim .lscr-stat-col.is-visible,
.anim .founder-quote.is-visible,
.anim .benefit.is-visible,
.anim .step.is-visible,
.anim .feature.is-visible,
.anim .price-card.is-visible,
.anim .cad-card.is-visible,
.anim .quote.is-visible,
.anim .faq-item.is-visible,
.anim .final .inner.is-visible {
  opacity: 1;
  transform: none;
}

/* ===== Founding-rate anchor in pricing card ===== */
.price-card .amt .std { font-size: 21px; color: rgba(255,255,255,0.42); text-decoration: line-through; text-decoration-color: rgba(212,175,90,0.6); margin-right: 10px; vertical-align: 6px; }

/* ===== The Roundtable Brief ===== */
.brief { background: var(--navy); color: #fff; padding: 68px 0; }
.brief .brief-inner { max-width: 920px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 24px 40px; align-items: end; }
.brief .eyebrow { color: var(--gold-light); grid-column: 1 / -1; }
.brief .h2 { color: #fff; max-width: 620px; grid-column: 1; }
.brief p { color: rgba(255,255,255,0.72); margin-top: 16px; max-width: 680px; grid-column: 1; }
.brief-form { display: flex; gap: 10px; align-items: stretch; min-width: 360px; grid-column: 2; grid-row: 2 / span 2; }
.brief-form input { width: 100%; min-width: 220px; background: transparent; border: 1px solid rgba(255,255,255,0.3); color: #fff; padding: 14px 16px; border-radius: 0; font-family: var(--font-sans); font-size: 14px; }
.brief-form input::placeholder { color: rgba(255,255,255,0.62); }
.brief-form input:focus { outline: none; border-color: var(--gold-light); }
.brief-form .btn { background: var(--gold-light); color: var(--navy); }
.brief-form .btn:hover { background: #fff; }
@media (max-width: 760px) {
  .brief { padding: 56px 0; }
  .brief .brief-inner { grid-template-columns: 1fr; gap: 22px; }
  .brief .h2, .brief p, .brief-form { grid-column: auto; grid-row: auto; }
  .brief-form { min-width: 0; width: 100%; flex-direction: column; }
  .brief-form input, .brief-form .btn { width: 100%; }
}

/* Hero art photo (client request 2026-07-09) */
.hero-art { margin: 44px auto 0; max-width: 820px; }
.hero-art img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover; object-position: center 30%; border-radius: 10px; border: 1px solid rgba(169,130,43,0.28); box-shadow: 0 24px 60px rgba(23,42,64,0.18); }
@media (max-width: 720px) { .hero-art { margin-top: 32px; } .hero-art img { max-height: 260px; border-radius: 8px; } }