/* SERVACT website v2. Brand tokens unchanged from v1. */
@font-face{font-family:"Manrope";font-style:normal;font-display:swap;font-weight:200 800;src:url(../fonts/manrope-variable.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/inter-variable.woff2) format("woff2")}

:root{
  --midnight:#01172E; --navy:#053260; --blue:#007AE7; --orange:#FC8102; --orange-deep:#C65B08;
  --white:#FFFFFF; --slate:#647080; --ink:#01172E; --ink-body:#33404F; --mist:#F3F5F8;
  --line-light:#DCE2EA; --line-dark:rgba(255,255,255,.14); --text-dark-2:#B4C0CE; --text-dark-3:#8193A8;
  --head:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --wrap:1180px; --gutter:clamp(20px,4vw,40px); --header:80px;
  color-scheme:light; box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + env(safe-area-inset-top,0px));background:var(--midnight)}
body{margin:0;background:var(--white);color:var(--ink-body);font-family:var(--body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--head);color:var(--ink);margin:0;letter-spacing:-.02em;line-height:1.2}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--orange);color:var(--midnight);padding:10px 16px;font-weight:600;z-index:100}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}

/* Buttons */
.btn{min-height:48px;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--body);font-weight:600;font-size:1rem;line-height:1;text-decoration:none;padding:15px 24px;border-radius:10px;border:1.5px solid transparent;cursor:pointer;transition:background-color .15s,border-color .15s}
.btn-primary{background:var(--orange);color:var(--midnight)}
.btn-primary:hover{background:#FF9326}
.btn-sm{padding:12px 18px;font-size:.9375rem;border-radius:8px;min-height:44px}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:var(--midnight);border-bottom:1px solid transparent;padding-top:env(safe-area-inset-top,0px);margin-top:calc(-1 * env(safe-area-inset-top,0px));transition:border-color .2s}
.site-header.scrolled{border-bottom-color:var(--line-dark)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:var(--header);gap:24px}
.brand{display:block;padding:10px 0;flex:none}
.brand img{width:184px;height:auto}
.nav{display:flex;align-items:center;gap:28px}
.nav-links{display:flex;gap:26px}
.nav-links a{color:var(--text-dark-2);text-decoration:none;font-weight:500;font-size:.9375rem;padding:8px 0}
.nav-links a:hover{color:var(--white)}
.nav-toggle{display:none;background:transparent;border:1px solid var(--line-dark);color:var(--white);border-radius:8px;width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center}
.nav-toggle svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.nav-toggle .i-close{display:none}
.menu-open .nav-toggle .i-close{display:block}
.menu-open .nav-toggle .i-open{display:none}

/* Sections */
section{padding:clamp(64px,7.5vw,100px) 0}
.sec-head{max-width:760px}
.sec-head h2,.h2{font-weight:800;font-size:clamp(1.875rem,3.4vw,2.75rem);line-height:1.12}
.sec-head p{margin-top:18px;font-size:1.125rem;max-width:40em}
.kicker{font:600 .9375rem var(--body);color:var(--slate);margin-bottom:14px}
.dark{background:var(--midnight);color:var(--text-dark-2)}
.dark h2,.dark h3{color:var(--white)}
.dark .kicker{color:var(--text-dark-3)}
.mist{background:var(--mist)}

/* Hero */
.hero{background:var(--midnight);color:var(--white);overflow:hidden;position:relative;padding:0}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 78% 45%,rgba(5,50,96,.75),transparent 70%);pointer-events:none}
.hero-inner{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:48px;align-items:center;padding-top:clamp(48px,7vw,88px);padding-bottom:clamp(56px,8vw,100px)}
.brandline{font:700 1.0625rem var(--head);color:var(--white);letter-spacing:-.01em;margin-bottom:22px}
.brandline span{color:var(--orange)}
.hero h1{color:var(--white);font-weight:800;font-size:clamp(2.125rem,3.6vw,3.125rem);line-height:1.08;letter-spacing:-.03em}
.hero h1 span{display:block;color:var(--text-dark-2)}
.hero .lede{margin-top:24px;font-size:clamp(1.0625rem,1.5vw,1.1875rem);color:var(--text-dark-2);max-width:33em}
.questions{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px}
.questions li{font:600 .9375rem var(--body);color:var(--white);border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);border-radius:999px;padding:9px 16px}
.hero-ctas{margin-top:32px}
.hero-visual{position:relative}
.hero-visual svg{width:100%;height:auto;overflow:visible}
.hero-mobile{display:none}
.chip rect.card{fill:rgba(255,255,255,.055);stroke:rgba(255,255,255,.16)}
.chip .t1{font:700 21px var(--head);fill:#fff;letter-spacing:-.01em}
.chip .t2{font:500 13px var(--body);fill:#9FB0C3}
.chip .ico{stroke:#8FC2F5;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ex-label{font:500 13px var(--body);fill:#8193A8}
.wire{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.5}
.flow{fill:none;stroke:var(--orange);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:5 95;stroke-dashoffset:100;opacity:0}
.node{fill:var(--midnight);stroke:var(--orange);stroke-width:2}
.core-ring{fill:none;stroke:rgba(252,129,2,.35);stroke-width:1.5}
.core-label{font:600 13px var(--body);fill:#C9D4E0;text-anchor:middle}
@media (prefers-reduced-motion:no-preference){
  .anim .chip{opacity:0;animation:settle .9s cubic-bezier(.2,.7,.2,1) forwards}
  .anim .chip.c1{--dx:-26px;--dy:-18px;--r:-4deg;animation-delay:.1s}
  .anim .chip.c3{--dx:26px;--dy:-22px;--r:3deg;animation-delay:.2s}
  .anim .chip.c4{--dx:-30px;--dy:20px;--r:3deg;animation-delay:.4s}
  .anim .chip.c5{--dx:24px;--dy:24px;--r:-3deg;animation-delay:.5s}
  .anim .wire{stroke-dasharray:100;stroke-dashoffset:100;animation:draw .8s ease-out forwards;animation-delay:1s}
  .anim .node{opacity:0;animation:fade .3s ease-out forwards;animation-delay:1.6s}
  .anim .core{opacity:0;transform-box:fill-box;transform-origin:center;animation:reveal .7s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:1.7s}
  .anim .core-ring{opacity:0;transform-box:fill-box;transform-origin:center;animation:pulse 3.2s ease-out infinite;animation-delay:2.6s}
  .anim .core-label{opacity:0;animation:fade .5s ease-out forwards;animation-delay:2.2s}
  .anim .flow{animation:flow 3.2s linear infinite;animation-delay:2.4s}
  .anim .flow.f3{animation-delay:2.8s}.anim .flow.f4{animation-delay:3.6s}.anim .flow.f5{animation-delay:3.0s}
  .m-flow{animation:mflow 2.4s linear infinite}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.core-ring{display:none}}
@keyframes settle{from{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r))}to{opacity:1;transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}
@keyframes reveal{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}
@keyframes flow{0%{stroke-dashoffset:100;opacity:1}90%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes pulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.35)}}
@keyframes mflow{from{top:-10px}to{top:100%}}
.m-label{font:500 .8125rem var(--body);color:#8193A8;margin:0 0 10px}
.m-sources{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.m-sources span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:52px;padding:6px 4px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);border-radius:10px;font:700 .9375rem/1.15 var(--head);color:#fff}
.m-join{position:relative;height:40px;margin:0 auto;width:2px;background:rgba(255,255,255,.22);overflow:hidden}
.m-flow{position:absolute;left:0;top:-10px;width:2px;height:10px;background:var(--orange);border-radius:2px}
.m-core{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.05);border:1px solid rgba(252,129,2,.45);border-radius:14px;padding:12px 16px}
.m-core img{width:48px;height:48px;border-radius:11px}
.m-core p{color:#fff;font:700 1rem/1.3 var(--head)}
.m-core p span{display:block;font:400 .875rem var(--body);color:var(--text-dark-2)}

/* Problem: recognisable behaviours */
.problem-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}
.problem-grid .sec-head{position:sticky;top:calc(var(--header) + 32px)}

/* Belief */

/* Platform */
.intro-block{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:start}
.intro-block p{font-size:1.125rem}
.intro-block p + p{margin-top:14px}
.arch{margin-top:48px}
.arch-diagram{margin-top:0}
.arch-label{font:500 .875rem var(--body);color:var(--slate);margin-bottom:12px}
.systems{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.systems li{display:flex;align-items:center;justify-content:center;text-align:center;min-height:64px;padding:10px;border:1.5px dashed #C3CCD8;border-radius:12px;background:var(--mist);font:700 1rem/1.25 var(--head);color:var(--ink)}
.arch-lines{position:relative;height:64px}
.arch-lines svg{position:absolute;inset:0;width:100%;height:100%}
.arch-lines path{fill:none;stroke:#C4CDD8;stroke-width:1.5}
.layer{display:flex;align-items:center;gap:18px;background:var(--midnight);border-radius:16px;padding:20px 26px}
.layer img{width:56px;height:56px;border-radius:13px;flex:none}
.layer .lt{color:var(--white);font:700 1.25rem/1.3 var(--head);letter-spacing:-.01em}
.layer .ls{color:var(--text-dark-2);font-size:.9375rem;margin-top:2px}
.layer ul{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.layer li{font:600 .875rem/1 var(--body);color:var(--white);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:9px 13px}
.arch-note{margin-top:18px;font-size:.9375rem;color:var(--slate);max-width:48em}

/* How it works */
.steps{margin-top:52px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;position:relative;counter-reset:s}
.steps::before{content:"";position:absolute;top:15px;left:16px;right:16px;height:1.5px;background:linear-gradient(90deg,var(--orange),rgba(252,129,2,.25))}
.step{position:relative;padding-top:52px}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:0;left:0;width:32px;height:32px;border-radius:50%;background:var(--white);border:2px solid var(--orange);color:var(--ink);font:700 .875rem/28px var(--head);text-align:center}
.step h3{font-size:1.3125rem;font-weight:700}
.step h3 span{display:block;font:600 .8125rem var(--body);color:var(--orange-deep);letter-spacing:0;margin-bottom:6px}
.step p{margin-top:10px;font-size:.975rem}

/* Use cases */
.use-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:44px}
.use{border:1px solid #E3E8EE;border-radius:16px;padding:28px 26px;background:var(--white);display:flex;flex-direction:column;gap:12px}
.use svg{width:40px;height:40px;stroke:var(--navy);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.use svg .o{stroke:var(--orange)}
.use h3{font-size:1.25rem;font-weight:700}
.use .shown{align-self:flex-start;margin-top:auto;font:600 .8125rem var(--body);color:var(--navy);background:#E8F0F9;border-radius:6px;padding:5px 9px;text-decoration:none}
.use .shown:hover{text-decoration:underline}
.uses-note{margin-top:20px;font-size:.9375rem;color:var(--slate)}

/* Origin */

/* Final CTA */
.final{text-align:center}
.final-logo{width:min(440px,78vw);height:auto;margin:0 auto}
.final .tag{margin-top:22px;font:700 clamp(1.25rem,2.4vw,1.625rem)/1.35 var(--head);color:var(--white);letter-spacing:-.01em}
.final .tag span{display:block;color:var(--text-dark-2);font-weight:600;font-size:.8em;margin-top:2px}
.final h2{margin-top:52px;font-weight:800;font-size:clamp(1.75rem,3.2vw,2.5rem);line-height:1.15}
.final .invite{margin:16px auto 0;max-width:34em;font-size:1.125rem}
.final-ctas{margin-top:32px;display:flex;flex-direction:column;align-items:center;gap:16px}
.email-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;font-size:.9375rem}
.email-row a{color:var(--white);font-weight:500;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:3px}
.copy{font:500 .8125rem var(--body);color:var(--text-dark-2);background:transparent;border:1px solid var(--line-dark);border-radius:6px;padding:10px 14px;min-height:44px;cursor:pointer}
.copy:hover{color:var(--white);border-color:rgba(255,255,255,.4)}

/* Footer */
.site-footer{background:var(--white);border-top:1px solid var(--line-light);padding:36px 0 40px}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px}
.foot img{width:170px;height:auto}
.foot p{font-size:.875rem;color:var(--slate)}
.foot a{color:var(--navy);font-weight:500}

/* Responsive */
@media (max-width:1100px){
  .nav-toggle{display:inline-flex}
  .nav-links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--midnight);border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);padding:8px var(--gutter) 16px}
  .menu-open .nav-links{display:flex}
  .nav-links a{padding:14px 0;font-size:1.0625rem;border-bottom:1px solid rgba(255,255,255,.06)}
  .nav{gap:12px}
}
@media (max-width:1024px){
  .hero-inner{grid-template-columns:1fr;gap:40px}
  .hero-visual{max-width:540px;width:100%;margin:0 auto}
  .problem-grid,.intro-block{grid-template-columns:1fr;gap:28px}
  .problem-grid .sec-head{position:static}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
  .steps::before{display:none}
  .use-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .layer{flex-wrap:wrap}
  .layer ul{margin-left:0;justify-content:flex-start;width:100%}
}
@media (max-width:760px){
  .systems{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .arch-lines svg{display:none}
  .arch-lines{height:40px}
  .arch-lines::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:#C4CDD8}
}
@media (max-width:680px){
  .hero-visual{display:none}
  .hero-mobile{display:block}
}
@media (max-width:640px){
  body{font-size:1rem}
  :root{--header:66px}
  .brand img{width:154px}
  .nav .btn-sm{padding:10px 14px;font-size:.875rem}
  .hero-ctas .btn{width:100%}
  .questions li{font-size:.875rem;padding:8px 13px}
  .steps,.use-grid{grid-template-columns:1fr}
  .steps{row-gap:0}
  .step{padding:0 0 30px 52px}
  .step:not(:last-child)::after{content:"";position:absolute;left:15px;top:36px;bottom:4px;width:1.5px;background:rgba(252,129,2,.4)}
  .systems{grid-template-columns:repeat(2,minmax(0,1fr))}
  .systems li:last-child{grid-column:1 / -1}
  .foot{flex-direction:column;align-items:flex-start}
}
@media (max-width:380px){
  .m-sources{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:360px){
  .wrap{padding:0 16px}.brand img{width:150px}.header-inner{gap:8px}.nav{gap:8px}
  .nav .btn-sm{padding:10px 11px;font-size:.8125rem}
}

/* Header CTA placement */
.menu-cta{display:none}
@media (max-width:640px){
  .header-cta{display:none}
  .nav-links .menu-cta{display:flex;justify-content:center;margin-top:12px;background:var(--orange);color:var(--midnight);border-radius:10px;font-weight:600;border-bottom:0;min-height:48px;align-items:center}
}

/* Links from Home one level deeper into the Platform page */
.deeper{margin-top:14px}
.deeper a{font:600 .9375rem var(--body);color:var(--navy);text-decoration:none;border-bottom:1px solid rgba(5,50,96,.25);padding-bottom:2px}
.deeper a:hover{color:var(--orange-deep);border-color:var(--orange-deep)}

/* =========================================================================
   Site structure: Overview / Platform / Capabilities
   ========================================================================= */
/* Navigation: active page */
.nav-links{gap:32px}
.nav-links a[aria-current="page"]{color:var(--white);box-shadow:inset 0 -2px 0 var(--orange)}
@media (max-width:1100px){
  .nav-links a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--orange);padding-left:14px}
}
/* Buttons */
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.btn-ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.38)}
.btn-ghost:hover{border-color:var(--white);background:rgba(255,255,255,.06)}
@media (max-width:680px){.hero-ctas.btn-row .btn{flex:1 1 100%}}
/* Overview: who it's for */
.for{margin-top:24px;padding-top:20px;border-top:1px solid var(--line-light)}
.for-cap{font:600 .875rem var(--body)!important;color:var(--slate);margin-bottom:10px}
.for ul{display:flex;flex-wrap:wrap;gap:8px}
.for li{font:600 .875rem var(--body);color:var(--navy);background:#E8F0F9;border-radius:999px;padding:7px 13px}
/* Overview: route to Platform / Capabilities / demo */
.explore .sec-head p{color:var(--text-dark-2)}
.explore-grid{margin-top:40px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ex-card{display:flex;flex-direction:column;gap:10px;padding:26px 26px 24px;border-radius:16px;border:1px solid var(--line-dark);background:rgba(255,255,255,.035);text-decoration:none;color:var(--text-dark-2);transition:border-color .25s ease,background-color .25s ease,transform .25s ease}
.ex-card:hover{border-color:rgba(0,122,231,.7);background:rgba(0,122,231,.08);transform:translateY(-2px)}
.ex-k{font:600 .8125rem var(--body);color:var(--orange)}
.ex-card h3{font-size:1.3125rem;font-weight:800;color:var(--white)}
.ex-card p{font-size:.9688rem;flex:1}
.ex-go{margin-top:6px;font:600 .9375rem var(--body);color:var(--white)}
.ex-card:hover .ex-go{color:var(--orange)}
.explore-grid-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:880px}
@media (max-width:1024px){.explore-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.ex-card{transition:none}.ex-card:hover{transform:none}}
/* Footer */
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.foot-nav a{font:500 .9375rem var(--body);color:var(--navy);text-decoration:none}
.foot-nav a:hover{text-decoration:underline}
.foot-nav a[aria-current="page"]{color:var(--ink);font-weight:600}
.foot .foot-legal{flex-basis:100%;border-top:1px solid var(--line-light);padding-top:18px;margin-top:4px}
@media (max-width:680px){.foot-nav{gap:8px 18px}}
@media (max-width:680px){.pf-hero .btn-row .btn{flex:1 1 100%}}
.nav-links{order:1}.header-cta{order:2}.nav-toggle{order:3}

/* Wide screens: a little more room for content, then a gentle scale-up on very large monitors so the page doesn't sit
   small in the centre. Steps keep the layout at roughly a 2100px design width. Browsers without zoom just show it centred. */
@media (min-width:1600px){:root{--wrap:1320px}}
@media (min-width:2400px){html{zoom:1.125}}
@media (min-width:2800px){html{zoom:1.3}}
@media (min-width:3200px){html{zoom:1.5}}
@media (min-width:3600px){html{zoom:1.7}}

/* Header spans the full window: logo at the left edge, navigation at the right */
.site-header .wrap{max-width:none}

/* Product screenshots (Overview and Platform) */


/* Two-line section headings: the second sentence starts on its own line */
.h-line{display:block}

/* "Where SERVACT fits": named ERP and finance system tiles with API connectors */
.systems-erp li{justify-content:flex-start;gap:12px;text-align:left;padding:12px 14px;border:1px solid var(--line-light);border-style:solid;background:var(--white);box-shadow:0 1px 2px rgba(1,23,46,.04)}
.sys-ico{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:#E8F0F9;display:inline-flex;align-items:center;justify-content:center}
.sys-ico svg{width:18px;height:18px;fill:none;stroke:var(--navy);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sys-txt{display:grid;gap:1px;min-width:0}
.sys-txt b{font:700 .9375rem/1.2 var(--head);color:var(--ink)}
.sys-txt small{font:500 .75rem var(--body);color:var(--slate)}
.api{position:absolute;left:var(--x);top:12px;transform:translateX(-50%);padding:1px 7px;border-radius:999px;background:var(--white);border:1px solid #8DBDF0;font:700 .625rem/1.6 var(--body);letter-spacing:.06em;color:var(--blue);z-index:1}
@media (max-width:760px){.api{display:none}.api-mid{display:block;left:50%;top:10px}}

/* Header demo button: hidden while the page's introductory "Arrange a demo" button is on screen (site.js).
   visibility keeps its space, so the header never shifts, and takes it out of the tab order and accessibility tree.
   cta-wait hides it briefly on load until site.js has checked; it is removed after 2.5s if the script never runs. */
.header-cta{transition:opacity .25s ease,transform .25s ease,visibility 0s linear 0s}
html.cta-wait .header-cta,.header-cta.is-hidden{visibility:hidden;opacity:0;transform:translateY(-3px);transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s}
html.cta-wait .header-cta{transition:none}
@media (prefers-reduced-motion:reduce){.header-cta,.header-cta.is-hidden{transition:none;transform:none}}

/* Overview "What it does": five steps (reuses .steps / .step) */
.what{background:var(--mist);padding:clamp(48px,6vw,80px) 0}
.what-never{margin-top:36px;max-width:52em;padding:16px 20px;border-left:3px solid var(--orange);background:var(--white);border-radius:0 10px 10px 0;font-size:1rem;line-height:1.55;color:var(--ink-body)}
.what-never strong{color:var(--ink)}

/* Overview annotated screens (#explained, #fraud-stopped): image with numbered markers beside numbered lines */
.shot{background:var(--white);padding:clamp(48px,6vw,84px) 0}
.shot-alt{background:var(--mist)}
.shot .sec-head h2{font-size:clamp(1.75rem,3vw,2.375rem)}
.shot-fig{margin:0;min-width:0}
.shot-img{position:relative;border:1px solid var(--line-light);border-radius:14px;overflow:hidden;background:var(--white);box-shadow:0 18px 50px rgba(1,23,46,.12)}
.shot-img img{display:block;width:100%;height:auto}
.mk,.cn{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--orange);color:var(--midnight);font:800 .9375rem/1 var(--head)}
.mk{position:absolute;width:28px;height:28px;transform:translate(-50%,-50%);box-shadow:0 0 0 3px var(--white),0 2px 8px rgba(1,23,46,.35)}
.cn{flex:none;width:28px;height:28px}
.shot-tag{margin-top:10px;font-size:.8125rem;line-height:1.4;color:var(--slate)}
.callouts{display:grid;gap:18px}
.callouts li{display:flex;gap:14px;align-items:flex-start;font-size:1.0625rem;line-height:1.45;color:var(--ink)}
.callouts li span:last-child{padding-top:2px}
.mail-card{border:1px solid var(--line-light);border-radius:14px;background:var(--white);padding:20px 22px;box-shadow:0 10px 30px rgba(1,23,46,.08)}
.mail-label{font:600 .75rem var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--slate);margin-bottom:12px}
.mail-from{font:500 .9375rem var(--body);color:var(--ink);word-break:break-word}
.mail-body{margin-top:12px;font-size:1rem;line-height:1.5;color:var(--ink-body)}
.mail-note{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-light);font:700 .9375rem/1.4 var(--head);color:var(--orange-deep)}
.shot-close{margin-top:34px;font:800 clamp(1.125rem,1.8vw,1.3125rem)/1.3 var(--head);color:var(--ink);max-width:40em}
@media (max-width:760px){.mk{width:22px;height:22px;font-size:.75rem}}

/* #how: real product screens in motion, one per step */
.how-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,56px);margin-top:40px;align-items:start}
.how-steps{display:grid;gap:6px}
.how-step{display:block;width:100%;text-align:left;font:inherit;color:inherit;background:transparent;border:0;border-radius:12px;padding:16px 16px 18px;cursor:pointer;position:relative;opacity:.5;transition:opacity .3s ease,background-color .3s ease}
.how-step:hover,.how-step[aria-pressed="true"]{opacity:1}
.how-step[aria-pressed="true"]{background:rgba(255,255,255,.05)}
.how-step:focus-visible{outline:3px solid var(--orange);outline-offset:2px;opacity:1}
.how-step .life-pillar{display:block;font:600 .8125rem var(--body);color:var(--orange);margin-bottom:6px}
.how-h{display:block;font:800 clamp(1.375rem,2.2vw,1.75rem)/1.2 var(--head);color:var(--white);letter-spacing:-.02em}
.how-p{display:block;margin-top:8px;color:var(--text-dark-2);max-width:30em;font-size:1.0625rem;line-height:1.55}
.how-bar{display:none;position:absolute;left:16px;right:16px;bottom:6px;height:2px;border-radius:2px;background:rgba(255,255,255,.16);overflow:hidden}
.how-bar b{display:block;height:100%;width:100%;background:var(--orange);transform-origin:0 50%;transform:scaleX(0)}
.how-motion .how-step[aria-pressed="true"] .how-bar{display:block}
.how-motion .how-step[aria-pressed="true"] .how-bar b{animation:how-fill 5s linear forwards}
.how-stage{position:relative;aspect-ratio:2736/1710;border-radius:16px;overflow:hidden;border:1px solid var(--line-dark);background:#0A2647;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.how-shot{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .7s ease}
.how-shot.is-on{opacity:1}
.how-shot img{display:block;width:100%;height:100%;object-fit:cover}
.how-motion .how-shot.is-on img{animation:how-kb 8s ease-out forwards;transform-origin:var(--kb,50% 50%)}
.how-motion .how-shot:nth-child(2) img{--kb:30% 60%}.how-motion .how-shot:nth-child(3) img{--kb:50% 40%}.how-motion .how-shot:nth-child(4) img{--kb:60% 30%}
.how-paused .how-bar b,.how-paused .how-shot img{animation-play-state:paused!important}
.how-tag{margin-top:10px;font-size:.8125rem;color:var(--text-dark-3)}
@keyframes how-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes how-kb{from{transform:scale(1)}to{transform:scale(1.05)}}
@media (max-width:900px){
  .how-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .how-step .how-p{display:none}
  .how-step[aria-pressed="true"] .how-p{display:block}
  .how-step{padding:12px 14px 16px}
  .how-h{font-size:1.25rem}
}
@media (prefers-reduced-motion:reduce){.how-shot{transition:none}}


/* ---- Overview, 11 Nov 2026: concrete hero with the highlights video, "What it does" as a stepper with the real
   screens (replaces "How the work moves"), the two examples side by side with highlights, and "How a pilot works". ---- */
.hero-v .hero-inner{grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr);gap:clamp(28px,3.5vw,56px)}
@media (min-width:1025px){.hero-v .wrap{max-width:calc(var(--wrap) + 260px)}}
.hero-v h1{font-size:clamp(2.125rem,3.3vw,3.125rem)}
.hero-q{margin-top:18px;font:600 1rem/1.5 var(--body);color:var(--white);max-width:33em;padding-left:14px;border-left:2px solid var(--orange)}
.hero-player{min-width:0}
.hero-player video{display:block;width:100%;height:auto;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:#0A2647;box-shadow:0 30px 70px -20px rgba(0,0,0,.6),0 0 0 1px rgba(var(--glow-blue,0,122,231),.18)}
.hero-vtag{margin-top:10px;font-size:.8125rem;color:var(--text-dark-3)}
@media (max-width:1024px){.hero-v .hero-inner{grid-template-columns:minmax(0,1fr)}.hero-player{max-width:720px}}

/* What it does: the stepper on a light background */
.what .how-grid{margin-top:32px}
.how-light .how-step{opacity:.6}
.how-light .how-step:hover,.how-light .how-step[aria-pressed="true"]{opacity:1}
.how-light .how-step[aria-pressed="true"]{background:var(--white);box-shadow:0 8px 24px -14px rgba(1,23,46,.35)}
.how-light .how-step .life-pillar{color:var(--orange-deep)}
.how-light .how-h{color:var(--ink);font-size:clamp(1.25rem,1.9vw,1.5rem)}
.how-light .how-p{color:var(--ink-body);font-size:1rem}
.how-light .how-bar{background:rgba(1,23,46,.1)}
.how-light .how-stage{border-color:var(--line-light);background:var(--white);box-shadow:0 24px 60px -24px rgba(1,23,46,.35)}
.how-light .how-tag{color:var(--slate)}
.how-light .how-steps{gap:4px}
.how-light .how-step{padding:12px 16px 16px}
/* with the stepper running, only the current step shows its description (all show without JavaScript) */
@media (min-width:901px){.how-light.how-motion .how-step:not([aria-pressed="true"]) .how-p{display:none}.how-light.how-motion .how-step:not([aria-pressed="true"]){padding-bottom:12px}}
.how-motion .how-shot.is-on img{transform-origin:var(--kb,50% 50%)}

/* Two things it caught: side by side */
.proof-grid{margin-top:34px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,3.5vw,48px);align-items:start}
.proof-card{min-width:0;background:var(--white);border:1px solid var(--line-light);border-radius:18px;padding:clamp(18px,2.4vw,28px);box-shadow:0 18px 50px -30px rgba(1,23,46,.35)}
.proof-card h3{font-size:clamp(1.1875rem,1.7vw,1.375rem);line-height:1.25;margin-bottom:18px}
.proof-card .shot-img{box-shadow:0 10px 30px -18px rgba(1,23,46,.35)}
.proof-card .callouts{margin-top:18px;gap:12px}
.proof-card .callouts li{font-size:1rem;border-radius:10px;padding:6px 8px;margin:0 -8px;cursor:default;transition:background-color .3s ease}
.fraud-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:16px;align-items:start}
.fraud-pair .mail-card{padding:16px 16px}
.fraud-pair .mail-body{font-size:.9375rem}
.fraud-pair .mail-note{font-size:.875rem}
.mail-addr,.mail-bank{border-radius:4px;transition:background-color .4s ease,box-shadow .4s ease}
/* highlight boxes drawn over the screenshot regions */
.hl{position:absolute;border-radius:8px;border:2px solid var(--orange);background:rgba(252,129,2,.08);box-shadow:0 0 0 4px rgba(252,129,2,.14);pointer-events:none;opacity:0;transition:opacity .45s ease,transform .45s ease}
.proof-card[data-focus="1"] .hl[data-n="1"],.proof-card[data-focus="2"] .hl[data-n="2"],.proof-card[data-focus="3"] .hl[data-n="3"],.proof-card[data-focus="4"] .hl[data-n="4"]{opacity:1}
.proof-card[data-focus="1"] .callouts li[data-n="1"],.proof-card[data-focus="2"] .callouts li[data-n="2"],.proof-card[data-focus="3"] .callouts li[data-n="3"],.proof-card[data-focus="4"] .callouts li[data-n="4"]{background:#FFF4E8}
.proof-card[data-focus="1"] .mail-addr,.proof-card[data-focus="2"] .mail-bank{background:#FFE3C4;box-shadow:0 0 0 3px #FFE3C4}
.proof-card[data-focus] .mk{transition:opacity .3s ease}
.proof-card[data-focus="1"] .mk:not([data-n="1"]),.proof-card[data-focus="2"] .mk:not([data-n="2"]),.proof-card[data-focus="3"] .mk:not([data-n="3"]),.proof-card[data-focus="4"] .mk:not([data-n="4"]){opacity:.45}
@media (max-width:1000px){.proof-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.fraud-pair{grid-template-columns:minmax(0,1fr)}.fraud-pair .shot-img-b{max-width:360px}}

/* How a pilot works */
.pilot{background:var(--white);padding:clamp(56px,7vw,96px) 0}
.pilot .steps{margin-top:40px}
.pilot .step h3{font-size:1.1875rem}
.pilot .step p{font-size:.9375rem;line-height:1.55}
@media (max-width:1024px){.pilot .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}.pilot .steps::before{display:none}}
@media (max-width:640px){.pilot .steps{grid-template-columns:1fr;row-gap:0}.pilot .step:not(:last-child)::after{content:"";position:absolute;left:15px;top:36px;bottom:4px;width:1.5px;background:rgba(252,129,2,.4)}}

/* Demo request form (site.js builds it; every "Arrange a demo" link opens it) */
.demo-dlg{width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;border:0;border-radius:18px;padding:0;background:var(--white);color:var(--ink-body);box-shadow:0 40px 90px -20px rgba(1,23,46,.55)}
.demo-dlg::backdrop{background:rgba(1,23,46,.74)}
/* While the form is open the page behind it stands still (no blur, no running animations), so typing stays responsive */
html.demo-open main *{animation-play-state:paused!important}
.demo-form,.demo-done{position:relative;padding:clamp(22px,4vw,32px)}
.demo-dlg h2{font-size:1.5rem;font-weight:800;color:var(--ink)}
.demo-sub{margin-top:6px;font-size:.9375rem;color:var(--slate)}
.demo-x{position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;border-radius:10px;background:transparent;font-size:1.75rem;line-height:1;color:var(--slate);cursor:pointer}
.demo-x:hover{background:var(--mist);color:var(--ink)}
.demo-fields{margin-top:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
.demo-form label{display:block;font:600 .875rem var(--body);color:var(--ink)}
.demo-form .opt{font-weight:400;color:var(--slate)}
.demo-form input:not([type=checkbox]),.demo-form textarea{display:block;width:100%;margin-top:5px;font:400 1rem var(--body);color:var(--ink);background:var(--white);border:1px solid #C9D3DF;border-radius:10px;padding:11px 12px;min-height:46px}
.demo-form input:focus-visible,.demo-form textarea:focus-visible{outline:3px solid var(--orange);outline-offset:1px;border-color:var(--orange)}
.demo-areas{margin-top:16px;border:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.demo-areas legend{font:600 .875rem var(--body);color:var(--ink);margin-bottom:8px;padding:0}
.demo-areas .chk{display:inline-flex;align-items:center;gap:8px;font:500 .875rem var(--body);border:1px solid #C9D3DF;border-radius:999px;padding:8px 12px;min-height:40px;cursor:pointer}
.demo-areas .chk:has(input:checked){border-color:var(--orange);background:#FFF4E8}
.demo-areas input{accent-color:var(--orange)}
.demo-msg{margin-top:14px}
.demo-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.demo-note{margin-top:12px;font-size:.8125rem;color:var(--slate)}
.demo-err{margin-top:10px;padding:10px 12px;border-radius:10px;background:#FDECEC;color:#8E1F1F;font-size:.9375rem}
.demo-err a{color:inherit;font-weight:600}
.demo-actions{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.demo-alt{font-size:.875rem;color:var(--navy)}
.demo-done p{margin-top:10px}
.demo-done .btn{margin-top:20px}
@media (max-width:520px){.demo-fields{grid-template-columns:minmax(0,1fr)}.demo-actions .btn{width:100%}}

/* Phones: "Arrange a demo" bar once the hero's button has scrolled away (site.js) */
.m-demo{display:none}
@media (max-width:640px){
  .m-demo:not([hidden]){display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(1,23,46,.96);border-top:1px solid var(--line-dark);animation:mdemo-in .3s ease both}
  .m-demo .btn{width:100%}
  body.has-m-demo .site-footer{padding-bottom:80px}
}
@keyframes mdemo-in{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.m-demo{animation:none!important}}

/* Privacy Notice (privacy.html, 12 Nov 2026): dark title band, then a readable single column */
.legal-hero{background:var(--midnight);color:#fff;padding:clamp(48px,7vw,88px) 0 clamp(36px,5vw,56px)}
.legal-kicker{margin:0 0 10px;font-size:.8125rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange)}
.legal-hero h1{color:#fff;font-size:clamp(2rem,4.5vw,3rem)}
.legal-updated{margin:12px 0 0;color:rgba(255,255,255,.7);font-size:.9375rem}
.legal{padding:clamp(40px,6vw,72px) 0 clamp(56px,8vw,96px)}
.legal-body{max-width:760px}
.legal-body h2{font-size:1.375rem;margin:2.2em 0 .6em}
.legal-body h3{font-size:1.0625rem;margin:1.4em 0 .3em}
.legal-body p,.legal-body li{max-width:68ch}
.legal-body ul{padding-left:1.2em;list-style:disc}
.legal-body li::marker{color:var(--orange)}
.legal-body li{margin:.35em 0}
.legal-body a{color:var(--blue)}

/* Four areas, one layer (14 Nov 2026): the former hero visual, on the Overview between What it does and Two things it
   caught (a compact dark band between two light sections), and in the Capabilities hero. Reuses the .hero-visual / .chip / .wire / .flow / .core styles above; .hero-mobile below 680px. */
.areas-band{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--midnight) 0%,#03203F 100%);color:var(--text-dark-2);padding:clamp(44px,5vw,72px) 0}
.areas-band::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 70% at 72% 50%,rgba(5,50,96,.7),transparent 70%);pointer-events:none}
.areas-band-inner{position:relative;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.areas-band .kicker{color:var(--orange)}
.areas-band h2{color:var(--white);font-size:clamp(1.75rem,3vw,2.5rem);font-weight:800;line-height:1.12;letter-spacing:-.025em}
.areas-band-copy > p:not(.kicker){margin-top:18px;font-size:clamp(1.0625rem,1.4vw,1.1875rem);max-width:30em}
.areas-band-link a{color:var(--white);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(252,129,2,.6);padding-bottom:2px}
.areas-band-link a:hover{border-bottom-color:var(--orange)}
.areas-viz{max-width:480px;width:100%;justify-self:center}
@media (max-width:900px){.areas-band-inner{grid-template-columns:1fr}.areas-viz{max-width:460px}}
/* Overview: the sequence waits until the band is in view (story.js adds .in), then plays as the hero did */
html.story-motion.story-js .areas-band .areas-viz.anim:not(.in) *{animation-play-state:paused}
html.story-motion.story-js .areas-band-copy{transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
html.story-motion.story-js .areas-band-copy:not(.in){opacity:0;transform:translateY(18px)}
/* Capabilities hero (shortened 14 Nov 2026): copy left, a smaller visual right; the section links live in the sticky bar */
.cap-hero.cap-hero{padding:clamp(40px,5vw,64px) 0 clamp(36px,4.5vw,56px)}
.cap-hero .pf-hero-solo.cap-hero-viz{grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:clamp(32px,5vw,72px);align-items:center}
.cap-hero-viz .areas-viz{max-width:380px}
.cap-hero-viz .lead{margin-top:18px}
.cap-hero-viz .pf-ctas.btn-row{margin-top:26px}
@media (max-width:1024px){.cap-hero .pf-hero-solo.cap-hero-viz{grid-template-columns:1fr}.cap-hero-viz .areas-viz{display:none}}
@media (max-width:1024px) and (min-width:681px){.cap-hero-viz .areas-mob{display:block;max-width:560px}}
@media (max-width:480px){.areas-mob .m-sources{grid-template-columns:repeat(2,minmax(0,1fr))}}