/* ============================================================================
   v20-dark.css — dark ambient theme for the agency site.
   Loaded AFTER styles.css; overrides via :root variables + targeted overrides
   for sections that hardcode color values. Inter 400 typography retained.
   ============================================================================ */

:root {
  /* surfaces — deepened for the v3 ambient pass */
  --paper:         #06070C;
  --paper-raise:   #0D1018;
  --paper-deep:    #03040A;

  /* type — slight contrast softening so the page reads more atmospheric */
  --ink:           rgba(255, 255, 255, 0.96);
  --ink-soft:      rgba(255, 255, 255, 0.66);
  --ink-softer:    rgba(255, 255, 255, 0.42);

  /* hairlines — softer */
  --rule:          rgba(255, 255, 255, 0.06);
  --rule-soft:     rgba(255, 255, 255, 0.03);

  /* accent — cobalt retained */
  --accent:        #5A7FFF;
  --accent-deep:   #3D5FE8;
  --accent-pale:   #A4BAFF;
  --accent-soft:   rgba(90, 127, 255, 0.12);
}

/* ===== body + ambient backdrop ============================================ */
html, body {
  background: var(--paper);
  color: var(--ink);
}

body {
  /* Multiple low-opacity radial washes layered to create continuous atmospheric
     depth instead of flat dark.  Anchors at 4 points so the gradient drift
     follows the eye through the scroll. */
  background:
    radial-gradient(ellipse 60% 40% at 8% -4%,  rgba(90, 127, 255, 0.13),  transparent 60%),
    radial-gradient(ellipse 50% 35% at 92% 6%,  rgba(80, 60, 220, 0.10),  transparent 60%),
    radial-gradient(ellipse 70% 45% at 50% 58%, rgba(40, 50, 130, 0.07),  transparent 65%),
    radial-gradient(ellipse 55% 35% at 12% 96%, rgba(90, 127, 255, 0.08), transparent 60%),
    var(--paper);
  background-attachment: fixed;
}

::selection { background: var(--accent); color: #FFFFFF; }

/* ===== nav ================================================================ */
.nav {
  position: static;            /* not sticky — scrolls away with content */
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--rule);
}
/* In case .is-scrolled is added by the JS scroll handler, keep it dark */
.nav.is-scrolled {
  background: rgba(10, 11, 16, 0.92);
  border-bottom-color: var(--rule);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
}
.nav-mark { color: var(--ink); }
.nav-mark .dot { color: var(--accent); }
.nav-links a { color: var(--ink-soft); }
.nav-links a:hover,
.nav-links a.is-current { color: var(--ink); }
.nav-cta {
  background: var(--accent-deep);
  border: 1px solid var(--accent-deep);
  color: #FFFFFF;
  box-shadow: 0 8px 28px rgba(90, 127, 255, 0.32);
}
.nav-cta:hover {
  background: var(--accent);
  border-color: var(--accent);
}
.nav-mobile-panel {
  background: var(--paper-raise);
  border-bottom: 1px solid var(--rule);
}
.nav-mobile-panel li { border-bottom: 1px solid var(--rule-soft); }
.nav-mobile-panel a { color: var(--ink); }
.nav-mobile-panel a:hover { color: var(--accent); }
.nav-burger span { background: var(--ink); }

/* ===== hero =============================================================== */
.hero { background: transparent; }
.hero-headline { color: var(--ink); }
.hero-headline em { color: var(--accent-pale); font-style: italic; }
.hero-sub { color: var(--ink-soft); }
.hero-tag {
  color: var(--ink-softer);
  border: 1px solid var(--rule);
  background: rgba(255, 255, 255, 0.02);
}
.hero-tag .pulse { background: var(--accent); box-shadow: 0 0 12px var(--accent); }

/* primary button */
.btn-primary {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #FFFFFF;
  box-shadow: 0 10px 36px rgba(90, 127, 255, 0.30);
}
.btn-primary:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-pale); }
.hero-cta {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  padding: 16px 32px !important;
  border-radius: 8px !important;
  background: var(--accent) !important;
  color: #FFFFFF !important;
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  box-shadow: 0 10px 36px rgba(90, 127, 255, 0.30);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.hero-cta:hover {
  background: var(--accent-deep) !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 44px rgba(90, 127, 255, 0.42);
}
.hero-cta .arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}
.hero-cta:hover .arrow {
  transform: translateX(4px);
}

/* ===== hero dashboard — glass card ======================================== */
.hero-dash {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--rule);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.hero-dash-head {
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--rule);
}
.hero-dash-status,
.hero-dash-brand,
.hero-dash-head-version { color: var(--ink-soft); }
.hero-dash-status .pulse { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.hero-dash-note {
  background: rgba(255, 255, 255, 0.02);
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
}
.hero-dash-note strong { color: var(--ink); }
.hero-dash-section { border-color: var(--rule) !important; }
.hero-dash-label { color: var(--ink-softer); }
.hero-dash-now-active { color: var(--ink); }
.hero-dash-stat-num { color: var(--ink); }
.hero-dash-stat-key { color: var(--ink-soft); }
.hero-dash-event-text { color: var(--ink); }
.hero-dash-event-time { color: var(--ink-softer); }
.hero-dash-arrow { color: var(--accent); }

/* ===== sections =========================================================== */
.section { background: transparent; color: var(--ink); position: relative; }
.section.is-bordered { border-top: 1px solid var(--rule); }
.section.is-bordered + .section.is-bordered { border-top: 1px solid var(--rule); }
.section.is-paper {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(90, 127, 255, 0.06), transparent 70%),
    var(--paper-raise);
}
/* Each lifted card surface gets a soft inner bleed so the dark feels alive */
.ui-mockup, .hero-dash {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(90, 127, 255, 0.05), transparent 60%),
    rgba(255, 255, 255, 0.02);
}
.section-eyebrow { color: var(--accent-pale); }
.section-h { color: var(--ink); }
.section-h em { color: var(--accent-pale); font-style: italic; }
.section-sub { color: var(--ink-soft); }
.is-lede { color: var(--ink); }
.prose p, .prose strong { color: var(--ink-soft); }
.prose strong { color: var(--ink); font-weight: 500; }

/* ===== stats ============================================================== */
.stat { color: var(--ink); }
.stat-num { color: var(--ink); }
.stat-num span { color: var(--accent-pale); }
.stat-label { color: var(--ink); }
.stat-body { color: var(--ink-soft); }

/* ===== visual map ========================================================= */
.map-label { color: var(--ink-softer); }
.growth-column {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid var(--rule) !important;
}
.signal-list span {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--rule);
  color: var(--ink-soft);
}
.growth-core {
  background:
    radial-gradient(circle at 50% 50%, rgba(90, 127, 255, 0.18), transparent 45%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.01)) !important;
  border-radius: 12px;
}
.growth-core-card {
  background: rgba(20, 23, 32, 0.92) !important;
  border: 1px solid rgba(90, 127, 255, 0.22) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}
.growth-core-card h3 { color: var(--ink); }
.growth-core-card p { color: var(--ink-soft); }
.mini-badge.is-blue {
  background: var(--accent-soft);
  color: var(--accent-pale);
  border: 1px solid rgba(90, 127, 255, 0.28);
}
.core-orbit { border: 1px dashed rgba(90, 127, 255, 0.25); }
.outcome-stack > div {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--rule);
}
.outcome-stack strong { color: var(--ink); }
.outcome-stack span { color: var(--ink-softer); }

/* ===== diagram + stages =================================================== */
.diagram-stage { color: var(--ink); }
.diagram-stage-num { color: var(--ink-softer); }
.diagram-stage-title { color: var(--ink); }
.diagram-stage-dot { background: var(--accent); }
.stage-row { border-top: 1px solid var(--rule); }
.stage-num { color: var(--accent); }
.stage-title { color: var(--ink); }
.stage-tag { color: var(--ink-softer); }
.stage-body { color: var(--ink-soft); }

/* ===== UI mockups (chrome cards) ========================================= */
.ui-mockup {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--rule);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.ui-mockup-header {
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--rule);
}
.ui-mockup-dot { background: var(--ink-softer); }
.ui-mockup-url { color: var(--ink-softer); }
.ui-mockup-body { background: transparent; color: var(--ink); }

/* AI receptionist chat */
.chat-message-avatar {
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  border: 1px solid var(--rule);
}
.chat-message.is-ai .chat-message-avatar {
  background: var(--accent-soft);
  color: var(--accent-pale);
  border-color: rgba(90, 127, 255, 0.28);
}
.chat-message-bubble {
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  border: 1px solid var(--rule);
}
.chat-message.is-ai .chat-message-bubble {
  background: var(--accent-soft);
  color: var(--ink);
  border-color: rgba(90, 127, 255, 0.22);
}
.chat-message-meta { color: var(--ink-softer); }

/* calendar */
.calendar-month { color: var(--ink); }
.calendar-meta { color: var(--ink-soft); }
.calendar-day-h { color: var(--ink-softer); }
.calendar-cell {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--rule);
  color: var(--ink-soft);
}
.calendar-cell.is-empty { background: transparent; border-color: transparent; }
.calendar-cell.is-today {
  background: var(--accent-soft);
  border-color: rgba(90, 127, 255, 0.4);
}
.calendar-cell-date { color: var(--ink); }
.calendar-post {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
}
.calendar-post.is-reel  { background: rgba(168, 85, 247, 0.20); color: #D9C5FF; }
.calendar-post.is-fb    { background: rgba(90, 127, 255, 0.22); color: #C8D4FF; }
.calendar-post.is-story { background: rgba(255, 138, 76, 0.18); color: #FFD3BA; }

/* pipeline */
.pipeline-col-h { border-bottom: 1px solid var(--rule); }
.pipeline-col-name { color: var(--ink-soft); }
.pipeline-col-count { color: var(--accent-pale); }
.pipeline-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--rule);
}
.pipeline-card-name { color: var(--ink); }
.pipeline-card-meta { color: var(--ink-soft); }
.pipeline-card-source { color: var(--ink-softer); }

/* reviews */
.review-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--rule);
}
.review-card-author { color: var(--ink); }
.review-card-stars { color: #FFC85B; }
.review-card-text { color: var(--ink-soft); }
.review-card-reply {
  background: var(--accent-soft);
  border: 1px solid rgba(90, 127, 255, 0.22);
}
.review-card-reply-head { color: var(--accent-pale); }
.review-card-reply-text { color: var(--ink); }
.review-action.is-primary { background: var(--accent); color: #FFFFFF; border: 1px solid var(--accent); }
.review-action.is-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.review-action.is-ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule); }
.review-action.is-ghost:hover { border-color: var(--accent); color: var(--accent-pale); }

/* monthly report */
.report-head { border-bottom: 1px solid var(--rule); }
.report-head-title { color: var(--ink); }
.report-head-meta { color: var(--ink-softer); }
.report-row { border-bottom: 1px solid var(--rule); }
.report-row-label { color: var(--ink-soft); }
.report-row-value { color: var(--ink); }
.report-row-value strong { color: var(--accent-pale); }
.report-total { border-top: 2px solid var(--accent); }
.report-total-label { color: var(--ink-soft); }
.report-total-value { color: var(--ink); }

/* ===== indigo worldview moment =========================================== */
.section.is-indigo {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(90, 127, 255, 0.28), transparent 65%),
    linear-gradient(180deg, #0E1430 0%, #0A0E22 100%);
  border-top: 1px solid rgba(90, 127, 255, 0.20);
  border-bottom: 1px solid rgba(90, 127, 255, 0.20);
}
.section.is-indigo .section-eyebrow { color: var(--accent-pale); }
.display-quote { color: var(--ink); }
.display-quote em { color: var(--accent-pale); font-style: italic; }
.attribution { color: var(--ink-softer); }

/* ===== founders =========================================================== */
.founder-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--rule);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
}
.founder-avatar {
  background: var(--accent-soft);
  border: 1px solid rgba(90, 127, 255, 0.28);
  color: var(--accent-pale);
}
.founder-name { color: var(--ink); }
.founder-role { color: var(--ink-softer); }
.founder-bio { color: var(--ink-soft); }

/* ===== pricing tiers ===================================================== */
.tier {
  border: 1px solid var(--rule);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
}
.tier.tier-foundation {
  background: linear-gradient(180deg, #14161E 0%, #0E1017 100%);
}
.tier.tier-growth {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(90, 127, 255, 0.22), transparent 60%),
    linear-gradient(180deg, #11163A 0%, #0B0F2A 100%);
  border: 2px solid var(--accent);
}
.tier.tier-growth:hover { border-color: var(--accent-pale); }
.tier.tier-empire {
  background: linear-gradient(180deg, #161924 0%, #0F121C 100%);
}
.tier-name { color: var(--ink); }
.tier-name em { color: var(--accent-pale); font-style: italic; }
.tier-blurb { color: var(--ink-soft); }
.tier-price-setup { color: var(--ink); }
.tier-price-mo { color: var(--ink-soft); }
.tier-price-mo strong { color: var(--accent-pale); }
.tier-includes li {
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
}
.tier-includes li::before { color: var(--accent-pale) !important; }
.tier-exit {
  color: var(--ink-softer);
  border-top: 1px solid var(--rule);
}
.tier-badge {
  background: var(--accent);
  box-shadow: 0 8px 28px rgba(90, 127, 255, 0.45);
}

/* ===== comparison table ================================================== */
.compare-row { border-bottom: 1px solid var(--rule); }
.compare-cell { color: var(--ink-soft); border-color: var(--rule); }
.compare-cell.compare-h { color: var(--ink-softer); }
.compare-cell.compare-h.is-us { color: var(--accent-pale); }
.compare-row-label { color: var(--ink); }
.check.is-yes { color: #6EE7B7; }
.check.is-no { color: rgba(255, 255, 255, 0.30); }
.check.is-mid { color: #FFC85B; }

/* ===== faq =============================================================== */
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-q { color: var(--ink); }
.faq-q:hover { color: var(--accent-pale); }
.faq-q-icon { color: var(--accent); }
.faq-a, .faq-a p { color: var(--ink-soft); }

/* ===== final cta — full-bleed ambient gradient =========================== */
.final-cta {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(90, 127, 255, 0.32), transparent 55%),
    linear-gradient(180deg, #0B0F1F 0%, #07080C 100%);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.final-cta-eyebrow { color: var(--accent-pale); }
.final-cta h2 { color: var(--ink); }
.final-cta h2 em { color: var(--accent-pale); }
.final-cta p { color: var(--ink-soft); }
/* The original styles.css set .final-cta .btn-primary to white-on-dark.
   Restore the cobalt button so it matches every other CTA on the page. */
.final-cta .btn-primary {
  background: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 36px rgba(90, 127, 255, 0.34);
}
.final-cta .btn-primary:hover {
  background: var(--accent-deep) !important;
  border-color: var(--accent-deep) !important;
  color: #FFFFFF !important;
}

/* ===== footer ============================================================ */
.footer {
  background: var(--paper-deep);
  border-top: 1px solid var(--rule);
}
.footer-mark { color: var(--ink); }
.footer-mark .dot { color: var(--accent); }
.footer-tagline { color: var(--ink-soft); }
.footer-col-h { color: var(--ink-soft); }
.footer-col a { color: var(--ink-soft); }
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
}
.footer-bottom .dot { color: var(--accent); }

/* ===== small touches ===================================================== */
.eyebrow { color: var(--accent-pale); }
.lede { color: var(--ink); }
.page-head h1 { color: var(--ink); }
.page-head h1 em { color: var(--accent-pale); font-style: italic; }

/* ===== sub-page heads (tiers / approach / philosophy / process / founders / apply)
   The original .page-head rule hardcodes `var(--bg)` for its background, which
   we never override globally — that's why every sub-page top was rendering
   white. Force dark here. */
.page-head {
  background:
    radial-gradient(ellipse 70% 50% at 90% 30%, rgba(90, 127, 255, 0.10), transparent 60%),
    var(--paper) !important;
  border-bottom: 1px solid var(--rule) !important;
}
.page-head .eyebrow { color: var(--accent-pale) !important; }
.page-head h1 { color: var(--ink) !important; }
.page-head h1 em { color: var(--accent-pale) !important; }
.page-head .lede { color: var(--ink-soft) !important; }

/* ===== hero visual card on approach / philosophy / process page-heads ===== */
.hero-visual-card {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid var(--rule) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}
.hero-visual-top { color: var(--accent-pale) !important; }

/* ===== approach.html cycle (system-orbit + path-nodes) ==================== */
.path-flow, .system-orbit { background: transparent; }
.system-core,
.path-node {
  background: rgba(15, 18, 26, 0.85) !important;
  border: 1px solid rgba(90, 127, 255, 0.22) !important;
  color: var(--ink) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* ===== approach.html v3 — Ops Layer wrapper + node tiering ================ */
.orbit-wrap {
  position: relative;
  padding: 36px 18px 30px;
  margin: 8px 0 20px;
  border: 1px dashed rgba(90, 127, 255, 0.28);
  border-radius: 24px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(90, 127, 255, 0.05), transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(90, 127, 255, 0.04), transparent 60%);
}
.orbit-ring-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink-darkest, #0B0E16);
  padding: 4px 14px;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-pale);
  white-space: nowrap;
  border: 1px solid rgba(90, 127, 255, 0.28);
  border-radius: 999px;
}
.orbit-ring-label-top { top: -11px; }
.orbit-ring-label-bottom {
  bottom: -11px;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
  text-transform: none;
  font-size: 9.5px;
}
.path-node.node-kickoff {
  border: 1.5px solid rgba(90, 127, 255, 0.55) !important;
  background: rgba(20, 28, 56, 0.9) !important;
  box-shadow: 0 10px 32px rgba(90, 127, 255, 0.25) !important;
}
.path-node.node-kickoff span { color: var(--accent) !important; font-weight: 600; }
.path-node.node-experience {
  border: 1.5px solid rgba(201, 165, 92, 0.55) !important;
  background: linear-gradient(180deg, rgba(40, 32, 18, 0.85), rgba(28, 24, 16, 0.92)) !important;
  box-shadow: 0 10px 32px rgba(201, 165, 92, 0.22) !important;
}
.path-node.node-experience span { color: #DBB76E !important; font-weight: 600; }
.path-node.node-experience strong { color: #F5EFE0 !important; }
.system-core {
  text-align: center;
}
.system-core span { color: var(--accent-pale) !important; }
.system-core strong { color: var(--ink) !important; }

/* ===== approach.html path-repair (bottom callouts + center circle) ======== */
.path-repair > div {
  background: rgba(15, 18, 26, 0.65) !important;
  border: 1px solid rgba(90, 127, 255, 0.18) !important;
  color: var(--ink) !important;
}
.path-repair p {
  color: rgba(245, 245, 245, 0.78) !important;
}
.repair-core {
  background: rgba(15, 18, 26, 0.92) !important;
  border: 1px solid rgba(90, 127, 255, 0.28) !important;
  color: var(--ink) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.repair-label { color: #FFA29D !important; }
.repair-label.is-fixed { color: #7FD9A8 !important; }

/* ===== process.html launch-output (What goes live pills) ================= */
.launch-output {
  background: rgba(15, 18, 26, 0.55) !important;
  border: 1px solid rgba(90, 127, 255, 0.18) !important;
  color: var(--ink) !important;
}
.launch-output > span {
  color: rgba(245, 245, 245, 0.6) !important;
}
.launch-output strong {
  background: rgba(26, 29, 38, 0.85) !important;
  border: 1px solid rgba(90, 127, 255, 0.22) !important;
  color: var(--ink) !important;
}

/* ===== philosophy.html — neutralize any inline cream backgrounds ========= */
section.section[style*="FAFAF7"],
section.section[style*="FAFAF8"],
section.section[style*="F8F8F4"] {
  background: transparent !important;
}

/* ===== approach.html v2 stage layout — 8 stages + Ops Layer wrapper ===== */
.stage-row.stage-v2 {
  display: grid !important;
  grid-template-columns: 64px 220px 1fr !important;
  gap: 36px !important;
  padding: 48px 0 !important;
  align-items: start !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.stage-row.stage-v2:hover {
  background: rgba(255, 255, 255, 0.012) !important;
}
.stage-row.stage-v2 .stage-num {
  font-family: var(--f-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--accent-pale);
  padding-top: 4px;
}
.stage-row.stage-v2 .stage-head { padding-top: 0; }
.stage-row.stage-v2 .stage-title {
  font-size: 26px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.014em;
  line-height: 1.18;
  margin: 0 0 8px 0;
}
.stage-row.stage-v2 .stage-tagline {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.4;
  margin: 0;
}
.stage-row.stage-v2 .stage-detail {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 2px;
}
.stage-row.stage-v2 .stage-question {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 17px;
  color: var(--accent-pale);
  line-height: 1.5;
  margin: 0;
  padding: 12px 18px;
  background: rgba(90, 127, 255, 0.06);
  border-left: 2px solid rgba(90, 127, 255, 0.4);
  border-radius: 0 4px 4px 0;
}
.stage-row.stage-v2 .stage-block,
.stage-row.stage-v2 .stage-outcome {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}
.stage-row.stage-v2 .stage-block-label {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-pale);
  margin-bottom: 8px;
}
.stage-row.stage-v2 .stage-modules ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.stage-row.stage-v2 .stage-modules li {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  padding-left: 16px;
  position: relative;
}
.stage-row.stage-v2 .stage-modules li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-size: 12px;
}
.stage-row.stage-v2 .stage-modules li strong {
  color: var(--ink);
  font-weight: 500;
}
.stage-row.stage-v2 .stage-outcome {
  color: var(--ink);
  font-weight: 400;
}

/* The Experience — intentionally simpler, more reverent */
.stage-row.stage-experience .stage-question,
.stage-row.stage-experience .stage-block,
.stage-row.stage-experience .stage-modules,
.stage-row.stage-experience .stage-outcome { display: none; }
.stage-row.stage-experience .stage-experience-body {
  font-family: var(--f-display);
  font-size: 22px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  max-width: 56ch;
}
.stage-row.stage-experience .stage-title {
  color: var(--accent-pale);
}

/* Ops Layer — gold-ish accent to mirror Empire styling */
.stage-row.stage-ops .stage-num {
  color: #C9A55C;
  font-size: 22px;
  padding-top: 0;
}
.stage-row.stage-ops {
  background: rgba(201, 165, 92, 0.04) !important;
  border-top: 1px solid rgba(201, 165, 92, 0.25) !important;
  margin-top: 16px;
}
.stage-row.stage-ops:hover {
  background: rgba(201, 165, 92, 0.07) !important;
}
.stage-row.stage-ops .stage-question {
  background: rgba(201, 165, 92, 0.06);
  border-left-color: rgba(201, 165, 92, 0.5);
  color: #DBB76E;
}
.stage-row.stage-ops .stage-block-label {
  color: #DBB76E;
}
.stage-row.stage-ops .stage-modules li::before {
  color: #C9A55C;
}

@media (max-width: 900px) {
  .stage-row.stage-v2 {
    grid-template-columns: 48px 1fr !important;
    gap: 16px !important;
    padding: 32px 0 !important;
  }
  .stage-row.stage-v2 .stage-detail {
    grid-column: 2;
    margin-top: 16px;
  }
  .stage-row.stage-v2 .stage-title { font-size: 22px; }
  .stage-row.stage-v2 .stage-question { font-size: 15px; }
}
.path-node[data-step] { color: var(--ink); }

/* ===== process.html cycle (launch-cycle + lane-steps) ===================== */
.launch-lanes, .launch-cycle { background: transparent; }
.launch-core,
.lane-step {
  background: rgba(15, 18, 26, 0.85) !important;
  border: 1px solid rgba(90, 127, 255, 0.22) !important;
  color: var(--ink) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.lane-step.is-you   { border-color: rgba(90, 127, 255, 0.35) !important; }
.lane-step.is-shared { border-color: rgba(140, 110, 255, 0.32) !important; }
.lane-step.is-us    { border-color: rgba(110, 200, 240, 0.28) !important; }

/* ===== tier card overrides — !important to beat tiers.html inline <style> = */
.tier.tier-foundation {
  background: linear-gradient(180deg, #14161E 0%, #0E1017 100%) !important;
  color: var(--ink);
}
.tier.tier-growth {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(90, 127, 255, 0.22), transparent 60%),
    linear-gradient(180deg, #11163A 0%, #0B0F2A 100%) !important;
  border: 2px solid var(--accent) !important;
  color: var(--ink);
}
.tier.tier-empire {
  background: linear-gradient(180deg, #161924 0%, #0F121C 100%) !important;
  color: var(--ink);
}