/* =====================================================================
   Comptrusence, shared design system
   Extracted from "New design" and extended for the unified site.
   ===================================================================== */
:root{
  --navy:#071C3C;
  --navy-2:#0E2A54;
  --blue:#2F6FED;
  --blue-bright:#5B93FF;
  --ice:#EAF1FF;
  --white:#FFFFFF;
  --slate:#5B6B84;
  --line:#DCE6F7;
  --ok:#16a34a;
  --warn:#d97706;
  --crit:#dc2626;
  --radius:18px;
  --maxw:1180px;
  --ease:cubic-bezier(.19,1,.22,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',sans-serif;
  color:var(--navy);
  background:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;letter-spacing:-0.02em;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
img{max-width:100%;display:block;}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(60px);transition:opacity 1s var(--ease), transform 1s var(--ease);}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-stagger > *{opacity:0;transform:translateY(56px);transition:opacity .9s var(--ease), transform .9s var(--ease);}
.reveal-stagger.in > *{opacity:1;transform:translateY(0);}
.reveal-stagger.in > *:nth-child(1){transition-delay:.05s}
.reveal-stagger.in > *:nth-child(2){transition-delay:.15s}
.reveal-stagger.in > *:nth-child(3){transition-delay:.25s}
.reveal-stagger.in > *:nth-child(4){transition-delay:.35s}
.reveal-stagger.in > *:nth-child(5){transition-delay:.45s}
.reveal-stagger.in > *:nth-child(6){transition-delay:.55s}

/* ---------- nav ---------- */
header.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.8);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
nav.site-nav{
  max-width:var(--maxw);margin:0 auto;padding:14px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;}
.logo img{height:40px;width:auto;max-width:none;flex:none;}
.site-nav .logo{flex:0 0 auto;}
.nav-links{display:flex;gap:30px;align-items:center;}
.nav-links a{font-size:14.5px;font-weight:500;color:var(--navy-2);transition:color .2s;}
.nav-links a:hover,.nav-links a.active{color:var(--blue);}
.nav-right{display:flex;align-items:center;gap:14px;}
.nav-link-plain{font-size:14px;font-weight:600;color:var(--navy-2);}
.nav-link-plain:hover{color:var(--blue);}
.nav-cta{
  background:var(--navy);color:var(--white);
  padding:11px 22px;border-radius:100px;font-size:14px;font-weight:600;
  transition:background .25s, transform .25s;white-space:nowrap;
}
.nav-cta:hover{background:var(--blue);transform:translateY(-2px);}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--navy);margin:4px 0;border-radius:2px;}

/* ---------- buttons ---------- */
.btn-primary{
  background:var(--blue);color:var(--white);
  padding:14px 26px;border-radius:100px;font-weight:600;font-size:15px;
  display:inline-flex;align-items:center;gap:10px;border:none;cursor:pointer;
  transition:transform .25s var(--ease), background .25s;
}
.btn-primary:hover{transform:translateY(-3px);background:var(--blue-bright);color:var(--white);}
.btn-primary svg{transition:transform .25s;}
.btn-primary:hover svg{transform:translateX(4px);}
.btn-ghost{
  border:1px solid rgba(255,255,255,.25);
  color:var(--white);padding:14px 24px;border-radius:100px;font-weight:600;font-size:15px;
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;background:none;
  transition:background .25s, border-color .25s;
}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5);color:var(--white);}
.btn-outline{
  border:1px solid var(--line);color:var(--navy);background:var(--white);
  padding:13px 24px;border-radius:100px;font-weight:600;font-size:14px;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;transition:border-color .25s,color .25s;
}
.btn-outline:hover{border-color:var(--blue);color:var(--blue);}
.btn-block{width:100%;justify-content:center;}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--navy);color:var(--white);padding:100px 0 130px;overflow:hidden;}
.hero.hero-sm{padding:80px 0 70px;}
.radar-field{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(91,147,255,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,147,255,.14) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, black 40%, transparent 80%);
  animation:drift 48s linear infinite;
}
@keyframes drift{0%{background-position:0 0,0 0;}100%{background-position:44px 88px,-44px 44px;}}
.scan-ring{position:absolute;width:900px;height:900px;top:-380px;right:-320px;border-radius:50%;border:1px solid rgba(91,147,255,.18);}
.scan-ring::before,.scan-ring::after{content:"";position:absolute;inset:90px;border-radius:50%;border:1px solid rgba(91,147,255,.15);}
.scan-ring::after{inset:190px;border-color:rgba(91,147,255,.22);}
.sweep{position:absolute;top:0;left:0;width:50%;height:50%;transform-origin:100% 100%;background:conic-gradient(from 0deg, rgba(91,147,255,.35), transparent 40deg);animation:sweep 12s linear infinite;}
@keyframes sweep{to{transform:rotate(360deg);}}
.pulse-dot{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--blue-bright);animation:pulse 2.6s ease-out infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(91,147,255,.55);}70%{box-shadow:0 0 0 22px rgba(91,147,255,0);}100%{box-shadow:0 0 0 0 rgba(91,147,255,0);}}

/* ---------- centered radar (sweep emanates from the middle) ---------- */
.radar{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(120vw,1100px);aspect-ratio:1;pointer-events:none;z-index:1;
  mask-image:radial-gradient(circle at 50% 50%, black 0%, black 55%, transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, black 0%, black 55%, transparent 78%);}
.radar.radar-right{left:auto;right:-6%;top:44%;transform:translateY(-50%);width:min(90vw,760px);}
.radar .rr{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(91,147,255,.16);}
.radar .rr.r2{inset:16%;} .radar .rr.r3{inset:32%;} .radar .rr.r4{inset:48%;border-color:rgba(91,147,255,.22);}
.radar .cross{position:absolute;background:rgba(91,147,255,.12);}
.radar .cross.h{left:0;right:0;top:50%;height:1px;} .radar .cross.v{top:0;bottom:0;left:50%;width:1px;}
.radar .beam{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg, rgba(91,147,255,.42) 0deg, rgba(91,147,255,.10) 26deg, rgba(91,147,255,0) 70deg, transparent 360deg);
  animation:radar-spin 6.5s linear infinite;}
.radar .core{position:absolute;top:50%;left:50%;width:10px;height:10px;border-radius:50%;background:var(--blue-bright);transform:translate(-50%,-50%);box-shadow:0 0 16px 3px rgba(91,147,255,.8);animation:core-pulse 2.4s ease-out infinite;}
@keyframes core-pulse{0%{box-shadow:0 0 0 0 rgba(91,147,255,.6),0 0 16px 3px rgba(91,147,255,.8);}70%{box-shadow:0 0 0 16px rgba(91,147,255,0),0 0 16px 3px rgba(91,147,255,.8);}100%{box-shadow:0 0 0 0 rgba(91,147,255,0),0 0 16px 3px rgba(91,147,255,.8);}}
.radar .ping{position:absolute;top:50%;left:50%;width:10px;height:10px;border-radius:50%;transform:translate(-50%,-50%);border:1px solid rgba(91,147,255,.5);animation:radar-ping 4s ease-out infinite;}
.radar .ping.p2{animation-delay:1.3s;} .radar .ping.p3{animation-delay:2.6s;}
@keyframes radar-spin{to{transform:rotate(360deg);}}
@keyframes radar-ping{0%{width:10px;height:10px;opacity:.7;}100%{width:min(110vw,1000px);height:min(110vw,1000px);opacity:0;}}

/* ---------- partners marquee ---------- */
.partners{background:var(--ice);padding:38px 0;overflow:hidden;}
.partners .cap{text-align:center;font-size:12.5px;color:var(--slate);letter-spacing:.1em;text-transform:uppercase;margin-bottom:24px;font-weight:700;}
.marquee{display:flex;width:max-content;animation:marq 48s linear infinite;}
.partners:hover .marquee{animation-play-state:paused;}
.marquee-track{display:flex;gap:20px;padding:0 10px;align-items:center;}
.partner-pill{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:0 34px;height:88px;box-shadow:0 8px 22px -14px rgba(20,50,110,.35);}
.partner-logo{width:auto;display:block;}
.pl-aws{height:30px;} .pl-intel{height:28px;} .pl-cb{height:56px;}
.pl-nvidia{height:22px;} .pl-google{height:26px;} .pl-cloudflare{height:30px;} .pl-anthropic{height:24px;}
@keyframes marq{to{transform:translateX(-50%);}}
/* single confirmed partner (no marquee needed with one logo) */
.partner-single{display:flex;flex-direction:column;align-items:center;gap:18px;}
.partner-pill-lg{padding:22px 52px;height:auto;}
.pl-cb-blue{height:46px;}
.partner-note{font-size:13.5px;color:var(--slate);text-align:center;max-width:460px;line-height:1.55;}

/* ---------- live sample scan (landing demo) ---------- */
.demo-band{background:var(--navy);color:#fff;position:relative;overflow:hidden;}
.demo-card{background:rgba(14,42,84,.55);border:1px solid rgba(91,147,255,.22);border-radius:24px;padding:26px;max-width:960px;margin:46px auto 0;backdrop-filter:blur(6px);box-shadow:0 30px 80px -40px rgba(0,0,0,.6);}
.ds-bar{display:flex;gap:12px;}
.ds-field{flex:1;display:flex;align-items:center;gap:10px;background:rgba(7,28,60,.6);border:1px solid rgba(91,147,255,.28);border-radius:100px;padding:0 20px;transition:border-color .2s,box-shadow .2s;}
.ds-field:focus-within{border-color:var(--blue-bright);box-shadow:0 0 0 3px rgba(91,147,255,.16);}
.ds-field i{color:var(--blue-bright);font-size:17px;}
.ds-field input{flex:1;min-width:0;background:none;border:none;color:#fff;font-family:inherit;font-size:15px;padding:14px 0;outline:none;}
.ds-bar .btn-primary{white-space:nowrap;}
.ds-run-label{white-space:nowrap;}
.ds-disclaimer{font-size:12.5px;color:#8FA3C8;margin-top:12px;display:flex;align-items:center;gap:7px;line-height:1.5;}
.ds-disclaimer i{color:var(--blue-bright);flex-shrink:0;}
.ds-disclaimer a{color:var(--blue-bright);font-weight:600;}
.ds-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;margin-top:22px;}
.demo-card.done .ds-grid{grid-template-columns:1fr 1fr;}
/* console */
.ds-console{background:rgba(7,28,60,.5);border:1px solid rgba(91,147,255,.16);border-radius:18px;padding:24px;display:flex;flex-direction:column;align-items:center;}
.ds-radar{position:relative;width:172px;height:172px;margin:6px auto 18px;}
.dr-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(91,147,255,.22);}
.dr-ring.r2{inset:22%;} .dr-ring.r3{inset:44%;border-color:rgba(91,147,255,.3);}
.dr-cross{position:absolute;background:rgba(91,147,255,.14);}
.dr-cross.h{left:0;right:0;top:50%;height:1px;} .dr-cross.v{top:0;bottom:0;left:50%;width:1px;}
.dr-beam{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg, rgba(91,147,255,.5) 0deg, rgba(91,147,255,.08) 30deg, rgba(91,147,255,0) 80deg, transparent 360deg);animation:radar-spin 4.5s linear infinite;}
.ds-console.scanning .dr-beam{animation-duration:1.5s;}
.dr-core{position:absolute;top:50%;left:50%;width:9px;height:9px;border-radius:50%;background:var(--blue-bright);transform:translate(-50%,-50%);box-shadow:0 0 14px 3px rgba(91,147,255,.8);}
.ds-log{width:100%;font-family:'Courier New',monospace;font-size:12.5px;line-height:1.85;color:#9FB2D6;min-height:132px;max-height:132px;overflow:hidden;}
.ds-log-idle{color:#6E82A8;text-align:center;padding-top:34px;font-family:'Inter',sans-serif;font-size:13.5px;}
.ds-log-idle b{color:#B9C8E6;font-weight:600;}
.ds-log .ln{opacity:0;animation:dsLnIn .3s forwards;}
.ds-log .ln .ok{color:var(--blue-bright);}
@keyframes dsLnIn{to{opacity:1;}}
.ds-prog{width:100%;height:6px;background:rgba(91,147,255,.14);border-radius:100px;margin-top:14px;overflow:hidden;}
.ds-prog span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--blue-bright));border-radius:100px;transition:width .35s var(--ease);}
/* results */
.ds-results{display:none;background:#fff;color:var(--navy);border-radius:18px;padding:22px;opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease);}
.demo-card.done .ds-results{display:block;}
.ds-results.show{opacity:1;transform:none;}
.ds-report-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;}
.ds-report-label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--slate);font-weight:700;}
.ds-report-target{font-family:'Space Grotesk';font-size:18px;font-weight:600;word-break:break-all;}
.ds-sample-badge{background:var(--warn);color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;padding:5px 11px;border-radius:100px;flex-shrink:0;}
.ds-sev-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px;}
.ds-sev{background:var(--ice);border-radius:12px;padding:12px 6px;text-align:center;}
.ds-sev b{display:block;font-family:'Space Grotesk';font-size:26px;line-height:1;}
.ds-sev span{font-size:10.5px;color:var(--slate);font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
.sv-crit b{color:var(--crit);} .sv-high b{color:#ea580c;} .sv-med b{color:var(--warn);} .sv-low b{color:var(--blue);}
.ds-findings{margin-bottom:20px;}
.ds-findings li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line);}
.ds-findings li:first-child{border-top:none;}
.fdot{width:9px;height:9px;border-radius:50%;margin-top:5px;flex-shrink:0;}
.d-crit{background:var(--crit);} .d-high{background:#ea580c;} .d-med{background:var(--warn);} .d-low{background:var(--blue);} .d-ok{background:var(--ok);}
.ds-findings b{display:block;font-size:14px;font-weight:600;}
.ds-findings span{font-size:12.5px;color:var(--slate);line-height:1.5;}
.ds-score{display:flex;align-items:center;gap:18px;background:var(--ice);border-radius:16px;padding:16px 18px;margin-bottom:16px;}
.ds-ring{position:relative;width:92px;height:92px;border-radius:50%;flex-shrink:0;background:conic-gradient(var(--blue) calc(var(--pct,0)*1%), rgba(47,111,237,.14) 0);display:flex;align-items:center;justify-content:center;}
.ds-ring::before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--white);}
.ds-ring-num{position:relative;z-index:1;text-align:center;line-height:1;}
.ds-ring-num b{font-family:'Space Grotesk';font-size:25px;font-weight:700;color:var(--navy);}
.ds-ring-num span{font-size:11px;color:var(--slate);display:block;margin-top:2px;}
.ds-score-cat{font-family:'Space Grotesk';font-weight:600;font-size:14px;color:var(--navy);display:block;}
.ds-score-copy p{font-size:12.5px;color:var(--slate);margin:5px 0 7px;line-height:1.5;}
.ds-score-verdict{font-size:12.5px;color:var(--warn);font-weight:600;}
.ds-controls{display:grid;grid-template-columns:1fr 1fr;gap:9px 20px;margin-bottom:20px;}
.ds-controls li{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--navy);}
.ds-controls em{font-style:normal;color:var(--slate);font-weight:500;font-size:12px;margin-left:auto;text-align:right;}
.cstat{width:20px;height:20px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:#fff;flex-shrink:0;}
.s-pass{background:var(--ok);} .s-warn{background:var(--warn);} .s-fail{background:var(--crit);}
.ds-cta{margin-top:2px;}
.hero-inner{position:relative;z-index:2;}
@keyframes brand-float{0%,100%{transform:translateY(-7px);}50%{transform:translateY(7px);}}

/* hero split: copy on the left, glowing logo on the right (radar sweeps in from
   the right, not from the logo) */
.hero-split{display:grid;grid-template-columns:1.08fr .92fr;gap:40px;align-items:center;}
.hero-copy{min-width:0;}
.hero-brand{position:relative;display:flex;align-items:flex-start;justify-content:center;
  align-self:start;min-height:400px;padding-top:8px;}

/* rising dots across the hero; the ones the radar sweep crosses shine */
.scan-dots{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;}
.scan-dots .sd{position:absolute;bottom:-16px;animation:sd-rise linear infinite;will-change:transform,opacity;}
.scan-dots .sd .core{display:block;width:7px;height:7px;border-radius:50%;background:rgba(91,147,255,.30);
  transition:background .1s ease, box-shadow .22s ease, transform .22s ease;}
.scan-dots .sd.lit .core{background:var(--blue-bright);
  box-shadow:0 0 14px 4px rgba(91,147,255,.9);transform:scale(2.2);}
@keyframes sd-rise{0%{transform:translateY(0) scale(.7);opacity:0;}
  12%{opacity:.5;}88%{opacity:.5;}100%{transform:translateY(var(--travel,-680px)) scale(1);opacity:0;}}

/* the logo, glowing, as the hero centrepiece on the right */
.brand-mark{position:relative;z-index:4;width:clamp(200px,23vw,320px);
  filter:drop-shadow(0 10px 34px rgba(91,147,255,.45));animation:brand-float 7s ease-in-out infinite;}
.brand-mark img,.brand-mark svg{width:100%;height:auto;display:block;position:relative;z-index:2;}
.brand-mark::after{content:"";position:absolute;inset:-26% -18%;z-index:1;border-radius:50%;
  background:radial-gradient(circle, rgba(91,147,255,.28) 0%, rgba(7,28,60,.55) 45%, rgba(7,28,60,0) 72%);}
.hero h1{font-size:clamp(38px,5.2vw,64px);line-height:1.05;font-weight:600;max-width:820px;}
.hero h1 em{font-style:normal;color:var(--blue-bright);}
.hero p.lead{font-size:18px;line-height:1.6;color:#B9C8E6;max-width:560px;margin-top:24px;}
.hero-ctas{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap;}
.hero-stats{display:flex;gap:48px;margin-top:64px;flex-wrap:wrap;padding-top:32px;border-top:1px solid rgba(255,255,255,.14);}
.stat b{display:block;font-family:'Space Grotesk';font-size:30px;color:var(--white);}
.stat span{font-size:13.5px;color:#9FB2D6;}
.eyebrow-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(91,147,255,.14);border:1px solid rgba(91,147,255,.3);color:var(--blue-bright);font-size:13px;font-weight:600;padding:6px 14px;border-radius:100px;margin-bottom:22px;}

/* ---------- rising bubbles ---------- */
.bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;}
.bubble{position:absolute;bottom:-30px;border-radius:50%;background:radial-gradient(circle at 35% 35%, rgba(91,147,255,.85), rgba(47,111,237,.25));animation:rise linear infinite;will-change:transform,opacity;}
.bubbles--light .bubble{background:radial-gradient(circle at 35% 35%, rgba(47,111,237,.5), rgba(47,111,237,.08));}
@keyframes rise{0%{transform:translate(0,0) scale(.6);opacity:0;}12%{opacity:var(--o,.5);}85%{opacity:var(--o,.5);}100%{transform:translate(var(--sway,0px),-110vh) scale(1);opacity:0;}}

/* ---------- section basics ---------- */
section{padding:100px 0;}
.section-head{max-width:660px;margin-bottom:56px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.eyebrow{display:inline-block;font-size:13px;font-weight:700;color:var(--blue);letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;}
.section-head h2{font-size:clamp(28px,3.4vw,42px);font-weight:600;line-height:1.15;}
.section-head p{color:var(--slate);font-size:16px;margin-top:16px;line-height:1.6;}

/* ---------- feature/service cards ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;}
.card-soft{
  border:1px solid var(--line);border-radius:var(--radius);padding:32px;background:var(--white);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.card-soft:hover{transform:translateY(-8px);box-shadow:0 24px 48px -20px rgba(20,50,110,.22);border-color:transparent;}
.svc-icon{
  width:52px;height:52px;border-radius:14px;background:var(--ice);
  display:flex;align-items:center;justify-content:center;margin-bottom:22px;
  transition:background .3s, transform .3s;color:var(--blue);font-size:24px;
}
.card-soft:hover .svc-icon{background:var(--blue);transform:rotate(-6deg) scale(1.05);color:var(--white);}
.card-soft h3{font-size:20px;margin-bottom:10px;font-weight:600;}
.card-soft p{color:var(--slate);font-size:14.5px;line-height:1.6;}

/* ---------- compliance strip ---------- */
.compliance-band{background:var(--ice);}
.pill-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:8px;}
.pill{background:var(--white);border:1px solid var(--line);border-radius:100px;padding:10px 20px;font-size:14px;font-weight:600;color:var(--navy-2);display:inline-flex;align-items:center;gap:8px;}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);display:inline-block;}

/* ---------- education / video ---------- */
.edu-band{background:var(--ice);position:relative;overflow:hidden;}
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.video-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease);display:flex;flex-direction:column;}
.video-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px -22px rgba(20,50,110,.25);}
.video-thumb{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,var(--navy),var(--navy-2));display:flex;align-items:center;justify-content:center;overflow:hidden;}
.video-thumb::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(91,147,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(91,147,255,.12) 1px,transparent 1px);background-size:26px 26px;mask-image:linear-gradient(to bottom,black,transparent 80%);}
.play-btn{position:relative;width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;backdrop-filter:blur(4px);transition:background .25s,transform .25s;}
.video-card:hover .play-btn{background:var(--blue);transform:scale(1.08);}
.video-lock{position:absolute;top:12px;right:12px;background:rgba(7,28,60,.7);color:#fff;font-size:11px;font-weight:600;padding:4px 10px;border-radius:100px;display:inline-flex;align-items:center;gap:5px;}
.video-badge{position:absolute;top:12px;left:12px;background:var(--blue);color:#fff;font-size:11px;font-weight:600;padding:4px 10px;border-radius:100px;}
.video-meta{padding:18px 20px 20px;flex:1;display:flex;flex-direction:column;}
.video-cat{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:8px;}
.video-meta h3{font-size:17px;font-weight:600;line-height:1.3;margin-bottom:8px;}
.video-meta p{color:var(--slate);font-size:13.5px;line-height:1.55;flex:1;}
.video-foot{display:flex;align-items:center;gap:14px;margin-top:14px;font-size:12.5px;color:var(--slate);}

/* ---------- tools ---------- */
.tool-card{position:relative;border:1px solid var(--line);border-radius:var(--radius);padding:30px;background:var(--white);display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;}
.tool-card:hover{transform:translateY(-8px);box-shadow:0 24px 48px -20px rgba(20,50,110,.22);border-color:transparent;}
.tool-tag{position:absolute;top:22px;right:22px;font-size:11px;font-weight:700;padding:4px 10px;border-radius:100px;letter-spacing:.04em;}
.tool-tag.free{background:#f0fdf4;color:#166534;}
.tool-tag.gated{background:var(--ice);color:var(--blue);}
.tool-tag.preview{background:#fef3c7;color:#92400e;}
.admin-only{display:none;}
.tool-card h3{font-size:20px;font-weight:600;margin-bottom:10px;}
.tool-card p{color:var(--slate);font-size:14.5px;line-height:1.6;flex:1;margin-bottom:20px;}

/* ---------- team ---------- */
.team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;}
.team-card{border:1px solid var(--line);border-radius:var(--radius);padding:32px;background:var(--white);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;}
.team-card:hover{transform:translateY(-8px);box-shadow:0 24px 48px -20px rgba(20,50,110,.22);border-color:transparent;}
.team-head{display:flex;align-items:center;gap:16px;margin-bottom:18px;}
.team-avatar{width:66px;height:66px;border-radius:50%;flex-shrink:0;overflow:hidden;
  background:linear-gradient(135deg,var(--blue),var(--navy));color:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk';font-size:23px;font-weight:700;letter-spacing:.02em;}
.team-avatar img{width:100%;height:100%;object-fit:cover;}
.team-head h3{font-size:20px;font-weight:600;line-height:1.2;}
.team-role{font-size:13.5px;color:var(--blue);font-weight:600;margin-top:3px;}
.team-loc{font-size:12.5px;color:var(--slate);margin-top:3px;display:flex;align-items:center;gap:5px;}
.team-card p{color:var(--slate);font-size:14.5px;line-height:1.65;}
.tag-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px;}
.tag{font-size:11.5px;font-weight:600;background:var(--ice);color:var(--navy-2);border-radius:100px;padding:4px 11px;}

/* ---------- credentials strip ---------- */
.cred-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px;}
.cred{background:var(--ice);border:1px solid var(--line);border-radius:14px;padding:18px 16px;text-align:center;}
.cred b{display:block;font-family:'Space Grotesk';font-size:25px;font-weight:700;color:var(--navy);line-height:1;}
.cred span{display:block;font-size:12px;color:var(--slate);margin-top:8px;line-height:1.45;}

/* ---------- workshop sessions ---------- */
.session-list{margin-top:14px;}
.session{display:grid;grid-template-columns:66px 1fr;gap:22px;align-items:start;
  padding:26px 0;border-top:1px solid var(--line);}
.session:last-child{border-bottom:1px solid var(--line);}
.session-num{font-family:'Space Grotesk';font-size:30px;font-weight:600;color:var(--blue);opacity:.42;line-height:1;}
.session h3{font-size:19px;font-weight:600;margin-bottom:7px;}
.session p{color:var(--slate);font-size:14.5px;line-height:1.6;max-width:640px;}
.session-verify{font-size:12.5px;color:var(--slate);margin-top:10px;display:flex;gap:8px;align-items:flex-start;max-width:640px;}
.session-verify i{color:var(--ok);margin-top:2px;flex-shrink:0;}

/* ---------- docs ---------- */
.docs-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:48px;align-items:start;}
/* Grid items default to min-width:auto, meaning they refuse to shrink below
   their widest child. A wide table or code block therefore widens the whole
   column. This is the single most common cause of a grid overflowing. */
.docs-layout > *{min-width:0;}
.doc-section{min-width:0;}
.docs-nav{position:sticky;top:100px;}
.docs-nav h4{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--slate);margin-bottom:12px;font-weight:700;}
.docs-nav a{display:block;font-size:14px;color:var(--slate);padding:7px 12px;border-radius:8px;border-left:2px solid transparent;transition:all .18s;}
.docs-nav a:hover{background:var(--ice);color:var(--navy);}
.docs-nav a.active{color:var(--blue);border-left-color:var(--blue);background:var(--ice);font-weight:600;}
.doc-section{scroll-margin-top:100px;margin-bottom:56px;}
.doc-section h2{font-size:27px;font-weight:600;margin-bottom:14px;}
.doc-section h3{font-size:18px;font-weight:600;margin:26px 0 10px;}
.doc-section p{color:var(--slate);font-size:15px;line-height:1.7;margin-bottom:14px;}
.doc-section ul{margin:0 0 14px 0;}
.doc-section li{color:var(--slate);font-size:15px;line-height:1.7;padding-left:22px;position:relative;margin-bottom:7px;}
.doc-section li::before{content:"";position:absolute;left:6px;top:10px;width:5px;height:5px;border-radius:50%;background:var(--blue);}
.doc-steps{counter-reset:s;margin-bottom:16px;}
.doc-step{counter-increment:s;position:relative;padding-left:48px;margin-bottom:18px;}
.doc-step::before{content:counter(s);position:absolute;left:0;top:-2px;width:32px;height:32px;border-radius:10px;background:var(--ice);color:var(--blue);display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk';font-weight:700;font-size:14px;}
.doc-step h4{font-size:15.5px;font-weight:600;margin-bottom:4px;}
.doc-step p{margin-bottom:0;font-size:14.5px;}
pre.code{background:#0E1A2F;color:#D6E2F5;border-radius:12px;padding:16px 18px;overflow-x:auto;font-family:'Courier New',monospace;font-size:13px;line-height:1.7;margin-bottom:16px;}
pre.code .c{color:#7C90B6;}
code.inline{background:var(--ice);color:var(--navy-2);border-radius:5px;padding:2px 7px;font-family:'Courier New',monospace;font-size:13px;}
.doc-table{width:100%;border-collapse:collapse;margin-bottom:18px;font-size:14px;}
.doc-table th{text-align:left;background:var(--navy);color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.05em;padding:11px 14px;font-weight:600;}
.doc-table th:first-child{border-radius:10px 0 0 0;} .doc-table th:last-child{border-radius:0 10px 0 0;}
.doc-table td{padding:11px 14px;border-bottom:1px solid var(--line);color:var(--navy);}
.doc-table tr:nth-child(even) td{background:#FAFCFF;}
.note{border-left:3px solid var(--blue);background:var(--ice);border-radius:0 12px 12px 0;padding:14px 18px;margin-bottom:18px;}
.note.warn{border-left-color:var(--warn);background:#FFFBEB;}
.note strong{display:block;font-size:14px;margin-bottom:4px;color:var(--navy);}
.note p{margin:0;font-size:14px;color:#41506B;}

/* ---------- legal pages ---------- */
.legal{max-width:800px;margin:0 auto;}
.legal h2{font-size:24px;font-weight:600;margin:34px 0 12px;}
.legal h3{font-size:17px;font-weight:600;margin:22px 0 8px;}
.legal p, .legal li{color:var(--slate);font-size:15px;line-height:1.75;margin-bottom:12px;}
.legal ul{padding-left:22px;} .legal li{list-style:disc;}
.legal .updated{font-size:13.5px;color:var(--slate);background:var(--ice);border-radius:10px;padding:12px 16px;display:inline-block;}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:start;}
.contact-card{border:1px solid var(--line);border-radius:var(--radius);padding:30px;background:var(--white);}
.contact-item{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line);}
.contact-item:last-child{border-bottom:none;}
.contact-ic{width:42px;height:42px;border-radius:12px;background:var(--ice);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.contact-item h4{font-size:14.5px;font-weight:600;margin-bottom:3px;}
.contact-item p, .contact-item a{font-size:14px;color:var(--slate);line-height:1.5;}
.contact-item a{color:var(--blue);font-weight:500;}
.form-ok{display:none;background:#F0FDF4;border:1px solid #BBF7D0;color:#166534;border-radius:12px;padding:14px 16px;font-size:14px;margin-top:14px;}

/* ---------- auth ---------- */
.auth-shell{min-height:calc(100vh - 71px);display:grid;grid-template-columns:1fr 1fr;}
.auth-visual{background:var(--navy);color:#fff;position:relative;overflow:hidden;padding:60px;display:flex;flex-direction:column;justify-content:center;}
.auth-visual h2{font-size:34px;font-weight:600;line-height:1.15;max-width:420px;position:relative;z-index:2;}
.auth-visual p{color:#9FB2D6;font-size:16px;line-height:1.6;margin-top:18px;max-width:420px;position:relative;z-index:2;}
.auth-visual ul.ticks{margin-top:30px;position:relative;z-index:2;}
.auth-visual ul.ticks li{display:flex;align-items:center;gap:10px;color:#C7D5EF;font-size:15px;margin-bottom:14px;}
.auth-visual ul.ticks li i{color:var(--blue-bright);}
.auth-form-wrap{display:flex;align-items:center;justify-content:center;padding:50px 40px;}
.auth-form{width:100%;max-width:400px;}
.auth-form h1{font-size:28px;font-weight:600;margin-bottom:8px;}
.auth-form .sub{color:var(--slate);font-size:15px;margin-bottom:28px;}
.field{margin-bottom:18px;}
.field label{display:block;font-size:13px;font-weight:600;color:var(--navy-2);margin-bottom:7px;}
.field input{width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:12px;font-size:15px;font-family:inherit;transition:border-color .2s,box-shadow .2s;background:#fff;color:var(--navy);}
.field input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,111,237,.12);}
.auth-alt{text-align:center;font-size:14px;color:var(--slate);margin-top:22px;}
.auth-alt a{color:var(--blue);font-weight:600;}
.form-note{font-size:12.5px;color:var(--slate);margin-top:14px;line-height:1.5;}
.checkbox-row{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--slate);margin-bottom:20px;}
.checkbox-row input{margin-top:2px;}

/* ---------- gate ---------- */
.gate{max-width:520px;margin:0 auto;text-align:center;background:var(--white);border:1px solid var(--line);border-radius:24px;padding:48px 40px;box-shadow:0 24px 60px -30px rgba(20,50,110,.3);}
.gate .lock-badge{width:64px;height:64px;border-radius:18px;background:var(--ice);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 22px;}
.gate h2{font-size:26px;font-weight:600;margin-bottom:12px;}
.gate p{color:var(--slate);font-size:15px;line-height:1.6;margin-bottom:26px;}
.gate .btn-primary{margin:0 auto;}

/* ---------- faq ---------- */
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{padding:24px 0;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-size:16.5px;font-weight:600;gap:20px;}
.faq-plus{width:26px;height:26px;flex-shrink:0;position:relative;}
.faq-plus::before,.faq-plus::after{content:"";position:absolute;background:var(--navy);transition:transform .3s var(--ease),background .3s;}
.faq-plus::before{width:100%;height:2px;top:50%;left:0;transform:translateY(-50%);}
.faq-plus::after{height:100%;width:2px;left:50%;top:0;transform:translateX(-50%);}
.faq-item.open .faq-plus::after{transform:translateX(-50%) rotate(90deg);opacity:0;}
.faq-item.open .faq-plus::before{background:var(--blue);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease),padding .4s;color:var(--slate);font-size:15px;line-height:1.65;}
.faq-item.open .faq-a{max-height:240px;padding-bottom:24px;}

/* ---------- cta band ---------- */
.cta-band{background:linear-gradient(135deg,var(--navy),var(--navy-2));color:var(--white);border-radius:28px;padding:64px 56px;text-align:center;position:relative;overflow:hidden;margin:0 32px;}
.cta-band h2{font-size:clamp(28px,3.6vw,42px);margin-bottom:16px;font-weight:600;}
.cta-band p{color:#B9C8E6;max-width:520px;margin:0 auto 28px;font-size:16px;line-height:1.6;}
.cta-band .glow{position:absolute;width:500px;height:500px;background:radial-gradient(circle,rgba(91,147,255,.35),transparent 70%);top:-200px;left:50%;transform:translateX(-50%);}
.cta-band .btn-primary{position:relative;margin:0 auto;}

/* ---------- footer ---------- */
footer.site-footer{background:var(--navy);color:#B9C8E6;padding:64px 0 28px;}
.footer-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.1);}
.footer-cols{display:flex;gap:70px;flex-wrap:wrap;}
.footer-col h4{color:var(--white);font-size:14px;margin-bottom:16px;}
.footer-col a{display:block;font-size:14px;color:#9FB2D6;margin-bottom:12px;transition:color .2s;}
.footer-col a:hover{color:var(--white);}
.footer-brand p{margin-top:16px;max-width:280px;font-size:14px;color:#9FB2D6;line-height:1.6;}
.footer-contact{margin-top:16px;font-size:14px;color:#9FB2D6;line-height:1.9;}
.footer-contact a{color:#C7D5EF;}
.footer-bottom{display:flex;justify-content:space-between;padding-top:24px;font-size:13px;color:#7688AC;flex-wrap:wrap;gap:10px;}

/* ---------- toast ---------- */
.toast-wrap{position:fixed;bottom:22px;right:22px;z-index:9999;transform:translateY(80px);opacity:0;transition:all .25s;}
.toast-wrap.show{transform:translateY(0);opacity:1;}
.toast-inner{background:var(--navy);color:#fff;border:1px solid var(--navy-2);padding:12px 18px;border-radius:12px;font-size:14px;box-shadow:0 12px 30px rgba(7,28,60,.35);display:flex;align-items:center;gap:10px;}

/* ---------- modal ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(7,28,60,.6);backdrop-filter:blur(4px);z-index:1000;display:none;align-items:center;justify-content:center;padding:24px;}
.modal-overlay.show{display:flex;}
.modal-box{background:#fff;border-radius:20px;width:100%;max-width:760px;overflow:hidden;box-shadow:0 30px 80px -30px rgba(0,0,0,.5);}
.modal-video{aspect-ratio:16/9;background:#000;display:flex;align-items:center;justify-content:center;color:#fff;position:relative;}
.modal-body{padding:22px 26px 26px;}
.modal-body h3{font-size:20px;font-weight:600;margin-bottom:8px;}
.modal-body p{color:var(--slate);font-size:14px;line-height:1.6;}
.modal-close{position:absolute;top:14px;right:16px;background:rgba(0,0,0,.4);border:none;color:#fff;width:34px;height:34px;border-radius:50%;font-size:18px;cursor:pointer;z-index:3;}

/* ---------- responsive ---------- */
/* Nine links plus the logo and the sign-up button need about 1000px. Below
   that the logo used to absorb the overflow by shrinking to a sliver, which
   read as a black speck; now the logo keeps its size and the menu collapses. */
@media(max-width:1040px){
  .nav-links{display:none;}
  .nav-toggle{display:block;}
}
@media(max-width:900px){
  .grid-3,.grid-2,.video-grid,.team-grid,.contact-grid{grid-template-columns:1fr;}
  .hero-split{grid-template-columns:1fr;gap:18px;}
  .hero-brand{min-height:230px;order:-1;}
  .brand-mark{width:clamp(160px,44vw,240px);}
  .cred-strip{grid-template-columns:repeat(2,1fr);}
  .session{grid-template-columns:44px 1fr;gap:14px;}
    /* Was grid-template-columns:1fr. On a phone the tables and the API example
     forced this column to ~790px inside a 375px screen, and because the section
     hides overflow the excess was clipped rather than scrollable: the right
     half of every paragraph and table was unreachable. minmax(0,1fr) lets the
     column shrink; min-width:0 lets its children do the same. */
  .docs-layout{grid-template-columns:minmax(0,1fr);gap:24px;}
  .docs-layout > *,
  .doc-section{min-width:0;}
  /* Tables wrap rather than scroll: these are two or three columns of short
     text, so wrapping reads better on a phone than a sideways swipe. */
  .doc-table{table-layout:fixed;width:100%;}
  .doc-table th,.doc-table td{word-break:break-word;padding:9px 10px;font-size:13px;}
  /* Code is the one thing that must not wrap, so it scrolls inside its own box. */
  pre.code{max-width:100%;overflow-x:auto;}
  .docs-nav{position:static;}
  .docs-nav .docs-nav-inner{display:flex;flex-wrap:wrap;gap:6px;}
  .docs-nav a{border-left:none;border:1px solid var(--line);border-radius:100px;padding:6px 14px;font-size:13px;}
  .hero{padding:76px 0 84px;}
  .auth-shell{grid-template-columns:1fr;}
  .auth-visual{display:none;}
  .cta-band{margin:0 16px;padding:46px 26px;}
  section{padding:72px 0;}
  .wrap{padding:0 20px;}
  .demo-card.done .ds-grid{grid-template-columns:1fr;}
  .ds-bar{flex-direction:column;}
  .ds-bar .btn-primary{justify-content:center;}
  .ds-controls{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;}
}

/* The line under the sample controls. It states what the scan cannot see, which
   is the difference between an indicator and a compliance claim. */
.ds-honest{margin:14px 2px 0;font-size:11.5px;line-height:1.55;color:var(--slate);
  border-left:3px solid var(--line);padding-left:10px;}

/* Code block with a copy button in the corner. */
.code-wrap{position:relative;}
.code-wrap pre.code{margin-bottom:16px;}
.code-copy{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.08);
  color:#D6E2F5;border:1px solid rgba(255,255,255,.18);border-radius:7px;
  padding:5px 11px;font-size:11.5px;font-weight:600;cursor:pointer;
  transition:background .15s,border-color .15s;}
.code-copy:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.32);}


/* ---- inline styles removed for a strict CSP; the classes they became ---- */
.muted-note{color:var(--slate);font-size:14px;}
.video-card.is-locked{cursor:default;}
.video-card[data-open]{cursor:pointer;}
.pw-result{padding:16px 18px;border-radius:10px;border-left:4px solid;}
.pw-result-head{display:flex;align-items:center;gap:10px;font-weight:600;font-size:16.5px;margin-bottom:6px;}
.pw-result-body{color:#31405a;font-size:14.5px;line-height:1.65;}
.pw-bad{background:#fdecec;border-left-color:#c0392b;} .pw-bad .pw-result-head{color:#c0392b;}
.pw-good{background:#eaf7ef;border-left-color:#1e7a45;} .pw-good .pw-result-head{color:#1e7a45;}
.pw-warn{background:#fff6e5;border-left-color:#8a6100;} .pw-warn .pw-result-head{color:#8a6100;}

/* Captions toggle sits inside the player frame, bottom right, just above the
   native control bar, so it reads as part of the player. The native CC
   control is still there too. */
.cc-toggle{position:absolute;right:12px;bottom:56px;z-index:3;background:rgba(7,28,60,.78);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:100px;padding:6px 12px;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;backdrop-filter:blur(4px);}
.cc-toggle:hover,.cc-toggle:focus-visible{background:rgba(47,111,237,.9);border-color:#fff;outline:none;}
.cc-toggle[aria-pressed="false"]{opacity:.75;}
.modal-video:fullscreen .cc-toggle{bottom:72px;}
.video-lock.video-lock-free{background:rgba(22,163,74,.9);}

.auth-legal{text-align:center;font-size:12px;color:var(--slate);opacity:.8;margin-top:10px;}

/* ---- free email spoofing check ---- */
.spoof-wrap{max-width:760px;}
.spoof-section{padding-top:56px;}
.spoof-err{margin-top:10px;}
.spoof-results{display:none;margin-top:22px;}
.spoof-results .card-soft{margin-top:16px;}
.spoof-h3{font-size:16px;font-weight:600;margin:0 0 10px;}
.spoof-verdict{display:flex;gap:16px;align-items:flex-start;padding:22px 24px;border-radius:16px;border:1px solid var(--line);background:#fff;}
.spoof-verdict i{font-size:34px;flex:none;line-height:1;}
.spoof-verdict h2{font-size:22px;margin:0 0 6px;font-weight:600;}
.spoof-verdict p{margin:0;color:var(--slate);line-height:1.6;}
.spoof-verdict.v-ok{border-color:#bbf7d0;background:#f0fdf4;} .spoof-verdict.v-ok i,.spoof-verdict.v-ok h2{color:#15803d;}
.spoof-verdict.v-warn{border-color:#fde68a;background:#fffbeb;} .spoof-verdict.v-warn i,.spoof-verdict.v-warn h2{color:#b45309;}
.spoof-verdict.v-bad{border-color:#fecaca;background:#fef2f2;} .spoof-verdict.v-bad i,.spoof-verdict.v-bad h2{color:#b91c1c;}
.spoof-explainer{position:relative;overflow:hidden;}
.spoof-cta{padding-top:0;}
.status-line{display:flex;align-items:center;gap:8px;font-size:13.5px;padding:9px 0;border-bottom:1px solid #EEF3FB;}
.status-line i{font-size:16px;} .status-line .sn{font-weight:500;} .status-line .sx{margin-left:auto;color:var(--slate);font-size:12.5px;text-align:right;}
.status-line.s-ok i{color:var(--ok);} .status-line.s-warn i{color:var(--warn);} .status-line.s-bad i{color:var(--crit);}
.kv-list .kv{display:flex;gap:14px;padding:8px 0;border-bottom:1px solid #EEF3FB;font-size:13.5px;}
.kv-list .kv .k{flex:0 0 110px;color:var(--slate);font-weight:600;} .kv-list .kv .v{word-break:break-all;}
/* demo: what an attacker does with each finding, three words at most */
.ds-impact{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:100px;font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;background:rgba(220,38,38,.12);color:#fca5a5;vertical-align:middle;}
.ds-impact.ok{background:rgba(22,163,74,.14);color:#86efac;}