:root {
  --navy:      #0D1B2A;
  --navy-mid:  #1A2E45;
  --navy-lt:   #243B55;
  --teal:      #00C9A7;
  --teal-dim:  #00A688;
  --teal-glow: rgba(0,201,167,0.12);
  --amber:     #F5A623;
  --red:       #E8455A;
  --green:     #06D6A0;
  --blue:      #3B82F6;
  --purple:    #8B5CF6;
  --text:      #E8EFF7;
  --text-dim:  #C4D4E4;
  --text-mute: #7A9AB8;
  --border:    rgba(255,255,255,0.07);
  --card:      rgba(255,255,255,0.04);
  --r:         14px;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }

body {
  font-family:'DM Sans',sans-serif;
  background:var(--navy);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
}

/* ── Background ── */
.bg-layer {
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(0,201,167,0.08) 0%, transparent 50%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(59,130,246,0.06) 0%, transparent 50%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(139,92,246,0.03) 0%, transparent 60%);
}
.grid-overlay {
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size:60px 60px;
}

/* ── Header ── */
header {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 48px; height:68px;
  background:rgba(13,27,42,0.85);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}

.logo {
  display:flex; align-items:center; gap:10px;
  font-family:'Syne',sans-serif;
  font-size:22px; font-weight:800;
  letter-spacing:-0.5px;
  text-decoration:none; color:var(--text);
}
.logo-mark {
  display:flex; align-items:center; gap:0;
}
.logo-slash {
  width:28px; height:28px;
  background:var(--teal);
  clip-path:polygon(30% 0%, 100% 0%, 70% 100%, 0% 100%);
  flex-shrink:0;
}
.logo-text-ops { color:var(--text); }
.logo-text-align { color:var(--teal); }

.header-nav { display:flex; align-items:center; gap:8px; }
.nav-link {
  padding:7px 16px; border-radius:8px; font-size:13px;
  font-weight:500; color:var(--text-dim); text-decoration:none;
  transition:all 0.15s; border:none; background:none; cursor:pointer;
  font-family:'DM Sans',sans-serif;
}
.nav-link:hover { color:var(--text); background:rgba(255,255,255,0.05); }
.nav-cta {
  padding:8px 20px; border-radius:8px; font-size:13px;
  font-weight:700; color:var(--navy); background:var(--teal);
  text-decoration:none; transition:all 0.15s;
  font-family:'DM Sans',sans-serif; border:none; cursor:pointer;
}
.nav-cta:hover { background:var(--teal-dim); }

/* ── Hero ── */
.hero {
  position:relative; z-index:1;
  padding:120px 48px 60px;
  max-width:1400px; margin:0 auto;
  display:grid; grid-template-columns:1fr 480px;
  gap:60px; align-items:center;
}

.hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--teal-glow);
  border:1px solid rgba(0,201,167,0.25);
  border-radius:20px; padding:5px 14px;
  font-size:11px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  color:var(--teal); margin-bottom:24px;
}
.eyebrow-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--teal);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.8)} }

.hero-title {
  font-family:'DM Serif Display',serif;
  font-size:clamp(42px, 5vw, 68px);
  line-height:1.05;
  letter-spacing:-1px;
  margin-bottom:24px;
  color:var(--text);
}
.hero-title em {
  font-style:italic;
  color:var(--teal);
}

.hero-body {
  font-size:17px; line-height:1.75;
  color:#D0E2F0;
  max-width:560px;
  margin-bottom:28px;
}

.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 28px; border-radius:10px;
  background:var(--teal); color:var(--navy);
  font-family:'Syne',sans-serif;
  font-size:14px; font-weight:700;
  text-decoration:none; border:none; cursor:pointer;
  transition:all 0.2s;
}
.btn-primary:hover { background:var(--teal-dim); transform:translateY(-1px); box-shadow:0 8px 24px rgba(0,201,167,0.25); }

.btn-secondary {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 28px; border-radius:10px;
  background:transparent; color:var(--text);
  font-family:'Syne',sans-serif;
  font-size:14px; font-weight:700;
  text-decoration:none;
  border:1.5px solid var(--border);
  cursor:pointer; transition:all 0.2s;
}
.btn-secondary:hover { border-color:rgba(255,255,255,0.2); background:rgba(255,255,255,0.04); }

/* Hero score card */
.hero-card {
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
  border-radius:20px;
  padding:28px;
  backdrop-filter:blur(10px);
  position:relative; overflow:hidden;
}
.hero-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--teal), var(--blue), var(--purple));
}
.hc-label {
  font-size:10px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:var(--text-mute); margin-bottom:16px;
}
.hc-org { font-family:'Syne',sans-serif; font-size:16px; font-weight:700; margin-bottom:4px; }
.hc-sub { font-size:11px; color:var(--text-mute); margin-bottom:20px; }

.score-display {
  display:flex; align-items:flex-end; gap:8px;
  margin-bottom:6px;
}
.score-big {
  font-family:'Syne',sans-serif;
  font-size:64px; font-weight:800; line-height:1;
  color:var(--amber);
}
.score-denom { font-size:18px; color:var(--text-mute); padding-bottom:8px; }
.score-level {
  font-size:12px; color:var(--amber); font-weight:600;
  margin-bottom:20px;
}

.mini-domain-bars { display:flex; flex-direction:column; gap:7px; }
.mdb-row { display:flex; align-items:center; gap:10px; }
.mdb-name { font-size:10px; color:var(--text-dim); width:120px; flex-shrink:0; }
.mdb-track { flex:1; height:4px; background:rgba(255,255,255,0.07); border-radius:2px; overflow:hidden; }
.mdb-fill { height:100%; border-radius:2px; }
.mdb-val { font-family:'Syne',sans-serif; font-size:10px; font-weight:700; width:24px; text-align:right; flex-shrink:0; }

.hc-divider { height:1px; background:var(--border); margin:16px 0; }
.hc-risk-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.hc-risk-label { font-size:10px; color:var(--text-mute); }
.hc-risk-val { font-family:'Syne',sans-serif; font-size:11px; font-weight:700; }

/* ── Stats strip ── */
.stats-strip {
  position:relative; z-index:1;
  max-width:1400px; margin:0 auto;
  padding:0 48px 80px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.stat-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); padding:24px;
  text-align:center;
}
.stat-val {
  font-family:'Syne',sans-serif;
  font-size:36px; font-weight:800;
  margin-bottom:4px;
}
.stat-label { font-size:12px; color:var(--text-mute); line-height:1.4; }

/* ── Consultant comparison (S4, decided 2026-09-23) ──
   Moved here from an inline <style> block on 2026-09-24 — this site strips
   inline style="" and <style> tags for CSP (style-src), same reason the
   .u1-.u111 utility classes above exist. The inline version was silently
   dropped by the browser, rendering as unstyled plain text.
   Rebuilt 2026-09-24 (again): the section header now uses the standard
   .section-header/.section-eyebrow/.section-title classes so it's
   left-justified like every other section on the page, instead of a
   one-off centered heading. Only the two-card comparison row below the
   header is centered (same pattern as .workflow-grid's centered .wf-step
   content sitting under a left-aligned header). cc-stat is sized well
   below .section-title's so the header always reads as the dominant line,
   at every viewport width — it was overpowering the (mobile-clamped)
   header before.
   Sep 24, third pass: the card row previously had its own max-width:760px,
   which floated it as a narrower island misaligned with the full-width
   .stats-strip row above and .module-grid below (both max-width:1400,
   same 48px section padding). Dropped the cap so the row's outer edges
   line up with those grids. Content inside each card is now centered
   (matching .stat-card's own text-align:center) instead of left, since a
   left-aligned short block of text in a much wider card reads as stranded
   whitespace, not a design choice. */
.consult-compare-cards {
  display:grid; grid-template-columns:1fr auto 1fr; gap:20px;
  align-items:stretch; margin-bottom:24px;
}
.cc-card {
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08);
  border-radius:16px; padding:28px 24px; text-align:center;
}
.cc-card.cc-us { background:rgba(0,201,167,0.06); border-color:rgba(0,201,167,0.3); }
.cc-label {
  font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  color:var(--text-mute); margin-bottom:16px;
}
.cc-card.cc-us .cc-label { color:var(--teal); }
.cc-stat {
  font-family:'Syne',sans-serif; font-weight:700; font-size:clamp(18px,3.5vw,22px);
  color:var(--text); margin-bottom:4px;
}
.cc-stat-spaced { margin-top:14px; }
.cc-card.cc-us .cc-stat { color:var(--teal); }
.cc-stat-sub { font-size:13px; color:var(--text-mute); }
.cc-vs {
  display:flex; align-items:center; justify-content:center;
  font-family:'Syne',sans-serif; font-weight:700; font-size:13px; color:#4A6580;
}
.consult-compare-sub {
  font-size:15px; color:var(--text-mute); line-height:1.7;
  max-width:640px; margin:0 auto; text-align:center;
}
@media(max-width:640px) {
  .consult-compare-cards { grid-template-columns:1fr; }
  .cc-vs { padding:4px 0; }
}

/* ── Section ── */
.section {
  position:relative; z-index:1;
  max-width:1400px; margin:0 auto;
  padding:0 48px 80px;
}
.section-header { margin-bottom:40px; }
.section-eyebrow {
  font-size:10px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:var(--teal); margin-bottom:8px;
}
.section-title {
  font-family:'DM Serif Display',serif;
  font-size:36px; color:var(--text); margin-bottom:10px;
}
.section-sub {
  font-size:14px; color:var(--text-dim);
  line-height:1.7; max-width:600px;
}

/* ── Module grid ── */
.module-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.module-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:28px;
  text-decoration:none;
  color:var(--text);
  display:block;
  transition:all 0.2s;
  position:relative;
  overflow:hidden;
  cursor:pointer;
}
.module-card::after {
  content:'';
  position:absolute; top:0; left:0; right:0; height:3px;
  opacity:0; transition:opacity 0.2s;
}
.module-card:hover {
  background:rgba(255,255,255,0.06);
  border-color:rgba(255,255,255,0.12);
  transform:translateY(-2px);
  box-shadow:0 12px 40px rgba(0,0,0,0.3);
}
.module-card:hover::after { opacity:1; }

.module-card.teal::after    { background:var(--teal); }
.module-card.amber::after   { background:var(--amber); }
.module-card.blue::after    { background:var(--blue); }
.module-card.purple::after  { background:var(--purple); }
.module-card.red::after     { background:var(--red); }
.module-card.green::after   { background:var(--green); }
.module-card.pink::after    { background:#EC4899; }

.module-icon {
  font-size:32px; margin-bottom:16px;
  display:block;
}
.module-tag {
  display:inline-block;
  font-size:9px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  padding:3px 9px; border-radius:4px;
  margin-bottom:12px;
}
.module-name {
  font-family:'Syne',sans-serif;
  font-size:17px; font-weight:700;
  margin-bottom:8px; line-height:1.2;
}
.module-desc {
  font-size:12px; color:var(--text-dim);
  line-height:1.6; margin-bottom:16px;
}
.module-features { display:flex; flex-wrap:wrap; gap:5px; }
.module-feature {
  font-size:9px; color:var(--text-mute);
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
  border-radius:4px; padding:2px 7px;
}
.module-arrow {
  position:absolute; bottom:24px; right:24px;
  font-size:18px; color:var(--text-mute);
  transition:all 0.2s;
}
.module-card:hover .module-arrow {
  color:var(--teal);
  transform:translate(2px,-2px);
}

/* ── Workflow section ── */
.workflow-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:0; position:relative;
}
.workflow-grid::before {
  content:'';
  position:absolute; top:32px; left:12.5%; right:12.5%;
  height:1px; background:linear-gradient(90deg,var(--teal),var(--blue),var(--purple),var(--amber));
  opacity:0.3;
}
.wf-step { padding:0 16px; text-align:center; }
.wf-num {
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Syne',sans-serif; font-size:20px; font-weight:800;
  margin:0 auto 16px;
  border:2px solid;
  position:relative; z-index:1;
}
.wf-title { font-family:'Syne',sans-serif; font-size:13px; font-weight:700; margin-bottom:6px; }
.wf-desc { font-size:11px; color:var(--text-mute); line-height:1.5; }

/* ── Risk strip ── */
.risk-categories {
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
}
.risk-cat {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); padding:18px;
  border-left:3px solid;
}
.rc-icon { font-size:20px; margin-bottom:8px; }
.rc-name { font-family:'Syne',sans-serif; font-size:12px; font-weight:700; margin-bottom:4px; }
.rc-desc { font-size:10px; color:var(--text-mute); line-height:1.4; }

/* ── Persona strip ── */
.persona-row { display:flex; gap:10px; flex-wrap:wrap; }
.persona-chip {
  display:flex; align-items:center; gap:8px;
  background:var(--card); border:1px solid var(--border);
  border-radius:10px; padding:12px 16px;
  flex:1; min-width:140px;
}
.persona-icon { font-size:20px; }
.persona-info { }
.persona-title { font-family:'Syne',sans-serif; font-size:12px; font-weight:700; }
.persona-role { font-size:10px; color:var(--text-mute); }

/* ── CTA section ── */
.cta-section {
  position:relative; z-index:1;
  max-width:1400px; margin:0 auto;
  padding:0 48px 40px;
}
.cta-card {
  background:linear-gradient(135deg, var(--navy-mid) 0%, var(--navy-lt) 100%);
  border:1px solid var(--border);
  border-radius:24px; padding:64px;
  text-align:center; position:relative; overflow:hidden;
}
.cta-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--teal), var(--blue), var(--purple));
}
.cta-eyebrow {
  font-size:10px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:var(--teal); margin-bottom:16px;
}
.cta-title {
  font-family:'DM Serif Display',serif;
  font-size:42px; line-height:1.1;
  margin-bottom:16px;
}
.cta-title em { font-style:italic; color:var(--teal); }
.cta-body { font-size:15px; color:var(--text-dim); line-height:1.7; max-width:520px; margin:0 auto 36px; }
.cta-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ── Footer ── */
footer {
  position:relative; z-index:1;
  border-top:1px solid var(--border);
  padding:32px 48px;
  display:flex; align-items:center; justify-content:space-between;
}
.footer-logo { font-family:'Syne',sans-serif; font-size:16px; font-weight:700; }
.footer-logo span { color:var(--teal); }
.footer-brand { display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
.footer-tagline {
  font-family:'Syne',sans-serif; font-size:10px; font-weight:700;
  letter-spacing:1.2px; text-transform:uppercase; color:var(--text-mute);
  margin-top:4px;
}
.footer-subline { font-size:10px; color:var(--text-mute); opacity:0.75; }
.footer-meta { font-size:11px; color:var(--text-mute); }
.footer-itomac { font-size:11px; color:var(--text-mute); }
.footer-itomac span { color:var(--teal); }

/* ── Animations ── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}
.fade-up { animation:fadeUp 0.7s ease both; }
.fade-up-1 { animation-delay:0.1s; }
.fade-up-2 { animation-delay:0.2s; }
.fade-up-3 { animation-delay:0.3s; }
.fade-up-4 { animation-delay:0.4s; }

/* ── Responsive ── */
@media(max-width:1200px) {
  .hero { grid-template-columns:1fr; gap:40px; }
  .hero-card { max-width:500px; }
  .module-grid { grid-template-columns:repeat(2,1fr); }
  .stats-strip { grid-template-columns:repeat(2,1fr); }
  .workflow-grid { grid-template-columns:repeat(2,1fr); gap:24px; }
  .workflow-grid::before { display:none; }
  .risk-categories { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:768px) {
  header { padding:0 20px; }
  .hero { padding:120px 20px 60px; }
  .section { padding:0 20px 60px; }
  .stats-strip { padding:0 20px 60px; grid-template-columns:1fr 1fr; }
  .module-grid { grid-template-columns:1fr; }
  .cta-section { padding:0 20px 80px; }
  .cta-card { padding:40px 24px; }
  footer { padding:24px 20px; flex-direction:column; gap:8px; text-align:center; }
  .footer-brand { align-items:center; }
  .header-nav { display:none; }
}

/* ── Hero carousel ── */
.hero-carousel {
  position:relative;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
  border-radius:20px;
  overflow:hidden;
  backdrop-filter:blur(10px);
}
.hero-carousel::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px; z-index:2;
  background:linear-gradient(90deg, var(--teal), var(--blue), var(--purple));
}
.carousel-slides {
  position:relative;
  min-height:420px;
}
.carousel-slide {
  position:absolute; inset:0;
  opacity:0; transform:translateY(8px);
  transition:opacity 0.5s ease, transform 0.5s ease;
  pointer-events:none;
  padding:28px;
}
.carousel-slide.active {
  opacity:1; transform:translateY(0);
  pointer-events:auto;
}
.cs-eyebrow {
  font-size:10px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; margin-bottom:16px;
  display:flex; align-items:center; gap:6px;
}
.cs-pain {
  font-family:'DM Serif Display',serif;
  font-size:18px; line-height:1.35;
  color:var(--text); margin-bottom:6px;
  font-style:italic;
}
.cs-solve {
  font-size:13px; color:#C4D4E4;
  margin-bottom:20px; line-height:1.5;
}
.cs-visual {
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border);
  border-radius:12px; padding:16px;
}
.cs-vis-label {
  font-size:9px; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; color:#7A9AB8;
  margin-bottom:12px;
}

/* perception gap visual */
.pg-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.pg-label { font-size:10px; color:#C4D4E4; width:90px; flex-shrink:0; }
.pg-bar-wrap { flex:1; height:6px; background:rgba(255,255,255,0.06); border-radius:3px; overflow:hidden; }
.pg-bar { height:100%; border-radius:3px; }
.pg-val { font-size:10px; font-weight:700; width:28px; text-align:right; flex-shrink:0; }

/* risk money visual */
.risk-money-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.rmg-item { background:rgba(255,255,255,0.04); border-radius:8px; padding:10px 12px; }
.rmg-cat { font-size:9px; color:#9AB5CC; margin-bottom:4px; }
.rmg-val { font-family:'Syne',sans-serif; font-size:14px; font-weight:800; }

/* compliance bar visual */
.comp-bar-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.comp-name { font-size:10px; color:var(--text-dim); width:80px; flex-shrink:0; }
.comp-track { flex:1; height:6px; background:rgba(255,255,255,0.06); border-radius:3px; overflow:hidden; }
.comp-fill { height:100%; border-radius:3px; }
.comp-pct { font-size:10px; font-weight:700; width:30px; text-align:right; }
.comp-status { font-size:9px; font-weight:700; padding:2px 6px; border-radius:4px; }

/* workforce visual */
.wf-stat-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.wf-stat { text-align:center; background:rgba(255,255,255,0.04); border-radius:8px; padding:10px; }
.wf-stat-val { font-family:'Syne',sans-serif; font-size:18px; font-weight:800; line-height:1; margin-bottom:2px; }
.wf-stat-label { font-size:9px; color:#9AB5CC; }

/* process broken visual */
.proc-step { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.proc-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.proc-name { font-size:11px; flex:1; color:#C4D4E4; }
.proc-score { font-size:10px; font-weight:700; }

/* carousel nav */
.carousel-nav {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px;
  border-top:1px solid var(--border);
}
.carousel-dots { display:flex; gap:6px; align-items:center; }
.cdot {
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,0.2);
  cursor:pointer; transition:all 0.2s; border:none;
  padding:0; flex-shrink:0;
}
.cdot.active { background:var(--teal); width:20px; border-radius:3px; }
.carousel-btns { display:flex; gap:6px; }
.carousel-btn {
  width:28px; height:28px; border-radius:6px;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--border);
  color:var(--text-dim); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; transition:all 0.15s;
}
.carousel-btn:hover { background:rgba(255,255,255,0.1); color:var(--text); }
.carousel-slide-label { font-size:10px; color:var(--text-mute); }

/* ── The Gap section ── */
.gap-section {
  position:relative; z-index:1;
  max-width:1400px; margin:0 auto;
  padding:0 48px 80px;
}
.gap-grid {
  display:grid; grid-template-columns:1fr 60px 1fr;
  gap:0; align-items:stretch;
}
.gap-col-header {
  font-size:10px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; padding:12px 0;
  margin-bottom:16px; border-bottom:1px solid var(--border);
}
.gap-item {
  padding:14px 16px; border-radius:10px; margin-bottom:10px;
  font-size:13px; line-height:1.5;
}
.gap-item-it {
  background:rgba(255,255,255,0.04); color:var(--text-dim);
  border:1px solid var(--border);
}
.gap-item-biz {
  border:1px solid rgba(232,69,90,0.2);
  background:rgba(232,69,90,0.06);
  color:var(--text-dim);
}
.gap-connector-col {
  display:flex; flex-direction:column; justify-content:flex-start;
  align-items:center; padding-top:56px; gap:54px;
}
.gap-arrow {
  font-size:18px; color:var(--text-mute);
  opacity:0.5;
}
.gap-resolve {
  margin-top:24px; padding:20px 24px;
  background:var(--teal-glow); border:1px solid rgba(0,201,167,0.25);
  border-radius:12px;
  grid-column:1/-1;
}

/* ── What Changes section ── */
.changes-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.change-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); padding:28px;
  position:relative; overflow:hidden;
  transition:all 0.2s;
}
.change-card:hover {
  background:rgba(255,255,255,0.06);
  border-color:rgba(255,255,255,0.12);
  transform:translateY(-2px);
}
.change-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
}
.change-card.teal::before  { background:var(--teal); }
.change-card.amber::before { background:var(--amber); }
.change-card.red::before   { background:var(--red); }
.change-card.blue::before  { background:var(--blue); }
.change-card.purple::before{ background:var(--purple); }
.change-card.green::before { background:var(--green); }
.change-before {
  font-size:12px; color:var(--text-mute); margin-bottom:12px;
  font-style:italic; line-height:1.5;
  padding-left:12px; border-left:2px solid rgba(255,255,255,0.1);
}
.change-arrow-row {
  display:flex; align-items:center; gap:8px; margin-bottom:12px;
}
.change-divider {
  flex:1; height:1px; background:var(--border);
}
.change-arrow-icon { font-size:14px; color:var(--teal); }
.change-after {
  font-family:'Syne',sans-serif; font-size:15px; font-weight:700;
  color:var(--text); margin-bottom:8px; line-height:1.3;
}
.change-proof {
  font-size:11px; color:var(--text-mute); line-height:1.5;
}

@media(max-width:1200px) { .changes-grid { grid-template-columns:repeat(2,1fr); } .gap-grid { grid-template-columns:1fr; } .gap-connector-col { display:none; } }

/* ── Utility classes generated from former inline style="" attributes (CSP style-src fix) ── */
.u1 { height:40px;width:auto;display:block; }
.u2 { margin-top:0; }
.u3 { border-color:rgba(0,201,167,0.4);color:var(--teal); }
.u4 { color:var(--amber); }
.u5 { width:72.4%;background:#00C9A7; }
.u6 { color:#00C9A7; }
.u7 { width:53.6%;background:#F5A623; }
.u8 { color:#F5A623; }
.u9 { font-size:10px;color:var(--red);font-weight:700;margin-top:10px;padding:6px 10px;background:rgba(232,69,90,0.1);border-radius:6px; }
.u10 { color:var(--red); }
.u11 { color:#E8455A; }
.u12 { font-size:10px;color:var(--text-mute);margin-top:10px;text-align:right; }
.u13 { color:var(--blue); }
.u14 { width:42%;background:#E8455A; }
.u15 { background:rgba(232,69,90,0.15);color:#E8455A; }
.u16 { width:38%;background:#E8455A; }
.u17 { width:44%;background:#F5A623; }
.u18 { background:rgba(245,166,35,0.15);color:#F5A623; }
.u19 { width:52%;background:#F5A623; }
.u20 { width:58%;background:#F5A623; }
.u21 { color:var(--green); }
.u22 { font-size:10px;color:var(--amber);margin-top:10px;padding:6px 10px;background:rgba(245,166,35,0.1);border-radius:6px; }
.u23 { background:#E8455A; }
.u24 { background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.15); }
.u25 { color:#7A9AB8; }
.u26 { background:#F5A623; }
.u27 { font-size:10px;color:var(--red);margin-top:8px;padding:6px 10px;background:rgba(232,69,90,0.08);border-radius:6px; }
.u28 { color:var(--teal); }
.u29 { display:flex;align-items:flex-end;justify-content:space-between;gap:10px;height:120px;margin:12px 0 6px; }
.u30 { flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%; }
.u31 { font-family:'Syne',sans-serif;font-size:12px;font-weight:700;color:#8BA4BD; }
.u32 { width:100%;height:70px;border-radius:4px 4px 0 0;background:rgba(139,164,189,0.25);border:1px solid rgba(139,164,189,0.3); }
.u33 { font-family:'Syne',sans-serif;font-size:12px;font-weight:700;color:#6C8EF5; }
.u34 { width:100%;height:76px;border-radius:4px 4px 0 0;background:rgba(108,142,245,0.35);border:1px solid rgba(108,142,245,0.4); }
.u35 { font-family:'Syne',sans-serif;font-size:12px;font-weight:700;color:#E8455A; }
.u36 { width:100%;height:48px;border-radius:4px 4px 0 0;background:rgba(232,69,90,0.35);border:1px solid rgba(232,69,90,0.5); }
.u37 { font-family:'Syne',sans-serif;font-size:12px;font-weight:700;color:#F5A623; }
.u38 { width:100%;height:42px;border-radius:4px 4px 0 0;background:rgba(245,166,35,0.3);border:1px solid rgba(245,166,35,0.4); }
.u39 { border-top:1px solid rgba(255,255,255,0.1);margin-bottom:8px; }
.u40 { display:flex;justify-content:space-between;gap:10px; }
.u41 { flex:1;text-align:center;font-size:9px;color:var(--text-mute);line-height:1.3; }
.u42 { flex:1;text-align:center;font-size:9px;color:#6C8EF5;line-height:1.3; }
.u43 { flex:1;text-align:center;font-size:9px;color:#E8455A;line-height:1.3; }
.u44 { flex:1;text-align:center;font-size:9px;color:#F5A623;line-height:1.3; }
.u45 { font-size:10px;color:var(--text-mute);margin-top:10px;padding:6px 10px;background:rgba(232,69,90,0.07);border-radius:6px;border:1px solid rgba(232,69,90,0.15); }
.u46 { display:flex;align-items:center;gap:8px; }
.u47 { font-size:10px;color:var(--text-dim);width:130px;flex-shrink:0; }
.u48 { flex:1;height:6px;background:rgba(255,255,255,0.08);border-radius:3px;overflow:hidden; }
.u49 { width:36%;height:100%;background:#E8455A;border-radius:3px; }
.u50 { font-size:10px;font-weight:700;color:#E8455A;width:24px;text-align:right; }
.u51 { width:50%;height:100%;background:#F5A623;border-radius:3px; }
.u52 { font-size:10px;font-weight:700;color:#F5A623;width:24px;text-align:right; }
.u53 { width:28%;height:100%;background:#E8455A;border-radius:3px; }
.u54 { width:44%;height:100%;background:#F5A623;border-radius:3px; }
.u55 { width:20%;height:100%;background:#E8455A;border-radius:3px; }
.u56 { font-size:10px;color:var(--red);font-weight:700;margin-top:12px;padding:6px 10px;background:rgba(232,69,90,0.08);border-radius:6px; }
.u57 { display:block;margin-top:4px;font-size:10px;color:var(--text-mute);font-style:italic; }
.u58 { color:var(--purple); }
.u59 { text-align:center;margin-top:24px; }
.u60 { display:inline-flex; }
.u61 { border-color:var(--teal);color:var(--teal);background:rgba(0,201,167,0.08); }
.u62 { border-color:var(--blue);color:var(--blue);background:rgba(59,130,246,0.08); }
.u63 { border-color:var(--purple);color:var(--purple);background:rgba(139,92,246,0.08); }
.u64 { border-color:var(--amber);color:var(--amber);background:rgba(245,166,35,0.08); }
.u65 { border-left-color:#F5A623; }
.u66 { border-left-color:#3B82F6; }
.u67 { border-left-color:#EC4899; }
.u68 { border-left-color:#E8455A; }
.u69 { border-left-color:#8B5CF6; }
.u70 { border-left-color:#06D6A0; }
.u71 { border-left-color:#FFD166; }
.u72 { border-left-color:#F97316; }
.u73 { border-left-color:#00C9A7; }
.u74 { display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:860px;margin:0 auto 40px; }
.u75 { background:var(--navy-mid);border:1px solid rgba(0,201,167,0.35);border-radius:20px;padding:36px;position:relative;overflow:hidden;display:flex;flex-direction:column; }
.u76 { position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--teal),var(--blue)); }
.u77 { display:inline-block;background:var(--teal);color:var(--navy);font-family:'Syne',sans-serif;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:4px 12px;border-radius:20px;margin-bottom:20px; }
.u78 { font-family:'Syne',sans-serif;font-size:15px;font-weight:700;color:var(--text);margin-bottom:8px; }
.u79 { font-family:'DM Serif Display',serif;font-size:48px;color:var(--teal);line-height:1;margin-bottom:4px; }
.u80 { font-size:12px;color:var(--text-mute);margin-bottom:6px; }
.u81 { display:inline-block;font-size:11px;color:var(--amber);background:rgba(245,166,35,0.1);border:1px solid rgba(245,166,35,0.2);border-radius:6px;padding:3px 10px;margin-bottom:24px; }
.u82 { display:flex;flex-direction:column;gap:10px;margin-bottom:28px;flex:1; }
.u83 { display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--text-dim); }
.u84 { color:var(--teal);font-weight:700;flex-shrink:0; }
.u85 { display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border-radius:10px;background:var(--teal);color:var(--navy);font-family:'Syne',sans-serif;font-size:14px;font-weight:700;text-decoration:none;transition:all 0.2s; }
.u86 { background:var(--navy-mid);border:1px solid rgba(245,166,35,0.35);border-radius:20px;padding:36px;position:relative;overflow:hidden;display:flex;flex-direction:column; }
.u87 { position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--amber),var(--purple)); }
.u88 { display:inline-block;background:rgba(245,166,35,0.15);color:var(--amber);font-family:'Syne',sans-serif;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:4px 12px;border-radius:20px;margin-bottom:20px;border:1px solid rgba(245,166,35,0.25); }
.u89 { font-family:'Syne',sans-serif;font-size:19px;font-weight:700;color:var(--text);margin-bottom:10px;line-height:1.3; }
.u90 { font-size:13px;color:var(--text-dim);line-height:1.6;margin-bottom:24px; }
.u91 { display:flex;flex-direction:column;gap:14px;margin-bottom:28px;flex:1; }
.u92 { display:flex;align-items:flex-start;gap:10px; }
.u93 { color:var(--amber);font-weight:700;flex-shrink:0; }
.u94 { font-size:13px;font-weight:700;color:var(--text);margin-bottom:2px; }
.u95 { font-size:12px;color:var(--text-mute);line-height:1.5; }
.u96 { display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border-radius:10px;background:rgba(245,166,35,0.12);color:var(--amber);font-family:'Syne',sans-serif;font-size:14px;font-weight:700;text-decoration:none;border:1.5px solid rgba(245,166,35,0.35);transition:all 0.2s; }
.u97 { max-width:860px;margin:0 auto;text-align:center; }
.u98 { font-size:13px;color:var(--text-mute);line-height:1.7; }
.u99 { position:relative;z-index:1;max-width:1400px;margin:0 auto;padding:0 48px 60px; }
.u100 { background:linear-gradient(90deg,rgba(0,201,167,0.08) 0%,rgba(59,130,246,0.06) 100%);border:1px solid rgba(0,201,167,0.2);border-radius:16px;padding:28px 36px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap; }
.u101 { font-family:'Syne',sans-serif;font-size:18px;font-weight:700;color:var(--text);margin-bottom:6px; }
.u102 { font-size:14px;color:#C4D4E4;line-height:1.5; }
.u103 { display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:10px;background:var(--teal);color:var(--navy);font-family:'Syne',sans-serif;font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap;transition:all 0.2s; }
.u104 { max-width:1400px;margin:0 auto;padding:0 48px 24px; }
.u105 { background:rgba(26,46,69,0.5);border:1px solid rgba(255,255,255,0.09);border-radius:16px;padding:28px 36px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap; }
.u106 { font-family:'Syne',sans-serif;font-size:15px;font-weight:700;color:var(--text);margin-bottom:5px; }
.u107 { font-size:13px;color:var(--text-dim); }
.u108 { display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:9px;background:transparent;color:var(--teal);font-family:'Syne',sans-serif;font-size:13px;font-weight:700;text-decoration:none;border:1px solid rgba(0,201,167,0.35);white-space:nowrap;transition:all .2s; }
.u109 { height:20px;width:auto;opacity:0.7; }
.u110 { display:flex;gap:20px;font-size:11px;margin-top:4px; }
.u111 { color:var(--text-mute);text-decoration:none; }

/* ── Hover states for former onmouseover/onmouseout swaps (CSP script-src fix) ── */
.u85:hover { background:#00A688; }
.u96:hover { background:rgba(245,166,35,0.2); }
.u103:hover { background:#00A688; }
.u108:hover { background:rgba(0,201,167,0.08); }