/* Secatix — dark theme design system.
   Tokens, type scale and components defined here; markup and information
   architecture live in the page files. */
:root{
  /* brand palette */
  --k-primary:#b247f9;
  --k-primary-700:#762bcc;
  --k-primary-800:#4f178f;
  --k-secondary:#3346ff;
  --k-secondary-700:#1121b2;
  --k-black:#000000;
  --k-dark:#101010;
  --k-elev:#191919;
  --k-light:#fffffe;
  --k-fg:#6c6c6c;
  --k-fg-alt:#e5dde6;
  --k-meta:#b9b5bd;
  --k-border:#3e3244;

  /* Semantic aliases for the Secatix markup */
  --paper:#000000;
  --surface:#101010;
  --surface-2:#191919;
  --ink:#fffffe;
  --ink-soft:#e5dde6;
  --muted:#b9b5bd;
  --line:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.28);
  --accent:#b247f9;
  --accent-soft:rgba(178,71,249,.16);
  --grad:linear-gradient(90deg,#b247f9 0%,#3346ff 100%);
  --grad-rev:linear-gradient(90deg,#3346ff 0%,#b247f9 100%);
  /* wp preset gradient-three — hero glow, verbatim stops */
  --glow-hero:radial-gradient(27.06% 46.4% at 93.05% 9.59%,#b247f9 0%,#762bcc 22%,#4f178f 44%,#101010 100%);
  /* wp center-top-gradient — CTA glow */
  --glow-cta:radial-gradient(50% 50% at 50% 30%,rgba(79,23,143,.55) 0%,rgba(16,16,16,0) 70%);
  --radius:12px;
  --maxw:1080px;
  /* 10-step type scale — every font-size in the design system maps to one of
     these tokens so the page never grows a new ad-hoc size */
  --fs-xs:12px;   /* pills, tags, sample labels */
  --fs-sm:13px;   /* meta text, captions, footnotes */
  --fs-md:15px;   /* buttons, nav, inputs, body-small */
  --fs-base:16px; /* body copy */
  --fs-lg:18px;   /* card titles, footer headings */
  --fs-xl:20px;   /* emphasised titles, prices */
  --fs-h3:clamp(15.747px,0.984rem + ((1vw - 3.2px) * 0.503),24px);
  --fs-h2:clamp(27.894px,1.743rem + ((1vw - 3.2px) * 1.226),48px);
  --fs-h1:clamp(36.954px,2.31rem + ((1vw - 3.2px) * 1.893),68px);
  --fs-lede:clamp(18.959px,1.185rem + ((1vw - 3.2px) * 0.673),30px);
  --display:'Manrope',system-ui,sans-serif;
  --body:'Public Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--k-black)}
[id]{scroll-margin-top:96px}
body{
  margin:0;background:var(--k-black);color:var(--k-fg-alt);
  font:400 var(--fs-base)/1.65 var(--body);-webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:var(--k-primary);text-decoration:none}
a:hover{text-decoration:none;color:#d9a6ff}
::selection{background:rgba(178,71,249,.4);color:#fff}
:focus-visible{outline:2px solid var(--k-primary);outline-offset:2px;border-radius:3px}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;background:var(--k-primary);color:#fff;padding:8px 12px;border-radius:100px;z-index:100}

/* nav */
.site-nav{position:sticky;top:0;z-index:50;background:var(--k-black)}
.site-nav.is-scrolled{box-shadow:0 15px 30px rgba(0,0,0,.6)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:76px}
.logo{font:700 var(--fs-lg)/1 var(--display);letter-spacing:.01em;color:var(--k-light);display:inline-flex;align-items:center}
.logo .logo-mark{width:34px;height:34px;display:block;flex:none;margin-right:9px}
.logo:hover{color:var(--k-light)}
.logo span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.menu{display:flex;align-items:center;gap:26px}
.menu a{color:var(--k-fg-alt);font:500 var(--fs-md) var(--body)}
.menu a:hover,.menu a[aria-current="page"]{color:var(--k-light);text-decoration:none}
.nav-cta{margin-left:4px}
.burger{display:none;background:none;border:1px solid var(--line-strong);border-radius:8px;width:42px;height:38px;cursor:pointer;position:relative}
.burger span,.burger span::before,.burger span::after{content:"";position:absolute;left:11px;width:18px;height:2px;background:var(--k-light);transition:.2s}
.burger span{top:18px}
.burger span::before{left:0;top:-6px}
.burger span::after{left:0;top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* breadcrumbs — visible on every inner page, mirrored by BreadcrumbList schema */
.crumbs{margin-bottom:20px}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px;list-style:none;margin:0;padding:0;font:400 var(--fs-sm) var(--mono);letter-spacing:.04em;color:var(--k-meta)}
.crumbs li{display:flex;align-items:center;gap:6px}
.crumbs li:not(:last-child)::after{content:"/";color:var(--k-fg)}
.crumbs a{color:var(--k-meta)}
.crumbs a:hover{color:var(--k-light)}
.crumbs [aria-current]{color:var(--k-light)}

/* buttons — pill shapes with the brand gradients */
.btn{display:inline-flex;align-items:center;gap:8px;font:600 var(--fs-md)/1.5 var(--body);padding:.797em 1.463em;border-radius:70px;border:1px solid transparent;cursor:pointer;transition:background .25s ease,color .25s ease,border-color .25s ease;white-space:nowrap;color:#fff}
.btn:hover{text-decoration:none;color:#fff}
.btn-primary{background-image:var(--grad-rev)}
.btn-primary:hover{background-image:none;background-color:#fff;color:var(--k-primary)}
/* ghost button — subtle tinted fill so secondary actions read unambiguously
   as buttons rather than text links */
.btn-secondary{background:rgba(255,255,255,.07);color:var(--k-light);border-color:var(--line-strong)}
.btn-secondary:hover{border-color:var(--k-primary);background:rgba(178,71,249,.16);color:#fff}
.btn-sm{padding:11px 22px;font-size:var(--fs-md);border-radius:100px;background-image:var(--grad)}
.btn-sm:hover{background-image:none;background-color:#fff;color:var(--k-primary)}

/* type — Manrope headings, Public Sans body, fluid clamps */
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.2;margin:0 0 14px;letter-spacing:-.01em;color:var(--k-light)}
h1{font-size:var(--fs-h1);line-height:1.15;font-weight:700}
h2{font-size:var(--fs-h2);line-height:1.25}
h3{font-size:var(--fs-h3)}
p{margin:0 0 14px;color:var(--k-fg-alt)}
.lede{color:var(--k-fg-alt);font-size:var(--fs-lede);line-height:1.5;max-width:62ch}
.meta{font:400 var(--fs-sm) var(--mono);color:var(--k-meta);letter-spacing:.06em;text-transform:uppercase;margin:0 0 12px}
.sec-head{max-width:760px;margin-bottom:48px}
.sec-head p{margin-bottom:0}
/* eyebrow pill — assessment-types style, adapted to the site mono type */
.pill{display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,.28);border-radius:100px;padding:4px 14px;color:var(--k-light);font:500 var(--fs-xs) var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;margin-bottom:18px}
/* all-caps is reserved for short labels — long pills keep sentence case */
.pill--sentence{text-transform:none;letter-spacing:.03em}
section{padding:96px 0}
.section-border{border-top:1px solid var(--line)}


/* opening — full-bleed 3D hero: canvas starfield + globe behind centred copy */
.opening{position:relative;display:grid;place-items:center;overflow:clip;min-height:640px;min-height:clamp(620px,calc(100svh - 76px),940px);padding-block:88px 120px;text-align:center;isolation:isolate}
/* readability veil between the scene and the copy — black at the top so the
   sticky nav area stays clean, transparent before the globe's upper limb */
.opening::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.66) 0%,rgba(0,0,0,.3) 34%,rgba(0,0,0,0) 62%)}
.opening > *{position:relative;z-index:1}
.hero-space{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,#000 90%,transparent 100%);mask-image:linear-gradient(to bottom,#000 90%,transparent 100%)}
.hero-inner{display:flex;flex-direction:column;align-items:center;z-index:2}
.hero-title{text-shadow:0 2px 30px rgba(0,0,0,.55)}
.opening .lede{text-shadow:0 2px 24px rgba(0,0,0,.5)}
.opening .form-note{max-width:56ch;margin-inline:auto;text-shadow:0 1px 16px rgba(0,0,0,.5)}
.opening-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.opening .opening-actions{justify-content:center}

/* pulsating gradient background — three brand-color blobs that drift across the
   band and pulse in intensity. One shared layer (a pseudo element, so no markup
   changes) on the inner-page heroes and the CTA band — the home hero draws its
   own scene on canvas now. Kept cheap on
   purpose: only transform + opacity animate — both are compositor-friendly, so
   the browser never repaints the blended 100vw layer — and both cycles run long.
   A third hue-shift keyframe (filter) was removed: filter animations cannot be
   composited and forced a main-thread repaint every frame. */
@keyframes aurora-drift{
  0%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}
  25%{transform:translate3d(-3.5%,2.5%,0) scale(1.05) rotate(-1deg)}
  50%{transform:translate3d(2%,-3%,0) scale(1.02) rotate(.6deg)}
  75%{transform:translate3d(3.5%,3%,0) scale(1.06) rotate(1deg)}
  100%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}
}
@keyframes aurora-pulse{
  0%,100%{opacity:.5}
  50%{opacity:.9}
}
.page-head::after,.cta-final::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:calc(50% - 50vw);width:100vw;top:-10%;bottom:-10%;
  background-image:
    radial-gradient(42% 55% at 76% 24%,rgba(178,71,249,.55) 0%,rgba(178,71,249,0) 72%),
    radial-gradient(40% 52% at 16% 72%,rgba(51,70,255,.4) 0%,rgba(51,70,255,0) 70%),
    radial-gradient(34% 46% at 55% 58%,rgba(118,43,203,.5) 0%,rgba(118,43,203,0) 74%);
  background-repeat:no-repeat;
  background-color:transparent;
  mix-blend-mode:screen;
  opacity:.75;
  transform-origin:50% 50%;
  animation:aurora-drift 36s ease-in-out infinite,
            aurora-pulse 16s ease-in-out infinite;
}
.page-head::after{top:-20%;bottom:-20%}
.cta-final::after{top:-70%;bottom:-70%}
/* fade the layer out before its bottom edge so the spill below a band never
   shows a hard horizontal cut (cta-final is clipped by overflow:hidden) */
.page-head::after{
  -webkit-mask-image:linear-gradient(to bottom,#000 74%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 74%,transparent 100%);
}

/* hero typing effect — multi-line typewriter on the home h1 */
.hero-title .type-line{display:block}
html.typing-pending .hero-title .type-line{visibility:hidden}
.hero-title .type-line.is-typing::after{content:"";display:inline-block;width:.08em;height:.92em;margin-left:.04em;vertical-align:-.08em;border-radius:2px;background:var(--grad);animation:caret-blink .85s steps(1,end) infinite}
@keyframes caret-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.sample{background-image:linear-gradient(var(--k-elev),var(--k-elev)),linear-gradient(90deg,var(--k-primary),var(--k-secondary));background-origin:border-box;background-clip:padding-box,border-box;border:1px solid transparent;border-radius:20px;padding:26px;font:400 var(--fs-sm)/1.75 var(--mono);color:var(--k-fg-alt);box-shadow:0 15px 30px rgba(0,0,0,.4)}
.sample p{margin:0 0 10px;color:inherit;font:inherit}
.sample p:last-child{margin-bottom:0}
.sample-head{display:flex;justify-content:space-between;gap:16px;font:400 var(--fs-xs) var(--mono);color:var(--k-meta);margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.sample .sev{color:var(--k-primary);font-weight:600}
.sample .path{color:var(--k-light)}
.sample .dim{color:var(--k-meta);font-size:var(--fs-xs)}

/* sample boxes — scroll reveal + terminal scan. Same contract as the hero
   typing effect: the inline head script (index/services) adds
   html.sample-pending before first paint, main.js observes each box and marks
   it .is-visible, and a 5s failsafe unhides everything if JS never arrives.
   Only transform + opacity animate (compositor-friendly house rule). */
.sample{position:relative;overflow:hidden;transition:opacity .45s ease,transform .45s ease,box-shadow .3s ease}
.sample:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(0,0,0,.5)}
html.sample-pending .sample{opacity:0;transform:translateY(18px)}
html.sample-pending .sample.is-visible{opacity:1;transform:none}
html.sample-pending .sample.is-visible:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(0,0,0,.5)}
/* scanner light sweeping the card on a loop; starts once the box reveals */
.sample::after{content:"";position:absolute;left:0;right:0;top:0;height:45%;pointer-events:none;background:linear-gradient(180deg,rgba(178,71,249,0) 0%,rgba(178,71,249,.13) 38%,rgba(255,255,255,.18) 50%,rgba(51,70,255,.13) 62%,rgba(51,70,255,0) 100%);transform:translate3d(0,-110%,0);animation:sample-scan 5s cubic-bezier(.4,0,.25,1) infinite}
@keyframes sample-scan{0%{transform:translate3d(0,-110%,0)}50%,100%{transform:translate3d(0,235%,0)}}
/* live-status pip before severity labels (Critical / High / Medium) */
.sample .sev::before{content:"";display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:currentColor;vertical-align:1px;animation:sev-pulse 1.5s ease-in-out infinite}
@keyframes sev-pulse{0%,100%{opacity:1}50%{opacity:.3}}
/* hold the loops until the box has actually revealed */
html.sample-pending .sample:not(.is-visible)::after,
html.sample-pending .sample:not(.is-visible) .sev::before{animation-play-state:paused}

/* test cards — reference card design: dark card, purple border, gradient icon circle */
.test-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
.test-layout .sec-head{max-width:none;margin-bottom:0}
.test-layout .sec-head .btn{margin-top:28px}
.test-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.test-card{display:flex;flex-direction:column;align-items:flex-start;background:var(--k-elev);border:1px solid rgba(178,71,249,.4);border-radius:16px;padding:28px 26px;transition:border-color .3s ease,transform .3s ease,box-shadow .3s ease}
.test-card:hover{border-color:var(--k-primary);transform:translateY(-4px);box-shadow:0 15px 30px rgba(0,0,0,.4)}
.test-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--grad);color:#fff;margin-bottom:18px;flex:none}
.test-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.test-card h3{margin:0 0 8px;font-size:var(--fs-lg)}
.test-card p{margin:0 0 20px;color:var(--k-meta);font-size:var(--fs-md);flex:1}
.test-card .btn-sm{margin-top:auto}

/* splits */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.check-list{list-style:none;margin:22px 0 0;padding:0}
.check-list li{padding:12px 0 12px 22px;border-top:1px solid var(--line);position:relative;color:var(--k-meta);font-size:var(--fs-md)}
.check-list li:first-child{border-top:0}
.check-list li::before{content:"";position:absolute;left:0;top:20px;width:10px;height:2px;border-radius:2px;background:var(--grad)}
.check-list b{color:var(--k-light);font-weight:600}
.check-list a{color:var(--k-primary)}
.check-list a:hover{color:#d9a6ff}
.check-list--flush{margin-top:0}
.check-list--narrow{max-width:640px}

/* contextual related-links row — internal linking between services, pricing, contact */
.related{margin:20px 0 0;font-size:var(--fs-md);color:var(--k-meta)}
.related a{color:var(--k-primary)}
.related a:hover{color:#d9a6ff}

/* audience */
.for-whom{list-style:none;margin:0;padding:0}
.for-whom li{border-left:2px solid var(--line-strong);padding:2px 0 2px 18px;margin-bottom:20px}
.for-whom b{display:block;font:600 var(--fs-base) var(--display);color:var(--k-light);margin-bottom:4px}
.for-whom span{display:block;color:var(--k-meta);font-size:var(--fs-md)}

/* price strip — tiers and CTA grouped and centred so the bar never shows a
   huge dead gap between the last tier and the button */
.price-strip{display:flex;gap:32px;flex-wrap:wrap;align-items:center;justify-content:center;padding:24px 28px;border:1px solid transparent;border-radius:20px;background-image:linear-gradient(var(--k-dark),var(--k-dark)),linear-gradient(90deg,var(--k-primary),var(--k-secondary));background-origin:border-box;background-clip:padding-box,border-box}
.price-item b{display:block;font:600 var(--fs-xl) var(--display);color:var(--k-light)}
.price-item span{font:400 var(--fs-sm) var(--mono);color:var(--k-meta)}

/* faq — the summary is a flex row so the + sits right next to the question
   text instead of the far edge of the (wide) container */
.faq{max-width:760px}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;font:600 var(--fs-base) var(--display);color:var(--k-light);display:flex;align-items:baseline;gap:16px}
.faq summary:hover{color:#d9a6ff}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font:400 var(--fs-lg) var(--mono);color:var(--k-primary);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .answer{padding-top:10px;color:var(--k-meta);font-size:var(--fs-md)}

/* cta — center-top glow band, boxed */
.cta-final{position:relative;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;background-color:var(--k-dark);background-image:var(--glow-cta);border:1px solid var(--line);border-radius:20px;padding:56px 44px;overflow:hidden;text-align:left;transition:border-color .4s ease}
.cta-final:hover{border-color:rgba(178,71,249,.45)}
.cta-final > *{position:relative;z-index:1}
.cta-final p{margin:0;color:var(--k-fg-alt)}
.cta-final .opening-actions{margin-top:0}

/* forms */
.form-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:start}
.field{border:0;padding:0;margin:0 0 18px}
.field label,.field .field-label,.field legend{display:block;font:500 var(--fs-sm) var(--body);color:var(--k-meta);margin-bottom:7px;padding:0}
.field input,.field select,.field textarea{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line-strong);border-radius:8px;color:var(--k-light);font:400 var(--fs-md) var(--body);padding:11px 13px;transition:border-color .18s,box-shadow .18s}
.field textarea{min-height:120px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--k-fg);opacity:1}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--k-primary);box-shadow:0 0 0 3px rgba(178,71,249,.2)}
select option{background:var(--k-dark);color:var(--k-light)}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.checks label{display:flex;align-items:center;gap:10px;font:400 var(--fs-md) var(--body);color:var(--k-fg-alt);border:1px solid var(--line-strong);border-radius:8px;padding:10px 12px;cursor:pointer;margin:0;transition:border-color .18s}
.checks label:hover{border-color:var(--k-primary)}
.checks input{width:auto;accent-color:var(--k-primary)}
.form-note{font:400 var(--fs-sm) var(--body);color:var(--k-meta);margin-top:14px}
.form-note a{color:var(--k-primary)}
.form-status{font:400 var(--fs-sm) var(--body);color:var(--k-meta);margin-top:14px}
.form-status.is-error{color:#ff9e9e}
.form-status a{color:var(--k-primary)}
.form-ok{border:1px solid transparent;border-radius:20px;padding:28px;background-image:linear-gradient(var(--k-dark),var(--k-dark)),linear-gradient(90deg,var(--k-primary),var(--k-secondary));background-origin:border-box;background-clip:padding-box,border-box}
.form-ok h2{color:var(--k-primary);font-size:var(--fs-xl);margin-bottom:10px}
.steps-side ol{margin:0;padding-left:20px;color:var(--k-meta)}
.steps-side h2{font-size:var(--fs-xl)}
.steps-side ol + h2{margin-top:32px}
.steps-side .check-list{margin-top:12px}
.steps-side li{padding:7px 0}
.steps-side li b{color:var(--k-light);display:block}

/* contact — "your benefits" two-column grid, compact variant of check-list */
.check-list--cols{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.check-list--cols li{border-top:0;padding:7px 0 7px 22px}
.check-list--cols li::before{top:13px}

/* contact — horizontal "what happens next" flow strip (screenshot layout):
   big gradient number, title + copy, chevron separators between steps */
.flow-wrap{margin-top:8px;padding-top:44px;border-top:1px solid var(--line)}
.flow-wrap h2{font-size:var(--fs-xl);margin-bottom:26px}
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:34px;counter-reset:flow}
.flow li{position:relative;display:flex;gap:16px;align-items:flex-start;padding-right:30px}
.flow li:not(:last-child)::after{content:"";position:absolute;right:-4px;top:6px;width:12px;height:12px;border-top:2px solid var(--line-strong);border-right:2px solid var(--line-strong);transform:rotate(45deg)}
.flow-num{font:700 34px/1 var(--display);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;flex:none}
.flow-body h3{margin:0 0 6px;font-size:var(--fs-base)}
.flow-body p{margin:0;color:var(--k-meta);font-size:var(--fs-md)}

/* service pages */
.page-head{padding:96px 0 56px;background-color:var(--k-dark);background-image:var(--glow-hero);background-repeat:no-repeat}
.page-head > .container{position:relative;z-index:1}
.page-head p{max-width:62ch}
.svc{padding:64px 0;border-bottom:1px solid var(--line)}
.svc:last-of-type{border-bottom:0}
.svc-layout{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.svc h3{margin-top:26px}
.svc ul,.svc ol{margin:0;padding-left:20px;color:var(--k-meta);font-size:var(--fs-md)}
.svc li{padding:4px 0}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.tags span{font:400 var(--fs-xs) var(--mono);color:var(--k-meta);border:1px solid var(--line-strong);border-radius:100px;padding:5px 14px}
@media (min-width:901px){
  .svc.flip .svc-copy{order:2}
  .svc.flip .svc-aside{order:1}
}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.tier{display:flex;flex-direction:column;background-color:var(--k-dark);border:1px solid var(--line);border-radius:20px;padding:26px;transition:transform .3s ease,box-shadow .3s ease}
.tier:hover{transform:translateY(-4px);box-shadow:0 15px 30px rgba(0,0,0,.4)}
.tier.featured{border-color:transparent;background-image:linear-gradient(var(--k-dark),var(--k-dark)),linear-gradient(90deg,var(--k-primary),var(--k-secondary));background-origin:border-box;background-clip:padding-box,border-box}
.tier .flag{display:inline-block;font:500 var(--fs-xs) var(--mono);color:var(--k-primary);background:var(--accent-soft);border-radius:100px;padding:4px 12px;margin-bottom:12px;letter-spacing:.04em}
.tier .price{font:700 var(--fs-lede)/1 var(--display);color:var(--k-light);margin:6px 0 2px}
.tier .price small{font:400 var(--fs-md) var(--body);color:var(--k-meta)}
.tier .from{font:400 var(--fs-sm) var(--mono);color:var(--k-meta)}
.tier ul{list-style:none;margin:20px 0;padding:0;flex:1}
.tier li{padding:9px 0 9px 22px;border-top:1px solid var(--line);position:relative;color:var(--k-meta);font-size:var(--fs-md)}
.tier li:first-child{border-top:0}
.tier li::before{content:"";position:absolute;left:0;top:17px;width:10px;height:2px;border-radius:2px;background:var(--grad)}
.price-foot{color:var(--k-meta);font-size:var(--fs-sm);margin-top:22px;text-align:center}

/* legal */
.legal{max-width:720px;margin:0 auto}
.legal h2{margin-top:40px;font-size:var(--fs-xl)}
.legal p,.legal li{color:var(--k-meta)}
.legal ul{padding-left:20px}
.legal li{padding:4px 0}
.legal a{color:var(--k-primary)}

/* footer — dark-shade band */
/* footer — dark-shade band; the brand column is sized to its 34ch copy and
   the column gap is tightened so the nav sits close to the brand block */
.site-footer{background:var(--k-dark);padding:80px 0 28px}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:36px 24px;margin-bottom:32px}
.foot-grid h3{font:600 var(--fs-lg) var(--display);margin:0 0 16px;color:var(--k-light)}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{padding:4px 0}
.foot-grid a{color:var(--k-fg-alt);font-size:var(--fs-md);transition:color .2s ease}
.foot-grid a:hover{color:var(--k-light)}
.foot-brand p{color:var(--k-meta);font-size:var(--fs-md);max-width:34ch}
.foot-brand .logo{display:inline-flex;margin-bottom:4px}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);color:var(--k-meta);font-size:var(--fs-sm)}
.foot-bottom a{color:var(--k-meta)}
.foot-bottom a:hover{color:var(--k-light)}

/* scroll to top — floating scroll-to-top button */
.scroll-top{position:fixed;right:24px;bottom:24px;z-index:40;width:50px;height:50px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s ease,background .3s ease}
.scroll-top.is-show{opacity:1;pointer-events:auto}
.scroll-top:hover{background:var(--k-primary)}
.scroll-top svg{width:20px;height:20px}

/* responsive */
@media (max-width:900px){
  .split,.svc-layout,.form-grid{grid-template-columns:1fr}
  .opening{padding-block:72px 96px}
  section{padding:72px 0}
  .page-head{padding:72px 0 48px}
  .tiers{grid-template-columns:1fr;max-width:440px;margin:0 auto}
  .foot-grid{grid-template-columns:1fr 1fr}
  .test-layout{grid-template-columns:1fr;gap:36px}
  .cta-final{grid-template-columns:1fr}
  .svc.flip .svc-copy{order:0}
  .flow{grid-template-columns:1fr;gap:22px}
  .flow li{padding-right:0}
  .flow li:not(:last-child)::after{display:none}
}
/* collapse the nav earlier: the full menu + CTA pill needs ~760px,
   so switch to the burger dropdown below 860px (was 640px — it overflowed) */
@media (max-width:860px){
  .burger{display:block}
  .menu{position:absolute;top:76px;left:0;right:0;display:none;flex-direction:column;align-items:flex-start;gap:0;background:var(--k-black);border-bottom:1px solid var(--line);padding:8px 24px 20px}
  .menu.open{display:flex}
  .menu a{padding:11px 0;width:100%}
  /* keep the primary CTA usable inside the dropdown, full pill shape */
  .menu .nav-cta{display:inline-flex;width:auto;padding:.797em 1.463em;margin:12px 0 4px}
}
@media (max-width:640px){
  section{padding:56px 0}
  /* keep the hero pill on one line even on 320px viewports */
  .opening .pill--sentence{font-size:10px;letter-spacing:.02em;padding:4px 11px}
  .checks{grid-template-columns:1fr}
  .check-list--cols{grid-template-columns:1fr}
  .test-grid{grid-template-columns:1fr;max-width:440px}
  .price-strip{flex-direction:column;align-items:flex-start;gap:18px}
  .cta-final{padding:36px 24px}
  .foot-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .burger span,.burger span::before,.burger span::after,.btn,.field input,.field select,.field textarea,.checks label,.faq summary::after,.test-card,.tier,.scroll-top,.cta-final{transition:none}
  .tier:hover{transform:none}
  /* aurora background: freeze at a mid-intensity static state */
  .page-head::after,.cta-final::after{animation:none;opacity:.7}
  /* sample boxes: reveal instantly, freeze the scan sweep and severity pip,
     drop the hover lift (the head script skips sample-pending entirely) */
  html.sample-pending .sample,html.sample-pending .sample.is-visible{transition:none;opacity:1;transform:none}
  .sample,.sample:hover{transition:none;transform:none}
  .sample::after,.sample .sev::before{animation:none}
}