/* ============================================================
   SMART TEAMS — Design System & Global Styles
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,300;0,6..12,400;0,6..12,600;0,6..12,700;0,6..12,800;0,6..12,900;1,6..12,300;1,6..12,400;1,6..12,600;1,6..12,700;1,6..12,800&display=swap');

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --navy:        #0B2040;
  --navy-dark:   #081830;
  --teal:        #53ADB6;
  --teal-dark:   #3d8f97;
  --gold:        #E19D3A;
  --light-blue:  #B0E5F3;
  --orange:      #E28434;
  --white:       #FFFFFF;
  --gray-light:  #F7F8FA;
  --gray-mid:    #E0E5EA;
  --gray-text:   #4A5568;
  --body-text:   #2D3A4A;
  --font: 'Avenir', 'Nunito Sans', 'Avenir Next', sans-serif;
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px; --s6:40px;
  --s8:64px; --s10:80px; --s12:96px; --s16:128px;
  --max-w:1200px;
  --radius:6px;
  --nav-h:72px;
}

/* ── Reset ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font);color:var(--body-text);line-height:1.7;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer}

/* ── Typography ─────────────────────────────────────────────── */
h1,h2,h3,h4,h5{font-family:var(--font);font-weight:800;line-height:1.15;
  letter-spacing:-0.02em;color:inherit}
h1{font-size:clamp(2.2rem,5.5vw,3.75rem)}
.hero h1{font-size:clamp(42px,4.5vw,64px)}
h2{font-size:clamp(1.7rem,3.8vw,2.6rem);letter-spacing:-0.015em}
h3{font-size:clamp(1.1rem,2.2vw,1.45rem);font-weight:700}
h4{font-size:1rem;font-weight:700;letter-spacing:0}
p{max-width:68ch}

/* Eyebrow — with teal left-rule accent */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 12px;
}
.eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  flex-shrink: 0;
  border-radius: 1px;
}
.eyebrow--light { color: var(--light-blue); }
.eyebrow--gold  { color: var(--gold); }
/* Brand pill — teal badge used in homepage hero */
.eyebrow--brand{
  background:var(--teal);color:var(--white);
  padding:8px 16px;border-radius:100px;
  font-size:0.72rem;letter-spacing:0.16em;
  /* override the left-rule ::before */
}
.eyebrow--brand::before{display:none}

/* ── Layout helpers ─────────────────────────────────────────── */
.container{width:100%;max-width:var(--max-w);margin-inline:auto;
  padding-inline:clamp(var(--s4),5vw,var(--s8))}

.section     { padding-block: 100px; }
.section--sm { padding-block: var(--s8); }
.section--lg { padding-block: var(--s16); }

.bg-navy     { background:var(--navy);      color:var(--white) }
.bg-navy-dark{ background:var(--navy-dark); color:var(--white) }
.bg-white    { background:var(--white) }

/* bg-gray — dot-grid texture at 0.03 opacity */
.bg-gray {
  background-color: var(--gray-light);
  background-image: radial-gradient(circle, rgba(11,32,64,0.25) 1px, transparent 1px);
  background-size: 22px 22px;
}

.bg-teal   { background:var(--teal); color:var(--white) }
.text-center{text-align:center}
.text-teal  {color:var(--teal)}
.text-gold  {color:var(--gold)}
.text-navy  {color:var(--navy)}
.text-white {color:var(--white)}

/* ── Grid ───────────────────────────────────────────────────── */
.grid    {display:grid;gap:var(--s5)}
.grid-2  {grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3  {grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid-4  {grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid-2-fixed{grid-template-columns:1fr 1fr}

/* Five-reasons grid */
.reasons-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s4)}

/* ── Buttons ────────────────────────────────────────────────── */
.btn{
  display:inline-block;padding:15px 34px;border-radius:100px;
  font-family:var(--font);font-weight:700;font-size:0.88rem;
  letter-spacing:0.05em;text-transform:uppercase;border:2px solid transparent;
  cursor:pointer;white-space:nowrap;
  transition:background 0.2s ease,color 0.2s ease,transform 0.2s ease,box-shadow 0.2s ease;
}
.btn:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 8px 24px rgba(0,0,0,0.18)}
.btn:active{transform:translateY(0) scale(1)}
.btn-teal{background:var(--teal);color:var(--white);border-color:var(--teal)}
.btn-teal:hover{background:var(--teal-dark);border-color:var(--teal-dark)}
.btn-navy{background:var(--navy);color:var(--white);border-color:var(--navy)}
.btn-outline-white{background:transparent;color:var(--white);border-color:rgba(255,255,255,0.6)}
.btn-outline-white:hover{background:rgba(255,255,255,0.1);border-color:var(--white)}
.btn--lg{padding:18px 48px;font-size:1rem}

/* ── Navigation ─────────────────────────────────────────────── */
.site-nav{
  position:sticky;top:0;z-index:200;background:var(--white);
  border-bottom:1px solid var(--gray-mid);
  box-shadow:0 1px 16px rgba(11,32,64,0.07);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:var(--nav-h);max-width:var(--max-w);margin-inline:auto;
  padding-inline:clamp(var(--s4),5vw,var(--s8));
}
.nav-logo img{height:38px;width:auto;display:block;transition:transform 0.2s ease}
.nav-logo img:hover{transform:scale(1.05)}
.nav-links{display:flex;align-items:center;gap:var(--s6)}
.nav-links a:not(.btn){
  position:relative;font-size:0.875rem;font-weight:600;color:var(--navy);
  padding-bottom:3px;transition:color 0.2s ease;
}
.nav-links a:not(.btn)::after{
  content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;
  background:var(--teal);transform:scaleX(0);transform-origin:left center;
  transition:transform 0.25s ease;
}
.nav-links a:not(.btn):hover{color:var(--teal)}
.nav-links a:not(.btn):hover::after,
.nav-links a.active:not(.btn)::after{transform:scaleX(1)}
.nav-links a.active:not(.btn){color:var(--teal)}
.nav-cta{margin-left:var(--s3)}
.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  background:none;border:none;padding:var(--s2);
}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--navy);
  border-radius:2px;transition:transform 0.3s ease,opacity 0.3s ease}
.mobile-nav{
  display:none;flex-direction:column;background:var(--white);
  border-top:1px solid var(--gray-mid);
  padding:var(--s4) clamp(var(--s4),5vw,var(--s8)) var(--s5);gap:0;
}
.mobile-nav.open{display:flex}
.mobile-nav a:not(.btn){
  display:block;padding:14px 0;font-weight:600;font-size:1rem;
  color:var(--navy);border-bottom:1px solid var(--gray-mid);
}
.mobile-nav .btn{margin-top:var(--s4);text-align:center}
.nav-toggle.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* ── Hero ────────────────────────────────────────────────────── */
.hero{
  background:var(--navy);color:var(--white);
  padding-block:clamp(var(--s10),12vw,var(--s16));
  min-height:480px;
  position:relative;overflow:hidden;
  display:flex;align-items:center;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 65% 40%,rgba(83,173,182,0.15) 0%,transparent 65%);
  pointer-events:none;
}
/* Hero split — two-column layout for homepage */
.hero-split{
  display:grid;grid-template-columns:65% 35%;
  align-items:center;gap:0;width:100%;
}
.hero-split .hero-content{
  max-width:100%;overflow:visible;
}
.hero-visual{
  display:flex;align-items:center;justify-content:center;
  opacity:0.15;pointer-events:none;
}
.hero-visual svg{
  width:100%;height:auto;max-width:280px;
}
.hero-content{max-width:780px;position:relative;z-index:1}
.hero--centered{text-align:center}
.hero--centered .hero-content{margin-inline:auto}
.hero h1{margin-bottom:var(--s4)}
.hero-sub{
  font-size:clamp(1.05rem,2.2vw,1.3rem);font-weight:400;line-height:1.65;
  opacity:0.88;max-width:58ch;margin-bottom:var(--s8);
}
.hero--centered .hero-sub{margin-inline:auto}
.hero-actions{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.hero--centered .hero-actions{justify-content:center}
.hero-text-link{
  font-weight:700;font-size:0.9rem;color:var(--light-blue);letter-spacing:0.03em;
  transition:color 0.2s ease;display:inline-flex;align-items:center;gap:6px;
}
.hero-text-link:hover{color:var(--white)}
.hero-text-link::after{content:'→'}

/* ── Section header ─────────────────────────────────────────── */
.section-header{margin-bottom:var(--s8)}
.section-header h2{margin-bottom:var(--s3)}
.section-header .lead{font-size:1.1rem;opacity:0.78}
.section-header--center{text-align:center}
.section-header--center p{margin-inline:auto}

/* ── Cards ───────────────────────────────────────────────────── */
.card{
  background:var(--white);border:1px solid rgba(11,32,64,0.08);
  border-radius:var(--radius);padding:var(--s6);
  transition:transform 0.2s ease,box-shadow 0.2s ease;
}
.card:hover{transform:translateY(-6px);box-shadow:0 12px 40px rgba(11,32,64,0.12)}
.card--navy{background:var(--navy);color:var(--white);border-color:transparent}
.card--teal{background:var(--teal);color:var(--white);border-color:transparent}
.card--teal-top{border-top:4px solid var(--teal)}
.card h3{margin-bottom:var(--s3)}

/* ── Stat callout (full-width 2-4x block) ───────────────────── */
.stat-callout{
  background:var(--navy);
  color:var(--white);
  border-radius:var(--radius);
  padding:clamp(var(--s8),8vw,var(--s16)) var(--s6);
  text-align:center;
  position:relative;
  overflow:hidden;
  margin-bottom:var(--s8);
}
/* subtle teal radial glow */
.stat-callout::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 50%,rgba(83,173,182,0.18) 0%,transparent 60%);
  pointer-events:none;
}
.stat-callout-eyebrow{
  font-size:0.72rem;font-weight:800;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--light-blue);margin-bottom:var(--s3);
  display:inline-flex;align-items:center;gap:10px;
  position:relative;z-index:1;
}
.stat-callout-eyebrow::before{
  content:'';display:block;width:24px;height:2px;
  background:currentColor;border-radius:1px;flex-shrink:0;
}
.stat-callout-big{
  font-size:clamp(64px,12vw,96px);
  font-weight:900;line-height:1;letter-spacing:-0.04em;
  color:var(--white);margin-bottom:var(--s4);
  position:relative;z-index:1;
}
.stat-callout-sub{
  font-size:clamp(1rem,2vw,1.2rem);line-height:1.65;
  opacity:0.85;max-width:52ch;margin-inline:auto;
  position:relative;z-index:1;
}

/* ── Problem card background numbers ───────────────────────── */
.card-bg-num{
  position:absolute;bottom:-20px;right:8px;
  font-size:140px;font-weight:900;line-height:1;
  color:var(--white);opacity:0.06;
  user-select:none;pointer-events:none;
  letter-spacing:-0.05em;
}
/* ensure card--navy is positioned */
.card--navy{position:relative;overflow:hidden}

/* ── Force cards — full-width stacked ────────────────────────── */
.force-cards-wrap{
  display:flex;flex-direction:column;
  gap:var(--s5);margin-bottom:var(--s8);
}
.force-card-full{
  border-radius:var(--radius);
  padding:var(--s8) clamp(var(--s6),6vw,var(--s12));
  position:relative;overflow:hidden;
  background:var(--white);
  border:1px solid rgba(11,32,64,0.08);
  transition:transform 0.2s ease,box-shadow 0.2s ease;
}
.force-card-full:hover{transform:translateY(-6px);box-shadow:0 12px 40px rgba(11,32,64,0.12)}
.force-card-full--navy{border-top:4px solid var(--navy)}
.force-card-full--gold{border-top:4px solid var(--gold)}
.force-card-full h3{
  color:var(--navy);
  font-size:clamp(1.25rem,2.5vw,1.65rem);
  margin-bottom:var(--s3);
}
.force-card-full p{font-size:1rem;line-height:1.72;max-width:72ch}
/* Ghost background number */
.force-card-full-num{
  position:absolute;bottom:-16px;right:24px;
  font-size:clamp(120px,16vw,200px);
  font-weight:900;line-height:1;
  color:transparent;
  -webkit-text-stroke:2px rgba(11,32,64,0.07);
  letter-spacing:-0.05em;
  user-select:none;pointer-events:none;
}
.force-card-full--gold .force-card-full-num{
  -webkit-text-stroke-color:rgba(225,157,58,0.18);
}

/* ── Insight block with quotation mark watermark ────────────── */
.insight-block{
  background:var(--navy);color:var(--white);
  border-radius:var(--radius);padding:var(--s12) var(--s8);
  text-align:center;position:relative;overflow:hidden;
}
.insight-block::before{
  content:'\201C';
  position:absolute;top:-40px;left:32px;
  font-size:320px;font-weight:900;line-height:1;
  color:var(--teal);opacity:0.07;
  pointer-events:none;user-select:none;
}
.insight-block p{
  font-size:clamp(1.1rem,2.4vw,1.4rem);
  max-width:62ch;margin-inline:auto;line-height:1.7;
  position:relative;z-index:1;font-weight:600;
}

/* ── Five reasons ────────────────────────────────────────────── */
.reason-card{
  padding:var(--s5);
  border:1px solid rgba(11,32,64,0.08);
  border-top:3px solid var(--teal);
  border-radius:var(--radius);
  background:var(--white);
  position:relative;overflow:hidden;
  transition:transform 0.2s ease,box-shadow 0.2s ease,border-top-width 0.2s ease;
}
.reason-card:hover{
  transform:translateY(-6px);box-shadow:0 12px 40px rgba(11,32,64,0.12);
  border-top-width:6px;
}
.reason-number{
  font-size:clamp(80px,10vw,120px);
  font-weight:900;
  color:transparent;
  -webkit-text-stroke:2px rgba(11,32,64,0.12);
  line-height:0.9;
  margin-bottom:-8px;
  user-select:none;
  letter-spacing:-0.05em;
}
.reason-card h3{color:var(--navy);margin-bottom:var(--s3);font-size:1.05rem}
.reason-card p{font-size:0.9rem;line-height:1.65}

.reasons-rule{
  width:40%;margin:var(--s8) auto 0;
  height:1px;border:none;background:var(--teal);opacity:0.5;display:block;
}

/* ── Bottom CTA band with radial glow ───────────────────────── */
.cta-band{
  position:relative;overflow:hidden;
  text-align:center;padding-block:var(--s12);
  background:var(--navy);color:var(--white);
}
.cta-band::before{
  content:'';position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:600px;height:600px;
  background:radial-gradient(circle,rgba(83,173,182,0.14) 0%,transparent 70%);
  pointer-events:none;
}
.cta-band h2{
  font-size:clamp(2rem,4.5vw,2.75rem);
  margin-bottom:var(--s6);
  position:relative;z-index:1;
  max-width:820px;margin-inline:auto;
}
.cta-band .btn{position:relative;z-index:1}

/* ── Gold closing line ──────────────────────────────────────── */
.gold-closing{
  font-style:italic;font-weight:700;
  font-size:clamp(1rem,2vw,1.15rem);
  color:var(--gold);
  margin-top:var(--s8);
  padding-left:var(--s5);
  border-left:3px solid var(--gold);
  max-width:600px;
  line-height:1.65;
}

/* ── Callout ────────────────────────────────────────────────── */
.callout{
  padding:var(--s5) var(--s8);border-radius:var(--radius);
  font-size:1.1rem;line-height:1.65;
  border:1px solid rgba(11,32,64,0.08);
}
.callout--teal{background:var(--teal);color:var(--white);border-color:transparent}
.callout--navy{background:var(--navy);color:var(--white);border-color:transparent}
.callout--italic{font-style:italic}

/* ── Fit cards ───────────────────────────────────────────────── */
.fit-card{
  border:1px solid rgba(11,32,64,0.08);border-top:4px solid var(--teal);
  border-radius:var(--radius);background:var(--white);padding:var(--s6);
  transition:transform 0.2s ease,box-shadow 0.2s ease;
}
.fit-card:hover{transform:translateY(-6px);box-shadow:0 12px 40px rgba(11,32,64,0.10)}
.fit-card h3{color:var(--navy);margin-bottom:var(--s3);font-size:1.1rem}
.fit-card p{font-size:0.93rem;line-height:1.65}

.closing-cta-block{
  background:var(--navy);color:var(--white);border-radius:var(--radius);
  padding:var(--s8) var(--s8);text-align:center;margin-top:var(--s8);
}
.closing-cta-block p{
  font-size:clamp(1.1rem,2.4vw,1.4rem);font-weight:700;
  max-width:none;margin-bottom:var(--s6);
}

/* ── Framework — Pillar progress nav ────────────────────────── */
.pillar-nav{
  position:sticky;top:var(--nav-h);z-index:100;
  background:var(--white);border-bottom:1px solid var(--gray-mid);
  box-shadow:0 2px 12px rgba(11,32,64,0.05);
}
.pn-inner{
  display:flex;align-items:center;justify-content:center;
  max-width:var(--max-w);margin-inline:auto;
  padding:14px clamp(var(--s4),5vw,var(--s8));
  gap:0;
}
.pn-step{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  cursor:default;position:relative;padding:4px 12px;
  transition:opacity 0.3s ease;
  opacity:0.4;
}
.pn-step.active{opacity:1}
.pn-letter{
  width:36px;height:36px;border-radius:50%;
  border:2px solid var(--gray-mid);
  display:flex;align-items:center;justify-content:center;
  font-size:0.9rem;font-weight:800;color:var(--navy);
  transition:background 0.3s ease,border-color 0.3s ease,color 0.3s ease;
}
.pn-step.active .pn-letter{
  background:var(--teal);border-color:var(--teal);color:var(--white);
}
.pn-name{
  font-size:0.6rem;font-weight:800;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--navy);white-space:nowrap;
}
.pn-step.active .pn-name{color:var(--teal)}
.pn-connector{
  flex:1;height:1px;background:var(--gray-mid);
  align-self:center;min-width:24px;max-width:80px;
}

/* ── Framework — Pillar sections ────────────────────────────── */
.pillar-section{padding-block:100px;overflow:hidden;position:relative}
.pillar-section:nth-of-type(odd){background:var(--white)}
.pillar-section:nth-of-type(even){background:var(--gray-light)}
/* dot grid on even (gray) pillar sections */
.pillar-section:nth-of-type(even){
  background-color:var(--gray-light);
  background-image:radial-gradient(circle,rgba(11,32,64,0.25) 1px,transparent 1px);
  background-size:22px 22px;
}

.pillar-layout{
  display:grid;grid-template-columns:1fr 1.65fr;
  gap:var(--s10);align-items:start;
}

/* Watermark letter — rendered inside right column */
.pillar-col-watermark{
  flex:1;min-height:160px;
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(160px,18vw,280px);
  font-weight:900;line-height:1;letter-spacing:-0.05em;
  color:var(--teal);opacity:0.08;
  user-select:none;pointer-events:none;
}
.pillar-section:nth-of-type(odd) .pillar-col-watermark{color:var(--navy)}

/* Right column flex container */
.pillar-right{
  display:flex;flex-direction:column;
  gap:var(--s5);
}

.pillar-layout{position:relative;z-index:1}

.pillar-name{
  font-size:clamp(1.8rem,3.5vw,2.4rem);color:var(--navy);margin-bottom:var(--s3);
}
.pillar-subhead{
  font-style:italic;font-size:1.05rem;line-height:1.6;
  color:var(--gray-text);margin-bottom:var(--s5);max-width:44ch;
}
.how-label{
  font-size:0.68rem;font-weight:800;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--teal);margin-bottom:var(--s4);
}

/* ── Pillar icon grid (2-col checkmarks) ────────────────────── */
.pillar-icon-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:14px 20px;
}
.pillar-icon-grid li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:0.92rem;line-height:1.5;
}
.check-icon{flex-shrink:0;margin-top:1px}

/* ── Enhanced Why Matters ────────────────────────────────────── */
.why-matters{
  background:var(--navy);color:var(--white);
  border-radius:var(--radius);padding:var(--s6);
  border-left:4px solid var(--teal);
  box-shadow:-4px 0 24px rgba(83,173,182,0.2), 0 4px 24px rgba(11,32,64,0.2);
}
.why-matters .wm-label{
  font-size:0.68rem;font-weight:800;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--teal);margin-bottom:var(--s3);
}
.why-matters p{
  font-style:italic;font-size:1.1rem;line-height:1.7;opacity:0.92;max-width:none;
}

/* ── Pillar dividers (next-letter transitions) ─────────────── */
.pillar-divider{
  text-align:center;padding:0;overflow:hidden;
  background:var(--white);position:relative;line-height:0;
}
.pillar-divider:nth-of-type(even){background:var(--gray-light)}
.pd-next{
  display:block;
  font-size:clamp(80px,14vw,160px);
  font-weight:900;line-height:1;
  color:var(--gray-mid);
  letter-spacing:-0.05em;
  opacity:0.5;
  user-select:none;
}

/* ── Services — Pricing cards ───────────────────────────────── */
.service-cards-timeline{position:relative}
.service-timeline-thread{display:none}

/* ── Horizontal engagement model cards ──────────────────────── */
.service-cards-grid{
  display:flex;flex-direction:column;gap:12px;
}

.service-card{
  border:1px solid rgba(11,32,64,0.08);border-radius:var(--radius);
  background:var(--white);overflow:hidden;
  display:flex;flex-direction:row;
  transition:transform 0.25s ease,box-shadow 0.25s ease;
}
.service-card:hover{
  transform:translateY(-6px);box-shadow:0 12px 40px rgba(11,32,64,0.12);
}

/* Left color band — vertical strip */
.sc-band{
  width:196px;flex-shrink:0;
  padding:28px var(--s4);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  justify-content:flex-start;gap:6px;
  min-height:0;
}
.sc-band--navy{background:var(--navy)}
.sc-band--teal{background:var(--teal)}
.sc-band--gold{background:var(--gold)}

.sc-band::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,0.04) 0px,rgba(255,255,255,0.04) 1px,
    transparent 1px,transparent 10px
  );
  pointer-events:none;
}

/* Not needed in horizontal layout */
.sc-invest-badge{display:none}
.sc-timeline-dot{display:none}

.sc-num{
  font-size:0.62rem;font-weight:800;letter-spacing:0.18em;
  text-transform:uppercase;color:rgba(255,255,255,0.55);
  margin-bottom:8px;position:relative;z-index:1;
}
.sc-band h3{
  color:var(--white);font-size:1.05rem;
  line-height:1.2;position:relative;z-index:1;
}
.sc-descriptor{
  font-size:0.78rem;font-style:italic;
  color:rgba(255,255,255,0.6);position:relative;z-index:1;margin-top:2px;
}

/* Content body — three columns: Best For | What You Get | Investment */
.sc-body{
  flex:1;
  display:grid;grid-template-columns:1fr 1.4fr 1fr;
  padding:0;gap:0;align-items:stretch;
}
.sc-body>div{
  padding:28px var(--s4);
  display:flex;flex-direction:column;
  border-left:1px solid rgba(11,32,64,0.07);
}

.sc-section-label{
  font-size:11px;font-weight:800;letter-spacing:0.15em;
  text-transform:uppercase;color:var(--navy);opacity:0.5;
  margin-bottom:8px;
}
.sc-body p{font-size:0.88rem;line-height:1.6;max-width:none}

.sc-best-for-pill{
  display:inline-block;
  background:rgba(83,173,182,0.12);color:var(--teal);
  font-size:0.65rem;font-weight:800;letter-spacing:0.12em;
  text-transform:uppercase;
  padding:4px 10px;border-radius:100px;
  border:1px solid rgba(83,173,182,0.25);
  margin-bottom:8px;
}

.sc-check-list{display:flex;flex-direction:column;gap:8px}
.sc-check-list li{
  display:flex;align-items:flex-start;gap:8px;
  font-size:0.88rem;line-height:1.5;
}
.sc-check-list .check-icon{flex-shrink:0;margin-top:1px}

/* Investment pushed to bottom of its column */
.sc-invest{margin-top:auto;padding-top:0;border-top:none}
.sc-invest-amount{font-size:1.25rem;font-weight:900;color:var(--teal);line-height:1.2}
.sc-invest-note{font-size:0.78rem;opacity:0.6;margin-top:4px;line-height:1.5}

/* ── Responsive: stack vertically below 860px ────────────────── */
@media(max-width:860px){
  .service-card{flex-direction:column}
  .sc-band{
    width:100%;min-height:0;
    padding:var(--s4);
    flex-direction:row;align-items:center;gap:var(--s3);
    flex-wrap:wrap;
  }
  .sc-num{margin-bottom:0}
  .sc-band h3{font-size:1.1rem}
  .sc-descriptor{display:none}
  .sc-body{
    grid-template-columns:1fr;
    display:flex;flex-direction:column;
  }
  .sc-body>div{
    border-left:none;
    border-top:1px solid rgba(11,32,64,0.07);
    padding:var(--s4);
  }
  .sc-body>div:first-child{border-top:none}
  .sc-invest{margin-top:0}
}

/* ── Pilot stat cards ────────────────────────────────────────── */
.pilot-stat-cards{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--s4);max-width:860px;margin-inline:auto;margin-block:var(--s8);
}
.psc{
  background:var(--navy);color:var(--white);
  border-radius:var(--radius);
  padding:var(--s8) var(--s5);
  text-align:center;
  position:relative;overflow:hidden;
  transition:transform 0.2s ease,box-shadow 0.2s ease;
}
.psc:hover{transform:translateY(-6px);box-shadow:0 12px 40px rgba(11,32,64,0.25)}
/* Teal bottom accent on pilot stat cards */
.psc::after{
  content:'';position:absolute;bottom:0;left:0;right:0;
  height:3px;background:var(--teal);
}
/* Subtle inner glow */
.psc::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 100%,rgba(83,173,182,0.12) 0%,transparent 60%);
  pointer-events:none;
}
.psc-num{
  display:block;
  font-size:clamp(3rem,6vw,4.5rem);
  font-weight:900;line-height:1;
  color:var(--white);letter-spacing:-0.04em;
  margin-bottom:var(--s2);
  position:relative;z-index:1;
}
.psc-unit{
  display:block;
  font-size:0.7rem;font-weight:800;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--teal);
  position:relative;z-index:1;
}

/* ── Training feature cards (3-col) ─────────────────────────── */
.training-feature-cards{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--s5);
  align-items:stretch;
}
.tfc{
  border:1px solid rgba(11,32,64,0.08);
  border-top:4px solid var(--teal);
  border-radius:var(--radius);
  background:var(--white);
  padding:var(--s8) var(--s6);
  display:flex;flex-direction:column;gap:var(--s4);
  box-shadow:0 2px 16px rgba(11,32,64,0.06);
  transition:transform 0.2s ease,box-shadow 0.2s ease;
}
.tfc:hover{transform:translateY(-6px);box-shadow:0 12px 40px rgba(11,32,64,0.12)}

/* Large ghost number at top */
.tfc-num{
  font-size:60px;font-weight:900;line-height:1;
  color:rgba(83,173,182,0.2);
  letter-spacing:-0.04em;
  user-select:none;
}

.tfc h3{
  color:var(--navy);
  font-size:1.375rem;
  margin-bottom:0;
}

/* Bullet list */
.tfc-bullets{
  display:flex;flex-direction:column;gap:12px;
  margin-top:var(--s2);
  flex:1;
}
.tfc-bullets li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:0.92rem;line-height:1.55;
}
.tfc-bullets .check-icon{flex-shrink:0;margin-top:1px}

.feature-icon{
  width:56px;height:56px;background:var(--navy);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:transform 0.2s ease,box-shadow 0.2s ease;
}
.tfc:hover .feature-icon{transform:translateY(-3px);box-shadow:0 8px 20px rgba(11,32,64,0.2)}

/* ── Training stat banner ─────────────────────────────────────── */
.training-stat-band{
  background:var(--navy);
  padding-block:var(--s10);
  position:relative;overflow:hidden;
}
.training-stat-band::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 50%,rgba(83,173,182,0.12) 0%,transparent 65%);
  pointer-events:none;
}
.tsb-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--s8);max-width:860px;margin-inline:auto;
  text-align:center;position:relative;z-index:1;
}
.tsb-item{display:flex;flex-direction:column;align-items:center;gap:4px}
.tsb-num{
  font-size:clamp(2.2rem,4vw,3rem);font-weight:900;line-height:1;
  color:var(--teal);letter-spacing:-0.03em;
}
.tsb-unit{
  font-size:0.68rem;font-weight:800;letter-spacing:0.16em;
  text-transform:uppercase;color:rgba(255,255,255,0.5);
  margin-bottom:4px;
}
.tsb-label{
  font-size:0.88rem;color:rgba(255,255,255,0.65);
  line-height:1.5;max-width:180px;
}

/* ── Delivery cards ──────────────────────────────────────────── */
.delivery-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.delivery-card{
  border-radius:var(--radius);padding:var(--s10) var(--s8);
  position:relative;overflow:hidden;
  transition:transform 0.2s ease,box-shadow 0.2s ease;
}
.delivery-card:hover{transform:translateY(-6px);box-shadow:0 12px 40px rgba(11,32,64,0.16)}
/* Large ghost background number */
.dc-bg-num{
  position:absolute;bottom:-12px;right:20px;
  font-size:clamp(120px,16vw,200px);
  font-weight:900;line-height:1;letter-spacing:-0.05em;
  color:rgba(255,255,255,0.07);
  user-select:none;pointer-events:none;
}
.dc-headline{
  font-size:1rem;font-weight:700;
  color:rgba(255,255,255,0.6);
  margin-bottom:var(--s3);
  line-height:1.4;
  font-style:italic;
  position:relative;z-index:1;
  max-width:none;
}
.delivery-card h3{
  font-size:1.3rem;margin-bottom:var(--s4);
  position:relative;z-index:1;
}
.delivery-card p{
  opacity:0.9;font-size:0.97rem;line-height:1.7;max-width:none;
  position:relative;z-index:1;
}

.delivery-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.delivery-card{border-radius:var(--radius);padding:var(--s8);
  transition:transform 0.2s ease,box-shadow 0.2s ease}
.delivery-card:hover{transform:translateY(-6px);box-shadow:0 12px 40px rgba(11,32,64,0.16)}
.delivery-card h3{margin-bottom:var(--s4);font-size:1.3rem}
.delivery-card p{opacity:0.9;font-size:0.97rem;line-height:1.7;max-width:none}

/* ── Contact page ────────────────────────────────────────────── */
.contact-card{
  max-width:560px;margin-inline:auto;text-align:center;
  background:var(--white);border:1px solid rgba(11,32,64,0.08);
  border-radius:var(--radius);padding:var(--s10) var(--s8);
  box-shadow:0 4px 28px rgba(11,32,64,0.08);
}
.contact-name{font-size:clamp(1.6rem,3.5vw,2.2rem);font-weight:900;
  color:var(--navy);margin-bottom:4px}
.contact-title{font-size:0.8rem;font-weight:700;letter-spacing:0.14em;
  text-transform:uppercase;opacity:0.45;color:var(--navy);margin-bottom:var(--s5)}
.contact-rule{width:48px;height:3px;background:var(--teal);border-radius:2px;
  margin:0 auto var(--s6)}
.contact-detail{display:flex;flex-direction:column;gap:var(--s4)}
.contact-row{
  display:flex;align-items:baseline;justify-content:center;
  gap:var(--s3);font-size:1.05rem;
}
.contact-row-label{
  font-size:0.65rem;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;
  opacity:0.38;color:var(--navy);min-width:52px;text-align:right;
}
.contact-row a{color:var(--teal);font-weight:700;text-decoration:underline;
  text-underline-offset:3px;transition:opacity 0.2s}
.contact-row a:hover{opacity:0.72}
.contact-row .value{font-weight:600;color:var(--navy)}

/* ── Timeline redesign ───────────────────────────────────────── */
.timeline-wrap{max-width:760px;margin-inline:auto}

.timeline{
  position:relative;
  display:flex;flex-direction:column;gap:0;
  list-style:none;
}
/* Teal vertical line — animates height from 0 to 100% */
.timeline::before{
  content:'';
  position:absolute;
  left:199px; /* 172px label col + half of 56px node col */
  top:16px;
  width:2px;
  height:0;
  background:var(--teal);
  transition:height 1.4s ease;
  z-index:0;
}
.timeline.line-drawn::before{
  height:calc(100% - 16px);
}

.tl-item{
  display:grid;
  grid-template-columns:172px 56px 1fr;
  gap:0;
  align-items:flex-start;
  padding-block:30px;
  position:relative;
  /* step animation */
  opacity:0;
  transform:translateY(18px);
  transition:opacity 0.5s ease,transform 0.5s ease;
}
.tl-item.tl-visible{
  opacity:1;
  transform:translateY(0);
}

/* Left: navy pill label, right-aligned toward center line */
.tl-label{
  text-align:right;
  padding-right:var(--s4);
  padding-top:6px; /* align with circle center */
}
.tl-pill{
  display:inline-block;
  background:var(--navy);color:var(--white);
  font-size:0.62rem;font-weight:800;
  letter-spacing:0.13em;text-transform:uppercase;
  padding:5px 11px;border-radius:100px;
  white-space:nowrap;
}

/* Center: teal filled circle with white number */
.tl-node{
  display:flex;justify-content:center;
  padding-top:0;
  position:relative;z-index:1;
}
.tl-circle{
  width:32px;height:32px;
  background:var(--teal);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:0.78rem;font-weight:800;color:var(--white);
  flex-shrink:0;
  box-shadow:0 0 0 5px rgba(83,173,182,0.12);
}

/* Right: content */
.tl-body{padding-left:var(--s5);padding-top:4px}
.tl-body h4{
  color:var(--navy);
  font-size:1.125rem;font-weight:700;
  line-height:1.3;margin-bottom:var(--s2);
}
.tl-body p{
  font-size:0.92rem;color:var(--gray-text);
  line-height:1.65;max-width:none;
}

/* ── Metrics section ─────────────────────────────────────────── */
.metrics-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--s5);
  align-items:stretch;
}
.metric-card{
  background:var(--navy);color:var(--white);
  border-radius:var(--radius);
  padding:var(--s5);
  display:flex;flex-direction:column;align-items:flex-start;
  gap:var(--s4);
  transition:transform 0.2s ease,box-shadow 0.2s ease;
}
.metric-card:hover{transform:translateY(-6px);box-shadow:0 12px 40px rgba(11,32,64,0.25)}
.metric-icon-sq{
  width:48px;height:48px;flex-shrink:0;
  background:var(--teal);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;
}
.metric-num{
  font-size:clamp(3rem,5vw,4rem);
  font-weight:900;line-height:1;
  color:var(--teal);letter-spacing:-0.03em;
}
.metric-rule{
  width:40px;height:2px;
  background:var(--teal);border-radius:1px;
  flex-shrink:0;
}
.metric-desc{
  font-size:0.94rem;font-weight:400;line-height:1.65;
  opacity:0.82;max-width:none;
  margin-top:auto;
}

/* ── Privacy Policy body ─────────────────────────────────────── */
.privacy-body{
  max-width:800px;margin-inline:auto;
}
.privacy-section{
  padding-block:var(--s6);
  border-bottom:1px solid var(--gray-mid);
}
.privacy-section:last-child{border-bottom:none}
.privacy-section h2{
  font-size:1.15rem;color:var(--navy);margin-bottom:var(--s3);
}
.privacy-section p{
  font-size:1rem;line-height:1.8;max-width:none;
}
.privacy-section a{color:var(--teal);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.privacy-section a:hover{opacity:0.75}

/* ── SMS Consent block ───────────────────────────────────────── */
.sms-consent-block{
  max-width:680px;margin-inline:auto;
  background:var(--white);
  border:1px solid var(--gray-mid);
  border-radius:var(--radius);
  padding:var(--s6) var(--s8);
}
.sms-consent-label{
  font-size:0.68rem;font-weight:800;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--teal);
  margin-bottom:var(--s3);
}
.sms-consent-body{
  font-size:0.97rem;line-height:1.7;
  color:var(--body-text);margin-bottom:var(--s5);max-width:none;
}
.sms-consent-form{display:flex;flex-direction:column;gap:var(--s4)}

/* Form fields */
.scf-row{display:grid;gap:var(--s4)}
.scf-row--2col{grid-template-columns:1fr 1fr}
.scf-field{display:flex;flex-direction:column;gap:6px}
.scf-label{
  font-size:0.65rem;font-weight:800;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--navy);
}
.scf-req{color:var(--teal);margin-left:2px}
.scf-input{
  width:100%;
  padding:14px var(--s4);
  border:1.5px solid #E0E0E0;
  border-radius:12px;
  font-family:var(--font);font-size:0.95rem;
  color:var(--body-text);
  background:var(--white);
  transition:border-color 0.2s ease,box-shadow 0.2s ease;
  outline:none;
  appearance:none;-webkit-appearance:none;
}
.scf-input::placeholder{color:#aab0b8}
.scf-input:focus{
  border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(83,173,182,0.15);
}
.scf-select{
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230B2040' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:40px;
}

.sms-checkbox-label{
  display:flex;align-items:flex-start;gap:var(--s3);
  font-size:0.9rem;line-height:1.65;color:var(--body-text);cursor:pointer;
}
.sms-checkbox{
  flex-shrink:0;margin-top:3px;
  width:18px;height:18px;
  accent-color:var(--teal);cursor:pointer;
}
.sms-fine-print{
  font-size:0.75rem;color:var(--gray-text);
  line-height:1.6;max-width:none;
}
/* Submit button — full width, disabled state */
.sms-submit-btn{
  width:100%;text-align:center;
  background:var(--gray-mid);color:rgba(11,32,64,0.35);
  border-color:var(--gray-mid);cursor:not-allowed;
  transition:background 0.25s ease,color 0.25s ease,border-color 0.25s ease,transform 0.2s ease,box-shadow 0.2s ease;
}
.sms-submit-btn.active{
  background:var(--teal);color:var(--white);
  border-color:var(--teal);cursor:pointer;
}
.sms-submit-btn.active:hover{
  background:var(--teal-dark);border-color:var(--teal-dark);
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 8px 24px rgba(0,0,0,0.15);
}
.sms-confirmation{
  font-size:0.9rem;font-weight:600;color:var(--teal);
  min-height:1.4em;
}
.sms-privacy-link{
  font-size:0.75rem;color:var(--gray-text);margin-top:var(--s2);
}
.sms-privacy-link a{
  color:var(--teal);font-weight:600;
  text-decoration:underline;text-underline-offset:3px;
}
.sms-privacy-link a:hover{opacity:0.75}

@media(max-width:600px){
  .scf-row--2col{grid-template-columns:1fr}
  .sms-consent-block{padding:var(--s5) var(--s4)}
}

/* ── Footer ──────────────────────────────────────────────────── */
.site-footer{
  background:var(--navy-dark);color:var(--white);
  padding-top:var(--s12);padding-bottom:var(--s8);
  border-top:3px solid var(--teal);
}
.footer-grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--s8);
  margin-bottom:var(--s10);padding-bottom:var(--s8);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.footer-logo img{height:64px;width:auto;margin-bottom:var(--s4)}
.footer-tagline{font-style:italic;font-size:1rem;opacity:0.55}
.footer-col h4{
  font-size:0.68rem;font-weight:800;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--teal);margin-bottom:var(--s4);
}
.footer-links{display:flex;flex-direction:column;gap:var(--s3)}
.footer-links a{font-size:0.9rem;opacity:0.65;transition:opacity 0.2s,color 0.2s}
.footer-links a:hover{opacity:1;color:var(--teal)}
.footer-contact{display:flex;flex-direction:column;gap:var(--s2);font-size:0.9rem}
.footer-contact span{opacity:0.85}
.footer-contact a{opacity:0.65;transition:opacity 0.2s,color 0.2s}
.footer-contact a:hover{opacity:1;color:var(--teal)}
.footer-bottom{font-size:0.78rem;opacity:0.35}

/* ── Scroll fade-up ─────────────────────────────────────────── */
.fade-in{opacity:0;transform:translateY(24px);transition:opacity 0.6s ease-out,transform 0.6s ease-out;will-change:opacity,transform}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* ── Responsive ─────────────────────────────────────────────── */
@media(max-width:1200px){}

@media(max-width:1024px){
  .reasons-grid{grid-template-columns:repeat(2,1fr)}
  .pillar-layout{grid-template-columns:1fr;gap:var(--s6)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid>:first-child{grid-column:1/-1}
  .training-feature-cards{grid-template-columns:1fr}
  .hero-split{grid-template-columns:1fr}
  .hero-visual{display:none}
}

@media(max-width:768px){
  .nav-links{display:none}
  .nav-toggle{display:flex}
  .grid-2-fixed{grid-template-columns:1fr}
  .delivery-grid{grid-template-columns:1fr}
  .tsb-grid{gap:var(--s6)}
  .metrics-grid{grid-template-columns:1fr}
  .section{padding-block:72px}
  .section--lg{padding-block:var(--s10)}
  .pillar-section{padding-block:72px}
  .pillar-icon-grid{grid-template-columns:1fr}
  .pn-name{display:none}
}

@media(max-width:600px){
  .reasons-grid{grid-template-columns:1fr}
  .metrics-grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-grid>:first-child{grid-column:auto}
  .hero-actions{flex-direction:column;align-items:flex-start}
  .hero--centered .hero-actions{align-items:center}
  .btn{width:100%;text-align:center}
  .hero h1 span{white-space:normal!important}
  .timeline::before{display:none}
  .tl-item{
    grid-template-columns:40px 1fr;
    grid-template-rows:auto auto;
    column-gap:var(--s3);
    padding-block:20px;
    border-bottom:1px solid var(--gray-mid);
  }
  .tl-item:last-child{border-bottom:none}
  .tl-label{
    grid-column:1 / -1;
    text-align:left;
    padding-right:0;
    margin-bottom:var(--s2);
  }
  .tl-node{justify-content:flex-start;padding-top:2px}
  .tl-body{padding-left:0;padding-top:2px}
  .contact-card{padding:var(--s6) var(--s4)}
  .contact-row{flex-direction:column;gap:4px}
  .contact-row-label{text-align:center;min-width:unset}
  .gold-closing{padding-left:var(--s4)}
  .stat-callout{padding:var(--s8) var(--s4)}
  .pilot-stat-cards{grid-template-columns:1fr}
  .training-feature-cards{grid-template-columns:1fr}
  .tsb-grid{grid-template-columns:1fr;gap:var(--s6)}
  .pn-connector{min-width:16px}
}

/* ── Page entrance / exit keyframes ─────────────────────────── */
@keyframes pageIn{from{opacity:0}to{opacity:1}}
@keyframes pageOut{from{opacity:1}to{opacity:0}}
@keyframes heroSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* Page fade-in on load, fade-out on navigate */
@media(prefers-reduced-motion:no-preference){
  body{animation:pageIn 0.2s ease both}
  body.page-out{animation:pageOut 0.2s ease forwards}
}

/* ── Reduced motion: instant visibility, no transitions ──────── */
@media(prefers-reduced-motion:reduce){
  .fade-in{opacity:1!important;transform:none!important;transition:none!important;will-change:auto!important}
  .fade-in.visible{opacity:1!important;transform:none!important}
  body{animation:none!important;opacity:1!important}
  body.page-out{animation:none!important;opacity:0!important}
  .nav-logo img{transition:none}
  .card,.fit-card,.reason-card,.force-card-full,.service-card,.psc,.metric-card,.tfc,.delivery-card{transition:none!important}
}

/* ── Exit-intent popup ───────────────────────────────────────── */
.exit-popup-overlay{
  position:fixed;inset:0;z-index:1000;
  background:rgba(11,32,64,0.75);
  display:flex;align-items:center;justify-content:center;
  padding:var(--s4);
  opacity:0;transition:opacity 0.3s ease;
  pointer-events:none;
}
.exit-popup-overlay[hidden]{display:none!important}
.exit-popup-overlay.ep-visible{opacity:1;pointer-events:auto}
.exit-popup-card{
  position:relative;background:var(--white);
  max-width:480px;width:100%;
  border-radius:16px;border-top:4px solid var(--teal);
  padding:48px;
  box-shadow:0 24px 80px rgba(11,32,64,0.28);
  text-align:center;
  transform:scale(0.92);opacity:0;
  transition:transform 0.35s ease-out,opacity 0.35s ease-out;
  transition-delay:0.1s;
}
.ep-visible .exit-popup-card{transform:scale(1);opacity:1}
.ep-closing .exit-popup-card{
  transform:scale(0.92);opacity:0;
  transition-delay:0s;transition-duration:0.25s;
}
.ep-closing{opacity:0;transition-duration:0.25s}
.exit-popup-close{
  position:absolute;top:14px;right:14px;
  width:32px;height:32px;background:none;border:none;
  font-size:20px;line-height:1;color:var(--gray-text);
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;cursor:pointer;
  transition:background 0.15s ease,color 0.15s ease;
}
.exit-popup-close:hover{background:var(--gray-mid);color:var(--navy)}
.exit-popup-logo{width:160px;height:auto;margin:0 auto var(--s5)}
.exit-popup-headline{
  font-size:clamp(24px,4vw,32px);font-weight:800;
  color:var(--navy);margin-bottom:var(--s3);letter-spacing:-0.02em;
}
.exit-popup-sub{
  font-size:1rem;color:var(--gray-text);max-width:360px;
  margin:0 auto var(--s5);line-height:1.6;
}
.exit-popup-cta{
  width:100%;display:block;text-align:center;
  margin-bottom:var(--s3);
}
.exit-popup-dismiss{
  display:block;font-size:0.85rem;color:var(--gray-text);
  text-decoration:underline;cursor:pointer;
  transition:color 0.2s ease;
}
.exit-popup-dismiss:hover{color:var(--navy)}
@media(prefers-reduced-motion:reduce){
  .exit-popup-card{transform:none!important;transition:opacity 0.3s ease!important}
  .ep-visible .exit-popup-card{transform:none!important}
  .ep-closing .exit-popup-card{transform:none!important}
}

/* ============================================================
   ROI Calculator (smart-teams-roi-calculator.html)
   ============================================================ */
.stroi, .stroi * { box-sizing: border-box; margin: 0; padding: 0; }
.stroi {
  --navy: #0B2040;
  --teal: #53ADB6;
  --gold: #E19D3A;
  --orange: #E28434;
  --sky: #B0E5F3;
  --ink: #22314a;
  --muted: #5c6b82;
  --line: #dde4ec;
  --bg: #f5f8fa;
  font-family: 'Montserrat', 'Gotham', Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  max-width: 1040px;
  margin: 0 auto;
  padding: 32px 24px 40px;
  border-radius: 16px;
}
.stroi .head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.stroi .head img { height: 44px; width: auto; }
.stroi h1 { font-size: 26px; font-weight: 800; color: var(--navy); letter-spacing: -0.01em; }
.stroi .sub { font-size: 14.5px; color: var(--muted); margin: 6px 0 26px; max-width: 640px; line-height: 1.55; }

.stroi .controls { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px 24px; margin-bottom: 22px; }
.stroi .ctl { display: flex; align-items: center; gap: 16px; }
.stroi .ctl + .ctl { margin-top: 16px; }
.stroi .ctl label { font-size: 14px; font-weight: 600; color: var(--navy); min-width: 210px; }
.stroi .ctl output { font-size: 18px; font-weight: 700; color: var(--navy); min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
.stroi input[type=range] { flex: 1; appearance: none; -webkit-appearance: none; height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--teal) 0%, var(--teal) var(--fill, 40%), var(--line) var(--fill, 40%)); outline: none; cursor: pointer; }
.stroi input[type=range]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--navy); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(11,32,64,.35); }
.stroi input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--navy); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(11,32,64,.35); }
.stroi input[type=range]:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }

.stroi .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
.stroi .card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; }
.stroi .card.smart { border: 2px solid var(--teal); position: relative; box-shadow: 0 6px 18px rgba(83,173,182,.18); }
.stroi .card.smart .flag { position: absolute; top: -12px; left: 16px; background: var(--teal); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; }
.stroi .card h2 { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.stroi .big { font-size: 30px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.stroi .card.smart .big { color: var(--teal); }
.stroi .per { font-size: 12.5px; color: var(--muted); margin: 3px 0 14px; }
.stroi .rows { border-top: 1px solid var(--line); font-size: 13px; margin-top: auto; }
.stroi .rows div { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.stroi .rows div:last-child { border-bottom: none; }
.stroi .rows span:first-child { color: var(--muted); }
.stroi .rows span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.stroi .rows .yes { color: var(--teal); font-weight: 700; }

.stroi .value { background: var(--navy); color: #fff; border-radius: 12px; padding: 24px; margin-bottom: 22px; }
.stroi .value h2 { font-size: 16px; font-weight: 700; margin-bottom: 16px; }
.stroi .vgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 24px; }
.stroi .vitem { font-size: 13px; line-height: 1.5; }
.stroi .vitem b { display: block; color: var(--sky); font-size: 13.5px; margin-bottom: 3px; }
.stroi .vitem span { color: rgba(255,255,255,.82); }

.stroi .hidden-cost { background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--gold); border-radius: 12px; padding: 16px 20px; margin-bottom: 22px; font-size: 14px; line-height: 1.6; color: var(--ink); }
.stroi .hidden-cost b { color: var(--navy); font-variant-numeric: tabular-nums; }

.stroi .totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.stroi .total { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
.stroi .total .lbl { font-size: 12.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.stroi .total .num { font-size: 28px; font-weight: 800; color: var(--teal); font-variant-numeric: tabular-nums; }
.stroi .total .num.negative { color: var(--orange); }
.stroi .total .num.neutral { color: var(--navy); }

.stroi .foot { font-size: 11.5px; color: var(--muted); margin-top: 20px; line-height: 1.6; max-width: none; }

@media (max-width: 760px) {
  .stroi { padding: 24px 16px 32px; }
  .stroi .cards, .stroi .totals { grid-template-columns: 1fr; }
  .stroi .vgrid { grid-template-columns: 1fr; }
  .stroi .ctl { flex-wrap: wrap; }
  .stroi .ctl label { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .stroi .big, .stroi .total .num { transition: color .2s ease; }
}