/* Self-hosted Inter + Manrope (SIL Open Font License), latin and latin-ext.
   Both are VARIABLE fonts: one file per subset covers the whole weight axis,
   so declaring them per weight made the browser fetch the same bytes five
   times over. One declaration each. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}


:root{
  --navy:#15205C;       /* unified brand navy (text, accents) */
  --navy-ink:#10204e;   /* deep ink for headings on light */
  --screen:#0c1556;     /* deep tone — ONLY for device/screen mockups */
  --card:#F4F7FC;       /* light card surface */
  --card2:#EEF3FB;      /* light band surface */
  --card-line:#dde6f3;  /* card border on light */
  --pblue:#1B66C9;     /* platform blue */
  --rblue:#1058C0;     /* route blue */
  --orange:#F88828;    /* signal orange — fills, rules, accents */
  --orange-t:#B34E00;   /* orange as TEXT — WCAG AA on white, grey and cards */
  --orange-d:#e0741a;
  --grey:#F5F7FA;
  --slate:#2D3640;
  --line:#e3e8ef;
  --line-d:#1c2a6b;
  --mist:#636E7E;
  --teal:#0F766E;      /* in-vehicle & devices family — 5.47:1 on white, 4.91:1 on the pale band */
  --teal-bg:#E6F4F1;   /* its tinted icon square */
  --white:#fff;
  --r:14px;
  --maxw:1240px;
  --navh:72px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--slate);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{font-family:'Manrope',sans-serif;color:var(--navy);line-height:1.12;letter-spacing:-.02em;font-weight:800}
a{color:inherit;text-decoration:none}
/* visible keyboard focus for accessibility */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.nav-login:focus-visible,[onclick]:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:6px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 30px}
.lbl{font-family:'Manrope';font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:'Manrope';font-weight:700;font-size:15px;padding:13px 24px;border-radius:10px;border:none;cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s;font-family:inherit}
.btn-orange{background:var(--orange);color:var(--navy);box-shadow:0 8px 22px rgba(248,136,40,.28)}
.btn-orange:hover{background:var(--orange-d);color:var(--navy);transform:translateY(-2px)}
.btn-blue{background:var(--pblue);color:#fff;box-shadow:0 8px 22px rgba(32,112,216,.25)}
.btn-blue:hover{background:var(--rblue);transform:translateY(-2px)}
.btn-out{background:#fff;color:var(--navy);border:1.5px solid var(--line)}
.btn-out:hover{border-color:var(--pblue);color:var(--pblue);transform:translateY(-2px)}
.btn-ghost-d{background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.2)}
.btn-ghost-d:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)}

/* ---------- NAV ---------- */
header.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-in{display:grid;grid-template-columns:auto 1fr auto;align-items:center;height:var(--navh);gap:16px;max-width:1440px}
.brand{display:flex;align-items:center;gap:10px;cursor:pointer;flex:none;z-index:2}
.brand-logo{width:32px;height:34px;flex:none}
.brand-txt{font-family:'Manrope';font-weight:800;font-size:21px;color:var(--navy);letter-spacing:-.03em}
.brand-txt b{color:var(--pblue);font-weight:800}
.nav-menu{display:flex;align-items:center;gap:2px;justify-content:flex-end;min-width:0;flex-wrap:nowrap}
.nav-item{position:relative}
.nav-item>a{display:flex;align-items:center;gap:4px;font-size:13.5px;font-weight:500;color:var(--slate);padding:8px 9px;border-radius:8px;cursor:pointer;transition:.18s;white-space:nowrap}
.nav-item>a:hover{color:var(--pblue);background:var(--grey)}
.nav-item>a.active{color:var(--pblue)}
.nav-item .chev{width:14px;height:14px;transition:.2s}
.nav-item:hover .chev,.nav-item:focus-within .chev,.nav-item.open .chev{transform:rotate(180deg)}
/* RSA/BUG/WEB/NAV/001 — the Platform panel stacked eighteen items in one column,
   1362px tall, and overflowed the viewport at every laptop height including
   1080p. Its five newest pages sat below the fold with no way to scroll to them.
   Groups are columns now, and an item is small enough that the longest column
   fits a 768px screen. */
.mega{position:absolute;top:calc(100% + 8px);left:0;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 60px -20px rgba(8,16,74,.3);padding:14px;min-width:280px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .22s,visibility .22s,transform .22s;display:flex;align-items:flex-start;gap:0;max-width:calc(100vw - 32px);
  /* Never relied on, always present: if a future group makes the tallest column
     taller than the screen, it scrolls instead of disappearing. */
  max-height:calc(100vh - var(--navh) - 24px);overflow-y:auto;overscroll-behavior:contain}
.mega::-webkit-scrollbar{width:6px}
.mega::-webkit-scrollbar-thumb{background:rgba(8,16,74,.2);border-radius:3px}
/* §3.3 — if the panel ever does clip, say so. A hard bottom edge reads as the
   end of the list; a fade reads as more below it. Applied only while the panel
   actually scrolls, so it is invisible in the normal case. */
.mega.mega-clipped{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 40px),transparent)}
/* Opening is the controller's decision now, not the pointer's first pixel. */
.nav-item.mega-open .mega{opacity:1;visibility:visible;transform:translateY(0)}
/* After clicking a menu/submenu item, force its dropdown shut even though the
   pointer is still hovering it; cleared on mouseleave so hover works again. */
.nav-item.navhide .mega{opacity:0!important;visibility:hidden!important;transform:translateY(8px)!important;pointer-events:none!important}
/* ≤64px per item: title 15/1.3, descriptor 13/1.35 on one line. A wrapped
   descriptor was pushing items to 82px and the column past the fold. */
.mega a{display:block;padding:8px 12px;border-radius:9px;font-size:15px;line-height:1.3;color:var(--slate);cursor:pointer;transition:.15s;white-space:nowrap}
.mega a:hover{background:var(--grey);color:var(--pblue)}
.mega a small{display:block;font-size:13px;line-height:1.35;color:var(--mist);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:250px}
/* Part 6 — labelled groups. The wrapper keeps the 2px rhythm the .mega grid
   used to give the links directly. */
.mega .mgroup{display:grid;gap:2px;align-content:start;min-width:0;padding:0 8px}
.mega .mgroup+.mgroup{border-left:1px solid var(--line);margin-left:4px}
/* group label: non-interactive, named to AT via the group's aria-labelledby */
.mega .mgrp{display:block;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--mist);padding:12px 12px 5px;margin:0}
.mega .mgroup .mgrp{padding-top:2px}
.nav-act{display:flex;align-items:center;gap:14px;flex:none}
.m-cta{display:none}
.nav-login{font-size:14px;font-weight:600;color:var(--navy);cursor:pointer;padding:8px 4px;border-bottom:2px solid transparent;transition:.18s}
.nav-login:hover{border-color:var(--orange-t)}
.burger{display:none;background:none;border:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px}
.burger span{width:24px;height:2px;background:var(--navy);display:block;transition:.3s}

/* ---------- PAGE SYSTEM ---------- */
.page{display:none;animation:fade .4s ease}
.page.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
section{padding:80px 0}
.sec-head{max-width:720px;margin:0 auto 50px;text-align:center}
.sec-head.left{margin:0 0 44px;text-align:left}
.sec-eye{color:var(--pblue);margin-bottom:14px;display:block}
.sec-head h2{font-size:clamp(28px,3.6vw,40px)}
.sec-head p{color:#49525f;font-size:17px;margin-top:15px}

/* ---------- HERO ---------- */
.hero{background:linear-gradient(160deg,#F4F7FC 0%,#EEF3FB 55%,#E7EEF9 100%);color:var(--navy);position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(32,112,216,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(32,112,216,.06) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 70% 80% at 75% 35%,#000 20%,transparent 72%)}
.hero-in{position:relative;display:grid;grid-template-columns:1.02fr 1.1fr;gap:46px;align-items:center;padding:74px 0 84px}
.hero-eye{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--pblue);background:rgba(32,112,216,.1);border:1px solid rgba(32,112,216,.28);padding:6px 13px;border-radius:30px;margin-bottom:22px}
.dotlive{width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 0 rgba(248,136,40,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(248,136,40,.5)}70%{box-shadow:0 0 0 8px rgba(248,136,40,0)}100%{box-shadow:0 0 0 0 rgba(248,136,40,0)}}
.hero h1{color:var(--navy);font-size:clamp(34px,4.6vw,54px);font-weight:800}
.hero h1 .o{color:var(--orange-t)}
.hero h1 .b{color:var(--pblue)}
.hero .lead{font-size:18px;color:#3a4668;margin:22px 0 16px;max-width:520px}
.hero .sub{font-size:14.5px;color:#5a6688;max-width:500px;margin-bottom:30px}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap}
.hero-trust{margin-top:42px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.hero-trust .t{font-size:12px;color:#7a86a6;letter-spacing:.04em}
.hero-trust .p{font-family:'Manrope';font-weight:700;color:var(--navy);font-size:15px;opacity:.7}

/* hero visual: live network */
.netviz{background:#1a2566;border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:16px;box-shadow:0 36px 80px -28px rgba(0,0,0,.5);position:relative}
.netviz-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding:0 4px}
.netviz-bar .t{font-size:13px;color:#cdd8f3;font-weight:600;font-family:'Manrope'}
.netviz-tags{display:flex;gap:8px;font-size:10px}
.ntag{padding:3px 9px;border-radius:20px;font-weight:600;letter-spacing:.02em}
.ntag.trunk{color:#9fc0f5;background:rgba(32,112,216,.2)}
.ntag.feed{color:#7df2c0;background:rgba(15,184,122,.16)}
.ntag.heat{color:#ffc98a;background:rgba(248,136,40,.18)}
.netmap{background:#141d52;border-radius:13px;height:300px;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.06)}
.netmap svg{position:absolute;inset:0;width:100%;height:100%}
.veh{position:absolute;width:10px;height:10px;border-radius:50%;z-index:3}
.veh.t{background:var(--pblue);box-shadow:0 0 12px var(--pblue)}
.veh.f{background:#0fb87a;box-shadow:0 0 12px #0fb87a}
.netmap .kpi{position:absolute;background:rgba(255,255,255,.07);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:9px 12px;z-index:4}
.netmap .kpi .v{font-family:'Manrope';font-weight:800;color:#fff;font-size:18px}
.netmap .kpi .l{font-size:10px;color:#9fb0d8;margin-top:1px;letter-spacing:.03em}

/* ---------- TRUST STRIP ---------- */
.strip{background:var(--grey);border-bottom:1px solid var(--line);padding:26px 0}
.strip-in{display:flex;align-items:center;justify-content:center;gap:30px;flex-wrap:wrap}
.strip .t{font-size:12.5px;color:var(--mist);font-weight:500}
.strip .p{font-family:'Manrope';font-weight:700;color:var(--slate);opacity:.6;font-size:15px}

/* ---------- PROBLEM ---------- */
.problem{background:#EEF3FB;color:var(--navy);text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.problem h2{color:var(--navy);font-size:clamp(26px,3.4vw,38px);max-width:900px;margin:0 auto}
.problem h2 .o{color:var(--orange-t)}
.problem p{color:#3a4a6b;font-size:17px;max-width:620px;margin:18px auto 0}

/* ---------- LIFECYCLE STRIP ---------- */
.life{display:grid;grid-template-columns:repeat(7,1fr);gap:0;position:relative;margin-top:10px}
.life-step{text-align:center;position:relative;padding:0 6px}
.life-step .ic{width:58px;height:58px;border-radius:16px;background:var(--grey);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;position:relative;z-index:2;transition:.25s}
.life-step:hover .ic{background:var(--pblue);border-color:var(--pblue);transform:translateY(-4px)}
.life-step:hover .ic svg{stroke:#fff}
.life-step .ic svg{stroke:var(--pblue);transition:.25s}
.life-step .n{font-family:'Manrope';font-size:11px;font-weight:700;color:var(--orange-t);letter-spacing:.06em}
.life-step h4{font-size:14.5px;margin-top:3px}
.life-line{position:absolute;top:29px;left:7%;right:7%;height:2px;background:linear-gradient(90deg,var(--pblue),var(--orange));opacity:.3;z-index:1}

/* ---------- TWO MODE ---------- */
.modes{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.mode{border-radius:20px;padding:38px;position:relative;overflow:hidden;color:#fff;min-height:280px;display:flex;flex-direction:column;justify-content:flex-end;transition:.25s;cursor:pointer}
.mode:hover{transform:translateY(-5px);box-shadow:0 28px 60px -24px rgba(8,16,74,.4)}
.mode.pt{background:var(--card);border:1px solid var(--card-line);border-left:4px solid var(--pblue);color:var(--navy-ink)}
.mode.et{background:linear-gradient(150deg,#2383F1,#1058C0)}
.mode.pt::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(32,112,216,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(32,112,216,.05) 1px,transparent 1px);background-size:34px 34px;mask-image:radial-gradient(ellipse 80% 70% at 80% 20%,#000,transparent 70%)}
.mode.et::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:34px 34px;mask-image:radial-gradient(ellipse 80% 70% at 80% 20%,#000,transparent 70%)}
.mode .tag{position:relative;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.85;margin-bottom:8px}
.mode.pt .tag{color:var(--pblue);opacity:1}
.mode h3{position:relative;color:#fff;font-size:26px}
.mode.pt h3{color:var(--navy-ink)}
.mode p{position:relative;font-size:15px;opacity:.92;margin:12px 0 18px;max-width:90%}
.mode.pt p{color:#566184;opacity:1}
.mode .go{position:relative;font-family:'Manrope';font-weight:700;font-size:14.5px;display:inline-flex;align-items:center;gap:7px}
.mode.pt .go{color:var(--pblue)}
.modes-more{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:18px}
.modes-more>*{grid-column:span 2}
/* a row that would end two-of-three wide is centred instead of left-hung */
.modes-more>:nth-last-child(2):nth-child(3n+1){grid-column:2/span 2}
.mode-mini{background:var(--card);border:1px solid var(--card-line);border-left:4px solid var(--pblue);border-radius:16px;padding:24px;color:var(--navy-ink);cursor:pointer;transition:.22s;display:flex;flex-direction:column;position:relative;overflow:hidden}
.mode-mini::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(32,112,216,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(32,112,216,.045) 1px,transparent 1px);background-size:30px 30px;mask-image:radial-gradient(ellipse 80% 70% at 85% 15%,#000,transparent 70%)}
.mode-mini:hover{transform:translateY(-4px);box-shadow:0 22px 50px -28px rgba(8,16,74,.28)}
.mode-mini>*{position:relative}
.mode-mini .mtag{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--pblue);margin-bottom:8px}
.mode-mini h4{color:var(--navy-ink);font-size:18px;margin-bottom:6px}
.mode-mini p{font-size:13.5px;color:#566184;flex:1;margin-bottom:14px;line-height:1.5}
.mode-mini .go{font-family:'Manrope';font-weight:700;font-size:13.5px;color:var(--pblue);display:inline-flex;align-items:center;gap:6px}
@media(max-width:820px){.modes-more{grid-template-columns:1fr}
  .modes-more>*,.modes-more>:nth-last-child(2):nth-child(3n+1){grid-column:auto}}

/* ---------- CAPABILITY GRID ---------- */
.caps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cap{background:#fff;border:1px solid var(--line);border-radius:13px;padding:22px;transition:.22s}
.cap:hover{border-color:var(--pblue);box-shadow:0 16px 36px -20px rgba(8,16,74,.25);transform:translateY(-3px)}
a.cap{display:block;color:inherit;text-decoration:none;cursor:pointer}
a.cap:hover h3{color:var(--pblue)}
a.cap:focus-visible{outline:2px solid var(--pblue);outline-offset:3px}
.cap .ic{width:40px;height:40px;border-radius:10px;background:var(--grey);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.cap h4{font-size:15.5px;margin-bottom:5px}
.cap p{font-size:13px;color:var(--mist);line-height:1.5}

/* ---------- DASHBOARD MOCKUP ---------- */
.dashwrap{background:var(--navy);border-radius:20px;padding:8px;box-shadow:0 40px 90px -30px rgba(8,16,74,.5)}
.dashbar{display:flex;align-items:center;gap:8px;padding:10px 14px}
.dashbar .dot{width:11px;height:11px;border-radius:50%}
.dashbar .title{margin-left:10px;font-size:12.5px;color:#9fb0d8;font-family:'Manrope';font-weight:600}
.dashbar .live{margin-left:auto;font-size:10.5px;color:#7df2c0;background:rgba(15,184,122,.14);padding:3px 10px;border-radius:14px;font-weight:600}
.dashscreen{background:var(--screen);border-radius:14px;padding:18px}
.kpistrip{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:14px}
.kpibox{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:11px;padding:13px}
.kpibox .v{font-family:'Manrope';font-weight:800;font-size:21px;color:#fff}
.kpibox .l{font-size:10px;color:#90a2cc;margin-top:3px;text-transform:uppercase;letter-spacing:.04em}
.kpibox.good{border-left:3px solid #0fb87a}
.kpibox.warn{border-left:3px solid var(--orange)}
.kpibox.bad{border-left:3px solid #f0506e}
.dashrow{display:grid;grid-template-columns:1.4fr 1fr;gap:14px}
.dashpanel{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:16px}
.dashpanel .ph{font-size:12px;color:#cdd8f3;font-weight:600;font-family:'Manrope';margin-bottom:13px;display:flex;justify-content:space-between}
.bars{display:flex;align-items:flex-end;gap:9px;height:110px}
.bar{flex:1;border-radius:5px 5px 0 0;background:linear-gradient(180deg,#2070D8,#1058C0);position:relative}
.bar.o{background:linear-gradient(180deg,#F88828,#e0741a)}
.kpibox .v{transition:color .45s ease}
.kpibox{transition:border-color .5s ease}
.dashscreen .bar{transition:height 1.1s cubic-bezier(.45,.05,.3,1)}
.dashscreen .live{animation:rsLivePulse 2.6s ease-in-out infinite}
@keyframes rsLivePulse{0%,100%{opacity:1}50%{opacity:.5}}
.kpibox .v{will-change:contents}
.bar .bl{position:absolute;bottom:-18px;left:0;right:0;text-align:center;font-size:9px;color:#7e90bc}
.exlist{display:grid;gap:9px}
.exrow{display:flex;align-items:center;gap:9px;font-size:11.5px;color:#c4d2f0}
.exrow .pill{width:8px;height:8px;border-radius:50%;flex:none}

/* ---------- STATUS BOARD ---------- */
.visboard{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.viscard{background:#fff;border:1px solid var(--line);border-radius:13px;padding:18px;border-top:4px solid var(--pblue)}
.viscard.green{border-top-color:#0fb87a}
.viscard.amber{border-top-color:var(--orange-t)}
.viscard.red{border-top-color:#f0506e}
.viscard .h{font-size:13px;font-weight:700;font-family:'Manrope';color:var(--navy);display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.viscard .st{font-size:10px;font-weight:700;padding:2px 8px;border-radius:12px}
.st-g{color:#007F4F;background:#e3fbf1}.st-a{color:#AC5800;background:#fef0df}.st-r{color:#c4304a;background:#fde4e9}
.viscard .m{display:flex;justify-content:space-between;font-size:12px;color:var(--slate);padding:5px 0;border-top:1px solid var(--grey)}
.viscard .m b{font-family:'Manrope';color:var(--navy)}

/* ---------- USE CASE / PACKAGE / etc cards ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.uc{background:#fff;border:1px solid var(--line);border-radius:15px;padding:26px;transition:.22s}
.uc:hover{transform:translateY(-4px);box-shadow:0 20px 44px -22px rgba(8,16,74,.25)}
.uc .ic{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,#eaf2fe,#fdeede);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
a.uc{display:block;color:inherit;text-decoration:none;cursor:pointer}
a.uc:hover h3{color:var(--pblue)}
a.uc:focus-visible{outline:2px solid var(--pblue);outline-offset:3px}
.uc h3{font-size:18px;margin-bottom:8px}
.uc p{font-size:14px;color:#49525f}
.uc .tag{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--pblue);margin-bottom:9px;display:block}

/* package */
.pkg{background:#fff;border:1px solid var(--line);border-radius:17px;padding:30px;display:flex;flex-direction:column;transition:.25s;position:relative}
.pkg:hover{transform:translateY(-5px);box-shadow:0 24px 50px -24px rgba(8,16,74,.3)}
.pkg.feat{border:2px solid var(--orange);box-shadow:0 18px 44px -22px rgba(248,136,40,.35)}
.pkg .badge{position:absolute;top:-12px;left:30px;background:var(--orange);color:var(--navy);font-size:11px;font-weight:700;padding:4px 13px;border-radius:20px;font-family:'Manrope'}
.pkg .pname{font-size:20px;margin-bottom:4px}
.pkg .pline{font-size:14px;color:var(--pblue);font-weight:600;margin-bottom:18px}
.pkg ul{list-style:none;display:grid;gap:10px;margin-bottom:22px;flex:1}
.pkg li{font-size:13.5px;color:var(--slate);display:flex;gap:9px;align-items:flex-start}
.pkg li svg{flex:none;margin-top:3px}
.pkg .pfit{font-size:12.5px;color:var(--mist);background:var(--grey);padding:11px 13px;border-radius:10px;margin-bottom:18px}
.pkg .pfit b{color:var(--navy);font-family:'Manrope'}

/* ---------- INNER HERO ---------- */
.phero{background:#EEF3FB;color:var(--navy);padding:64px 0 58px;position:relative;overflow:hidden;border-bottom:3px solid var(--pblue)}
.phero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(32,112,216,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(32,112,216,.06) 1px,transparent 1px);background-size:46px 46px;mask-image:radial-gradient(ellipse 60% 100% at 88% 0%,#000,transparent 66%)}
.phero .hero-eye{position:relative;color:var(--pblue);background:rgba(32,112,216,.10);border:1px solid rgba(32,112,216,.30)}
.phero h1,.phero h2{color:var(--navy);font-size:clamp(30px,4.2vw,46px);max-width:780px;position:relative}
.phero p{font-size:18px;color:#3a4a6b;max-width:620px;margin-top:16px;position:relative}
.crumb{position:relative;font-size:13px;color:#5f6f93;margin-bottom:18px;font-weight:500}
.crumb span{color:var(--pblue)}

/* pain / response two-col */
.pr-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.pr-col{padding:34px}
.pr-col.pain{background:var(--grey);border-right:1px solid var(--line)}
.pr-col h3{font-size:18px;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.pr-col ul{list-style:none;display:grid;gap:13px}
.pr-col li{font-size:14px;display:flex;gap:11px;align-items:flex-start}
.pr-col li svg{flex:none;margin-top:3px}

/* KPI chips */
.kpichips{display:flex;flex-wrap:wrap;gap:10px}
.kchip{background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 15px;font-size:13px;font-weight:600;color:var(--navy);font-family:'Manrope'}

/* steps numbered (DRT) */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.fstep{background:#fff;border:1px solid var(--line);border-radius:13px;padding:22px;position:relative}
.fstep .fn{font-family:'Manrope';font-weight:800;font-size:30px;color:#7D8B9F;position:absolute;top:14px;right:18px}
.fstep h3{font-size:15px;margin:0 0 6px;position:relative}
.fstep p{font-size:13px;color:var(--mist)}

/* integrations */
.intg{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.intg .i{background:var(--grey);border:1px solid var(--line);border-radius:12px;padding:18px 20px;display:flex;align-items:center;gap:13px}
.intg .i .d{width:38px;height:38px;border-radius:9px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex:none}
.intg .i b{font-family:'Manrope';color:var(--navy);font-size:14.5px;display:block}
.intg .i small{font-size:12px;color:var(--mist)}

/* CABO */
.cabo{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cabocard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;border-top:4px solid var(--pblue)}
.cabocard .ltr{font-family:'Manrope';font-weight:800;font-size:34px;color:var(--pblue);line-height:1}
.cabocard h3{font-size:16px;margin:8px 0 8px}
.cabocard p{font-size:13px;color:var(--mist)}

/* hardware partner */
.hwband{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.hwcard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:34px;position:relative;overflow:hidden}
.hwcard .pp{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-t);margin-bottom:10px}
.hwcard .pn{font-family:'Manrope';font-weight:800;font-size:28px;color:var(--navy);margin-bottom:4px}
.hwcard .pc{font-size:14px;color:var(--mist);margin-bottom:18px}
.hwcard p{font-size:14.5px;color:var(--slate);opacity:.88;margin-bottom:20px}
.hwcard .pl{display:inline-flex;align-items:center;gap:7px;font-family:'Manrope';font-weight:700;font-size:14.5px;color:var(--pblue);cursor:pointer}
.hwcard .pl:hover{color:var(--rblue)}
.hwagn{display:grid;gap:14px}
.hwagn .row{display:flex;gap:14px;align-items:flex-start;background:var(--grey);border:1px solid var(--line);border-radius:13px;padding:18px}
.hwagn .row .ic{width:42px;height:42px;border-radius:11px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex:none;font-size:20px}
.hwagn .row b{font-family:'Manrope';color:var(--navy);font-size:15.5px;display:block;margin-bottom:3px}
.hwagn .row p{font-size:13.5px;color:var(--mist);margin:0}
@media(max-width:900px){.hwband{grid-template-columns:1fr}}

/* global delivery */
.globe{background:var(--card2);border:1px solid var(--card-line);border-top:4px solid var(--pblue);border-radius:22px;padding:44px;color:var(--navy-ink);position:relative;overflow:hidden}
.globe::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(32,112,216,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(32,112,216,.05) 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(ellipse 70% 90% at 85% 15%,#000,transparent 72%)}
.globe-top{position:relative;max-width:680px;margin-bottom:32px}
.globe .geye{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--pblue);background:rgba(32,112,216,.1);border:1px solid rgba(32,112,216,.28);padding:5px 12px;border-radius:20px;margin-bottom:16px}
.globe h2{color:var(--navy-ink);font-size:clamp(24px,3vw,32px);margin-bottom:14px}
.globe .glead{color:#566184;font-size:16px}
.regions{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.region{background:#fff;border:1px solid var(--card-line);border-radius:12px;padding:16px 18px;display:flex;align-items:center;gap:11px;transition:.2s}
.region:hover{background:#fff;transform:translateY(-3px);box-shadow:0 12px 28px -16px rgba(8,16,74,.2)}
.region .fl{font-size:22px;line-height:1;flex:none}
.region b{font-family:'Manrope';font-weight:600;font-size:14.5px;color:var(--navy-ink);display:block}
.region small{font-size:11.5px;color:var(--mist)}
@media(max-width:900px){.regions{grid-template-columns:repeat(2,1fr)}.globe{padding:30px 24px}}
@media(max-width:520px){.regions{grid-template-columns:1fr}}

/* first/last mile (FMLM) */
.fmlm-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fmcard{background:#fff;border:1px solid var(--line);border-radius:15px;padding:26px;transition:.22s}
.fmcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px -20px rgba(8,16,74,.22)}
.fmcard .fmi{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,#eef2fe,#e7fbf2);display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--pblue)}
.fmcard h4{font-size:17px;margin-bottom:8px}
.fmcard p{font-size:13.5px;color:var(--mist);line-height:1.55;margin-bottom:14px}
.fmcard ul{list-style:none;display:grid;gap:8px}
.fmcard li{font-size:13px;color:var(--slate);display:flex;gap:9px;align-items:flex-start}
.fmcard li svg{flex:none;margin-top:3px}
.routebar{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.routetype{border-radius:13px;padding:20px;color:#fff;position:relative;overflow:hidden}
.routetype.covered{background:linear-gradient(135deg,#0fb87a,#007F4F)}
.routetype.uncovered{background:linear-gradient(135deg,#F88828,#c9610f)}
.routetype.balanced{background:linear-gradient(135deg,#2070D8,#1058C0)}
.routetype b{font-family:'Manrope';font-size:15px;display:block;margin-bottom:5px}
.routetype p{font-size:12.5px;opacity:.92;line-height:1.5}
@media(max-width:900px){.fmlm-cards,.routebar{grid-template-columns:1fr}}

/* UMTA / unified multimodal */
.umta{background:var(--card2);border:1px solid var(--card-line);border-top:4px solid var(--orange);border-radius:22px;padding:44px;color:var(--navy-ink);position:relative;overflow:hidden}
.umta::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(32,112,216,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(32,112,216,.05) 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(ellipse 70% 90% at 85% 10%,#000,transparent 70%)}
.umta-top{position:relative;max-width:760px;margin-bottom:34px}
.umta .ueye{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-d);background:rgba(248,136,40,.12);border:1px solid rgba(248,136,40,.3);padding:5px 12px;border-radius:20px;margin-bottom:16px}
.umta h2{color:var(--navy-ink);font-size:clamp(24px,3vw,32px);margin-bottom:14px}
.umta .ulead{color:#566184;font-size:16px}
.syncrow{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:26px}
.syncpair{background:#fff;border:1px solid var(--card-line);border-radius:14px;padding:20px}
.syncpair .sp{display:flex;align-items:center;gap:10px;font-family:'Manrope';font-weight:700;font-size:15px;color:var(--navy-ink);margin-bottom:8px;flex-wrap:wrap}
.syncpair .sp .ar{color:var(--orange-t);flex:none}
.syncpair p{font-size:13px;color:#566184;line-height:1.5}
.umta-feat{position:relative;display:flex;flex-wrap:wrap;gap:10px}
.umta-feat span{font-size:13px;color:var(--slate);background:#fff;border:1px solid var(--card-line);padding:7px 13px;border-radius:9px;display:inline-flex;align-items:center;gap:7px}
.umta-feat span svg{flex:none}
@media(max-width:780px){.umta{padding:30px 24px}.syncrow{grid-template-columns:1fr}}

/* patent banner */
.patent{display:flex;gap:24px;align-items:center;background:var(--card2);border:1px solid var(--card-line);border-left:4px solid var(--orange);border-radius:20px;padding:34px 38px;color:var(--navy-ink);position:relative;overflow:hidden;margin-top:8px}
.patent::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(32,112,216,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(32,112,216,.05) 1px,transparent 1px);background-size:38px 38px;mask-image:radial-gradient(ellipse 70% 90% at 90% 10%,#000,transparent 70%)}
.patent .seal{width:88px;height:88px;border-radius:50%;background:rgba(248,136,40,.12);border:2px solid var(--orange);display:flex;align-items:center;justify-content:center;flex:none;position:relative}
.patent .seal svg{stroke:var(--orange)}
.patent .pc{position:relative;flex:1}
.patent .ptag{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-d);margin-bottom:7px}
.patent h3{color:var(--navy-ink);font-size:21px;margin-bottom:7px;line-height:1.2}
.patent p{color:#566184;font-size:14.5px;max-width:640px}
.patent .pyear{position:relative;flex:none;text-align:center;padding-left:24px;border-left:1px solid var(--card-line)}
.patent .pyear .y{font-family:'Manrope';font-weight:800;font-size:32px;color:var(--navy-ink);line-height:1}
.patent .pyear .yl{font-size:12px;color:var(--mist);margin-top:4px}
@media(max-width:780px){.patent{flex-direction:column;text-align:center;padding:30px 24px}.patent .pyear{border-left:none;border-top:1px solid var(--card-line);padding-left:0;padding-top:16px;margin-top:4px}}

/* featured capabilities */
.featcap{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.featcap>*{grid-column:span 2}
/* a row that would end two-of-three wide is centred, not left-hung */
.featcap>:nth-last-child(2):nth-child(3n+1){grid-column:2/span 2}
.fc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;transition:.22s;position:relative;overflow:hidden}
.fc:hover{transform:translateY(-4px);box-shadow:0 18px 40px -20px rgba(8,16,74,.22)}
.fc.ev{border-top:4px solid #0fb87a}
.fc.demand{border-top:4px solid var(--pblue)}
.fc .fci{width:46px;height:46px;border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:15px}
.fc.ev .fci{background:#e3fbf1;color:#007F4F}
.fc.demand .fci{background:#eef2fe;color:var(--pblue)}
.fc .ftag{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:8px;display:inline-block}
.fc.ev .ftag{color:#007F4F}
.fc.demand .ftag{color:var(--pblue)}
a.fc{display:block;color:inherit;text-decoration:none;cursor:pointer}
a.fc:hover h3{color:var(--teal)}
a.fc:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.fc.iv{border-top:4px solid var(--teal)}
.fc.iv .fci{background:var(--teal-bg);color:var(--teal)}
.fc.iv .ftag{color:var(--teal)}
.fc h4{font-size:16.5px;margin-bottom:7px}
.fc p{font-size:13.5px;color:var(--mist);line-height:1.5}
@media(max-width:980px){.featcap{grid-template-columns:repeat(4,1fr)}
  .featcap>:nth-last-child(2):nth-child(3n+1){grid-column:auto}}
@media(max-width:680px){.featcap{grid-template-columns:1fr}
  .featcap>*{grid-column:auto}}

/* FAQ */
.faq{max-width:820px;margin:0 auto}
.faqitem{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden}
.faqitem summary{padding:18px 22px;font-family:'Manrope';font-weight:600;font-size:15.5px;color:var(--navy);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faqitem summary::-webkit-details-marker{display:none}
.faqitem summary::after{content:"+";font-size:22px;color:var(--pblue);font-weight:400;flex:none;transition:.2s}
.faqitem[open] summary::after{transform:rotate(45deg)}
.faqitem .fa{padding:0 22px 20px;font-size:14.5px;color:var(--slate);opacity:.9;line-height:1.6}

/* homepage stats band */
.statsband{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;text-align:center}
.statsband .s .n{font-family:'Manrope';font-weight:800;font-size:clamp(28px,3.4vw,42px);background:linear-gradient(120deg,#2070D8,#08104A);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.statsband .s .n .pl{color:var(--orange-t);-webkit-text-fill-color:var(--orange-t)}
.statsband .s .l{font-size:13px;color:var(--mist);margin-top:8px;font-weight:500}
@media(max-width:780px){.statsband{grid-template-columns:repeat(2,1fr);gap:28px}}

/* delivery surfaces + infrastructure */
.surfgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.surf{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;transition:.22s}
.surf:hover{transform:translateY(-4px);box-shadow:0 18px 40px -20px rgba(8,16,74,.2);border-color:var(--pblue)}
.surf .si{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,#eef2fe,#fdeede);display:flex;align-items:center;justify-content:center;margin-bottom:15px;color:var(--pblue)}
.surf h4{font-size:16.5px;margin-bottom:6px}
.surf p{font-size:13.5px;color:var(--mist);line-height:1.5}
.surf .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px}
.surf .chips span{font-size:11.5px;font-weight:500;color:var(--ink-soft);background:var(--grey);border:1px solid var(--line);padding:4px 9px;border-radius:7px}
.infra{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.infracard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;border-top:4px solid var(--pblue)}
.infracard.o{border-top-color:var(--orange-t)}
.infracard.g{border-top-color:#0fb87a}
.infracard .ih{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.infracard .ic2{width:40px;height:40px;border-radius:10px;background:var(--grey);display:flex;align-items:center;justify-content:center;flex:none}
.infracard h4{font-size:16px}
.infracard p{font-size:13.5px;color:var(--mist);line-height:1.55}
@media(max-width:980px){.surfgrid,.infra{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.surfgrid,.infra{grid-template-columns:1fr}}

/* transport modes */
.modegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.modecard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;transition:.22s;position:relative}
.modecard:hover{transform:translateY(-4px);box-shadow:0 18px 40px -20px rgba(8,16,74,.22);border-color:var(--pblue)}
.modecard .mic{width:46px;height:46px;border-radius:11px;background:#eef2fe;display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--pblue)}
.modecard h4{font-size:16.5px;margin-bottom:7px}
.modecard p{font-size:13.5px;color:var(--mist);line-height:1.5;margin-bottom:14px;min-height:40px}
.modecard .tools{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;font-family:'Manrope';color:var(--navy);background:var(--grey);border:1px solid var(--line);padding:5px 11px;border-radius:20px}
.modecard .tools b{color:var(--pblue)}
@media(max-width:980px){.modegrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.modegrid{grid-template-columns:1fr}}

/* team page */
.teamgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.teamgrid.three{grid-template-columns:repeat(3,1fr)}
.tcard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px;text-align:center;transition:.25s}
.tcard:hover{transform:translateY(-5px);box-shadow:0 24px 50px -24px rgba(8,16,74,.28)}
.tphoto{width:120px;height:120px;border-radius:50%;margin:0 auto 18px;object-fit:cover;display:block;border:4px solid var(--grey);background:linear-gradient(135deg,#2070D8,#08104A);color:#fff;font-family:'Manrope';font-weight:800;font-size:38px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.tphoto.orange{background:linear-gradient(135deg,#F88828,#c9610f)}
.tphoto img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.tcard h3{font-size:20px;margin-bottom:3px}
.tcard .role{font-size:13.5px;font-weight:600;color:var(--pblue);font-family:'Manrope';margin-bottom:4px}
.tcard .loc{font-size:13px;color:var(--mist);margin-bottom:12px;display:inline-flex;align-items:center;gap:5px}
.tcard p{font-size:13.5px;color:#49525f;line-height:1.55}
.tcard .tsoc{margin-top:16px;display:flex;gap:8px;justify-content:center}
.tcard .tpatent{margin-top:14px;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;font-family:'Manrope';color:#AC5800;background:#fef0df;border:1px solid #f7d9b0;padding:5px 11px;border-radius:20px}
.tcard .tsoc a{width:32px;height:32px;border-radius:8px;background:var(--grey);display:flex;align-items:center;justify-content:center;transition:.18s;cursor:pointer}
.tcard .tsoc a:hover{background:var(--pblue)}
.tcard .tsoc a:hover svg{fill:#fff}
.team-add{background:var(--grey);border:2px dashed var(--line);border-radius:18px;padding:30px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:280px;color:var(--mist)}
.team-add .plus{width:54px;height:54px;border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin-bottom:14px;font-size:26px;color:var(--pblue)}
.team-add b{font-family:'Manrope';color:var(--navy);font-size:15px;margin-bottom:4px}
.team-add span{font-size:13px}
@media(max-width:900px){.teamgrid,.teamgrid.three{grid-template-columns:1fr}}
@media(max-width:680px){.teamgrid,.teamgrid.three{grid-template-columns:1fr}}

/* CTA band */
.ctaband{background:#EEF3FB;border:1px solid var(--line);border-top:3px solid var(--pblue);border-radius:22px;padding:54px;text-align:center;color:var(--navy);position:relative;overflow:hidden}
.ctaband::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(32,112,216,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(32,112,216,.06) 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(ellipse 60% 90% at 50% 0%,#000,transparent 70%)}
.ctaband h2{color:var(--navy);font-size:34px;position:relative}
.ctaband p{color:#566184;margin:14px auto 26px;font-size:17px;max-width:560px;position:relative}
.ctaband .btns{position:relative;display:flex;gap:13px;justify-content:center;flex-wrap:wrap}

/* resources / about */
.artcard{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden;transition:.22s;cursor:pointer;display:flex;flex-direction:column}
.artcard:hover{transform:translateY(-4px);box-shadow:0 20px 44px -22px rgba(8,16,74,.25)}
.artcard .top{height:140px;background:linear-gradient(135deg,#dfeafb,#eef3fb);position:relative;overflow:hidden}
.artcard .cat{position:absolute;top:14px;left:14px;font-size:11px;font-weight:700;color:#fff;background:rgba(8,16,74,.62);padding:4px 11px;border-radius:14px;backdrop-filter:blur(4px)}
.artcard .body{padding:20px;flex:1;display:flex;flex-direction:column}
.artcard .body h3{font-size:16.5px;margin-bottom:8px}
.artcard .body p{font-size:13.5px;color:var(--mist);flex:1}
.artcard .date{font-size:12px;color:var(--mist);margin-top:14px}
/* article / blog post */
.postmeta{position:relative;margin-top:18px;font-size:13px;color:#9fb0d8;font-weight:500;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.postmeta .dot{width:4px;height:4px;border-radius:50%;background:#6781b8}
.postwrap .crumb a{cursor:pointer;color:#9fc0f5}
.postwrap .crumb a:hover{color:#fff;text-decoration:underline}
.postbody{max-width:760px;font-size:16.5px;line-height:1.75;color:var(--slate)}
.postbody>p{margin:0 0 20px}
.postbody .lede{font-size:19px;line-height:1.65;color:var(--navy);font-family:'Manrope';font-weight:500;margin-bottom:26px}
.postbody h2{font-size:23px;margin:38px 0 14px}
.postbody h3{font-size:18px;margin:26px 0 10px}
.postbody ul{margin:0 0 20px;padding-left:20px;display:grid;gap:9px}
.postbody li{font-size:16px;line-height:1.6}
.postbody strong{color:var(--navy)}
.postbody blockquote{margin:28px 0;padding:18px 22px;background:var(--grey);border-left:4px solid var(--pblue);border-radius:0 12px 12px 0;font-size:17px;color:var(--navy);font-family:'Manrope';font-weight:500}
.postbody .keytake{margin:34px 0 0;background:var(--grey);border:1px solid var(--line);border-radius:14px;padding:24px}
.postbody .keytake h3{margin:0 0 12px;font-size:12px;color:var(--pblue);text-transform:uppercase;letter-spacing:.08em;font-family:'Manrope';font-weight:700}
.postbody .keytake ul{margin:0;gap:8px}
.postbody .postcta{margin:32px 0 0;background:var(--card2);border:1px solid var(--card-line);border-left:4px solid var(--pblue);border-radius:16px;padding:30px;color:var(--navy-ink)}
.postbody .postcta h2{color:var(--navy-ink);font-size:21px;margin-bottom:9px}
.postbody .postcta p{color:#566184;font-size:15px;margin-bottom:18px}
@media(max-width:780px){.postbody{font-size:16px}.postbody h2{font-size:21px}}

/* forms */
.cgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:46px;align-items:start}
.formtabs{margin-bottom:0}
.ftab{font-size:13px;font-weight:600;font-family:'Manrope';padding:9px 15px;border-radius:9px;border:1px solid var(--line);background:#fff;cursor:pointer;color:var(--slate);transition:.18s}
.ftab.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.field{margin-bottom:16px}
.field.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--navy);margin-bottom:6px;font-family:'Manrope'}
.field input,.field select,.field textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;font-family:inherit;font-size:14px;color:var(--slate);background:#fff;transition:.18s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--pblue);box-shadow:0 0 0 3px rgba(32,112,216,.12)}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#e0324f;box-shadow:0 0 0 3px rgba(224,50,79,.10)}
.fielderr{display:block;font-size:12px;font-weight:600;color:#e0324f;margin-top:5px;font-family:'Manrope'}
.field label .req{color:#e0324f;margin-left:2px}
.field textarea{resize:vertical;min-height:100px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--mist);margin:8px 0 18px}
.consent input{width:16px;height:16px;margin-top:2px;flex:none}
.cside{background:var(--card2);border:1px solid var(--card-line);border-top:4px solid var(--pblue);color:var(--navy-ink);border-radius:17px;padding:32px}
.cside h3{color:var(--navy-ink);font-size:20px;margin-bottom:6px}
.cside .org{font-size:13px;color:var(--mist);margin-bottom:22px}
.cline{display:flex;gap:13px;padding:15px 0;border-top:1px solid var(--card-line)}
.cline .ci{width:38px;height:38px;border-radius:10px;background:rgba(32,112,216,.08);display:flex;align-items:center;justify-content:center;flex:none}
.cline .l{font-size:11px;color:var(--mist);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.cline .v{font-size:14px;color:var(--navy-ink);margin-top:2px}
.cside .v a{color:var(--navy-ink);cursor:pointer;transition:.16s}
.cside .v a:hover{color:var(--pblue)}
.cside .cline .ci svg[stroke]{stroke:var(--pblue)}
.cside .v a.wa{display:inline-flex;align-items:center;gap:6px;margin-top:5px;color:#1A7A3F;font-weight:600}
.cside .v a.wa:hover{color:#5af08c}
.cside .v a.wa svg{flex:none}
.office{margin-bottom:8px}
.office+.office{margin-top:18px;padding-top:6px;border-top:1px solid var(--line-d)}
.office-h{display:flex;align-items:center;gap:12px;padding:6px 0 4px}
.office-h .flag{font-size:22px;line-height:1}
.office-h b{font-family:'Manrope';color:var(--navy-ink);font-size:15.5px;display:block}
.office-h small{font-size:12px;color:#5B6B96;display:block;margin-top:1px}
.formnote{font-size:12.5px;color:var(--mist);margin-top:10px}

/* about stats */
.astat{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.astat .s{text-align:center;padding:26px;background:var(--grey);border-radius:14px}
.astat .n{font-family:'Manrope';font-weight:800;font-size:36px;color:var(--pblue)}
.astat .l{font-size:13px;color:var(--mist);margin-top:5px}

/* login holding */
.loginhold{max-width:440px;margin:60px auto;background:#fff;border:1px solid var(--line);border-radius:18px;padding:40px;text-align:center;box-shadow:0 24px 60px -28px rgba(8,16,74,.25)}
.loginhold .ic{width:60px;height:60px;border-radius:16px;background:var(--grey);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.loginhold h1{font-size:24px;margin-bottom:10px}
.loginhold p{font-size:14.5px;color:var(--mist);margin-bottom:24px}

/* toast */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(90px);background:var(--navy);color:#fff;padding:14px 22px;border-radius:12px;font-size:14px;font-weight:600;box-shadow:0 16px 40px rgba(8,16,74,.4);opacity:0;transition:.4s;z-index:200;display:flex;align-items:center;gap:10px}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* footer */
footer{background:#EEF3FB;color:#46577a;padding:62px 0 30px;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1fr;gap:34px;padding-bottom:36px;border-bottom:1px solid var(--line)}
.foot-grid .brand-txt{color:var(--navy)}
.foot-grid .brand-txt b{color:var(--pblue)}
.foot-about{font-size:13.5px;max-width:260px;margin-top:14px;line-height:1.6}
.foot-soc{display:flex;gap:10px;margin-top:18px}
.foot-soc a{width:34px;height:34px;border-radius:9px;background:rgba(8,16,74,.06);display:flex;align-items:center;justify-content:center;transition:.18s}
.foot-soc a:hover{background:var(--pblue)}
.foot-soc a:hover svg{fill:#fff}
.fcol h3.fsub{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.fcol h3{color:var(--navy);font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:15px;font-family:'Manrope'}
.fcol a{display:block;font-size:13.5px;margin-bottom:10px;cursor:pointer;transition:.16s}
.fcol a:hover{color:var(--pblue)}
.foot-bot{display:flex;justify-content:space-between;padding-top:24px;font-size:12.5px;flex-wrap:wrap;gap:12px}
.foot-bot a{cursor:pointer}.foot-bot a:hover{color:var(--pblue)}

/* responsive */
@media(max-width:1080px){
  .caps,.visboard,.cabo,.kpistrip{grid-template-columns:repeat(2,1fr) !important}
  .life{grid-template-columns:repeat(4,1fr);gap:24px 0}.life-line{display:none}
  .foot-grid{grid-template-columns:1.5fr 1fr 1fr}
}
@media(max-width:900px){
  .hero-in,.modes,.grid3,.grid2,.intg,.cgrid,.pr-grid,.flow,.astat,.dashrow{grid-template-columns:1fr}
  .pr-col.pain{border-right:none;border-bottom:1px solid var(--line)}
  .kpistrip{grid-template-columns:repeat(3,1fr) !important}
}
@media(max-width:1320px){
  .nav-login{display:none}
  .nav-act .btn-orange{display:none}
  .nav-in{gap:12px}
  /* Mobile header is already 94% opaque white — drop the blur so the fixed
     drawer/scrim anchor to the VIEWPORT. (A backdrop-filter ancestor otherwise
     traps position:fixed children inside the 72px header box → collapsed menu.) */
  header.nav{backdrop-filter:none;-webkit-backdrop-filter:none}
  /* Off-canvas slide-in drawer (modern app-style), always scrolls internally. */
  .nav-menu{display:flex;position:fixed;top:var(--navh);right:0;bottom:0;width:min(86vw,360px);max-width:100vw;z-index:120;background:#fff;flex-direction:column;justify-content:flex-start;align-items:stretch;padding:16px 20px 40px;gap:2px;box-shadow:-22px 0 55px -26px rgba(8,16,74,.5);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;transform:translateX(105%);visibility:hidden;transition:transform .34s cubic-bezier(.4,0,.2,1),visibility 0s linear .34s;scrollbar-width:thin;scrollbar-color:rgba(8,16,74,.2) transparent}
  .nav-menu.show{transform:translateX(0);visibility:visible;transition:transform .34s cubic-bezier(.4,0,.2,1)}
  .nav-menu::-webkit-scrollbar{width:6px}
  .nav-menu::-webkit-scrollbar-thumb{background:rgba(8,16,74,.2);border-radius:3px}
  /* Dim backdrop behind the drawer — tap anywhere to close. */
  .nav-scrim{position:fixed;top:var(--navh);left:0;right:0;bottom:0;z-index:110;background:rgba(8,16,74,.42);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
  body.nav-open .nav-scrim{opacity:1;visibility:visible;transition:opacity .3s ease}
  /* Lock the page behind the open drawer so the gesture scrolls the menu, not the page. */
  body.nav-open{overflow:hidden}
  /* Burger morphs to an X while the drawer is open. */
  body.nav-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.nav-open .burger span:nth-child(2){opacity:0}
  body.nav-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav-menu .nav-item>a{padding:14px 12px;font-size:15px}
  .nav-menu .mega{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding:0 0 8px 14px;min-width:0;display:none;max-height:none;overflow:visible;max-width:none}
  .nav-menu .nav-item.open .mega{display:grid}
  /* NAV/001 §4 — in a 360px drawer the groups stack, so the column divider
     becomes a horizontal one, and descriptors go: fifteen titles at a 44px
     touch height is a list somebody can actually get through. */
  .nav-menu .mega .mgroup{padding:0}
  .nav-menu .mega .mgroup+.mgroup{border-left:0;margin-left:0;border-top:1px solid var(--line);margin-top:8px;padding-top:8px}
  .nav-menu .mega a{white-space:normal;min-height:44px;display:flex;align-items:center;padding:11px 12px}
  .nav-menu .mega a small{display:none}
  .nav-menu .m-cta{display:flex;margin-top:14px;gap:10px}
  .m-cta{display:none}
  .m-cta .btn{flex:1;justify-content:center}
  .burger{display:flex}
  .caps,.visboard,.cabo,.kpistrip,.life{grid-template-columns:1fr !important}
  .foot-grid{grid-template-columns:1fr 1fr}
  section{padding:56px 0}
  .ctaband,.dashscreen{padding:30px 20px}
}
/* ---------- IMAGE SLOTS (frames, placeholders, logos) ---------- */
.fig{position:relative;width:100%}
.fig .farea,.fig .parea{position:relative;overflow:hidden;background:var(--screen);border-radius:12px}
.fig img{width:100%;height:100%;object-fit:cover;display:block}
.fig.browser{border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 30px 70px -34px rgba(8,16,74,.45);overflow:hidden}
.fig.browser .fbar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--screen);overflow:hidden}
.fig.browser .fbar i{width:11px;height:11px;border-radius:50%;background:#3a4a86;flex:none}
.fig.browser .fbar i:nth-child(1){background:#f0506e}.fig.browser .fbar i:nth-child(2){background:#F88828}.fig.browser .fbar i:nth-child(3){background:#0fb87a}
.fig.browser .fbar span{margin-left:8px;font-size:12px;color:#9fb0d8;font-family:'Manrope';font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.fig.browser .farea{border-radius:0}
.fig.phone{max-width:280px;margin:0 auto;border:9px solid var(--screen);border-radius:34px;background:var(--screen);box-shadow:0 30px 70px -34px rgba(8,16,74,.5);overflow:hidden}
.fig.phone .parea{border-radius:24px}
.imgslot{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:16px;background:repeating-linear-gradient(45deg,#f3f6fb,#f3f6fb 14px,#eaf0f8 14px,#eaf0f8 28px);color:var(--mist)}
.imgslot.light{background:repeating-linear-gradient(45deg,#f3f6fb,#f3f6fb 14px,#eaf0f8 14px,#eaf0f8 28px);color:var(--mist)}
.imgslot.dark{background:repeating-linear-gradient(45deg,#0d1652,#0d1652 14px,#0f1a5e 14px,#0f1a5e 28px);color:#9fb0d8}
.imgslot .is-ic{font-size:26px;opacity:.7}
.imgslot b{font-family:'Manrope';font-size:14px;color:var(--navy-ink);line-height:1.3;max-width:90%}
.imgslot.dark b{color:#fff}
.imgslot .is-set{font-size:11.5px;font-family:ui-monospace,Menlo,monospace;opacity:.9;background:rgba(8,16,74,.06);padding:2px 9px;border-radius:6px;word-break:break-word;max-width:100%}
.imgslot.dark .is-set{background:rgba(255,255,255,.1)}
.imgslot.light b{color:var(--navy)}
.imgslot .is-set{font-size:11.5px;font-family:ui-monospace,Menlo,monospace;opacity:.9;background:rgba(255,255,255,.1);padding:2px 9px;border-radius:6px;word-break:break-word;max-width:100%}
.imgslot small{font-size:11px;opacity:.75;max-width:90%}
.surfshots{display:grid;grid-template-columns:1.5fr .8fr .9fr;gap:18px;align-items:center;margin-top:34px}
.solshot{max-width:960px;margin:0 auto}
.logorow{display:flex;align-items:center;justify-content:center;gap:14px 30px;flex-wrap:wrap}
.logoslot{height:30px;display:inline-flex;align-items:center}
.logoslot img{height:100%;width:auto;max-width:150px;object-fit:contain;display:block;filter:grayscale(1);opacity:.7;transition:.2s}
.logoslot img:hover{filter:none;opacity:1}
.logoslot .txt{font-family:'Manrope';font-weight:700;color:var(--slate);opacity:.6;font-size:15px}
.plogo{height:38px;margin-bottom:16px;display:flex;align-items:center}
.plogo img{height:100%;width:auto;max-width:200px;object-fit:contain;display:block}
.plogo .ph{font-family:'Manrope';font-weight:700;color:var(--mist);font-size:12.5px;border:1px dashed var(--line);border-radius:8px;padding:8px 13px}
.artcard .top img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* app-surfaces row: 3-up on desktop, browser-over-(phone+device) on tablet, stacked on phones */
@media(max-width:980px){.surfshots{grid-template-columns:1fr 1fr;gap:20px}.surfshots>.fig.browser{grid-column:1/-1}}
@media(max-width:560px){.surfshots{grid-template-columns:1fr}.surfshots>.fig.plain{max-width:340px;margin:0 auto}.fig.phone{max-width:240px}}
/* content-card pages: 2-up on tablet landscape (grid3 collapses to 1 below 900) */
@media(min-width:901px) and (max-width:1120px){.grid3.cards{grid-template-columns:repeat(2,1fr)}}
/* tighter gutters on small phones */
@media(max-width:560px){.wrap{padding:0 18px}}
/* ---------- LEGAL PAGES ---------- */
.legal{max-width:820px;margin:0 auto}
.legal .upd{color:var(--mist);font-size:13px;margin-bottom:24px}
.legal .note{background:var(--grey);border:1px solid var(--line);border-left:3px solid var(--orange);border-radius:10px;padding:14px 18px;font-size:14px;color:var(--slate);margin:0 0 30px}
.legal h2{font-family:'Manrope';color:var(--navy);font-size:21px;margin:36px 0 12px;line-height:1.3}
.legal h3{font-family:'Manrope';color:var(--navy);font-size:16px;margin:22px 0 8px}
.legal p,.legal li{color:var(--slate);font-size:15.5px;line-height:1.75}
.legal p{margin:0 0 14px}
.legal ul{margin:0 0 16px;padding-left:22px}
.legal li{margin-bottom:7px}
.legal a{color:#2070D8;text-decoration:underline;word-break:break-word}
.legal strong,.legal b{color:var(--navy)}
.legal .ph{color:#8a5210;background:#fff4e6;border-radius:5px;padding:0 5px;font-style:normal}

/* WEB-211 — package comparison matrix */
.cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:#fff;-webkit-overflow-scrolling:touch}
.cmp-tbl{border-collapse:collapse;width:100%;min-width:780px;font-size:14px}
.cmp-tbl th,.cmp-tbl td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
.cmp-tbl thead th{position:sticky;top:0;background:var(--grey);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;z-index:1}
.cmp-tbl thead th:first-child{text-align:left}
.cmp-tbl tbody th{font-weight:600;color:var(--ink);white-space:nowrap}
.cmp-tbl td{text-align:center}
.cmp-tbl tr:last-child th,.cmp-tbl tr:last-child td{border-bottom:0}
.cmp-grp td{background:var(--grey);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left}
.cmp-yes{color:#1B7A4B;font-weight:700}
.cmp-no{color:#c9ced6}
.cmp-note{margin-top:12px;font-size:13px;color:var(--muted)}
@media(max-width:700px){.cmp-tbl th,.cmp-tbl td{padding:10px}}

/* WEB-301 — secondary CTA: the lower-commitment option beside "Request a Demo" */
.dlband{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:space-between;
  background:var(--grey);border:1px solid var(--line);border-radius:var(--r);padding:22px 26px;margin-top:22px}
.dlband .t{flex:1 1 340px;min-width:260px}
.dlband h3{font-size:18px;margin-bottom:4px}
.dlband p{font-size:14px;color:var(--mist);margin:0}
.dlband .btn{white-space:nowrap}
.dlmask{position:fixed;inset:0;background:rgba(11,18,50,.55);z-index:9000;display:none;
  align-items:center;justify-content:center;padding:20px}
.dlmask.open{display:flex}
.dlbox{background:#fff;border-radius:var(--r);max-width:440px;width:100%;padding:26px;position:relative;
  box-shadow:0 24px 60px rgba(11,18,50,.28)}
.dlbox h3{font-size:20px;margin-bottom:6px}
.dlbox .sub{font-size:14px;color:var(--mist);margin-bottom:18px}
.dlbox label{display:block;font-size:12px;font-weight:700;color:var(--navy);margin:12px 0 5px}
.dlbox input{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;
  font:inherit;font-size:14px;color:var(--slate);background:#fff}
.dlbox input:focus{border-color:var(--pblue);outline:none;box-shadow:0 0 0 3px rgba(32,112,216,.14)}
.dlbox .btn{width:100%;margin-top:18px;justify-content:center}
.dlbox .x{position:absolute;top:12px;right:14px;border:0;background:none;font-size:22px;line-height:1;
  color:var(--mist);cursor:pointer;padding:4px 8px}
.dlbox .fine{font-size:11.5px;color:var(--mist);margin-top:12px;line-height:1.45}
.dlbox .err{font-size:13px;color:#b3261e;margin-top:10px;display:none}
.dlbox .err.show{display:block}
.dl-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.pkg-anchor{margin-top:18px;background:var(--card);border:1px solid var(--card-line);border-radius:var(--r);
  padding:16px 20px;display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
.pkg-anchor b{font-family:'Manrope';font-size:17px;color:var(--navy)}
.pkg-anchor span{font-size:13.5px;color:var(--mist)}

/* WEB-003 — tool catalogue */
.tc-stats{display:flex;gap:26px;flex-wrap:wrap;margin-top:22px}
.tc-stats .s{background:var(--grey);border:1px solid var(--line);border-radius:10px;padding:10px 18px}
.tc-stats .n{font-family:'Manrope';font-weight:800;font-size:22px;color:var(--navy);line-height:1.1}
.tc-stats .l{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mist)}
.tc-note{font-size:14px;color:var(--mist);margin-bottom:26px;max-width:760px}
.tc-note a{color:var(--pblue);font-weight:600}
.tc-stage{border:1px solid var(--line);border-radius:var(--r);margin-bottom:18px;overflow:hidden;background:#fff}
.tc-hd{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:16px 20px;background:var(--grey);
  border-bottom:1px solid var(--line)}
.tc-hd h2{font-size:17px}
.tc-hd .sub{font-size:13px;color:var(--mist);flex:1 1 260px}
.tc-hd .cnt{font-size:12px;font-weight:700;color:var(--pblue);white-space:nowrap}
.tc-body{padding:6px 20px 18px}
.tc-grp{padding:14px 0;border-bottom:1px solid var(--line)}
.tc-grp:last-child{border-bottom:0}
.tc-grp h3{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mist);margin-bottom:9px}
.tc-list{display:flex;flex-wrap:wrap;gap:7px}
.tc-list span{font-size:13px;background:var(--card);border:1px solid var(--card-line);border-radius:7px;
  padding:5px 10px;color:var(--slate)}

/* WEB-007 — security evidence table */
.ev-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.ev-tbl{border-collapse:collapse;width:100%;min-width:720px;font-size:14px}
.ev-tbl th,.ev-tbl td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.ev-tbl thead th{background:var(--grey);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mist)}
.ev-tbl tbody tr:last-child td{border-bottom:0}
.ev-tbl td:first-child{font-weight:600;color:var(--navy);white-space:nowrap}
.ev-pill{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 9px;border-radius:20px;white-space:nowrap}
.ev-pub{background:#e6f4ed;color:#0a6b45}
.ev-req{background:#fdf0e2;color:#a35510}
.ev-note{font-size:13px;color:var(--mist);margin-top:12px}
.ev-note em{font-style:normal;font-weight:700;color:var(--orange-t)}

/* WEB-213 — resources controls */
.res-bar{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:32px}
.res-search input{border:1px solid var(--line);border-radius:10px;padding:10px 14px;font:inherit;font-size:14px;
  min-width:230px;color:var(--slate);background:#fff}
.res-search input:focus{outline:none;border-color:var(--pblue);box-shadow:0 0 0 3px rgba(32,112,216,.14)}
.kchip{cursor:pointer;transition:.15s}
.kchip:hover{border-color:var(--pblue);color:var(--pblue)}
.kchip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.res-empty{margin-top:24px;color:var(--mist);font-size:14.5px}
.res-empty button{background:none;border:0;color:var(--pblue);font:inherit;font-weight:600;cursor:pointer;text-decoration:underline}
.res-sub{margin-top:48px;background:var(--grey);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 28px;display:flex;gap:26px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.res-sub h3{font-size:19px;margin-bottom:5px}
.res-sub p{font-size:14px;color:var(--mist);margin:0;max-width:460px}
.res-form{display:flex;gap:9px;flex-wrap:wrap}
.res-form input{border:1px solid var(--line);border-radius:10px;padding:11px 14px;font:inherit;font-size:14px;
  background:#fff;color:var(--slate);min-width:170px}
.res-form input:focus{outline:none;border-color:var(--pblue);box-shadow:0 0 0 3px rgba(32,112,216,.14)}
.res-msg{flex-basis:100%;font-size:13.5px;color:var(--mist);margin:0}
.res-msg.ok{color:#0a6b45;font-weight:600}
.res-msg.bad{color:#b3261e}

/* WEB-202 — interoperability badges */
.stdbadge{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--card-line);
  border-radius:999px;padding:7px 15px;font-family:'Manrope';font-weight:700;font-size:13px;color:var(--navy)}
.stdbadge svg{color:#007F4F;flex:none}

/* WEB-302 — odd card counts left a single card stranded on the last row.
   Auto-fit keeps the rhythm and centres whatever remains. */
.grid3{justify-content:center}
.grid3 > *{min-width:0}
@media(min-width:901px){
  .grid3.cards{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
  .modes > *:last-child:nth-child(odd){grid-column:1 / -1;max-width:calc(50% - 13px);justify-self:center}
}

/* WEB-308 — on a long mobile page the CTA scrolls out of reach for screens at
   a time. This keeps one within thumb reach without covering the content. */
.mcta{display:none}
@media(max-width:760px){
  .mcta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:9500;gap:10px;padding:10px 14px;
    background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
  .mcta .btn{flex:1;justify-content:center;padding:12px 14px;font-size:14.5px}
  body{padding-bottom:70px}
  #rs-consent{bottom:78px}
}

/* WEB-205 — in-page nav for the long Platform page */
.subnav{position:sticky;top:var(--navh);z-index:60;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.subnav-in{display:flex;gap:4px;overflow-x:auto;padding:10px 0;scrollbar-width:none}
.subnav-in::-webkit-scrollbar{display:none}
.subnav a{font-size:13px;font-weight:600;color:var(--mist);padding:7px 13px;border-radius:8px;white-space:nowrap;cursor:pointer}
.subnav a:hover{background:var(--grey);color:var(--pblue)}
.subnav a.on{background:var(--navy);color:#fff}

/* WEB-302 — a four-card row in a three-column grid stranded the fourth card on
   its own. Centre a trailing partial row rather than leaving it hanging left.

   QA/WEB/PLATFORM-VEHICLE/002 3.1 — centring it was still a lone card, nine
   times across the release and four times consecutively on one page, which
   reads as unfinished rather than as a layout. So the grid counts its children
   first: four cards want two rows of two, seven want four then three, and only
   the counts with no better arrangement fall through to being centred. */
@media(min-width:901px){
  .surfgrid > *:last-child:nth-child(3n+1){grid-column:2}
  .grid3 > *:last-child:nth-child(3n+1){grid-column:2}

  /* exactly four: 2 x 2, and nothing is stranded */
  .grid3:has(> :last-child:nth-child(4)){grid-template-columns:repeat(2,1fr)}
  .grid3:has(> :last-child:nth-child(4)) > *:last-child{grid-column:auto}

  /* exactly seven: 4 + 3 rather than 3 + 3 + 1 */
  .grid3:has(> :last-child:nth-child(7)){grid-template-columns:repeat(4,1fr)}
  .grid3:has(> :last-child:nth-child(7)) > *:last-child{grid-column:auto}
}

/* WEB-303 — accessibility statement */
.a11y-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 26px}
.a11y-card p{font-size:14.5px;margin-bottom:13px}
.a11y-card p:last-child{margin-bottom:0}
.a11y-card b{color:var(--navy)}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--pblue);font-weight:600;
  cursor:pointer;text-decoration:underline}

/* WEB-101 — stage-gate board */
.np-stages{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.np-stage{background:#fff;border:1px solid var(--line);border-left:3px solid var(--pblue);border-radius:10px;padding:14px 16px}
.np-stage .n{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--orange-t);font-family:'Manrope'}
.np-stage h3{font-size:15px;margin:3px 0 5px}
.np-stage .own{font-size:12px;color:var(--mist)}
.np-stage ul{margin:9px 0 0;padding-left:16px}
.np-stage li{font-size:12.5px;color:#49525f;margin-bottom:3px}
/* Part 1 — the data path: a numbered vertical sequence, one stage per row. */
.pathlist{counter-reset:pstage;display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;overflow:hidden}
.pathlist li{counter-increment:pstage;display:grid;grid-template-columns:56px 1fr;gap:18px;
  padding:18px 22px;border-top:1px solid var(--line);align-items:start}
.pathlist li:first-child{border-top:0}
.pathlist li::before{content:counter(pstage);grid-row:span 2;font-family:'Manrope';font-weight:800;
  font-size:15px;color:var(--teal);background:var(--teal-bg);border-radius:10px;width:38px;height:38px;
  display:flex;align-items:center;justify-content:center}
.pathlist b{display:block;font-family:'Manrope';font-size:16px;color:var(--navy);margin-bottom:4px}
.pathlist span{font-size:14.5px;color:#49525f;line-height:1.6}
@media(max-width:560px){.pathlist li{grid-template-columns:40px 1fr;gap:13px;padding:16px}
  .pathlist li::before{width:32px;height:32px;font-size:13px}}
/* the in-vehicle family's hero, so the eyebrow chip carries the family colour */
.phero.iv{border-bottom-color:var(--teal)}
.phero.iv .hero-eye{color:var(--teal);background:rgba(15,118,110,.10);border-color:rgba(15,118,110,.30)}
.phero.iv .crumb span{color:var(--teal)}
.np-note{margin-top:24px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;font-size:14.5px;color:#49525f}
.np-note b{color:var(--navy);font-family:'Manrope'}
/* QA/002 2.3 — a{color:inherit;text-decoration:none} meant an inline link in
   prose rendered exactly like the sentence around it. Not "distinguished by
   colour alone" (WCAG 1.4.1) — not distinguished at all. Card-wrapping anchors
   are excluded: those are whole blocks, and the block is the affordance. */
.np-note a:not(.btn),
.uc p a:not(.btn),
.glist dd a,
.sec-head p a:not(.btn),
.cmp-tbl td a:not(.btn),
.tc-note a{color:var(--pblue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.np-note a:hover,.uc p a:hover,.glist dd a:hover,.sec-head p a:hover,.cmp-tbl td a:hover,.tc-note a:hover{color:var(--navy)}
.np-note a:focus-visible,.uc p a:focus-visible,.glist dd a:focus-visible{outline:2px solid var(--pblue);outline-offset:2px}

/* WEB-105 — application suite table */
.app-tbl td{text-align:left}
.app-tbl tbody th{white-space:normal;min-width:130px}

.uc code,.app-tbl code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  background:var(--grey);border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:var(--navy)}

/* WEB-212 — savings calculator */
.roi{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start;margin-bottom:60px}
@media(max-width:860px){.roi{grid-template-columns:1fr}}
.roi-in,.roi-out{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 26px}
.roi-out{background:var(--grey)}
.roi h3{font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--mist);margin-bottom:14px}
.roi label{display:block;font-size:13.5px;font-weight:600;color:var(--navy);margin:14px 0 5px}
.roi input,.roi select{width:100%;padding:10px 13px;border:1px solid var(--line);border-radius:9px;
  font:inherit;font-size:14.5px;color:var(--slate);background:#fff}
.roi input:focus,.roi select:focus{outline:none;border-color:var(--pblue);box-shadow:0 0 0 3px rgba(27,102,201,.15)}
.roi-cur{display:flex;gap:8px}
.roi-cur select{width:110px;flex:none}
.roi-total{font-family:'Manrope';font-weight:800;font-size:38px;color:var(--navy);line-height:1.1;
  letter-spacing:-1px;font-variant-numeric:tabular-nums}
.roi-sub{font-size:13px;color:var(--mist);margin-top:4px;margin-bottom:18px}
.roi-tbl{width:100%;border-collapse:collapse;margin-bottom:16px}
.roi-tbl td{padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:top}
.roi-tbl td:last-child{text-align:right;font-weight:700;color:var(--navy);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.roi-tbl tr:last-child td{border-bottom:0}
.roi-tbl .why{display:block;font-size:12px;color:var(--mist);margin-top:2px}
.roi-caveat{font-size:12.5px;color:var(--mist);line-height:1.55;margin-bottom:16px}
.roi-caveat b{color:var(--navy)}
.roi-caveat em{font-style:italic}

/* WEB-208 — one icon family. Emoji rendered differently on every operating
   system and sat beside hand-drawn line icons; these are the same construction
   as the .si set, sized by their container. */
.rsi{width:1em;height:1em;display:inline-block;vertical-align:-.125em;flex:none}
.flagimg{width:22px;height:17px;border-radius:3px;object-fit:cover;vertical-align:-.2em;
  box-shadow:0 0 0 1px rgba(21,32,92,.12)}
.cap .ic,.uc .ic,.infracard .ic2,.intg .d,.region .fl{color:var(--pblue)}
.cap .ic .rsi,.uc .ic .rsi{width:24px;height:24px}
.intg .d .rsi{width:20px;height:20px}
/* A5/E5 — when this page's content last changed, stated on the page */
.pageStamp{padding:0 0 40px;background:transparent}
.pageStamp p{font-size:13px;color:var(--mist);border-top:1px solid var(--line);padding-top:16px;margin:0}