/* ============================================================
   Pioneer reskin: NAVY theme overlay for all pages
   Linked LAST so it re-skins shared classes site-wide.

   The page background is #060E2B, the same deep navy the header
   and footer already use, so the whole page reads as one surface.
   Panels step up the navy ramp (#0D1B4B, #101F52, #16265F) to
   stay separable without going light.

   Text contrast on #060E2B (WCAG AA needs 4.5:1 for body):
     #FFFFFF 19.0:1   #D6E0F5 14.3:1   #A3B2D2 8.9:1
     orange  7.3:1    blue    6.4:1
   ============================================================ */
:root{
  /* ---- navy surface ramp ---- */
  --page-bg:#060E2B;      /* = header/footer deep navy */
  --deep:#060E2B;
  --surface-1:#101F52;    /* cards and raised panels */
  --surface-2:#16265F;    /* inset rows, chips, secondary fills */
  --surface-warm:rgba(245,130,31,0.12);

  /* ---- surface-only tokens, flipped from light to navy ---- */
  --bg:#060E2B; --bg-alt:#0A1638; --bone:#0A1638; --wash:#0A1638;
  --surface:#101F52; --light:#101F52; --blue-tint:rgba(0,153,255,0.14);
  --chip-bg:#16265F;
  --hero-grad:linear-gradient(180deg,#04091F 0%,#060E2B 45%,#0D1B4B 100%);

  /* page-local surface tokens (commitment, playbook, companion, quote demo) */
  --bone-deep:#0A1638; --panel:#101F52; --paper:#101F52; --soft:#16265F;
  --green-wash:rgba(52,211,153,0.12); --soft-blue:rgba(0,153,255,0.14);
  --soft-orange:rgba(245,130,31,0.14); --soft-teal:rgba(45,212,191,0.14);

  /* --ink is a TEXT color on the companion/quote pages, not a surface */
  --ink:#D6E0F5; --inksoft:#B8C6E0;
  /* accent text that was darkened for light backgrounds, brightened for navy */
  --green:#34d399; --green-deep:#34d399; --teal:#2DD4BF; --eblue:#4AB8FF;

  /* ---- text ---- */
  --ink-strong:#FFFFFF;     /* headings that used to be navy */
  --ink-on-accent:#FFFFFF;  /* text sitting on orange/blue/navy fills */
  --h-color:#FFFFFF;
  --text:#D6E0F5; --text-mid:#C6D2EC; --text-lo:#A3B2D2;
  --muted:#A3B2D2; --gray:#A3B2D2; --ink-soft:#B8C6E0; --slate:#C6D2EC;

  /* ---- lines and accents ---- */
  --card-border:rgba(120,160,220,0.22);
  --border:rgba(120,160,220,0.22);
  --line:rgba(120,160,220,0.22);
  --card-border-hi:rgba(74,184,255,0.55);
  --glow:#4AB8FF; --orange-hi:#FFA24D;
  --spot:rgba(74,184,255,0.16);
  --card-shadow:0 22px 52px rgba(0,0,0,0.45);
  --grid-line:rgba(120,160,220,0.10);
  --card-glow:linear-gradient(140deg,rgba(0,153,255,0.55),transparent 45%,rgba(245,130,31,0.45));
  --icon-bg:rgba(0,153,255,0.14); --icon-glow:0 0 26px rgba(0,153,255,0.32);
  --stat-grad:linear-gradient(120deg,var(--glow),var(--blue));
  --accent-grad:linear-gradient(120deg,var(--orange),var(--glow));
  --ease:cubic-bezier(.22,.61,.36,1);
}

body{ background:var(--page-bg); color:var(--text); }

/* Headings default to white anywhere they inherit body color */
h1,h2,h3,h4{ color:var(--ink-strong); }

/* full-bleed sections (match header/footer) */
.container{ max-width:none; padding:0 clamp(20px,4vw,52px); }

/* ---------- HEADER: unchanged navy, now continuous with the page ---------- */
nav{ background:rgba(6,14,43,0.88); backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4); border-bottom:1px solid rgba(120,160,220,0.16); }
nav .nav-inner{ max-width:none; padding:0 clamp(20px,4vw,52px); height:70px; }
.nav-logo-img{ height:40px; }
.nav-links > li > a{ position:relative; }
.nav-links > li > a:not(.nav-cta-btn)::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:linear-gradient(90deg,var(--orange),var(--glow)); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease); box-shadow:0 0 12px rgba(74,184,255,0.6); }
.nav-links > li > a:hover::after, .nav-links > li > a.active::after{ transform:scaleX(1); }
.nav-links a.active{ color:#fff !important; }

.nav-dd-menu{ min-width:0; width:600px; left:50%; transform:translateX(-50%) translateY(10px); display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:14px; background:linear-gradient(160deg,rgba(16,31,82,0.98),rgba(6,14,43,0.98)); border:1px solid rgba(120,170,230,0.30); border-radius:18px; box-shadow:0 30px 80px rgba(0,0,0,0.6); }
.nav-dd-menu::before{ content:""; position:absolute; inset:0; border-radius:18px; padding:1px; background:linear-gradient(160deg,rgba(74,184,255,0.35),transparent 40%,rgba(245,130,31,0.25)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu{ transform:translateX(-50%) translateY(0); }
.nav-dd-menu a{ display:flex; justify-content:flex-start; align-items:flex-start; gap:12px; padding:12px 13px; border-radius:12px; white-space:normal; }
.nav-dd-menu a:hover{ background:rgba(74,184,255,0.10); }
.mega-ico{ width:38px; height:38px; border-radius:10px; flex-shrink:0; display:grid; place-items:center; font-size:1.05rem; background:rgba(255,255,255,0.05); border:1px solid rgba(120,160,220,0.18); transition:box-shadow .25s var(--ease),border-color .25s,transform .25s; }
.nav-dd-menu a:hover .mega-ico{ border-color:rgba(120,170,230,0.32); box-shadow:0 0 22px rgba(74,184,255,0.4); transform:translateY(-1px); }
.mega-txt h4{ font-size:0.9rem; font-weight:700; color:#fff; margin:1px 0 2px; }
.mega-txt p{ font-size:0.77rem; font-weight:400; color:rgba(190,204,230,0.72); line-height:1.4; margin:0; }
.nav-dd-menu a span.mega-tag{ font-size:0.58rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:var(--orange); }
@media (max-width:820px){
  .nav-dd-menu{ position:static; width:100%; grid-template-columns:1fr; transform:none; opacity:1; visibility:visible; background:transparent; border:none; box-shadow:none; padding:10px 0 0 8px; }
  .nav-dd-menu::before{ display:none; }
  .nav-links{ background:rgba(6,14,43,0.98); }
}

/* ---------- BUTTONS ---------- */
.btn{ border-radius:10px; border-width:1.5px; }
.btn-primary{ background:var(--orange); color:#1a0e02; box-shadow:0 8px 24px rgba(245,130,31,0.30); }
.btn-primary:hover{ box-shadow:0 14px 34px rgba(245,130,31,0.5); }
.btn-outline, .page-hero .btn-outline{ color:#fff; border-color:rgba(120,170,230,0.45); background:transparent; }
.btn-outline:hover, .page-hero .btn-outline:hover{ background:rgba(74,184,255,0.08); border-color:var(--glow); box-shadow:0 0 26px rgba(74,184,255,0.28); }
.btn-navy{ background:var(--surface-2); color:#fff; border-color:rgba(120,170,230,0.35); }

/* ---------- PAGE HERO ---------- */
.page-hero{ background:var(--hero-grad); padding:150px 0 84px; }
.page-hero::before{ background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px); background-size:60px 60px; -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 40%,transparent 82%); mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 40%,transparent 82%); opacity:0.8; }
.page-hero::after{ display:none; }
.page-hero h1{ color:#fff; }
.page-hero h1 .accent{ background:linear-gradient(120deg,var(--orange-hi),var(--glow)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.page-hero p{ color:var(--text-mid); }
.page-hero-badge{ color:var(--glow); background:rgba(0,153,255,0.14); border-color:rgba(74,184,255,0.38); }

/* ---------- .hero (about, ai-work, playbook, quote demo) ---------- */
.hero{ background:var(--hero-grad) !important; }
.hero h1{ color:#fff !important; }
.hero p{ color:var(--text-mid) !important; }
.hero .hero-badge, .hero-badge{ color:var(--glow); background:rgba(0,153,255,0.14); border-color:rgba(74,184,255,0.38); }
.hero .hero-btn.outline, .hero .btn-outline{ color:#fff; border-color:rgba(120,170,230,0.45); }
.hero .hero-btn.outline:hover, .hero .btn-outline:hover{ border-color:var(--glow); box-shadow:0 0 26px rgba(74,184,255,0.28); background:rgba(74,184,255,0.08); }

/* ---------- HOMEPAGE specifics ---------- */
#hero{ background:var(--hero-grad); }
.hero-headline .accent{ background:linear-gradient(120deg,var(--orange-hi),var(--glow)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-stat .num{ background:linear-gradient(120deg,var(--glow),var(--orange-hi)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hv-panel{ background:rgba(16,31,82,0.82) !important; border-color:rgba(120,160,220,0.22) !important; box-shadow:0 34px 80px rgba(0,0,0,0.5) !important; }
.hv-head{ border-bottom-color:rgba(120,160,220,0.18); }
.hv-row{ background:var(--surface-2) !important; border-color:rgba(120,160,220,0.18) !important; box-shadow:none !important; }
#trust{ background:var(--surface-1); border-top:1px solid rgba(120,160,220,0.16); border-bottom:1px solid rgba(120,160,220,0.16); }
/* client logo plates stay white so dark client logos stay legible */
.logo-slot{ background:#fff !important; border-color:rgba(255,255,255,0.16) !important; box-shadow:0 6px 18px rgba(0,0,0,0.3) !important; }
.contact-form{ background:var(--surface-1) !important; border-color:rgba(120,160,220,0.22) !important; box-shadow:0 24px 60px rgba(0,0,0,0.4) !important; }
.contact-form input, .contact-form textarea, .contact-form select{ background:var(--surface-2); border-color:rgba(120,160,220,0.26); color:#fff; }
.contact-form input::placeholder, .contact-form textarea::placeholder{ color:var(--text-lo); }
.contact-form label{ color:var(--text-mid); }
.booking-chip{ background:var(--surface-2); border-color:rgba(120,160,220,0.22); color:var(--text-mid); }
.path-price{ background:rgba(0,153,255,0.14); border-color:rgba(74,184,255,0.34); color:var(--glow); }
.step{ background:rgba(255,255,255,0.03); border-color:rgba(120,160,220,0.18); }

/* chat widget */
#chatWindow{ background:var(--surface-1) !important; border-color:rgba(120,160,220,0.22) !important; }
.chat-bubble.bot{ background:var(--surface-2) !important; color:#fff !important; }
.chat-bubble.thinking{ background:var(--surface-2) !important; color:var(--text-lo) !important; }
.chat-chip{ background:var(--surface-2) !important; color:#fff !important; border-color:rgba(74,184,255,0.30) !important; }
.chat-chip:hover{ background:rgba(74,184,255,0.16) !important; border-color:var(--glow) !important; }
#chatInput{ background:var(--surface-2); border-color:rgba(120,160,220,0.26); color:#fff; }
#chatInput::placeholder{ color:var(--text-lo); }

/* ---------- page-hero split w/ infographic (pricing) ---------- */
.ph-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,0.82fr); gap:56px; align-items:center; }
.ph-split .page-hero-inner{ max-width:none; }
.ph-figure{ position:relative; }
.ladder-card{ background:rgba(16,31,82,0.78); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(120,160,220,0.22); border-radius:22px; box-shadow:0 34px 80px rgba(0,0,0,0.5); padding:26px 28px; }
.ladder-head{ display:flex; align-items:center; gap:14px; margin-bottom:24px; }
.ladder-trend{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:1.35rem; font-weight:900; color:#fff; background:linear-gradient(140deg,var(--blue),var(--glow)); box-shadow:0 8px 20px rgba(0,153,255,0.35); }
.ladder-head-txt strong{ display:block; color:#fff; font-size:1rem; }
.ladder-head-txt span{ color:var(--text-mid); font-size:0.8rem; }
/* flex, not a fixed 4-column grid: the ladder lost a tier when Jumpstart
   retired and the grid left an empty column. This adapts to the tier count. */
.ladder-bars{ display:flex; gap:14px; align-items:end; }
.lbar{ flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:9px; }
.lbar-price{ font-size:0.82rem; font-weight:800; color:#fff; white-space:nowrap; }
.lbar-price i{ font-style:normal; font-weight:600; color:var(--text-lo); font-size:0.68rem; }
.lbar-fill{ width:100%; border-radius:10px 10px 5px 5px; background:linear-gradient(180deg,rgba(74,184,255,0.85),rgba(0,153,255,0.28)); box-shadow:0 8px 22px rgba(0,153,255,0.22); animation:lbarGrow .7s var(--ease) both; transform-origin:bottom; }
.lbar.feat .lbar-fill{ background:linear-gradient(180deg,var(--orange-hi),rgba(245,130,31,0.5)); box-shadow:0 0 28px rgba(245,130,31,0.45); }
.lbar-name{ font-size:0.72rem; font-weight:700; color:var(--text-mid); text-transform:uppercase; letter-spacing:0.04em; }
@keyframes lbarGrow{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
@media (max-width:1000px){ .ph-split{ grid-template-columns:1fr; } .ph-figure{ display:none; } }

/* --- ai-solutions: assistant chat mock --- */
.chat-mock{ background:rgba(16,31,82,0.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(120,160,220,0.22); border-radius:22px; box-shadow:0 34px 80px rgba(0,0,0,0.5); padding:20px; }
.cm-head{ display:flex; align-items:center; gap:12px; padding-bottom:14px; border-bottom:1px solid rgba(120,160,220,0.18); }
.cm-avatar{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-size:1.2rem; background:var(--orange); }
.cm-head-txt strong{ display:block; color:#fff; font-size:0.92rem; } .cm-head-txt span{ color:var(--text-mid); font-size:0.75rem; }
.cm-live{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:0.7rem; font-weight:800; color:#34d399; background:rgba(52,211,153,0.14); border:1px solid rgba(52,211,153,0.34); padding:4px 10px; border-radius:999px; }
.cm-dot{ width:7px; height:7px; border-radius:50%; background:#34d399; box-shadow:0 0 8px #34d399; }
.cm-body{ display:flex; flex-direction:column; gap:10px; margin-top:16px; }
.cm-msg{ max-width:82%; padding:11px 14px; font-size:0.82rem; line-height:1.5; border-radius:14px; animation:hvIn .5s var(--ease) both; }
.cm-in{ align-self:flex-start; background:var(--surface-2); color:#fff; border-bottom-left-radius:5px; }
.cm-bot{ align-self:flex-end; background:linear-gradient(140deg,var(--blue),#2aa4ff); color:#fff; border-bottom-right-radius:5px; }
.cm-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.cm-tag{ font-size:0.72rem; font-weight:700; color:var(--text-mid); background:var(--surface-2); border:1px solid rgba(120,160,220,0.22); border-radius:8px; padding:6px 10px; }
.cm-tag.ok{ color:#34d399; border-color:rgba(52,211,153,0.38); background:rgba(52,211,153,0.10); }
@keyframes hvIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* --- website-build: site scorecard --- */
.site-mock{ background:var(--surface-1); border:1px solid rgba(120,160,220,0.22); border-radius:18px; box-shadow:0 34px 80px rgba(0,0,0,0.5); overflow:hidden; }
.sm-bar{ display:flex; align-items:center; gap:7px; padding:12px 16px; background:var(--surface-2); border-bottom:1px solid rgba(120,160,220,0.18); }
.sm-bar .sm-dot{ width:10px; height:10px; border-radius:50%; }
.sm-bar .sm-dot:nth-child(1){ background:#ff5f57; } .sm-bar .sm-dot:nth-child(2){ background:#febc2e; } .sm-bar .sm-dot:nth-child(3){ background:#28c840; }
.sm-url{ margin-left:10px; font-size:0.76rem; color:var(--text-mid); background:rgba(6,14,43,0.6); border:1px solid rgba(120,160,220,0.2); border-radius:6px; padding:4px 12px; flex:1; }
.sm-lock{ font-size:0.8rem; }
.sm-screen{ padding:24px 22px; display:flex; flex-direction:column; gap:20px; background:linear-gradient(180deg,#0B1740,#101F52); }
.sm-score{ display:flex; align-items:center; gap:16px; }
.score-ring{ width:82px; height:82px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--glow) 0 353deg, rgba(74,184,255,0.18) 353deg 360deg); flex-shrink:0; }
.score-ring span{ width:64px; height:64px; border-radius:50%; background:var(--surface-1); display:grid; place-items:center; font-size:1.4rem; font-weight:900; color:#fff; }
.sm-score-txt b{ display:block; color:#fff; font-size:1rem; } .sm-score-txt span{ color:var(--text-mid); font-size:0.78rem; }
.sm-stats{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.sm-stat{ background:var(--surface-2); border:1px solid rgba(120,160,220,0.2); border-radius:12px; padding:12px 14px; }
.sm-stat b{ display:block; color:var(--glow); font-size:1.15rem; font-weight:900; } .sm-stat span{ color:var(--text-mid); font-size:0.74rem; }

/* --- data-solutions: weekly report dashboard --- */
.dash-mock{ background:rgba(16,31,82,0.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(120,160,220,0.22); border-radius:20px; box-shadow:0 34px 80px rgba(0,0,0,0.5); padding:22px; }
.dm-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.dm-head-txt strong{ display:block; color:#fff; font-size:0.95rem; } .dm-head-txt span{ color:var(--text-mid); font-size:0.75rem; }
.dm-tag{ font-size:0.66rem; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; color:var(--glow); background:rgba(0,153,255,0.14); border:1px solid rgba(74,184,255,0.36); padding:4px 10px; border-radius:999px; }
.dm-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; }
.dm-kpi{ background:var(--surface-2); border:1px solid rgba(120,160,220,0.2); border-radius:12px; padding:12px; }
.dm-kpi b{ display:block; color:#fff; font-size:1.25rem; font-weight:900; } .dm-kpi span{ color:var(--text-mid); font-size:0.72rem; }
.dm-kpi.up b{ color:#34d399; }
.dm-chart{ background:var(--surface-2); border:1px solid rgba(120,160,220,0.2); border-radius:12px; padding:10px; }
.dm-chart svg{ width:100%; height:96px; display:block; }
.dm-foot{ margin-top:12px; font-size:0.75rem; color:var(--text-mid); text-align:center; }

/* --- industry pages: after-hours call-rescue flow --- */
.rescue-card{ background:rgba(16,31,82,0.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(120,160,220,0.22); border-radius:22px; box-shadow:0 34px 80px rgba(0,0,0,0.5); padding:22px; }
.rc-head{ display:flex; align-items:center; gap:12px; padding-bottom:16px; border-bottom:1px solid rgba(120,160,220,0.18); }
.rc-ico{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:1.25rem; background:linear-gradient(140deg,var(--blue),#1a2a7a); }
.rc-head-txt strong{ display:block; color:#fff; font-size:0.95rem; } .rc-head-txt span{ color:var(--text-mid); font-size:0.76rem; }
.rc-live{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:0.7rem; font-weight:800; color:#34d399; background:rgba(52,211,153,0.14); border:1px solid rgba(52,211,153,0.34); padding:4px 10px; border-radius:999px; }
.rc-dot{ width:7px; height:7px; border-radius:50%; background:#34d399; box-shadow:0 0 8px #34d399; }
.rc-flow{ display:flex; flex-direction:column; gap:10px; margin:16px 0; }
.rc-step{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:13px; background:var(--surface-2); border:1px solid rgba(120,160,220,0.2); box-shadow:none; animation:hvIn .5s var(--ease) both; }
.rc-step:nth-child(2){ animation-delay:.12s; } .rc-step:nth-child(3){ animation-delay:.24s; }
.rc-s-ic{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; font-size:1rem; flex-shrink:0; background:rgba(0,153,255,0.18); }
.rc-step.miss{ opacity:0.72; } .rc-step.miss .rc-s-ic{ background:rgba(148,163,184,0.22); }
.rc-step.book .rc-s-ic{ background:rgba(245,130,31,0.20); }
.rc-s-txt b{ display:block; color:#fff; font-size:0.85rem; } .rc-s-txt span{ color:var(--text-mid); font-size:0.74rem; }
.rc-value{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-radius:13px; background:linear-gradient(140deg,rgba(245,130,31,0.18),rgba(0,153,255,0.12)); border:1px solid rgba(245,130,31,0.32); }
.rc-value span{ color:var(--text-mid); font-size:0.8rem; font-weight:600; } .rc-value b{ color:#fff; font-size:1.3rem; font-weight:900; }

/* ---------- LIT-UP CARDS ---------- */
.stat-card,.cap-item,.step,.offer-card{ position:relative; isolation:isolate; border-radius:16px; transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.stat-card::before,.cap-item::before,.step::before,.offer-card:not(.featured)::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:0; border-radius:inherit; background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%), var(--spot), transparent 60%); transition:opacity .3s var(--ease); }
.stat-card:hover::before,.cap-item:hover::before,.step:hover::before,.offer-card:hover::before{ opacity:1; }
.stat-card:hover,.cap-item:hover,.step:hover,.offer-card:not(.featured):hover{ transform:translateY(-4px); border-color:var(--card-border-hi); box-shadow:var(--card-shadow); }
.why-signal{ transition:border-color .3s var(--ease), transform .3s var(--ease); }
.why-signal:hover{ border-color:rgba(120,170,230,0.34); transform:translateY(-2px); }

/* ---------- CARD SURFACES: lift every panel off the navy page ---------- */
.card,.path-card,.pain-card,.pain,.node,.flow-node,.path-node,
.tool-card,.project-card,.tier-card,.price-card,.solution-card,.industry-card,.value-card,
.deliverable-card,.habit-card,.for-card,.for-item,.stack-item,.prompt-card,.prompt-box,
.timeline-item,.h-tl-item,.promise-item,.faq-item,.discovery-card,.quote-panel,.detail-item,.pstep,
.work-card,.stat-card,.cap-item,.offer-card,.plan-card{ background:var(--surface-1); border-color:rgba(120,160,220,0.22); }

/* ---------- UNIVERSAL cursor glow on every card/box ---------- */
.card,.path-card,.pain-card,.pain,.node,.flow-node,.path-node,.why-signal,
.tool-card,.project-card,.tier-card,.price-card,.solution-card,.industry-card,.value-card,
.deliverable-card,.habit-card,.for-card,.for-item,.stack-item,.prompt-card,.prompt-box,
.timeline-item,.h-tl-item,.promise-item,.faq-item,.discovery-card,.quote-panel,.detail-item,.pstep,
.frankie-list li{ position:relative; isolation:isolate; transition:box-shadow .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); }
.card::before,.path-card::before,.pain-card::before,.pain::before,.node::before,.flow-node::before,.path-node::before,.why-signal::before,
.tool-card::before,.project-card::before,.tier-card::before,.price-card::before,.solution-card::before,.industry-card::before,.value-card::before,
.deliverable-card::before,.habit-card::before,.for-card::before,.for-item::before,.stack-item::before,.prompt-card::before,.prompt-box::before,
.timeline-item::before,.h-tl-item::before,.promise-item::before,.faq-item::before,.discovery-card::before,.quote-panel::before,.detail-item::before,.pstep::before,
.frankie-list li::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:0; border-radius:inherit; background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%), rgba(74,184,255,0.26), transparent 62%); transition:opacity .3s var(--ease); pointer-events:none; }
.card:hover::before,.path-card:hover::before,.pain-card:hover::before,.pain:hover::before,.node:hover::before,.flow-node:hover::before,.path-node:hover::before,.why-signal:hover::before,
.tool-card:hover::before,.project-card:hover::before,.tier-card:hover::before,.price-card:hover::before,.solution-card:hover::before,.industry-card:hover::before,.value-card:hover::before,
.deliverable-card:hover::before,.habit-card:hover::before,.for-card:hover::before,.for-item:hover::before,.stack-item:hover::before,.prompt-card:hover::before,.prompt-box:hover::before,
.timeline-item:hover::before,.h-tl-item:hover::before,.promise-item:hover::before,.faq-item:hover::before,.discovery-card:hover::before,.quote-panel:hover::before,.detail-item:hover::before,.pstep:hover::before,
.frankie-list li:hover::before{ opacity:1; }
/* visible hover: igniting ring + soft blue glow shadow on every box */
.card:hover,.path-card:hover,.pain-card:hover,.pain:hover,.node:hover,.flow-node:hover,.path-node:hover,.why-signal:hover,
.tool-card:hover,.project-card:hover,.tier-card:hover,.price-card:hover,.solution-card:hover,.industry-card:hover,.value-card:hover,
.deliverable-card:hover,.habit-card:hover,.for-card:hover,.for-item:hover,.stack-item:hover,.prompt-card:hover,.prompt-box:hover,
.timeline-item:hover,.h-tl-item:hover,.promise-item:hover,.faq-item:hover,.discovery-card:hover,.quote-panel:hover,.detail-item:hover,.pstep:hover,
.plan-card:hover,.frankie-list li:hover{ box-shadow:0 0 0 1px rgba(74,184,255,0.45), 0 16px 40px rgba(0,0,0,0.45) !important; border-color:var(--card-border-hi) !important; }
.why-signal::before{ background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%), rgba(74,184,255,0.30), transparent 62%); }
.why-signal:hover{ box-shadow:0 0 0 1px rgba(74,184,255,0.45), 0 16px 40px rgba(74,184,255,0.2) !important; }
.plan-card::after{ background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%), rgba(74,184,255,0.16), transparent 60%) !important; }
.plan-card:hover::after{ opacity:1 !important; }

/* ai-work cards get the lit-up hover */
.tool-card, .project-card { transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.tool-card:hover, .project-card:hover { transform:translateY(-4px); border-color:var(--card-border-hi); box-shadow:var(--card-shadow); }

/* ---------- accent text tuned for navy ----------
   These were darkened hex values chosen for light backgrounds. On navy they
   fall to 2.9-3.7:1, so they move to the bright end of the same hues. */
.tag.orange,.chip,.rd.coming{ color:var(--orange-hi) !important; }
.tag.blue{ color:var(--glow) !important; }
.rd.built{ color:#34d399 !important; }

/* ---------- CTA legibility ----------
   White on brand orange is 2.59:1 and white on brand blue is 3.0:1, both under
   AA. The homepage already sets near-black on orange (.btn-primary, 7.3:1);
   this applies that same treatment to every orange and blue CTA site-wide. */
.btn-primary,.nav-cta-btn,.nav-cta,.cta-btn,.hero-btn.primary,.jeff-cta,.book-btn,
.booking-cta,.submit-btn,.print-btn,.cta,.topnav a.cta,.pc-btn.pri,
a.btn.btn-blue,.btn-blue,
.plan-card.featured .plan-tag,          /* only the featured tag is orange */
.playbook-page .hero-btn,.hero-btn:not(.outline),
.price-badge,.price-badge .price,.price-badge .price-sub,
.cm-avatar,
[style*="background:var(--orange)"]{ color:#0B0A06 !important; }
.btn-primary *,.cta-btn *,.hero-btn *,.btn-blue *,.price-badge *{ color:inherit !important; }

/* ---------- STRANDED CONTENT BLOCKS ----------
   This sheet makes .container full-bleed for the header/footer/hero design.
   On interior pages that stranded the body content: blocks carrying their own
   narrow max-width hugged the left edge and left a large empty right gutter.
   Restoring a centered measure on .section keeps each heading aligned with the
   content under it. The homepage has no .section wrapper and stays full-bleed. */
.section .container,.page-hero .container,
.blog-hero .container,.article-hero .container,.article .container{
  max-width:1240px; margin-left:auto; margin-right:auto; }

/* ai-work toolkit: six cards cannot fit one row inside the 1240 measure, so on
   wide screens the card row alone breaks out past the container while its
   heading stays aligned with every other section on the page. Below 1680px it
   falls back to the container width and auto-fit wraps it normally. */
@media (min-width:1680px){
  .section-wide .tools-grid{
    grid-template-columns:repeat(6,1fr);
    gap:1.15rem;
    --bleed:calc((min(1760px, 100vw - 104px) - 100%) / 2);
    margin-left:calc(-1 * var(--bleed));
    margin-right:calc(-1 * var(--bleed));
  }
}

/* pricing FAQ was a single 760px column, leaving half the row empty. Balanced
   columns rather than a grid, so uneven answer lengths pack tight instead of
   leaving ragged holes where a grid row matches its tallest card. */
/* CSS columns balance by height, not by item count, so five answers of
   very different lengths left a ragged gap under the short column. A grid
   keeps rows aligned; the longest answer takes the full first row. */
.faq-list{ max-width:none; display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.faq-list > .faq-item:first-child{ grid-column:1 / -1; }
@media (max-width:820px){
  .faq-list{ grid-template-columns:1fr; }
  .faq-list > .faq-item:first-child{ grid-column:auto; }
}

/* The plan ladder lost a tier when Jumpstart retired, so a 4-column grid held
   3 cards and left a dead column. auto-fit tracks the real count at any width. */
/* Three plan cards. auto-fit dropped to two columns under about 880px,
   which orphans the third card on its own row and is the state that reads
   as broken. Go straight from three across to one stacked, never two, and
   tighten the cards so three stay legible in the middle range. */
.plan-grid{ grid-template-columns:repeat(3,1fr); }
@media (max-width:1000px){
  .plan-card{ padding:22px 16px; }
  .plan-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:780px){ .plan-grid{ grid-template-columns:1fr; } }

/* data-solutions: the two comparison cards were capped at 700px. */
.pricing-cards{ max-width:none; }
@media (max-width:760px){ .pricing-cards{ grid-template-columns:1fr; max-width:420px; margin-left:auto; margin-right:auto; } }

/* ---------- inline SVG logos ----------
   Wordmarks drawn with navy fills disappear on a navy page. The CSS fill
   property beats the presentation attribute, so recolor them. Logos sitting on
   white plates (client logo slots) keep their navy. */
svg [fill="#0D1B4B"],svg [fill="#0d1b4b"]{ fill:#FFFFFF; }
.logo-slot svg [fill="#0D1B4B"],.logo-slot svg [fill="#0d1b4b"]{ fill:#0D1B4B; }

/* ---------- form controls, tables, code ---------- */
input,textarea,select{ background:var(--surface-2); border-color:rgba(120,160,220,0.26); color:#fff; }
input::placeholder,textarea::placeholder{ color:var(--text-lo); }
table th{ color:#fff; border-color:rgba(120,160,220,0.22); }
table td{ color:var(--text); border-color:rgba(120,160,220,0.18); }
code,pre{ background:rgba(6,14,43,0.7); color:#DCE7FF; border-color:rgba(120,160,220,0.22); }
hr{ border-color:rgba(120,160,220,0.22); }

/* ---------- FOOTER ---------- */
footer{ position:relative; padding:0; background:var(--deep); border-top:none; }
footer::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--glow),var(--orange),transparent); opacity:0.6; }
footer .foot-glow{ position:absolute; top:-1px; left:50%; transform:translateX(-50%); width:60%; height:120px; background:radial-gradient(ellipse at top,rgba(74,184,255,0.14),transparent 70%); pointer-events:none; }
footer .container{ position:relative; max-width:none; padding-left:clamp(20px,4vw,52px); padding-right:clamp(20px,4vw,52px); }
.footer-grid{ padding:56px 0 22px; margin-bottom:0; grid-template-columns:2.4fr 1fr 1fr 1fr; gap:40px; }
/* This sheet loads last, so its 4-column footer was overriding each page's own
   mobile collapse and pushing the grid past the viewport. Restore the collapse. */
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:28px; } }
@media (max-width:480px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-social a:hover{ color:var(--glow) !important; }
.footer-bottom{ padding:16px 0 34px; }

/* ---------- print: keep documents readable on paper ----------
   /playbook-guide exists to be saved as a PDF, so printing must go back to
   light. Resetting the tokens (rather than a handful of selectors) puts every
   surface and text color back on its light-theme value in one place. */
@media print{
  :root{
    --page-bg:#FFFFFF; --deep:#FFFFFF;
    --surface-1:#FFFFFF; --surface-2:#F6F8FC; --surface-warm:#FFF7ED;
    --bg:#FFFFFF; --bg-alt:#F6F8FC; --bone:#F4F1EA; --wash:#FBFAF6;
    --surface:#FFFFFF; --light:#F8FAFC; --blue-tint:#EBF5FF; --chip-bg:#F1F5FB;
    --bone-deep:#EAE5D8; --panel:#FFFFFF; --paper:#FFFFFF; --soft:#f4f6f9;
    --green-wash:#E7F4EE; --soft-blue:#EAF6FF; --soft-orange:#FFF4E8; --soft-teal:#E8F7F5;
    --hero-grad:none;
    --ink-strong:#0D1B4B; --h-color:#0D1B4B; --ink:#1a1a22; --inksoft:#5A6178;
    --text:#4A5568; --text-mid:#4A5568; --text-lo:#6B7280;
    --muted:#5b6470; --gray:#4A5568; --ink-soft:#5A6178; --slate:#4A5568;
    --green:#149B6B; --green-deep:#0E6B49; --teal:#0F766E; --eblue:#0099FF;
    --card-border:#E2E8F0; --border:#E2E8F0; --line:#E4E2DA;
    --card-shadow:none;
  }
  body,.wrap,.page,.page-inner{ background:#FFFFFF !important; color:#4A5568 !important; }
  h1,h2,h3,h4{ color:#0D1B4B !important; }
  nav,footer,#chatWidget,#pc-root,.print-btn{ display:none !important; }
  svg [fill="#0D1B4B"],svg [fill="#0d1b4b"]{ fill:#0D1B4B !important; }
  .hero,.page-hero,#hero{ background:#FFFFFF !important; }
  .hero h1,.page-hero h1{ color:#0D1B4B !important; }
  .hero p,.page-hero p{ color:#4A5568 !important; }
}