/* ============================================================
   BIRD BOX BPO — DESIGN SYSTEM
   Palette derived from the origami-bird mark: navy → azure → cyan
   ============================================================ */
:root{
  /* --- ink / surfaces --- */
  --ink-950:#050A14;
  --ink-900:#08111F;
  --ink-850:#0A1628;
  --ink-800:#0E1D33;
  --ink-700:#152A47;
  --ink-600:#1E3A5F;
  --ink-500:#2C4C77;

  /* --- brand blues (from logo) --- */
  --brand-800:#12296B;
  --brand-700:#1B3A8F;
  --brand-600:#1E52C9;
  --brand-500:#2B6BE4;
  --brand-400:#4E8CF5;
  --brand-300:#8AB8FB;
  --brand-100:#DCE8FE;
  --brand-050:#EFF5FF;

  /* --- cyan highlight (logo wingtip) --- */
  --cyan-600:#0C8FC4;
  --cyan-500:#16A9E0;
  --cyan-400:#2FC1F0;
  --cyan-300:#7BDBF8;

  /* --- premium accent --- */
  --gold-600:#B07C1D;
  --gold-500:#D9A441;
  --gold-400:#E8C173;
  --gold-050:#FBF4E4;

  /* --- neutrals --- */
  --paper:#F5F8FC;
  --paper-2:#EDF2F9;
  --surface:#FFFFFF;
  --line:#E2E9F3;
  --line-soft:#EEF3F9;
  --muted:#55647C;   /* 5.42:1 on white */
  --muted-2:#64748B; /* 4.76:1 on white — was #7387A2 at 3.67:1, which failed AA */

  /* --- semantic --- */
  --danger:#D0342C;
  --success:#0E8A5F;

  /* --- radii --- */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px;

  /* --- elevation --- */
  --e1:0 1px 2px rgba(9,22,42,.05), 0 2px 8px rgba(9,22,42,.04);
  --e2:0 2px 4px rgba(9,22,42,.05), 0 12px 28px rgba(9,22,42,.07);
  --e3:0 4px 10px rgba(9,22,42,.06), 0 28px 60px rgba(9,22,42,.10);
  --e-brand:0 10px 24px rgba(43,107,228,.24), 0 2px 6px rgba(43,107,228,.16);

  /* --- spacing scale (4pt) --- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px; --s-24:96px;
  --section:clamp(72px, 9vw, 128px);
  --gutter:clamp(20px, 4vw, 48px);
  --maxw:1200px;

  /* --- motion --- */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-inout:cubic-bezier(.65,0,.35,1);
  --e-spring:cubic-bezier(.34,1.56,.64,1);
  --d-fast:180ms; --d-base:320ms; --d-slow:620ms;

  /* --- z scale --- */
  /* nav sits ABOVE the drawer so the close button stays reachable while it's open */
  --z-base:1; --z-raised:10; --z-drawer:110; --z-nav:115; --z-float:120; --z-modal:200;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px; line-height:1.65; color:var(--ink-850);
  background:var(--surface); overflow-x:hidden;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1,"liga" 1;
}
h1,h2,h3,h4,h5{font-weight:700; line-height:1.12; letter-spacing:-0.025em; color:var(--ink-900);}
h1{font-size:clamp(38px,5.6vw,68px); letter-spacing:-0.035em;}
h2{font-size:clamp(29px,3.9vw,46px); letter-spacing:-0.032em;}
h3{font-size:clamp(18px,1.5vw,21px);}
p{text-wrap:pretty;}
a{text-decoration:none; color:inherit;}
img,svg,video{display:block; max-width:100%;}
button,input,textarea{font:inherit; color:inherit;}
::selection{background:var(--brand-500); color:#fff;}

/* Focus — visible, on-brand, never removed */
:focus-visible{outline:2.5px solid var(--brand-500); outline-offset:3px; border-radius:6px;}
.on-dark :focus-visible,.hero :focus-visible,footer :focus-visible,.stats :focus-visible{outline-color:var(--cyan-400);}

.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); width:100%;}
.wrap-wide{max-width:1360px;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}

/* Skip link */
.skip{position:absolute; left:var(--s-4); top:-64px; z-index:1000; background:var(--ink-900); color:#fff;
  padding:12px 20px; border-radius:var(--r-sm); font-weight:600; font-size:14px; transition:top var(--d-fast) var(--e-out);}
.skip:focus{top:var(--s-4);}

/* Icon system */
.ico{width:1em; height:1em; flex:none; stroke:currentColor; fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.ico-fill{fill:currentColor; stroke:none;}

/* ============================================================
   SCROLL PROGRESS
   ============================================================ */
.progress{position:fixed; top:0; left:0; right:0; height:2.5px; z-index:calc(var(--z-nav) + 5); pointer-events:none;}
.progress i{display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--brand-600),var(--brand-400) 45%,var(--cyan-400));
  will-change:transform;}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:fixed; inset:0 0 auto 0; z-index:var(--z-nav);
  background:linear-gradient(180deg,rgba(5,10,20,.55),rgba(5,10,20,0));
  transition:background var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out), backdrop-filter var(--d-base);}
.nav::after{content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:rgba(255,255,255,.86); backdrop-filter:blur(18px) saturate(180%); -webkit-backdrop-filter:blur(18px) saturate(180%);
  border-bottom:1px solid var(--line); transition:opacity var(--d-base) var(--e-out);}
.nav.stuck::after{opacity:1;}
.nav.stuck{box-shadow:0 6px 28px rgba(8,17,31,.07);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:var(--s-6);
  height:80px; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter);
  transition:height var(--d-base) var(--e-out);}
.nav.stuck .nav-inner{height:68px;}

.brand{display:inline-flex; align-items:center; gap:11px; font-weight:800; font-size:19px;
  letter-spacing:-0.03em; color:#fff; transition:color var(--d-base) var(--e-out);}
.nav.stuck .brand{color:var(--ink-900);}
.brand-mark{width:36px; height:38px; flex:none; transition:transform var(--d-slow) var(--e-spring);}
.brand:hover .brand-mark{transform:translateY(-2px) rotate(-6deg) scale(1.06);}
.brand small{display:block; font-size:10.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; opacity:.62; margin-top:-3px;}

.nav-links{display:flex; align-items:center; gap:var(--s-8);}
.nav-links a{position:relative; font-size:14.5px; font-weight:600; letter-spacing:-0.01em;
  color:rgba(255,255,255,.86); padding:6px 0; transition:color var(--d-fast) var(--e-out);}
.nav.stuck .nav-links a{color:var(--ink-700);}
.nav-links a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:currentColor; transform:scaleX(0); transform-origin:100% 50%;
  transition:transform var(--d-base) var(--e-out);}
.nav-links a:hover{color:#fff;}
.nav.stuck .nav-links a:hover{color:var(--brand-600);}
.nav-links a:hover::after{transform:scaleX(1); transform-origin:0 50%;}

.nav-cta{display:inline-flex; align-items:center; gap:8px; background:var(--brand-500); color:#fff;
  padding:11px 20px; border-radius:var(--r-pill); font-size:14px; font-weight:700; letter-spacing:-0.01em;
  box-shadow:var(--e-brand); transition:transform var(--d-base) var(--e-out), background var(--d-fast), box-shadow var(--d-base);}
.nav-cta:hover{transform:translateY(-2px); background:var(--brand-400); box-shadow:0 14px 30px rgba(43,107,228,.34);}
.nav-cta:active{transform:translateY(0) scale(.98);}
.nav-cta .ico{font-size:15px;}

/* Burger */
.burger{display:none; width:46px; height:46px; align-items:center; justify-content:center;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:var(--r-sm);
  cursor:pointer; transition:background var(--d-fast), border-color var(--d-fast);}
.nav.stuck .burger{background:var(--paper); border-color:var(--line);}
.burger i{position:relative; display:block; width:19px; height:1.8px; border-radius:2px; background:#fff;
  transition:transform var(--d-base) var(--e-out), background var(--d-base);}
.nav.stuck .burger i{background:var(--ink-900);}
.burger i::before,.burger i::after{content:""; position:absolute; left:0; width:19px; height:1.8px;
  border-radius:2px; background:inherit; transition:transform var(--d-base) var(--e-out), opacity var(--d-fast);}
.burger i::before{top:-6px;} .burger i::after{top:6px;}
.burger[aria-expanded="true"] i{background:transparent;}
.nav.stuck .burger[aria-expanded="true"] i{background:transparent;}
.burger[aria-expanded="true"] i::before{transform:translateY(6px) rotate(45deg); background:var(--ink-900);}
.burger[aria-expanded="true"] i::after{transform:translateY(-6px) rotate(-45deg); background:var(--ink-900);}

/* Drawer */
.drawer{position:fixed; inset:0 0 auto 0; z-index:var(--z-drawer); background:var(--surface);
  padding:96px var(--gutter) var(--s-10); border-bottom:1px solid var(--line);
  box-shadow:0 24px 60px rgba(8,17,31,.14);
  transform:translateY(-102%); visibility:hidden;
  transition:transform var(--d-slow) var(--e-out), visibility var(--d-slow);}
.drawer.open{transform:translateY(0); visibility:visible;}
.drawer nav{display:flex; flex-direction:column;}
.drawer a{display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  padding:16px 2px; font-size:19px; font-weight:700; letter-spacing:-0.02em; color:var(--ink-900);
  border-bottom:1px solid var(--line-soft);
  opacity:0; transform:translateY(14px);
  transition:opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out), color var(--d-fast);}
.drawer.open a{opacity:1; transform:none; transition-delay:calc(var(--i,0) * 55ms + 90ms);}
.drawer a .ico{font-size:17px; color:var(--brand-500); transform:translateX(-4px); opacity:.5;
  transition:transform var(--d-base) var(--e-out), opacity var(--d-base);}
.drawer a:hover{color:var(--brand-600);}
.drawer a:hover .ico{transform:translateX(0); opacity:1;}
.drawer .drawer-cta{margin-top:var(--s-8); justify-content:center; background:var(--brand-500); color:#fff;
  border:0; border-radius:var(--r-pill); padding:16px; font-size:16px; box-shadow:var(--e-brand);}
.drawer .drawer-cta .ico{color:#fff; opacity:1; transform:none;}
.drawer-meta{margin-top:var(--s-6); display:flex; flex-direction:column; gap:6px; font-size:13.5px; color:var(--muted);}
.scrim{position:fixed; inset:0; z-index:calc(var(--z-drawer) - 1); background:rgba(5,10,20,.5);
  backdrop-filter:blur(3px); opacity:0; visibility:hidden; transition:opacity var(--d-base), visibility var(--d-base);}
.scrim.on{opacity:1; visibility:visible;}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
  padding:150px 0 0; overflow:hidden; background:var(--ink-950); isolation:isolate;}
.hero-media{position:absolute; inset:0; z-index:0;}
.hero-media img,.hero-media video{width:100%; height:100%; object-fit:cover; object-position:60% 50%;}
.hero-media video{position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease;}
.hero-media video.on{opacity:1;}
.hero-media::after{content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg,rgba(5,10,20,.94) 0%,rgba(5,10,20,.82) 26%,rgba(5,10,20,.5) 48%,rgba(5,10,20,.2) 68%,rgba(5,10,20,.12) 100%),
    linear-gradient(180deg,rgba(5,10,20,.6) 0%,rgba(5,10,20,0) 22%,rgba(5,10,20,0) 52%,rgba(5,10,20,.88) 100%);}
.hero-grain{position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:3px 3px; mix-blend-mode:overlay;}
.hero-glow{position:absolute; z-index:1; pointer-events:none; border-radius:50%; filter:blur(90px);}
.hero-glow.g1{width:46vw; height:46vw; left:-14vw; top:6vh; background:rgba(30,82,201,.34);}
.hero-glow.g2{width:32vw; height:32vw; right:4vw; bottom:-8vh; background:rgba(22,169,224,.16);}

.hero-body{position:relative; z-index:2; flex:1; display:flex; align-items:center; padding-bottom:var(--s-16);}
.hero-content{max-width:min(660px,100%);}

.eyebrow{display:inline-flex; align-items:center; gap:9px; padding:8px 16px 8px 12px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:var(--r-pill);
  font-size:12.5px; font-weight:700; letter-spacing:.055em; text-transform:uppercase; color:#D6E6FA;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); margin-bottom:var(--s-6);}
.eyebrow .pulse{position:relative; width:7px; height:7px; border-radius:50%; background:var(--cyan-400); flex:none;}
.eyebrow .pulse::after{content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1.5px solid var(--cyan-400); opacity:.7; animation:ping 2.6s var(--e-out) infinite;}
@keyframes ping{0%{transform:scale(.5); opacity:.85} 70%{transform:scale(1.9); opacity:0} 100%{opacity:0}}

.hero h1{color:#fff; margin-bottom:var(--s-6); text-wrap:balance;}
.hero h1 em{font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-weight:400;
  letter-spacing:-0.015em; background:linear-gradient(102deg,#8AB8FB 0%,#5FD3F5 52%,#A9E7FC 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  background-size:220% auto; animation:sheen 9s linear infinite; padding-right:.06em;}
@keyframes sheen{to{background-position:220% center;}}
.hero-lede{font-size:clamp(16.5px,1.35vw,19px); color:#CBD9EA; max-width:56ch; margin-bottom:var(--s-8);}
.hero-actions{display:flex; gap:var(--s-3); flex-wrap:wrap; margin-bottom:var(--s-10);}

/* Buttons */
.btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 30px; border-radius:var(--r-pill); font-size:15.5px; font-weight:700; letter-spacing:-0.012em;
  border:1px solid transparent; cursor:pointer; overflow:hidden; white-space:nowrap;
  transition:transform var(--d-base) var(--e-out), background var(--d-fast) var(--e-out),
             box-shadow var(--d-base) var(--e-out), border-color var(--d-fast), color var(--d-fast);}
.btn .ico{font-size:17px; transition:transform var(--d-base) var(--e-out);}
.btn::after{content:""; position:absolute; top:0; left:-140%; width:48%; height:100%; pointer-events:none;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.42),transparent); transform:skewX(-22deg);}
.btn:hover::after{animation:sweep .9s var(--e-out);}
@keyframes sweep{from{left:-140%} to{left:150%}}
.btn:active{transform:translateY(0) scale(.978);}

.btn-primary{background:linear-gradient(135deg,var(--brand-600),var(--brand-500) 60%,var(--brand-400));
  color:#fff; box-shadow:var(--e-brand);}
.btn-primary:hover{transform:translateY(-3px); box-shadow:0 18px 40px rgba(43,107,228,.38);}
.btn-primary:hover .ico{transform:translateX(4px);}

.btn-glass{background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.28); color:#fff;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);}
.btn-glass:hover{background:rgba(255,255,255,.17); border-color:rgba(255,255,255,.5); transform:translateY(-3px);}

.btn-dark{background:var(--ink-900); color:#fff; box-shadow:var(--e2);}
.btn-dark:hover{background:var(--ink-800); transform:translateY(-3px); box-shadow:var(--e3);}
.btn-dark:hover .ico{transform:translateX(4px);}

.btn-white{background:#fff; color:var(--ink-900); box-shadow:0 12px 30px rgba(5,10,20,.2);}
.btn-white:hover{transform:translateY(-3px); box-shadow:0 20px 46px rgba(5,10,20,.28);}
.btn-white:hover .ico{transform:translateX(4px);}

.btn-outline{background:transparent; border-color:var(--line); color:var(--ink-800);}
.btn-outline:hover{border-color:var(--brand-500); color:var(--brand-600); background:var(--brand-050); transform:translateY(-2px);}

/* Hero trust bar */
.hero-trust{position:relative; z-index:2; border-top:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,rgba(5,10,20,.1),rgba(5,10,20,.55));
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);}
.hero-trust .wrap{display:flex; align-items:center; justify-content:space-between; gap:var(--s-6);
  padding-block:var(--s-5); flex-wrap:wrap;}
.trust-items{display:flex; align-items:center; gap:clamp(18px,3.2vw,44px); flex-wrap:wrap;}
.trust-item{display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600; color:#C3D3E7;}
.trust-item .ico{font-size:17px; color:var(--cyan-400);}
.hero-trust-right{display:flex; align-items:center; gap:18px;}
.vid-toggle{display:inline-flex; align-items:center; gap:8px; padding:8px 14px 8px 12px; cursor:pointer;
  border-radius:var(--r-pill); background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.2);
  color:#D6E6FA; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:background var(--d-fast), border-color var(--d-fast), color var(--d-fast);}
.vid-toggle:hover{background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.45); color:#fff;}
.vid-toggle .ico{font-size:14px;}
.vid-toggle .i-play{display:none;}
.vid-toggle.paused .i-pause{display:none;}
.vid-toggle.paused .i-play{display:block;}

.scroll-cue{display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5);}
.scroll-cue span.rail{position:relative; display:block; width:1.5px; height:30px; overflow:hidden;
  background:rgba(255,255,255,.18);}
.scroll-cue span.rail::after{content:""; position:absolute; inset:0; background:var(--cyan-400);
  animation:railrun 2.2s var(--e-inout) infinite;}
@keyframes railrun{0%{transform:translateY(-100%)} 55%,100%{transform:translateY(100%)}}

/* ============================================================
   SECTION PRIMITIVES
   ============================================================ */
/* keep anchor jumps clear of the fixed nav */
section[id],main[id]{scroll-margin-top:92px;}

.section{padding-block:var(--section); position:relative;}
.section-paper{background:var(--paper);}
/* Dark contexts. The section classes are listed alongside .section-dark on purpose:
   headings default to dark ink, so a dark panel that forgets the modifier would
   render its heading invisible against its own background. */
.section-dark{background:var(--ink-900); color:#fff;}
.section-dark h2,.section-dark h3,
.addons h2,.addons h3,.stats h2,.stats h3,.cta-band h2,.cta-band h3{color:#fff;}

.shead{max-width:660px; margin-bottom:clamp(40px,5vw,64px);}
.shead.center{margin-inline:auto; text-align:center;}
.klabel{display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--brand-600); margin-bottom:var(--s-4);}
.klabel::before{content:""; width:26px; height:1.5px; background:currentColor; opacity:.5;}
.section-dark .klabel{color:var(--cyan-400);}
.shead h2{margin-bottom:var(--s-4); text-wrap:balance;}
.shead h2 em{font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-weight:400;
  color:var(--brand-600); letter-spacing:-0.01em;}
.section-dark .shead h2 em{color:var(--cyan-300);}
.shead p{font-size:clamp(16px,1.25vw,18px); color:var(--muted); max-width:58ch;}
.shead.center p{margin-inline:auto;}
.section-dark .shead p{color:#9FB3CC;}

/* ============================================================
   ENGINES — signature block
   ============================================================ */
.engines{padding-block:var(--section);}
.engines-grid{display:grid; grid-template-columns:1.35fr 1fr; gap:var(--s-6); align-items:stretch;}
.engine{position:relative; overflow:hidden; border-radius:var(--r-xl); padding:clamp(30px,3.4vw,48px);
  color:#fff; isolation:isolate;
  transition:transform var(--d-slow) var(--e-out), box-shadow var(--d-slow) var(--e-out);}
.engine-1{background:linear-gradient(152deg,var(--ink-850) 0%,var(--brand-800) 62%,var(--brand-700) 100%);}
.engine-2{background:linear-gradient(152deg,var(--ink-850) 0%,#0A4F70 58%,var(--cyan-600) 100%);}
.engine::before{content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.16),transparent 46%);
  transition:opacity var(--d-slow) var(--e-out);}
.engine:hover::before{opacity:1;}
.engine::after{content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; padding:1px;
  background:linear-gradient(140deg,rgba(255,255,255,.34),rgba(255,255,255,.02) 42%,rgba(255,255,255,.16));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;}
.engine:hover{transform:translateY(-8px); box-shadow:0 34px 70px rgba(5,10,20,.32);}
.engine-ghost{position:absolute; right:-10px; top:-28px; z-index:-1; font-family:'Instrument Serif',serif;
  font-size:clamp(140px,17vw,220px); line-height:1; font-weight:400; color:rgba(255,255,255,.055);
  pointer-events:none; user-select:none; transition:transform var(--d-slow) var(--e-out);}
.engine:hover .engine-ghost{transform:translate(-6px,6px);}
.engine-num{display:inline-flex; align-items:center; gap:9px; font-size:11.5px; font-weight:800;
  letter-spacing:.17em; text-transform:uppercase; color:rgba(255,255,255,.62); margin-bottom:var(--s-8);}
.engine-num::before{content:""; width:22px; height:1.5px; background:currentColor;}
.engine-icon{width:60px; height:60px; border-radius:var(--r-md); display:grid; place-items:center;
  font-size:28px; margin-bottom:var(--s-6);
  background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:transform var(--d-slow) var(--e-spring), background var(--d-base);}
.engine:hover .engine-icon{transform:translateY(-5px) rotate(-7deg); background:rgba(255,255,255,.19);}
.engine h3{font-size:clamp(23px,2.2vw,30px); color:#fff; margin-bottom:8px; letter-spacing:-0.03em;}
.engine-tag{font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.6); margin-bottom:var(--s-6);}
.engine ul{list-style:none; display:flex; flex-direction:column; gap:12px; margin-bottom:var(--s-8);}
.engine li{display:flex; align-items:flex-start; gap:11px; font-size:15px; color:rgba(255,255,255,.92);
  transition:transform var(--d-base) var(--e-out);}
.engine:hover li{transform:translateX(4px);}
.engine li:nth-child(2){transition-delay:35ms} .engine li:nth-child(3){transition-delay:70ms} .engine li:nth-child(4){transition-delay:105ms}
.engine li .ico{font-size:17px; margin-top:3px; color:var(--cyan-300); stroke-width:2.2;}
.engine-link{display:inline-flex; align-items:center; gap:9px; font-size:15px; font-weight:700;
  padding-bottom:5px; border-bottom:1.5px solid rgba(255,255,255,.32);
  transition:gap var(--d-base) var(--e-out), border-color var(--d-fast);}
.engine-link:hover{gap:15px; border-color:#fff;}
.engine-link .ico{font-size:16px;}

/* ============================================================
   STATS
   ============================================================ */
.stats{background:var(--ink-900); color:#fff; padding-block:clamp(48px,6vw,72px); position:relative; overflow:hidden;}
.stats::before{content:""; position:absolute; inset:0;
  background:radial-gradient(900px 320px at 50% 0%,rgba(43,107,228,.22),transparent 70%);}
.stats .wrap{position:relative;}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-6);}
.stat{position:relative; text-align:center; padding-inline:var(--s-4);}
.stat + .stat::before{content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.16),transparent);}
.stat-num{font-size:clamp(34px,4.2vw,50px); font-weight:800; letter-spacing:-0.045em; line-height:1;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  background:linear-gradient(118deg,#fff 0%,var(--brand-300) 46%,var(--cyan-300) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.stat-label{font-size:13.5px; font-weight:600; color:#93A9C4; margin-top:10px; letter-spacing:-0.005em;}

/* ============================================================
   SERVICE CARDS
   ============================================================ */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5);}
.card{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(24px,2.4vw,32px); overflow:hidden; isolation:isolate;
  transition:transform var(--d-slow) var(--e-out), box-shadow var(--d-slow) var(--e-out), border-color var(--d-base);}
.card::before{content:""; position:absolute; inset:0; z-index:-1; opacity:0; border-radius:inherit;
  background:linear-gradient(160deg,var(--brand-050),transparent 55%);
  transition:opacity var(--d-slow) var(--e-out);}
.card:hover{transform:translateY(-7px); border-color:var(--brand-100); box-shadow:0 26px 54px rgba(19,42,71,.11);}
.card:hover::before{opacity:1;}
.card-idx{position:absolute; top:clamp(24px,2.4vw,32px); right:clamp(24px,2.4vw,32px);
  font-size:12px; font-weight:800; letter-spacing:.1em; color:var(--muted-2);
  font-variant-numeric:tabular-nums; transition:color var(--d-base);}
.card:hover .card-idx{color:var(--brand-500);}
.card-icon{width:54px; height:54px; border-radius:var(--r-sm); display:grid; place-items:center;
  font-size:25px; color:var(--brand-600); margin-bottom:var(--s-5);
  background:linear-gradient(140deg,var(--brand-050),var(--brand-100));
  transition:transform var(--d-slow) var(--e-spring), box-shadow var(--d-base);}
.card:hover .card-icon{transform:translateY(-3px) scale(1.06) rotate(-5deg); box-shadow:0 10px 22px rgba(43,107,228,.18);}
.card h3{margin-bottom:9px; letter-spacing:-0.025em;}
.card p{font-size:14.5px; color:var(--muted); line-height:1.62;}
.card-more{display:inline-flex; align-items:center; gap:7px; margin-top:var(--s-4);
  font-size:13.5px; font-weight:700; color:var(--brand-600);
  opacity:0; transform:translateY(6px);
  transition:opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);}
.card:hover .card-more{opacity:1; transform:none;}
/* teal variant for BPO */
.cards-teal .card-icon{background:linear-gradient(140deg,#E6F8FE,#C3EDFA); color:var(--cyan-600);}
.cards-teal .card:hover{border-color:#B9E8F8;}
.cards-teal .card::before{background:linear-gradient(160deg,#EFFAFE,transparent 55%);}
.cards-teal .card:hover .card-idx,.cards-teal .card-more{color:var(--cyan-600);}
.cards-teal .card:hover .card-icon{box-shadow:0 10px 22px rgba(22,169,224,.2);}

/* ============================================================
   PROCESS
   ============================================================ */
.process{position:relative;}
.proc-grid{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-6);}
.proc-rail{position:absolute; left:5%; right:5%; top:29px; height:2px; background:var(--line); border-radius:2px; overflow:hidden;}
.proc-rail i{display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--brand-600),var(--brand-400) 55%,var(--cyan-400));
  transition:transform 1.4s var(--e-out); will-change:transform;}
.step{position:relative; padding-top:0;}
.step-dot{position:relative; z-index:2; width:58px; height:58px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface); border:2px solid var(--line); color:var(--muted-2);
  font-size:16px; font-weight:800; font-variant-numeric:tabular-nums; margin-bottom:var(--s-5);
  transition:border-color var(--d-slow) var(--e-out), color var(--d-slow), background var(--d-slow),
             box-shadow var(--d-slow), transform var(--d-slow) var(--e-spring);}
.step.lit .step-dot{border-color:var(--brand-500); color:#fff; transform:scale(1.06);
  background:linear-gradient(140deg,var(--brand-600),var(--brand-400));
  box-shadow:0 12px 28px rgba(43,107,228,.28), 0 0 0 6px var(--brand-050);}
.step h3{margin-bottom:8px; letter-spacing:-0.025em;}
.step p{font-size:14.5px; color:var(--muted); line-height:1.62;}
.step-chip{display:inline-flex; align-items:center; gap:7px; margin-top:var(--s-4); padding:5px 12px;
  border-radius:var(--r-pill); background:var(--paper-2); border:1px solid var(--line);
  font-size:12px; font-weight:700; color:var(--ink-600); letter-spacing:-0.005em;}
.step-chip .ico{font-size:13px; color:var(--brand-500);}

/* ============================================================
   ADD-ONS
   ============================================================ */
.addons{background:var(--ink-900); color:#fff; padding-block:var(--section); position:relative; overflow:hidden;}
.addons::before{content:""; position:absolute; inset:0;
  background:radial-gradient(760px 420px at 82% 8%,rgba(217,164,65,.13),transparent 66%),
             radial-gradient(700px 420px at 12% 92%,rgba(43,107,228,.16),transparent 68%);}
.addons .wrap{position:relative;}
.addon-row{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5);}
.addon{position:relative; background:rgba(255,255,255,.038); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-lg); padding:clamp(26px,2.6vw,34px); overflow:hidden; isolation:isolate;
  transition:transform var(--d-slow) var(--e-out), border-color var(--d-base), background var(--d-base), box-shadow var(--d-slow);}
.addon:hover{transform:translateY(-7px); border-color:rgba(217,164,65,.42); background:rgba(255,255,255,.06);
  box-shadow:0 28px 60px rgba(0,0,0,.34);}
.addon-icon{width:48px; height:48px; border-radius:var(--r-sm); display:grid; place-items:center; font-size:22px;
  background:rgba(217,164,65,.13); border:1px solid rgba(217,164,65,.26); color:var(--gold-400);
  margin-bottom:var(--s-5); transition:transform var(--d-slow) var(--e-spring);}
.addon:hover .addon-icon{transform:translateY(-3px) scale(1.06);}
.addon h3{font-size:19px; color:#fff; margin-bottom:10px;}
.addon .price{font-size:30px; font-weight:800; letter-spacing:-0.04em; color:var(--gold-400);
  font-variant-numeric:tabular-nums; margin-bottom:10px; line-height:1;}
.addon .price small{font-size:13px; font-weight:600; color:#8FA4BE; letter-spacing:0; margin-left:6px;}
.addon p{font-size:14px; color:#9FB3CC; line-height:1.62;}
.addon-flag{position:absolute; top:18px; right:18px; padding:5px 11px; border-radius:var(--r-pill);
  background:linear-gradient(135deg,var(--gold-600),var(--gold-500)); color:#1A1204;
  font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;}
.addon-more{margin-top:var(--s-8); background:rgba(255,255,255,.038); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-lg); padding:clamp(22px,2.4vw,30px);}
.addon-more h3{font-size:15px; color:#fff; margin-bottom:14px;}
.addon-more ul{list-style:none; margin:0 0 12px; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px 22px;}
.addon-more li{display:flex; align-items:flex-start; gap:9px; font-size:14px; color:#C3D3E7; line-height:1.5;}
.addon-more li .ico{width:14px; height:14px; flex:none; margin-top:3px; color:var(--gold-400);}
.addon-more > p{font-size:13.5px; color:#8FA4BE; margin:0;}
@media (max-width:680px){ .addon-more ul{grid-template-columns:1fr;} }

/* PRICING */
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5);}
.price-card{position:relative; display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(26px,2.6vw,34px);
  transition:transform var(--d-slow) var(--e-out), border-color var(--d-base), box-shadow var(--d-slow);}
.price-card:hover{transform:translateY(-7px); border-color:var(--brand-100); box-shadow:0 26px 54px rgba(19,42,71,.11);}
.price-card.featured{border-color:var(--brand-500); box-shadow:0 20px 44px rgba(43,107,228,.16);}
.price-card.featured:hover{box-shadow:0 28px 58px rgba(43,107,228,.22);}
.plan-flag{position:absolute; top:-13px; left:50%; transform:translateX(-50%); padding:6px 16px;
  border-radius:var(--r-pill); background:var(--brand-500); color:#fff; font-size:11px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; box-shadow:0 10px 22px rgba(43,107,228,.3);}
.price-card h3{margin-bottom:2px;}
.plan-amount{font-size:34px; font-weight:800; letter-spacing:-0.03em; color:var(--ink-900);
  font-variant-numeric:tabular-nums; margin:14px 0 2px; line-height:1;}
.plan-amount small{font-size:13px; font-weight:600; color:var(--muted); letter-spacing:0; margin-left:6px;}
.plan-delivery{font-size:13px; color:var(--muted); margin-bottom:22px; padding-bottom:22px; border-bottom:1px solid var(--line);}
.plan-list{list-style:none; margin:0 0 26px; padding:0; display:flex; flex-direction:column; gap:12px; flex:1;}
.plan-list li{display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:var(--ink-800); line-height:1.5;}
.plan-list .ico{width:17px; height:17px; flex:none; margin-top:2px; color:var(--brand-500);}
.price-card .btn{width:100%;}
.pricing-teaser-cta{display:flex; justify-content:center; margin-top:clamp(36px,4vw,52px);}
.currency-note{text-align:center; font-size:13px; color:var(--muted-2); margin-top:var(--s-6);}
.currency-note.on-dark{color:#8FA4BE;}
.plan-list li small{display:block; font-size:11.5px; color:var(--muted-2); font-weight:500; margin-top:2px;}

/* ---- Honest timeline + banking disclaimer (pricing section) ---- */
.timeline-note{max-width:760px; margin:var(--s-8) auto 0; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(22px,2.4vw,30px);}
.timeline-note h3{display:flex; align-items:center; gap:9px; font-size:16px; margin-bottom:12px; color:var(--ink-900);}
.timeline-note h3 .ico{width:17px; height:17px; color:var(--brand-500);}
.timeline-note p{font-size:14.5px; color:var(--muted); line-height:1.65; margin-bottom:12px;}
.timeline-note ol{margin:0 0 12px 20px; padding:0;}
.timeline-note li{font-size:14.5px; color:var(--ink-800); line-height:1.6; margin-bottom:7px;}
.timeline-note strong{color:var(--ink-900); font-weight:700;}
.bank-disclaimer{display:flex; gap:9px; align-items:flex-start; background:var(--brand-050);
  border:1px solid var(--brand-100); border-radius:var(--r-sm); padding:14px 16px;
  font-size:13.5px !important; margin-bottom:0 !important;}
.bank-disclaimer .ico{width:16px; height:16px; flex:none; margin-top:2px; color:var(--brand-600);}

/* ============================================================
   BUILD PACKAGE FORM
   ============================================================ */
.build{background:linear-gradient(180deg,var(--surface) 0%,var(--paper) 100%); padding-block:var(--section);}
.build-shell{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,4vw,64px); align-items:start;}
.build-aside{position:sticky; top:112px;}
.build-aside h2{margin-bottom:var(--s-4);}
.build-aside > p{font-size:16.5px; color:var(--muted); margin-bottom:var(--s-8);}
.next-list{list-style:none; display:flex; flex-direction:column; gap:var(--s-5);}
.next-list li{display:flex; gap:var(--s-4); align-items:flex-start;}
.next-list .n{flex:none; width:38px; height:38px; border-radius:var(--r-xs); display:grid; place-items:center;
  background:var(--brand-050); border:1px solid var(--brand-100); color:var(--brand-600); font-size:17px;}
.next-list strong{display:block; font-size:15px; font-weight:700; color:var(--ink-900); margin-bottom:2px;}
.next-list span{font-size:14px; color:var(--muted); line-height:1.6;}
.aside-note{margin-top:var(--s-8); padding:var(--s-5); border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--e1);
  display:flex; gap:var(--s-3); align-items:flex-start;}
.aside-note .ico{font-size:19px; color:var(--success); margin-top:2px; flex:none;}
.aside-note p{font-size:13.5px; color:var(--muted); line-height:1.6;}

.build-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:clamp(26px,3vw,42px); box-shadow:var(--e3);}
.field{margin-bottom:var(--s-6);}
.flabel{display:block; font-size:14px; font-weight:700; color:var(--ink-800); margin-bottom:9px; letter-spacing:-0.01em;}
.req{color:var(--danger); margin-left:2px;}
.optional{font-weight:500; color:var(--muted-2); font-size:12.5px; margin-left:6px;}
/* 16px is deliberate: anything smaller makes iOS Safari zoom the page on focus */
.field input,.field textarea{width:100%; padding:15px 16px; background:var(--paper); color:var(--ink-900);
  border:1.5px solid var(--line); border-radius:var(--r-sm); font-size:16px; line-height:1.5;
  transition:border-color var(--d-fast), box-shadow var(--d-fast), background var(--d-fast);}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2);}
.field input:hover,.field textarea:hover{border-color:#CFDBEA;}
.field input:focus,.field textarea:focus{outline:none; background:var(--surface);
  border-color:var(--brand-500); box-shadow:0 0 0 4px rgba(43,107,228,.13);}
.field textarea{min-height:112px; resize:vertical;}
.field.bad input,.field.bad textarea{border-color:var(--danger); background:#FEF6F5;}
.field.bad input:focus,.field.bad textarea:focus{box-shadow:0 0 0 4px rgba(208,52,44,.13);}
.hint{display:block; font-size:12.5px; color:var(--muted-2); margin-top:7px;}
.err{display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--danger);
  margin-top:8px; max-height:0; opacity:0; overflow:hidden;
  transition:max-height var(--d-base) var(--e-out), opacity var(--d-base), margin var(--d-base);}
.field.bad .err{max-height:60px; opacity:1;}
.err.show{max-height:60px; opacity:1;}
.err .ico{font-size:14px; flex:none;}

.svc-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px;}
.svc{position:relative;}
.svc input{position:absolute; opacity:0; width:0; height:0;}
.svc label{display:flex; align-items:center; gap:11px; height:100%; min-height:52px; padding:13px 14px;
  border:1.5px solid var(--line); border-radius:var(--r-sm); background:var(--paper); cursor:pointer;
  font-size:14px; font-weight:600; color:var(--ink-700); letter-spacing:-0.012em;
  transition:border-color var(--d-fast), background var(--d-fast), box-shadow var(--d-fast), transform var(--d-fast) var(--e-out);}
.svc label:hover{border-color:var(--brand-300); background:var(--surface); transform:translateY(-1px);}
.svc label .box{flex:none; width:20px; height:20px; border:1.8px solid #C4D2E4; border-radius:6px;
  display:grid; place-items:center; background:var(--surface);
  transition:background var(--d-fast) var(--e-out), border-color var(--d-fast), transform var(--d-fast) var(--e-spring);}
.svc label .box .ico{font-size:12px; color:#fff; stroke-width:3.2; opacity:0; transform:scale(.4);
  transition:opacity var(--d-fast), transform var(--d-fast) var(--e-spring);}
.svc input:checked + label{border-color:var(--brand-500); background:var(--brand-050); color:var(--ink-900);
  box-shadow:0 0 0 1px var(--brand-500) inset;}
.svc input:checked + label .box{background:var(--brand-500); border-color:var(--brand-500); transform:scale(1.06);}
.svc input:checked + label .box .ico{opacity:1; transform:scale(1);}
.svc input:focus-visible + label{outline:2.5px solid var(--brand-500); outline-offset:3px;}
.field.bad .svc label{border-color:#F0BDB9;}

.build-btn{width:100%; margin-top:var(--s-2); padding:17px 24px; border:none; border-radius:var(--r-pill);
  background:linear-gradient(135deg,var(--brand-600),var(--brand-500) 55%,var(--brand-400));
  color:#fff; font-size:16px; font-weight:800; letter-spacing:-0.01em; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:10px; position:relative; overflow:hidden;
  box-shadow:var(--e-brand); transition:transform var(--d-base) var(--e-out), box-shadow var(--d-base), opacity var(--d-fast);}
.build-btn:hover{transform:translateY(-2px); box-shadow:0 18px 40px rgba(43,107,228,.36);}
.build-btn:active{transform:translateY(0) scale(.985);}
.build-btn::after{content:""; position:absolute; top:0; left:-140%; width:48%; height:100%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.4),transparent); transform:skewX(-22deg);}
.build-btn:hover::after{animation:sweep .9s var(--e-out);}
.build-btn[data-busy="true"]{pointer-events:none; opacity:.8;}
.build-btn .spin{display:none; width:17px; height:17px; border-radius:50%;
  border:2.2px solid rgba(255,255,255,.32); border-top-color:#fff; animation:spin .7s linear infinite;}
.build-btn[data-busy="true"] .spin{display:block;}
.build-btn[data-busy="true"] .ico{display:none;}
@keyframes spin{to{transform:rotate(360deg)}}
.build-note{display:flex; align-items:flex-start; gap:8px; justify-content:center; text-align:center;
  font-size:13px; color:var(--muted); margin-top:var(--s-4); line-height:1.55;}

/* ---- Order / checkout flow ---- */
.order-form h3{font-size:17px; margin-bottom:var(--s-4);}
.lede-sm{font-size:14px; color:var(--muted); margin:-8px 0 var(--s-5); line-height:1.6;}
.order-plans{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:var(--s-3);}
.plan-pick{position:relative;}
.plan-pick input{position:absolute; opacity:0; pointer-events:none;}
.plan-pick label{position:relative; display:block; cursor:pointer; background:var(--surface);
  border:2px solid var(--line); border-radius:var(--r-lg); padding:20px 18px 18px;
  transition:border-color var(--d-fast), box-shadow var(--d-fast), transform var(--d-fast);}
.plan-pick label:hover{border-color:var(--brand-100); transform:translateY(-2px);}
.plan-pick input:checked + label{border-color:var(--brand-500); box-shadow:0 14px 30px rgba(43,107,228,.16);}
.plan-pick input:focus-visible + label{outline:2.5px solid var(--brand-500); outline-offset:2px;}
.pp-check{position:absolute; top:16px; right:16px; width:22px; height:22px; border-radius:50%;
  border:2px solid var(--line); display:grid; place-items:center; background:#fff; transition:all var(--d-fast);}
.plan-pick input:checked + label .pp-check{background:var(--brand-500); border-color:var(--brand-500);}
.pp-check .ico{width:12px; height:12px; color:#fff; opacity:0; transition:opacity var(--d-fast);}
.plan-pick input:checked + label .pp-check .ico{opacity:1;}
.pp-name{display:block; font-size:16px; font-weight:700; color:var(--ink-900); margin-bottom:4px;}
.pp-price{display:block; font-size:23px; font-weight:800; color:var(--ink-900); letter-spacing:-0.03em;}
.pp-price small{font-size:12px; font-weight:600; color:var(--muted); letter-spacing:0; margin-left:3px;}
.pp-list{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:6px;}
.pp-list li{font-size:12.5px; color:var(--muted); display:flex; align-items:flex-start; gap:6px; line-height:1.45;}
.pp-list .ico{width:13px; height:13px; margin-top:2px; color:var(--brand-500); flex:none;}
.plan-compare-link{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:700;
  color:var(--brand-600); margin-bottom:var(--s-2);}
.plan-compare-link:hover{text-decoration:underline; text-underline-offset:3px;}
.plan-compare-link .ico{width:14px; height:14px;}

.field-row{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-5);}

.order-summary-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:20px 22px; margin-top:var(--s-4);}
.os-row{display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:13.5px;
  color:var(--muted); padding:9px 0; border-bottom:1px solid var(--line);}
.os-row:last-child{border-bottom:none;}
.os-row strong{color:var(--ink-800); font-weight:700; text-align:right; font-variant-numeric:tabular-nums;}
.os-row.os-total{padding-top:14px; margin-top:2px; border-top:1px solid var(--line); border-bottom:none;}
.os-row.os-total span{color:var(--ink-900); font-weight:700; font-size:14.5px;}
.os-row.os-total strong{color:var(--brand-600); font-size:24px;}
.os-row.os-pkr{padding-top:2px;}
.os-row.os-pkr strong{color:var(--muted-2); font-size:14px; font-weight:700;}

.bank-card{background:var(--brand-050); border:1px solid var(--brand-100); border-radius:var(--r-lg);
  padding:22px 24px; margin:var(--s-5) 0;}
.bank-row{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 0;
  border-bottom:1px solid rgba(43,107,228,.14); flex-wrap:wrap;}
.bank-row:last-child{border-bottom:none;}
.bank-row span{font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--muted-2);}
.bank-row strong{font-size:15.5px; font-weight:700; color:var(--ink-900); font-variant-numeric:tabular-nums;}
.copy-btn{display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-pill); padding:6px 13px; font-size:12.5px; font-weight:700; color:var(--brand-600);
  cursor:pointer; transition:all var(--d-fast); font-family:inherit;}
.copy-btn:hover{border-color:var(--brand-500); background:#fff;}
.copy-btn .ico{width:13px; height:13px;}
.copy-btn.copied{background:var(--brand-500); color:#fff; border-color:var(--brand-500);}

.order-confirm{display:none;}
.order-confirm.show{display:block;}
.order-form.hide{display:none;}

.confirm-ref{display:inline-flex; align-items:center; gap:8px; background:var(--brand-050);
  border:1px solid var(--brand-100); border-radius:var(--r-pill); padding:9px 18px; font-weight:800;
  color:var(--brand-600); font-size:13.5px; margin-bottom:var(--s-5); letter-spacing:.01em;}
.confirm-ref .ico{width:15px; height:15px;}

.next-steps-mini{list-style:none; counter-reset:step; margin:var(--s-5) 0; padding:0;
  display:flex; flex-direction:column; gap:12px;}
.next-steps-mini li{counter-increment:step; display:flex; gap:12px; align-items:flex-start;
  font-size:14.5px; color:var(--ink-800); line-height:1.6;}
.next-steps-mini li::before{content:counter(step); flex:none; width:26px; height:26px; border-radius:50%;
  background:var(--brand-500); color:#fff; font-size:12.5px; font-weight:800; display:grid; place-items:center;}
.build-note .ico{font-size:15px; color:var(--muted-2); margin-top:2px; flex:none;}
.form-status{margin-top:var(--s-4); padding:14px 16px; border-radius:var(--r-sm); font-size:14px; font-weight:600;
  display:none; align-items:center; gap:10px;}
.form-status.show{display:flex;}
.form-status.ok{background:#E9F7F1; color:#0A6B4A; border:1px solid #B6E4D2;}
.form-status.no{background:#FDF0EF; color:#A92A23; border:1px solid #F3C9C6;}
.form-status .ico{font-size:17px; flex:none;}

/* ============================================================
   WHY
   ============================================================ */
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-8) var(--s-6);}
.why-item{position:relative;}
.why-icon{width:52px; height:52px; border-radius:50%; display:grid; place-items:center; font-size:23px;
  background:var(--surface); border:1px solid var(--line); color:var(--brand-600); box-shadow:var(--e1);
  margin-bottom:var(--s-5); transition:transform var(--d-slow) var(--e-spring), box-shadow var(--d-base), border-color var(--d-base);}
.why-item:hover .why-icon{transform:translateY(-5px); border-color:var(--brand-300); box-shadow:0 14px 28px rgba(43,107,228,.16);}
.why-item h3{margin-bottom:8px; letter-spacing:-0.025em;}
.why-item p{font-size:14.5px; color:var(--muted); line-height:1.62;}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band{position:relative; overflow:hidden; padding-block:clamp(64px,7vw,96px); text-align:center; color:#fff;
  background:linear-gradient(128deg,var(--brand-700) 0%,var(--brand-600) 42%,var(--cyan-600) 100%);}
.cta-band::before{content:""; position:absolute; inset:0; opacity:.28;
  background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px);
  background-size:64px 64px; -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent);
  mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent);}
.cta-band::after{content:""; position:absolute; width:60vw; height:60vw; left:50%; top:-30%;
  transform:translateX(-50%); border-radius:50%; filter:blur(80px); background:rgba(255,255,255,.1);}
.cta-band .wrap{position:relative; z-index:2;}
.cta-band h2{color:#fff; margin-bottom:var(--s-4); text-wrap:balance;}
.cta-band h2 em{font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-weight:400; color:#CDEEFC;}
.cta-band p{font-size:clamp(16px,1.3vw,18.5px); color:rgba(255,255,255,.9); max-width:56ch;
  margin:0 auto var(--s-8);}
.cta-actions{display:flex; gap:var(--s-3); justify-content:center; flex-wrap:wrap;}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--ink-950); color:#8FA4BE; padding-block:clamp(56px,6vw,80px) var(--s-8);}
.foot-grid{display:grid; grid-template-columns:1.5fr .9fr .9fr 1.5fr; gap:var(--s-10) var(--s-8);
  padding-bottom:var(--s-12); border-bottom:1px solid rgba(255,255,255,.09);}
.foot-brand .brand{color:#fff; margin-bottom:var(--s-4);}
.foot-brand p{font-size:14.5px; max-width:34ch; line-height:1.65; margin-bottom:var(--s-6);}
.socials{display:flex; gap:10px;}
.socials a{width:40px; height:40px; border-radius:var(--r-xs); display:grid; place-items:center; font-size:17px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); color:#B6C7DC;
  transition:background var(--d-fast), color var(--d-fast), transform var(--d-base) var(--e-out), border-color var(--d-fast);}
.socials a:hover{background:var(--brand-500); border-color:var(--brand-500); color:#fff; transform:translateY(-3px);}
.foot-col h3{color:#fff; font-size:13px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  margin-bottom:var(--s-5);}
/* flex (not inline-flex) so each link takes its own line; fit-content keeps the
   hit area on the text rather than spanning the whole column */
.foot-col a{display:flex; width:fit-content; align-items:center; gap:8px; font-size:14.5px; margin-bottom:12px;
  transition:color var(--d-fast), transform var(--d-fast) var(--e-out);}
.foot-col a:hover{color:#fff; transform:translateX(3px);}
.foot-col a .ico{font-size:15px; color:var(--brand-400); opacity:.85;}
.foot-col a small{font-size:11.5px; font-weight:500; color:#7387A2; letter-spacing:0;}
/* Office addresses — <address> defaults to italic, so reset it */
.offices{margin-top:var(--s-5); padding-top:var(--s-5); border-top:1px solid rgba(255,255,255,.09);
  display:flex; flex-direction:column; gap:var(--s-5);}
.office{font-style:normal; font-size:13.5px; line-height:1.62; color:#8FA4BE;}
.office-label{display:flex; align-items:center; gap:7px; margin-bottom:6px;
  font-size:10.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:#C3D3E7;}
.office-label .ico{font-size:13px; color:var(--brand-400);}

.foot-bottom{padding-top:var(--s-6); display:flex; justify-content:space-between; align-items:center;
  gap:var(--s-4) var(--s-6); flex-wrap:wrap; font-size:13px;}
.foot-legal{display:flex; gap:8px 18px; flex-wrap:wrap; align-items:center;}
.foot-legal a{position:relative; font-size:13px; color:#8FA4BE; transition:color var(--d-fast);}
.foot-legal a:hover{color:#fff;}
.foot-legal a:not(:last-child)::after{content:""; position:absolute; right:-10px; top:50%; width:3px; height:3px;
  border-radius:50%; background:#3E5474; transform:translateY(-50%);}
.to-top{display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); font-size:12.5px; font-weight:700;
  color:#B6C7DC; transition:background var(--d-fast), color var(--d-fast), transform var(--d-base) var(--e-out);}
.to-top:hover{background:rgba(255,255,255,.1); color:#fff; transform:translateY(-2px);}

/* ============================================================
   WHATSAPP FLOAT
   ============================================================ */
.wa{position:fixed; right:max(20px,env(safe-area-inset-right)); bottom:max(20px,env(safe-area-inset-bottom));
  z-index:var(--z-float); display:inline-flex; align-items:center; gap:0; height:58px; padding:0 15px;
  border-radius:var(--r-pill); background:#25D366; color:#0A2A16; box-shadow:0 10px 30px rgba(37,211,102,.4);
  font-size:14.5px; font-weight:800; letter-spacing:-0.01em; overflow:hidden;
  transition:transform var(--d-base) var(--e-out), box-shadow var(--d-base), gap var(--d-base) var(--e-out);}
.wa .ico{font-size:28px; flex:none;}
.wa span{max-width:0; opacity:0; white-space:nowrap;
  transition:max-width var(--d-slow) var(--e-out), opacity var(--d-base);}
.wa:hover{transform:translateY(-3px); gap:10px; box-shadow:0 16px 40px rgba(37,211,102,.5);}
.wa:hover span{max-width:170px; opacity:1;}
.wa::before{content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:#25D366;
  animation:waPing 2.8s var(--e-out) infinite;}
@keyframes waPing{0%{transform:scale(1); opacity:.5} 68%{transform:scale(1.5); opacity:0} 100%{opacity:0}}

/* ============================================================
   POLICY MODAL
   ============================================================ */
.pmodal{position:fixed; inset:0; z-index:var(--z-modal); display:none; align-items:center; justify-content:center;
  padding:clamp(16px,4vw,32px);}
.pmodal.open{display:flex;}
.pmodal-backdrop{position:absolute; inset:0; background:rgba(5,10,20,.62);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); animation:fadeIn var(--d-base) ease;}
.pmodal-card{position:relative; background:var(--surface); border-radius:var(--r-xl); max-width:760px; width:100%;
  max-height:86vh; overflow:auto; padding:clamp(28px,4vw,46px); box-shadow:0 44px 120px rgba(5,10,20,.5);
  animation:popIn var(--d-slow) var(--e-out); overscroll-behavior:contain;}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}
@keyframes popIn{from{opacity:0; transform:translateY(26px) scale(.965)} to{opacity:1; transform:none}}
.pmodal-close{position:absolute; top:16px; right:16px; width:40px; height:40px; border:1px solid var(--line);
  border-radius:50%; background:var(--paper); color:var(--ink-800); cursor:pointer; display:grid; place-items:center;
  font-size:16px; transition:background var(--d-fast), transform var(--d-base) var(--e-out), border-color var(--d-fast);}
.pmodal-close:hover{background:var(--paper-2); border-color:#CFDBEA; transform:rotate(90deg);}
.pmodal-eyebrow{font-size:11.5px; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
  color:var(--brand-600); margin-bottom:10px;}
.pmodal-title{font-size:clamp(23px,2.6vw,30px); font-weight:700; letter-spacing:-0.03em;
  color:var(--ink-900); margin-bottom:var(--s-6); padding-right:48px;}
.prose{color:var(--muted); font-size:15px; line-height:1.78;}
.prose h2{color:var(--ink-900); letter-spacing:-0.02em;}
.prose h3{color:var(--ink-900); font-size:15.5px; font-weight:700; letter-spacing:-0.015em; margin:22px 0 8px;}
.prose p{margin-bottom:13px;}
.prose ul,.prose ol{margin:0 0 13px 20px;}
.prose li{margin-bottom:7px;}
.prose strong{color:var(--ink-700); font-weight:700;}
.prose a{color:var(--brand-600); font-weight:600; text-decoration:underline; text-underline-offset:3px;}
body.locked{overflow:hidden;}

/* ---- Comparison table (formation guide) ---- */
.cmp-table{width:100%; border-collapse:collapse; font-size:14px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; min-width:640px;}
.cmp-table th,.cmp-table td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:top;}
.cmp-table th{background:var(--brand-050); color:var(--ink-800); font-size:12px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase;}
.cmp-table tbody tr:last-child td{border-bottom:none;}
.cmp-table tbody tr:hover{background:var(--brand-050);}
.cmp-table td:first-child{white-space:nowrap; font-weight:700; color:var(--ink-900);}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
[data-rv]{opacity:0; transform:translateY(26px); will-change:opacity,transform;
  transition:opacity 760ms var(--e-out), transform 760ms var(--e-out);
  transition-delay:calc(var(--i,0) * 70ms);}
[data-rv].in{opacity:1; transform:none;}
[data-rv="fade"]{transform:none;}
[data-rv="left"]{transform:translateX(-26px);}
[data-rv="right"]{transform:translateX(26px);}
[data-rv="scale"]{transform:translateY(20px) scale(.975);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .cards,.addon-row,.pricing-grid{grid-template-columns:repeat(2,1fr);}
  .price-card.featured{grid-column:span 2; max-width:420px; margin-inline:auto;}
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .foot-grid{grid-template-columns:1.4fr 1fr 1fr;}
  .foot-brand{grid-column:1 / -1;}
  .build-shell{grid-template-columns:1fr; gap:var(--s-10);}
  .build-aside{position:static;}
}
@media (max-width:920px){
  .nav-links,.nav > .nav-inner > .nav-cta{display:none;}
  .burger{display:inline-flex;}
  .engines-grid{grid-template-columns:1fr;}
  .stats-grid{grid-template-columns:repeat(2,1fr); gap:var(--s-8) var(--s-4);}
  .stat:nth-child(3)::before{display:none;}
  .proc-grid{grid-template-columns:1fr; gap:0;}
  .proc-rail{left:28px; right:auto; top:0; bottom:0; width:2px; height:auto;}
  .proc-rail i{width:100%; height:100%; transform:scaleY(0); transform-origin:50% 0;}
  .step{display:grid; grid-template-columns:58px 1fr; column-gap:var(--s-5); padding-bottom:var(--s-10);}
  .step-dot{grid-row:1 / span 4; margin-bottom:0;}
  .step:last-child{padding-bottom:0;}
  .hero{min-height:auto; padding-top:130px;}
  .hero-body{padding-bottom:var(--s-12);}
}
@media (max-width:680px){
  /* Nudge functional copy up on small screens — hints and errors are read, not decoration */
  .card p,.step p,.why-item p,.addon p{font-size:15px;}
  .hint,.err,.build-note,.aside-note p,.next-list span{font-size:13.8px;}
  .svc label{font-size:15px; min-height:56px;}
  .cards,.addon-row,.why-grid,.pricing-grid{grid-template-columns:1fr;}
  .price-card.featured{grid-column:auto; max-width:none; margin-inline:0;}
  .order-plans,.field-row{grid-template-columns:1fr;}
  .bank-row strong{width:100%;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .stats-grid{grid-template-columns:1fr 1fr;}
  .svc-grid{grid-template-columns:1fr;}
  .hero-actions{flex-direction:column; align-items:stretch;}
  .hero-actions .btn{width:100%;}
  .cta-actions{flex-direction:column; align-items:stretch;}
  .cta-actions .btn{width:100%;}
  .hero-trust .wrap{flex-direction:column; align-items:flex-start; gap:var(--s-4);}
  .scroll-cue{display:none;}
  /* keep the trust row clear of the floating WhatsApp button */
  .trust-items{gap:12px 20px; padding-right:70px;}
  .engine-ghost{font-size:120px; top:-14px;}
  .wa{height:54px; padding:0 13px;}
  .wa span{display:none;}
  .foot-bottom{flex-direction:column; align-items:flex-start;}
}
@media (max-width:420px){
  .foot-grid{grid-template-columns:1fr;}
  .stat + .stat::before{display:none;}
}

/* Coarse pointers: kill hover-only affordances that never trigger */
@media (hover:none){
  .card-more{opacity:1; transform:none;}
  .wa span{max-width:0;}
}

/* Touch: every tappable element gets a ≥44px hit area without redrawing the layout.
   Keyed to viewport width as well as pointer type — some touch devices report "fine". */
@media (pointer:coarse), (max-width:920px){
  .engine-link{padding-top:14px;}
  .card-more{padding-block:11px; margin-top:6px;}
  .socials a{width:44px; height:44px;}
  .foot-col a{padding-block:11px; margin-bottom:0;}
  .foot-legal a{padding-block:12px;}
  .to-top{padding-block:12px;}
  .nav-links a{padding-block:14px;}
  .prose a{padding-block:2px; display:inline-block;}
  .crumb a{padding-block:12px;}
  .vid-toggle{padding-block:12px;}
  .crumb{margin-bottom:12px;}
  .contact-card a{padding-block:11px; display:inline-block;}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
/* Reduced motion means "no movement", not "no life". Everything that travels,
   loops, parallaxes or bounces is removed; opacity fades stay, because they
   don't trigger vestibular symptoms. The hero clip still plays and gets an
   explicit pause control (WCAG 2.2.2) rather than being silently withheld. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;}

  /* reveals fade in place — no travel, no blur */
  [data-rv]{transform:none !important; filter:none !important;
    transition:opacity 420ms linear !important; transition-delay:calc(var(--i,0) * 45ms) !important;}
  [data-rv].in{opacity:1; transform:none !important;}

  /* gentle crossfade when the clip is ready, instead of a hard cut */
  .hero-media video{transition:opacity 600ms linear !important;}

  /* looping decoration off */
  .eyebrow .pulse::after,.wa::before,.scroll-cue .rail::after{display:none !important;}
  .hero h1 em{background-position:0 center !important;}
  .btn::after,.build-btn::after{display:none !important;}

  .drawer a{opacity:1; transform:none;}
  .proc-rail i{transform:none !important;}
}

/* ============================================================
   MULTI-PAGE ADDITIONS
   ============================================================ */

/* Active nav item */
.nav-links a[aria-current="page"]{color:#fff;}
.nav.stuck .nav-links a[aria-current="page"]{color:var(--brand-600);}
.nav-links a[aria-current="page"]::after{transform:scaleX(1); transform-origin:0 50%;}
.drawer a[aria-current="page"]{color:var(--brand-600);}
.drawer a[aria-current="page"] .ico{transform:translateX(0); opacity:1;}

/* ---- Inner page header (no video: inner pages stay light) ---- */
.page-head{position:relative; overflow:hidden; isolation:isolate; padding:calc(80px + var(--s-20)) 0 var(--s-20);
  background:linear-gradient(150deg,var(--ink-950) 0%,var(--ink-850) 46%,var(--brand-800) 118%); color:#fff;}
.page-head::before{content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px); background-size:3px 3px;}
.page-head::after{content:""; position:absolute; z-index:-1; width:52vw; height:52vw; right:-12vw; top:-22vw;
  border-radius:50%; filter:blur(100px); background:rgba(30,82,201,.3);}
.page-head.teal::after{background:rgba(12,143,196,.3);}
.page-head h1{color:#fff; font-size:clamp(34px,4.6vw,56px); margin-bottom:var(--s-5); text-wrap:balance;}
.page-head h1 em{font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-weight:400;
  background:linear-gradient(102deg,#8AB8FB,#5FD3F5 60%,#A9E7FC);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.page-head .lede{font-size:clamp(16px,1.35vw,19px); color:#C3D3E7; max-width:60ch;}
.page-head .klabel{color:var(--cyan-400);}
.page-head-inner{max-width:820px;}
.page-head .hero-actions{margin-top:var(--s-8); margin-bottom:0;}

/* Breadcrumb */
.crumb{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:var(--s-6);
  font-size:13px; font-weight:600; color:#8FA4BE;}
.crumb a{color:#8FA4BE; transition:color var(--d-fast);}
.crumb a:hover{color:#fff;}
.crumb .ico{font-size:13px; opacity:.5;}
.crumb [aria-current]{color:#fff;}

/* ---- FAQ accordion ---- */
.faq-list{max-width:880px; margin:0 auto; display:flex; flex-direction:column; gap:12px;}
.faq{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  transition:border-color var(--d-base), box-shadow var(--d-base);}
.faq[open]{border-color:var(--brand-300); box-shadow:0 14px 36px rgba(19,42,71,.08);}
.faq summary{list-style:none; cursor:pointer; padding:20px 24px; display:flex; align-items:center;
  justify-content:space-between; gap:18px; font-size:16.5px; font-weight:700; letter-spacing:-0.02em; color:var(--ink-900);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--brand-600);}
.faq summary .ico{flex:none; font-size:17px; color:var(--brand-500); transition:transform var(--d-base) var(--e-out);}
.faq[open] summary .ico{transform:rotate(180deg);}
.faq-body{padding:0 24px 22px; font-size:15px; line-height:1.72; color:var(--muted);}
.faq-body p + p{margin-top:11px;}
.faq-body strong{color:var(--ink-700);}

/* ---- Contact cards (Get Started page) ---- */
.contact-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5); margin-top:var(--s-10);}
.contact-grid-4{grid-template-columns:repeat(4,1fr);}
.contact-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px;
  transition:transform var(--d-slow) var(--e-out), box-shadow var(--d-slow), border-color var(--d-base);}
.contact-card:hover{transform:translateY(-5px); border-color:var(--brand-100); box-shadow:0 22px 46px rgba(19,42,71,.1);}
.contact-card .card-icon{width:46px; height:46px; font-size:21px; margin-bottom:16px;}
.contact-card h3{font-size:17px; margin-bottom:7px;}
.contact-card p,.contact-card address{font-style:normal; font-size:14.5px; color:var(--muted); line-height:1.6;}
.contact-card a{color:var(--brand-600); font-weight:600;}
.contact-card a:hover{text-decoration:underline; text-underline-offset:3px;}

/* ---- Cross-links between the two engines ---- */
.crosslink{display:grid; grid-template-columns:1fr auto; gap:var(--s-6); align-items:center;
  background:linear-gradient(140deg,var(--ink-850),var(--brand-800)); color:#fff;
  border-radius:var(--r-xl); padding:clamp(28px,3.4vw,42px); overflow:hidden; position:relative; isolation:isolate;}
.crosslink.teal{background:linear-gradient(140deg,var(--ink-850),#0A4F70 62%,var(--cyan-600));}
.crosslink::after{content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; padding:1px;
  background:linear-gradient(140deg,rgba(255,255,255,.3),rgba(255,255,255,.02) 46%,rgba(255,255,255,.14));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;}
.crosslink h2{color:#fff; font-size:clamp(22px,2.4vw,30px); margin-bottom:9px;}
.crosslink p{color:rgba(255,255,255,.82); font-size:15.5px; max-width:60ch;}

@media (max-width:920px){
  .contact-grid{grid-template-columns:1fr 1fr;}
  .page-head{padding-top:calc(80px + var(--s-12)); padding-bottom:var(--s-12);}
  .crosslink{grid-template-columns:1fr; text-align:left;}
}
@media (max-width:680px){
  .contact-grid{grid-template-columns:1fr;}
  .faq summary{font-size:15.5px; padding:17px 18px;}
  .faq-body{padding:0 18px 18px;}
  .crosslink .btn{width:100%;}
}