/* ==========================================================================
   Skylure LLC — Global Stylesheet
   Palette locked to brand: navy #0B1330 / blue #2954E3
   ========================================================================== */

:root{
  /* brand */
  --navy:#0B1330;
  --navy-700:#131D42;
  --navy-600:#1B2755;
  --ink:#070B16;
  --blue:#2954E3;
  --blue-light:#4F74FF;
  --blue-dark:#1C3CB0;
  --blue-pale:#EAF0FF;
  --blue-tint:#F2F6FF;

  /* surface */
  --bg:#F6F8FC;
  --card:#FFFFFF;
  --line:#E4E8F2;
  --line-soft:#EDF0F7;
  --slate:#5B6478;
  --slate-soft:#8890A0;
  --white:#FFFFFF;

  /* accents */
  --green:#0FA968;
  --green-pale:#E7F7F0;
  --amber:#C97A0A;
  --amber-pale:#FDF3E3;

  /* system */
  --radius:16px;
  --radius-lg:24px;
  --radius-sm:10px;
  --shadow-xs:0 1px 2px rgba(11,19,48,.05);
  --shadow-sm:0 2px 10px rgba(11,19,48,.05);
  --shadow-md:0 12px 32px rgba(11,19,48,.08);
  --shadow-lg:0 28px 70px rgba(11,19,48,.14);
  --shadow-blue:0 14px 34px rgba(41,84,227,.26);

  --ease:cubic-bezier(.22,.61,.36,1);
  --nav-h:74px;

  --f-display:'Space Grotesk',system-ui,sans-serif;
  --f-body:'Inter',system-ui,-apple-system,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 24px);-webkit-text-size-adjust:100%;}

body{
  background:var(--bg);
  color:var(--navy);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit;}
ul,ol{list-style:none;}
input,textarea,select{font:inherit;color:inherit;}

::selection{background:var(--blue);color:#fff;}

a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,summary:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--navy);color:#fff;padding:12px 20px;border-radius:0 0 8px 0;
  font-weight:700;font-size:14px;
}
.skip-link:focus{left:0;}

/* ---------- typography ---------- */
h1,h2,h3,h4{
  font-family:var(--f-display);
  color:var(--navy);
  line-height:1.1;
  letter-spacing:-.02em;
  font-weight:700;
}

.h-xl{font-size:clamp(2.5rem,1.55rem + 4.1vw,4.6rem);line-height:1.04;letter-spacing:-.033em;}
.h-lg{font-size:clamp(2rem,1.42rem + 2.5vw,3.25rem);line-height:1.07;letter-spacing:-.028em;}
.h-md{font-size:clamp(1.5rem,1.24rem + 1.1vw,2.1rem);line-height:1.14;letter-spacing:-.022em;}
.h-sm{font-size:clamp(1.15rem,1.06rem + .4vw,1.4rem);line-height:1.25;letter-spacing:-.015em;}
.h-xs{font-size:1.0625rem;line-height:1.35;letter-spacing:-.01em;}

.lead{
  font-size:clamp(1.0625rem,1.01rem + .25vw,1.2rem);
  color:var(--slate);
  line-height:1.68;
  max-width:62ch;
}
.muted{color:var(--slate);}
.small{font-size:.875rem;line-height:1.6;}
.tiny{font-size:.8125rem;line-height:1.55;}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.center{text-align:center;}
.center .lead{margin-left:auto;margin-right:auto;}
.grad-text{
  background:linear-gradient(100deg,var(--blue) 0%,var(--blue-light) 55%,#7A97FF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.eyebrow{
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--blue);
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-bottom:20px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:currentColor;flex:0 0 26px;}
.center .eyebrow{justify-content:center;}
.eyebrow.on-dark{color:var(--blue-light);}

/* ---------- layout ---------- */
.wrap{max-width:1240px;margin:0 auto;padding:0 40px;}
.wrap-narrow{max-width:880px;margin:0 auto;padding:0 40px;}

.sec{padding:clamp(64px,7vw,116px) 0;}
.sec-sm{padding:clamp(48px,5vw,80px) 0;}
.sec-head{max-width:720px;margin-bottom:clamp(40px,4.5vw,64px);}
.center.sec-head{margin-left:auto;margin-right:auto;}

/* Grid and flex children default to min-width:auto, so a wide child (a table
   with a min-width, a long unbroken string) refuses to shrink and pushes the
   whole layout past the viewport. This is what made the legal pages scroll
   sideways on phones. min-width:0 lets tracks shrink so inner scroll
   containers can do their job. */
.grid > *,.split > *,.legal-grid > *,.hero-grid > *,
.cta-inner > *,.stat-grid > *,.foot-grid > *,.steps > *{min-width:0;}
.table-wrap{max-width:100%;}

.grid{display:grid;gap:24px;}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
.gap-lg{gap:32px;}
.gap-sm{gap:16px;}

.split{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(40px,5vw,80px);
  align-items:center;
}
.split.top{align-items:start;}

/* A column that stays pinned beside a long scrolling list on desktop. It MUST
   drop to static once .split collapses to one column, or it stays pinned over
   the content that is now below it instead of beside it. */
.sticky-col{position:sticky;top:calc(var(--nav-h) + 32px);}

.stack-xs > * + *{margin-top:10px;}
.stack-sm > * + *{margin-top:16px;}
.stack   > * + *{margin-top:24px;}
.stack-lg > * + *{margin-top:36px;}

.divider{height:1px;background:var(--line);border:0;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:700;font-size:.9375rem;letter-spacing:-.005em;
  padding:15px 28px;border-radius:11px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s,color .2s,border-color .2s;
  white-space:nowrap;line-height:1;
}
.btn svg{width:17px;height:17px;flex:0 0 17px;transition:transform .25s var(--ease);}
.btn:hover svg{transform:translateX(3px);}

.btn-primary{background:var(--blue);color:#fff;box-shadow:var(--shadow-blue);}
.btn-primary:hover{background:var(--blue-dark);transform:translateY(-2px);box-shadow:0 18px 40px rgba(41,84,227,.34);}

.btn-dark{background:var(--navy);color:#fff;box-shadow:0 12px 28px rgba(11,19,48,.22);}
.btn-dark:hover{background:var(--navy-600);transform:translateY(-2px);}

.btn-ghost{background:#fff;color:var(--navy);border:1px solid var(--line);box-shadow:var(--shadow-xs);}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px);box-shadow:var(--shadow-sm);}

.btn-light{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(6px);}
.btn-light:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.45);transform:translateY(-2px);}

.btn-white{background:#fff;color:var(--navy);box-shadow:0 14px 34px rgba(0,0,0,.22);}
.btn-white:hover{transform:translateY(-2px);color:var(--blue);}

.btn-sm{padding:11px 20px;font-size:.875rem;border-radius:9px;}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;}
.center .btn-row{justify-content:center;}

.link-arrow{
  display:inline-flex;align-items:center;gap:8px;padding:7px 0;
  font-weight:700;font-size:.9375rem;color:var(--blue);
}
.link-arrow svg{width:16px;height:16px;transition:transform .25s var(--ease);}
.link-arrow:hover svg{transform:translateX(4px);}

/* ---------- badges / pills ---------- */
.badge{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:6px 13px;border-radius:100px;
  background:var(--blue-pale);color:var(--blue);
}
.badge.green{background:var(--green-pale);color:var(--green);}
.badge.amber{background:var(--amber-pale);color:var(--amber);}
.badge.neutral{background:#EEF1F7;color:var(--slate);}
.badge.on-dark{background:rgba(79,116,255,.16);color:#A9BEFF;}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor;}

.pill-row{display:flex;flex-wrap:wrap;gap:10px;}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:100px;
  background:#fff;border:1px solid var(--line);
  font-size:.875rem;font-weight:600;color:var(--navy);
  box-shadow:var(--shadow-xs);
  white-space:nowrap;flex:0 0 auto;
}
.pill.on-dark{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#D6DDEE;}
.pill svg,.badge svg{width:15px;height:15px;flex:0 0 15px;color:var(--blue);}
.pill.on-dark svg{color:var(--blue-light);}

/* ---------- header / nav ---------- */
header.site-head{
  position:fixed;top:0;left:0;right:0;z-index:200;
  background:rgba(246,248,252,.8);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s,box-shadow .3s;
}
header.site-head.scrolled{
  background:rgba(246,248,252,.94);
  border-bottom-color:var(--line);
  box-shadow:0 6px 26px rgba(11,19,48,.06);
}

.nav{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:var(--nav-h);
  max-width:1240px;margin:0 auto;padding:0 40px;
}

.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto;padding:4px 0;}
.brand img{height:40px;width:auto;}
.brand-text{display:flex;flex-direction:column;line-height:1;}
.brand-text .name{
  font-family:var(--f-display);font-weight:700;font-size:1.2rem;
  letter-spacing:.07em;color:var(--navy);
}
.brand-text .tag{
  font-size:.5625rem;letter-spacing:.19em;color:var(--slate-soft);
  font-weight:700;margin-top:4px;text-transform:uppercase;
}

.nav-links{display:flex;align-items:center;gap:4px;}
.nav-links > li{position:relative;}
.nav-links > li > a,.nav-trigger{
  display:flex;align-items:center;gap:6px;
  font-size:.9375rem;font-weight:600;color:var(--navy);
  padding:9px 14px;border-radius:9px;
  transition:color .2s,background .2s;
}
.nav-links > li > a:hover,.nav-trigger:hover{color:var(--blue);background:rgba(41,84,227,.06);}
.nav-links > li > a.active{color:var(--blue);}
.nav-links > li > a.active::after{
  content:"";position:absolute;left:14px;right:14px;bottom:1px;height:2px;
  background:var(--blue);border-radius:2px;
}
.nav-trigger svg{width:12px;height:12px;transition:transform .25s var(--ease);opacity:.6;}
.has-drop:hover .nav-trigger svg{transform:rotate(180deg);}

.nav-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto;}

/* dropdown */
.drop{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(8px);
  width:min(560px,80vw);
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  padding:12px;
  display:grid;grid-template-columns:1fr 1fr;gap:4px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
}
.has-drop::after{content:"";position:absolute;top:100%;left:0;right:0;height:14px;}
.has-drop:hover .drop,.has-drop:focus-within .drop{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.drop a{display:flex;gap:12px;padding:13px 14px;border-radius:11px;transition:background .18s;}
.drop a:hover{background:var(--blue-tint);}
.drop .di{
  flex:0 0 34px;height:34px;border-radius:9px;
  background:var(--blue-pale);color:var(--blue);
  display:grid;place-items:center;
}
.drop .di svg{width:17px;height:17px;}
.drop strong{display:block;font-size:.9rem;font-weight:700;color:var(--navy);line-height:1.3;}
.drop span{display:block;font-size:.78rem;color:var(--slate);line-height:1.45;margin-top:2px;}

/* burger + mobile drawer */
.burger{
  display:none;width:42px;height:42px;border-radius:10px;
  border:1px solid var(--line);background:#fff;
  place-items:center;flex:0 0 42px;
}
.burger span{
  display:block;width:17px;height:2px;background:var(--navy);border-radius:2px;
  position:relative;transition:transform .3s var(--ease),background .2s;
}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:17px;height:2px;background:var(--navy);border-radius:2px;
  transition:transform .3s var(--ease),top .2s,opacity .2s;
}
.burger span::before{top:-6px;}
.burger span::after{top:6px;}
body.menu-open .burger span{background:transparent;}
body.menu-open .burger span::before{top:0;transform:rotate(45deg);}
body.menu-open .burger span::after{top:0;transform:rotate(-45deg);}

.drawer{
  position:fixed;inset:var(--nav-h) 0 0;z-index:190;
  background:var(--bg);
  padding:28px 24px 48px;
  overflow-y:auto;
  transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
  border-top:1px solid var(--line);
}
body.menu-open .drawer{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);}
.drawer a{display:block;padding:14px 4px;font-size:1.0625rem;font-weight:600;border-bottom:1px solid var(--line-soft);}
.drawer a.sub{padding-left:20px;font-size:.95rem;font-weight:500;color:var(--slate);}
.drawer a:hover{color:var(--blue);}
.drawer .drawer-label{
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--slate-soft);font-weight:700;padding:22px 4px 8px;
}
.drawer .btn{width:100%;margin-top:26px;}

main{padding-top:var(--nav-h);}

/* ---------- decorative backdrops ---------- */
.bg-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 20%,transparent 75%);
  opacity:.7;
}
.bg-grid.on-dark{
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
}
.glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:.5;}
.glow.a{width:520px;height:520px;background:rgba(41,84,227,.28);top:-180px;right:-120px;}
.glow.b{width:420px;height:420px;background:rgba(122,151,255,.22);bottom:-160px;left:-140px;}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:clamp(60px,7vw,104px) 0 clamp(56px,6vw,88px);}
.hero .wrap{position:relative;z-index:2;}
/* keep hero glows clear of the section's bottom edge, or overflow:hidden
   clips them into a visible horizontal seam against the next section */
.hero .glow.a{width:620px;height:620px;top:-250px;right:-160px;opacity:.42;}
.hero .glow.b{width:440px;height:440px;top:160px;left:-210px;bottom:auto;opacity:.3;}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(40px,5vw,72px);align-items:center;}
.hero h1{margin-bottom:24px;}
.hero .lead{margin-bottom:34px;}

.hero-flag{
  display:inline-flex;align-items:center;gap:10px;
  background:#fff;border:1px solid var(--line);
  padding:7px 8px 7px 14px;border-radius:100px;
  font-size:.8125rem;font-weight:600;color:var(--slate);
  box-shadow:var(--shadow-xs);margin-bottom:26px;
}
.hero-flag b{color:var(--navy);font-weight:700;}
.hero-flag .chip{
  background:var(--navy);color:#fff;font-size:.75rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:100px;
}

.trust-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;padding-top:8px;}
.trust-row .t{display:flex;align-items:center;gap:8px;font-size:.8125rem;font-weight:600;color:var(--slate);}
.trust-row svg{width:15px;height:15px;color:var(--green);flex:0 0 15px;}

/* hero visual card */
.hero-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);overflow:hidden;
}
.hc-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--line-soft);background:#FBFCFE;
}
.hc-top .dots{display:flex;gap:6px;}
.hc-top .dots i{width:9px;height:9px;border-radius:50%;background:var(--line);display:block;}
.hc-top .dots i:first-child{background:#FF6058;}
.hc-top .dots i:nth-child(2){background:#FFBD2E;}
.hc-top .dots i:nth-child(3){background:#28CA42;}
.hc-title{font-size:.78rem;font-weight:700;color:var(--slate);letter-spacing:.02em;}
.hc-body{padding:22px 20px;}

.kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px;}
.kpi{background:var(--blue-tint);border:1px solid var(--line-soft);border-radius:12px;padding:13px 14px;}
.kpi .lbl{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-soft);}
.kpi .val{font-family:var(--f-display);font-size:1.4rem;font-weight:700;color:var(--navy);margin-top:5px;line-height:1;}
.kpi .val.up{color:var(--green);}

.chart{height:132px;display:flex;align-items:flex-end;gap:7px;padding-top:8px;}
.chart .bar{
  flex:1;background:linear-gradient(180deg,var(--blue-light),var(--blue));
  border-radius:5px 5px 3px 3px;min-height:6px;
  transform-origin:bottom;animation:growBar 1s var(--ease) backwards;
}
.chart .bar:nth-child(even){background:linear-gradient(180deg,#9DB4FF,#5C7DF0);}
@keyframes growBar{from{transform:scaleY(.06);opacity:0;}to{transform:scaleY(1);opacity:1;}}

.hc-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 20px;border-top:1px solid var(--line-soft);background:#FBFCFE;
  font-size:.78rem;color:var(--slate);font-weight:600;
}
.live{display:inline-flex;align-items:center;gap:7px;color:var(--green);font-weight:700;}
.live i{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 1.8s infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(1.35);}}

.float-tag{
  position:absolute;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:11px 15px;box-shadow:var(--shadow-md);
  display:flex;align-items:center;gap:10px;z-index:3;
  animation:floaty 5s ease-in-out infinite;
}
.float-tag .ic{
  width:30px;height:30px;border-radius:8px;background:var(--blue-pale);color:var(--blue);
  display:grid;place-items:center;flex:0 0 30px;
}
.float-tag .ic svg{width:15px;height:15px;}
.float-tag .k{display:block;font-size:.68rem;color:var(--slate-soft);font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1;}
.float-tag .v{display:block;font-family:var(--f-display);font-size:.95rem;font-weight:700;color:var(--navy);margin-top:4px;line-height:1;}
.float-tag.tl{top:-26px;left:-34px;animation-delay:-1.5s;}
.float-tag.br{bottom:-36px;right:-38px;}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}

/* ---------- page hero (interior) ---------- */
.page-hero{
  position:relative;overflow:hidden;
  background:var(--navy);color:#fff;
  padding:clamp(56px,6vw,86px) 0 clamp(56px,6vw,86px);
}
.page-hero .wrap{position:relative;z-index:2;}
.page-hero h1{color:#fff;}
.page-hero .lead{color:#AEB8D0;}
.page-hero .eyebrow{color:var(--blue-light);}

.crumb{display:flex;align-items:center;gap:9px;font-size:.8125rem;color:#8792AE;font-weight:600;margin-bottom:26px;}
.crumb a{display:inline-block;padding:8px 0;}
.crumb a:hover{color:#fff;}
.crumb span{opacity:.45;}
.crumb b{color:#fff;font-weight:600;}

/* ---------- cards ---------- */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px;box-shadow:var(--shadow-xs);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
  position:relative;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#D3DBEC;}
.card h3{margin-bottom:10px;}
.card p{color:var(--slate);font-size:.9375rem;line-height:1.66;}
.card.flat:hover{transform:none;box-shadow:var(--shadow-xs);}

.card-ic{
  width:48px;height:48px;border-radius:13px;
  background:linear-gradient(140deg,var(--blue) 0%,var(--blue-light) 100%);
  color:#fff;display:grid;place-items:center;margin-bottom:20px;
  box-shadow:0 8px 20px rgba(41,84,227,.24);
}
.card-ic svg{width:22px;height:22px;}
.card-ic.soft{background:var(--blue-pale);color:var(--blue);box-shadow:none;}
.card-ic.dark{background:var(--navy);box-shadow:0 8px 20px rgba(11,19,48,.2);}

.card-link{display:flex;flex-direction:column;height:100%;}
.card-link .link-arrow{margin-top:auto;padding-top:20px;}

.card-num{
  font-family:var(--f-display);font-size:.8125rem;font-weight:700;
  color:var(--blue);letter-spacing:.14em;margin-bottom:14px;display:block;
}

.card.dark{background:var(--navy);border-color:rgba(255,255,255,.1);color:#fff;}
.card.dark h3{color:#fff;}
.card.dark p{color:#A6B0C9;}

.card.accent{
  background:linear-gradient(150deg,var(--blue) 0%,var(--blue-dark) 100%);
  border-color:transparent;color:#fff;box-shadow:var(--shadow-blue);
}
.card.accent h3{color:#fff;}
.card.accent p{color:rgba(255,255,255,.85);}
.card.accent .card-ic{background:rgba(255,255,255,.16);box-shadow:none;}

/* feature list inside cards */
.ticks{display:grid;gap:11px;margin-top:20px;}
.ticks li{display:flex;gap:11px;font-size:.9rem;color:var(--slate);line-height:1.55;}
.ticks svg{width:17px;height:17px;flex:0 0 17px;margin-top:3px;color:var(--blue);}
.ticks.green svg{color:var(--green);}
.ticks.on-dark li{color:#B3BDD4;}
.ticks.on-dark svg{color:var(--blue-light);}

/* ---------- stats ---------- */
.stats-band{
  background:var(--navy);color:#fff;position:relative;overflow:hidden;
  border-radius:var(--radius-lg);padding:clamp(38px,4vw,54px) clamp(28px,3.5vw,52px);
}
.stats-band .wrap{position:relative;z-index:2;}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;z-index:2;}
.stat{position:relative;}
.stat .n{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(2rem,1.5rem + 2vw,3rem);line-height:1;
  letter-spacing:-.03em;
}
.stat .l{
  font-size:.8125rem;font-weight:600;color:var(--slate);
  margin-top:10px;letter-spacing:.02em;line-height:1.45;
}
.stats-band .stat .n{color:#fff;}
.stats-band .stat .l{color:#9AA5C0;}
.stat-grid.bordered .stat{padding-left:24px;border-left:1px solid var(--line);}
.stats-band .stat-grid.bordered .stat{border-left-color:rgba(255,255,255,.14);}
.stat-grid.bordered .stat:first-child{padding-left:0;border-left:0;}

/* ---------- process steps ---------- */
.steps{display:grid;gap:0;counter-reset:st;}
.step{
  display:grid;grid-template-columns:64px 1fr;gap:26px;
  padding:30px 0;border-top:1px solid var(--line);
}
.step:last-child{border-bottom:1px solid var(--line);}
.step .sn{
  font-family:var(--f-display);font-size:1.05rem;font-weight:700;
  color:var(--blue);letter-spacing:.06em;padding-top:2px;
}
.step h3{margin-bottom:8px;}
.step p{color:var(--slate);font-size:.9375rem;max-width:64ch;}
.step .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}

/* ---------- team ---------- */
.team-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;box-shadow:var(--shadow-xs);text-align:center;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.team-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#D3DBEC;}
.avatar{
  width:76px;height:76px;border-radius:50%;margin:0 auto 18px;
  background:linear-gradient(140deg,var(--blue) 0%,var(--blue-light) 100%);
  color:#fff;display:grid;place-items:center;
  font-family:var(--f-display);font-weight:700;font-size:1.5rem;letter-spacing:.02em;
  box-shadow:0 10px 24px rgba(41,84,227,.26);
}
.team-card h3{font-size:1.0625rem;margin-bottom:4px;}
.team-card .role{font-size:.8125rem;font-weight:700;color:var(--blue);letter-spacing:.04em;margin-bottom:12px;}
.team-card p{font-size:.875rem;color:var(--slate);line-height:1.62;}

.team-lead{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,36px);
  align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(26px,3.4vw,42px);box-shadow:var(--shadow-sm);
}
/* Source image is 560x700 (4:5); the box keeps that ratio so object-fit never
   has to crop the face out. */
.team-lead .team-photo{
  width:212px;height:265px;flex:0 0 212px;
  object-fit:cover;object-position:50% 18%;
  border-radius:18px;
  border:1px solid var(--line);
  box-shadow:0 18px 40px rgba(11,19,48,.16);
  background:var(--blue-tint);
}
@media (max-width:680px){
  .team-lead{grid-template-columns:1fr;justify-items:center;text-align:center;}
  .team-lead .team-photo{width:176px;height:220px;flex:0 0 176px;}
  .team-lead .lead{margin-left:auto;margin-right:auto;}
  .team-lead .pill-row{justify-content:center;}
}

/* ---------- timeline ---------- */
.timeline{position:relative;padding-left:34px;}
.timeline::before{
  content:"";position:absolute;left:8px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,var(--blue),var(--blue-pale));border-radius:2px;
}
.tl-item{position:relative;padding-bottom:34px;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{
  content:"";position:absolute;left:-34px;top:5px;width:18px;height:18px;border-radius:50%;
  background:#fff;border:4px solid var(--blue);box-shadow:0 0 0 4px var(--bg);
}
.tl-item .yr{
  font-family:var(--f-mono);font-size:.8125rem;font-weight:600;color:var(--blue);
  letter-spacing:.06em;margin-bottom:6px;display:block;
}
.tl-item h3{font-size:1.0625rem;margin-bottom:6px;}
.tl-item p{font-size:.9375rem;color:var(--slate);line-height:1.65;max-width:56ch;}

/* ---------- value cards ---------- */
.value{display:flex;gap:18px;padding:24px 0;border-bottom:1px solid var(--line);}
.value:last-child{border-bottom:0;}
.value .vi{
  width:44px;height:44px;flex:0 0 44px;border-radius:12px;
  background:var(--blue-pale);color:var(--blue);display:grid;place-items:center;
}
.value .vi svg{width:20px;height:20px;}
.value h3{font-size:1.0625rem;margin-bottom:6px;}
.value p{font-size:.9375rem;color:var(--slate);line-height:1.65;}

/* ---------- table ---------- */
.table-wrap{
  overflow-x:auto;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-xs);
  -webkit-overflow-scrolling:touch;
  /* Scroll affordance: an inner shadow appears on whichever edge still has
     content past it, and fades out at the ends. Without this a phone user has
     no cue that the compliance and traffic-source tables scroll sideways.
     The `local` layers mask the `scroll` shadow layers as you reach each end. */
  background-image:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
    linear-gradient(to left,  #fff 30%, rgba(255,255,255,0)),
    radial-gradient(farthest-side at 0 50%,   rgba(11,19,48,.16), rgba(11,19,48,0)),
    radial-gradient(farthest-side at 100% 50%,rgba(11,19,48,.16), rgba(11,19,48,0));
  background-position:left center, right center, left center, right center;
  background-repeat:no-repeat;
  background-size:42px 100%, 42px 100%, 15px 100%, 15px 100%;
  background-attachment:local, local, scroll, scroll;
}
table{width:100%;border-collapse:collapse;min-width:620px;}
th,td{padding:16px 22px;text-align:left;font-size:.9rem;border-bottom:1px solid var(--line-soft);vertical-align:top;}
th{
  font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--slate-soft);background:#FAFBFE;white-space:nowrap;
}
td{color:var(--slate);line-height:1.6;}
td:first-child{font-weight:700;color:var(--navy);}
tbody tr:last-child td{border-bottom:0;}
tbody tr:hover td{background:#FCFDFF;}

/* Two-column key/value tables (company details, unit economics, "what gets
   reported"). They sit inside cards, so on a phone the value column gets
   squeezed to a few characters and addresses/emails clip mid-word. Stack them
   label-above-value instead of forcing a sideways scroll — this content is
   exactly what a network reviewer reads. */
table.kv{min-width:0;width:100%;}
@media (max-width:680px){
  table.kv,table.kv tbody,table.kv tr,table.kv td{display:block;width:100%;}
  table.kv tr{padding:13px 0;border-bottom:1px solid var(--line-soft);}
  table.kv tr:last-child{border-bottom:0;padding-bottom:0;}
  table.kv tr:first-child{padding-top:0;}
  table.kv td{border:0;padding:0;}
  table.kv td:first-child{
    font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
    color:var(--slate-soft);margin-bottom:5px;
  }
  table.kv td:last-child{font-size:.9375rem;line-height:1.55;}
  table.kv tr:hover td{background:transparent;}
  /* inside a dark card the label needs a lighter tone than --slate-soft */
  .card.dark table.kv td:first-child{color:#7E89A6 !important;}
  /* .flush = the card around this table has no padding of its own, so the
     stacked rows must supply their own inset or text hits the card edge. */
  .table-wrap.flush table.kv tr{padding-left:22px;padding-right:22px;}
  .table-wrap.flush table.kv tr:first-child{padding-top:16px;}
  .table-wrap.flush table.kv tr:last-child{padding-bottom:20px;}
}

/* Wide data tables (traffic sources, compliance positions, GDPR legal bases,
   the service comparison). On a phone these are ~350px wide, so columns 2+ get
   clipped and the reader has to scroll sideways inside the box to reach the
   part that matters. Below 680px each row becomes a labelled block instead.
   data-label is injected at build time from the <thead>. */
@media (max-width:680px){
  table.rtable{min-width:0;width:100%;}
  table.rtable thead{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;   /* keep for screen readers */
  }
  table.rtable,table.rtable tbody,table.rtable tr,table.rtable td{
    display:block;width:100%;
  }
  table.rtable tr{
    padding:18px 20px;border-bottom:1px solid var(--line);
  }
  table.rtable tr:last-child{border-bottom:0;}
  table.rtable tr:hover td{background:transparent;}
  table.rtable td{border:0;padding:0;}
  table.rtable td + td{margin-top:12px;}
  table.rtable td::before{
    content:attr(data-label);
    display:block;
    font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:var(--slate-soft);margin-bottom:4px;
  }
  /* first cell reads as the row's title, so it needs no label above it */
  table.rtable td:first-child{
    font-family:var(--f-display);font-size:1.0625rem;font-weight:700;
    color:var(--navy);line-height:1.3;
  }
  table.rtable td:first-child::before{display:none;}
  /* these tables supply their own inset, so the wrapper must not add one */
  .table-wrap:has(table.rtable){background-image:none;}
}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  padding:24px 0;cursor:pointer;list-style:none;
  font-family:var(--f-display);font-weight:700;font-size:1.0625rem;
  color:var(--navy);line-height:1.4;letter-spacing:-.01em;
  transition:color .2s;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--blue);}
.faq summary .mk{
  flex:0 0 26px;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line);display:grid;place-items:center;
  position:relative;transition:background .25s,border-color .25s,transform .3s var(--ease);
  margin-top:1px;
}
.faq summary .mk::before,.faq summary .mk::after{
  content:"";position:absolute;background:var(--navy);border-radius:2px;transition:opacity .25s,background .25s;
}
.faq summary .mk::before{width:11px;height:1.5px;}
.faq summary .mk::after{width:1.5px;height:11px;}
.faq details[open] summary{color:var(--blue);}
.faq details[open] .mk{background:var(--blue);border-color:var(--blue);transform:rotate(180deg);}
.faq details[open] .mk::before{background:#fff;}
.faq details[open] .mk::after{opacity:0;}
.faq .ans{padding:0 60px 26px 0;color:var(--slate);font-size:.9375rem;line-height:1.7;}
.faq .ans > * + *{margin-top:12px;}

/* ---------- logo / capability marquee ---------- */
.marquee{
  overflow:hidden;position:relative;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{display:flex;gap:14px;width:max-content;animation:slide 42s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes slide{to{transform:translateX(-50%);}}

/* ---------- CTA band ---------- */
.cta-band{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--navy) 0%,#16224E 55%,#1C3CB0 130%);
  border-radius:var(--radius-lg);
  padding:clamp(44px,5vw,72px) clamp(30px,4vw,64px);
  color:#fff;
}
.cta-band .wrap{position:relative;z-index:2;}
.cta-band h2{color:#fff;}
.cta-band p{color:#B0BAD2;max-width:56ch;}
.cta-inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.3fr auto;gap:36px;align-items:center;
}

/* ---------- forms ---------- */
.form-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(28px,3.2vw,44px);box-shadow:var(--shadow-md);
}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;}
.field label{font-size:.8125rem;font-weight:700;color:var(--navy);letter-spacing:.01em;}
.field label .req{color:var(--blue);}
.field input,.field textarea,.field select{
  width:100%;padding:13px 16px;
  background:#FBFCFE;border:1px solid var(--line);border-radius:11px;
  font-size:.9375rem;color:var(--navy);
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.field textarea{min-height:130px;resize:vertical;line-height:1.6;}
.field select{
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235B6478' stroke-width='1.8'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:15px;
  padding-right:42px;
}
.field input::placeholder,.field textarea::placeholder{color:#A9B0C0;}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--blue);background:#fff;
  box-shadow:0 0 0 4px rgba(41,84,227,.1);
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.form-note{font-size:.78rem;color:var(--slate-soft);line-height:1.6;margin-top:16px;}
.form-note a{color:var(--blue);font-weight:600;}
.consent{display:flex;gap:11px;align-items:flex-start;margin-bottom:22px;}
.consent input{width:24px;height:24px;flex:0 0 24px;margin-top:0;accent-color:var(--blue);cursor:pointer;}
.consent label{font-size:.8125rem;color:var(--slate);font-weight:500;line-height:1.55;cursor:pointer;}

/* contact detail rows */
.contact-rows{display:grid;gap:12px;}
.crow{
  display:flex;gap:16px;align-items:flex-start;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;box-shadow:var(--shadow-xs);
  transition:border-color .25s,transform .25s var(--ease);
}
a.crow:hover{border-color:var(--blue);transform:translateX(3px);}
.crow .ci{
  width:42px;height:42px;flex:0 0 42px;border-radius:11px;
  background:var(--blue-pale);color:var(--blue);display:grid;place-items:center;
}
.crow .ci svg{width:19px;height:19px;}
.crow > span:last-child{display:block;min-width:0;}
.crow .k{display:block;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-soft);}
.crow .v{display:block;font-size:.9375rem;font-weight:700;color:var(--navy);margin-top:5px;line-height:1.5;word-break:break-word;}
.crow .v.normal{font-weight:500;color:var(--slate);}

/* right-hand column on the contact page starts below the overlapping hero */
.contact-side{padding-top:clamp(56px,7vw,96px);}
@media (max-width:960px){ .contact-side{padding-top:0;} }

/* ---------- legal / prose ---------- */
.prose{max-width:76ch;}
.prose h2{font-size:1.5rem;margin:44px 0 14px;}
.prose h2:first-child{margin-top:0;}
.prose h3{font-size:1.125rem;margin:28px 0 10px;}
.prose p{color:var(--slate);margin-bottom:14px;font-size:.9375rem;line-height:1.75;}
.prose ul{list-style:disc;padding-left:22px;margin-bottom:16px;}
.prose ol{list-style:decimal;padding-left:22px;margin-bottom:16px;}
.prose li{color:var(--slate);margin-bottom:8px;font-size:.9375rem;line-height:1.7;}
.prose a{color:var(--blue);font-weight:600;}
.prose a:hover{text-decoration:underline;}
.prose strong{color:var(--navy);font-weight:700;}
.prose table{margin:18px 0;}

.legal-grid{
  display:grid;grid-template-columns:250px 1fr;
  gap:clamp(32px,4vw,64px);align-items:start;
}

.legal-meta{
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;
  padding:18px 24px;background:var(--blue-tint);border:1px solid #D7E2FF;
  border-radius:var(--radius);margin-bottom:36px;
}
.legal-meta span{font-size:.8125rem;color:var(--slate);font-weight:600;}
.legal-meta b{color:var(--navy);}

.toc{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 26px;box-shadow:var(--shadow-xs);
  position:sticky;top:calc(var(--nav-h) + 24px);
}
.toc .lbl{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-soft);margin-bottom:14px;}
.toc a{display:block;padding:9px 0;font-size:.875rem;color:var(--slate);font-weight:500;line-height:1.45;}
.toc a:hover{color:var(--blue);}

/* ---------- footer ---------- */
footer.site-foot{
  background:var(--ink);color:#fff;position:relative;overflow:hidden;
  padding:clamp(56px,6vw,84px) 0 0;margin-top:0;
}
.foot-grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px;
  padding-bottom:52px;position:relative;z-index:2;
}
.foot-brand .brand{margin-bottom:20px;}
.foot-brand .brand img{height:44px;}
.foot-brand .brand-text .name{color:#fff;}
.foot-brand .brand-text .tag{color:#6C7590;}
.foot-brand p{color:#8B95AE;font-size:.9rem;line-height:1.7;max-width:38ch;margin-bottom:22px;}

.foot-col h4{
  font-family:var(--f-body);font-size:.75rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:#6C7590;margin-bottom:18px;
}
.foot-col a,.foot-col li{
  display:block;color:#9BA5BD;font-size:.9rem;padding:9px 0;line-height:1.5;
  transition:color .2s,transform .2s var(--ease);
}
.foot-col a:hover{color:#fff;transform:translateX(3px);}

.foot-addr{color:#8B95AE;font-size:.85rem;line-height:1.7;font-style:normal;}
.foot-addr strong{color:#C3CBDD;font-weight:600;display:block;margin-bottom:4px;}

.foot-bar{
  border-top:1px solid rgba(255,255,255,.09);
  padding:26px 0;position:relative;z-index:2;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
}
.foot-bar p,.foot-bar a{color:#6C7590;font-size:.8125rem;}
.foot-bar a:hover{color:#fff;}
.foot-bar nav{display:flex;flex-wrap:wrap;gap:10px 22px;}
.foot-bar nav a{display:inline-block;padding:8px 0;}

.foot-disc{
  border-top:1px solid rgba(255,255,255,.06);
  padding:22px 0 34px;position:relative;z-index:2;
}
.foot-disc p{color:#565F78;font-size:.75rem;line-height:1.7;max-width:100ch;}

/* ---------- reveal animation ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.rv.in{opacity:1;transform:none;}
.rv.d1{transition-delay:.08s;} .rv.d2{transition-delay:.16s;}
.rv.d3{transition-delay:.24s;} .rv.d4{transition-delay:.32s;}
.rv.d5{transition-delay:.4s;}  .rv.d6{transition-delay:.48s;}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .foot-grid{grid-template-columns:1.4fr 1fr 1fr;}
  .foot-brand{grid-column:1/-1;}
}

@media (max-width:960px){
  :root{--nav-h:68px;}
  .nav-links,.nav-actions .btn{display:none;}
  .burger{display:grid;}
  .wrap,.wrap-narrow,.nav{padding-left:24px;padding-right:24px;}
  .hero-grid,.split{grid-template-columns:1fr;}
  .hero-visual{max-width:560px;margin:0 auto;}
  .g4{grid-template-columns:repeat(2,1fr);}
  .g3{grid-template-columns:repeat(2,1fr);}
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:28px 24px;}
  .stat-grid.bordered .stat:nth-child(odd){padding-left:0;border-left:0;}
  .cta-inner{grid-template-columns:1fr;gap:26px;}
  .legal-grid{grid-template-columns:1fr;}
  .toc,.sticky-col{position:static;}
  .float-tag.tl{left:-8px;top:-14px;}
  .float-tag.br{right:-6px;bottom:-14px;}
}

@media (max-width:680px){
  body{font-size:15.5px;}
  .wrap,.wrap-narrow,.nav{padding-left:18px;padding-right:18px;}
  .g2,.g3,.g4{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .foot-grid{grid-template-columns:1fr;gap:34px;padding-bottom:38px;}
  .step{grid-template-columns:1fr;gap:10px;}
  .brand-text .name{font-size:1.05rem;}
  .brand-text .tag{display:none;}
  .brand img{height:34px;}
  .btn{padding:14px 22px;}
  .btn-row .btn{flex:1 1 100%;}
  .kpi-row{grid-template-columns:1fr 1fr;}
  .kpi-row .kpi:last-child{display:none;}
  .float-tag{display:none;}
  .faq .ans{padding-right:0;}
  .card{padding:24px;}
  .prose h2{font-size:1.3rem;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .rv{opacity:1;transform:none;}
}

@media print{
  header.site-head,.drawer,footer.site-foot,.cta-band,.burger{display:none !important;}
  main{padding-top:0;}
  body{background:#fff;}
  .rv{opacity:1;transform:none;}
}