/* ============================================================
   SIP Connect — production site styles
   Brand: SIP cyan #27ADE3 + deep blue #1862AD · white · Montserrat / Open Sans
   ============================================================ */
/* Self-hosted fonts (latin subset, woff2) — removes the render-blocking Google Fonts request.
   Arial fallback per brand; font-display:swap so text paints immediately. */
/* Inter + Sora are variable fonts (one file each covers the whole weight range). */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/inter.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:'Sora';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/sora.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:'Onest';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/onest.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:'Montserrat';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/montserrat.woff2) format('woff2')}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/opensans.woff2) format('woff2')}
:root{
  --cyan:#27ADE3; --cyan-text:#1862AD; --cyan-text-hover:#124B84; --cyan-hover:#1B93C6; --cyan-ink:#1862AD; --ink:#2B3036; --ink-soft:#5C6168;
  --muted:#6B7075; --line:#E4E8EC; --paper:#FFFFFF; --paper-2:#F3F6F9; --soft:#E6F6FC;
  --font-display:'Montserrat','Onest',Arial,sans-serif; --font-body:'Open Sans','Inter',Arial,sans-serif;
  --container:1400px; --radius:14px; --radius-sm:10px; --radius-pill:100px;
  --shadow:0 14px 34px -14px rgba(20,30,50,.18); --shadow-sm:0 2px 10px rgba(20,30,50,.06);
}
/* ============================================================
   t-offer — SIP Connect offer theme (navy + bright blue,
   Onest headings, pill buttons w/ arrow, gradient badge, alternating
   navy/light sections). Scoped to body.t-offer so non-themed pages
   are unchanged. Applied to the homepage as a pilot; to roll out
   site-wide, add "t-offer" to every body (or fold these into :root).
   ============================================================ */
body.t-offer{
  /* --cyan-ink must clear WCAG AA (4.5:1) for prose/links: #1862AD = 6.2:1 on white (was #1B93C6 = 3.48:1). */
  --cyan:#27ADE3; --cyan-text:#1862AD; --cyan-text-hover:#124B84; --cyan-hover:#1B93C6; --cyan-ink:#1862AD;
  --soft:#E6F6FC; --paper-2:#F3F6F9; --line:#E4E8EC;
  --font-display:'Montserrat','Onest',Arial,sans-serif;
  --radius:20px; --radius-sm:14px;
}
/* dark sections + final CTA -> brand navy */
body.t-offer .section--ink,body.t-offer .cta-band{background:#1862AD}
/* hero -> dark navy "aurora" backdrop (Option 4), matching the industry-page theme; white copy */
body.t-offer .hero{position:relative;overflow:hidden;background:#0C2A4D}
body.t-offer .hero>.container{position:relative;z-index:1}
body.t-offer .hero h1{color:#fff}
body.t-offer .hero .hero-accent{color:#5CC9F0}
body.t-offer .hero .sub{color:#c7d4ea}
body.t-offer .hero .hero-trust{color:#aab9d0}
body.t-offer .hero .hero-trust b{color:#fff}
body.t-offer .hero .hero-trust svg{color:#5CC9F0}
/* buttons on the dark hero: solid white primary + outline secondary so they pop on navy */
body.t-offer .hero .btn-primary{background:#fff;color:#1862AD;border-color:#fff}
body.t-offer .hero .btn-primary:hover{background:#E6F6FC;color:#1862AD}
body.t-offer .hero .btn-secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
body.t-offer .hero .btn-secondary:hover{background:#fff;color:#1862AD}
/* hero reputation row: live star rating + review count + quick trust chips */
.hero-rep{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.hero-rep-score{display:inline-flex;align-items:center;gap:9px;text-decoration:none}
.hero-rep-stars{display:inline-flex;gap:1px;line-height:0}
body.t-offer .hero .hero-rep-num{color:#dbe6f6;font-size:14px;letter-spacing:.01em}
body.t-offer .hero .hero-rep-num b{color:#fff;font-weight:700}
.hero-rep-badges{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
body.t-offer .hero .hero-rep-badges li{display:inline-flex;align-items:center;gap:6px;color:#c7d4ea;font-size:13.5px;font-weight:600}
body.t-offer .hero .hero-rep-badges svg{color:#5CC9F0;flex:0 0 auto}

/* Option 4 — Navy Aurora Mesh: animated dark backdrop (sits behind the home hero) */
.bgaura-wrap{position:absolute;inset:0;overflow:hidden;z-index:0;background:#0C2A4D}
.bgaura-wrap::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 0%,#15264a 0%,#0C2A4D 55%,#091324 100%)}
.bgaura-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.85;will-change:transform;mix-blend-mode:screen}
.bgaura-b1{width:560px;height:560px;left:-120px;top:-140px;background:radial-gradient(circle at 50% 50%,#27ADE3 0%,rgba(21,119,224,0) 68%);animation:bgaura-d1 26s ease-in-out infinite}
.bgaura-b2{width:620px;height:620px;right:-160px;top:-120px;background:radial-gradient(circle at 50% 50%,#2b6fd6 0%,rgba(43,111,214,0) 66%);animation:bgaura-d2 32s ease-in-out infinite}
.bgaura-b3{width:520px;height:520px;left:20%;bottom:-220px;background:radial-gradient(circle at 50% 50%,#5CC9F0 0%,rgba(56,181,255,0) 64%);opacity:.5;animation:bgaura-d3 30s ease-in-out infinite}
.bgaura-b4{width:420px;height:420px;right:10%;bottom:-160px;background:radial-gradient(circle at 50% 50%,#1f5fb8 0%,rgba(31,95,184,0) 66%);animation:bgaura-d4 36s ease-in-out infinite}
.bgaura-vignette{position:absolute;inset:0;background:radial-gradient(120% 120% at 50% 40%,transparent 50%,rgba(6,12,24,.55) 100%)}
@keyframes bgaura-d1{0%,100%{transform:translate(0,0)}50%{transform:translate(80px,60px)}}
@keyframes bgaura-d2{0%,100%{transform:translate(0,0)}50%{transform:translate(-70px,50px)}}
@keyframes bgaura-d3{0%,100%{transform:translate(0,0)}50%{transform:translate(60px,-50px)}}
@keyframes bgaura-d4{0%,100%{transform:translate(0,0)}50%{transform:translate(-50px,-40px)}}
@media(prefers-reduced-motion:reduce) and (scripting:none){.bgaura-blob{animation:none!important}}

/* tighten the gap between an inner-page hero and the first section (was hero-bottom 46 + section-top 72) */
body.t-offer .page-head{padding-bottom:30px}
body.t-offer .page-head + .section{padding-top:42px}
/* hero kicker -> gradient pill badge (navy->blue, no purple) */
body.t-offer .hero .eyebrow{display:inline-block;color:#fff;background:linear-gradient(90deg,#1862AD,#27ADE3);padding:7px 16px;border-radius:100px;letter-spacing:.05em;margin-bottom:20px}
/* primary CTAs -> navy pills with a bright-blue circular arrow */
body.t-offer .btn-primary,body.t-offer .nav-cta{background:#1862AD;color:#fff;border-color:#1862AD}
body.t-offer .btn-primary:hover,body.t-offer .nav-cta:hover{background:#1B93C6;color:#fff}
body.t-offer .nav-cta{display:inline-flex;align-items:center;gap:8px}
body.t-offer .btn-primary::after,body.t-offer .nav-cta::after{content:"\2192";display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#1862AD;color:#fff;font-weight:700;font-size:14px;line-height:1;flex:0 0 auto}
/* mobile: keep the header CTA + phone in the hamburger only (the display rule above re-showed
   them on small screens, where the CTA squashed onto 2 lines). Higher specificity wins regardless of order. */
@media(max-width:1024px){body.t-offer .nav-right .nav-cta,body.t-offer .nav-right .nav-phone{display:none}}
/* mobile: keep ONE full-width primary CTA above the visual (never hide the money action), and tighten the stack */
@media(max-width:680px){
  body.t-offer .hero .hero-actions{display:flex;flex-direction:column;gap:12px}
  body.t-offer .hero .hero-actions .btn{width:100%;justify-content:center}
  body.t-offer .hero .hero-actions .btn-secondary{display:none}
  body.t-offer .hero .hero-rep{margin-top:16px;gap:10px 18px}
  body.t-offer .hero .hero-trust{margin-top:18px}
  body.t-offer .hero .container{gap:24px;padding-block:30px 40px}
  body.t-offer .hero-visual{width:100%;max-width:420px;margin-inline:auto}
  body.t-offer .hero h1{font-size:clamp(28px,8vw,38px)}
  /* inner-page hero: the sticky .mbar (Call + Free Review) covers these on mobile */
  body.t-offer .page-head .ph-actions{display:none}
  body.t-offer .page-head .ph-icon{display:none}
}
/* rounder cards + accent chevron divider, enlarged */
body.t-offer .card{border-radius:20px}
body.t-offer .emdiv{color:#5CC9F0}
body.t-offer .emdiv-mark{width:60px;height:26px}
/* ---- t-offer bespoke layout sections ---- */
/* inner-page hero: soft gradient + gradient-pill eyebrow badge */
body.t-offer:not(.kind-industry) .page-head{background:radial-gradient(120% 150% at 90% 6%,rgba(39,173,227,.16),rgba(39,173,227,0) 52%),linear-gradient(180deg,#FFFFFF 0%,#F3F8FC 100%);border-bottom:1px solid #EAF1F7}
body.t-offer .page-head .eyebrow{display:inline-block;color:#fff;background:linear-gradient(90deg,#1862AD,#27ADE3);padding:6px 15px;border-radius:100px;letter-spacing:.05em;margin-bottom:14px}
/* chevron value-prop band */
.chevband{background:linear-gradient(120deg,#F4F8FF,#F3F6F9)}
.chevband .container{display:grid;grid-template-columns:.8fr 1fr;gap:54px;align-items:center}
.chevband .chevband-art svg{width:100%;max-width:250px;height:auto;display:block;margin-inline:auto}
.chevband-text h2 span{color:var(--cyan)}
.chevband-text p{margin:14px 0 26px;font-size:18px;color:var(--ink-soft);line-height:1.6;max-width:52ch}
@media(max-width:820px){.chevband .container{grid-template-columns:1fr;gap:26px}.chevband .chevband-art svg{max-width:170px}}
/* navy services block — slate cards */
.svcblock .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
.svc-card{display:flex;gap:16px;align-items:flex-start;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:20px 22px;transition:.18s}
.svc-card:hover{background:rgba(255,255,255,.10);transform:translateY(-2px)}
.svc-ico{flex:0 0 auto;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(56,181,255,.16);color:#5CC9F0}
.svc-card-b{flex:1}
.svc-card h3{color:#fff;font-size:17px;margin-bottom:5px}
.svc-card p{color:#c7d4ea;font-size:14px;line-height:1.5}
.svc-go{color:#5CC9F0;font-weight:700;align-self:center;font-size:18px}
@media(max-width:980px){.svcblock .svc-grid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.svcblock .svc-grid{grid-template-columns:1fr}}
/* benefit cards — light, diagonal sheen, circular icon */
.benefits .benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.benefit{position:relative;overflow:hidden;background:linear-gradient(150deg,#E9F3FF,#F5FAFF);border:1px solid #E4E8EC;border-radius:20px;padding:28px 26px 30px}
.benefit::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);pointer-events:none}
.benefit-ico{position:relative;z-index:1;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--cyan);box-shadow:0 6px 16px rgba(18,35,64,.10);margin-bottom:28px}
.benefit h3{position:relative;z-index:1;font-size:18px;margin-bottom:8px}
.benefit p{position:relative;z-index:1;color:var(--muted);font-size:14.5px;line-height:1.55}
@media(max-width:760px){.benefits .benefit-grid{grid-template-columns:1fr}}
/* navy FAQ — white panels */
.faqx .faq{max-width:none;margin-inline:0;columns:2;column-gap:26px}
.faqx .faq .faq-item{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;margin-bottom:12px;display:inline-block;width:100%}
/* Card variant of the accordion (used on the dark FAQ band).
   The base .faq-item rules are built for a flat divider list: `padding:22px 0` — tall,
   and ZERO horizontal padding. Dropped into a white card that put the question text hard
   against the card edge with a stack of dead space above and below it. A card needs card
   padding, so the padding is restated here rather than inherited from the list. */
.faqx .faq-item{background:#fff;border:1px solid transparent;border-radius:var(--radius-sm);
  margin-bottom:0;overflow:hidden;box-shadow:var(--shadow-sm);
  transition:box-shadow .16s ease,border-color .16s ease}
.faqx .faq-item:hover{border-color:#CFE3F5;box-shadow:0 6px 18px rgba(20,30,50,.10)}
.faqx .faq-item[open]{border-color:#CFE3F5}
.faqx .faq-item summary{padding:17px 20px;font-size:16px;line-height:1.45;gap:14px;align-items:center}
.faqx .faq-item summary::after{content:'';width:26px;height:26px;border-radius:50%;background:var(--soft);
  color:var(--cyan-text);font-size:19px;font-weight:400;line-height:1;display:flex;align-items:center;
  justify-content:center;transition:background .16s ease,color .16s ease}
.faqx .faq-item summary::after{content:'+'}
.faqx .faq-item[open] summary::after{content:'\2212';background:var(--cyan-text);color:#fff}
.faqx .faq-item:hover summary::after{background:#CFE3F5}
.faqx .faq-item p{padding:0 20px 17px;font-size:15px;line-height:1.65}
.faqx .faq-item .faq-a p{max-width:70ch}
@media(max-width:760px){.faqx .faq{columns:1;max-width:640px}}
.faqx .faq-item summary{color:var(--ink)}
.faqx .faq-item .faq-a p{color:var(--muted)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);font-size:17px;line-height:1.6;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
/* Decorative/tooltip/animation overflow must never create a horizontal scrollbar (header is outside main, so sticky is unaffected). */
main{overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:var(--cyan-text);text-decoration:none}
::selection{background:var(--cyan);color:#fff}
:focus-visible{outline:2px solid var(--cyan-text);outline-offset:2px}
main:focus{outline:none}
.skip-link{position:absolute;left:8px;top:-60px;z-index:1000;background:var(--ink);color:#fff;font-family:var(--font-display);font-weight:600;font-size:14px;padding:11px 18px;border-radius:0 0 10px 10px;transition:top .15s}
.skip-link:focus{top:0}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:28px}
.eyebrow{font-family:var(--font-display);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.16em;color:var(--cyan-text);margin-bottom:16px}
.section{padding:72px 0}
.section--alt{background:var(--paper-2)}
.section--ink{background:var(--ink);color:#fff}
.section--ink h2{color:#fff}.section--ink p{color:#c7ccd2}
.sec-head{max-width:680px;margin-bottom:40px}
.sec-head.center{margin-inline:auto;text-align:center}
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.01em;line-height:1.15}
.section h2{font-size:clamp(26px,3.4vw,38px);font-weight:700;margin-bottom:14px}
.section .lead{font-size:18px;color:var(--ink-soft);line-height:1.6}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font-display);font-weight:600;font-size:16px;padding:13px 26px;border-radius:var(--radius-pill);border:1.5px solid transparent;cursor:pointer;transition:.15s}
.btn-primary{background:var(--cyan-text);color:#fff}.btn-primary:hover{background:var(--cyan-text-hover)}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--ink)}.btn-secondary:hover{background:var(--ink);color:#fff}
.btn-ghost{background:transparent;color:var(--cyan-text);padding:0;font-size:15px}
.btn-ghost:hover{color:var(--cyan-hover)}
.section--ink .btn-secondary,.cta-band .btn-secondary{color:#fff;border-color:rgba(255,255,255,.5)}.section--ink .btn-secondary:hover,.cta-band .btn-secondary:hover{background:#fff;color:var(--ink)}

/* ---------- Header + mega menu ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:12px;height:84px}
.logo{display:flex;align-items:center;gap:11px;flex-shrink:0}
.logo-img{height:52px;width:auto;display:block}
.footer-brand .logo-img{height:74px}
@media(max-width:520px){.logo-img{height:60px}}
.logo .logo-mark{height:38px;width:38px;flex-shrink:0}
.logo .logo-word{font-family:var(--font-display);font-weight:800;font-size:20px;color:var(--cyan);letter-spacing:.005em;line-height:1}
.logo .logo-word>span{color:var(--muted)}
.logo .logo-word span{color:var(--muted)}
.logo .logo-tag{display:block;font-family:var(--font-body);font-weight:500;font-size:10px;color:var(--muted);letter-spacing:.04em;margin-top:2px}
@media(max-width:520px){.logo .logo-word{font-size:18px}.logo .logo-tag{display:none}}
.nav-main{display:flex;align-items:center;gap:1px;margin-left:6px}
.nav-item{position:relative}
.nav-item>a{display:flex;align-items:center;gap:4px;white-space:nowrap;font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--ink);padding:9px 11px;border-radius:8px;transition:.12s}
.nav-item>a:hover{color:var(--cyan-text);background:var(--paper-2)}
.nav-item>a .chev{width:13px;height:13px;color:var(--muted)}
.nav-right{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0}
.nav-phone{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--ink);white-space:nowrap}
.nav-cta{background:var(--cyan-text);color:#fff;padding:9px 16px;border-radius:var(--radius-pill);font-family:var(--font-display);font-weight:600;font-size:14px;white-space:nowrap;transition:.15s}
.nav-cta:hover{background:var(--cyan-hover);color:#fff}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:9px;width:44px;height:44px;cursor:pointer;font-size:20px;color:var(--ink)}

.dropdown{position:absolute;top:calc(100% + 6px);left:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:10px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.16s;z-index:120}
.nav-item:hover .dropdown,.nav-item:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown.simple{min-width:220px}
.dropdown.simple a{display:flex;align-items:center;gap:11px;padding:10px 14px;border-radius:8px;font-size:14.5px;color:var(--ink-soft);font-weight:500}
.dropdown.simple a:hover{background:var(--paper-2);color:var(--cyan-text)}
.dropdown.simple a .ico{width:18px;height:18px;color:var(--cyan);flex-shrink:0;display:grid;place-items:center}
.dropdown.mega{position:fixed;top:84px;display:grid;grid-template-columns:repeat(5,1fr);gap:4px 10px;width:min(1060px,94vw);left:50%;transform:translateX(-50%) translateY(6px)}
.dropdown.mega::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.dropdown.mega .mega-col{min-width:0}
.nav-item:hover .dropdown.mega,.nav-item:focus-within .dropdown.mega{transform:translateX(-50%) translateY(0)}
.mega-col .mega-h{font-family:var(--font-display);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:8px 12px 6px}
.mega-col .mega-h a{color:var(--ink)}
.mega-col a.mega-link{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:8px;font-size:14px;color:var(--ink-soft);font-weight:500}
.mega-col a.mega-link:hover{background:var(--paper-2);color:var(--cyan-text)}
.mega-col a.mega-link .ico{width:17px;height:17px;color:var(--cyan);flex-shrink:0}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(180deg,#fff 0%,var(--paper-2) 100%);border-bottom:1px solid var(--line);overflow:hidden}
.hero .container{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center;padding-block:88px}
.hero h1{font-size:clamp(38px,5.1vw,62px);font-weight:700;letter-spacing:-.025em;line-height:1.05}
.hero .sub{margin-top:24px;font-size:21px;color:var(--ink-soft);max-width:58ch;line-height:1.62}
.hero-actions{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}
.hero-trust{margin-top:26px;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.hero-trust b{color:var(--ink)}
.hero-visual{position:relative}
.hero-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:24px}
.hero-card .hc-row{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.hero-card .hc-row:last-child{border-bottom:none}
.hero-card .hc-ico{width:42px;height:42px;border-radius:11px;background:var(--soft);color:var(--cyan);display:grid;place-items:center;flex-shrink:0}
.hero-card .hc-ico svg{width:22px;height:22px}
.hero-card .hc-t{font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--ink)}
.hero-card .hc-d{font-size:13px;color:var(--muted)}
.hero-card .hc-badge{margin-left:auto;font-family:var(--font-display);font-weight:700;font-size:12px;color:var(--cyan);background:var(--soft);padding:4px 10px;border-radius:20px}

/* hero photo + floating service pills */
.hero-photo .photo-slot.tall,.photo-slot.tall{aspect-ratio:4/5}
.float-pill{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:50px;padding:13px 20px;font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--ink);white-space:nowrap;animation:floatpill 5s ease-in-out infinite}
.float-pill .fp-ico{display:grid;place-items:center;color:var(--cyan)}
.float-pill.p1{top:9%;right:-8px;animation-delay:0s}
.float-pill.p2{top:41%;right:-32px;animation-delay:.6s}
.float-pill.p3{top:73%;right:-4px;animation-delay:1.2s}
@media(max-width:1180px){.float-pill.p1,.float-pill.p2,.float-pill.p3{right:8px}}
@keyframes floatpill{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.center-cta{text-align:center;margin-top:34px}
@media(max-width:1000px){.float-pill{position:static;display:inline-flex;margin:8px 8px 0 0;animation:none}}

/* dark stats band */
.statsband .sb-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.sb-cell{padding:4px 22px;border-left:1px solid rgba(255,255,255,.13)}
.sb-cell:first-child{border-left:none;padding-left:0}
.sb-big{font-family:var(--font-display);font-weight:800;font-size:clamp(28px,3.1vw,42px);color:#fff;line-height:1;letter-spacing:-.02em;margin-bottom:11px;white-space:nowrap}
.sb-lbl{font-family:var(--font-display);font-weight:600;font-size:16px;color:#fff;line-height:1.3;margin-bottom:13px}
.sb-note{font-size:13.5px;color:#C6CEDA;line-height:1.5}
@media(max-width:860px){.statsband .sb-grid{grid-template-columns:1fr 1fr;gap:30px 0}.sb-cell{padding:0 22px}.sb-cell:nth-child(odd){border-left:none;padding-left:0}}
@media(max-width:480px){.statsband .sb-grid{grid-template-columns:1fr}.sb-cell{border-left:none;padding:0}}

/* industry image cards */
.indcard-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.indcard{position:relative;display:block;border-radius:16px;overflow:hidden;aspect-ratio:3/4;background:var(--ink);box-shadow:var(--shadow-sm);transition:transform .2s}
.indcard:hover{transform:translateY(-4px)}
.indcard-photo{position:absolute;inset:0}
.indcard-photo .photo-slot{height:100%;width:100%;aspect-ratio:auto;border:none;border-radius:0;background:#1c2230}
.indcard-photo .photo-slot .ps-label{color:#6b7280}
.indcard-ov{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(11,14,20,.93) 0%,rgba(11,14,20,.25) 55%,rgba(11,14,20,.1) 100%)}
.indcard-ico{position:absolute;top:16px;left:16px;z-index:2;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center}
.indcard-body{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:20px}
.indcard-body h3{font-family:var(--font-display);font-weight:700;font-size:21px;color:#fff;margin-bottom:6px}
.indcard-body p{font-size:13.5px;color:#d4d8e0;line-height:1.45;margin:0}
@media(max-width:860px){.indcard-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.indcard-grid{grid-template-columns:1fr}}

/* ---------- Page head (inner pages) ---------- */
.page-head{padding:52px 0 30px;border-bottom:1px solid var(--line);background:var(--paper-2)}
.breadcrumbs{font-size:13px;color:var(--muted);margin-bottom:14px;font-family:var(--font-display);font-weight:500}
.breadcrumbs a{color:var(--muted)}.breadcrumbs a:hover{color:var(--cyan-text)}
.page-head h1{font-size:clamp(28px,4vw,46px);font-weight:700;letter-spacing:-.02em;line-height:1.08;max-width:20ch}
.article-meta{margin-top:14px;font-size:14px;color:var(--muted);font-family:var(--font-display);font-weight:500}
.article-meta .article-author{color:var(--cyan-text);font-weight:600;text-decoration:none}
.article-meta .article-author:hover{text-decoration:underline}
.ph-lead{margin-top:16px;font-size:18px;color:var(--ink-soft);line-height:1.65;max-width:62ch}
/* single-column page-heads (blog/legal/default) — relax the narrow caps now the container is 1400px */
.page-head:not(.has-visual) h1{max-width:32ch}
.page-head:not(.has-visual) .ph-lead{max-width:72ch}
.ph-lead.tldr{font-weight:500}
.ph-reviewed{margin-top:14px;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:.01em}
.ph-reviewed svg{width:13px;height:13px;color:var(--cyan);flex:none}
.kind-industry .page-head .ph-reviewed{color:#aeb4bb}
.ph-actions{margin-top:22px;display:flex;gap:13px;flex-wrap:wrap}
/* page-head icon tile */
.ph-icon{width:58px;height:58px;border-radius:15px;background:var(--soft);color:var(--cyan);display:grid;place-items:center;margin-bottom:18px}
.ph-icon svg{width:30px;height:30px}
.kind-industry .ph-icon{background:rgba(21,119,224,.16);color:var(--cyan)}
/* two-column hero with photo slot */
.page-head.has-visual .container{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.page-visual{width:100%}
/* grey photo placeholders (drop real photos here) */
.photo-slot{position:relative;background:#EDEFF2;border:1px solid var(--line);border-radius:18px;aspect-ratio:4/3;display:grid;place-items:center;color:var(--muted);overflow:hidden}
.photo-slot.wide{aspect-ratio:16/9;margin-top:8px}
.photo-slot:not(.has-illo)>svg{width:54px;height:54px;opacity:.5}
.photo-slot .ps-label{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-family:var(--font-display);font-weight:600;font-size:12px;color:var(--muted);letter-spacing:.02em}
.photo-slot img{width:100%;height:100%;object-fit:cover}
.kind-industry .photo-slot{background:#23262c;border-color:#2f333b;color:#6b7280}
.photo-slot .ps-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ps-illo{position:absolute;inset:0;width:100%;height:100%;display:block}
.photo-slot.has-illo,.media.has-illo{background:none;border:none}
.media.has-illo{box-shadow:var(--shadow)}
.hero-photo .photo-slot .ps-img{object-fit:contain}
/* Page-type variety (within the one-accent brand) */
.kind-service .page-head,.kind-industry .page-head,.kind-magnet .page-head,.kind-landing .page-head,.kind-about .page-head{padding:58px 0 46px}
.kind-industry .page-head{background:var(--ink);border-bottom:none}
.kind-industry .page-head .eyebrow{color:var(--cyan-text)}
.kind-industry .page-head h1{color:#fff}
.kind-industry .page-head .breadcrumbs,.kind-industry .page-head .breadcrumbs a{color:#888f98}
.kind-industry .page-head .breadcrumbs a:hover{color:var(--cyan-text)}
.kind-industry .page-head .ph-lead{color:#c7ccd2}
.kind-industry .page-head .btn-secondary{color:#fff;border-color:rgba(255,255,255,.5)}
.kind-industry .page-head .btn-secondary:hover{background:#fff;color:var(--ink)}
.kind-magnet .page-head{background:linear-gradient(160deg,var(--soft) 0%,#fff 75%)}
.kind-landing .page-head{background:linear-gradient(180deg,#fff,var(--paper-2))}
.kind-blog .page-head{background:#fff;padding:48px 0 26px}
.kind-blog .content-inner{max-width:720px}
.kind-legal .content-inner{max-width:760px}

/* ---------- Stats band ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat .num{font-family:var(--font-display);font-weight:800;font-size:clamp(30px,4vw,46px);color:var(--cyan);line-height:1;letter-spacing:-.02em}
.section--ink .stat .num{color:#fff}
.stat .lbl{margin-top:10px;font-size:14.5px;color:var(--muted);font-weight:500}
.section--ink .stat .lbl{color:#c7ccd2}

/* ---------- Card grids ---------- */
.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;transition:.18s}
a.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(39,173,227,.45)}
.card .ico{width:64px;height:64px;border-radius:16px;background:var(--soft);color:var(--cyan);display:grid;place-items:center;margin-bottom:18px}
.card .ico svg{width:34px;height:34px}
.card h3{font-size:18px;font-weight:600;color:var(--ink);margin-bottom:8px}
.card p{font-size:14.5px;color:var(--ink-soft);line-height:1.55;margin:0}
.card .more{margin-top:16px;font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--cyan-text)}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pillar .ico{width:60px;height:60px;border-radius:15px;background:var(--cyan);color:#fff;display:grid;place-items:center;margin-bottom:18px}
.pillar .ico svg{width:32px;height:32px}
.pillar h3{font-size:20px;font-weight:600;margin-bottom:10px}
.pillar p{color:var(--ink-soft);font-size:15.5px;line-height:1.6}
.section--ink .pillar p{color:#c7ccd2}

/* industries chips */
.ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
a.ind{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--ink);transition:.15s}
a.ind:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-2px)}
a.ind .ico{width:34px;height:34px;border-radius:9px;background:var(--soft);color:var(--cyan);display:grid;place-items:center;flex-shrink:0}
a.ind .ico svg{width:18px;height:18px}

/* testimonial */
.quote{max-width:840px;margin-inline:auto;text-align:center}
.quote .mark{font-family:var(--font-display);font-size:60px;line-height:.5;color:var(--cyan);font-weight:800}
.quote p{font-family:var(--font-display);font-weight:600;font-size:clamp(20px,2.6vw,28px);line-height:1.4;color:var(--ink);margin:18px 0 22px;letter-spacing:-.01em}
.quote .who{font-size:15px;color:var(--muted)}.quote .who b{color:var(--ink)}

/* media placeholder (drop real photos here) */
.media{position:relative;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,var(--soft),#fff);border:1px solid var(--line);aspect-ratio:4/3;display:grid;place-items:center;color:var(--cyan)}
.media:not(.has-illo) svg{width:64px;height:64px;opacity:.5}
.media .cap{position:absolute;bottom:12px;left:14px;font-size:12px;color:var(--muted);font-family:var(--mono,monospace)}

/* ---------- Long-form content ---------- */
.content{padding:56px 0 8px}
.content-inner{max-width:760px}
.content h2{font-size:clamp(23px,3vw,30px);font-weight:700;line-height:1.2;margin:42px 0 14px;color:var(--ink)}
.content h2:first-child{margin-top:0}
.content h3{font-size:19px;font-weight:600;margin:26px 0 8px;color:var(--ink)}
.content p{font-size:17px;line-height:1.75;color:var(--ink-soft);margin-bottom:14px}
.content a{color:var(--cyan-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(21,119,224,.4)}
.content a:hover{text-decoration-color:var(--cyan)}
.content strong{color:var(--ink);font-weight:600}
.content ul,.content ol{margin:6px 0 20px}
.content ul{list-style:none;padding-left:0}
.content ul li{position:relative;padding-left:28px;margin-bottom:11px;font-size:17px;line-height:1.65;color:var(--ink-soft)}
.content ul li::before{content:"";position:absolute;left:7px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--cyan)}
.content ol{list-style:none;counter-reset:s;padding-left:0}
.content ol li{position:relative;padding-left:40px;margin-bottom:13px;font-size:17px;line-height:1.65;color:var(--ink-soft);counter-increment:s}
.content ol li::before{content:counter(s);position:absolute;left:0;top:1px;width:26px;height:26px;border-radius:50%;background:var(--soft);color:var(--cyan);font-family:var(--font-display);font-weight:700;font-size:13px;display:grid;place-items:center}
.content em{font-style:normal;color:var(--cyan-text)}
.content blockquote{margin:22px 0;padding:20px 26px;border-left:3px solid var(--cyan);background:var(--paper-2);border-radius:0 var(--radius) var(--radius) 0;font-size:18px;font-style:italic;color:var(--ink-soft)}

/* ---------- Content as blocks (alternating bands + cards) ---------- */
.csec{padding:56px 0}
.csec--alt{background:var(--paper-2)}
.csec-inner{max-width:1040px;margin-inline:auto}
/* the frame above widened with the 1400px container — keep raw prose at a readable measure while card grids fill the frame */
.csec-inner>p,.csec-inner>h2,.csec-inner>h3,.csec-inner>ul:not(.checklist):not(.kv-list),.csec-inner>ol,.csec-inner>blockquote,.csec-inner>.scenario,.csec-inner p.csec-lead,.csec-inner .lead-kicker,.csec-inner p.defcard-lead{max-width:74ch}
.csec-h{display:flex;align-items:center;gap:13px;font-family:var(--font-display);font-weight:700;font-size:clamp(23px,3vw,31px);line-height:1.2;margin-bottom:18px;color:var(--ink);letter-spacing:-.01em}
.csec-h .h-ico{width:34px;height:34px;border-radius:9px;background:var(--soft);color:var(--cyan);display:grid;place-items:center;flex:none}
.csec-h .h-ico svg{width:19px;height:19px}
.csec-inner h3{font-family:var(--font-display);font-weight:600;font-size:19px;margin:26px 0 9px;color:var(--ink)}
.csec-inner p{font-size:17px;line-height:1.75;color:var(--ink-soft);margin-bottom:14px}
.csec-inner>p:last-child{margin-bottom:0}
.csec-inner a{color:var(--cyan-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(7,121,168,.45)}
.csec-inner a:hover{text-decoration-color:var(--cyan)}
.csec-inner strong{color:var(--ink);font-weight:600}
.csec-inner em{font-style:normal;color:var(--cyan-text)}
.csec-inner ul{list-style:none;margin:8px 0 18px;padding:0}
.csec-inner ul li{position:relative;padding-left:26px;margin-bottom:10px;font-size:16.5px;line-height:1.6;color:var(--ink-soft)}
.csec-inner ul li::before{content:"";position:absolute;left:6px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--cyan)}
.csec-inner ol{list-style:none;counter-reset:s;margin:10px 0 18px;padding:0}
.csec-inner ol li{position:relative;padding-left:44px;margin-bottom:13px;font-size:16.5px;line-height:1.6;color:var(--ink-soft);counter-increment:s}
.csec-inner ol li::before{content:counter(s);position:absolute;left:0;top:-1px;width:29px;height:29px;border-radius:50%;background:var(--soft);color:var(--cyan);font-family:var(--font-display);font-weight:700;font-size:13px;display:grid;place-items:center}
.csec-inner blockquote{margin:22px 0;padding:22px 28px;border-left:3px solid var(--cyan);background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--cyan);border-radius:0 14px 14px 0;font-size:18px;font-style:italic;color:var(--ink-soft)}
.csec-inner.intro p{font-size:20px;line-height:1.7;color:var(--ink-soft)}
.csec-inner.intro em{font-style:normal;color:var(--ink-soft)}
/* Content tables (e.g. LOC vs AVC vs FNN on /nbn-location-id/) — keep inside the viewport on mobile */
.csec-inner table,.content table{width:100%;border-collapse:collapse;table-layout:fixed;margin:18px 0 22px;font-size:15px}
.csec-inner th,.csec-inner td,.content th,.content td{padding:11px 13px;border:1px solid var(--line);text-align:left;vertical-align:top;overflow-wrap:anywhere}
.csec-inner th,.content th{background:var(--paper-2);font-family:var(--font-display);font-weight:600;color:var(--ink)}
.csec-inner code,.content code{overflow-wrap:anywhere;word-break:break-all}
@media(max-width:520px){.csec-inner th,.csec-inner td,.content th,.content td{font-size:14px;padding:9px 10px}}
.bcard-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:24px 0 14px}
.bcard{position:relative;display:flex;gap:18px;background:linear-gradient(180deg,#fff,#fafdff);border:1px solid var(--line);border-radius:18px;padding:24px 26px;box-shadow:0 1px 2px rgba(22,24,28,.04),0 16px 36px -26px rgba(12,42,77,.28);transition:transform .24s cubic-bezier(.22,.61,.36,1),box-shadow .24s,border-color .24s;overflow:hidden}
.bcard::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--cyan),var(--cyan-hover));transform:scaleX(0);transform-origin:0 50%;transition:transform .34s cubic-bezier(.22,.61,.36,1)}
.bcard:hover{transform:translateY(-5px);box-shadow:0 2px 4px rgba(22,24,28,.05),0 30px 56px -30px rgba(6,120,165,.45);border-color:rgba(39,173,227,.5)}
.bcard:hover::before{transform:scaleX(1)}
.bcard .bc-ico{position:relative;width:50px;height:50px;border-radius:15px;background:radial-gradient(130% 130% at 28% 18%,#EAF7FE,#D2E7FB);color:var(--cyan-ink);display:grid;place-items:center;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(39,173,227,.22),0 7px 16px -9px rgba(24,98,173,.5);transition:background .26s,color .26s,transform .26s,box-shadow .26s}
.bcard .bc-ico svg{width:24px;height:24px}
.bcard:hover .bc-ico{background:linear-gradient(145deg,var(--cyan),#1862AD);color:#fff;transform:scale(1.06) rotate(-3deg);box-shadow:0 11px 24px -9px rgba(39,173,227,.62)}
.bcard h3{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--ink);margin-bottom:7px;line-height:1.28;letter-spacing:-.013em}
.bcard p{font-size:14.5px;line-height:1.65;color:var(--ink-soft);margin:0}
.bcard p a{color:var(--cyan-ink);font-weight:600}
.bcard-grid > .bcard:last-child:nth-child(odd){grid-column:1/-1;justify-content:center}
@media(max-width:680px){.bcard-grid{grid-template-columns:1fr;gap:12px;margin:18px 0 10px}.bcard{gap:14px;padding:18px 18px;border-radius:14px;box-shadow:0 1px 2px rgba(22,24,28,.05),0 8px 20px -16px rgba(22,24,28,.2)}.bcard .bc-ico{width:40px;height:40px;border-radius:11px}.bcard .bc-ico svg{width:21px;height:21px}.bcard h3{font-size:15.5px;margin-bottom:5px;line-height:1.3}.bcard p{font-size:13.5px;line-height:1.55}.bcard-grid > .bcard:last-child:nth-child(odd){justify-content:flex-start}.csec{padding:44px 0}}
/* numbered step cards (from <ol>) */
.stepcard-grid{display:grid;grid-template-columns:1fr;gap:14px;margin:22px 0}
.stepcard{display:flex;gap:16px;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.csec--alt .stepcard{background:var(--paper)}
.stepcard .sc-n{flex-shrink:0;width:36px;height:36px;border-radius:50%;background:var(--cyan);color:#fff;font-family:var(--font-display);font-weight:700;font-size:15px;display:grid;place-items:center}
.stepcard h3{font-family:var(--font-display);font-weight:600;font-size:16.5px;color:var(--ink);margin-bottom:4px}
.stepcard p{font-size:15.5px;color:var(--ink-soft);line-height:1.55;margin:0}
/* checklist panel (from plain <ul>) */
.csec-inner ul.checklist{display:grid;grid-template-columns:1fr 1fr;gap:13px 30px;list-style:none;margin:22px 0;padding:26px;background:var(--paper);border:1px solid var(--line);border-radius:16px}
.csec--alt .csec-inner ul.checklist{background:var(--paper)}
.csec-inner ul.checklist li{padding-left:0;margin:0;display:flex;align-items:flex-start;gap:12px;font-size:15.5px;color:var(--ink-soft);line-height:1.5}
.csec-inner ul.checklist li::before{content:none}
.csec-inner ul.checklist li svg{color:var(--cyan);flex-shrink:0;margin-top:1px;width:19px;height:19px}
@media(max-width:680px){.csec-inner ul.checklist{grid-template-columns:1fr;padding:22px}}
/* ---- Visual-density content components (generator-applied; all text preserved) ---- */
.csec-inner p.csec-lead{font-size:20px;line-height:1.65;color:var(--ink);padding-left:18px;border-left:3px solid var(--cyan);margin:4px 0 18px}
.csec-inner .lead-kicker{font-size:18px;line-height:1.6;color:var(--muted);margin-bottom:18px}
.csec-inner .lead-kicker em{font-style:normal;color:var(--muted)}
.csec-inner p.ic-lead{margin-bottom:8px}
.stat-chip{color:var(--cyan-text);font-family:var(--font-display);font-weight:700;white-space:nowrap}
/* definition cards (h3/p couplet stacks) */
.defcard-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0 12px}
.defcard-grid.is-3up{grid-template-columns:repeat(3,1fr)}
.defcard{display:flex;flex-direction:column;gap:11px;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:22px 24px;transition:.15s}
.defcard:hover{box-shadow:var(--shadow-sm);border-color:#d4d8de}
.csec--alt .defcard{background:var(--paper)}
.defcard .dc-ico{width:38px;height:38px;border-radius:10px;background:var(--soft);color:var(--cyan);display:grid;place-items:center;flex:none}
.defcard .dc-ico svg{width:21px;height:21px}
.defcard h3{font-family:var(--font-display);font-weight:600;font-size:16.5px;color:var(--ink);margin:0;line-height:1.3}
.defcard p{font-size:15px;line-height:1.6;color:var(--ink-soft);margin:0}
.defcard p a{color:var(--cyan-text)}
.csec-inner p.defcard-lead{font-size:17px;color:var(--ink-soft);margin-bottom:8px}
/* NAP / key-value list (contact + location pages) */
.csec-inner ul.kv-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px 26px;margin:18px 0;padding:0}
.csec-inner ul.kv-list li{display:flex;gap:13px;align-items:flex-start;padding-left:0;margin:0}
.csec-inner ul.kv-list li::before{content:none}
.kv-list .kv-ico{width:34px;height:34px;border-radius:9px;background:var(--soft);color:var(--cyan);display:grid;place-items:center;flex:none}
.kv-list .kv-ico svg{width:18px;height:18px}
.kv-list .kv-row{font-size:15.5px;line-height:1.55}
.kv-list .kv-label{font-family:var(--font-display);font-weight:600;color:var(--ink)}
.kv-list .kv-val{color:var(--ink-soft)}
.kv-list .kv-val a{color:var(--cyan-text)}
/* scenario / example panel */
.scenario{display:flex;gap:16px;background:var(--paper-2);border:1px solid var(--line);border-left:3px solid var(--cyan);border-radius:0 14px 14px 0;padding:22px 26px;margin:6px 0}
.csec--alt .scenario{background:var(--paper)}
.scenario .sc-ico{color:var(--cyan);flex:none;margin-top:2px}
.scenario .sc-body p{margin-bottom:12px}
.scenario .sc-body p:last-child{margin-bottom:0}
@media(max-width:680px){
  .csec-h{gap:10px}
  .csec-h .h-ico{width:28px;height:28px;border-radius:8px}
  .csec-h .h-ico svg{width:16px;height:16px}
  .defcard-grid,.defcard-grid.is-3up{grid-template-columns:1fr 1fr;gap:10px}
  .defcard{padding:15px 14px;border-radius:12px;gap:8px}
  .defcard .dc-ico{width:30px;height:30px;border-radius:8px}
  .defcard .dc-ico svg{width:17px;height:17px}
  .defcard h3{font-size:14px;line-height:1.25}
  .defcard p{font-size:12.5px;line-height:1.5}
  .csec-inner p.csec-lead{font-size:17.5px;padding-left:14px}
  .csec-inner ul.kv-list{grid-template-columns:1fr;gap:12px}
  .scenario{padding:16px 16px;gap:12px}
}
@media(max-width:440px){
  .defcard-grid,.defcard-grid.is-3up{grid-template-columns:1fr}
}

/* ---------- Contact form ---------- */
.contact-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:46px;align-items:start}
.contact-form-wrap h2{font-family:var(--font-display);font-weight:700;font-size:27px;margin-bottom:8px}
.contact-form-wrap .muted2{color:var(--muted);margin-bottom:26px}
.cform{display:flex;flex-direction:column;gap:17px}
.cform-row{display:grid;grid-template-columns:1fr 1fr;gap:17px}
.field{display:flex;flex-direction:column;gap:7px}
.field>span{font-family:var(--font-display);font-weight:600;font-size:13.5px;color:var(--ink)}
.field input,.field select,.field textarea{font-family:var(--font-body);font-size:16px;color:var(--ink);padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;transition:border-color .15s,box-shadow .15s;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--cyan-ink);outline-offset:1px;border-color:var(--cyan-ink);box-shadow:0 0 0 3px var(--soft)}
.field textarea{resize:vertical;min-height:120px}
.field.file-field span em{color:var(--muted);font-style:normal;font-weight:400}
.field input[type=file]{padding:10px 12px;cursor:pointer;background:#fff;color:var(--ink-soft);font-size:14px}
.field input[type=file]::file-selector-button{font-family:var(--font-display);font-weight:600;font-size:13px;color:#fff;background:var(--cyan);border:none;border-radius:8px;padding:9px 14px;margin-right:12px;cursor:pointer;transition:background .15s}
.field input[type=file]::file-selector-button:hover{background:var(--cyan-hover)}
.cform .hp{position:absolute;left:-9999px}
.cform button{align-self:flex-start;margin-top:6px}
.cform-status{font-size:14.5px;line-height:1.5;margin-top:2px}
.cform-status.ok{color:var(--cyan-ink);font-weight:600}
.cform-status.err{color:#c0392b}
.cform-consent{font-size:12px;color:var(--muted);line-height:1.5;margin:10px 0 0}
.cform-consent a{color:var(--ink-soft);text-decoration:underline}
.legal-updated-wrap{padding-top:28px}
.legal-updated{color:var(--muted);font-size:14px;margin:0}

/* ---------- Meet the team ---------- */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.team-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);margin:0;transition:transform .2s,box-shadow .2s}
.team-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.team-photo{position:relative;aspect-ratio:4/5;background:#eef0f2;display:grid;place-items:center;overflow:hidden}
.team-photo .team-img{width:100%;height:100%;object-fit:cover;display:block}
.team-ph{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--muted);text-align:center;padding:16px}
.team-ph span{font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:.01em}
.team-card figcaption{padding:20px 22px 24px}
.team-card h3{font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--ink);margin:0 0 2px}
.team-role{font-family:var(--font-display);font-weight:600;font-size:13px;color:var(--cyan);margin-bottom:10px}
.team-card p{font-size:14px;color:var(--ink-soft);line-height:1.55;margin:0}
.team-li{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-family:var(--font-display);font-weight:600;font-size:13px;color:var(--ink-soft)}
.team-li:hover{color:var(--cyan)}
@media(max-width:760px){.team-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.team-grid{grid-template-columns:1fr;max-width:360px;margin-inline:auto}}

/* ---------- Essential 8 animated grid ---------- */
.e8-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.e8-card{position:relative;display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 20px 20px;box-shadow:var(--shadow-sm)}
.e8-num{position:absolute;top:16px;right:18px;font-family:var(--font-display);font-weight:800;font-size:13px;color:#cfd4da;letter-spacing:.04em}
.e8-ico{width:50px;height:50px;border-radius:13px;background:var(--soft);color:var(--cyan);display:grid;place-items:center}
.e8-card h3{font-family:var(--font-display);font-weight:700;font-size:15.5px;line-height:1.3;color:var(--ink);margin:0}
.e8-body p{font-size:13px;color:var(--ink-soft);line-height:1.5;margin:6px 0 0}
@media(max-width:880px){.e8-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:440px){.e8-grid{grid-template-columns:1fr}}
/* sequential "switch on": cards rise + icon tiles light up cyan, staggered by --d */
html.anim .e8 .e8-card{opacity:0;transform:translateY(20px) scale(.97);transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1);transition-delay:var(--d)}
html.anim .e8 .e8-ico{background:#eef0f2;color:var(--muted);transition:background .5s ease,color .5s ease;transition-delay:var(--d)}
html.anim .e8.is-in .e8-card{opacity:1;transform:none}
html.anim .e8.is-in .e8-ico{background:var(--soft);color:var(--cyan)}

/* ---------- Network firewall visualisation ---------- */
.netviz-sec .lead{color:#c8cdd6}
.netviz{position:relative;max-width:760px;margin:6px auto 0;height:180px}
.nv-node{position:absolute;top:50%;transform:translate(-50%,-50%);width:74px;height:74px;z-index:2}
.nv-net{left:10%}.nv-fw{left:50%}.nv-eps{left:90%}
.nv-ico{position:absolute;inset:0;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;color:#fff}
.nv-fw .nv-ico{background:rgba(21,119,224,.18);border-color:rgba(21,119,224,.55)}
.nv-glow{position:absolute;inset:0;border-radius:18px;box-shadow:0 0 0 0 rgba(21,119,224,.5);animation:nvGlow 2.4s ease-out infinite}
@keyframes nvGlow{0%{box-shadow:0 0 0 0 rgba(21,119,224,.45)}70%{box-shadow:0 0 0 15px rgba(21,119,224,0)}100%{box-shadow:0 0 0 0 rgba(21,119,224,0)}}
.nv-lbl{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);white-space:nowrap;font-family:var(--font-display);font-weight:600;font-size:13px;color:#d4d8e0}
.nv-wire{position:absolute;top:50%;height:2px;background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.2),rgba(255,255,255,.05));transform:translateY(-50%);z-index:0}
.nv-wire-l{left:10%;right:50%}.nv-wire-r{left:50%;right:10%}
.nv-track{position:absolute;inset:0;z-index:1;pointer-events:none}
.nv-pulse{position:absolute;top:50%;left:10%;width:11px;height:11px;border-radius:50%;transform:translate(-50%,-50%)}
.nv-pulse.good{background:#5CC9F0;box-shadow:0 0 10px 2px rgba(56,181,255,.85);animation:nvGood 3.2s linear infinite}
.nv-pulse.bad{background:#ff4d4f;box-shadow:0 0 11px 2px rgba(255,77,79,.9);animation:nvBad 3s ease-in infinite}
@keyframes nvGood{0%{left:10%;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:90%;opacity:0}}
@keyframes nvBad{0%{left:10%;opacity:0;width:11px;height:11px}10%{opacity:1}58%{left:47%;opacity:1;width:11px;height:11px}72%{left:47%;width:24px;height:24px;opacity:.85}100%{left:47%;width:30px;height:30px;opacity:0}}
.netviz-legend{display:flex;justify-content:center;gap:30px;margin-top:16px;font-size:13.5px;color:var(--ink-soft)}
.netviz-legend span{display:inline-flex;align-items:center;gap:8px}
.nv-dot{width:11px;height:11px;border-radius:50%;display:inline-block}
.nv-dot.good{background:#5CC9F0;box-shadow:0 0 8px rgba(56,181,255,.8)}
.nv-dot.bad{background:#ff4d4f;box-shadow:0 0 8px rgba(255,77,79,.8)}
@media(max-width:560px){.netviz{height:170px}.nv-node{width:56px;height:56px}.nv-net{left:13%}.nv-eps{left:87%}.nv-ico{border-radius:14px}.nv-glow{border-radius:14px}.nv-lbl{font-size:11px;white-space:normal;max-width:74px;text-align:center;line-height:1.2}.nv-wire-l{left:13%}.nv-wire-r{right:13%}}
@media(prefers-reduced-motion:reduce) and (scripting:none){.nv-pulse.good{animation-duration:6s}.nv-pulse.bad{animation-duration:5.5s}}

/* ---------- Emblem section divider ---------- */
.emdiv{display:flex;align-items:center;justify-content:center;gap:18px;max-width:780px;margin:0 auto;padding:4px 28px}
.emdiv-l{height:1px;flex:1;max-width:170px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.emdiv-mark{width:52px;height:22px;color:var(--cyan);opacity:.85;flex-shrink:0}

/* ---------- 4-step spine ---------- */
.steps{position:relative}
.steps-spine{position:absolute;top:24px;left:12.5%;right:12.5%;height:2px;z-index:0}
.steps-spine span{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--cyan),rgba(21,119,224,.3));transform-origin:left}
html.anim .steps-spine span{transform:scaleX(0);transition:transform 1s cubic-bezier(.5,0,.2,1) .1s}
html.anim .steps.is-in .steps-spine span{transform:scaleX(1)}
.steps .step{position:relative;z-index:1;text-align:center}
@media(max-width:1024px){.steps-spine{display:none}}

/* ---------- Incident-response timeline ---------- */
.irt-rail{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:980px;margin:8px auto 0;padding-top:2px}
.irt-line{position:absolute;top:24px;left:12.5%;right:12.5%;height:2px;z-index:0}
.irt-line span{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--cyan),rgba(21,119,224,.35));transform-origin:left}
html.anim .irt-line span{transform:scaleX(0);transition:transform 1.1s cubic-bezier(.5,0,.2,1) .15s}
html.anim .irt.is-in .irt-line span{transform:scaleX(1)}
.irt-node{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.irt-dot{width:50px;height:50px;border-radius:50%;background:#fff;border:2px solid var(--cyan);color:var(--cyan);display:grid;place-items:center;box-shadow:0 6px 18px rgba(21,119,224,.16)}
.irt-step{font-family:var(--font-display);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--cyan)}
.irt-card h3{font-family:var(--font-display);font-weight:700;font-size:17px;margin:4px 0 6px;color:var(--ink)}
.irt-card p{font-size:13.5px;color:var(--ink-soft);line-height:1.5;margin:0}
html.anim .irt-node{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;transition-delay:var(--d)}
html.anim .irt.is-in .irt-node{opacity:1;transform:none}
@media(max-width:680px){.irt-rail{grid-template-columns:1fr;gap:0;max-width:440px}.irt-line{left:24px;right:auto;top:8px;bottom:8px;width:2px;height:auto}.irt-line span{height:100%}.irt-node{flex-direction:row;text-align:left;gap:16px;padding:12px 0}.irt-dot{flex-shrink:0}}

/* ---------- SOC live-threat console ---------- */
.socx .lead{color:#c8cdd6}
.soc-panel{display:grid;grid-template-columns:280px 1fr;gap:24px;max-width:900px;margin:10px auto 0;align-items:stretch}
.soc-radar{position:relative;aspect-ratio:1;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);overflow:hidden}
.soc-grid{position:absolute;inset:0;background:radial-gradient(circle,rgba(21,119,224,.12) 0,transparent 70%),repeating-radial-gradient(circle at 50% 50%,transparent 0,transparent 30px,rgba(255,255,255,.06) 31px)}
.soc-sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(21,119,224,.5),rgba(21,119,224,.04) 70deg,transparent 90deg);animation:socSweep 3.6s linear infinite}
@keyframes socSweep{to{transform:rotate(360deg)}}
.soc-blip{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:socBlip 3.6s ease-in-out infinite;opacity:0}
.soc-blip.b1{top:34%;left:60%;animation-delay:.5s}.soc-blip.b2{top:62%;left:42%;animation-delay:1.7s}.soc-blip.b3{top:46%;left:70%;background:#ff5a5c;box-shadow:0 0 11px #ff5a5c;animation-delay:2.7s}
@keyframes socBlip{0%,100%{opacity:0;transform:scale(.4)}10%{opacity:1;transform:scale(1)}45%{opacity:0;transform:scale(1)}}
.soc-radar-lbl{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.04em;color:#9fb6c2;z-index:2}
.soc-feed{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:14px 18px;text-align:left}
.soc-feed-head{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:600;font-size:13px;color:#d4d8e0;padding-bottom:11px;margin-bottom:4px;border-bottom:1px solid rgba(255,255,255,.1)}
.soc-live{display:inline-flex;align-items:center;gap:6px;color:#5CC9F0;font-size:11px;letter-spacing:.05em}
.soc-live span{width:7px;height:7px;border-radius:50%;background:#5CC9F0;animation:socLive 2s ease-out infinite}
@keyframes socLive{0%{box-shadow:0 0 0 0 rgba(56,181,255,.6)}70%{box-shadow:0 0 0 7px rgba(56,181,255,0)}100%{box-shadow:0 0 0 0 rgba(56,181,255,0)}}
.soc-row{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:13px}
.soc-row:last-child{border-bottom:none}
.soc-ico{color:#7fe3f2;display:grid;place-items:center}
.soc-row.block .soc-ico{color:#9fb6c2}.soc-row.threat .soc-ico{color:#ff7a7c}
.soc-sig{color:#e6e9ee}
.soc-status{font-size:11.5px;font-weight:600;color:#7fe3f2;white-space:nowrap}
.soc-row.block .soc-status{color:#9fb6c2}.soc-row.threat .soc-status{color:#ff7a7c}
html.anim .soc-row{opacity:0;transform:translateX(14px);transition:opacity .5s ease,transform .5s ease;transition-delay:var(--d)}
html.anim .socx.is-in .soc-row{opacity:1;transform:none}
@media(max-width:680px){.soc-panel{grid-template-columns:1fr;gap:18px}.soc-radar{max-width:240px;margin:0 auto}.soc-row{grid-template-columns:22px 1fr}.soc-status{grid-column:2;margin-top:2px}}
@media(prefers-reduced-motion:reduce) and (scripting:none){.soc-sweep{animation-duration:9s}.soc-blip{animation-duration:8s}}

/* ---------- Essential 8 mini self-check ---------- */
.e8sc-grid{display:grid;grid-template-columns:1fr 300px;gap:38px;max-width:920px;margin:8px auto 0;align-items:center}
.e8sc-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.e8q{display:flex;align-items:center;gap:11px;text-align:left;background:#fff;border:1px solid var(--line);border-radius:11px;padding:12px 14px;font-family:var(--font-body);font-size:13.5px;color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s}
.e8q:hover{border-color:var(--cyan)}
.e8q-box{width:22px;height:22px;border-radius:6px;border:2px solid var(--line);display:grid;place-items:center;color:#fff;flex-shrink:0;transition:.15s}
.e8q-box svg{opacity:0;transition:opacity .15s}
.e8q-lbl{line-height:1.3}
.e8q[aria-pressed="true"]{border-color:var(--cyan);background:var(--soft)}
.e8q[aria-pressed="true"] .e8q-box{background:var(--cyan);border-color:var(--cyan)}
.e8q[aria-pressed="true"] .e8q-box svg{opacity:1}
.e8sc-result{text-align:center}
.e8sc-ringwrap{position:relative;width:150px;height:150px;margin:0 auto 16px}
.e8sc-ring{width:150px;height:150px;transform:rotate(-90deg)}
.e8sc-bg{fill:none;stroke:var(--line);stroke-width:9}
.e8sc-fg{fill:none;stroke:var(--cyan);stroke-width:9;stroke-linecap:round;stroke-dashoffset:100;transition:stroke-dashoffset .5s cubic-bezier(.5,0,.2,1)}
.e8sc-score{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.e8sc-score strong{font-family:var(--font-display);font-weight:800;font-size:42px;color:var(--ink);line-height:1}
.e8sc-score span{font-size:12px;color:var(--muted);font-weight:600;margin-top:2px}
.e8sc-verdict{font-size:14px;color:var(--ink-soft);line-height:1.5;margin:0 0 18px;min-height:42px}
@media(max-width:760px){.e8sc-grid{grid-template-columns:1fr;gap:26px}.e8sc-result{order:-1}}
@media(max-width:440px){.e8sc-list{grid-template-columns:1fr}}
.contact-aside{background:var(--paper-2);border:1px solid var(--line);border-radius:18px;padding:30px}
.contact-aside h3{font-family:var(--font-display);font-weight:700;font-size:19px;margin-bottom:20px}
.contact-list{list-style:none;display:flex;flex-direction:column;gap:18px;margin-bottom:22px;padding:0}
.contact-list li{display:flex;gap:13px}
.contact-list li svg{color:var(--cyan);flex-shrink:0;margin-top:2px}
.contact-list li span{display:block;font-family:var(--font-display);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:3px}
.contact-list li>div{font-size:14.5px;color:var(--ink-soft);line-height:1.5}
.contact-list li a{color:var(--ink);font-weight:600}
.contact-list li a:hover{color:var(--cyan)}
.contact-urgent{display:flex;align-items:center;gap:11px;font-size:13.5px;line-height:1.4;color:var(--ink-soft);background:var(--soft);border-radius:11px;padding:14px 16px}
.contact-urgent svg{color:var(--cyan);flex-shrink:0}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr;gap:30px}.cform-row{grid-template-columns:1fr}}

/* ---------- Client support: remote tools ---------- */
.supgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.supcard{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:30px 26px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.supcard .sup-ico{width:58px;height:58px;border-radius:15px;background:var(--soft);color:var(--cyan);display:grid;place-items:center;margin-bottom:6px}
.supcard h3{font-family:var(--font-display);font-weight:700;font-size:19px}
.supcard p{color:var(--ink-soft);font-size:15px;line-height:1.55;flex-grow:1}
.supcard .sup-act{margin-top:8px}
.btn.is-soon{opacity:.6;pointer-events:none;cursor:default}
.btn.is-soon em{font-style:normal;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;opacity:.8;margin-left:4px}
.sup-note{display:flex;align-items:center;gap:10px;margin-top:24px;font-size:14px;color:var(--muted);line-height:1.5}
.sup-note svg{color:var(--cyan);flex-shrink:0}
@media(max-width:860px){.supgrid{grid-template-columns:1fr}}

/* ---------- Pricing / plans (3 tiers) ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.plan{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;padding:32px 28px}
.plan.featured{border:2px solid var(--cyan);box-shadow:var(--shadow);position:relative;padding-top:38px}
.plan-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--cyan);color:#fff;font-family:var(--font-display);font-weight:600;font-size:12px;padding:6px 16px;border-radius:20px;letter-spacing:.03em;white-space:nowrap}
.plan h3{font-family:var(--font-display);font-weight:700;font-size:23px;color:var(--ink);margin-bottom:8px}
.plan-blurb{font-size:14.5px;color:var(--ink-soft);line-height:1.55;margin-bottom:20px;min-height:46px}
.plan-price{font-family:var(--font-display);font-weight:800;font-size:38px;color:var(--ink);line-height:1;letter-spacing:-.02em}
.plan-price .dim{color:var(--muted)}
.plan-per{font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--ink);margin:6px 0 20px}
.plan-feats{list-style:none;margin:0 0 26px;padding:0;flex:1}
.plan-feats li{display:flex;align-items:flex-start;gap:12px;padding:10px 0;font-size:14.5px;line-height:1.45;color:var(--ink);border-top:1px solid var(--line)}
.plan-feats li:first-child{border-top:none}
.plan-feats li.no{color:var(--muted)}
.plan-feats .fi{width:21px;height:21px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;margin-top:1px}
.plan-feats .fi.yes{background:var(--soft);color:var(--cyan)}
.plan-feats .fi.no{background:#EEF0F2;color:var(--muted)}
.plan-feats .fi svg{width:13px;height:13px}
.plan{overflow:visible}
.plan-tabs{display:none;max-width:340px;margin:0 auto 20px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px;gap:4px}
.plan-tab{flex:1;border:none;background:transparent;font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--muted);padding:9px 6px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s}
.plan-tab.active{background:var(--cyan);color:#fff}
@media(max-width:760px){.plan-tabs{display:flex}.plans .plan{display:none}.plans .plan.is-shown{display:flex}}
.ft-label{display:inline}
.ft-info{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:5px;vertical-align:-3px;color:var(--muted);cursor:help;border-radius:50%}
.ft-info svg{width:14px;height:14px}
.ft-info:hover,.ft-info:focus{color:var(--cyan);outline:none}
.ft-tip{position:absolute;bottom:calc(100% + 9px);left:50%;width:228px;max-width:60vw;transform:translateX(-50%) translateY(5px);background:#2B3036;color:#fff;font-family:var(--font-body);font-weight:400;font-size:12.5px;line-height:1.5;text-align:left;padding:10px 13px;border-radius:10px;box-shadow:0 12px 34px rgba(0,0,0,.26);opacity:0;visibility:hidden;transition:opacity .16s,transform .16s,visibility .16s;z-index:8;pointer-events:none}
.ft-tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:7px solid transparent;border-top-color:#2B3036}
.ft-info:hover .ft-tip,.ft-info:focus .ft-tip,.ft-info:focus-within .ft-tip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
@media(max-width:560px){.ft-tip{width:196px;left:auto;right:-6px;transform:translateY(5px)}.ft-tip::after{left:auto;right:13px}.ft-info:hover .ft-tip,.ft-info:focus .ft-tip,.ft-info:focus-within .ft-tip{transform:translateY(0)}}
.plan .btn{width:100%}
.plans-note{text-align:center;color:var(--muted);font-size:14.5px;margin-top:26px}
@media(max-width:860px){.plans{grid-template-columns:1fr;max-width:440px;margin-inline:auto}.plan.featured{order:-1}}

/* ---------- CTA band ---------- */
.cta-band{background:var(--ink);color:#fff}
.cta-band .container{padding-block:60px;text-align:center}
.cta-band h2{font-size:clamp(25px,3vw,36px);font-weight:700;color:#fff;margin-bottom:12px}
.cta-band p{color:#c7ccd2;font-size:18px;max-width:54ch;margin:0 auto 26px}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
@media(max-width:480px){.cta-actions{flex-direction:column;align-items:stretch}.cta-band .cta-actions .btn{width:100%}}

/* ---------- Footer ---------- */
.site-footer{background:var(--paper-2);border-top:1px solid var(--line);padding:60px 0 30px;font-size:14.5px}
.footer-grid{display:grid;grid-template-columns:1.6fr repeat(5,1fr);gap:30px}
.footer-col .footer-h{font-family:var(--font-display);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink);margin-bottom:15px}
.footer-col a{display:block;color:var(--ink-soft);margin-bottom:10px}
.footer-col a:hover{color:var(--cyan)}
.footer-brand .logo{margin-bottom:14px}
.footer-brand p{color:var(--ink-soft);line-height:1.6;max-width:32ch;margin-bottom:10px}
.footer-tagline{font-family:var(--font-display);font-weight:600;color:var(--cyan-ink);margin:12px 0}
/* Footer contact band — sits below the link columns, four groups reading across.
   Previously stacked inside the brand column, which made that column run twice the
   height of the ones beside it. */
.footer-contact{font-style:normal;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;
  margin-top:38px;padding-top:26px;border-top:1px solid var(--line);color:var(--ink-soft);line-height:1.55}
.footer-contact .fc-block{display:grid;gap:1px;align-content:start}
.footer-contact .fc-label{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.footer-contact .fc-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px}
.footer-contact a{color:var(--ink-soft);text-decoration:none}
.footer-contact a:hover{color:var(--cyan-ink);text-decoration:underline}
.footer-contact .fc-strong{font-weight:700;color:var(--ink);letter-spacing:.01em}
.footer-contact .fc-alt{color:var(--muted);font-size:13.5px}
.footer-contact .fc-tag{flex:none;min-width:56px;font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan-ink);background:var(--soft);border-radius:4px;padding:2px 6px;text-align:center}
@media(max-width:900px){.footer-contact{grid-template-columns:1fr 1fr;gap:24px}}
@media(max-width:560px){.footer-contact{grid-template-columns:1fr}}
.footer-bottom{border-top:1px solid var(--line);margin-top:40px;padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:13px}
.footer-bottom a{color:var(--muted)}.footer-bottom a:hover{color:var(--cyan)}

/* ---------- Trust / partner strip ---------- */
.trust{padding:36px 0;border-bottom:1px solid var(--line);background:#fff}
.trust .lbl{text-align:center;font-family:var(--font-display);font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:22px}
.trust-row{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:0 20px}
.trust-row span{font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--muted);opacity:.8;letter-spacing:-.01em;transition:.15s}
.trust-row span:hover{opacity:1;color:var(--ink)}
.trust-logo{height:36px;width:auto;max-width:132px;object-fit:contain;filter:grayscale(1);opacity:.6;transition:filter .2s,opacity .2s}
.trust-logo-link{flex:0 1 auto;min-width:0;display:inline-flex}
.trust-logo:hover{filter:grayscale(0);opacity:1}
@media(max-width:980px){.trust-row{flex-wrap:wrap;gap:16px 36px}.trust-logo{max-width:160px;height:36px}}
@media(max-width:520px){.trust-logo{height:28px;max-width:120px}}

/* ---------- Feature (two-column text + media) ---------- */
.feature{padding:72px 0}
.feature .container{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.feature.reverse .ft-text{order:2}
.feature h2{font-size:clamp(26px,3.3vw,38px);font-weight:700;line-height:1.15;margin-bottom:16px}
.feature .ft-text>p{font-size:18px;color:var(--ink-soft);line-height:1.7}
.ft-list{list-style:none;margin:22px 0 28px}
.ft-list li{position:relative;padding-left:34px;margin-bottom:14px;font-size:16.5px;color:var(--ink);font-weight:500}
.ft-list li svg{position:absolute;left:0;top:0;width:22px;height:22px;color:var(--cyan)}
.media{position:relative;border-radius:20px;overflow:hidden;background:linear-gradient(150deg,var(--soft) 0%,#fff 72%);border:1px solid var(--line);aspect-ratio:5/4;display:grid;place-items:center;color:var(--cyan);box-shadow:var(--shadow)}
.media:not(.has-illo) svg{width:74px;height:74px;opacity:.4}
.media img{width:100%;height:100%;object-fit:cover}
.media .cap{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-size:11px;color:var(--muted)}

/* ---------- Numbered steps (4 on one line, 2-up on tablet, stacked on mobile) ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.step .n{font-family:var(--font-display);font-weight:800;font-size:44px;color:var(--cyan-text);line-height:1;letter-spacing:-.03em}
.step h3{font-size:18px;font-weight:600;margin:14px 0 8px}
.step p{color:var(--ink-soft);font-size:14.5px;line-height:1.6}
@media(max-width:1024px){.steps{grid-template-columns:repeat(2,1fr);gap:30px}}

/* ---------- Blog preview ---------- */
.post .tag{display:inline-block;font-family:var(--font-display);font-weight:600;font-size:12px;color:var(--cyan-text);background:var(--soft);padding:4px 13px;border-radius:20px;margin-bottom:14px}

/* ---------- FAQ accordion ---------- */
.faq{max-width:780px;margin-inline:auto}
/* Inside a prose section the accordion must start where its own heading starts. Centring a
   780px block inside the 1040px prose column pushed every question 130px right of the h2
   above it, on every page carrying an inline FAQ. The answer paragraphs keep their own
   46rem reading cap, so nothing gets harder to read. */
.csec-inner .faq{max-width:none;margin-inline:0}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;padding:22px 0;font-family:var(--font-display);font-weight:600;font-size:17px;color:var(--ink);display:flex;justify-content:space-between;gap:18px;align-items:center}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-size:26px;color:var(--cyan);font-weight:300;line-height:1;flex-shrink:0;transition:transform .2s ease}
.faq-item[open] summary::after{content:'−'}
.faq-a{overflow:hidden;transition:height .28s cubic-bezier(.4,0,.2,1)}
.faq-item p{padding:2px 0 22px;color:var(--ink-soft);font-size:16px;line-height:1.7;max-width:46rem;margin:0}
@media(prefers-reduced-motion:reduce) and (scripting:none){.faq-a{transition:none}}

/* ---------- Motion ---------- */
html.anim .card,html.anim .pillar,html.anim .step,html.anim .stat,html.anim .bcard,html.anim .sec-head,html.anim .feature .ft-text,html.anim .feature .media,html.anim .quote,html.anim .csec-inner,html.anim .page-visual,html.anim .trust,html.anim .ind,html.anim .stepcard,html.anim .indcard,html.anim .plan{opacity:0;transform:translateY(24px);transition:opacity .65s cubic-bezier(.22,.61,.36,1),transform .65s cubic-bezier(.22,.61,.36,1)}
html.anim .is-in{opacity:1!important;transform:none!important}

/* floating cyan glow in hero */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:-220px;right:-150px;width:580px;height:580px;background:radial-gradient(circle,rgba(21,119,224,.16),transparent 70%);border-radius:50%;animation:floaty 18s ease-in-out infinite;pointer-events:none;z-index:0}
.hero .container{position:relative;z-index:1}
@keyframes floaty{0%,100%{transform:translate(0,0)}50%{transform:translate(-46px,44px)}}

/* hero card intro + live pulse */
.hero-card{animation:cardin .7s ease both}
@keyframes cardin{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hc-badge.live{animation:livepulse 2.2s ease-out infinite}
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(21,119,224,.5)}70%{box-shadow:0 0 0 9px rgba(21,119,224,0)}100%{box-shadow:0 0 0 0 rgba(21,119,224,0)}}

/* depth glow on dark sections */
.section--ink,.cta-band,.kind-industry .page-head{position:relative;overflow:hidden}
/* dark bands -> same "aurora" family as the home hero: navy base + faint grid + two slow drifting blue glows */
body.t-offer .section--ink,body.t-offer .cta-band,body.t-offer .kind-industry .page-head{background-color:#1862AD;background-image:linear-gradient(rgba(56,181,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(56,181,255,.05) 1px,transparent 1px);background-size:46px 46px}
.section--ink::before,.cta-band::before,.kind-industry .page-head::before{content:"";position:absolute;top:-42%;right:-10%;width:660px;height:660px;border-radius:50%;background:radial-gradient(circle,rgba(21,119,224,.30),transparent 66%);pointer-events:none;animation:bandaura-a 30s ease-in-out infinite}
.section--ink::after,.cta-band::after,.kind-industry .page-head::after{content:"";position:absolute;left:-10%;bottom:-46%;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(56,181,255,.20),transparent 64%);pointer-events:none;animation:bandaura-b 36s ease-in-out infinite}
@keyframes bandaura-a{0%,100%{transform:translate(0,0)}50%{transform:translate(-50px,40px)}}
@keyframes bandaura-b{0%,100%{transform:translate(0,0)}50%{transform:translate(50px,-34px)}}
.section--ink .container,.cta-band .container,.kind-industry .page-head .container{position:relative;z-index:1}

/* card / link micro-interactions */
a.card .more,.btn-ghost{transition:transform .15s,color .15s}
a.card:hover .more{transform:translateX(3px)}
.ind .ico,.card .ico{transition:transform .2s}
a.ind:hover .ico,a.card:hover .ico{transform:scale(1.08)}

@media(prefers-reduced-motion:reduce) and (scripting:none){
  html.anim .card,html.anim .pillar,html.anim .step,html.anim .stat,html.anim .bcard,html.anim .sec-head,html.anim .feature .ft-text,html.anim .feature .media,html.anim .quote,html.anim .csec-inner,html.anim .page-visual,html.anim .trust,html.anim .ind{opacity:1;transform:none;transition:none}
  .hero::before,.hero-card,.hc-badge.live{animation:none}
}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  .hero .container{grid-template-columns:1fr;gap:36px;padding-block:52px}
  .hero-visual{max-width:460px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .ind-grid{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr);gap:32px}
}
@media(max-width:1180px){.nav-phone{display:none}}
@media(max-width:1100px){
  .nav-toggle{display:grid;place-items:center}
  .nav-main{display:none}
  .nav-right .nav-cta,.nav-right .nav-phone{display:none}
  .mobile-menu{display:none;position:fixed;inset:84px 0 0;background:#fff;z-index:90;overflow-y:auto;padding:14px 0 60px;border-top:1px solid var(--line)}
  .mobile-menu.open{display:block}
  .mm-group{border-bottom:1px solid var(--line)}
  .mm-head{display:flex;align-items:center;justify-content:space-between}
  .mm-head>a,.mm-head-link{display:block;flex:1;padding:16px 28px;font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--ink)}
  .mm-toggle{flex-shrink:0;padding:16px 24px;background:none;border:none;color:var(--muted);cursor:pointer;display:grid;place-items:center;align-self:stretch}
  .mm-toggle .chev{width:16px;height:16px;transition:transform .25s}
  .mm-group.open .mm-toggle .chev{transform:rotate(180deg)}
  .mm-sub{overflow:hidden;max-height:0;transition:max-height .3s ease;padding:0 28px}
  .mm-group.open .mm-sub{max-height:1600px;padding-bottom:14px}
  .mm-sub a{display:block;padding:12px 0 12px 14px;font-size:15px;color:var(--ink-soft);border-left:2px solid var(--line)}
  .mm-sub a:hover{color:var(--cyan);border-color:var(--cyan)}
  .mm-sub a.mm-cat{font-family:var(--font-display);font-weight:700;color:var(--ink);margin-top:6px;border-left-color:var(--cyan)}
  .mm-cta{margin:20px 28px;display:flex;flex-direction:column;gap:10px}
  .feature{padding:56px 0}
  .feature .container{grid-template-columns:1fr;gap:34px}
  .feature.reverse .ft-text{order:0}
  .steps{grid-template-columns:1fr;gap:26px}
  .page-head.has-visual .container{grid-template-columns:1fr;gap:28px}
  .page-visual{max-width:520px}
}
@media(min-width:1101px){.mobile-menu{display:none}}
@media(max-width:680px){
  .grid-3,.grid-4{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-contact{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr}
  /* ---- mobile density: cut whitespace, fit more, less scrolling ---- */
  .section{padding:42px 0}
  .csec{padding:30px 0}
  .container{padding-inline:18px}
  .sec-head{margin-bottom:22px}
  .csec-h{margin-bottom:11px}
  .csec-inner h3{margin:17px 0 7px}
  .csec-inner p{margin-bottom:12px}
  .section .lead{font-size:16px}
  .hero .sub{font-size:16px;margin-top:14px}
  .hero-actions{margin-top:20px}
  .grid,.grid-3,.grid-4,.pillars{gap:12px}
  .page-head{padding:30px 0 20px}
  .kind-service .page-head,.kind-industry .page-head,.kind-magnet .page-head,.kind-landing .page-head,.kind-about .page-head{padding:34px 0 26px}
  .kind-blog .page-head{padding:28px 0 16px}
}
@media(max-width:480px){
  .container{padding-inline:15px}
  .section{padding:34px 0}
  .csec{padding:26px 0}
  .ind-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}

/* ---------- SD-WAN failover visualisation ---------- */
.sdwan-sec .lead{color:#c8cdd6}
.sdwan{position:relative;max-width:780px;margin:14px auto 0;height:236px}
.sd-node{position:absolute;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;z-index:2}
.sd-cloud{left:8%}.sd-router{left:50%}.sd-team{left:92%}
.sd-ico{position:absolute;inset:0;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;color:#fff}
.sd-router .sd-ico{background:rgba(21,119,224,.18);border-color:rgba(21,119,224,.55)}
.sd-glow{position:absolute;inset:0;border-radius:18px;box-shadow:0 0 0 0 rgba(21,119,224,.5);animation:nvGlow 2.6s ease-out infinite}
.sd-lbl{position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%);white-space:nowrap;font-family:var(--font-display);font-weight:600;font-size:12.5px;color:#d4d8e0}
.sd-rail{position:absolute;height:9px;border-radius:6px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);overflow:hidden;z-index:1;transform:translateY(-50%)}
.sd-nbn{left:14%;right:54%;top:39%;animation:sdNbnRail 8s linear infinite}
.sd-4g{left:14%;right:54%;top:61%;border-style:dashed;animation:sd4gRail 8s linear infinite}
.sd-lan{left:54%;right:14%;top:50%;border-color:rgba(21,119,224,.4);background:rgba(21,119,224,.07)}
.sd-fill{position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(90deg,rgba(56,181,255,.95) 0 9px,rgba(56,181,255,0) 9px 22px);background-size:22px 100%;animation:sdFlow .9s linear infinite}
.sd-nbn .sd-fill{animation:sdFlow .9s linear infinite,sdNbnFill 8s linear infinite}
.sd-4g .sd-fill{opacity:0;animation:sdFlow .9s linear infinite,sd4gFill 8s linear infinite}
@keyframes sdFlow{to{background-position:22px 0}}
@keyframes sdNbnFill{0%,42%{opacity:1}46%,93%{opacity:0}97%,100%{opacity:1}}
@keyframes sd4gFill{0%,52%{opacity:0}57%,94%{opacity:1}99%,100%{opacity:0}}
@keyframes sdNbnRail{0%,42%{border-color:rgba(21,119,224,.5);background:rgba(21,119,224,.08)}48%,95%{border-color:rgba(255,77,79,.65);background:rgba(255,77,79,.12)}99%,100%{border-color:rgba(21,119,224,.5);background:rgba(21,119,224,.08)}}
@keyframes sd4gRail{0%,52%{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.04)}57%,94%{border-color:rgba(21,119,224,.5);background:rgba(21,119,224,.08)}99%,100%{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.04)}}
.sd-cut{position:absolute;top:39%;left:30%;width:20px;height:20px;transform:translate(-50%,-50%) scale(.4);opacity:0;z-index:3;animation:sdCut 8s linear infinite}
.sd-cut::before,.sd-cut::after{content:"";position:absolute;top:50%;left:0;width:100%;height:3px;background:#ff4d4f;border-radius:2px;box-shadow:0 0 8px rgba(255,77,79,.8)}
.sd-cut::before{transform:translateY(-50%) rotate(45deg)}
.sd-cut::after{transform:translateY(-50%) rotate(-45deg)}
@keyframes sdCut{0%,43%{opacity:0;transform:translate(-50%,-50%) scale(.4)}50%,94%{opacity:1;transform:translate(-50%,-50%) scale(1)}98%,100%{opacity:0;transform:translate(-50%,-50%) scale(.4)}}
.sd-tag{position:absolute;left:30%;transform:translateX(-50%);white-space:nowrap;font-family:var(--font-display);font-weight:600;font-size:11px;z-index:3}
.sd-tag-nbn{top:calc(39% - 25px);color:#cfd9e6}
.sd-tag-4g{top:calc(61% + 13px);color:#9fb0c2;animation:sd4gTag 8s linear infinite}
@keyframes sd4gTag{0%,52%{color:#9fb0c2}57%,94%{color:#cfeefb}99%,100%{color:#9fb0c2}}
.sd-badge{position:absolute;top:calc(100% + 31px);left:50%;transform:translateX(-50%) translateY(4px);white-space:nowrap;font-family:var(--font-display);font-weight:700;font-size:10.5px;color:#062430;background:#5CC9F0;padding:3px 10px;border-radius:999px;opacity:0;box-shadow:0 4px 14px rgba(56,181,255,.4);animation:sdBadge 8s linear infinite;z-index:4}
@keyframes sdBadge{0%,46%{opacity:0;transform:translateX(-50%) translateY(4px)}55%,92%{opacity:1;transform:translateX(-50%) translateY(0)}98%,100%{opacity:0;transform:translateX(-50%) translateY(4px)}}
.sd-state{position:absolute;top:calc(100% + 31px);left:50%;transform:translateX(-50%);white-space:nowrap;font-family:var(--font-display);font-weight:600;font-size:10.5px;color:var(--cyan-text);display:inline-flex;align-items:center;gap:5px}
.sd-state::before{content:"";width:7px;height:7px;border-radius:50%;background:#5CC9F0;box-shadow:0 0 8px rgba(56,181,255,.85);animation:sdPulse 2s ease-in-out infinite}
@keyframes sdPulse{0%,100%{opacity:1}50%{opacity:.4}}
@media(max-width:600px){
  .sdwan{height:212px;max-width:100%}
  .sd-node{width:54px;height:54px}
  .sd-cloud{left:11%}.sd-team{left:89%}
  .sd-ico{border-radius:13px}.sd-glow{border-radius:13px}
  .sd-lbl{font-size:10.5px}
  .sd-nbn,.sd-4g{left:17%;right:56%}.sd-lan{left:56%;right:17%}
  .sd-badge{white-space:normal;max-width:128px;text-align:center;line-height:1.25;font-size:9px}
  .sd-state{font-size:9.5px}
}
@media(prefers-reduced-motion:reduce) and (scripting:none){
  .sd-glow{animation:none}.sd-state::before{animation:none}
  .sd-fill{animation-duration:1.6s}
  .sd-nbn .sd-fill,.sd-4g .sd-fill{animation-duration:1.6s,16s}
  .sd-nbn,.sd-4g,.sd-cut,.sd-tag-4g,.sd-badge{animation-duration:16s}
}

/* ---------- Service status page ---------- */
.status-page .container{max-width:880px}
.st-banner{display:flex;align-items:flex-start;gap:16px;padding:20px 22px;border-radius:16px;border:1px solid var(--line);background:#fff;box-shadow:0 8px 30px rgba(16,24,40,.06)}
.st-banner-ok{border-color:rgba(21,119,224,.35);background:linear-gradient(180deg,rgba(21,119,224,.06),rgba(21,119,224,.02))}
.st-banner-ico{flex-shrink:0;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--cyan);box-shadow:0 6px 16px rgba(21,119,224,.3)}
.st-banner-h{font-family:var(--font-display);font-weight:800;font-size:22px;color:var(--ink);line-height:1.2}
.st-banner-tx p{margin:5px 0 0;color:var(--ink-soft);font-size:14px;line-height:1.55}
.st-legend{display:flex;flex-wrap:wrap;gap:18px;margin:18px 2px 0;font-size:12.5px;color:var(--ink-soft)}
.st-legend span{display:inline-flex;align-items:center;gap:7px}
.st-dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex-shrink:0}
.st-operational{background:var(--cyan)}
.st-degraded{background:#E5A13B}
.st-maintenance{background:#6B7A99}
.st-down{background:#E5484D}
.st-h{font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--ink);margin:34px 0 14px}
.st-list{display:flex;flex-direction:column;gap:14px}
.st-svc{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:#fff}
.st-svc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.st-svc-id h3{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--ink);margin:0;display:inline}
.st-cat{display:inline-block;margin-left:10px;font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.st-pill{flex-shrink:0;display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;font-family:var(--font-display);padding:5px 11px;border-radius:999px;white-space:nowrap}
.st-pill.st-operational{color:#0779a1;background:rgba(21,119,224,.10)}
.st-pill.st-degraded{color:#8a5a10;background:rgba(229,161,59,.16)}
.st-pill.st-maintenance{color:#3f4c66;background:rgba(107,122,153,.16)}
.st-pill.st-down{color:#b42318;background:rgba(229,72,77,.12)}
.st-blurb{margin:9px 0 14px;font-size:13.5px;color:var(--ink-soft);line-height:1.55;max-width:64ch}
.st-bars{display:flex;gap:2px;height:34px}
.st-cell{flex:1;min-width:0;border-radius:2px;background:var(--cyan);opacity:.88}
.st-cell.st-degraded{background:#E5A13B;opacity:1}
.st-cell.st-down{background:#E5484D;opacity:1}
html.anim .st-cell{transform:scaleY(.28);transform-origin:bottom;opacity:0;transition:transform .5s ease,opacity .5s ease}
html.anim .st-svc.is-in .st-cell{transform:scaleY(1);opacity:.88}
html.anim .st-svc.is-in .st-cell.st-degraded,html.anim .st-svc.is-in .st-cell.st-down{opacity:1}
.st-bars-foot{display:flex;justify-content:space-between;margin-top:7px;font-size:11.5px;color:var(--muted)}
.st-up{color:var(--ink);font-weight:600}
.st-incidents{display:flex;flex-direction:column;gap:12px}
.st-inc{border:1px solid var(--line);border-left:3px solid var(--muted);border-radius:12px;padding:14px 16px;background:#fff}
.st-inc-minor{border-left-color:#E5A13B}
.st-inc-major{border-left-color:#E5484D}
.st-inc-maintenance{border-left-color:#6B7A99}
.st-inc-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12px}
.st-sev{font-family:var(--font-display);font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:6px}
.st-sev.st-minor{color:#8a5a10;background:rgba(229,161,59,.18)}
.st-sev.st-major{color:#b42318;background:rgba(229,72,77,.14)}
.st-sev.st-maintenance{color:#3f4c66;background:rgba(107,122,153,.18)}
.st-date{color:var(--ink);font-weight:600}
.st-dur{color:var(--muted)}
.st-inc h3{font-family:var(--font-display);font-weight:700;font-size:15.5px;color:var(--ink);margin:9px 0 6px}
.st-inc p{margin:0 0 11px;font-size:13.5px;color:var(--ink-soft);line-height:1.6}
.st-aff{display:flex;flex-wrap:wrap;gap:7px}
.st-chip{font-size:11.5px;color:var(--ink-soft);background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.st-note{margin-top:24px;font-size:13px;color:var(--ink-soft);text-align:center}
.st-note a{color:var(--cyan);font-weight:600}
@media(max-width:560px){
  .st-svc-top{flex-direction:column;gap:9px}
  .st-cat{display:block;margin:5px 0 0}
  .st-bars{height:30px}
  .st-banner-h{font-size:19px}
  .st-banner{padding:16px 16px}
}

/* ---------- Help desk service-standards band ---------- */
.hd-metrics .lead{color:#c8cdd6}
.hd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:940px;margin:18px auto 0}
.hd-cell{position:relative;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:22px 20px;cursor:help;transition:border-color .15s,background .15s}
.hd-cell:hover,.hd-cell:focus-visible{border-color:rgba(21,119,224,.45);background:rgba(255,255,255,.06);outline:none}
.hd-big{font-family:var(--font-display);font-weight:800;font-size:34px;line-height:1;color:#fff}
.hd-hi .hd-big{color:#5CC9F0}
.hd-lbl{display:flex;align-items:center;gap:6px;margin-top:8px;font-family:var(--font-display);font-weight:600;font-size:14px;color:#e6e9ee;line-height:1.3}
.hd-info{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;color:#7e848f;flex-shrink:0;transition:color .15s}
.hd-cell:hover .hd-info,.hd-cell:focus-within .hd-info{color:#5CC9F0}
.hd-tip{position:absolute;left:14px;right:14px;top:calc(100% + 9px);z-index:20;background:#0b0d11;border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:11px 13px;font-size:12.5px;line-height:1.5;color:#cdd2da;box-shadow:0 16px 38px rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease,visibility .16s;pointer-events:none}
.hd-tip::before{content:"";position:absolute;left:26px;top:-5px;width:9px;height:9px;background:#0b0d11;border-left:1px solid rgba(255,255,255,.18);border-top:1px solid rgba(255,255,255,.18);transform:rotate(45deg)}
.hd-cell:hover .hd-tip,.hd-cell:focus-within .hd-tip{opacity:1;visibility:visible;transform:none}
@media(max-width:760px){.hd-grid{grid-template-columns:1fr 1fr}}
@media(max-width:430px){.hd-grid{grid-template-columns:1fr}.hd-big{font-size:30px}}

/* ---------- Onsite storyboard ---------- */
.onsite-sec .lead{color:#c8cdd6}
.os-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1040px;margin:18px auto 0}
.os-scene{margin:0;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px 12px 16px;text-align:center}
.os-stage{aspect-ratio:220/150;display:block}
.os-svg{width:100%;height:100%;display:block;overflow:visible}
.os-edge{fill:none;stroke:rgba(255,255,255,.34);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.os-fill{fill:rgba(255,255,255,.05)}
.os-screen{fill:rgba(56,181,255,.16);stroke:rgba(255,255,255,.34);stroke-width:1.6}
.os-cyan-f{fill:#5CC9F0}
.os-check{fill:none;stroke:#062430;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.os-led,.os-wallnode,.os-dnode{fill:#5CC9F0}
.os-cable{fill:none;stroke:#5CC9F0;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.os-guide{stroke:rgba(255,255,255,.25);stroke-dasharray:3 4}
.os-title{font-family:var(--font-display);font-weight:700;font-size:14px;color:#fff;margin:10px 0 4px}
.os-cap{font-size:11.5px;color:#aab0b9;line-height:1.45;margin:0}
/* Default (no JS): final/drawn state (the completed scene). With JS (html.io) each scene sits at
   its "start" state, then bounce-loops once it scrolls into view: assemble -> disassemble -> repeat
   (animation-direction: alternate), so every storyboard keeps moving and catches the eye. */
.os-lid{transform-box:fill-box;transform-origin:left bottom;transform:rotate(-78deg)}
.os-tick{transform-box:fill-box;transform-origin:center}
.os-cable{stroke-dasharray:100;stroke-dashoffset:0}
/* DESK */
html.io .os-mon{opacity:0;transform:translateY(30px)}
html.io .os-lid{transform:rotate(0deg)}
html.io .os-t1{opacity:0;transform:scale(.4)}
html.io .os-desk.is-in .os-lid{animation:osLid 3.6s ease-in-out infinite alternate}
html.io .os-desk.is-in .os-mon{animation:osMon 3.6s ease-in-out infinite alternate}
html.io .os-desk.is-in .os-t1{animation:osTick 3.6s ease-in-out infinite alternate}
@keyframes osLid{0%,16%{transform:rotate(0deg)}52%,100%{transform:rotate(-78deg)}}
@keyframes osMon{0%,22%{opacity:0;transform:translateY(30px)}66%,100%{opacity:1;transform:none}}
@keyframes osTick{0%,72%{opacity:0;transform:scale(.4)}92%,100%{opacity:1;transform:scale(1)}}
/* RACK */
html.io .os-server{opacity:0;transform:translateX(78px)}
html.io .os-led{opacity:0}
html.io .os-rack.is-in .os-server{animation:osServer 3.6s ease-in-out infinite alternate}
html.io .os-rack.is-in .os-led{animation:osLed 3.6s ease-in-out infinite alternate}
@keyframes osServer{0%,14%{opacity:0;transform:translateX(78px)}52%,100%{opacity:1;transform:none}}
@keyframes osLed{0%,60%{opacity:0}82%,100%{opacity:1}}
html.io .os-rack.is-in .os-led:nth-of-type(2){animation-delay:.1s}
html.io .os-rack.is-in .os-led:nth-of-type(3){animation-delay:.2s}
html.io .os-rack.is-in .os-led:nth-of-type(4){animation-delay:.3s}
html.io .os-rack.is-in .os-led:nth-of-type(5){animation-delay:.4s}
/* CABLING */
html.io .os-cable{stroke-dashoffset:100}
html.io .os-dnode{opacity:0}
html.io .os-cabling.is-in .os-cable{animation:osCable 3.8s ease-in-out infinite alternate}
html.io .os-cabling.is-in .os-dnode{animation:osDnode 3.8s ease-in-out infinite alternate}
@keyframes osCable{0%{stroke-dashoffset:100}58%,100%{stroke-dashoffset:0}}
@keyframes osDnode{0%,56%{opacity:0}78%,100%{opacity:1}}
html.io .os-cabling.is-in .os-dnodes .os-dnode:nth-of-type(2){animation-delay:.18s}
html.io .os-cabling.is-in .os-dnodes .os-dnode:nth-of-type(3){animation-delay:.36s}
/* MOVE */
html.io .os-old{opacity:1}
html.io .os-new{opacity:0}
html.io .os-mbox{opacity:0}
html.io .os-t4{opacity:0;transform:scale(.4)}
html.io .os-move.is-in .os-old{animation:osOld 4.2s ease-in-out infinite alternate}
html.io .os-move.is-in .os-mbox{animation:osMbox 4.2s ease-in-out infinite alternate}
html.io .os-move.is-in .os-new{animation:osNew 4.2s ease-in-out infinite alternate}
html.io .os-move.is-in .os-t4{animation:osTick 4.2s ease-in-out infinite alternate}
html.io .os-mb2{animation-delay:.18s}
html.io .os-mb3{animation-delay:.36s}
@keyframes osOld{0%,14%{opacity:1}46%,100%{opacity:0}}
@keyframes osMbox{0%,8%{opacity:0;transform:translateX(0)}22%{opacity:1}62%{opacity:1;transform:translateX(126px)}78%,100%{opacity:0;transform:translateX(126px)}}
@keyframes osNew{0%,68%{opacity:0}88%,100%{opacity:1}}
@media(prefers-reduced-motion:reduce) and (scripting:none){
  html.io .os-desk.is-in .os-lid,html.io .os-desk.is-in .os-mon,html.io .os-desk.is-in .os-t1,
  html.io .os-rack.is-in .os-server,html.io .os-rack.is-in .os-led,
  html.io .os-cabling.is-in .os-cable,html.io .os-cabling.is-in .os-dnode,
  html.io .os-move.is-in .os-old,html.io .os-move.is-in .os-mbox,html.io .os-move.is-in .os-new,html.io .os-move.is-in .os-t4{animation-duration:5.6s}
}
@media(max-width:820px){.os-grid{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.os-grid{grid-template-columns:1fr;gap:14px}.os-scene{max-width:300px;margin:0 auto}}

/* ---------- Case studies / client stories ---------- */
.case-studies .container{max-width:920px}
.cs-quote{margin:0 auto 6px;max-width:760px;text-align:center;padding:6px 0 0}
.cs-mark{font-family:var(--font-display);font-weight:800;font-size:60px;line-height:.5;color:var(--cyan);opacity:.22}
.cs-quote blockquote{margin:8px 0 14px;font-family:var(--font-display);font-weight:600;font-size:22px;line-height:1.42;color:var(--ink)}
.cs-quote figcaption{font-size:14px;color:var(--ink-soft)}
.cs-quote figcaption b{color:var(--ink)}
.cs-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:6px 0 30px}
.cs-step{padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.cs-num{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--cyan);color:#fff;font-family:var(--font-display);font-weight:700;font-size:15px;margin-bottom:10px}
.cs-step h3{font-family:var(--font-display);font-weight:700;font-size:16.5px;color:var(--ink);margin:0 0 6px}
.cs-step p{margin:0;font-size:13.5px;color:var(--ink-soft);line-height:1.55}
.cs-outcomes{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.cs-out{display:flex;gap:12px;align-items:flex-start;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--paper-2)}
.cs-out-ico{flex-shrink:0;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:rgba(21,119,224,.12);color:var(--cyan)}
.cs-out h3{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--ink);margin:2px 0 4px}
.cs-out p{margin:0;font-size:13px;color:var(--ink-soft);line-height:1.5}
.cs-note{margin-top:26px;text-align:center;font-size:14px;color:var(--ink-soft)}
.cs-note a{color:var(--cyan);font-weight:600}
@media(max-width:720px){.cs-steps{grid-template-columns:1fr}.cs-outcomes{grid-template-columns:1fr}.cs-quote blockquote{font-size:19px}}

/* ---------- Industry software logo wall ---------- */
.softwall .lead{max-width:660px;margin-left:auto;margin-right:auto}
.sw-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;max-width:1000px;margin:24px auto 0}
.sw-item{position:relative;display:flex;align-items:center;justify-content:center;min-height:84px;padding:14px;background:var(--paper);border:1px solid var(--line);border-radius:14px;text-decoration:none;color:inherit;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
.sw-item:hover,.sw-item:focus-visible{border-color:rgba(21,119,224,.4);box-shadow:0 8px 22px rgba(16,24,40,.06);transform:translateY(-2px);outline:none}
.sw-logo{max-width:100%;max-height:46px;width:auto;height:auto;object-fit:contain;opacity:.92;mix-blend-mode:multiply;transition:opacity .2s}
.sw-item:hover .sw-logo,.sw-item:focus-visible .sw-logo{opacity:1}
.sw-name{font-family:var(--font-display);font-weight:700;font-size:14.5px;color:var(--ink);text-align:center;line-height:1.25}
.sw-item[data-text]{background:linear-gradient(180deg,var(--paper),var(--paper-2))}
/* hover tooltip: what the tool is (the tile links to the vendor) */
.sw-tip{display:none;position:absolute;left:50%;top:calc(100% + 10px);width:max-content;max-width:220px;background:#0b0d11;color:#ccd2da;border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:10px 12px;font-size:12px;line-height:1.45;text-align:left;box-shadow:0 16px 36px rgba(0,0,0,.5);z-index:40;pointer-events:none}
.sw-tip b{display:block;font-family:var(--font-display);font-size:12.5px;color:#fff;margin-bottom:3px}
.sw-tip::before{content:"";position:absolute;left:50%;bottom:100%;transform:translateX(-50%);border:6px solid transparent;border-bottom-color:#0b0d11}
.sw-item:hover .sw-tip,.sw-item:focus-visible .sw-tip{display:block;animation:swTipIn .16s ease both}
@keyframes swTipIn{from{opacity:0;transform:translateX(-50%) translateY(-5px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@media(max-width:900px){.sw-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.sw-item:hover .sw-tip,.sw-item:focus-visible .sw-tip{display:none}}
@media(max-width:480px){.sw-grid{grid-template-columns:repeat(2,1fr);gap:10px}.sw-item{min-height:72px}.sw-name{font-size:13px}}

/* ---------- Client logo showcase ---------- */
.clients .lead{max-width:640px;margin-left:auto;margin-right:auto}
.cl-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;max-width:1240px;margin:26px auto 0}
.cl-item{flex:0 1 208px;display:flex;align-items:center;justify-content:center;min-height:94px;padding:16px 22px;background:#f3f5f8;border:1px solid var(--line);border-radius:14px}
.cl-logo.cl-logo--inv{filter:invert(1)}
.cl-logo{max-width:100%;max-height:42px;width:auto;height:auto;object-fit:contain;transition:transform .2s}
.cl-item:hover .cl-logo{transform:scale(1.05)}
@media(max-width:560px){.cl-item{flex-basis:152px;min-height:82px;padding:13px}.cl-logo{max-height:38px}}
/* ---- Client testimonials (masonry, varying quote lengths) ---- */
.testimonials .testi-grid{column-count:3;column-gap:22px;max-width:1180px;margin:26px auto 0}
@media(max-width:1000px){.testimonials .testi-grid{column-count:2;max-width:820px}}
.tcard{break-inside:avoid;-webkit-column-break-inside:avoid;background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px 28px 22px;margin:0 0 22px;box-shadow:0 1px 2px rgba(22,24,28,.04),0 16px 40px -28px rgba(22,24,28,.28)}
.tcard .tquote-mark{font-family:var(--font-display);font-weight:800;font-size:52px;line-height:.5;color:var(--cyan);opacity:.28;height:22px;margin-bottom:8px}
.tcard .tq{font-style:normal;font-size:15.5px;line-height:1.72;color:var(--ink-soft);margin:0 0 18px;border:0;padding:0;background:none}
.tcard .twho{display:flex;align-items:center;gap:13px}
.tcard .tav{width:44px;height:44px;flex:none;border-radius:50%;background:linear-gradient(145deg,#E6F6FC,#CDE4FB);color:var(--cyan);display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:14.5px;box-shadow:inset 0 0 0 1px rgba(21,119,224,.18)}
.tcard .tmeta{display:flex;flex-direction:column;line-height:1.3}
.tcard .tname{font-family:var(--font-display);font-weight:600;color:var(--ink);font-size:15px}
.tcard .trole{font-size:12.5px;color:var(--muted)}
@media(max-width:760px){.testimonials .testi-grid{column-count:1;max-width:560px}.tcard{padding:22px 22px 20px;margin-bottom:16px}}
/* ---- Seven layers of defence (concentric defence-in-depth visual) ---- */
.dl-wrap{display:grid;grid-template-columns:300px 1fr;gap:36px;align-items:center;max-width:940px;margin:24px auto 4px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 50px -30px rgba(22,24,28,.4);padding:30px 34px}
.dl-diagram{text-align:center}
.dl-svg{width:282px;height:282px;max-width:100%;overflow:visible}
.dl-ring{fill:none;stroke:var(--cyan);stroke-width:2;opacity:calc(.14 + var(--i) * .085)}
.dl-dot circle{fill:#fff;stroke:var(--cyan);stroke-width:1.6}
.dl-dot text{fill:var(--cyan);font-family:var(--font-display);font-weight:700;font-size:11px}
.dl-core{fill:var(--cyan)}
.dl-core-lbl{fill:#fff;font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.01em}
.dl-threat circle{fill:#e0473f}
.dl-block{fill:none;stroke:#e0473f;stroke-width:2.5}
.dl-cap{margin:14px auto 0;font-size:13px;color:var(--muted);font-weight:600;max-width:260px}
.dl-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;counter-reset:none}
.dl-item{display:flex;align-items:flex-start;gap:13px;padding:9px 12px;border-radius:12px;transition:background .15s}
.dl-item:hover{background:var(--paper-2)}
.dl-n{width:25px;height:25px;flex:none;border-radius:50%;background:var(--soft);color:var(--cyan);display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:12.5px}
.dl-ic{color:var(--cyan);flex:none;margin-top:2px}
.dl-mt{display:flex;flex-direction:column}
.dl-nm{font-family:var(--font-display);font-weight:600;color:var(--ink);font-size:15px}
.dl-ds{font-size:13.5px;color:var(--ink-soft);line-height:1.5}
.dl-threat{animation:dlThreat 4.8s cubic-bezier(.45,0,.55,1) infinite}
@keyframes dlThreat{0%{transform:translateY(0);opacity:0}6%{opacity:1}40%{transform:translateY(50px);opacity:1}48%{transform:translateY(47px);opacity:0}100%{transform:translateY(47px);opacity:0}}
.dl-block{animation:dlBlock 4.8s ease-out infinite}
@keyframes dlBlock{0%,36%{r:0;opacity:0}43%{r:3;opacity:.95}70%{r:23;opacity:0}100%{r:23;opacity:0}}
@media(max-width:760px){.dl-wrap{grid-template-columns:1fr;gap:14px;padding:22px 20px}.dl-svg{width:236px;height:236px}.dl-ds{font-size:13px}}

/* ---------- Vulnerability scanner viz ---------- */
.vscan-sec .lead{color:#c8cdd6}
.vscan{display:grid;grid-template-columns:1.25fr 1fr;gap:20px;max-width:980px;margin:16px auto 0;align-items:stretch}
.vs-scan{position:relative;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.03);overflow:hidden;min-height:210px;display:flex;align-items:center}
.vs-scan::before,.vs-scan::after{content:"";position:absolute;top:0;bottom:0;width:46px;z-index:4;pointer-events:none}
.vs-scan::before{left:0;background:linear-gradient(90deg,#10141a,transparent)}
.vs-scan::after{right:0;background:linear-gradient(270deg,#10141a,transparent)}
.vs-track{display:flex;gap:30px;padding:0 30px;animation:vsScroll 16s linear infinite;will-change:transform}
.vs-ep{flex:0 0 auto;width:58px;height:74px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#cfd9e6}
.vs-ep .vs-dot{width:8px;height:8px;border-radius:50%;background:#5CC9F0;box-shadow:0 0 8px rgba(56,181,255,.85)}
.vs-ep.vuln{border-color:rgba(255,77,79,.45)}
.vs-ep.vuln .vs-dot{background:#ff4d4f;box-shadow:0 0 9px rgba(255,77,79,.9);animation:vsBlink 1s ease-in-out infinite}
@keyframes vsScroll{to{transform:translateX(-50%)}}
.vs-beam{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);background:linear-gradient(180deg,transparent,rgba(56,181,255,.9),transparent);z-index:2;animation:vsBeam 1.9s ease-in-out infinite}
@keyframes vsBeam{0%,100%{opacity:.35}50%{opacity:1;box-shadow:0 0 16px 3px rgba(56,181,255,.55)}}
.vs-reticle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:80px;height:80px;border-radius:50%;border:2px solid rgba(56,181,255,.55);z-index:3;animation:vsPulse 1.9s ease-out infinite}
@keyframes vsPulse{0%{box-shadow:0 0 0 0 rgba(56,181,255,.4)}70%{box-shadow:0 0 0 16px rgba(56,181,255,0)}100%{box-shadow:0 0 0 0 rgba(56,181,255,0)}}
.vs-glass{position:absolute;left:calc(50% + 7px);top:calc(50% + 7px);transform:translate(-50%,-50%);z-index:5;color:#fff;filter:drop-shadow(0 0 10px rgba(21,119,224,.5))}
.vs-feed{border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.03);padding:14px 16px;display:flex;flex-direction:column}
.vs-feed-head{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-display);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#aeb4bd;margin-bottom:4px}
.vs-live{display:inline-flex;align-items:center;gap:6px;color:#5CC9F0}
.vs-live>span{width:7px;height:7px;border-radius:50%;background:#5CC9F0;animation:vsBlink 1.2s ease-in-out infinite}
@keyframes vsBlink{0%,100%{opacity:1}50%{opacity:.3}}
.vs-cve{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-top:1px solid rgba(255,255,255,.07)}
.vs-cve-sev{flex-shrink:0;font-family:var(--font-display);font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.03em;padding:2px 7px;border-radius:5px;margin-top:1px}
.vs-cve-sev.crit{color:#ff7a7c;background:rgba(255,77,79,.16)}
.vs-cve-sev.high{color:#ffb454;background:rgba(229,161,59,.16)}
.vs-cve-sev.med{color:#7CCBFF;background:rgba(56,181,255,.13)}
.vs-cve-id{font-family:var(--font-display);font-weight:700;font-size:13px;color:#fff}
.vs-cve-desc{font-size:11.5px;color:#9aa1ab;line-height:1.35;margin-top:1px}
html.io .vs-cve{opacity:0}
html.io .vscan.is-in .vs-cve{animation:vsCveIn .5s ease var(--d) both}
@keyframes vsCveIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce) and (scripting:none){.vs-track{animation-duration:30s}.vs-beam,.vs-reticle{animation-duration:3.4s}}
@media(max-width:680px){.vscan{grid-template-columns:1fr;gap:14px}.vs-scan{min-height:150px}.vs-ep{width:50px;height:64px}}

/* ---------- BI dashboard mock (light) ---------- */
.dashx .lead{max-width:700px}
.dashboard{max-width:1000px;margin:18px auto 0;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 18px 50px -28px rgba(22,24,28,.45);overflow:hidden}
.db-bar{display:flex;align-items:center;gap:12px;padding:11px 16px;background:#f3f5f7;border-bottom:1px solid var(--line);font-size:13px}
.db-dots{display:inline-flex;gap:6px}
.db-dots i{width:10px;height:10px;border-radius:50%;background:#d4d8dd}
.db-dots i:nth-child(1){background:#f0a8a8}.db-dots i:nth-child(2){background:#f0d59a}.db-dots i:nth-child(3){background:#a8d9b0}
.db-name{font-family:var(--font-display);font-weight:600;color:var(--ink)}
.db-live{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.db-live>span{width:8px;height:8px;border-radius:50%;background:#2bbf6b;animation:dbPulse 2s infinite}
@keyframes dbPulse{0%{box-shadow:0 0 0 0 rgba(43,191,107,.45)}70%{box-shadow:0 0 0 7px rgba(43,191,107,0)}100%{box-shadow:0 0 0 0 rgba(43,191,107,0)}}
.db-body{padding:16px;display:grid;gap:14px}
.db-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.db-kpi{background:#f7f8fa;border:1px solid var(--line);border-radius:12px;padding:12px 13px}
.db-kpi-l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;font-weight:600}
.db-kpi-v{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--ink);line-height:1.1;margin:5px 0 3px}
.db-kpi-s{font-size:12px;font-weight:600;display:flex;align-items:center;gap:4px}
.db-kpi-s.good{color:#1f9d57}.db-kpi-s.neutral{color:var(--muted)}.db-kpi-s.bad{color:#d2453f}.db-kpi-s.warn{color:#c4811f}
.db-charts{display:grid;grid-template-columns:1.25fr 1.25fr 1fr;gap:12px}
.db-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 14px}
.db-card-h{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:12px}
.db-bars{display:flex;align-items:flex-end;gap:8px;height:120px}
.db-col{flex:1;background:var(--c,var(--cyan));border-radius:5px 5px 0 0;min-width:6px;height:var(--h)}
.db-col.hot{background:linear-gradient(180deg,var(--cyan),#1B93C6)}
.db-trend{width:100%;height:120px;display:block}
.db-gauge{position:relative;width:130px;height:130px;margin:4px auto 0}
.db-gauge svg{width:130px;height:130px;transform:rotate(-90deg)}
.db-g-bg{fill:none;stroke:#eef0f3;stroke-width:9}
.db-g-fg{fill:none;stroke:var(--cyan);stroke-width:9;stroke-linecap:round;stroke-dasharray:263.9;stroke-dashoffset:15}
.db-g-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:23px;color:var(--ink)}
.db-note{text-align:center;color:var(--muted);font-size:14px;max-width:640px;margin:16px auto 0}
.db-note strong{color:var(--ink)}
html.io .db-kpi{opacity:0;transform:translateY(8px)}
html.io .dashboard.is-in .db-kpi{animation:dkIn .5s ease var(--d) both}
html.io .db-col{height:0;transition:height .9s cubic-bezier(.2,.7,.2,1) var(--d)}
html.io .dashboard.is-in .db-col{height:var(--h)}
html.io .db-stroke{stroke-dasharray:320;stroke-dashoffset:320}
html.io .dashboard.is-in .db-stroke{transition:stroke-dashoffset 1.4s ease .35s;stroke-dashoffset:0}
html.io .db-area{opacity:0}
html.io .dashboard.is-in .db-area{transition:opacity .8s ease .95s;opacity:1}
html.io .db-g-fg{stroke-dashoffset:263.9}
html.io .dashboard.is-in .db-g-fg{transition:stroke-dashoffset 1.3s ease .4s;stroke-dashoffset:15}
/* multi-system: sources legend + colour-coded source pills */
.db-sources{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:9px 16px;border-bottom:1px solid var(--line);background:#fafbfc;font-size:11.5px}
.db-sources-l{color:var(--muted);font-weight:600}
.db-leg{display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.db-leg i{width:9px;height:9px;border-radius:3px}
.db-src{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--c);white-space:nowrap}
.db-src::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c);flex:0 0 auto}
.db-src.sm{font-size:9.5px}
.db-kpi-top{margin-bottom:6px}
/* staff clocked on, by state */
.db-c-staff .db-staff{display:flex;flex-direction:column;gap:10px}
.db-st{display:grid;grid-template-columns:34px 1fr 26px;align-items:center;gap:8px}
.db-st-l{font-size:11px;font-weight:700;color:var(--muted)}
.db-st-bar{height:9px;background:#eef0f3;border-radius:5px;overflow:hidden}
.db-st-bar i{display:block;height:100%;width:var(--w);border-radius:5px}
.db-st-n{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--ink);text-align:right}
.db-staff-tot{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.db-staff-tot strong{color:var(--ink);font-family:var(--font-display)}
/* caller-analytics: team names ("Support", "Reception") need a wider label column than the BI dashboard's VIC/NSW */
.cxanalytics .db-st{grid-template-columns:74px 1fr 28px}
/* ---- Copilot Cowork "agent at work" scene ---- */
.coworkx .cw-accent{color:var(--cyan)}
.cowork .cw-body{padding:16px 18px 20px;display:grid;gap:16px}
.cowork .cw-ask{background:#f3f7fc;border:1px solid var(--line);border-radius:12px;padding:13px 15px;display:grid;gap:3px}
.cowork .cw-ask-l{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--cyan)}
.cowork .cw-ask-q{font-family:var(--font-display);font-weight:600;color:var(--ink);font-size:16px}
.cowork .cw-flow{position:relative;display:grid;gap:9px;padding-left:6px}
.cowork .cw-rail{position:absolute;left:12px;top:14px;bottom:46px;width:2px;background:var(--line)}
.cowork .cw-rail i{position:absolute;inset:0;background:var(--cyan);transform-origin:top;display:block}
.cowork .cw-step{display:grid;grid-template-columns:14px 30px 1fr auto;align-items:center;gap:12px;position:relative}
.cowork .cw-dot{width:13px;height:13px;border-radius:50%;background:#fff;border:2px solid var(--cyan);z-index:1}
.cowork .cw-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--soft);color:var(--cyan)}
.cowork .cw-label{font-size:14.5px;color:var(--ink)}
.cowork .cw-tag{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:#1f9d57;white-space:nowrap}
.cowork .cw-tag svg{width:13px;height:13px}
.cowork .cw-gate{background:#eef5ff;border:1px solid #d4e4fb;border-radius:12px;padding:11px 13px;margin-top:6px}
.cowork .cw-gate .cw-dot{border-color:#5CC9F0;background:#5CC9F0}
.cowork .cw-gate .cw-ic{background:#1862AD;color:#fff}
.cowork .cw-gate .cw-label{font-weight:600}
.cowork .cw-approve{background:#1862AD;color:#fff;font-family:var(--font-display);font-weight:700;font-size:13px;padding:8px 18px;border-radius:100px;white-space:nowrap}
@media(max-width:560px){.cowork .cw-step{grid-template-columns:14px 26px 1fr;gap:9px}.cowork .cw-tag{display:none}.cowork .cw-approve{padding:7px 13px;font-size:12px}}
html.io .cowork .cw-step{opacity:0;transform:translateY(8px)}
html.io .cowork.is-in .cw-step{animation:dkIn .5s ease calc(.25s + var(--i)*.5s) both}
html.io .cowork .cw-rail i{transform:scaleY(0)}
html.io .cowork.is-in .cw-rail i{transition:transform 2.8s ease .3s;transform:scaleY(1)}
html.io .cowork .cw-tag{opacity:0}
html.io .cowork.is-in .cw-tag{animation:cwTag .4s ease calc(.55s + var(--i)*.5s) both}
@keyframes cwTag{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
html.io .cowork.is-in .cw-approve{animation:cwPulse 2.2s ease 3s infinite}
@keyframes cwPulse{0%{box-shadow:0 0 0 0 rgba(56,181,255,.55)}70%{box-shadow:0 0 0 9px rgba(56,181,255,0)}100%{box-shadow:0 0 0 0 rgba(56,181,255,0)}}
@media(prefers-reduced-motion:reduce) and (scripting:none){html.io .cowork.is-in .cw-approve{animation-duration:4.5s}}
/* live cross-system ledger */
.db-live.sm{margin:0;font-size:10.5px}
.db-live.sm>span{width:6px;height:6px}
.db-led-row{display:grid;grid-template-columns:44px 1fr auto auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line);font-size:12.5px}
.db-led-t{color:var(--muted);font-variant-numeric:tabular-nums}
.db-led-d{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-led-a{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
html.io .db-st-bar i{width:0;transition:width .9s cubic-bezier(.2,.7,.2,1) var(--d)}
html.io .dashboard.is-in .db-st-bar i{width:var(--w)}
html.io .db-led-row{opacity:0}
html.io .dashboard.is-in .db-led-row{animation:dkIn .5s ease var(--d) both}
@media(max-width:860px){.db-kpis{grid-template-columns:repeat(3,1fr)}.db-charts{grid-template-columns:1fr}}
@media(max-width:520px){.db-kpis{grid-template-columns:repeat(2,1fr)}.db-kpi-v{font-size:20px}.db-led-row{grid-template-columns:40px 1fr auto;font-size:11.5px}.db-led-row .db-src{display:none}.db-sources{font-size:10.5px;gap:7px 10px}}

/* ---------- Data is the Key ---------- */
.datakey .dk-title{font-size:clamp(30px,5vw,46px)}
.datakey .dk-title span{color:#5CC9F0}
.dk-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:22px}
.dk-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:20px 16px;text-align:left}
.dk-ic{display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;border-radius:11px;background:rgba(56,181,255,.12);color:#5CC9F0;margin-bottom:12px}
.dk-ic svg{width:24px;height:24px}
.dk-card h3{font-size:16px;margin:0 0 7px;color:#fff}
.dk-card p{font-size:13.5px;line-height:1.5;color:#aeb4bd;margin:0}
html.io .dk-card{opacity:0;transform:translateY(12px)}
html.io .datakey.is-in .dk-card{animation:dkIn .55s ease var(--d) both}
@keyframes dkIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:920px){.dk-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.dk-grid{grid-template-columns:1fr}}

/* ---------- Data flow ---------- */
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:10px;max-width:980px;margin:22px auto 0}
.flow-stage{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:22px 18px;text-align:center}
.flow-ic{display:inline-flex;width:54px;height:54px;align-items:center;justify-content:center;border-radius:14px;background:rgba(56,181,255,.12);color:#5CC9F0;margin-bottom:12px}
.flow-ic svg{width:30px;height:30px}
.flow-stage h3{color:#fff;font-size:17px;margin:0 0 7px}
.flow-stage p{color:#aeb4bd;font-size:13px;line-height:1.5;margin:0}
.flow-link{position:relative;display:flex;align-items:center;justify-content:center;width:52px;color:#5CC9F0}
.flow-line{position:absolute;left:0;right:8px;top:50%;height:2px;background:linear-gradient(90deg,rgba(56,181,255,.25),rgba(56,181,255,.6))}
.flow-tip{position:absolute;right:0;width:12px;height:12px}
.flow-dot{position:absolute;left:0;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#5CC9F0;box-shadow:0 0 8px rgba(56,181,255,.8);animation:flowDot 2.2s linear infinite}
.flow-dot.d2{animation-delay:.73s}.flow-dot.d3{animation-delay:1.46s}
@keyframes flowDot{0%{left:2px;opacity:0}12%{opacity:1}85%{opacity:1}100%{left:40px;opacity:0}}
html.io .flow-stage{opacity:0;transform:translateY(12px)}
html.io .flow.is-in .flow-stage{animation:dkIn .55s ease var(--d) both}
@media(max-width:760px){.flow{grid-template-columns:1fr;gap:6px}.flow-link{width:34px;height:34px;margin:0 auto;transform:rotate(90deg)}}
@media(prefers-reduced-motion:reduce) and (scripting:none){.flow-dot{animation-duration:4s}}

/* ---------- Areas we cover (suburb links) ---------- */
.area-grid{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:1100px;margin:18px auto 0}
.area-link{display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font-weight:600;font-size:14px;text-decoration:none;transition:border-color .15s,color .15s,transform .15s,box-shadow .15s}
.area-link:hover{border-color:var(--cyan);color:var(--cyan-hover);transform:translateY(-1px);box-shadow:0 6px 16px -10px rgba(21,119,224,.6)}
/* Related / contextual internal links */
.rl-sec .rl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:6px}
.rl-link{display:flex;align-items:center;gap:12px;padding:15px 17px;background:#fff;border:1px solid var(--line);border-radius:14px;color:var(--ink);font-family:var(--font-display);font-weight:600;font-size:15px;text-decoration:none;transition:border-color .15s,transform .15s,box-shadow .15s}
.rl-link:hover{border-color:var(--cyan);transform:translateY(-2px);box-shadow:0 10px 24px -14px rgba(21,119,224,.7)}
.rl-link .rl-ico{display:inline-flex;color:var(--cyan);flex:none}
.rl-link .rl-ico svg{width:18px;height:18px}
.rl-link .rl-txt{flex:1 1 auto}
.rl-link .rl-arrow{margin-left:auto;color:var(--muted);font-weight:700;transition:transform .15s}
.rl-link:hover .rl-arrow{transform:translateX(3px);color:var(--cyan)}
@media(max-width:860px){.rl-sec .rl-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.rl-sec .rl-grid{grid-template-columns:1fr;gap:10px}}

/* ---------- Penetration test: attack-path animation ---------- */
.ptx .lead{max-width:680px}
.ptpath{position:relative;max-width:880px;margin:26px auto 0}
.pt-track{position:absolute;left:9%;right:9%;top:31px;height:3px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.pt-prog{position:absolute;left:0;top:0;height:100%;width:0;background:linear-gradient(90deg,#E5933B,#ff5a4d);box-shadow:0 0 10px rgba(255,90,77,.7);animation:ptFill 7s ease-in-out infinite}
@keyframes ptFill{0%,7%{width:0}82%{width:100%}100%{width:100%;opacity:.55}}
.pt-nodes{position:relative;display:flex;justify-content:space-between;gap:6px}
.pt-node{display:flex;flex-direction:column;align-items:center;gap:10px;width:18.5%;text-align:center;color:#8b93a1}
.pt-ic{width:64px;height:64px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:2px solid rgba(255,255,255,.14);background:#11151b;color:#9aa1ab;position:relative;z-index:1}
.pt-ic svg{width:28px;height:28px}
.pt-lbl{font-size:12.5px;font-weight:600;line-height:1.25}
html.io .ptpath.is-in .pt-ic{animation:ptHit 7s infinite;animation-delay:calc(var(--i) * 1.25s)}
@keyframes ptHit{0%,5%{border-color:rgba(255,255,255,.14);color:#9aa1ab;background:#11151b;box-shadow:none}11%{border-color:#ff5a4d;color:#fff;background:#2a1414;box-shadow:0 0 0 4px rgba(255,90,77,.16),0 0 18px rgba(255,90,77,.45)}80%{border-color:#ff5a4d;color:#fff;background:#2a1414}88%,100%{border-color:rgba(255,255,255,.14);color:#9aa1ab;background:#11151b;box-shadow:none}}
.pt-node:last-child .pt-lbl{color:#ff8a7c}
.pt-note{text-align:center;color:#aeb4bd;font-size:14px;max-width:620px;margin:20px auto 0}
@media(prefers-reduced-motion:reduce) and (scripting:none){.pt-prog{animation-duration:12s}html.io .ptpath.is-in .pt-ic{animation-duration:12s}}
@media(max-width:640px){.pt-ic{width:50px;height:50px}.pt-ic svg{width:22px;height:22px}.pt-lbl{font-size:10.5px}.pt-track{top:25px;left:7%;right:7%}}

/* ---------- Vulnerability management: continuous cycle ring ---------- */
.vmx .lead{max-width:680px}
.vm-wrap{display:grid;grid-template-columns:320px 1fr;gap:34px;align-items:center;max-width:920px;margin:26px auto 0}
.vm-ring{position:relative;width:300px;height:300px;margin:0 auto;border-radius:50%;border:1px dashed rgba(21,119,224,.4)}
.vm-sweep{position:absolute;inset:-1px;border-radius:50%;background:conic-gradient(from -10deg,rgba(21,119,224,.22),rgba(21,119,224,0) 20%);animation:vmSpin 15s linear infinite}
@keyframes vmSpin{to{transform:rotate(360deg)}}
.vm-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:104px;height:104px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 10px 26px -12px rgba(21,119,224,.55);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:34px;line-height:1;color:var(--cyan);font-weight:700;z-index:2}
.vm-core span{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-top:3px}
.vm-dot{position:absolute;width:38px;height:38px;transform:translate(-50%,-50%);border-radius:50%;background:var(--cyan);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:15px;box-shadow:0 0 0 5px #fff,0 4px 12px -3px rgba(21,119,224,.6);z-index:3}
html.io .vm-wrap.is-in .vm-dot{animation:vmDotHi 15s infinite;animation-delay:calc(var(--i) * 3s)}
@keyframes vmDotHi{0%,20%,100%{box-shadow:0 0 0 5px #fff,0 4px 12px -3px rgba(21,119,224,.55);transform:translate(-50%,-50%) scale(1)}3%,17%{box-shadow:0 0 0 5px #fff,0 0 0 11px rgba(21,119,224,.28),0 6px 20px -2px rgba(21,119,224,.95);transform:translate(-50%,-50%) scale(1.14)}}
.vm-steps{list-style:none;margin:0;padding:0;counter-reset:vm;display:grid;gap:7px}
.vm-steps li{position:relative;padding:9px 12px 9px 47px;border-radius:11px;counter-increment:vm}
.vm-steps li::before{content:counter(vm);position:absolute;left:10px;top:10px;width:28px;height:28px;border-radius:50%;background:rgba(21,119,224,.12);color:var(--cyan-hover);font-family:var(--font-display);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}
.vm-steps h3{font-size:15px;margin:1px 0 3px}
.vm-steps p{font-size:13.5px;color:var(--muted);line-height:1.5;margin:0}
html.io .vm-wrap.is-in .vm-steps li{animation:vmStepHi 15s infinite;animation-delay:calc(var(--i) * 3s)}
@keyframes vmStepHi{0%,20%,100%{background:transparent}3%,17%{background:rgba(21,119,224,.10)}}
html.io .vm-wrap.is-in .vm-steps li::before{animation:vmBadgeHi 15s infinite;animation-delay:calc(var(--i) * 3s)}
@keyframes vmBadgeHi{0%,20%,100%{background:rgba(21,119,224,.12);color:var(--cyan-hover)}3%,17%{background:var(--cyan);color:#fff}}
/* vuln cycle keeps animating under reduced-motion — the guided highlight is the point */
@media(max-width:760px){.vm-wrap{grid-template-columns:1fr;gap:24px}}
@media(max-width:380px){.vm-ring{width:260px;height:260px}}

/* ---------- CCTV / physical security page ---------- */
.cvx .container{max-width:1040px}
.cv-row{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;margin-top:36px}
.cv-row.rev .cv-vis{order:2}
.cv-row.solo{grid-template-columns:1fr;max-width:760px;margin-left:auto;margin-right:auto}
.cv-txt h2{font-size:22px;margin:0 0 10px}
.cv-txt p{color:var(--muted);line-height:1.6;margin:0 0 14px}
.cv-txt ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cv-txt li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.5}
.cv-txt li::before{content:"";position:absolute;left:4px;top:3px;width:6px;height:10px;border:solid var(--cyan);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.cv-stage{position:relative;height:230px;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
html.io .cv-row{opacity:0;transform:translateY(16px)}
html.io .cv-row.is-in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
/* camera: panning dome + sweeping detection cone */
.cv-cam{background:radial-gradient(120% 90% at 50% 0,#1c2734,#0d1217)}
.cam-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(56,181,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(56,181,255,.06) 1px,transparent 1px);background-size:24px 24px}
.cam-head{position:absolute;top:16px;left:50%;transform:translateX(-50%);transform-origin:50% 9px;animation:camPan 6s ease-in-out infinite}
.cam-cone{position:absolute;top:9px;left:50%;width:150px;height:160px;transform:translateX(-50%);background:linear-gradient(180deg,rgba(56,181,255,.34),rgba(56,181,255,0) 78%);clip-path:polygon(50% 0,84% 100%,16% 100%);animation:camCone 6s ease-in-out infinite}
.cam-body{position:relative;display:block;width:58px;margin:0 auto;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
.cam-tag{position:absolute;top:12px;right:13px;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:#ff8a82;letter-spacing:.06em}
.cam-tag span{width:8px;height:8px;border-radius:50%;background:#ff5a4d;animation:recBlink 1.2s infinite}
@keyframes camPan{0%,100%{transform:translateX(-50%) rotate(-24deg)}50%{transform:translateX(-50%) rotate(24deg)}}
@keyframes camCone{0%,100%{opacity:.55}50%{opacity:.95}}
@keyframes recBlink{0%,100%{opacity:1}50%{opacity:.2}}
/* access control: fob taps reader -> light goes green -> doors open */
.cv-acc{background:radial-gradient(120% 120% at 50% 120%,#1c2734,#0d1217);display:flex;align-items:center;justify-content:center}
.acc-door{position:relative;width:122px;height:160px;border-radius:6px;overflow:hidden;background:radial-gradient(circle at 50% 45%,rgba(56,181,255,.28),#0c1116 75%);box-shadow:0 10px 26px -10px rgba(0,0,0,.65)}
.acc-dl,.acc-dr{position:absolute;top:0;width:50%;height:100%;background:linear-gradient(180deg,#33424f,#1a242e);border:1px solid rgba(255,255,255,.08)}
.acc-dl{left:0;animation:accDoorL 5s ease-in-out infinite}
.acc-dr{right:0;animation:accDoorR 5s ease-in-out infinite}
.acc-reader{position:absolute;right:30px;top:50%;transform:translateY(-50%);width:26px;height:44px;border-radius:6px;background:#11181f;border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;z-index:3}
.acc-light{width:11px;height:11px;border-radius:50%;background:#ff5a4d;box-shadow:0 0 8px #ff5a4d;animation:accLight 5s infinite}
.acc-fob{position:absolute;top:50%;right:30px;z-index:4;animation:accFob 5s ease-in-out infinite}
.acc-fob svg{display:block;width:26px;height:26px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.55))}
.acc-msg{position:absolute;bottom:16px;left:50%;font-size:12px;font-weight:700;color:#2ecb6b;background:rgba(46,203,107,.12);border:1px solid rgba(46,203,107,.32);padding:4px 12px;border-radius:999px;opacity:0;animation:accMsg 5s infinite}
@keyframes accFob{0%{transform:translate(70px,-50%);opacity:0}12%{opacity:1}28%,60%{transform:translate(6px,-50%);opacity:1}80%,100%{transform:translate(70px,-50%);opacity:0}}
@keyframes accLight{0%,30%{background:#ff5a4d;box-shadow:0 0 8px #ff5a4d}37%,78%{background:#2ecb6b;box-shadow:0 0 10px #2ecb6b}85%,100%{background:#ff5a4d;box-shadow:0 0 8px #ff5a4d}}
@keyframes accDoorL{0%,38%{transform:translateX(0)}51%,72%{transform:translateX(-101%)}85%,100%{transform:translateX(0)}}
@keyframes accDoorR{0%,38%{transform:translateX(0)}51%,72%{transform:translateX(101%)}85%,100%{transform:translateX(0)}}
@keyframes accMsg{0%,40%{opacity:0;transform:translate(-50%,6px)}50%,72%{opacity:1;transform:translate(-50%,0)}80%,100%{opacity:0;transform:translate(-50%,6px)}}
@media(prefers-reduced-motion:reduce) and (scripting:none){.cam-head,.cam-cone,.cam-tag span,.acc-fob,.acc-light,.acc-dl,.acc-dr,.acc-msg{animation:none}}
@media(max-width:760px){.cv-row,.cv-row.rev{grid-template-columns:1fr}.cv-vis,.cv-row.rev .cv-vis{order:-1}.cv-stage{height:200px}}
/* ---------- CCTV section animations (synchronized, broadcast-grade) ---------- */
.cv-count{background:radial-gradient(125% 120% at 50% -10%,#101a22 0,#0c1117 55%,#0b0f13 100%);display:flex;flex-direction:column;color:#e7edf3;font-family:var(--font-body,'Inter',Arial,sans-serif)}
.pc-scene{position:relative;flex:1;overflow:hidden}
/* faint floor grid + walkway band give the overhead-CCTV feel */
.pc-floor{position:absolute;inset:0;background-image:linear-gradient(rgba(56,181,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(56,181,255,.045) 1px,transparent 1px);background-size:30px 30px;background-position:center;mask-image:radial-gradient(120% 100% at 50% 50%,#000 60%,transparent 100%);-webkit-mask-image:radial-gradient(120% 100% at 50% 50%,#000 60%,transparent 100%)}
.pc-walk{position:absolute;left:0;right:0;top:50%;height:64px;margin-top:-32px;background:linear-gradient(180deg,rgba(56,181,255,.06),rgba(56,181,255,.015) 50%,rgba(56,181,255,.06));border-top:1px solid rgba(56,181,255,.12);border-bottom:1px solid rgba(56,181,255,.12)}
.pc-vignette{position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 50%,transparent 52%,rgba(0,0,0,.5));pointer-events:none}
/* vertical count line down the middle */
.pc-line{position:absolute;left:50%;top:7%;bottom:7%;width:2px;margin-left:-1px;background:repeating-linear-gradient(180deg,rgba(56,181,255,.6) 0 7px,transparent 7px 15px)}
/* glow that pings on each crossing — sits exactly over the line */
.pc-line-glow{position:absolute;left:50%;top:4%;bottom:4%;width:16px;margin-left:-8px;border-radius:8px;background:radial-gradient(50% 50% at 50% 50%,rgba(56,181,255,.95),rgba(56,181,255,0) 70%);opacity:0;will-change:opacity,transform;animation:pcPing 12s ease-out infinite}
/* elegant silhouettes: capsule body + round head, gentle walking bob */
.pc-fig{position:absolute;top:50%;left:-14%;width:15px;height:31px;margin-top:-15px;filter:drop-shadow(0 6px 7px rgba(0,0,0,.5));will-change:left,opacity}
.pc-body{position:absolute;left:0;bottom:0;width:15px;height:23px;border-radius:8px 8px 5px 5px;background:linear-gradient(180deg,#cdeef8,#7cc7e6);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.pc-head{position:absolute;left:50%;top:0;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:linear-gradient(180deg,#e0f3fb,#8fcfe9)}
.pc-fig .pc-body,.pc-fig .pc-head{animation:pcBob 1s ease-in-out infinite}
.pc-fig .pc-head{animation-delay:.08s}
/* leaving figure tinted amber so direction reads at a glance */
.pc-out .pc-body{background:linear-gradient(180deg,#ffe1b3,#ffb454)}
.pc-out .pc-head{background:linear-gradient(180deg,#ffeacb,#ffc06a)}
/* each figure owns its own %-window of the 12s master cycle; left:50% == crossing instant */
.pc-f1{animation:pcEnter 12s linear infinite}
.pc-f2{animation:pcEnter 12s linear infinite;animation-delay:-9.6s}
.pc-f3{animation:pcLeave 12s linear infinite;animation-delay:-7.2s}
.pc-f4{animation:pcEnter 12s linear infinite;animation-delay:-4.8s}
/* tiny direction arrow drifts along the walkway to reinforce flow */
.pc-arrow{position:absolute;top:50%;margin-top:-9px;font-size:13px;line-height:1;color:rgba(56,181,255,.5);text-shadow:0 0 8px rgba(56,181,255,.4);will-change:left,opacity}
.pc-arrow-in{animation:pcDrift 12s linear infinite}
/* dashboard */
.pc-board{display:flex;align-items:center;justify-content:center;gap:16px;padding:10px 14px;border-top:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.36);min-height:50px;box-sizing:border-box}
.pc-readout{display:flex;align-items:baseline;gap:9px}
.pc-counter{height:30px;overflow:hidden;min-width:44px;text-align:right;font-family:var(--font-display,'Sora',Arial,sans-serif);font-weight:700;font-size:26px;line-height:30px;color:#fff;text-shadow:0 0 14px rgba(56,181,255,.4);animation:pcPop 12s ease-out infinite;transform-origin:right center}
/* the reel: 20 21 22 21 20 — snaps one cell at each crossing %, returns to start for a seamless loop */
.pc-reel{display:flex;flex-direction:column;animation:pcReel 12s steps(1) infinite}
.pc-reel span{height:30px;line-height:30px;display:block}
.pc-cap{font-size:12px;color:#9aa1ab;letter-spacing:.2px;white-space:nowrap}
.pc-bar{position:relative;width:78px;height:7px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden;flex:none}
.pc-bar-fill{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:linear-gradient(90deg,var(--cyan),#5CC9F0);box-shadow:0 0 10px rgba(56,181,255,.6);width:50%;animation:pcBar 12s cubic-bezier(.4,0,.2,1) infinite}
.pc-rec{position:absolute;top:9px;right:11px;display:flex;align-items:center;gap:5px;font-size:9px;font-weight:700;letter-spacing:1px;color:#9aa1ab}
.pc-rec i{width:6px;height:6px;border-radius:50%;background:#ff5a4d;box-shadow:0 0 7px rgba(255,90,77,.7);animation:pcRec 12s ease-in-out infinite}
/* ===== one shared master cycle: D = 12s ===== */
/* entering figure: spawns left, crosses center (left:50%) at 18% of D, exits right */
@keyframes pcEnter{0%{left:-14%;opacity:0}5%{opacity:1}18%{left:50%}90%{opacity:1}96%{left:114%;opacity:0}100%{left:114%;opacity:0}}
/* leaving figure: spawns right, crosses center at 58% of D, exits left */
@keyframes pcLeave{0%{left:114%;opacity:0}5%{opacity:1}58%{left:50%}90%{opacity:1}96%{left:-14%;opacity:0}100%{left:-14%;opacity:0}}
/* walking bob runs at D/12 (1s) so it never drifts from the master cycle */
@keyframes pcBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
/* line pings exactly at each crossing %: F1 18, F2 38, F3 58, F4 78 */
@keyframes pcPing{0%,16%{opacity:0;transform:scaleY(.7)}18%{opacity:1;transform:scaleY(1)}26%,36%{opacity:0;transform:scaleY(.7)}38%{opacity:1;transform:scaleY(1)}46%,56%{opacity:0;transform:scaleY(.7)}58%{opacity:1;transform:scaleY(1)}66%,76%{opacity:0;transform:scaleY(.7)}78%{opacity:1;transform:scaleY(1)}86%,100%{opacity:0;transform:scaleY(.7)}}
/* counter snaps one cell at each crossing: 20 ->21(18%) ->22(38%) ->21(58%) ->20(78%); back to start = seamless */
@keyframes pcReel{0%,17.9%{transform:translateY(0)}18%,37.9%{transform:translateY(-30px)}38%,57.9%{transform:translateY(-60px)}58%,77.9%{transform:translateY(-30px)}78%,100%{transform:translateY(0)}}
/* tiny scale pop on the number at each change instant */
@keyframes pcPop{0%,17%{transform:scale(1)}18%{transform:scale(1.18)}27%,37%{transform:scale(1)}38%{transform:scale(1.18)}47%,57%{transform:scale(1)}58%{transform:scale(1.18)}67%,77%{transform:scale(1)}78%{transform:scale(1.18)}87%,100%{transform:scale(1)}}
/* live bar nudges with the count: 50%->58(18) ->66(38) ->58(58) ->50(78), back to 50 */
@keyframes pcBar{0%,17.9%{width:50%}18%,37.9%{width:58%}38%,57.9%{width:66%}58%,77.9%{width:58%}78%,100%{width:50%}}
@keyframes pcRec{0%,100%{opacity:1}50%{opacity:.25}}
/* arrow drifts left-to-right continuously, looping seamlessly */
@keyframes pcDrift{0%{left:-8%;opacity:0}10%{opacity:.6}90%{opacity:.6}100%{left:108%;opacity:0}}
@media(max-width:560px){.pc-scene{min-height:0}.pc-walk{height:54px;margin-top:-27px}.pc-fig{width:13px;height:27px;margin-top:-13px}.pc-body{width:13px;height:20px}.pc-head{width:9.5px;height:9.5px;margin-left:-4.75px}.pc-board{gap:11px;padding:8px 10px;min-height:46px}.pc-counter{font-size:22px;min-width:38px}.pc-cap{font-size:11px}.pc-bar{width:58px}.pc-arrow{font-size:11px}}
@media(max-width:360px){.pc-board{gap:8px;padding:8px}.pc-counter{font-size:20px}.pc-cap{font-size:10px}.pc-bar{width:46px}.pc-rec{font-size:8px;top:7px;right:8px}}

.cv-loiter{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 50% -10%,#13202b 0%,#101820 42%,#0c1016 72%,#0b0f13 100%);
  font-family:Inter,Arial,sans-serif;overflow:hidden;
  color:#e7edf3;
}

/* ---- floor grid (recedes into the dark) ---- */
.cv-loiter .lo-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(56,181,255,.065) 1px,transparent 1px),
    linear-gradient(90deg,rgba(56,181,255,.065) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.30) 0%,#000 42%);
          mask-image:linear-gradient(180deg,rgba(0,0,0,.30) 0%,#000 42%);
}
.cv-loiter .lo-vignette{
  position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 80px rgba(0,0,0,.66),inset 0 0 22px rgba(0,0,0,.4);
}

/* ---- camera scan-line sweep (one pass per master cycle, % based so it never overflows) ---- */
.cv-loiter .lo-scan{
  position:absolute;left:0;right:0;top:0;height:34%;
  background:linear-gradient(180deg,transparent,rgba(56,181,255,.10) 55%,rgba(56,181,255,.04) 100%);
  animation:loScan 12s linear infinite;
}
@keyframes loScan{
  0%{transform:translateY(-100%)}
  100%{transform:translateY(295%)}
}

/* ---- HUD chrome ---- */
.cv-loiter .lo-hud{
  position:absolute;top:11px;font-size:10px;font-weight:600;
  letter-spacing:.10em;color:#9aa1ab;text-shadow:0 1px 3px rgba(0,0,0,.6);
}
.cv-loiter .lo-hud-tl{left:13px}
.cv-loiter .lo-hud-tr{right:13px;display:inline-flex;align-items:center;gap:6px;color:#ff8a82}
.cv-loiter .lo-rec{
  width:7px;height:7px;border-radius:50%;background:#ff5a4d;
  box-shadow:0 0 8px rgba(255,90,77,.85);
  animation:loBlink 1.5s steps(1) infinite;
}
@keyframes loBlink{0%,50%{opacity:1}51%,100%{opacity:.25}}

/* ---- watch zone (dashed rectangle) ---- */
.cv-loiter .lo-zone{
  position:absolute;left:50%;top:50%;
  width:min(148px,46%);height:min(118px,58%);
  transform:translate(-50%,-50%);
  border:2px dashed #5CC9F0;border-radius:11px;
  box-shadow:0 0 0 1px rgba(56,181,255,.10) inset,0 0 18px rgba(56,181,255,.12);
  background:rgba(56,181,255,.04);
  animation:loZone 12s linear infinite;
}
.cv-loiter .lo-zone-label{
  position:absolute;top:-9px;left:10px;padding:0 6px;
  font-size:9px;font-weight:700;letter-spacing:.14em;
  color:#5CC9F0;background:#0c1016;white-space:nowrap;
  animation:loZoneLabel 12s linear infinite;
}
/* cyan all cycle, snaps RED at ring-complete (75%), eases back to cyan by 96% */
@keyframes loZone{
  0%,74.9%{border-color:#5CC9F0;background:rgba(56,181,255,.04);
    box-shadow:0 0 0 1px rgba(56,181,255,.10) inset,0 0 18px rgba(56,181,255,.12)}
  75%{border-color:#ff5a4d;background:rgba(255,90,77,.13);
    box-shadow:0 0 0 1px rgba(255,90,77,.22) inset,0 0 30px rgba(255,90,77,.38)}
  93%{border-color:#ff5a4d;background:rgba(255,90,77,.10);
    box-shadow:0 0 0 1px rgba(255,90,77,.18) inset,0 0 24px rgba(255,90,77,.28)}
  96%,100%{border-color:#5CC9F0;background:rgba(56,181,255,.04);
    box-shadow:0 0 0 1px rgba(56,181,255,.10) inset,0 0 18px rgba(56,181,255,.12)}
}
@keyframes loZoneLabel{
  0%,74.9%{color:#5CC9F0}
  75%,93%{color:#ff5a4d}
  96%,100%{color:#5CC9F0}
}

/* ---- pass-through people (NO ring, walk straight across) ---- */
.cv-loiter .lo-person{
  position:absolute;width:18px;height:36px;
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.55));
}
.cv-loiter .lo-svg{width:100%;height:100%;display:block}
.cv-loiter .lo-person .lo-svg circle,
.cv-loiter .lo-person .lo-svg rect{fill:#7CCBFF}

/* three passers, each in its own %-window, all on the 12s master cycle */
.cv-loiter .lo-p1{top:36%;animation:loWalkR 12s linear infinite}
.cv-loiter .lo-p2{top:60%;animation:loWalkL 12s linear infinite}
.cv-loiter .lo-p3{top:28%;animation:loWalkR3 12s linear infinite}

/* p1 crosses left->right, on-stage 4%-26% */
@keyframes loWalkR{
  0%,4%{left:-12%;opacity:0}
  6%{opacity:1}
  24%{opacity:1}
  26%,100%{left:114%;opacity:0}
}
/* p2 crosses right->left, on-stage 30%-52% */
@keyframes loWalkL{
  0%,30%{left:114%;opacity:0}
  32%{opacity:1}
  50%{opacity:1}
  52%,100%{left:-12%;opacity:0}
}
/* p3 crosses left->right on its own slightly later window 10%-34% (crowd traffic) */
@keyframes loWalkR3{
  0%,10%{left:-12%;opacity:0}
  12%{opacity:1}
  32%{opacity:1}
  34%,100%{left:114%;opacity:0}
}

/* ---- the LOITERER: walks in, STOPS in zone, ring fills, then leaves ---- */
.cv-loiter .lo-loiterer{
  position:absolute;top:calc(50% - 11px);left:50%;
  width:18px;height:36px;margin-left:-9px;
  animation:loLoiterMove 12s cubic-bezier(.45,0,.2,1) infinite;
}
.cv-loiter .lo-figure{
  position:absolute;inset:0;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.6));
  animation:loFigColour 12s linear infinite;
}
.cv-loiter .lo-figure .lo-svg circle,
.cv-loiter .lo-figure .lo-svg rect{fill:#ffd9a0}

/* enters 54%->62% (arrives at zone centre), HELD STILL 62%->77%, exits 77%->90%, hidden 91%->54% */
@keyframes loLoiterMove{
  0%,54%{left:122%;opacity:0}
  56%{opacity:1}
  62%{left:50%;opacity:1}
  77%{left:50%;opacity:1}
  88%{opacity:1}
  90%{left:-22%;opacity:0}
  100%{left:-22%;opacity:0}
}
/* loiterer gains red glow exactly when ring completes (75%), fades with the alert */
@keyframes loFigColour{
  0%,74.9%{filter:drop-shadow(0 4px 6px rgba(0,0,0,.6))}
  75%,88%{filter:drop-shadow(0 4px 6px rgba(0,0,0,.6)) drop-shadow(0 0 9px rgba(255,90,77,.75))}
  90%,100%{filter:drop-shadow(0 4px 6px rgba(0,0,0,.6))}
}

/* ---- countdown ring: fills ONLY while loiterer is stationary (62%->75%) ---- */
.cv-loiter .lo-ring{
  position:absolute;left:50%;top:50%;
  width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;
  -webkit-mask:radial-gradient(circle,transparent 18px,#000 19px);
          mask:radial-gradient(circle,transparent 18px,#000 19px);
  animation:loRingFill 12s linear infinite,loRingShow 12s ease-out infinite;
}
/* visible only across the stationary window; hidden (scaled down) otherwise */
@keyframes loRingShow{
  0%,61.9%{opacity:0;transform:scale(.55)}
  62%{opacity:1;transform:scale(1)}
  76%{opacity:1;transform:scale(1)}
  79%,100%{opacity:0;transform:scale(.7)}
}
/* conic sweep 0->360deg across 62%->75% (countdown), snap red at completion */
@keyframes loRingFill{
  0%,62%{
    background:conic-gradient(#5CC9F0 0deg,rgba(56,181,255,.12) 0deg);
    box-shadow:0 0 0 rgba(56,181,255,0);
  }
  68%{
    background:conic-gradient(#5CC9F0 170deg,rgba(56,181,255,.12) 170deg);
    box-shadow:0 0 12px rgba(56,181,255,.30);
  }
  74.9%{
    background:conic-gradient(#5CC9F0 358deg,rgba(56,181,255,.12) 358deg);
    box-shadow:0 0 16px rgba(56,181,255,.50);
  }
  75%{
    background:conic-gradient(#ff5a4d 360deg,rgba(255,90,77,.20) 360deg);
    box-shadow:0 0 24px rgba(255,90,77,.68);
  }
  76%,100%{
    background:conic-gradient(#ff5a4d 360deg,rgba(255,90,77,.20) 360deg);
    box-shadow:0 0 22px rgba(255,90,77,.55);
  }
}

/* ---- alert badge: appears the instant the ring completes (75%) ---- */
.cv-loiter .lo-badge{
  position:absolute;left:50%;bottom:15px;transform:translate(-50%,12px);
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  max-width:92%;box-sizing:border-box;
  padding:7px 13px;border-radius:999px;
  font-size:clamp(9px,3vw,11px);font-weight:700;letter-spacing:.01em;color:#ffe2de;
  background:linear-gradient(180deg,rgba(255,90,77,.18),rgba(255,90,77,.12));
  border:1px solid rgba(255,90,77,.55);
  box-shadow:0 8px 20px rgba(255,90,77,.26),0 0 0 1px rgba(255,90,77,.10) inset;
  opacity:0;animation:loBadge 12s cubic-bezier(.22,1,.36,1) infinite;
}
.cv-loiter .lo-badge-dot{
  flex:none;width:8px;height:8px;border-radius:50%;background:#ff5a4d;
  box-shadow:0 0 9px rgba(255,90,77,.9);
}
@keyframes loBadge{
  0%,74.9%{opacity:0;transform:translate(-50%,12px)}
  75%{opacity:1;transform:translate(-50%,0)}
  92%{opacity:1;transform:translate(-50%,0)}
  96%,100%{opacity:0;transform:translate(-50%,12px)}
}

/* ---- responsive: nothing overflows on small stages (single keyframe set, no nested @keyframes) ---- */
@media(max-width:760px){
  .cv-loiter .lo-zone-label{font-size:8px;letter-spacing:.12em}
  .cv-loiter .lo-ring{width:46px;height:46px;margin:-23px 0 0 -23px;
    -webkit-mask:radial-gradient(circle,transparent 15px,#000 16px);
            mask:radial-gradient(circle,transparent 15px,#000 16px)}
  .cv-loiter .lo-person,.cv-loiter .lo-loiterer{width:15px;height:30px}
  .cv-loiter .lo-loiterer{margin-left:-7.5px;top:calc(50% - 9px)}
  .cv-loiter .lo-badge{font-size:9px;padding:6px 10px;bottom:12px}
  .cv-loiter .lo-hud{font-size:9px}
}

.cv-alpr{display:flex;overflow:hidden;background:radial-gradient(135% 120% at 28% -15%,#16212c 0%,#0d141b 48%,#0b0f13 100%);font-family:Inter,Arial,sans-serif}
.cv-alpr .lp-road{position:relative;flex:1 1 auto;min-width:0;overflow:hidden}
.cv-alpr .lp-road::before{content:"";position:absolute;left:0;right:0;top:50%;height:62px;transform:translateY(-50%);background:linear-gradient(180deg,#141c25 0%,#0c1218 55%,#080c10 100%);border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(0,0,0,.55);box-shadow:inset 0 12px 22px -14px rgba(0,0,0,.9)}
.cv-alpr .lp-lane{position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;border-radius:2px;background:repeating-linear-gradient(90deg,rgba(231,237,243,.42) 0 20px,transparent 20px 44px);opacity:.85;animation:lpDash 1.6s linear infinite;z-index:1}
@keyframes lpDash{to{background-position:-64px 0}}
.cv-alpr .lp-gantry{position:absolute;left:60%;top:0;bottom:0;width:2px;transform:translateX(-50%);background:linear-gradient(180deg,rgba(56,181,255,.34) 0%,rgba(56,181,255,.06) 60%,transparent 100%);z-index:2}
.cv-alpr .lp-cam{position:absolute;left:60%;top:6px;transform:translateX(-50%);z-index:6;display:flex;flex-direction:column;align-items:center}
.cv-alpr .lp-housing{position:relative;width:32px;height:16px;border-radius:5px 5px 3px 3px;background:linear-gradient(180deg,#dfe6ee 0%,#aeb9c4 55%,#8b97a3 100%);box-shadow:0 4px 9px -2px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.75),inset 0 -2px 3px rgba(0,0,0,.25)}
.cv-alpr .lp-housing::after{content:"";position:absolute;left:50%;top:4px;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:#5CC9F0;box-shadow:0 0 6px #5CC9F0,0 0 2px #fff;animation:lpLed 16s linear infinite}
.cv-alpr .lp-lens{width:12px;height:7px;margin-top:-1px;border-radius:0 0 6px 6px;background:radial-gradient(60% 120% at 50% 0%,#1a2730 0%,#06090c 70%);box-shadow:inset 0 0 0 1px rgba(56,181,255,.55),0 2px 4px rgba(0,0,0,.5);position:relative;z-index:1}
.cv-alpr .lp-lens::after{content:"";position:absolute;left:50%;top:1px;transform:translateX(-50%);width:4px;height:3px;border-radius:50%;background:rgba(56,181,255,.85);box-shadow:0 0 6px #5CC9F0;animation:lpLed 16s linear infinite}
.cv-alpr .lp-arm{width:4px;height:7px;margin-top:-1px;background:linear-gradient(180deg,#aeb9c4,#5d6873);border-radius:0 0 2px 2px}
.cv-alpr .lp-scan{position:absolute;left:60%;top:calc(50% - 30px);width:30px;height:60px;transform:translateX(-50%) scaleY(.05);transform-origin:50% 0%;background:linear-gradient(180deg,rgba(56,181,255,.6) 0%,rgba(56,181,255,.12) 55%,rgba(56,181,255,0) 100%);border-bottom:2px solid rgba(56,181,255,.95);box-shadow:0 0 16px rgba(56,181,255,.55),inset 0 0 8px rgba(56,181,255,.3);opacity:0;z-index:4;pointer-events:none;animation:lpScan 16s linear infinite}
@keyframes lpScan{0%,7.6%{opacity:0;transform:translateX(-50%) scaleY(.05)}9.4%{opacity:.95;transform:translateX(-50%) scaleY(1)}11.6%{opacity:0;transform:translateX(-50%) scaleY(1)}11.61%,25.6%{opacity:0;transform:translateX(-50%) scaleY(.05)}27.4%{opacity:.95;transform:translateX(-50%) scaleY(1)}29.6%{opacity:0;transform:translateX(-50%) scaleY(1)}29.61%,43.6%{opacity:0;transform:translateX(-50%) scaleY(.05)}45.4%{opacity:.95;transform:translateX(-50%) scaleY(1)}47.6%{opacity:0;transform:translateX(-50%) scaleY(1)}47.61%,61.6%{opacity:0;transform:translateX(-50%) scaleY(.05)}63.4%{opacity:.95;transform:translateX(-50%) scaleY(1)}65.6%{opacity:0;transform:translateX(-50%) scaleY(1)}65.61%,79.6%{opacity:0;transform:translateX(-50%) scaleY(.05)}81.4%{opacity:.95;transform:translateX(-50%) scaleY(1)}83.6%{opacity:0;transform:translateX(-50%) scaleY(1)}83.61%,100%{opacity:0;transform:translateX(-50%) scaleY(.05)}}
@keyframes lpLed{0%,48%{opacity:.4}50%,100%{opacity:1}}
.cv-alpr .lp-car{position:absolute;top:50%;width:54px;height:25px;margin-top:-12px;transform:translateX(-50%);z-index:3;opacity:0;will-change:left;--c1:#3a4b5c;--c2:#222d38}
.cv-alpr .lp-body{position:absolute;inset:0;border-radius:8px 11px 6px 6px;background:linear-gradient(180deg,var(--c1) 0%,var(--c2) 100%);box-shadow:0 6px 10px -3px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.16),inset 0 -3px 5px rgba(0,0,0,.3)}
.cv-alpr .lp-body::before{content:"";position:absolute;left:10px;right:16px;top:3px;height:8px;border-radius:5px 6px 3px 3px;background:linear-gradient(180deg,rgba(178,216,234,.55),rgba(120,160,185,.22));border:1px solid rgba(255,255,255,.14)}
.cv-alpr .lp-body::after{content:"";position:absolute;right:2px;top:9px;width:5px;height:6px;border-radius:2px;background:rgba(255,224,140,.9);box-shadow:0 0 7px rgba(255,196,86,.8)}
.cv-alpr .lp-plate{position:absolute;left:50%;transform:translateX(-50%);bottom:1px;height:12px;min-width:34px;padding:0 3px;border-radius:2px;background:linear-gradient(180deg,#f6f8f3,#dde1d8);color:#14171b;font-family:'Courier New',ui-monospace,monospace;font-weight:700;font-size:8px;line-height:12px;letter-spacing:.4px;text-align:center;white-space:nowrap;box-shadow:0 0 0 1px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.45);z-index:2}
.cv-alpr .lp-car i{position:absolute;bottom:-3px;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#4a4f56 38%,#15181c 56%);box-shadow:0 1px 2px rgba(0,0,0,.65)}
.cv-alpr .lp-car i.lp-w1{left:8px}.cv-alpr .lp-car i.lp-w2{right:10px}
.cv-alpr .lp-c1{animation:lpDrive 16s linear infinite}
.cv-alpr .lp-c2{animation:lpDrive 16s linear infinite;animation-delay:2.88s}
.cv-alpr .lp-c3{animation:lpDrive 16s linear infinite;animation-delay:5.76s}
.cv-alpr .lp-c4{animation:lpDrive 16s linear infinite;animation-delay:8.64s}
.cv-alpr .lp-c5{animation:lpDrive 16s linear infinite;animation-delay:11.52s}
@keyframes lpDrive{0%{left:-18%;opacity:0}1.2%{opacity:1}16.8%{opacity:1}18%{left:131.4%;opacity:1}18.01%,100%{left:131.4%;opacity:0}}
.cv-alpr .lp-list{position:relative;width:124px;flex:0 0 124px;border-left:1px solid rgba(255,255,255,.09);padding:9px 8px;background:linear-gradient(180deg,rgba(6,10,14,.5),rgba(6,10,14,.32));display:flex;flex-direction:column;box-shadow:inset 1px 0 0 rgba(255,255,255,.03)}
.cv-alpr .lp-head{display:flex;align-items:center;gap:6px;font-family:var(--font-display,'Sora',Arial,sans-serif);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9aa1ab;padding:0 1px 7px;border-bottom:1px solid rgba(255,255,255,.09);margin-bottom:8px}
.cv-alpr .lp-head b{flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:#2ecb6b;box-shadow:0 0 7px #2ecb6b;animation:lpLive 2s ease-in-out infinite}
@keyframes lpLive{0%,100%{opacity:1;box-shadow:0 0 7px #2ecb6b}50%{opacity:.35;box-shadow:0 0 3px #2ecb6b}}
.cv-alpr .lp-rows{position:relative;flex:1 1 auto;min-height:0}
.cv-alpr .lp-row{position:absolute;left:0;right:0;top:0;height:23px;display:flex;align-items:center;justify-content:space-between;gap:4px;padding:0 7px;border-radius:6px;background:linear-gradient(180deg,rgba(56,181,255,.14),rgba(56,181,255,.07));border:1px solid rgba(56,181,255,.3);box-shadow:0 1px 3px rgba(0,0,0,.3);opacity:0;will-change:transform,opacity}
.cv-alpr .lp-pl{font-family:'Courier New',ui-monospace,monospace;font-weight:700;font-size:11px;letter-spacing:.6px;color:#e3f7fd;text-shadow:0 0 6px rgba(56,181,255,.3)}
.cv-alpr .lp-ts{font-family:var(--font-display,'Sora',Arial,sans-serif);font-size:8px;font-weight:600;color:#8b929c;letter-spacing:.02em}
.cv-alpr .lp-row.lp-hit{background:linear-gradient(180deg,rgba(255,90,77,.2),rgba(255,90,77,.1));border-color:rgba(255,90,77,.5)}
.cv-alpr .lp-row.lp-hit .lp-pl{color:#ffb9b1;text-shadow:0 0 7px rgba(255,90,77,.45)}
.cv-alpr .lp-row.lp-hit .lp-ts{color:#d79a93}
.cv-alpr .lp-dot{position:absolute;left:-2px;top:-2px;width:8px;height:8px;border-radius:50%;background:#ff5a4d;box-shadow:0 0 8px #ff5a4d,0 0 2px #fff;opacity:0}
.cv-alpr .lp-row.lp-hit .lp-dot{opacity:1;animation:lpDot 1.2s ease-in-out infinite}
@keyframes lpDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.78)}}
.cv-alpr .lp-r1{animation:lpR1 16s linear infinite}
.cv-alpr .lp-r2{animation:lpR2 16s linear infinite}
.cv-alpr .lp-r3{animation:lpR3 16s linear infinite}
.cv-alpr .lp-r4{animation:lpR4 16s linear infinite}
.cv-alpr .lp-r5{animation:lpR5 16s linear infinite}
@keyframes lpR1{0%,8.4%{opacity:0;transform:translateY(0) translateX(14px) scale(.96)}9.4%{opacity:1;transform:translateY(0) translateX(0) scale(1)}11.4%{opacity:1;transform:translateY(0)}25.4%{transform:translateY(0)}27.4%{transform:translateY(27px)}45.4%{transform:translateY(54px)}63.4%{transform:translateY(81px)}81.4%{transform:translateY(108px)}95.5%{opacity:1;transform:translateY(108px)}98%,100%{opacity:0;transform:translateY(108px)}}
@keyframes lpR2{0%,26.4%{opacity:0;transform:translateY(0) translateX(14px) scale(.96)}27.4%{opacity:1;transform:translateY(0) translateX(0) scale(1)}45.4%{transform:translateY(27px)}63.4%{transform:translateY(54px)}81.4%{transform:translateY(81px)}95.5%{opacity:1;transform:translateY(81px)}98%,100%{opacity:0;transform:translateY(81px)}}
@keyframes lpR3{0%,44.4%{opacity:0;transform:translateY(0) translateX(14px) scale(.96)}45.4%{opacity:1;transform:translateY(0) translateX(0) scale(1)}63.4%{transform:translateY(27px)}81.4%{transform:translateY(54px)}95.5%{opacity:1;transform:translateY(54px)}98%,100%{opacity:0;transform:translateY(54px)}}
@keyframes lpR4{0%,62.4%{opacity:0;transform:translateY(0) translateX(14px) scale(.96)}63.4%{opacity:1;transform:translateY(0) translateX(0) scale(1)}81.4%{transform:translateY(27px)}95.5%{opacity:1;transform:translateY(27px)}98%,100%{opacity:0;transform:translateY(27px)}}
@keyframes lpR5{0%,80.4%{opacity:0;transform:translateY(0) translateX(14px) scale(.96)}81.4%{opacity:1;transform:translateY(0) translateX(0) scale(1)}95.5%{opacity:1;transform:translateY(0)}98%,100%{opacity:0;transform:translateY(0)}}
@media(max-width:760px){.cv-alpr .lp-list{width:106px;flex:0 0 106px;padding:8px 7px}.cv-alpr .lp-car{width:48px}.cv-alpr .lp-pl{font-size:10px;letter-spacing:.4px}.cv-alpr .lp-ts{font-size:7.5px}.cv-alpr .lp-row{height:22px;padding:0 6px}.cv-alpr .lp-plate{min-width:30px;font-size:7.5px}}

/* ===== INTEGRATED SYSTEMS — master cycle D = 12s ===== */
.cv-int{position:absolute;inset:0;background:radial-gradient(130% 120% at 18% 12%,#101820 0,#0b0f13 55%,#0c1016 100%);font-family:Inter,Arial,sans-serif;color:#e7edf3;overflow:hidden}
.cv-int .in-bg{position:absolute;inset:0;background:radial-gradient(55% 60% at 76% 22%,rgba(56,181,255,.10),transparent 70%)}
.cv-int .in-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(56,181,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(56,181,255,.045) 1px,transparent 1px);background-size:26px 26px;-webkit-mask-image:radial-gradient(120% 120% at 50% 50%,#000 52%,transparent 100%);mask-image:radial-gradient(120% 120% at 50% 50%,#000 52%,transparent 100%)}

/* wires */
.cv-int .in-wires{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.cv-int .in-wire{fill:none;stroke:url(#inWireG);stroke-width:2;stroke-linecap:round}
.cv-int .in-wire-amb{stroke:url(#inWireA)}

/* shared node frame */
.cv-int .in-node{position:absolute;z-index:3;display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 7px 7px;width:62px;border-radius:13px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012));border:1px solid rgba(255,255,255,.09);box-shadow:0 8px 22px -12px rgba(0,0,0,.85);will-change:transform,box-shadow}
.cv-int .in-ico{width:24px;height:24px;color:#9aa1ab}
.cv-int .in-lbl{font-size:10px;font-weight:700;letter-spacing:.05em;color:#9aa1ab;white-space:nowrap}
.cv-int .in-dot{position:absolute;top:7px;right:7px;width:6px;height:6px;border-radius:50%;background:#9aa1ab}

/* node positions (top-left % of stage; centres feed the wire/pulse coords) */
.cv-int .in-alarm{left:5%;top:14%}
.cv-int .in-door {left:5%;top:54%}
.cv-int .in-hub  {left:42%;top:35%;width:70px}
.cv-int .in-cam  {left:66%;top:9%}

/* ===== ALARM — ambient armed pulse ===== */
.cv-int .in-alarm .in-dot{background:#2ecb6b;animation:inArmed 12s ease-in-out infinite}
.cv-int .in-alarm .in-ico{animation:inAlarmAmb 12s ease-in-out infinite}

/* ===== DOOR — forced/denied red flash @12% ===== */
.cv-int .in-door{animation:inDoorBox 12s cubic-bezier(.4,0,.2,1) infinite}
.cv-int .in-door .in-ico{animation:inDoorIco 12s ease-in-out infinite}
.cv-int .in-door .in-dot{animation:inDoorDot 12s ease-in-out infinite}
.cv-int .in-flag{position:absolute;bottom:-9px;font-size:8.5px;font-weight:800;letter-spacing:.08em;color:#ff5a4d;background:rgba(255,90,77,.14);border:1px solid rgba(255,90,77,.45);padding:1.5px 6px;border-radius:999px;opacity:0;white-space:nowrap;animation:inDoorFlag 12s cubic-bezier(.4,0,.2,1) infinite}

/* ===== HUB — lights @28% ===== */
.cv-int .in-hub{animation:inHubBox 12s cubic-bezier(.4,0,.2,1) infinite}
.cv-int .in-hub .in-ico{width:27px;height:27px;animation:inHubIco 12s ease-in-out infinite}
.cv-int .in-hub .in-ring{position:absolute;inset:0;border-radius:13px;border:1.5px solid #5CC9F0;opacity:0;animation:inHubRing 12s cubic-bezier(.2,.7,.3,1) infinite}

/* ===== CAMERA — lights + feed reveal @44% ===== */
.cv-int .in-cam{animation:inCamBox 12s cubic-bezier(.4,0,.2,1) infinite}
.cv-int .in-cam .in-ico{animation:inCamIco 12s ease-in-out infinite}
.cv-int .in-cam .in-dot{animation:inCamDot 12s ease-in-out infinite}

/* live feed frame — anchored to camera, drops down-left so it stays inside the stage at all widths */
.cv-int .in-feed{position:absolute;top:64px;right:14px;width:104px;height:62px;border-radius:8px;overflow:hidden;background:linear-gradient(180deg,#0a1016,#0d141b);border:1px solid rgba(56,181,255,.45);box-shadow:0 12px 26px -10px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.4);transform-origin:90% 0;transform:scale(.55);opacity:0;animation:inFeed 12s cubic-bezier(.2,.7,.3,1) infinite}
.cv-int .in-feed-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(56,181,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(56,181,255,.10) 1px,transparent 1px);background-size:14px 14px}
.cv-int .in-scan{position:absolute;left:0;right:0;top:0;height:16px;background:linear-gradient(180deg,rgba(56,181,255,.34),rgba(56,181,255,0));animation:inScan 4s linear infinite}
.cv-int .in-fig{position:absolute;bottom:6px;left:50%;width:13px;height:26px;margin-left:-6.5px;border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,#cfe9f2,#7fa9b8);box-shadow:0 0 10px rgba(56,181,255,.4);animation:inFig 6s ease-in-out infinite}
.cv-int .in-fig::before{content:"";position:absolute;top:-9px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#cfe9f2}
.cv-int .in-rec{position:absolute;top:5px;left:6px;display:flex;align-items:center;gap:3px;font-size:7.5px;font-weight:800;letter-spacing:.08em;color:#ff8a82}
.cv-int .in-rec span{width:5px;height:5px;border-radius:50%;background:#ff5a4d;box-shadow:0 0 6px #ff5a4d;animation:inRec 1.5s steps(1,end) infinite}
.cv-int .in-feed-t{position:absolute;bottom:4px;right:6px;font-size:7px;font-weight:700;letter-spacing:.06em;color:#9aa1ab}

/* travelling pulse dots — positioned in % so they track the responsive layout */
.cv-int .in-pulse{position:absolute;z-index:2;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#eafcff;box-shadow:0 0 9px 2px rgba(56,181,255,.9),0 0 16px 5px rgba(56,181,255,.5);opacity:0}
/* Door centre(20%,70.4%) -> Hub centre(53.8%,50.4%) : active 12%-28% */
.cv-int .in-pulse-d{animation:inPulseD 12s linear infinite}
/* Hub centre(53.8%,50.4%) -> Camera centre(75.4%,25.2%) : active 28%-44% */
.cv-int .in-pulse-c{animation:inPulseC 12s linear infinite}

.cv-int .in-status{position:absolute;left:13px;bottom:11px;z-index:3;font-size:9.5px;font-weight:700;letter-spacing:.12em;color:#9aa1ab;display:flex;align-items:center;gap:7px}
.cv-int .in-status::before{content:"";width:6px;height:6px;border-radius:50%;background:#5CC9F0;box-shadow:0 0 8px #5CC9F0;animation:inStatus 12s ease-in-out infinite}

/* ================= KEYFRAMES (all on D=12s) ================= */

/* alarm ambient — gentle armed breathing, symmetric at 0/50/100 so it matches at the seam */
@keyframes inArmed{0%,100%{box-shadow:0 0 0 0 rgba(46,203,107,.5)}50%{box-shadow:0 0 8px 1px rgba(46,203,107,.85)}}
@keyframes inAlarmAmb{0%,100%{color:#9aa1ab}48%,52%{color:#cdd4dc}}

/* DOOR flashes red at 12% (CAUSE #1) */
@keyframes inDoorBox{
  0%,9%{border-color:rgba(255,255,255,.09);box-shadow:0 8px 22px -12px rgba(0,0,0,.85)}
  12%{border-color:rgba(255,90,77,.95);box-shadow:0 0 20px 2px rgba(255,90,77,.6)}
  16%{border-color:rgba(255,90,77,.55);box-shadow:0 0 12px rgba(255,90,77,.35)}
  22%{border-color:rgba(255,90,77,.78);box-shadow:0 0 16px rgba(255,90,77,.5)}
  34%,100%{border-color:rgba(255,255,255,.09);box-shadow:0 8px 22px -12px rgba(0,0,0,.85)}
}
@keyframes inDoorIco{0%,9%{color:#9aa1ab}12%,30%{color:#ff7a70}40%,100%{color:#9aa1ab}}
@keyframes inDoorDot{0%,9%{background:#9aa1ab;box-shadow:none}12%,30%{background:#ff5a4d;box-shadow:0 0 8px #ff5a4d}40%,100%{background:#9aa1ab;box-shadow:none}}
@keyframes inDoorFlag{0%,9%{opacity:0;transform:translateY(3px)}12%{opacity:1;transform:translateY(0)}30%{opacity:1;transform:translateY(0)}40%,100%{opacity:0;transform:translateY(3px)}}

/* pulse Door->Hub : becomes visible at 12% (door-flash instant), ARRIVES at Hub centre exactly at 28% */
@keyframes inPulseD{
  0%,12%{left:20%;top:70.4%;opacity:0}
  13%{opacity:1}
  15.2%{left:26.2%;top:68.4%}
  18.4%{left:31.8%;top:63.6%}
  21.6%{left:37.6%;top:57.9%}
  24.8%{left:44.7%;top:52.8%}
  27%{left:53.8%;top:50.4%;opacity:1}
  28%{left:53.8%;top:50.4%;opacity:0}
  100%{left:53.8%;top:50.4%;opacity:0}
}
/* pulse Hub->Camera : starts at 28% (when door pulse arrives), ARRIVES at Camera centre at 44% */
@keyframes inPulseC{
  0%,28%{left:53.8%;top:50.4%;opacity:0}
  29%{opacity:1}
  31.2%{left:58.6%;top:48%}
  34.4%{left:62.9%;top:42.1%}
  37.6%{left:67%;top:34.8%}
  40.8%{left:71%;top:28.5%}
  43%{left:75.4%;top:25.2%;opacity:1}
  44%{left:75.4%;top:25.2%;opacity:0}
  100%{left:75.4%;top:25.2%;opacity:0}
}

/* HUB lights at 28% (the instant the door-pulse arrives) */
@keyframes inHubBox{
  0%,27%{border-color:rgba(255,255,255,.09);box-shadow:0 8px 22px -12px rgba(0,0,0,.85)}
  28%{border-color:rgba(56,181,255,.95);box-shadow:0 0 24px 2px rgba(56,181,255,.55)}
  44%{border-color:rgba(56,181,255,.7);box-shadow:0 0 16px rgba(56,181,255,.4)}
  62%{border-color:rgba(56,181,255,.45);box-shadow:0 0 12px rgba(56,181,255,.28)}
  82%,100%{border-color:rgba(255,255,255,.09);box-shadow:0 8px 22px -12px rgba(0,0,0,.85)}
}
@keyframes inHubIco{0%,27%{color:#9aa1ab}28%,70%{color:#5CC9F0}86%,100%{color:#9aa1ab}}
@keyframes inHubRing{
  0%,27%{opacity:0;transform:scale(.9)}
  28%{opacity:.9;transform:scale(1)}
  40%{opacity:0;transform:scale(1.5)}
  100%{opacity:0;transform:scale(1.5)}
}

/* CAMERA lights at 44% (the instant the hub-pulse arrives) */
@keyframes inCamBox{
  0%,43%{border-color:rgba(255,255,255,.09);box-shadow:0 8px 22px -12px rgba(0,0,0,.85)}
  44%{border-color:rgba(56,181,255,.95);box-shadow:0 0 24px 2px rgba(56,181,255,.55)}
  82%{border-color:rgba(56,181,255,.6);box-shadow:0 0 14px rgba(56,181,255,.35)}
  92%,100%{border-color:rgba(255,255,255,.09);box-shadow:0 8px 22px -12px rgba(0,0,0,.85)}
}
@keyframes inCamIco{0%,43%{color:#9aa1ab}44%,86%{color:#5CC9F0}94%,100%{color:#9aa1ab}}
@keyframes inCamDot{0%,43%{background:#9aa1ab;box-shadow:none}44%,86%{background:#5CC9F0;box-shadow:0 0 8px #5CC9F0}94%,100%{background:#9aa1ab;box-shadow:none}}

/* live feed pops at 44% (same instant camera lights), holds, retracts before loop end */
@keyframes inFeed{
  0%,43%{opacity:0;transform:scale(.55)}
  44%{opacity:0;transform:scale(.55)}
  48%{opacity:1;transform:scale(1)}
  84%{opacity:1;transform:scale(1)}
  90%{opacity:0;transform:scale(.65)}
  100%{opacity:0;transform:scale(.55)}
}

/* fast sub-cycles (D / whole numbers) — seamless because they tile evenly into 12s */
@keyframes inScan{0%{transform:translateY(-16px)}100%{transform:translateY(62px)}}
@keyframes inRec{0%,49%{opacity:1}50%,100%{opacity:.15}}
@keyframes inFig{0%,100%{transform:translateX(-13px)}50%{transform:translateX(13px)}}

/* status LED brightens during the active chain, returns to .4 at the seam */
@keyframes inStatus{0%,100%{opacity:.4}28%,44%{opacity:1}}

/* ================= RESPONSIVE (no overflow down to ~300px) ================= */
@media(max-width:760px){
  .cv-int .in-node{width:52px;padding:7px 5px 6px;border-radius:11px;gap:4px}
  .cv-int .in-hub{width:58px}
  .cv-int .in-ico{width:21px;height:21px}
  .cv-int .in-hub .in-ico{width:23px;height:23px}
  .cv-int .in-lbl{font-size:9px}
  .cv-int .in-alarm{left:4%;top:13%}
  .cv-int .in-door {left:4%;top:55%}
  .cv-int .in-hub  {left:40%;top:34%}
  .cv-int .in-cam  {left:64%;top:8%}
  .cv-int .in-feed{width:86px;height:54px;top:54px;right:10px}
  .cv-int .in-feed-grid{background-size:12px 12px}
  .cv-int .in-fig{width:11px;height:21px;margin-left:-5.5px;bottom:5px}
  .cv-int .in-fig::before{top:-7px;width:7px;height:7px;margin-left:-3.5px}
  .cv-int .in-status{font-size:8.5px;left:9px;bottom:9px}
  .cv-int .in-flag{font-size:7.5px;bottom:-8px}
  /* keep the scanline travel matched to the shorter feed so it doesn't run past the frame */
  @keyframes inScan{0%{transform:translateY(-16px)}100%{transform:translateY(54px)}}
}

.cv-multi{display:flex;align-items:center;gap:8px;padding:0 14px;background:radial-gradient(130% 130% at 78% 50%,#101820,#0b0f13 70%,#0c1016);font-family:var(--font-body,Inter,Arial,sans-serif);isolation:isolate}
.cv-multi *{box-sizing:border-box}
.ms-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(56,181,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(56,181,255,.045) 1px,transparent 1px);background-size:28px 28px;pointer-events:none;z-index:0}
.ms-glow{position:absolute;right:-8%;top:50%;width:62%;height:150%;transform:translateY(-50%);background:radial-gradient(closest-side,rgba(56,181,255,.10),transparent 72%);pointer-events:none;z-index:0;animation:msGlow 12s ease-in-out infinite}

/* ---- left: three site cards ---- */
.ms-sites{position:relative;z-index:2;display:flex;flex-direction:column;gap:9px;flex:0 0 auto;width:122px;min-width:0}
.ms-site{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:7px;align-items:center;padding:7px 9px;border-radius:9px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.10);box-shadow:0 4px 14px -8px rgba(0,0,0,.7);animation:msCardS0 12s ease-in-out infinite;will-change:border-color,box-shadow}
.ms-cam{grid-row:1/3;width:14px;height:14px;border-radius:50%;background:#0c1116;border:1px solid rgba(56,181,255,.35);position:relative;flex:0 0 auto}
.ms-cam::after{content:"";position:absolute;inset:0;margin:auto;width:5px;height:5px;border-radius:50%;background:#5CC9F0;box-shadow:0 0 6px #5CC9F0;animation:msCamRec 4s ease-in-out infinite}
.ms-name{font-size:12px;font-weight:700;color:#e7edf3;letter-spacing:.01em;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ms-armed{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#2ecb6b;white-space:nowrap}
.ms-armdot{width:5px;height:5px;border-radius:50%;background:#2ecb6b;box-shadow:0 0 5px #2ecb6b;flex:0 0 auto}
.ms-port{position:absolute;right:-3px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#5CC9F0;opacity:0;box-shadow:0 0 9px #5CC9F0;animation:msPortS0 12s ease-in-out infinite}
.ms-site.s0{animation-name:msCardS0}
.ms-site.s1{animation-name:msCardS1}
.ms-site.s2{animation-name:msCardS2}
.ms-site.s0 .ms-port{animation-name:msPortS0}
.ms-site.s1 .ms-port{animation-name:msPortS1}
.ms-site.s2 .ms-port{animation-name:msPortS2}

/* ---- middle: connector lines + travelling pulses ---- */
.ms-links{position:relative;z-index:1;flex:1 1 auto;min-width:30px;align-self:stretch;display:flex;align-items:center}
.ms-svg{width:100%;height:100%;overflow:visible}
.ms-wire{fill:none;stroke:rgba(140,160,180,.22);stroke-width:1.4;stroke-linecap:round}
.ms-pulse{fill:#5CC9F0;filter:drop-shadow(0 0 5px #5CC9F0);opacity:0}
.ms-pulse.p0{animation:msPulseS0 12s linear infinite}
.ms-pulse.p1{animation:msPulseS1 12s linear infinite}
.ms-pulse.p2{animation:msPulseS2 12s linear infinite}

/* ---- right: central command dashboard ---- */
.ms-dash{position:relative;z-index:2;flex:0 0 auto;width:150px;min-width:0;border-radius:11px;padding:9px 9px 8px;background:linear-gradient(180deg,rgba(14,22,30,.96),rgba(9,13,18,.96));border:1px solid rgba(56,181,255,.22);box-shadow:0 10px 30px -12px rgba(0,0,0,.8),inset 0 0 24px rgba(56,181,255,.05);overflow:hidden}
.ms-dhead{display:flex;align-items:center;justify-content:space-between;gap:6px;padding-bottom:6px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.08)}
.ms-dtitle{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;letter-spacing:.03em;color:#cfd9e6;white-space:nowrap;overflow:hidden}
.ms-live{width:6px;height:6px;border-radius:50%;background:#2ecb6b;box-shadow:0 0 6px #2ecb6b;flex:0 0 auto;animation:msHeartbeat 4s ease-in-out infinite}
.ms-agg{display:inline-flex;align-items:baseline;gap:3px;flex:0 0 auto}
.ms-aggn{font-family:var(--font-display,Sora,Inter,Arial,sans-serif);font-weight:800;font-size:14px;color:#5CC9F0;min-width:24px;text-align:right}
.ms-aggn::after{content:"0/3";animation:msAggCount 12s steps(1) infinite}
.ms-agglbl{font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#9aa1ab}
.ms-rows{display:flex;flex-direction:column;gap:5px}
.ms-row{position:relative;display:flex;align-items:center;gap:6px;padding:5px 7px;border-radius:7px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);overflow:hidden;animation:msRowS0 12s ease-in-out infinite}
.ms-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:#5CC9F0;opacity:0;animation:msBarS0 12s ease-in-out infinite}
.ms-rdot{width:6px;height:6px;border-radius:50%;background:#4a5562;flex:0 0 auto;animation:msDotS0 12s ease-in-out infinite}
.ms-rname{font-size:10.5px;font-weight:600;color:#9aa1ab;flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:msNameS0 12s ease-in-out infinite}
.ms-rstat{font-size:8.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#3a4552;opacity:0;flex:0 0 auto;animation:msStatS0 12s ease-in-out infinite}
.ms-row.r0{animation-name:msRowS0}
.ms-row.r1{animation-name:msRowS1}
.ms-row.r2{animation-name:msRowS2}
.ms-row.r0::before{animation-name:msBarS0}
.ms-row.r1::before{animation-name:msBarS1}
.ms-row.r2::before{animation-name:msBarS2}
.ms-row.r0 .ms-rdot{animation-name:msDotS0}
.ms-row.r1 .ms-rdot{animation-name:msDotS1}
.ms-row.r2 .ms-rdot{animation-name:msDotS2}
.ms-row.r0 .ms-rname{animation-name:msNameS0}
.ms-row.r1 .ms-rname{animation-name:msNameS1}
.ms-row.r2 .ms-rname{animation-name:msNameS2}
.ms-row.r0 .ms-rstat{animation-name:msStatS0}
.ms-row.r1 .ms-rstat{animation-name:msStatS1}
.ms-row.r2 .ms-rstat{animation-name:msStatS2}
.ms-sweep{position:absolute;top:0;bottom:0;width:42px;left:0;transform:translateX(-42px);background:linear-gradient(90deg,transparent,rgba(56,181,255,.10),transparent);animation:msSweep 12s ease-in-out infinite;pointer-events:none}

/* ============ CHOREOGRAPHY — master cycle D = 12s ============ */
/* Site0 depart 2% arrive 22% | Site1 depart 37% arrive 55% | Site2 depart 70% arrive 88% */

/* departure: outgoing port flash — ignites on the same frame the pulse leaves */
@keyframes msPortS0{0%,1%{opacity:0;transform:scale(.5)}2%{opacity:1;transform:scale(1.3)}9%{opacity:0;transform:scale(.5)}100%{opacity:0;transform:scale(.5)}}
@keyframes msPortS1{0%,36%{opacity:0;transform:scale(.5)}37%{opacity:1;transform:scale(1.3)}44%{opacity:0;transform:scale(.5)}100%{opacity:0;transform:scale(.5)}}
@keyframes msPortS2{0%,69%{opacity:0;transform:scale(.5)}70%{opacity:1;transform:scale(1.3)}77%{opacity:0;transform:scale(.5)}100%{opacity:0;transform:scale(.5)}}

/* departure: card edge glow — now ignites at 2/37/70% (same frame as port + pulse) */
@keyframes msCardS0{0%,2%{border-color:rgba(255,255,255,.10);box-shadow:0 4px 14px -8px rgba(0,0,0,.7)}4%{border-color:rgba(56,181,255,.7);box-shadow:0 0 16px -2px rgba(56,181,255,.45)}22%{border-color:rgba(56,181,255,.4)}30%,100%{border-color:rgba(255,255,255,.10);box-shadow:0 4px 14px -8px rgba(0,0,0,.7)}}
@keyframes msCardS1{0%,37%{border-color:rgba(255,255,255,.10);box-shadow:0 4px 14px -8px rgba(0,0,0,.7)}39%{border-color:rgba(56,181,255,.7);box-shadow:0 0 16px -2px rgba(56,181,255,.45)}55%{border-color:rgba(56,181,255,.4)}63%,100%{border-color:rgba(255,255,255,.10);box-shadow:0 4px 14px -8px rgba(0,0,0,.7)}}
@keyframes msCardS2{0%,70%{border-color:rgba(255,255,255,.10);box-shadow:0 4px 14px -8px rgba(0,0,0,.7)}72%{border-color:rgba(56,181,255,.7);box-shadow:0 0 16px -2px rgba(56,181,255,.45)}88%{border-color:rgba(56,181,255,.4)}96%,100%{border-color:rgba(255,255,255,.10);box-shadow:0 4px 14px -8px rgba(0,0,0,.7)}}

/* camera rec dot — steady live pulse, 4s = D/3 (3 whole cycles, in phase) */
@keyframes msCamRec{0%,100%{opacity:1}50%{opacity:.35}}

/* pulses fade in at departure %, fade out at arrival % (matches each path's keyTimes) */
@keyframes msPulseS0{0%,2%{opacity:0}4%{opacity:1}20%{opacity:1}22%,100%{opacity:0}}
@keyframes msPulseS1{0%,37%{opacity:0}39%{opacity:1}53%{opacity:1}55%,100%{opacity:0}}
@keyframes msPulseS2{0%,70%{opacity:0}72%{opacity:1}86%{opacity:1}88%,100%{opacity:0}}

/* ROW LIGHT-UP — fires at the EXACT arrival % of the matching pulse, holds aggregated until reset */
@keyframes msRowS0{0%,21%{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.07)}22%{background:rgba(56,181,255,.22);border-color:rgba(56,181,255,.7)}26%{background:rgba(56,181,255,.10);border-color:rgba(56,181,255,.4)}99%{background:rgba(56,181,255,.10);border-color:rgba(56,181,255,.4)}100%{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.07)}}
@keyframes msRowS1{0%,54%{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.07)}55%{background:rgba(56,181,255,.22);border-color:rgba(56,181,255,.7)}59%{background:rgba(56,181,255,.10);border-color:rgba(56,181,255,.4)}99%{background:rgba(56,181,255,.10);border-color:rgba(56,181,255,.4)}100%{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.07)}}
@keyframes msRowS2{0%,87%{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.07)}88%{background:rgba(56,181,255,.22);border-color:rgba(56,181,255,.7)}92%{background:rgba(56,181,255,.10);border-color:rgba(56,181,255,.4)}99%{background:rgba(56,181,255,.10);border-color:rgba(56,181,255,.4)}100%{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.07)}}

/* accent bar — appears at arrival, now RESETS to 0 at 100% on the same frame the row resets */
@keyframes msBarS0{0%,21%{opacity:0}22%,99%{opacity:1}100%{opacity:0}}
@keyframes msBarS1{0%,54%{opacity:0}55%,99%{opacity:1}100%{opacity:0}}
@keyframes msBarS2{0%,87%{opacity:0}88%,99%{opacity:1}100%{opacity:0}}

@keyframes msDotS0{0%,21%{background:#4a5562;box-shadow:none;transform:scale(1)}22%{background:#2ecb6b;box-shadow:0 0 8px #2ecb6b;transform:scale(1.5)}28%{transform:scale(1)}99%{background:#2ecb6b;box-shadow:0 0 6px #2ecb6b;transform:scale(1)}100%{background:#4a5562;box-shadow:none;transform:scale(1)}}
@keyframes msDotS1{0%,54%{background:#4a5562;box-shadow:none;transform:scale(1)}55%{background:#2ecb6b;box-shadow:0 0 8px #2ecb6b;transform:scale(1.5)}61%{transform:scale(1)}99%{background:#2ecb6b;box-shadow:0 0 6px #2ecb6b;transform:scale(1)}100%{background:#4a5562;box-shadow:none;transform:scale(1)}}
@keyframes msDotS2{0%,87%{background:#4a5562;box-shadow:none;transform:scale(1)}88%{background:#2ecb6b;box-shadow:0 0 8px #2ecb6b;transform:scale(1.5)}94%{transform:scale(1)}99%{background:#2ecb6b;box-shadow:0 0 6px #2ecb6b;transform:scale(1)}100%{background:#4a5562;box-shadow:none;transform:scale(1)}}

@keyframes msNameS0{0%,21%{color:#9aa1ab}22%,99%{color:#e7edf3}100%{color:#9aa1ab}}
@keyframes msNameS1{0%,54%{color:#9aa1ab}55%,99%{color:#e7edf3}100%{color:#9aa1ab}}
@keyframes msNameS2{0%,87%{color:#9aa1ab}88%,99%{color:#e7edf3}100%{color:#9aa1ab}}

@keyframes msStatS0{0%,21%{opacity:0;color:#3a4552}22%,99%{opacity:1;color:#2ecb6b}100%{opacity:0;color:#3a4552}}
@keyframes msStatS1{0%,54%{opacity:0;color:#3a4552}55%,99%{opacity:1;color:#2ecb6b}100%{opacity:0;color:#3a4552}}
@keyframes msStatS2{0%,87%{opacity:0;color:#3a4552}88%,99%{opacity:1;color:#2ecb6b}100%{opacity:0;color:#3a4552}}

/* aggregate readout — increments on each pulse's arrival frame */
@keyframes msAggCount{0%{content:"0/3"}22%{content:"1/3"}55%{content:"2/3"}88%{content:"3/3"}100%{content:"0/3"}}

/* dashboard live heartbeat — 4s = D/3 (in phase) */
@keyframes msHeartbeat{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}

/* live scan sweep — crosses once via transform, parks off-screen; state@100% == state@0% */
@keyframes msSweep{0%{transform:translateX(-42px)}45%{transform:translateX(214px)}100%{transform:translateX(214px)}}

/* ambient right-side glow breathes once per cycle, equal at 0/100% */
@keyframes msGlow{0%,100%{opacity:.55}50%{opacity:1}}

@media(max-width:760px){
  .cv-multi{padding:0 11px;gap:6px}
  .ms-sites{width:104px;gap:7px}
  .ms-site{padding:6px 7px;column-gap:6px}
  .ms-name{font-size:11px}
  .ms-armed{font-size:8.5px}
  .ms-cam{width:12px;height:12px}
  .ms-links{min-width:26px}
  .ms-dash{width:124px;padding:8px 7px 7px}
  .ms-dtitle{font-size:9.5px}
  .ms-aggn{font-size:12.5px;min-width:21px}
  .ms-rname{font-size:9.5px}
  .ms-rstat{font-size:8px}
}
@media(max-width:360px){
  .cv-multi{padding:0 9px;gap:5px}
  .ms-sites{width:92px;gap:6px}
  .ms-site{padding:5px 6px;column-gap:5px}
  .ms-name{font-size:10px}
  .ms-armed{font-size:8px;letter-spacing:.04em}
  .ms-cam{width:11px;height:11px}
  .ms-links{min-width:18px}
  .ms-dash{width:108px;padding:7px 6px 6px}
  .ms-dtitle{font-size:9px;gap:4px}
  .ms-aggn{font-size:11.5px;min-width:19px}
  .ms-agglbl{font-size:8px}
  .ms-rname{font-size:9px}
  .ms-rstat{font-size:7.5px}
  .ms-row{padding:4px 6px;gap:5px}
}

/* ---------- 3CX admin console mock ---------- */
.tcxx .lead{max-width:680px}
.tcx{max-width:920px;margin:18px auto 0;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 18px 50px -28px rgba(22,24,28,.45);background:#fff}
.tcx-top{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#0f1722;color:#e7edf3;font-size:13px}
.tcx-brand{font-family:var(--font-display);font-weight:800;color:var(--cyan-text);font-size:15px}
.tcx-title{font-weight:600}
.tcx-live{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#9fb0c0}
.tcx-live>span{width:8px;height:8px;border-radius:50%;background:#2ecb6b;box-shadow:0 0 7px #2ecb6b;animation:tcxBlink 2.4s ease-in-out infinite}
@keyframes tcxBlink{0%,100%{opacity:1}50%{opacity:.4}}
.tcx-scroll{overflow-x:auto}
.tcx-grid{min-width:600px}
.tcx-r{display:grid;grid-template-columns:1.7fr .6fr 1.1fr 1.2fr .5fr .9fr;align-items:center;gap:10px;padding:10px 16px;border-top:1px solid var(--line);font-size:13.5px}
.tcx-h{background:#f3f5f7;border-top:none;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.tcx-u{display:flex;align-items:center;gap:9px;font-weight:600;color:var(--ink)}
.tcx-av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#7CCBFF,var(--cyan));color:#fff;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;flex:0 0 auto}
.tcx-ext{font-family:var(--font-display);font-weight:700;color:var(--ink)}
.tcx-dept,.tcx-phone{color:var(--muted)}
.tcx-c{display:flex;justify-content:center}
.tcx-2fa{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:rgba(46,203,107,.14);color:#1f9d57}
.tcx-2fa svg{width:12px;height:12px}
.tcx-apps{display:flex;gap:5px}
.tcx-app{width:20px;height:20px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#fff}
.tcx-app.m{background:#2563eb}.tcx-app.g{background:#1f9d57}.tcx-app.t{background:#2f6fed}
.tcx-note{text-align:center;color:var(--muted);font-size:13px;margin:14px auto 0}

/* ---------- 3CX call-flow diagram ---------- */
.cflowx .lead{max-width:680px}
.cflow{max-width:940px;margin:18px auto 0;display:flex;flex-direction:column;gap:16px}
.cf-lane{display:flex;align-items:stretch;justify-content:center;gap:8px}
.cf-center{justify-content:center}
.cf-node{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--c);border-radius:12px;padding:12px 15px;box-shadow:0 6px 18px -12px rgba(22,24,28,.4);flex:1 1 200px;max-width:300px}
.cf-ic{flex:0 0 auto;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:var(--c);color:#fff;box-shadow:0 4px 12px -4px var(--c)}
.cf-ic svg{width:22px;height:22px}
.cf-tx b{display:block;font-family:var(--font-display);font-weight:700;font-size:14.5px;color:var(--ink);line-height:1.2}
.cf-tx small{display:block;font-size:12px;color:var(--muted);line-height:1.4;margin-top:3px}
.cf-arrow{position:relative;align-self:center;width:30px;height:2px;background:var(--line);flex:0 0 auto;border-radius:2px}
.cf-arrow::after{content:"";position:absolute;right:-2px;top:50%;transform:translateY(-50%);border-left:7px solid #c7ccd3;border-top:5px solid transparent;border-bottom:5px solid transparent}
.cf-dot{position:absolute;top:50%;left:0;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);animation:cfDot 2.6s linear infinite}
@keyframes cfDot{0%{left:0;opacity:0}15%{opacity:1}82%{opacity:1}100%{left:24px;opacity:0}}
.cf-split{text-align:center;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.cf-branch{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cf-branch .cf-node{flex:none;max-width:none}
.cf-devices{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;background:#f1f8fb;border:1px solid var(--line);border-radius:12px;padding:12px 16px}
.cf-dev-l{font-weight:700;color:var(--ink);font-size:13px;margin-right:4px}
.cf-dev{font-size:12.5px;font-weight:600;color:var(--cyan-text);background:rgba(21,119,224,.1);border:1px solid rgba(21,119,224,.25);border-radius:999px;padding:5px 12px}
.cf-after{display:flex;align-items:center;gap:9px;justify-content:center;font-size:13px;color:#8a6a36;background:rgba(229,147,59,.08);border:1px dashed rgba(229,147,59,.45);border-radius:12px;padding:11px 16px;text-align:center}
.cf-after-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:#E5933B;box-shadow:0 0 7px rgba(229,147,59,.7)}
@media(max-width:720px){.cf-branch{grid-template-columns:1fr}.cf-lane{flex-direction:column;align-items:stretch}.cf-node{max-width:none}.cf-arrow{width:2px;height:22px;align-self:center}.cf-arrow::after{right:50%;top:auto;bottom:-2px;transform:translateX(50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid #c7ccd3;border-bottom:none}.cf-dot{animation:cfDotV 2.6s linear infinite}}
@keyframes cfDotV{0%{top:0;opacity:0}15%{opacity:1}82%{opacity:1}100%{top:18px;opacity:0}}

/* ---------- What we migrate (from -> to map) ---------- */
.migx .lead{max-width:680px}
.mig-map{max-width:900px;margin:18px auto 0;display:flex;flex-direction:column;gap:12px}
.mig-heads{display:grid;grid-template-columns:1fr 46px 1fr;gap:12px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:0 4px}
.mig-row{display:grid;grid-template-columns:1fr 46px 1fr;align-items:center;gap:12px}
.mig-cell{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 14px;min-height:62px;box-shadow:0 5px 16px -12px rgba(22,24,28,.35)}
.mig-cell.to{border-left:4px solid var(--c)}
.mig-ic{flex:0 0 auto;width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:#f1f3f6;color:#6b7280}
.mig-ic.to{background:var(--c);color:#fff;box-shadow:0 4px 12px -4px var(--c)}
.mig-svg{width:21px;height:21px}
.mig-l{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.3}
.mig-arrow{position:relative;width:44px;height:2px;background:var(--line);border-radius:2px;align-self:center}
.mig-arrow::after{content:"";position:absolute;right:-2px;top:50%;transform:translateY(-50%);border-left:7px solid #c7ccd3;border-top:5px solid transparent;border-bottom:5px solid transparent}
.mig-pulse{position:absolute;top:50%;left:0;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);animation:migPulse 2.6s linear infinite;animation-delay:var(--d,0s)}
@keyframes migPulse{0%{left:0;opacity:0}15%{opacity:1}80%{opacity:1}100%{left:38px;opacity:0}}
.mig-note{text-align:center;color:var(--muted);font-size:14px;margin:16px auto 0;max-width:620px}
.mig-note strong{color:var(--ink)}
@media(max-width:720px){.mig-heads{display:none}.mig-row{grid-template-columns:1fr;gap:0}.mig-arrow{width:2px;height:22px;justify-self:center;margin:5px 0}.mig-arrow::after{right:50%;top:auto;bottom:-2px;transform:translateX(50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid #c7ccd3;border-bottom:none}.mig-pulse{animation:migPulseV 2.6s linear infinite}}
@keyframes migPulseV{0%{top:0;opacity:0}15%{opacity:1}80%{opacity:1}100%{top:16px;opacity:0}}

/* ---------- Sticky mobile call / CTA bar ---------- */
.mbar{display:none}
@media(max-width:680px){
  .mbar{display:grid;grid-template-columns:1.5fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:90;padding:9px 11px;padding-bottom:calc(9px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--line);box-shadow:0 -6px 22px -12px rgba(16,24,40,.28)}
  .mbar a{display:flex;align-items:center;justify-content:center;gap:7px;height:46px;border-radius:12px;font-family:var(--font-display);font-weight:700;font-size:14.5px;text-decoration:none;white-space:nowrap}
  .mbar-call{background:var(--cyan-text);color:#fff;box-shadow:0 4px 14px -4px rgba(21,119,224,.7)}
  .mbar-call svg{width:17px;height:17px;flex:0 0 auto}
  .mbar-cta{background:var(--ink);color:#fff}
  .mbar a:active{transform:translateY(1px)}
  body{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
}
@media(max-width:360px){.mbar a{font-size:13px}.mbar-call span{font-size:12.5px}}

/* ---------- Migration process step timeline ---------- */
.mpx .lead{max-width:640px}
.mp-rail{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;max-width:1000px;margin:32px auto 0}
.mp-line{position:absolute;left:9%;right:9%;top:27px;height:2px;background:linear-gradient(90deg,rgba(21,119,224,.3),rgba(21,119,224,.6));z-index:0}
.mp-node{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center}
.mp-dot{width:54px;height:54px;border-radius:50%;background:#fff;border:2px solid rgba(21,119,224,.5);color:var(--cyan);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 6px var(--paper-2),0 6px 16px -8px rgba(21,119,224,.5)}
.mp-dot svg{width:22px;height:22px}
.mp-step{font-family:var(--font-display);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--cyan-hover);margin-top:14px}
.mp-node h3{font-size:16px;margin:5px 0 5px}
.mp-node p{font-size:13px;color:var(--muted);line-height:1.45;margin:0;max-width:17ch}
html.io .mp-node{opacity:0;transform:translateY(14px)}
html.io .mpx.is-in .mp-node{animation:dkIn .5s ease var(--d) both}
@media(max-width:760px){.mp-rail{grid-template-columns:1fr;gap:0;max-width:460px}.mp-line{left:26px;right:auto;top:10px;bottom:10px;width:2px;height:auto}.mp-node{flex-direction:row;text-align:left;gap:16px;padding:14px 0;align-items:flex-start;flex-wrap:wrap}.mp-dot{flex:0 0 auto;box-shadow:0 0 0 5px var(--paper-2)}.mp-step{margin-top:2px;width:calc(100% - 70px)}.mp-node h3{width:calc(100% - 70px);margin:1px 0 4px}.mp-node p{width:calc(100% - 70px);max-width:none}}

/* ---------- Smooth page transitions (native, zero-JS, progressive enhancement) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .16s ease both}
::view-transition-new(root){animation:vtIn .24s ease both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- Azure Virtual Desktop viz ---------- */
.avdx .lead{max-width:680px}
.avd{display:grid;grid-template-columns:160px 72px 1fr;gap:14px;align-items:center;max-width:900px;margin:22px auto 0}
.avd-devices{display:flex;flex-direction:column;gap:11px}
.avd-dev{position:relative;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px 12px;color:#cfd9e6;animation:avdDev 6s ease-in-out infinite;animation-delay:calc(var(--i) * 2s)}
.avd-dev svg{width:22px;height:22px;flex:0 0 auto;color:#7CCBFF}
.avd-dev b{display:block;font-size:13px;color:#fff;line-height:1.2}
.avd-dev span{font-size:11px;color:#9aa1ab}
.avd-dev::after{content:"";position:absolute;top:8px;right:8px;width:7px;height:7px;border-radius:50%;background:#2ecb6b;box-shadow:0 0 6px #2ecb6b}
@keyframes avdDev{0%,40%,100%{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.05)}12%{border-color:rgba(56,181,255,.6);background:rgba(56,181,255,.08)}}
.avd-tunnel{position:relative;height:120px}
.avd-tunnel-line{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:linear-gradient(90deg,rgba(56,181,255,.3),rgba(56,181,255,.6));border-radius:2px}
.avd-lock{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:8px;background:#0d1117;border:1px solid rgba(56,181,255,.5);display:flex;align-items:center;justify-content:center;color:#5CC9F0;z-index:2;box-shadow:0 0 14px rgba(56,181,255,.4)}
.avd-lock svg{width:16px;height:16px}
.avd-pulse{position:absolute;top:50%;left:0;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#5CC9F0;box-shadow:0 0 8px #5CC9F0;animation:avdPulse 2s linear infinite}
.avd-pulse.p2{animation-delay:.66s}.avd-pulse.p3{animation-delay:1.33s}
@keyframes avdPulse{0%{left:0;opacity:0}12%{opacity:1}85%{opacity:1}100%{left:100%;opacity:0}}
.avd-screen{background:#0d1117;border:1px solid rgba(255,255,255,.14);border-radius:12px;overflow:hidden;box-shadow:0 16px 44px -22px rgba(0,0,0,.8)}
.avd-top{display:flex;align-items:center;gap:9px;padding:9px 13px;background:#161b22;font-size:12px;color:#c7ccd2;border-bottom:1px solid rgba(255,255,255,.08)}
.avd-top .db-dots i{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:4px}
.avd-top .db-dots i:nth-child(1){background:#f0a8a8}.avd-top .db-dots i:nth-child(2){background:#f0d59a}.avd-top .db-dots i:nth-child(3){background:#a8d9b0}
.avd-sec{margin-left:auto;display:inline-flex;align-items:center;gap:5px;color:#2ecb6b;font-weight:600;font-size:11px}
.avd-sec svg{width:13px;height:13px}
.avd-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:18px 16px}
.avd-app{display:flex;flex-direction:column;align-items:center;gap:7px;color:#cfd9e6}
.avd-app i{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--c);color:#fff;animation:avdApp 6s ease-in-out infinite;animation-delay:calc(var(--i) * .35s)}
.avd-app i svg{width:23px;height:23px}
.avd-app b{font-size:11px;font-weight:600}
@keyframes avdApp{0%,86%,100%{box-shadow:0 4px 10px -4px rgba(0,0,0,.5)}43%{box-shadow:0 0 0 3px rgba(255,255,255,.14),0 8px 18px -4px var(--c)}}
.avd-task{display:flex;align-items:center;gap:8px;padding:8px 13px;background:#161b22;border-top:1px solid rgba(255,255,255,.08)}
.avd-start{width:18px;height:18px;border-radius:4px;background:#5CC9F0;box-shadow:0 0 8px rgba(56,181,255,.5)}
.avd-pin{width:15px;height:15px;border-radius:4px;background:rgba(255,255,255,.14)}
.avd-clock{margin-left:auto;font-size:11px;color:#9aa1ab;font-variant-numeric:tabular-nums}
.avd-note{text-align:center;color:#aeb4bd;font-size:14px;max-width:640px;margin:18px auto 0}
@media(prefers-reduced-motion:reduce) and (scripting:none){.avd-dev,.avd-pulse,.avd-app i{animation-duration:10s}}
@media(max-width:760px){.avd{grid-template-columns:1fr;gap:10px}.avd-devices{flex-direction:row;flex-wrap:wrap;justify-content:center}.avd-dev{flex:1 1 150px}.avd-tunnel{height:40px}.avd-tunnel-line{left:50%;right:auto;top:0;bottom:0;width:2px;height:auto;margin:0}.avd-lock{}.avd-pulse{animation:avdPulseV 2s linear infinite}}
@keyframes avdPulseV{0%{top:0;left:50%;margin-left:-4px;opacity:0}12%{opacity:1}85%{opacity:1}100%{top:100%;opacity:0}}
@media(max-width:420px){.avd-tiles{gap:9px;padding:14px 12px}.avd-app i{width:40px;height:40px}}

/* =================================================================
   Light (BI-dashboard) theme for animated visuals — appended override
   Generated from viz-light-theme workflow. Wins by source order.
   ================================================================= */

/* ---- networkViz ---- */
/* ===== networkViz → BI-dashboard light re-skin (appended; wins by source order) ===== */
/* Section now sits in section--alt (#F3F6F9). Fix the lead that was forced light-grey. */
.netviz-sec .lead{color:var(--muted)}

/* Wrap the diagram in a white BI-dashboard panel */
.netviz{
  position:relative;max-width:760px;margin:18px auto 0;height:200px;
  background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:0 18px 50px -28px rgba(22,24,28,.45);
  padding:10px 18px;overflow:hidden
}

/* Connector wires: ink/muted schematic lines on white (was white-on-dark gradient) */
.netviz-sec .nv-wire{
  height:2px;
  background:linear-gradient(90deg,rgba(154,160,166,.15),rgba(154,160,166,.55),rgba(154,160,166,.15));
  transform:translateY(-50%)
}

/* Node icon chips: clean light cards (was translucent white on dark) */
.netviz-sec .nv-ico{
  background:#f7f8fa;border:1px solid var(--line);border-radius:18px;
  color:var(--ink-soft);display:grid;place-items:center
}
/* Firewall node = single cyan accent */
.netviz-sec .nv-fw .nv-ico{
  background:var(--soft);border-color:rgba(21,119,224,.55);color:var(--cyan)
}
/* Firewall pulse glow: soft cyan ring on white */
.netviz-sec .nv-glow{
  box-shadow:0 0 0 0 rgba(21,119,224,.45);animation:nvGlow 2.4s ease-out infinite
}

/* Node labels: ink primary text (was light #d4d8e0) */
.netviz-sec .nv-lbl{color:var(--ink)}

/* Allowed-traffic pulses: cyan dots, soft glow (kept legible on white) */
.netviz-sec .nv-pulse.good{
  background:var(--cyan);box-shadow:0 0 9px 1px rgba(21,119,224,.55)
}
/* Blocked-threat pulses: distinct red data-series, deepened for white contrast */
.netviz-sec .nv-pulse.bad{
  background:#d2453f;box-shadow:0 0 9px 1px rgba(210,69,63,.45)
}

/* Legend: muted label text on white, matching dots/glows */
.netviz-sec .netviz-legend{color:var(--muted)}
.netviz-sec .nv-dot.good{background:var(--cyan);box-shadow:0 0 7px rgba(21,119,224,.5)}
.netviz-sec .nv-dot.bad{background:#d2453f;box-shadow:0 0 7px rgba(210,69,63,.45)}

/* Keep the white panel padding from clipping nodes/labels on small screens */
@media(max-width:560px){
  .netviz{height:188px;padding:8px 10px}
}

/* ---- socConsole ---- */
/* ===== socConsole -> light BI-dashboard re-skin (appended; wins by source order) ===== */
/* Section is now `section--alt` (light grey). Heading/lead restore to ink via globals; only the component lead needs an explicit override. */
.socx .lead{color:var(--muted)}

/* Outer is implicit via the two panels — make each panel a white dashboard card. */
.soc-panel{align-items:stretch} /* layout unchanged; recolour happens on children */

/* --- Radar: light schematic dial instead of dark glass --- */
.soc-radar{
  background:#f7f8fa;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 18px 50px -28px rgba(22,24,28,.45);
}
/* concentric rings: faint cyan centre wash + light grey range rings on white */
.soc-grid{
  background:
    radial-gradient(circle,rgba(21,119,224,.10) 0,transparent 70%),
    repeating-radial-gradient(circle at 50% 50%,transparent 0,transparent 30px,rgba(22,24,28,.07) 31px);
}
/* sweep: cyan, but tuned so the leading edge reads on a light dial */
.soc-sweep{
  background:conic-gradient(from 0deg,rgba(21,119,224,.40),rgba(21,119,224,.05) 70deg,transparent 90deg);
}
/* blips: keep cyan with a soft (not neon) halo; threat blip = legible red on white */
.soc-blip{
  background:var(--cyan);
  box-shadow:0 0 0 4px rgba(21,119,224,.16);
}
.soc-blip.b3{
  background:#d2453f;
  box-shadow:0 0 0 4px rgba(210,69,63,.16);
}
.soc-radar-lbl{color:var(--muted)}

/* --- Feed: white dashboard card --- */
.soc-feed{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 18px 50px -28px rgba(22,24,28,.45);
}
.soc-feed-head{
  color:var(--ink);
  border-bottom:1px solid var(--line);
}
/* LIVE indicator: brand cyan dot + label, soft cyan pulse */
.soc-live{color:var(--cyan)}
.soc-live span{background:var(--cyan);animation:socLiveLight 2s ease-out infinite}
@keyframes socLiveLight{
  0%{box-shadow:0 0 0 0 rgba(21,119,224,.5)}
  70%{box-shadow:0 0 0 7px rgba(21,119,224,0)}
  100%{box-shadow:0 0 0 0 rgba(21,119,224,0)}
}

/* --- Rows: ink signal text, muted/cyan/green/red statuses on white --- */
.soc-row{border-bottom:1px solid var(--line)}
.soc-row:last-child{border-bottom:none}
.soc-ico{color:var(--cyan)}
.soc-row.block .soc-ico{color:var(--muted)}
.soc-row.threat .soc-ico{color:#d2453f}
.soc-sig{color:var(--ink)}
/* default (ok) status -> success green like the dashboard's positive deltas */
.soc-status{color:#1f9d57}
.soc-row.block .soc-status{color:var(--muted)}
.soc-row.threat .soc-status{color:#d2453f}

/* ---- pentestViz ---- */
/* ===== pentestViz — light BI-dashboard re-skin (overrides, appended last) ===== */
/* Attack-path track: dark translucent rail -> light dashboard gauge track */
.ptpath{position:relative;max-width:880px;margin:26px auto 0}
.pt-track{position:absolute;left:9%;right:9%;top:31px;height:3px;background:#eef0f3;border-radius:2px;overflow:hidden}
/* Progress fill: orange->red neon glow -> single cyan accent with a soft shadow */
.pt-prog{position:absolute;left:0;top:0;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),#1B93C6);box-shadow:0 0 8px rgba(21,119,224,.45);animation:ptFill 7s ease-in-out infinite}
/* Stage labels: light-grey-on-dark -> muted ink */
.pt-nodes{position:relative;display:flex;justify-content:space-between;gap:6px}
.pt-node{display:flex;flex-direction:column;align-items:center;gap:10px;width:18.5%;text-align:center;color:var(--muted)}
/* Stage node bubble: dark disc (#11151b) with white-alpha border -> white card, --line border, muted icon */
.pt-ic{width:64px;height:64px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--muted);position:relative;z-index:1;box-shadow:0 1px 2px rgba(22,24,28,.04)}
.pt-ic svg{width:28px;height:28px}
.pt-lbl{font-size:12.5px;font-weight:600;line-height:1.25}
/* Active "hit" pulse: red glow on near-black -> cyan ring on a tinted-white card with soft shadow */
html.io .ptpath.is-in .pt-ic{animation:ptHit 7s infinite;animation-delay:calc(var(--i) * 1.25s)}
@keyframes ptHit{
  0%,5%{border-color:var(--line);color:var(--muted);background:#fff;box-shadow:0 1px 2px rgba(22,24,28,.04)}
  11%{border-color:var(--cyan);color:var(--cyan);background:var(--soft);box-shadow:0 0 0 4px rgba(21,119,224,.14),0 8px 18px -8px rgba(21,119,224,.45)}
  80%{border-color:var(--cyan);color:var(--cyan);background:var(--soft);box-shadow:0 0 0 4px rgba(21,119,224,.12),0 8px 18px -10px rgba(21,119,224,.40)}
  88%,100%{border-color:var(--line);color:var(--muted);background:#fff;box-shadow:0 1px 2px rgba(22,24,28,.04)}
}
/* Final-stage "reach the data" label: warm-red highlight -> cyan accent */
.pt-node:last-child .pt-lbl{color:var(--cyan)}
/* Caption under the path: pale-grey-on-dark -> muted ink on light */
.pt-note{text-align:center;color:var(--muted);font-size:14px;max-width:620px;margin:20px auto 0}
@media(prefers-reduced-motion:reduce) and (scripting:none){.pt-prog{animation-duration:12s}html.io .ptpath.is-in .pt-ic{animation-duration:12s}}
@media(max-width:640px){.pt-ic{width:50px;height:50px}.pt-ic svg{width:22px;height:22px}.pt-lbl{font-size:10.5px}.pt-track{top:25px;left:7%;right:7%}}

/* ---- cctv-group-1 ---- */
/* ===================================================================
   LIGHT RE-SKIN — CCTV group 1: ACCESS (.cv-acc) + COUNTING (.cv-count)
   + LOITER (.cv-loiter). Appended last so it wins by source order.
   Matches the BI-dashboard look: #fff/#f7f8fa surfaces, var(--line)
   borders, var(--ink)/var(--muted) text, single cyan accent, soft
   shadows. Motion/structure unchanged — colours only.
   Section is `section cvx` (light) already, so no wrapper edit needed.
   =================================================================== */

/* ---------- ACCESS CONTROL (.cv-acc) — clean light schematic ---------- */
.cv-acc{
  background:#f7f8fa;
  display:flex;align-items:center;justify-content:center;
}
/* the door frame: light card surface, ink/line geometry, soft shadow */
.cv-acc .acc-door{
  background:
    radial-gradient(circle at 50% 45%,var(--soft,#E6F6FC),#fff 75%);
  box-shadow:0 10px 26px -14px rgba(22,24,28,.30);
  border:1px solid var(--line);
}
/* door leaves: light brushed panels with a clear line edge */
.cv-acc .acc-dl,
.cv-acc .acc-dr{
  background:linear-gradient(180deg,#f3f5f7,#e7eaee);
  border:1px solid var(--line);
}
/* card reader: white module, line border, ink text */
.cv-acc .acc-reader{
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 1px 3px rgba(22,24,28,.10);
}
/* status light: muted->cyan(grant). Soft cyan glow, no neon red on white */
.cv-acc .acc-light{
  background:var(--muted);
  box-shadow:0 0 0 3px rgba(154,160,166,.18);
}
.cv-acc .acc-fob svg{
  color:var(--ink);
  filter:drop-shadow(0 1px 2px rgba(22,24,28,.20));
}
/* "access granted" pill: cyan-on-white, legible */
.cv-acc .acc-msg{
  color:var(--cyan-hover,var(--cyan-hover));
  background:var(--soft,#E6F6FC);
  border:1px solid rgba(21,119,224,.30);
}
/* light cycle: idle = muted grey, granted = cyan (replaces red->green) */
@keyframes accLight{
  0%,30%{background:var(--muted);box-shadow:0 0 0 3px rgba(154,160,166,.18)}
  37%,78%{background:var(--cyan);box-shadow:0 0 0 3px rgba(21,119,224,.22)}
  85%,100%{background:var(--muted);box-shadow:0 0 0 3px rgba(154,160,166,.18)}
}

/* ---------- PEOPLE COUNTING (.cv-count) — overhead schematic on white ---------- */
.cv-count{
  background:
    radial-gradient(125% 120% at 50% -10%,#fff 0,#f7f8fa 55%,#f3f5f7 100%);
  color:var(--ink);
}
/* floor grid: faint ink lines instead of cyan-on-black */
.cv-count .pc-floor{
  background-image:
    linear-gradient(rgba(22,24,28,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(22,24,28,.05) 1px,transparent 1px);
}
/* walkway band: soft cyan wash with line edges */
.cv-count .pc-walk{
  background:linear-gradient(180deg,rgba(21,119,224,.06),rgba(21,119,224,.02) 50%,rgba(21,119,224,.06));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
/* vignette: very light, just frames the scene (no black) */
.cv-count .pc-vignette{
  background:radial-gradient(120% 100% at 50% 50%,transparent 60%,rgba(22,24,28,.05));
}
/* count line: dashed cyan, still reads on white */
.cv-count .pc-line{
  background:repeating-linear-gradient(180deg,rgba(21,119,224,.55) 0 7px,transparent 7px 15px);
}
/* crossing ping glow: soft cyan */
.cv-count .pc-line-glow{
  background:radial-gradient(50% 50% at 50% 50%,rgba(21,119,224,.55),rgba(21,119,224,0) 70%);
}
/* silhouettes: solid cyan figures (entering) — readable on white */
.cv-count .pc-fig{
  filter:drop-shadow(0 4px 6px rgba(22,24,28,.18));
}
.cv-count .pc-body{
  background:linear-gradient(180deg,#3fb9e8,var(--cyan));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.40);
}
.cv-count .pc-head{
  background:linear-gradient(180deg,#5cc6ed,#0e93c8);
}
/* leaving figure: ink/grey so the two directions still read distinctly */
.cv-count .pc-out .pc-body{
  background:linear-gradient(180deg,#6b7078,var(--ink-soft,#5C6168));
}
.cv-count .pc-out .pc-head{
  background:linear-gradient(180deg,#878d95,#4a4f57);
}
/* direction arrow: muted cyan, no neon shadow */
.cv-count .pc-arrow{
  color:rgba(21,119,224,.55);
  text-shadow:none;
}
/* dashboard board: light grey card, line top border */
.cv-count .pc-board{
  border-top:1px solid var(--line);
  background:#f3f5f7;
}
/* counter number: ink, no glow */
.cv-count .pc-counter{
  color:var(--ink);
  text-shadow:none;
}
.cv-count .pc-cap{color:var(--muted)}
/* live bar track + fill: track = gauge grey, fill = cyan */
.cv-count .pc-bar{
  background:#eef0f3;
}
.cv-count .pc-bar-fill{
  background:linear-gradient(90deg,var(--cyan),#3fb9e8);
  box-shadow:none;
}
/* REC label: muted text, cyan dot (single accent, no neon red) */
.cv-count .pc-rec{color:var(--muted)}
.cv-count .pc-rec i{
  background:var(--cyan);
  box-shadow:0 0 0 3px rgba(21,119,224,.18);
}

/* ---------- LOITERING (.cv-loiter) — light schematic feed ---------- */
.cv-loiter{
  background:
    radial-gradient(120% 90% at 50% -10%,#fff 0%,#f7f8fa 42%,#f3f5f7 72%,#eef0f3 100%);
  color:var(--ink);
}
/* floor grid: faint ink lines */
.cv-loiter .lo-grid{
  background-image:
    linear-gradient(rgba(22,24,28,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(22,24,28,.05) 1px,transparent 1px);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.55) 0%,#000 42%);
          mask-image:linear-gradient(180deg,rgba(0,0,0,.55) 0%,#000 42%);
}
/* vignette: light inner frame instead of heavy black */
.cv-loiter .lo-vignette{
  box-shadow:inset 0 0 60px rgba(22,24,28,.06),inset 0 0 0 1px rgba(22,24,28,.03);
}
/* camera scan sweep: soft cyan wash */
.cv-loiter .lo-scan{
  background:linear-gradient(180deg,transparent,rgba(21,119,224,.10) 55%,rgba(21,119,224,.04) 100%);
}
/* HUD chrome: muted labels, no dark text-shadow */
.cv-loiter .lo-hud{
  color:var(--muted);
  text-shadow:none;
}
/* "REC" cluster: keep a recognisable warn-red, but the dashboard's legible #d2453f */
.cv-loiter .lo-hud-tr{color:#d2453f}
.cv-loiter .lo-rec{
  background:#d2453f;
  box-shadow:0 0 0 3px rgba(210,69,63,.18);
}
/* watch zone: cyan dashed rect over a faint cyan fill */
.cv-loiter .lo-zone{
  border:2px dashed var(--cyan);
  background:rgba(21,119,224,.05);
  box-shadow:0 0 0 1px rgba(21,119,224,.12) inset,0 0 0 4px rgba(21,119,224,.05);
}
/* zone label: cyan text on a WHITE chip (was dark #0c1016) so it stays visible */
.cv-loiter .lo-zone-label{
  color:var(--cyan-hover,var(--cyan-hover));
  background:#fff;
}
/* idle = cyan, alert = warn-red (#d2453f) — recoloured so both read on white */
@keyframes loZone{
  0%,74.9%{border-color:var(--cyan);background:rgba(21,119,224,.05);
    box-shadow:0 0 0 1px rgba(21,119,224,.12) inset,0 0 0 4px rgba(21,119,224,.05)}
  75%{border-color:#d2453f;background:rgba(210,69,63,.10);
    box-shadow:0 0 0 1px rgba(210,69,63,.22) inset,0 0 0 4px rgba(210,69,63,.12)}
  93%{border-color:#d2453f;background:rgba(210,69,63,.08);
    box-shadow:0 0 0 1px rgba(210,69,63,.18) inset,0 0 0 4px rgba(210,69,63,.08)}
  96%,100%{border-color:var(--cyan);background:rgba(21,119,224,.05);
    box-shadow:0 0 0 1px rgba(21,119,224,.12) inset,0 0 0 4px rgba(21,119,224,.05)}
}
@keyframes loZoneLabel{
  0%,74.9%{color:var(--cyan-hover,var(--cyan-hover))}
  75%,93%{color:#d2453f}
  96%,100%{color:var(--cyan-hover,var(--cyan-hover))}
}
/* pass-through people: solid cyan, soft ink shadow (was light-on-dark) */
.cv-loiter .lo-person{
  filter:drop-shadow(0 3px 4px rgba(22,24,28,.20));
}
.cv-loiter .lo-person .lo-svg circle,
.cv-loiter .lo-person .lo-svg rect{fill:var(--cyan)}
/* the loiterer: ink/grey so it stands apart from cyan passers-by on white */
.cv-loiter .lo-figure{
  filter:drop-shadow(0 3px 5px rgba(22,24,28,.22));
}
.cv-loiter .lo-figure .lo-svg circle,
.cv-loiter .lo-figure .lo-svg rect{fill:var(--ink-soft,#5C6168)}
/* loiterer gains a warn-red glow at ring-complete (was neon on black) */
@keyframes loFigColour{
  0%,74.9%{filter:drop-shadow(0 3px 5px rgba(22,24,28,.22))}
  75%,88%{filter:drop-shadow(0 3px 5px rgba(22,24,28,.22)) drop-shadow(0 0 7px rgba(210,69,63,.55))}
  90%,100%{filter:drop-shadow(0 3px 5px rgba(22,24,28,.22))}
}
/* countdown ring: cyan fill on a faint cyan track, snap warn-red at complete */
@keyframes loRingFill{
  0%,62%{
    background:conic-gradient(var(--cyan) 0deg,rgba(21,119,224,.14) 0deg);
    box-shadow:0 0 0 rgba(21,119,224,0);
  }
  68%{
    background:conic-gradient(var(--cyan) 170deg,rgba(21,119,224,.14) 170deg);
    box-shadow:0 0 0 3px rgba(21,119,224,.14);
  }
  74.9%{
    background:conic-gradient(var(--cyan) 358deg,rgba(21,119,224,.14) 358deg);
    box-shadow:0 0 0 4px rgba(21,119,224,.18);
  }
  75%{
    background:conic-gradient(#d2453f 360deg,rgba(210,69,63,.16) 360deg);
    box-shadow:0 0 0 5px rgba(210,69,63,.20);
  }
  76%,100%{
    background:conic-gradient(#d2453f 360deg,rgba(210,69,63,.16) 360deg);
    box-shadow:0 0 0 4px rgba(210,69,63,.16);
  }
}
/* alert badge: warn-red text/border on a white pill, soft shadow */
.cv-loiter .lo-badge{
  color:#d2453f;
  background:#fff;
  border:1px solid rgba(210,69,63,.40);
  box-shadow:0 10px 24px -12px rgba(22,24,28,.30),0 0 0 1px rgba(210,69,63,.06) inset;
}
.cv-loiter .lo-badge-dot{
  background:#d2453f;
  box-shadow:0 0 0 3px rgba(210,69,63,.18);
}

/* ---- cctv-group-2 ---- */
/* ============================================================
   CCTV GROUP-2 — LIGHT / BI-DASHBOARD RE-SKIN (ALPR · INTEGRATION · MULTI)
   Appended last: same selectors win by source order. Colours only;
   layout/grid/animation timing untouched. Semantic encodings kept
   (green = live/armed, red = alert/hit, cyan = single brand accent),
   each grounded for legibility on white.
   ============================================================ */

/* ============ ALPR (.cv-alpr / .lp-*) ============ */
.cv-alpr{background:radial-gradient(135% 120% at 28% -15%,#ffffff 0%,#f6f8fa 48%,#f3f5f7 100%)}
/* road becomes a clean light schematic lane band */
.cv-alpr .lp-road::before{background:linear-gradient(180deg,#fafbfc 0%,#f3f5f7 55%,#eef0f3 100%);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:inset 0 10px 20px -16px rgba(22,24,28,.18)}
.cv-alpr .lp-lane{background:repeating-linear-gradient(90deg,rgba(154,160,166,.55) 0 20px,transparent 20px 44px);opacity:.9}
/* gantry / scan beam → cyan on light */
.cv-alpr .lp-gantry{background:linear-gradient(180deg,rgba(21,119,224,.45) 0%,rgba(21,119,224,.10) 60%,transparent 100%)}
.cv-alpr .lp-scan{background:linear-gradient(180deg,rgba(21,119,224,.42) 0%,rgba(21,119,224,.12) 55%,rgba(21,119,224,0) 100%);border-bottom:2px solid var(--cyan);box-shadow:0 0 14px rgba(21,119,224,.40),inset 0 0 8px rgba(21,119,224,.20)}
/* camera housing — light metal */
.cv-alpr .lp-housing{background:linear-gradient(180deg,#ffffff 0%,#eef0f3 55%,#d9dde2 100%);box-shadow:0 4px 9px -3px rgba(22,24,28,.30),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 3px rgba(22,24,28,.10)}
.cv-alpr .lp-housing::after{background:var(--cyan);box-shadow:0 0 6px rgba(21,119,224,.7),0 0 2px #fff}
.cv-alpr .lp-lens{background:radial-gradient(60% 120% at 50% 0%,#dfe4ea 0%,#aeb6bf 70%);box-shadow:inset 0 0 0 1px rgba(21,119,224,.55),0 2px 4px rgba(22,24,28,.22)}
.cv-alpr .lp-lens::after{background:rgba(21,119,224,.9);box-shadow:0 0 6px rgba(21,119,224,.7)}
.cv-alpr .lp-arm{background:linear-gradient(180deg,#cdd3da,#9aa0a6)}
/* cars — light schematic vehicles (override the two body tints) */
.cv-alpr .lp-car{--c1:#cfd6dd;--c2:#aab2bb}
.cv-alpr .lp-body{box-shadow:0 5px 9px -4px rgba(22,24,28,.28),inset 0 1px 0 rgba(255,255,255,.7),inset 0 -3px 5px rgba(22,24,28,.10)}
.cv-alpr .lp-body::before{background:linear-gradient(180deg,rgba(21,119,224,.30),rgba(21,119,224,.10));border:1px solid rgba(255,255,255,.7)}
.cv-alpr .lp-body::after{background:rgba(196,129,31,.85);box-shadow:0 0 6px rgba(196,129,31,.45)}
.cv-alpr .lp-plate{background:linear-gradient(180deg,#ffffff,#eef0f3);color:#2B3036;box-shadow:0 0 0 1px rgba(22,24,28,.30),0 1px 2px rgba(22,24,28,.22)}
.cv-alpr .lp-car i{background:radial-gradient(circle at 50% 40%,#6b727a 38%,#5C6168 56%);box-shadow:0 1px 2px rgba(22,24,28,.35)}
/* watchlist panel — white BI card */
.cv-alpr .lp-list{border-left:1px solid var(--line);background:linear-gradient(180deg,#fafbfc,#f6f8fa);box-shadow:inset 1px 0 0 rgba(255,255,255,.6)}
.cv-alpr .lp-head{color:var(--muted);border-bottom:1px solid var(--line)}
.cv-alpr .lp-head b{background:#2bbf6b;box-shadow:0 0 6px rgba(43,191,107,.55)}
.cv-alpr .lp-row{background:linear-gradient(180deg,rgba(21,119,224,.12),rgba(21,119,224,.05));border:1px solid rgba(21,119,224,.32);box-shadow:0 1px 3px rgba(22,24,28,.10)}
.cv-alpr .lp-pl{color:#0a6f95;text-shadow:none}
.cv-alpr .lp-ts{color:var(--muted)}
.cv-alpr .lp-row.lp-hit{background:linear-gradient(180deg,rgba(210,69,63,.14),rgba(210,69,63,.06));border-color:rgba(210,69,63,.45)}
.cv-alpr .lp-row.lp-hit .lp-pl{color:#c0322c;text-shadow:none}
.cv-alpr .lp-row.lp-hit .lp-ts{color:#b15a54}
.cv-alpr .lp-dot{background:#d2453f;box-shadow:0 0 7px rgba(210,69,63,.6),0 0 2px #fff}
/* live LED keyframe glow — soften greens to light-theme */
@keyframes lpLive{0%,100%{opacity:1;box-shadow:0 0 6px rgba(43,191,107,.55)}50%{opacity:.4;box-shadow:0 0 3px rgba(43,191,107,.4)}}

/* ============ INTEGRATED SYSTEMS (.cv-int / .in-*) ============ */
.cv-int{background:radial-gradient(130% 120% at 18% 12%,#ffffff 0,#f6f8fa 55%,#f3f5f7 100%);color:var(--ink)}
.cv-int .in-bg{background:radial-gradient(55% 60% at 76% 22%,rgba(21,119,224,.10),transparent 70%)}
.cv-int .in-grid{background-image:linear-gradient(rgba(21,119,224,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(21,119,224,.06) 1px,transparent 1px)}
/* wires — replace dark-glow SVG gradients with flat cyan / muted strokes */
.cv-int .in-wire{stroke:rgba(21,119,224,.55)}
.cv-int .in-wire-amb{stroke:rgba(154,160,166,.55)}
/* nodes — white BI cards */
.cv-int .in-node{background:#ffffff;border:1px solid var(--line);box-shadow:0 8px 22px -14px rgba(22,24,28,.40)}
.cv-int .in-ico{color:var(--muted)}
.cv-int .in-lbl{color:var(--ink-soft,#5C6168)}
.cv-int .in-dot{background:var(--muted)}
.cv-int .in-alarm .in-dot{background:#2bbf6b;box-shadow:0 0 5px rgba(43,191,107,.5)}
.cv-int .in-flag{color:#c0322c;background:rgba(210,69,63,.12);border:1px solid rgba(210,69,63,.45)}
.cv-int .in-hub .in-ring{border:1.5px solid var(--cyan)}
/* live feed → clean light schematic frame */
.cv-int .in-feed{background:linear-gradient(180deg,#ffffff,#f3f5f7);border:1px solid rgba(21,119,224,.45);box-shadow:0 12px 26px -14px rgba(22,24,28,.40),0 0 0 1px var(--line)}
.cv-int .in-feed-grid{background-image:linear-gradient(rgba(21,119,224,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(21,119,224,.12) 1px,transparent 1px)}
.cv-int .in-scan{background:linear-gradient(180deg,rgba(21,119,224,.30),rgba(21,119,224,0))}
.cv-int .in-fig{background:linear-gradient(180deg,#7fc7e6,var(--cyan));box-shadow:0 0 8px rgba(21,119,224,.30)}
.cv-int .in-fig::before{background:#7fc7e6}
.cv-int .in-rec{color:#c0322c}
.cv-int .in-rec span{background:#d2453f;box-shadow:0 0 5px rgba(210,69,63,.55)}
.cv-int .in-feed-t{color:var(--muted)}
/* travelling pulse — cyan dot, soft glow */
.cv-int .in-pulse{background:var(--cyan);box-shadow:0 0 8px 2px rgba(21,119,224,.55),0 0 14px 5px rgba(21,119,224,.25)}
.cv-int .in-status{color:var(--ink-soft,#5C6168)}
.cv-int .in-status::before{background:var(--cyan);box-shadow:0 0 6px rgba(21,119,224,.6)}
/* node state keyframes — rewrite dark borders/glows to light */
@keyframes inArmed{0%,100%{box-shadow:0 0 0 0 rgba(43,191,107,.4)}50%{box-shadow:0 0 8px 1px rgba(43,191,107,.6)}}
@keyframes inAlarmAmb{0%,100%{color:var(--muted)}48%,52%{color:var(--ink-soft,#5C6168)}}
@keyframes inDoorBox{
  0%,9%{border-color:var(--line);box-shadow:0 8px 22px -14px rgba(22,24,28,.40)}
  12%{border-color:rgba(210,69,63,.9);box-shadow:0 0 18px 2px rgba(210,69,63,.40)}
  16%{border-color:rgba(210,69,63,.55);box-shadow:0 0 12px rgba(210,69,63,.28)}
  22%{border-color:rgba(210,69,63,.75);box-shadow:0 0 14px rgba(210,69,63,.34)}
  34%,100%{border-color:var(--line);box-shadow:0 8px 22px -14px rgba(22,24,28,.40)}
}
@keyframes inDoorIco{0%,9%{color:var(--muted)}12%,30%{color:#d2453f}40%,100%{color:var(--muted)}}
@keyframes inDoorDot{0%,9%{background:var(--muted);box-shadow:none}12%,30%{background:#d2453f;box-shadow:0 0 7px rgba(210,69,63,.6)}40%,100%{background:var(--muted);box-shadow:none}}
@keyframes inHubBox{
  0%,27%{border-color:var(--line);box-shadow:0 8px 22px -14px rgba(22,24,28,.40)}
  28%{border-color:var(--cyan);box-shadow:0 0 22px 2px rgba(21,119,224,.40)}
  44%{border-color:rgba(21,119,224,.7);box-shadow:0 0 16px rgba(21,119,224,.30)}
  62%{border-color:rgba(21,119,224,.45);box-shadow:0 0 12px rgba(21,119,224,.22)}
  82%,100%{border-color:var(--line);box-shadow:0 8px 22px -14px rgba(22,24,28,.40)}
}
@keyframes inHubIco{0%,27%{color:var(--muted)}28%,70%{color:var(--cyan)}86%,100%{color:var(--muted)}}
@keyframes inCamBox{
  0%,43%{border-color:var(--line);box-shadow:0 8px 22px -14px rgba(22,24,28,.40)}
  44%{border-color:var(--cyan);box-shadow:0 0 22px 2px rgba(21,119,224,.40)}
  82%{border-color:rgba(21,119,224,.6);box-shadow:0 0 14px rgba(21,119,224,.28)}
  92%,100%{border-color:var(--line);box-shadow:0 8px 22px -14px rgba(22,24,28,.40)}
}
@keyframes inCamIco{0%,43%{color:var(--muted)}44%,86%{color:var(--cyan)}94%,100%{color:var(--muted)}}
@keyframes inCamDot{0%,43%{background:var(--muted);box-shadow:none}44%,86%{background:var(--cyan);box-shadow:0 0 7px rgba(21,119,224,.6)}94%,100%{background:var(--muted);box-shadow:none}}

/* ============ MULTI-SITE (.cv-multi / .ms-*) ============ */
.cv-multi{background:radial-gradient(130% 130% at 78% 50%,#ffffff,#f6f8fa 70%,#f3f5f7)}
.ms-bg{background-image:linear-gradient(rgba(21,119,224,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(21,119,224,.06) 1px,transparent 1px)}
.ms-glow{background:radial-gradient(closest-side,rgba(21,119,224,.10),transparent 72%)}
/* site cards — white BI cards */
.ms-site{background:#ffffff;border:1px solid var(--line);box-shadow:0 4px 14px -10px rgba(22,24,28,.35)}
.ms-cam{background:#f3f5f7;border:1px solid rgba(21,119,224,.40)}
.ms-cam::after{background:var(--cyan);box-shadow:0 0 5px rgba(21,119,224,.6)}
.ms-name{color:var(--ink)}
.ms-armed{color:#1f9d57}
.ms-armdot{background:#2bbf6b;box-shadow:0 0 4px rgba(43,191,107,.5)}
.ms-port{background:var(--cyan);box-shadow:0 0 8px rgba(21,119,224,.6)}
/* connector wires + pulses */
.ms-wire{stroke:rgba(154,160,166,.5)}
.ms-pulse{fill:var(--cyan);filter:drop-shadow(0 0 4px rgba(21,119,224,.7))}
/* command dashboard — white panel */
.ms-dash{background:#ffffff;border:1px solid var(--line);box-shadow:0 10px 30px -16px rgba(22,24,28,.40),inset 0 0 24px rgba(21,119,224,.04)}
.ms-dhead{border-bottom:1px solid var(--line)}
.ms-dtitle{color:var(--ink)}
.ms-live{background:#2bbf6b;box-shadow:0 0 5px rgba(43,191,107,.5)}
.ms-aggn{color:var(--cyan)}
.ms-agglbl{color:var(--muted)}
.ms-row{background:#f7f8fa;border:1px solid var(--line)}
.ms-row::before{background:var(--cyan)}
.ms-rdot{background:#c2c8ce}
.ms-rname{color:var(--muted)}
.ms-rstat{color:#aeb4ba}
.ms-sweep{background:linear-gradient(90deg,transparent,rgba(21,119,224,.10),transparent)}
/* choreography keyframes — rewrite dark borders/glows + dim greys to light */
@keyframes msCardS0{0%,2%{border-color:var(--line);box-shadow:0 4px 14px -10px rgba(22,24,28,.35)}4%{border-color:rgba(21,119,224,.7);box-shadow:0 0 16px -2px rgba(21,119,224,.40)}22%{border-color:rgba(21,119,224,.4)}30%,100%{border-color:var(--line);box-shadow:0 4px 14px -10px rgba(22,24,28,.35)}}
@keyframes msCardS1{0%,37%{border-color:var(--line);box-shadow:0 4px 14px -10px rgba(22,24,28,.35)}39%{border-color:rgba(21,119,224,.7);box-shadow:0 0 16px -2px rgba(21,119,224,.40)}55%{border-color:rgba(21,119,224,.4)}63%,100%{border-color:var(--line);box-shadow:0 4px 14px -10px rgba(22,24,28,.35)}}
@keyframes msCardS2{0%,70%{border-color:var(--line);box-shadow:0 4px 14px -10px rgba(22,24,28,.35)}72%{border-color:rgba(21,119,224,.7);box-shadow:0 0 16px -2px rgba(21,119,224,.40)}88%{border-color:rgba(21,119,224,.4)}96%,100%{border-color:var(--line);box-shadow:0 4px 14px -10px rgba(22,24,28,.35)}}
@keyframes msRowS0{0%,21%{background:#f7f8fa;border-color:var(--line)}22%{background:rgba(21,119,224,.18);border-color:rgba(21,119,224,.6)}26%{background:rgba(21,119,224,.08);border-color:rgba(21,119,224,.4)}99%{background:rgba(21,119,224,.08);border-color:rgba(21,119,224,.4)}100%{background:#f7f8fa;border-color:var(--line)}}
@keyframes msRowS1{0%,54%{background:#f7f8fa;border-color:var(--line)}55%{background:rgba(21,119,224,.18);border-color:rgba(21,119,224,.6)}59%{background:rgba(21,119,224,.08);border-color:rgba(21,119,224,.4)}99%{background:rgba(21,119,224,.08);border-color:rgba(21,119,224,.4)}100%{background:#f7f8fa;border-color:var(--line)}}
@keyframes msRowS2{0%,87%{background:#f7f8fa;border-color:var(--line)}88%{background:rgba(21,119,224,.18);border-color:rgba(21,119,224,.6)}92%{background:rgba(21,119,224,.08);border-color:rgba(21,119,224,.4)}99%{background:rgba(21,119,224,.08);border-color:rgba(21,119,224,.4)}100%{background:#f7f8fa;border-color:var(--line)}}
@keyframes msDotS0{0%,21%{background:#c2c8ce;box-shadow:none;transform:scale(1)}22%{background:#2bbf6b;box-shadow:0 0 7px rgba(43,191,107,.6);transform:scale(1.5)}28%{transform:scale(1)}99%{background:#2bbf6b;box-shadow:0 0 5px rgba(43,191,107,.5);transform:scale(1)}100%{background:#c2c8ce;box-shadow:none;transform:scale(1)}}
@keyframes msDotS1{0%,54%{background:#c2c8ce;box-shadow:none;transform:scale(1)}55%{background:#2bbf6b;box-shadow:0 0 7px rgba(43,191,107,.6);transform:scale(1.5)}61%{transform:scale(1)}99%{background:#2bbf6b;box-shadow:0 0 5px rgba(43,191,107,.5);transform:scale(1)}100%{background:#c2c8ce;box-shadow:none;transform:scale(1)}}
@keyframes msDotS2{0%,87%{background:#c2c8ce;box-shadow:none;transform:scale(1)}88%{background:#2bbf6b;box-shadow:0 0 7px rgba(43,191,107,.6);transform:scale(1.5)}94%{transform:scale(1)}99%{background:#2bbf6b;box-shadow:0 0 5px rgba(43,191,107,.5);transform:scale(1)}100%{background:#c2c8ce;box-shadow:none;transform:scale(1)}}
@keyframes msNameS0{0%,21%{color:var(--muted)}22%,99%{color:var(--ink)}100%{color:var(--muted)}}
@keyframes msNameS1{0%,54%{color:var(--muted)}55%,99%{color:var(--ink)}100%{color:var(--muted)}}
@keyframes msNameS2{0%,87%{color:var(--muted)}88%,99%{color:var(--ink)}100%{color:var(--muted)}}
@keyframes msStatS0{0%,21%{opacity:0;color:#aeb4ba}22%,99%{opacity:1;color:#1f9d57}100%{opacity:0;color:#aeb4ba}}
@keyframes msStatS1{0%,54%{opacity:0;color:#aeb4ba}55%,99%{opacity:1;color:#1f9d57}100%{opacity:0;color:#aeb4ba}}
@keyframes msStatS2{0%,87%{opacity:0;color:#aeb4ba}88%,99%{opacity:1;color:#1f9d57}100%{opacity:0;color:#aeb4ba}}
@keyframes msCamRec{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes msHeartbeat{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}

/* ---- avdViz ---- */
/* ===== avdViz → light BI-dashboard re-skin (appended; wins by source order) ===== */
/* Device cards: dark glass → white cards, ink text, cyan icons, green status dot */
.avd-dev{background:#fff;border:1px solid var(--line);color:var(--ink);box-shadow:0 1px 2px rgba(22,24,28,.04)}
.avd-dev svg{color:var(--cyan)}
.avd-dev b{color:var(--ink)}
.avd-dev span{color:var(--muted)}
.avd-dev::after{background:#2bbf6b;box-shadow:0 0 0 3px rgba(43,191,107,.18)}
@keyframes avdDev{0%,40%,100%{border-color:var(--line);background:#fff}12%{border-color:var(--cyan);background:var(--soft)}}

/* Encrypted tunnel: neon-on-dark → cyan-on-light with soft (non-neon) shadows */
.avd-tunnel-line{background:linear-gradient(90deg,rgba(21,119,224,.22),rgba(21,119,224,.6));border-radius:2px}
.avd-lock{background:#fff;border:1px solid var(--cyan);color:var(--cyan);box-shadow:0 6px 16px -6px rgba(21,119,224,.45)}
.avd-pulse{background:var(--cyan);box-shadow:0 0 0 3px rgba(21,119,224,.18)}

/* Virtual-desktop screen: dark device mock → clean light schematic panel (dashboard recipe) */
.avd-screen{background:#fff;border:1px solid var(--line);box-shadow:0 18px 50px -28px rgba(22,24,28,.45)}
.avd-top{background:#f3f5f7;color:var(--ink);border-bottom:1px solid var(--line)}
.avd-top .db-dots i:nth-child(1){background:#f0a8a8}
.avd-top .db-dots i:nth-child(2){background:#f0d59a}
.avd-top .db-dots i:nth-child(3){background:#a8d9b0}
.avd-sec{color:#1f9d57}

/* App tiles keep their distinct per-app brand colours (legible on white); only the
   glow ring in the keyframe was white-on-dark, so re-skin it to ink + soft shadow */
.avd-app{color:var(--ink)}
.avd-app b{color:var(--ink)}
@keyframes avdApp{0%,86%,100%{box-shadow:0 4px 10px -4px rgba(22,24,28,.18)}43%{box-shadow:0 0 0 3px rgba(21,119,224,.20),0 10px 20px -6px rgba(22,24,28,.30)}}

/* Taskbar: dark chrome → light grey bar; cyan start, grey pins, muted clock */
.avd-task{background:#f3f5f7;border-top:1px solid var(--line)}
.avd-start{background:var(--cyan);box-shadow:0 2px 6px -2px rgba(21,119,224,.5)}
.avd-pin{background:#eef0f3;border:1px solid var(--line)}
.avd-clock{color:var(--muted)}

/* Caption */
.avd-note{color:var(--muted)}
.avd-note strong{color:var(--ink)}

/* ---- tcx+sdwan+onsite+helpdesk ---- */
/* =========================================================================
   LIGHT / BI-DASHBOARD RE-SKIN  —  tcx (console bar) + sd-wan + onsite + helpdesk
   Appended at end of site.css so these selectors win by source order.
   Only colours / backgrounds / borders / shadows change; layout + motion intact.
   ========================================================================= */

/* ---------- 3CX admin console: light the dark title bar ----------
   .tcx panel is already a white BI card; only .tcx-top was dark (#0f1722). */
.tcx-top{background:#f3f5f7;color:var(--ink);border-bottom:1px solid var(--line)}
.tcx-brand{color:var(--cyan-text)}                  /* cyan brand mark, AA-legible on light */
.tcx-title{color:var(--ink)}
.tcx-live{color:var(--muted)}
.tcx-live>span{background:#2bbf6b;box-shadow:none}   /* drop the neon glow on white */

/* =========================================================================
   SD-WAN FAILOVER  (.sdwan / .sd-*)  — section now light (section--alt)
   ========================================================================= */
.sdwan-sec .lead{color:var(--ink-soft)}

/* Nodes: white tiles with ink geometry, cyan only for the router */
.sd-ico{background:#fff;border:1px solid var(--line);color:var(--ink-soft);
  box-shadow:0 6px 18px -12px rgba(22,24,28,.4)}
.sd-router .sd-ico{background:var(--soft);border-color:rgba(21,119,224,.55);color:var(--cyan-hover)}
.sd-glow{box-shadow:0 0 0 0 rgba(21,119,224,.45)}   /* keep pulse ring, brand cyan */
.sd-lbl{color:var(--ink)}

/* Rails: light tracks on white instead of translucent-white-on-dark */
.sd-rail{background:#eef0f3;border:1px solid var(--line)}
.sd-lan{border-color:rgba(21,119,224,.45);background:var(--soft)}
/* flowing packets: keep cyan but use the brand cyan (was bright #5CC9F0) */
.sd-fill{background:repeating-linear-gradient(90deg,
  rgba(21,119,224,.95) 0 9px,rgba(21,119,224,0) 9px 22px);background-size:22px 100%}

/* Animated rail state keyframes — re-tint for white bg (cyan active, red = drop) */
@keyframes sdNbnRail{
  0%,42%{border-color:rgba(21,119,224,.5);background:var(--soft)}
  48%,95%{border-color:rgba(214,69,63,.6);background:rgba(214,69,63,.1)}
  99%,100%{border-color:rgba(21,119,224,.5);background:var(--soft)}}
@keyframes sd4gRail{
  0%,52%{border-color:var(--line);background:#eef0f3}
  57%,94%{border-color:rgba(21,119,224,.5);background:var(--soft)}
  99%,100%{border-color:var(--line);background:#eef0f3}}

/* The "line cut" scissors mark — keep red (it encodes a dropped link), soften glow */
.sd-cut::before,.sd-cut::after{background:#d6453f;box-shadow:0 0 6px rgba(214,69,63,.5)}

/* Rail tags */
.sd-tag-nbn{color:var(--ink-soft)}
.sd-tag-4g{color:var(--muted)}
@keyframes sd4gTag{
  0%,52%{color:var(--muted)}
  57%,94%{color:var(--cyan-hover)}
  99%,100%{color:var(--muted)}}

/* "Switched to 4G/5G" badge: cyan pill with white text reads on light too */
.sd-badge{color:#fff;background:var(--cyan);box-shadow:0 6px 16px -6px rgba(21,119,224,.5)}

/* "Still working" state chip + its pulsing dot → brand cyan, soft shadow */
.sd-state{color:var(--cyan-text)}
.sd-state::before{background:var(--cyan);box-shadow:0 0 7px rgba(21,119,224,.55)}

/* =========================================================================
   HELP DESK SERVICE STANDARDS  (.hd-*)  — section now light (section--alt)
   ========================================================================= */
.hd-metrics .lead{color:var(--ink-soft)}

/* Cells: white BI cards with hairline border */
.hd-cell{background:#fff;border:1px solid var(--line);
  box-shadow:0 6px 18px -14px rgba(22,24,28,.4)}
.hd-cell:hover,.hd-cell:focus-visible{border-color:rgba(21,119,224,.55);
  background:#fafbfc;box-shadow:0 10px 26px -16px rgba(22,24,28,.45)}

/* Big numbers + labels: ink primary, cyan for the highlighted stat */
.hd-big{color:var(--ink)}
.hd-hi .hd-big{color:var(--cyan)}
.hd-lbl{color:var(--ink-soft)}
.hd-info{color:var(--muted)}
.hd-cell:hover .hd-info,.hd-cell:focus-within .hd-info{color:var(--cyan)}

/* Tooltip: light popover (was near-black #0b0d11) */
.hd-tip{background:#fff;border:1px solid var(--line);color:var(--ink-soft);
  box-shadow:0 18px 44px -22px rgba(22,24,28,.5)}
.hd-tip::before{background:#fff;border-left:1px solid var(--line);border-top:1px solid var(--line)}

/* =========================================================================
   ONSITE STORYBOARD  (.os-*)  — section now light (section--alt)
   Reinterpret the SVG scenes as clean ink/grey schematics on white.
   ========================================================================= */
.onsite-sec .lead{color:var(--ink-soft)}

/* Scene cards → white BI panels */
.os-scene{background:#fff;border:1px solid var(--line);
  box-shadow:0 6px 18px -14px rgba(22,24,28,.4)}

/* SVG geometry: ink strokes + soft grey fills instead of white-on-dark */
.os-edge{stroke:var(--ink-soft)}
.os-fill{fill:#f3f5f7}
.os-screen{fill:var(--soft);stroke:var(--ink-soft)}
.os-guide{stroke:var(--muted)}

/* Cyan accents stay cyan but use the brand token (was bright #5CC9F0) */
.os-cyan-f{fill:var(--cyan)}
.os-led,.os-wallnode,.os-dnode{fill:var(--cyan)}
.os-cable{stroke:var(--cyan)}
/* check-mark inside the cyan tick: white reads on cyan on light bg */
.os-check{stroke:#fff}

/* Captions */
.os-title{color:var(--ink)}
.os-cap{color:var(--muted)}

/* ===================================================================
   SIP Connect — visual widgets + classier polish
   =================================================================== */
/* Proof strip — slim trust band under the page head on every inner page */
.proofstrip{background:linear-gradient(90deg,#fff, var(--paper-2));border-bottom:1px solid var(--line)}
.proofstrip-row{display:flex;flex-wrap:wrap;gap:12px 34px;justify-content:center;align-items:center;padding:15px 0}
.proof-item{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:600;font-size:13.5px;color:var(--ink-soft);white-space:nowrap}
.proof-ic{display:grid;place-items:center;color:var(--cyan)}
.proof-item+.proof-item{position:relative}
.proof-item+.proof-item::before{content:"";position:absolute;left:-17px;top:50%;width:1px;height:14px;background:var(--line);transform:translateY(-50%)}
@media(max-width:680px){.proof-item+.proof-item::before{display:none}.proofstrip-row{gap:9px 18px}}

/* Speed-tier bars (internet pages) */
.spd-list{display:flex;flex-direction:column;gap:14px;max-width:880px;margin:0 auto}
.spd-row{display:grid;grid-template-columns:minmax(168px,1.1fr) 2.3fr auto;align-items:center;gap:22px;padding:17px 24px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s,border-color .18s}
.spd-row:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#cfe6f6}
.spd-name{display:block;font-family:var(--font-display);font-weight:700;color:var(--ink);font-size:16px;line-height:1.15}
.spd-sub{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
.spd-track{height:12px;border-radius:20px;background:var(--paper-2);overflow:hidden}
.spd-fill{display:block;height:100%;width:var(--w);border-radius:20px;background:linear-gradient(90deg,var(--cyan-ink),var(--cyan));box-shadow:0 0 0 1px rgba(39,173,227,.12) inset;animation:spdGrow 1100ms cubic-bezier(.2,.7,.2,1) both}
@keyframes spdGrow{from{width:0}}
.spd-val{font-family:var(--font-display);font-weight:700;color:var(--cyan-ink);font-size:15px;white-space:nowrap}
@media(max-width:760px){.spd-row{grid-template-columns:1fr auto;gap:6px 14px}.spd-track{grid-column:1/-1;order:3}}

/* Compare cards (phone-system pages) */
.cmp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cmp-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s,border-color .18s}
.cmp-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#cfe6f6}
.cmp-ic{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;background:var(--soft);color:var(--cyan-ink);margin-bottom:15px}
.cmp-card h3{font-size:20px;margin-bottom:5px}
.cmp-best{font-family:var(--font-display);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--cyan-ink);margin-bottom:17px}
.cmp-card ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin:0;padding:0}
.cmp-card li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink-soft);line-height:1.45}
.cmp-card li svg{color:var(--cyan);flex-shrink:0;margin-top:1px}
@media(max-width:820px){.cmp-grid{grid-template-columns:1fr}}

/* ----- classier polish ----- */
.card{transition:transform .2s,box-shadow .2s,border-color .2s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#cfe6f6}
.svc-card{transition:transform .18s,box-shadow .18s,background .18s}
.indcard{transition:transform .22s,box-shadow .22s}
.indcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
/* partner names as refined chips */
.trust .trust-row{gap:22px 38px;flex-wrap:wrap;justify-content:center}
.trust-logo-link{display:inline-flex;align-items:center;padding:9px 17px;border:1px solid var(--line);border-radius:var(--radius-pill);background:#fff;color:var(--muted);font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.01em;transition:color .16s,border-color .16s,box-shadow .16s,transform .16s}
.trust-logo-link:hover{color:var(--cyan-ink);border-color:#bfe0f4;box-shadow:var(--shadow-sm);transform:translateY(-1px)}
/* real logo images: drop the text-fallback pill chrome so logos sit clean on the strip
   (uniform height + cohesive grayscale, full colour on hover — handled by .trust-logo) */
.trust-logo-link.is-img{padding:0;border:0;background:none;box-shadow:none;transform:none}
.trust-logo-link.is-img:hover{box-shadow:none;border-color:transparent;transform:none}
.trust .lbl{color:var(--muted)}
/* eyebrow gets a small accent tick for a more designed feel */
.sec-head .eyebrow{position:relative}
.sec-head.center .eyebrow{display:inline-block}
/* section heads a touch more generous */
.sec-head h2{letter-spacing:-.02em}

/* Call-routing flow (1300/1800) */
.route-flow{display:grid;grid-template-columns:1fr auto 1.15fr auto 1fr;align-items:center;gap:16px;max-width:1020px;margin:0 auto}
.route-node{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow-sm)}
.route-node strong{display:block;font-family:var(--font-display);font-size:16px;color:var(--ink);line-height:1.2}
.route-node span{font-size:12.5px;color:var(--muted)}
.route-ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:var(--soft);color:var(--cyan-ink);flex-shrink:0}
.route-hub{border-color:#bfe0f4;box-shadow:0 12px 32px -14px rgba(39,173,227,.5)}
.route-link{height:2px;background:linear-gradient(90deg,var(--cyan),#bfe0f4);position:relative;min-width:24px}
.route-link::after{content:"";position:absolute;right:-1px;top:50%;width:8px;height:8px;border-top:2px solid var(--cyan);border-right:2px solid var(--cyan);transform:translateY(-50%) rotate(45deg)}
.route-outs{display:flex;flex-direction:column;gap:8px}
.route-out{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 13px;font-family:var(--font-display);font-weight:600;font-size:13.5px;color:var(--ink-soft)}
.route-ic.sm{width:26px;height:26px;border-radius:7px}
@media(max-width:860px){.route-flow{grid-template-columns:1fr;gap:12px}.route-link{width:2px;height:24px;min-width:0;justify-self:center;background:linear-gradient(180deg,var(--cyan),#bfe0f4)}.route-link::after{right:50%;top:auto;bottom:-1px;transform:translateX(50%) rotate(135deg)}.route-outs{flex-direction:row;flex-wrap:wrap;justify-content:center}}

/* Savings before/after */
.save-viz{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;max-width:920px;margin:0 auto}
.save-bars{display:flex;align-items:flex-end;justify-content:center;gap:30px;height:230px}
.save-col{display:flex;flex-direction:column;align-items:center;gap:11px;height:100%;justify-content:flex-end}
.save-bar{width:90px;border-radius:13px 13px 0 0;display:flex;align-items:flex-start;justify-content:center;padding-top:12px}
.save-before{height:100%;background:linear-gradient(180deg,#cdd7e1,#aab4c0)}
.save-after{height:35%;background:linear-gradient(180deg,var(--cyan),var(--cyan-ink));box-shadow:0 14px 30px -12px rgba(39,173,227,.6);transform-origin:bottom;animation:saveGrow 1100ms cubic-bezier(.2,.7,.2,1) both}
@keyframes saveGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.save-amt{font-family:var(--font-display);font-weight:800;color:#fff;font-size:15px}
.save-before .save-amt{color:#5b6573}
.save-foot{font-size:12.5px;color:var(--muted);font-weight:600;font-family:var(--font-display)}
.save-stats{display:flex;flex-direction:column;gap:16px}
.save-stat{display:flex;align-items:baseline;gap:13px;border-left:3px solid var(--cyan);padding-left:15px}
.save-stat strong{font-family:var(--font-display);font-weight:800;font-size:30px;color:var(--cyan-ink);line-height:1}
.save-stat span{color:var(--ink-soft);font-size:14px}
@media(max-width:760px){.save-viz{grid-template-columns:1fr;gap:28px}}

/* Coverage map */
.covmap{max-width:900px;margin:0 auto}
.covmap svg{width:100%;height:auto;display:block}

/* Savings estimator wizard */
.calc{max-width:680px;margin:0 auto}
.calc-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:30px 30px 24px;color:var(--ink)}
.calc-progress{height:6px;border-radius:20px;background:var(--paper-2);overflow:hidden;margin-bottom:24px}
.calc-pbar{display:block;height:100%;width:25%;border-radius:20px;background:linear-gradient(90deg,var(--cyan-ink),var(--cyan));transition:width .35s cubic-bezier(.2,.7,.2,1)}
/* <fieldset> carries a border and inset padding in the user-agent sheet — that was the
   dark rectangle drawn around each question. Reset it; the card is the container. */
.calc-step{display:none;border:0;margin:0;padding:0;min-inline-size:0}
.calc-step>legend{padding:0}
.calc-step.is-active{display:block;animation:calcFade .3s ease both}
@keyframes calcFade{from{opacity:0;transform:translateY(6px)}}
.calc-q{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--ink);margin-bottom:18px}
.calc-qn{width:30px;height:30px;border-radius:50%;background:var(--cyan);color:#fff;display:grid;place-items:center;font-size:15px;flex-shrink:0}
.calc-field{display:block;margin-bottom:16px}
.calc-field>span{display:block;font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--ink-soft);margin-bottom:7px}
.calc-field input,.calc-field select{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:12px;font-family:var(--font-body);font-size:16px;color:var(--ink);background:#fff;transition:border-color .15s}
.calc-field input:focus,.calc-field select:focus{outline:none;border-color:var(--cyan)}
.calc-hint{font-size:13px;margin-top:4px}
.calc-choices{display:flex;flex-direction:column;gap:10px}
.calc-choice{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;transition:.15s}
.calc-choice:hover{border-color:#bfe0f4;background:var(--paper-2)}
.calc-choice input{accent-color:var(--cyan);width:18px;height:18px;flex-shrink:0}
.calc-choice strong{display:block;font-family:var(--font-display);font-size:15px;color:var(--ink)}
.calc-choice small{color:var(--muted);font-size:13px}
.calc-choice:has(input:checked){border-color:var(--cyan);background:var(--soft)}
.calc-nav{display:flex;align-items:center;gap:12px;margin-top:22px}
.calc-nav [data-next]{margin-left:auto}
.calc-nav [data-back]{order:-1}
.calc-step-count{font-family:var(--font-display);font-weight:600;font-size:13px;color:var(--muted)}
.calc .btn-secondary{color:var(--ink);border-color:var(--line)}
.calc .btn-secondary:hover{background:var(--paper-2);color:var(--ink)}
.calc-res-eyebrow{font-family:var(--font-display);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--cyan-ink);text-align:center;margin-bottom:8px}
.calc-res-big{font-family:var(--font-display);font-weight:800;font-size:clamp(40px,7vw,60px);line-height:1;color:var(--cyan-ink);text-align:center;letter-spacing:-.02em}
.calc-res-big span{font-size:22px;color:var(--muted);font-weight:700;margin-left:4px}
.calc-res-big.calc-res-sm{font-size:30px}
.calc-res-sub{text-align:center;color:var(--ink-soft);font-size:16px;margin-top:10px}
.calc-res-rows{margin:22px auto 0;max-width:430px;display:flex;flex-direction:column;gap:10px}
.calc-res-row{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;background:var(--paper-2);border-radius:12px;font-size:15px;color:var(--ink-soft)}
.calc-res-row b{font-family:var(--font-display);color:var(--ink)}
.calc-res-row b.hl{color:var(--cyan-ink)}
.calc-disclaimer{text-align:center;font-size:12.5px;color:var(--muted);margin-top:18px}
.calc-res-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:8px}
@media(max-width:560px){.calc-card{padding:22px 18px}.calc-res-cta{flex-direction:column}.calc-res-cta .btn{width:100%}}
@media(max-width:460px){.calc-nav{flex-wrap:wrap;gap:10px}.calc-nav .btn{flex:1 1 auto;white-space:nowrap;padding:13px 16px}.calc-step-count{order:-1;flex:1 0 100%;text-align:center;margin-bottom:2px}.calc-nav [data-restart]{margin-left:auto}.calc-step-count:empty{display:none}}

/* ===================================================================
   Bill Savings Animation (.bsa) — hero "telecom savings calculator"
   =================================================================== */
.bsa{--bsa-green:#16a06a;--bsa-paper:#fff;position:relative;width:100%;max-width:540px;margin-inline:auto;font-family:var(--font-display)}
.bsa-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.bsa-stage{position:relative;height:500px}
/* ---- bills (stacked invoice pile, top-left) ---- */
.bsa-bills{position:absolute;top:8px;left:0;width:62%;height:60%;z-index:2;transition:opacity .5s,filter .5s,transform .5s}
.bsa-bill{position:absolute;left:6px;top:6px;width:min(210px,92%);background:var(--bsa-paper);border-radius:11px;padding:13px 14px 14px;box-shadow:0 16px 30px -16px rgba(8,20,40,.55),0 2px 0 rgba(0,0,0,.02);transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .5s;will-change:transform,opacity}
.bsa-bill::after{content:"";position:absolute;inset:0;border-radius:11px;background:repeating-linear-gradient(180deg,transparent 0 22px,rgba(16,40,54,.025) 22px 23px);pointer-events:none}
.bsa-b1{transform:rotate(-7deg);z-index:3}
.bsa-b2{transform:translate(30px,40px) rotate(4.5deg);z-index:2}
.bsa-b3{transform:translate(12px,86px) rotate(-3deg);z-index:1}
.bsa[data-phase="idle"] .bsa-bill{opacity:0;transform:translateX(-160%) rotate(-14deg)}
.bsa-bill-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:7px}
.bsa-carrier{font-weight:800;font-size:13.5px;color:#16202f;letter-spacing:-.01em}
.bsa-acct{font:600 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#9aa6b2}
.bsa-bill-amt{font-weight:800;font-size:20px;color:#16202f;letter-spacing:-.02em;margin-bottom:8px}
.bsa-bill-amt small{font-size:11px;color:#9aa6b2;font-weight:600;margin-left:2px}
.bsa-bill-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.bsa-bill-items li{font:600 10.5px var(--font-body);color:#5c6168;display:flex;align-items:center;gap:6px}
.bsa-bill-items li::before{content:"";width:4px;height:4px;border-radius:50%;background:#c3ccd6;flex:0 0 auto}
.bsa-stamp{position:absolute;top:9px;right:9px;font-weight:800;font-size:9px;letter-spacing:.12em;color:var(--bsa-green);border:1.5px solid var(--bsa-green);border-radius:4px;padding:2px 5px;transform:rotate(8deg);opacity:0;transition:opacity .3s .2s}
.bsa[data-phase="crunch"] .bsa-stamp,.bsa[data-phase="report"] .bsa-stamp{opacity:.85}
.bsa-tag{position:absolute;bottom:9px;right:9px;font-weight:700;font-size:8.5px;color:#c2761b;background:#fdf3e3;border:1px solid #f0d9b0;border-radius:20px;padding:2px 7px}
/* scan sweep */
/* The scan beam moves with transform, not top. Animating top on an absolute element is a layout
   change on every frame - measured at ~0.065 of the homepage CLS, still firing 20s after load.
   translateY(%) is relative to the element's OWN height, so the element spans the whole card and
   the 46px beam is drawn at its top edge: translateY(86%) is then 86% of the card, as top:86% was. */
.bsa-scan{position:absolute;left:-8px;right:-8px;top:0;bottom:0;opacity:0;pointer-events:none;will-change:transform,opacity}
.bsa-scan::before{content:"";position:absolute;left:0;right:0;top:0;height:46px;background:linear-gradient(180deg,transparent,rgba(39,173,227,.22),transparent);border-top:2px solid var(--cyan);box-shadow:0 0 16px rgba(39,173,227,.5);border-radius:3px}
.bsa[data-phase="crunch"] .bsa-scan{animation:bsaScan 2.6s ease-in-out 2}
@keyframes bsaScan{0%{transform:translateY(-4px);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateY(86%);opacity:0}}
/* ---- device (calculator + thermal printer) bottom-right ---- */
.bsa-device{position:absolute;right:0;bottom:0;width:52%;max-width:270px;z-index:4;transition:opacity .5s,filter .5s,transform .5s}
.bsa-calc{background:linear-gradient(165deg,#26374f,#141d2b);border-radius:16px 16px 7px 7px;padding:12px 13px 13px;box-shadow:0 22px 40px -18px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.06)}
.bsa-brand{font-weight:800;font-size:9px;letter-spacing:.18em;color:#7f93ad;text-align:center;margin-bottom:8px}
.bsa-display{position:relative;height:44px;border-radius:8px;background:linear-gradient(180deg,#06141f,#0c2236);border:1px solid rgba(99,200,230,.18);display:flex;align-items:center;justify-content:flex-end;padding:0 13px;overflow:hidden}
.bsa-digits{font:800 22px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#46d6c4;letter-spacing:1px;text-shadow:0 0 10px rgba(70,214,196,.5)}
.bsa-glare{position:absolute;inset:0;background:linear-gradient(118deg,transparent 42%,rgba(255,255,255,.14) 50%,transparent 58%)}
.bsa[data-phase="crunch"] .bsa-glare{animation:bsaGlare 2.4s ease-in-out infinite}
@keyframes bsaGlare{0%,100%{transform:translateX(-30%)}50%{transform:translateX(30%)}}
.bsa-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:11px}
.bsa-keys span{height:13px;border-radius:4px;background:linear-gradient(180deg,#3a5170,#2c3e57);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.bsa-slot{height:11px;margin:0 12px;background:#0a121c;border-radius:0 0 5px 5px;position:relative;box-shadow:inset 0 2px 4px rgba(0,0,0,.6)}
.bsa-slot span{position:absolute;left:9px;right:9px;top:4px;height:3px;background:#000;border-radius:2px}
/* receipt */
.bsa-receipt{margin:0 16px;position:relative}
.bsa-perf{height:7px;background:linear-gradient(135deg,#fff 25%,transparent 25%) -5px 0/10px 10px,linear-gradient(225deg,#fff 25%,transparent 25%) -5px 0/10px 10px;filter:drop-shadow(0 1px 0 rgba(8,20,40,.12))}
.bsa-paper{background:var(--bsa-paper);padding:11px 13px 12px;box-shadow:0 18px 30px -16px rgba(8,20,40,.5);max-height:0;opacity:0;overflow:hidden;transition:max-height .7s ease,opacity .4s;transform-origin:top}
.bsa[data-phase="crunch"] .bsa-paper,.bsa[data-phase="report"] .bsa-paper{max-height:280px;opacity:1}
.bsa-rhead{font-weight:800;font-size:8.5px;letter-spacing:.07em;color:#9aa6b2;border-bottom:1px dashed #d8dee6;padding-bottom:6px;margin-bottom:7px;text-align:center}
.bsa-rlines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.bsa-rline{display:flex;align-items:center;gap:7px;font:600 10px ui-monospace,SFMono-Regular,Menlo,monospace;color:#42505e;opacity:0;transform:translateY(-3px);transition:opacity .25s,transform .25s}
.bsa-rline.on{opacity:1;transform:none}
.bsa-tick{color:var(--bsa-green);display:grid;place-items:center;opacity:0;transform:scale(.4);transition:opacity .2s,transform .2s}
.bsa-rline.done .bsa-tick{opacity:1;transform:none}
.bsa-rline.typing .bsa-rtext::after{content:"";display:inline-block;width:6px;height:11px;margin-left:2px;background:#9aa6b2;vertical-align:-1px;animation:bsaCaret .7s steps(1) infinite}
@keyframes bsaCaret{50%{opacity:0}}
.bsa-rtotal{display:flex;justify-content:space-between;align-items:center;margin-top:8px;border-top:1px dashed #d8dee6;padding-top:7px;font-weight:800;font-size:11px;color:#16202f}
.bsa-rtotal b{color:var(--bsa-green)}
/* savings bubbles */
.bsa-bubbles{position:absolute;inset:0;z-index:6;pointer-events:none}
.bsa-bubble{position:absolute;display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #d7eee1;color:#16202f;font-weight:700;font-size:11px;padding:6px 11px;border-radius:30px;box-shadow:0 10px 22px -8px rgba(16,40,54,.4);opacity:0;white-space:nowrap}
.bsa-bub-ic{color:var(--bsa-green);display:grid;place-items:center}
.bsa-bub1{top:24%;left:6%}.bsa-bub2{top:46%;left:1%}.bsa-bub3{top:14%;right:4%}.bsa-bub4{top:64%;left:24%}.bsa-bub5{top:38%;right:1%}
.bsa-bubble.pop{animation:bsaPop 2.4s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes bsaPop{0%{opacity:0;transform:translateY(12px) scale(.85)}12%{opacity:1;transform:translateY(0) scale(1.05)}22%{transform:translateY(0) scale(1)}78%{opacity:1;transform:translateY(-10px) scale(1)}100%{opacity:0;transform:translateY(-30px) scale(.95)}}
/* final report */
.bsa-report{position:absolute;inset:0;z-index:8;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .4s}
.bsa[data-phase="report"] .bsa-report{opacity:1}
.bsa[data-phase="report"] .bsa-bills{opacity:.32;filter:blur(1.5px);transform:translateX(-6px) scale(.96)}
.bsa[data-phase="report"] .bsa-device{opacity:.32;filter:blur(1.5px);transform:translateX(6px) scale(.96)}
.bsa-report-card{position:relative;width:88%;max-width:340px;background:#fff;border-radius:15px;padding:20px 20px 16px;box-shadow:0 34px 64px -22px rgba(6,16,34,.6);transform:translateY(34px) scale(.93);opacity:0;transition:transform .65s cubic-bezier(.2,.75,.25,1),opacity .5s}
.bsa[data-phase="report"] .bsa-report-card{transform:none;opacity:1}
.bsa-rep-perf{position:absolute;left:0;right:0;top:-6px;height:7px;background:linear-gradient(135deg,#fff 25%,transparent 25%) -5px 0/10px 10px,linear-gradient(225deg,#fff 25%,transparent 25%) -5px 0/10px 10px}
.bsa-rep-head{display:flex;align-items:center;gap:11px;margin-bottom:15px}
.bsa-rep-badge{width:34px;height:34px;border-radius:50%;background:var(--bsa-green);color:#fff;display:grid;place-items:center;flex:0 0 auto;box-shadow:0 6px 14px -4px rgba(22,160,106,.6)}
.bsa-rep-title{font-weight:800;font-size:18px;color:var(--ink);letter-spacing:-.02em;line-height:1.1}
.bsa-rep-sub{font:600 11.5px var(--font-body);color:var(--muted);margin-top:2px}
.bsa-rep-rows{display:flex;flex-direction:column}
.bsa-rep-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px dashed #e4e8ec;font:600 13px var(--font-body);color:var(--ink-soft)}
.bsa-rep-row b{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--ink)}
.bsa-rep-row.is-save{color:#16202f}
.bsa-rep-row.is-save b{color:var(--bsa-green);font-size:17px}
.bsa-rep-notes{list-style:none;margin:13px 0 0;padding:0;display:grid;gap:7px}
.bsa-rep-notes li{display:flex;align-items:center;gap:8px;font:600 12px var(--font-body);color:var(--ink-soft)}
.bsa-rep-notes svg{color:var(--bsa-green);flex:0 0 auto}
.bsa-rep-foot{margin-top:13px;padding-top:11px;border-top:1px dashed var(--line);display:flex;gap:8px;align-items:flex-start;font:600 10.5px var(--font-body);color:var(--ink-soft);text-align:left;line-height:1.5}
.bsa-rep-foot-badge{flex:none;font-family:var(--font-display);font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#8A5A00;background:#FBF2E0;border:1px solid rgba(138,90,0,.3);border-radius:4px;padding:2px 6px}


/* reduced motion: snap to final report, no looping/animation */
.bsa.bsa--rm *{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce) and (scripting:none){.bsa *{animation:none!important;transition:none!important}}
/* responsive */
@media(max-width:1100px){.bsa-stage{height:470px}}
@media(max-width:560px){
  .bsa{max-width:380px}
  .bsa-stage{height:430px}
  .bsa-bill{width:min(178px,84%);padding:11px 12px}
  .bsa-bill-amt{font-size:17px}
  .bsa-device{width:58%;max-width:220px}
  .bsa-digits{font-size:18px}
  .bsa-report-card{width:94%;padding:17px 16px 14px}
  .bsa-rep-title{font-size:16px}
  .bsa-bubble{font-size:10px;padding:5px 9px}
}

/* ===================================================================
   Google reviews slider (.grv)
   =================================================================== */
.grv-summary{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:4px}
.grv-g-lg{display:grid;place-items:center}
.grv-sumline{display:flex;align-items:center;gap:9px}
.grv-sumline strong{font:800 28px var(--font-display);color:var(--ink);line-height:1}
.grv-stars{display:inline-flex;gap:1px;line-height:0}
.grv-sumsub{font:600 13px var(--font-body);color:var(--muted);margin-top:3px}
.grv-readall{font:700 14px var(--font-display);color:var(--cyan-ink);white-space:nowrap}
.grv-readall:hover{text-decoration:underline}
.grv{margin-top:24px}
.grv-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px 2px 16px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.grv-track::-webkit-scrollbar{display:none}
.grv-card{flex:0 0 330px;max-width:330px;scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm)}
.grv-card-top{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.grv-av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font:800 17px var(--font-display);color:#fff;flex:0 0 auto}
.grv-av0{background:#1a73e8}.grv-av1{background:#16a06a}.grv-av2{background:#e2752b}.grv-av3{background:#8a3fc0}.grv-av4{background:#d93a4a}.grv-av5{background:#0f9aa6}
.grv-meta{min-width:0}
.grv-name{font:700 15px var(--font-display);color:var(--ink)}
.grv-date{font:500 12px var(--font-body);color:var(--muted)}
.grv-g{margin-left:auto;display:grid;place-items:center}
.grv-card .grv-stars{display:flex;margin-bottom:11px}
.grv-text{margin:0;padding:0;border:0;font:400 14.5px/1.62 var(--font-body);color:var(--ink-soft)}
.grv-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:6px}
.grv-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:border-color .15s,color .15s,box-shadow .15s,transform .15s}
.grv-btn:hover{border-color:var(--cyan);color:var(--cyan-ink);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
@media(max-width:560px){.grv-card{flex-basis:86%;max-width:86%;padding:18px}.grv-summary{gap:12px}.grv-sumline strong{font-size:24px}}

/* nbn address-check widget */
.nbnchk{display:flex;gap:26px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:30px 32px;max-width:920px;margin:0 auto}
.nbnchk-body{flex:1;min-width:0}
.nbnchk-body h2{margin:4px 0 10px}
.nbnchk-body p{color:var(--ink-soft);font-size:15px;line-height:1.6}
.nbnchk-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.nbnchk-note{font-size:12.5px!important;color:var(--muted)!important;margin-top:12px}
.nbnchk-art{flex:0 0 auto;width:92px;height:92px;border-radius:20px;display:grid;place-items:center;background:var(--soft);color:var(--cyan-ink)}
@media(max-width:640px){.nbnchk{flex-direction:column;text-align:center;padding:24px}.nbnchk-art{order:-1}.nbnchk-actions{justify-content:center}}
/* Live nbn rollout map (proxied + re-skinned Rinseout map) */
.nbnmap .sec-head{max-width:840px;margin:0 auto 22px;text-align:center}
.nbnmap-frame{position:relative;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--soft);box-shadow:0 18px 44px rgba(12,42,77,.13)}
.nbnmap-iframe{display:block;width:100%;height:620px;border:0}
/* the facade holds the iframe's exact box so swapping the map in shifts nothing */
.nbnmap-frame[data-nbnmap]{height:620px}
.nbnmap-facade{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;padding:24px;text-align:center;color:var(--muted);background:linear-gradient(135deg,var(--soft),#e6eef7)}
.nbnmap-facade p{margin:0;max-width:30ch}
.nbnmap-frame.is-live .nbnmap-facade{display:none}
.nbnmap-noscript{position:absolute;left:0;right:0;bottom:0;margin:0;padding:12px 16px;background:#fff;font-size:14px}
.nbnmap-foot{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:16px}
.nbnmap-cred{font-size:12.5px;color:var(--muted);line-height:1.6;max-width:760px;margin:0}
.nbnmap-cred a{color:var(--cyan-ink);font-weight:600}
.nbnmap-foot .btn{flex:0 0 auto}
@media(max-width:760px){.nbnmap-iframe,.nbnmap-frame[data-nbnmap]{height:470px}.nbnmap-foot{justify-content:center;text-align:center}}

/* ============================================================
   MOBILE HARDENING (appended last — wins the cascade)
   ROOT CAUSE of the mobile clipping: 2-column grids (.hero, .page-head.has-visual,
   .chevband) had children with the default min-width:auto, and their VISUAL column
   demanded a width wider than the phone viewport (intrinsic-width SVG scenes/animation
   + white-space:nowrap float-pills that go position:static <=1000px). That pushed the
   whole page wider than the screen, so text inside overflow:hidden sections clipped on
   the right. Fix = let grid/flex children shrink, cap visuals to 100%, wrap long text,
   and clip any residual horizontal overflow at the root. All rules are desktop-safe.
   ============================================================ */
html,body{overflow-x:clip}
/* layout visuals never exceed their column */
.hero-visual,.page-visual,.chevband-art,.photo-slot,.media{min-width:0}
.hero-visual img,.hero-visual svg,.page-visual img,.page-visual svg,.chevband-art svg,.photo-slot img,.photo-slot svg,.media img,.media svg{max-width:100%}
.photo-slot img,.page-visual img,.chevband-art svg{height:auto}
/* grid/flex children may shrink below their intrinsic content width (stops track blowout) */
.hero .container>*,.page-head .container>*,.chevband .container>*,.feature>*,.grid>*,[class*="-grid"]>*,[class*="-row"]>*{min-width:0}
/* long words / numbers / headings wrap instead of running off the screen */
h1,h2,h3,h4,p,li,a,.eyebrow,.lbl,.ph-lead,.hero .sub,.lead,.csec-inner p{overflow-wrap:anywhere}
/* mobile: keep the hero visual + its now-static float pills on-screen */
@media(max-width:1000px){
  .hero-visual{max-width:100%;margin-inline:auto}
  .float-pill{white-space:normal}
}
/* coverage map: keep suburb labels legible on phones (pan instead of shrinking text to ~6px) */
@media(max-width:560px){.covmap{overflow-x:auto;-webkit-overflow-scrolling:touch}.covmap svg{min-width:560px}}

/* === SIP THEME: Light & Airy (site-wide, approved) === */
/* ===== SIP Connect — "Light & Airy" theme override (appended last) ===== */
:root,body.t-offer{
  --cyan:#27ADE3; --cyan-text:#1862AD; --cyan-text-hover:#124B84; --cyan-hover:#1B93C6; --cyan-ink:#14538F;
  /* --muted darkened #6A7488 -> #646E80 so secondary/legal text clears WCAG AA (4.5:1) on --paper-2 too (was 4.41:1). */
  --ink:#16243B; --ink-soft:#44506A; --muted:#646E80;
  --line:#E1E9F2; --paper:#FFFFFF; --paper-2:#F4F8FC; --soft:#E6F6FC;
  --font-display:'Onest','Montserrat',Arial,sans-serif;
  --font-body:'Open Sans','Inter',Arial,sans-serif;
  --radius:22px; --radius-sm:16px;
  --shadow:0 22px 50px -22px rgba(24,98,173,.22);
  --shadow-sm:0 4px 16px rgba(24,98,173,.08);
}

/* --- Hero: light pale-blue gradient instead of flat navy --- */
body.t-offer .hero{
  background:linear-gradient(155deg,#F4FAFE 0%,#EAF4FC 48%,#E3F0FE 100%);
  border-bottom:1px solid var(--line);
}
body.t-offer .hero h1{color:#0E2647}
body.t-offer .hero .hero-accent{color:#1B93C6}
body.t-offer .hero .sub{color:#44506A}
body.t-offer .hero .hero-trust{color:#5C6779}
body.t-offer .hero .hero-trust b{color:#16243B}
body.t-offer .hero .hero-trust svg,
body.t-offer .hero .hero-rep-badges svg{color:#1B93C6}
body.t-offer .hero .hero-rep-num{color:#5C6779}
body.t-offer .hero .hero-rep-num b{color:#16243B}
body.t-offer .hero .hero-rep-badges li{color:#44506A}

/* Hero buttons: re-skin for light bg */
body.t-offer .hero .btn-primary{background:#1862AD;color:#fff;border-color:#1862AD}
body.t-offer .hero .btn-primary:hover{background:#1B93C6;color:#fff}
body.t-offer .hero .btn-secondary{background:transparent;color:#0E2647;border-color:#BFD0E3}
body.t-offer .hero .btn-secondary:hover{background:#0E2647;color:#fff;border-color:#0E2647}

/* --- Aurora: fade dark glow into a soft sky wash --- */
body.t-offer .bgaura-wrap{background:transparent}
body.t-offer .bgaura-wrap::before{
  background:radial-gradient(130% 110% at 50% -10%,#FFFFFF 0%,#EAF4FC 55%,#E1EEFB 100%);
}
body.t-offer .bgaura-blob{opacity:.32;mix-blend-mode:normal;filter:blur(72px)}
body.t-offer .bgaura-b3{opacity:.22}
body.t-offer .bgaura-vignette{display:none}

/* --- Dark bands soften to one restrained deep SIP blue --- */
body.t-offer .section--ink,
body.t-offer .cta-band{background:#14538F}
body.t-offer .section--ink h2,
body.t-offer .cta-band h2{color:#fff}
body.t-offer .section--ink p,
body.t-offer .cta-band p{color:#D6E6F5}

/* --- Softer surfaces & radius across the site --- */
body.t-offer .card{border-radius:22px;box-shadow:var(--shadow-sm)}
body.t-offer .card--hover:hover{box-shadow:var(--shadow)}
body.t-offer .hero-card{border-radius:20px;box-shadow:var(--shadow)}

/* === Two-option choice cards (Telstra DOT: gateway vs upgrade) === */
.opt-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:24px 0}
.opt-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:24px 22px 20px;box-shadow:var(--shadow-sm)}
.opt-card--feature{border-color:#BFE0F4;box-shadow:var(--shadow)}
.opt-card--feature::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;border-radius:var(--radius-sm) var(--radius-sm) 0 0;background:linear-gradient(90deg,#27ADE3,#1862AD)}
.opt-card .opt-tag{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--cyan-ink);background:var(--soft);padding:4px 11px;border-radius:100px;margin-bottom:12px}
.opt-card h3{margin:.1em 0 .45em;font-size:19px}
.opt-card>p{margin:0 0 4px}
.opt-card ul{margin:.6em 0 0;padding-left:18px}
.opt-card li{margin:.32em 0}
.opt-cta{display:inline-block;margin-top:16px;font-family:var(--font-display);font-weight:700;color:var(--cyan-ink);text-decoration:none}
.opt-cta:hover{color:var(--cyan);text-decoration:underline}
@media(max-width:720px){.opt-cards{grid-template-columns:1fr;gap:14px}}

/* === Custom telco visual system (bill autopsy / control room / call log / modules) === */

:root,body.t-offer{--save:#0A7A48;--save-bg:#E7F8F0;--warn:#8A5A00;--warn-bg:#FBF1DF;--waste:#B21E27;--waste-bg:#FBEAEB;--control:#0B2440;--control-2:#0E2A4C;--rcpt:#F7FAFE}
/* tactile primary CTA */
body.t-offer .btn-primary{transition:transform .15s cubic-bezier(.2,.7,.3,1),box-shadow .15s,background .15s}
body.t-offer .btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 22px -8px rgba(24,98,173,.5)}
body.t-offer .btn-primary:active{transform:translateY(0)}
/* dark 'control room' section */
.section--control{background:linear-gradient(180deg,var(--control),var(--control-2));color:#dfeaf7;position:relative;overflow:hidden}
.section--control h2,.section--control h3{color:#fff}
.section--control .lead,.section--control p{color:#aebfd6}
.section--control .eyebrow{color:#5CC9F0}
.section--control .scan{position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.03) 0 2px,transparent 2px 6px);pointer-events:none}
/* oversized receipt number + label */
.bignum{font-family:var(--font-display);font-weight:800;line-height:1;letter-spacing:-.02em}
.rcpt-label{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.impact{display:inline-block;font-family:var(--font-display);font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:100px}
.impact--common{background:var(--waste-bg);color:var(--waste)}
.impact--missed{background:var(--warn-bg);color:var(--warn)}
.impact--easy{background:var(--save-bg);color:var(--save)}
/* ===== Bill Autopsy ===== */
.autopsy .container{display:grid;grid-template-columns:.92fr 1.08fr;gap:42px;align-items:start}
.bill-mock{background:var(--rcpt);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 22px 26px;position:relative;overflow:hidden;font-family:var(--font-body)}
.bill-mock::before{content:'';position:absolute;left:0;right:0;top:0;height:8px;background:repeating-linear-gradient(90deg,#27ADE3 0 14px,#1862AD 14px 28px);opacity:.9}
.bill-mock .bm-head{display:flex;justify-content:space-between;align-items:baseline;margin:8px 0 14px;border-bottom:1px dashed var(--line);padding-bottom:12px}
.bill-mock .bm-head b{font-family:var(--font-display);font-size:15px;color:var(--ink)}
.bill-mock .bm-head span{font-size:12px;color:var(--muted)}
.bm-row{display:flex;justify-content:space-between;gap:10px;padding:8px 8px;font-size:13.5px;border-radius:8px;color:var(--ink-soft)}
.bm-row .bm-amt{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
.bm-row.flag{background:var(--waste-bg);color:var(--waste);position:relative}
.bm-row.flag .bm-amt{color:var(--waste)}
.bm-row.flag::after{content:'WASTE';position:absolute;right:8px;top:-8px;font-family:var(--font-display);font-size:8.5px;font-weight:800;letter-spacing:.08em;background:var(--waste);color:#fff;padding:2px 6px;border-radius:100px}
.bm-tot{display:flex;justify-content:space-between;margin-top:12px;padding-top:12px;border-top:2px solid var(--ink);font-family:var(--font-display);font-weight:800}
.bm-save{margin-top:12px;background:var(--save-bg);border-radius:10px;padding:10px 12px;display:flex;justify-content:space-between;align-items:center;color:var(--save);font-weight:700;font-size:14px}
.waste-list{display:flex;flex-direction:column;gap:12px}
.waste-item{background:#fff;border:1px solid var(--line);border-left:3px solid var(--waste);border-radius:0 12px 12px 0;padding:14px 16px;box-shadow:var(--shadow-sm)}
.waste-item h3{margin:0 0 3px;font-size:15.5px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.waste-item p{margin:0;font-size:13.5px;color:var(--ink-soft)}
.waste-item:nth-child(3n+2){border-left-color:var(--warn)}
.waste-item:nth-child(3n+3){border-left-color:var(--save)}
/* ===== Call Flow Control Room ===== */
.cflow-board{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;align-items:stretch;margin-top:8px;position:relative}
.cflow-col{display:flex;flex-direction:column;gap:12px;justify-content:center}
.cflow-node{background:rgba(255,255,255,.06);border:1px solid rgba(92,201,240,.3);border-radius:14px;padding:12px 12px;text-align:center;backdrop-filter:blur(2px)}
.cflow-node .cf-ic{width:34px;height:34px;border-radius:10px;display:inline-grid;place-items:center;background:linear-gradient(135deg,#27ADE3,#1862AD);color:#fff;margin-bottom:7px}
.cflow-node .cf-t{font-family:var(--font-display);font-weight:700;font-size:13px;color:#fff}
.cflow-node .cf-s{font-size:11px;color:#9fb6d4;margin-top:2px}
.cflow-node.is-decision{border-color:rgba(251,191,5,.5)}
.cflow-node.is-decision .cf-ic{background:linear-gradient(135deg,#F6C453,#E0911C)}
.cflow-arrow{color:#5CC9F0;text-align:center;font-size:18px;line-height:1}
@media(max-width:860px){.cflow-board{grid-template-columns:1fr;gap:10px}.cflow-arrow{transform:rotate(90deg)}}
/* ===== Local proof ===== */
.rl-sibs{margin:26px 0 0;color:var(--muted);font-size:15px;line-height:1.9}
.rl-sibs span:first-child{font-weight:700;color:var(--ink)}
.rl-sibs a{color:var(--cyan-text);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.lproof-links{margin:26px auto 0;max-width:62rem;text-align:center;color:var(--muted);font-size:15px;line-height:1.9}
.lproof-links span:first-child{font-weight:700;color:var(--ink)}
.lproof-links a{color:var(--cyan-text);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.lproof-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:16px;margin-top:8px}
.lp-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.lp-card--map{background:linear-gradient(135deg,#102E52,#1862AD);color:#fff;border:0}
.lp-card--map .lp-sub{color:#bcd4ee}
.lp-card .lp-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--soft);color:var(--cyan-ink);margin-bottom:12px}
.lp-card h3{margin:0 0 4px;font-size:16px}
.lp-card:not(.lp-card--map) .lp-sub{color:var(--ink-soft)}
.lp-card .lp-sub{font-size:13px}
.lp-card--map .lp-ic{background:rgba(255,255,255,.16);color:#fff}
.lproof-kicker{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--ink);max-width:640px;margin:0 auto 6px}
@media(max-width:860px){.lproof-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.lproof-grid{grid-template-columns:1fr}}
/* ===== Call Log Wall (review tags + log note styling) ===== */
.grv-card{border-left:3px solid var(--cyan)}
.grv-tag{display:inline-block;font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--cyan-ink);background:var(--soft);padding:3px 9px;border-radius:100px;margin-top:10px}
/* ===== Telco-module service cards (vary, not identical) ===== */
.svc-card{position:relative;overflow:hidden}
.svc-card::after{content:'';position:absolute;right:-30px;bottom:-30px;width:90px;height:90px;border-radius:14px;border:2px dashed rgba(92,201,240,.18);transform:rotate(18deg)}
/* Free Bill Analysis stays a normal grid cell now (3-col grid), but keeps a subtle cyan accent so it still stands out. */
.svc-card--feature{background:rgba(92,201,240,.12);border-color:rgba(92,201,240,.34)}
.svc-card--feature:hover{background:rgba(92,201,240,.17)}
/* ===== mid-page CTA strip variations ===== */
.cta-mini{background:linear-gradient(120deg,#102E52,#1862AD);color:#fff;border-radius:var(--radius);padding:22px 26px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;box-shadow:var(--shadow)}
.cta-mini h3{margin:0;color:#fff;font-size:20px}
.cta-mini p{margin:2px 0 0;color:#cfe0f4;font-size:14px}
.cta-mini .btn-primary{background:#fff;color:#1862AD;border-color:#fff}
.cta-mini .btn-primary:hover{background:#E6F6FC;color:#1862AD}

/* === custom-telco layout fixes === */

.cflow-board{display:flex!important;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}
.cflow-node{flex:1 1 150px;max-width:188px}
.cflow-arrow{flex:0 0 auto;padding:0 2px}
@media(max-width:860px){.autopsy .container{grid-template-columns:1fr;gap:22px}}
.autopsy .bill-mock{align-self:start}

/* === bill-scanner waste/save badges === */

.bsa-bubble.is-waste{border-color:#f0cdd0}
.bsa-bubble.is-waste .bsa-bub-ic{color:var(--waste,#D2353F)}
.bsa-bubble.is-save{border-color:#bfe7d4}
.bsa-bubble.is-save .bsa-bub-ic{color:var(--save,#0E9A5E)}

/* === calculator signal-path progress === */

.calc-progress{position:relative;overflow:visible}
.calc-pbar{position:relative;background:linear-gradient(90deg,#5CC9F0,#27ADE3)!important;box-shadow:0 0 10px rgba(39,173,227,.55);transition:width .45s cubic-bezier(.3,.8,.3,1)}
.calc-pbar::after{content:'';position:absolute;right:-5px;top:50%;transform:translateY(-50%);width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(39,173,227,.45)}

/* === Bill Crusher: live split calculator + receipt panel === */

.calc{max-width:980px;display:grid;grid-template-columns:1.04fr .96fr;gap:22px;align-items:start}
.calc .calc-card{margin:0}
.calc-live{position:relative}
.cl-paper{background:#F7FAFE;color:#16243B;border-radius:16px;padding:20px 20px 22px;box-shadow:0 22px 48px -22px rgba(4,16,31,.65);overflow:hidden;font-variant-numeric:tabular-nums}
.cl-perf{height:7px;margin:-20px -20px 14px;background:repeating-linear-gradient(90deg,#27ADE3 0 13px,#1862AD 13px 26px)}
.cl-head{font-family:var(--font-display);font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#5b6470;display:flex;align-items:center;gap:8px;margin-bottom:12px}
.cl-dot{width:8px;height:8px;border-radius:50%;background:#13B36A;box-shadow:0 0 0 3px rgba(19,179,106,.18)}
.cl-row{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:#46536b;padding:3px 0}
.cl-row b{color:#16243B;font-weight:600}
.cl-row.cl-amt{margin-top:-5px;padding-top:0}
.cl-row.cl-amt b{color:#1862AD;font-weight:700}
.cl-row.cl-est b{color:#0A7A4A;font-weight:800;font-size:15px}
.cl-row.cl-now b{color:#16243B}
.cl-div{border-top:1px dashed #cfdcea;margin:11px 0}
.cl-note{font-size:11.5px;color:#5C6879;font-style:italic;margin-top:10px}
.cl-bigk{font-family:var(--font-display);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#0E9A5E;margin-top:2px}
.cl-big{font-family:var(--font-display);font-weight:800;font-size:32px;color:#0E9A5E;line-height:1.05;letter-spacing:-.01em}
.cl-big span{font-size:15px;color:#646E80;font-weight:600}
.cl-big.cl-big-sm{font-size:21px;color:#16243B}
.cl-bigsub{font-size:12.5px;color:#46536b;margin:5px 0 6px}
.cl-check-h{font-family:var(--font-display);font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#5b6470;margin-top:10px}
.cl-checks{list-style:none;margin:7px 0 0;padding:0}
.cl-checks li{font-size:12.5px;color:#16243B;padding:4px 0 4px 22px;position:relative}
.cl-checks li::before{content:'';position:absolute;left:0;top:7px;width:11px;height:11px;border-radius:50%;background:#E6F6FC;box-shadow:inset 0 0 0 2px #27ADE3}
.cl-next{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:13px;padding-top:13px;border-top:1px dashed #cfdcea}
.cl-next span{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#5b6470}
.cl-next .btn-primary{padding:9px 16px}
.cl-disc{font-size:10.5px;color:#8893a5;margin-top:11px}
@media(max-width:780px){.calc{grid-template-columns:1fr;gap:16px}.calc-live{order:2}}

/* === Home constellation hero (replaces .bgaura on home only) ===
   Scope: every rule below is guarded by body.home .hero ... so it cannot leak to inner
   pages or to other sections (the dark sections still use .bgaura via .section--ink). */
body.home .hero{background:radial-gradient(130% 120% at 70% 8%,#0C2440 0%,#0A1E36 38%,#07182B 70%,#061325 100%);border-bottom:1px solid #061325;color:#EAF4FC}
body.home .hero::before{display:none}
body.home .hero .container{position:relative;z-index:3}
body.home .hero .hero-constellation{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:auto}
body.home .hero .hero-constellation .hc-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
body.home .hero .hero-constellation .hc-grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;mix-blend-mode:screen;background:radial-gradient(58% 70% at 78% 30%,rgba(91,200,245,.16) 0%,rgba(91,200,245,0) 60%),radial-gradient(46% 60% at 92% 88%,rgba(24,98,173,.22) 0%,rgba(24,98,173,0) 64%)}
body.home .hero .hero-constellation .hc-vig{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(95% 100% at 26% 64%,rgba(6,19,37,0) 0%,rgba(6,19,37,.32) 100%),linear-gradient(94deg,rgba(6,19,37,.72) 0%,rgba(6,19,37,.50) 26%,rgba(6,19,37,.10) 52%,rgba(6,19,37,0) 70%),linear-gradient(0deg,rgba(6,19,37,.38) 0%,rgba(6,19,37,0) 24%)}
/* hero copy goes light over the dark constellation */
body.home .hero .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:rgba(91,200,245,.18);border:1px solid rgba(91,200,245,.34);color:#9FD8F4;letter-spacing:.12em;text-transform:uppercase;font-weight:600;backdrop-filter:blur(4px)}
body.home .hero h1{color:#fff;text-shadow:0 2px 50px rgba(6,19,37,.7)}
body.home .hero h1 .hero-accent{background:linear-gradient(180deg,#8FDBFA 0%,#27ADE3 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#5BC8F5}
body.home .hero .sub{color:#C7D7E8}
body.home .hero .sub b,body.home .hero .sub strong{color:#fff;font-weight:600}
body.home .hero .hero-trust{color:#AFC2D6}
body.home .hero .hero-trust b{color:#fff}
body.home .hero .hero-trust svg{color:#5BC8F5}
body.home .hero .hero-rep-score{color:#EAF4FC}
body.home .hero .hero-rep-num{color:#C7D7E8;font-size:14px;letter-spacing:.01em}
body.home .hero .hero-rep-num b{color:#fff;font-weight:700}
body.home .hero .hero-rep-badges li{color:#C7D4EA;font-weight:600}
body.home .hero .hero-rep-badges svg{color:#5BC8F5;flex:0 0 auto}
/* CTAs: primary glows cyan; secondary is outline-on-dark */
body.home .hero .btn-primary{background:linear-gradient(180deg,#7AD2F7 0%,#27ADE3 100%);color:#06203A;border-color:transparent;box-shadow:0 12px 38px -8px rgba(39,173,227,.75),inset 0 1px 0 rgba(255,255,255,.55)}
body.home .hero .btn-primary:hover{background:linear-gradient(180deg,#8FDBFA 0%,#27ADE3 100%);color:#06203A;box-shadow:0 18px 50px -8px rgba(39,173,227,.95),inset 0 1px 0 rgba(255,255,255,.65)}
body.home .hero .btn-secondary{background:rgba(255,255,255,.02);color:#EAF4FC;border:1px solid rgba(174,204,230,.30)}
body.home .hero .btn-secondary:hover{background:rgba(91,200,245,.10);color:#fff;border-color:rgba(91,200,245,.6)}
/* the bill-scanner card floats as a panel above the dark background */
body.home .hero .hero-visual{filter:drop-shadow(0 22px 60px rgba(8,18,36,.55))}
body.home .hero .hero-visual::before{content:"";position:absolute;inset:-22px;border-radius:30px;background:radial-gradient(60% 60% at 50% 50%,rgba(255,255,255,.10),rgba(255,255,255,0) 70%);pointer-events:none;z-index:-1}
/* a soft left-side scrim raises text contrast where bright nodes cluster */
body.home .hero .container::before{content:"";position:absolute;left:-4%;top:0;bottom:0;width:56%;background:linear-gradient(90deg,rgba(6,19,37,.36) 0%,rgba(6,19,37,.14) 60%,rgba(6,19,37,0) 100%);pointer-events:none;z-index:-1}
@media (max-width:680px){
  body.home .hero h1{text-shadow:0 1px 20px rgba(6,19,37,.55)}
  body.home .hero .hero-constellation .hc-vig{background:radial-gradient(95% 100% at 50% 60%,rgba(6,19,37,0) 0%,rgba(6,19,37,.42) 100%),linear-gradient(0deg,rgba(6,19,37,.45) 0%,rgba(6,19,37,0) 24%)}
  body.home .hero .container::before{width:100%;background:linear-gradient(180deg,rgba(6,19,37,.45) 0%,rgba(6,19,37,0) 60%)}
}

/* === Customer account portal ==================================================
   The nav pill, the mobile-sheet button and the band on the Customer Information
   Centre. Deliberately its own namespace rather than .cta-band / .section--ink, so
   the dark-band link rules cannot reach in and repaint these on a different surface
   (which is exactly how the estimate-waiver links ended up at 1.49:1). */

/* Header pill. Outlined, not solid: existing customers need a signpost, not a second
   competing call to action next to Free Bill Analysis. */
.nav-account{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border:1.5px solid var(--line);
  border-radius:var(--radius-pill);font-family:var(--font-display);font-weight:600;font-size:14px;
  color:var(--cyan-text);white-space:nowrap;transition:border-color .15s,background .15s,color .15s}
.nav-account svg{width:16px;height:16px;flex:none;opacity:.85}
.nav-account:hover{border-color:#BFE0F4;background:#F2FAFE;color:var(--cyan-text-hover)}
.nav-account:focus-visible{outline:2px solid var(--cyan-text);outline-offset:2px}
@media(max-width:1024px){.nav-right .nav-account{display:none}}
/* The pill costs horizontal room the nav did not have: adding it pushed .nav-right past the
   container at 1180, 1280 and 1366 — and body{overflow-x:clip} meant the page measured clean
   while the pill was quietly cut off. Below 1440 the phone number gives way to it. The number
   is still in the footer, on /contact/, in the mobile bar and in the page-head CTA row; the
   portal has no other desktop entry point. */
@media(max-width:1439px){.nav-right .nav-phone{display:none}}
/* Between the tablet breakpoint and 1365px the desktop nav is still showing, so there is no
   hamburger to fall back on — the pill has to stay reachable. It becomes a labelled icon
   button: same target, a fraction of the width. */
@media(max-width:1365px){
  /* 9 top-level items plus the logo, the pill and the CTA is a tight row at this width.
     Shaving 2px either side of each nav item buys back the container padding the pill took. */
  .nav-item>a{padding-left:9px;padding-right:9px}
  .nav-right .nav-account{padding:0;width:38px;height:38px;justify-content:center;border-radius:50%}
  .nav-right .nav-account span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .nav-right .nav-account svg{width:18px;height:18px;opacity:1}
}

/* Mobile sheet. Third button under the two primary actions, visually quieter. */
.btn-account{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:#F2FAFE;color:var(--cyan-text);border:1.5px solid #BFE0F4}
.btn-account svg{width:17px;height:17px;flex:none}
.btn-account:hover{background:#E4F4FD;color:var(--cyan-text-hover)}

/* The band. Navy so it separates cleanly from the white document cards below it. */
.portal-band{background:linear-gradient(135deg,#0C2A4D 0%,#14538F 62%,#16609F 100%);color:#fff;
  padding:54px 0;position:relative;overflow:hidden}
.portal-band::after{content:"";position:absolute;right:-140px;top:-160px;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(92,201,240,.30) 0%,rgba(92,201,240,0) 68%);pointer-events:none}
.portal-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.25fr .85fr;gap:46px;align-items:center}
.portal-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#8EDBF7;
  background:rgba(142,219,247,.12);border:1px solid rgba(142,219,247,.30);
  padding:6px 13px;border-radius:var(--radius-pill);margin-bottom:16px}
.portal-eyebrow svg{width:15px;height:15px;flex:none}
.portal-copy h2{font-family:var(--font-display);font-size:clamp(25px,3.1vw,33px);line-height:1.18;margin:0 0 14px;color:#fff}
.portal-copy p{margin:0 0 12px;font-size:16px;line-height:1.65;color:#DCEAF7;max-width:56ch}
.portal-copy p strong{color:#fff;font-weight:700}
.portal-help{font-size:14.5px !important;color:#BBD4EA !important}
.portal-band a:not(.portal-btn):not(.portal-reset){color:#A9E2F9;text-decoration:underline;
  text-underline-offset:2px;font-weight:600}
.portal-band a:not(.portal-btn):not(.portal-reset):hover{color:#D8F2FD}

/* The sign-in card. White, so the action reads as the one bright thing in the band. */
.portal-card{background:#fff;border-radius:16px;padding:24px;box-shadow:0 22px 44px -26px rgba(4,20,40,.85);
  display:flex;flex-direction:column;gap:14px}
.portal-card-top{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:600;
  font-size:13px;color:var(--ink-soft);padding-bottom:14px;border-bottom:1px solid var(--line);word-break:break-all}
.portal-card-top svg{width:20px;height:20px;flex:none;color:var(--cyan-text)}
.portal-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--cyan-text);
  color:#fff;font-family:var(--font-display);font-weight:700;font-size:15.5px;padding:14px 20px;
  border-radius:var(--radius-pill);text-decoration:none;transition:background .15s,transform .15s}
.portal-btn svg{width:18px;height:18px;flex:none}
.portal-btn:hover{background:var(--cyan-text-hover);color:#fff;transform:translateY(-1px)}
.portal-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.portal-reset{text-align:center;font-size:13.5px;font-weight:600;color:var(--cyan-text);text-decoration:underline;
  text-underline-offset:2px}
.portal-reset:hover{color:var(--cyan-text-hover)}
@media(prefers-reduced-motion:reduce){.portal-btn{transition:none}.portal-btn:hover{transform:none}}
@media(max-width:860px){
  .portal-band{padding:40px 0}
  .portal-inner{grid-template-columns:1fr;gap:26px}
  .portal-card{padding:20px}
}

/* === Guide article callouts (Official 3CX docs reference + variants) =====
   Used inside guide article bodies (see hub/guides.js / research/guides-parts).
   Renders an <aside class="guide-callout guide-callout--docs"> as a clean
   bordered card with a left accent, a small docs glyph and a clear title row. */
.guide-callout{position:relative;display:block;margin:22px 0 26px;padding:18px 22px 18px 64px;background:#F4FAFE;border:1px solid #D7E8F5;border-left:4px solid #27ADE3;border-radius:10px;color:#16243B;font-size:15.5px;line-height:1.6}
.guide-callout p{margin:0}
.guide-callout p+p{margin-top:8px}
.guide-callout .gc-h{font-family:'Sora','Segoe UI',sans-serif;font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:#1862AD;margin:0 0 6px}
.guide-callout a{color:#1862AD;font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1.5px}
.guide-callout a:hover{color:#27ADE3}
.guide-callout::before{content:"";position:absolute;left:18px;top:18px;width:32px;height:32px;border-radius:8px;background:#fff;border:1px solid #D7E8F5;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231862AD' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4.5A2.5 2.5 0 0 1 6.5 2H20v17H6.5A2.5 2.5 0 0 0 4 21.5z'/><path d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/><path d='M8 7h8M8 11h6'/></svg>");background-repeat:no-repeat;background-position:center;background-size:18px}
@media (max-width:680px){
  .guide-callout{padding:16px 16px 16px 56px;font-size:15px}
  .guide-callout::before{left:14px;top:14px;width:28px;height:28px;background-size:16px}
}

/* === Pre-port diversion flow (homepage emergencyPortFlow() section) =====
   3-stage horizontal flow chart with stages: phone down -> temp number live
   today -> real port complete. Mobile stacks vertically with rotated arrows. */
.ppflow .sec-head .lead{max-width:760px;margin-left:auto;margin-right:auto}
.ppflow-board{display:flex;align-items:stretch;justify-content:center;gap:0;margin:36px auto 0;max-width:1180px;flex-wrap:nowrap}
.ppflow-stage{flex:1 1 0;min-width:0;background:#fff;border:1px solid #E1E9F2;border-radius:18px;padding:24px 22px 22px;text-align:center;box-shadow:0 18px 38px -28px rgba(20,83,143,.22);display:flex;flex-direction:column;align-items:center;position:relative}
.ppflow-stage .ppflow-day{display:inline-block;font:700 11px/1 'Sora','Segoe UI',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#646E80;background:#F4F8FC;border:1px solid #E1E9F2;border-radius:100px;padding:6px 11px;margin-bottom:14px}
.ppflow-stage .ppflow-icon{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;margin-bottom:14px}
.ppflow-stage .ppflow-icon svg{width:28px;height:28px}
.ppflow-stage h3{font:700 17px/1.3 'Sora','Segoe UI',sans-serif;color:#16243B;margin:0 0 8px}
.ppflow-stage p{font:400 14.5px/1.55 'Inter','Segoe UI',sans-serif;color:#3A4A60;margin:0}

/* Down — muted amber, phone visibly broken */
.ppflow-stage--down{border-color:#F2DDC6}
.ppflow-stage--down .ppflow-day{background:#FFF5EA;border-color:#F2DDC6;color:#8C5A1E}
.ppflow-stage--down .ppflow-icon{background:#FFF5EA;color:#B86A1E}

/* Live — brand cyan, glowing (this is the hero state — the thing we do) */
.ppflow-stage--live{border-color:#27ADE3;box-shadow:0 22px 60px -22px rgba(39,173,227,.55), 0 0 0 1px #27ADE3 inset}
.ppflow-stage--live .ppflow-day{background:#EAF6FE;border-color:#BDE3F6;color:#14538F}
.ppflow-stage--live .ppflow-icon{background:linear-gradient(160deg,#EAF6FE,#D7EDFB);color:#14538F;box-shadow:inset 0 0 0 1px #BDE3F6}
.ppflow-stage--live h3{color:#0E2238}

/* Done — green tick, complete */
.ppflow-stage--done{border-color:#CDEBDC}
.ppflow-stage--done .ppflow-day{background:#E7F8F0;border-color:#CDEBDC;color:#076B41}
.ppflow-stage--done .ppflow-icon{background:#E7F8F0;color:#0E9A5E}

/* Arrow connecting stages */
.ppflow-arrow{flex:0 0 60px;align-self:center;height:24px;display:flex;align-items:center;justify-content:center;color:#27ADE3}
.ppflow-arrow svg{width:60px;height:24px;display:block}

.ppflow-foot{margin-top:30px;text-align:center;max-width:820px;margin-left:auto;margin-right:auto;background:#F4F8FC;border:1px solid #E1E9F2;border-radius:14px;padding:18px 22px}
.ppflow-foot p{font:400 15.5px/1.65 'Inter','Segoe UI',sans-serif;color:#16243B;margin:0}
.ppflow-foot strong{color:#0E2238}
.ppflow-foot a{color:#1862AD;font-weight:700}
.ppflow-foot a:hover{color:#27ADE3}

/* "Failover layer active" pulse label on the middle (live) stage card */
.ppflow-stage .ppflow-pulse{position:absolute;top:-13px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:7px;background:#0A7A48;color:#fff;font:700 10.5px/1 'Sora','Segoe UI',sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:7px 13px 7px 11px;border-radius:100px;box-shadow:0 8px 18px -6px rgba(14,154,94,.55),0 0 0 3px #fff;white-space:nowrap;z-index:2}
.ppflow-stage .ppflow-pulse-dot{position:relative;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.85)}
.ppflow-stage .ppflow-pulse-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#fff;animation:ppflow-pulse-anim 1.7s ease-out infinite}
@keyframes ppflow-pulse-anim{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(3.4);opacity:0}}
.ppflow-stage--live{margin-top:8px}

/* Two-column detail block under the chart: Key benefits + Common scenarios */
.ppflow-detail{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:36px auto 0;max-width:1180px}
.ppflow-detail-col{background:#fff;border:1px solid #E1E9F2;border-radius:14px;padding:22px 24px;box-shadow:0 14px 30px -24px rgba(20,83,143,.20)}
.ppflow-detail-col h3{font:700 14.5px/1 'Sora','Segoe UI',sans-serif;letter-spacing:.10em;text-transform:uppercase;color:#1862AD;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid #E1E9F2}
.ppflow-detail-col--scns h3{color:#8C5A1E}
.ppflow-list{list-style:none;padding:0;margin:0}
.ppflow-list li{display:flex;align-items:flex-start;gap:10px;font:400 14.5px/1.55 'Inter','Segoe UI',sans-serif;color:#16243B;padding:8px 0}
.ppflow-list li+li{border-top:1px solid #F0F4F9}
.ppflow-li-ic{flex:0 0 18px;width:18px;height:18px;display:inline-grid;place-items:center;color:#0E9A5E;margin-top:1px}
.ppflow-detail-col--scns .ppflow-li-ic{color:#B86A1E}
.ppflow-li-ic svg{width:16px;height:16px}

@media (max-width:1024px){
  .ppflow-detail{grid-template-columns:1fr;gap:16px;max-width:none}
  .ppflow-detail-col{padding:18px 18px}
}
@media (max-width:680px){
  .ppflow-stage .ppflow-pulse{font-size:9.5px;padding:6px 10px 6px 9px}
  .ppflow-stage--live{margin-top:14px}
}

/* Tablet — keep 3-up but tighten */
@media (max-width:1024px){
  .ppflow-board{max-width:none;gap:0}
  .ppflow-arrow{flex:0 0 40px}
  .ppflow-arrow svg{width:40px}
  .ppflow-stage{padding:20px 16px}
  .ppflow-stage h3{font-size:16px}
  .ppflow-stage p{font-size:14px}
}

/* Mobile — stack vertically with rotated arrows */
@media (max-width:680px){
  .ppflow-board{flex-direction:column;align-items:stretch;gap:0;max-width:480px}
  .ppflow-stage{padding:22px 20px}
  .ppflow-arrow{flex:0 0 36px;width:100%;height:36px;transform:rotate(90deg);margin:6px 0}
  .ppflow-arrow svg{width:60px;height:24px}
}

/* === AI Video Conferencing additions (Yealink small-room) =================
   New product grid + photo placeholders used inside the /ai-video-conferencing/
   COPY block. Photo frames resolve to real <img> at build time if a file
   exists at site-src/assets/<slot>.{jpg,jpeg,png,webp}; otherwise the
   "is-empty" frame shows a labelled fallback (the drop-in placeholder). */
.aiv-product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:28px 0}
.aiv-product-card{background:#fff;border:1px solid #E1E9F2;border-radius:14px;padding:22px 22px 20px;box-shadow:0 14px 30px -22px rgba(20,83,143,.22);display:flex;flex-direction:column;gap:10px}
.aiv-product-card h3{font:700 18px/1.3 'Sora','Segoe UI',sans-serif;color:#0E2238;margin:0}
.aiv-product-card .aiv-product-kind{font:600 12.5px/1.4 'Inter','Segoe UI',sans-serif;letter-spacing:.02em;color:#1862AD;text-transform:none;margin:-2px 0 4px}
.aiv-product-card p{font:400 14.5px/1.6 'Inter','Segoe UI',sans-serif;color:#3A4A60;margin:0}
.aiv-product-card strong{color:#0E2238}
@media (max-width:1024px){.aiv-product-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.aiv-product-grid{grid-template-columns:1fr;gap:16px}}

.aiv-photo{margin:28px 0;display:block}
.aiv-photo-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#F4F8FC;border:1px solid #E1E9F2}
.aiv-photo-frame.has-image{border-style:solid}
.aiv-photo-frame.has-image img{display:block;width:100%;height:100%;object-fit:cover}
.aiv-photo-frame.is-empty{border-style:dashed;border-color:#BDE3F6;display:grid;place-items:center;text-align:center;padding:18px;background:linear-gradient(160deg,#F4FAFE,#EAF4FC);min-height:240px}
.aiv-photo-frame.is-empty::before{content:"";position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:12px;background:#fff;border:1px solid #D7E8F5;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231862AD' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><circle cx='9' cy='11' r='2'/><path d='m21 17-5-5L5 19'/></svg>");background-repeat:no-repeat;background-position:center;background-size:22px}
.aiv-photo-frame.is-empty .aiv-photo-fallback{position:relative;margin-top:54px;font:600 13.5px/1.5 'Inter','Segoe UI',sans-serif;color:#1862AD;letter-spacing:.01em;max-width:520px}
.aiv-photo figcaption{margin-top:10px;font:400 13.5px/1.55 'Inter','Segoe UI',sans-serif;color:#646E80;text-align:center}
@media (max-width:680px){
  .aiv-photo-frame.is-empty{min-height:180px}
  .aiv-photo-frame.is-empty::before{width:38px;height:38px;background-size:18px}
  .aiv-photo-frame.is-empty .aiv-photo-fallback{font-size:12.5px;margin-top:46px}
}


/* === Article data charts (inline SVG; e.g. NBN-speed blog) ================ */
.nbn-chart{margin:26px 0;background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px 16px;box-shadow:var(--shadow-sm)}
.nbn-chart svg{display:block;width:100%;height:auto}
.nbn-chart .nbnc-title{font-family:'Sora','Montserrat',sans-serif;font-weight:700;font-size:16px;fill:#16243B}
.nbn-chart .nbnc-axis{font-family:'Inter','Segoe UI',sans-serif;font-size:12px;fill:#646E80}
.nbn-chart .nbnc-lbl{font-family:'Inter','Segoe UI',sans-serif;font-weight:600;font-size:13px}
.nbn-chart .nbnc-gap{font-family:'Inter','Segoe UI',sans-serif;font-weight:700;font-size:13.5px;fill:#8C5A1E}
.nbn-chart figcaption{margin-top:12px;font:400 13.5px/1.55 'Inter','Segoe UI',sans-serif;color:#646E80;text-align:center}
@media(max-width:680px){.nbn-chart{padding:14px 12px 12px}.nbn-chart .nbnc-title{font-size:13.5px}.nbn-chart .nbnc-axis{font-size:11px}}

/* === Bandwidth calculator (lead magnet) ================================== */
.bwcalc{margin:30px 0;background:linear-gradient(180deg,#FFFFFF,#F4F8FC);border:1px solid var(--line);border-radius:16px;padding:24px 24px 18px;box-shadow:var(--shadow-sm)}
.bwcalc-kicker{display:inline-block;font:700 11px/1 'Inter','Segoe UI',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:linear-gradient(90deg,#1862AD,#27ADE3);padding:5px 11px;border-radius:100px;margin-bottom:10px}
.bwcalc-head h3{font:700 19px/1.3 'Sora','Montserrat',sans-serif;color:var(--ink);margin:0 0 16px}
.bwcalc-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:14px;margin-bottom:16px}
.bwcalc-field label{display:block;font:600 13px/1 'Inter','Segoe UI',sans-serif;color:var(--ink-soft);margin-bottom:6px}
.bwcalc-field input,.bwcalc-field select{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;font:500 15px/1.2 'Inter','Segoe UI',sans-serif;color:var(--ink);background:#fff}
.bwcalc-field input:focus,.bwcalc-field select:focus{outline:2px solid var(--cyan-ink);outline-offset:1px;border-color:var(--cyan-ink);box-shadow:0 0 0 3px var(--soft)}
.bwcalc .bwcalc-go{margin:2px 0}
.bwcalc-result{margin-top:16px}
.bwcalc-out-in{display:flex;gap:18px;align-items:center;flex-wrap:wrap;background:#fff;border:1px solid #D7E8F5;border-left:4px solid #27ADE3;border-radius:12px;padding:16px 18px}
.bwcalc-num{display:flex;flex-direction:column;align-items:flex-start;min-width:118px}
.bwcalc-num-v{font:800 38px/1 'Sora','Montserrat',sans-serif;color:#14538F;letter-spacing:-.02em}
.bwcalc-num-u{font:700 14px/1 'Inter','Segoe UI',sans-serif;color:#1577C2;margin-top:3px}
.bwcalc-num-l{font:500 12px/1.3 'Inter','Segoe UI',sans-serif;color:var(--muted);margin-top:6px}
.bwcalc-rec{display:flex;flex-direction:column;gap:3px;border-left:1px solid var(--line);padding-left:18px;flex:1;min-width:210px}
.bwcalc-rec-l{font:700 11px/1 'Inter','Segoe UI',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.bwcalc-rec-plan{font:700 18px/1.25 'Sora','Montserrat',sans-serif;color:var(--cyan-ink);text-decoration:none}
.bwcalc-rec-plan:hover{text-decoration:underline}
.bwcalc-rec-note{font:400 13.5px/1.5 'Inter','Segoe UI',sans-serif;color:var(--ink-soft)}
.bwcalc-note{margin:14px 0 0;font:400 13px/1.55 'Inter','Segoe UI',sans-serif;color:var(--muted)}
.bwcalc-note a{color:var(--cyan-ink);font-weight:600}
@media(max-width:600px){.bwcalc-grid{grid-template-columns:1fr}.bwcalc-out-in{flex-direction:column;align-items:flex-start;gap:12px}.bwcalc-rec{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:12px;width:100%}.bwcalc .bwcalc-go{width:100%}}

/* Blog featured photo (only renders when a real photo exists): cap as a tasteful
   banner rather than a full 16:9 hero. */
.photo-slot.blog-hero{aspect-ratio:auto;height:340px}
@media(max-width:680px){.photo-slot.blog-hero{height:200px}}

/* === Firewall brand accordion (resource articles, e.g. allow-ICMP guide) ==== */
.fw-steps{margin:24px 0;display:flex;flex-direction:column;gap:12px}
.brandstep{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-sm);overflow:hidden}
.brandstep>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:16px 18px;font:700 16px/1.3 'Sora','Montserrat',sans-serif;color:var(--ink)}
.brandstep>summary::-webkit-details-marker{display:none}
.brandstep>summary:focus-visible{outline:2px solid var(--cyan-ink);outline-offset:-2px}
.brandstep .bs-ic{width:38px;height:38px;flex:0 0 38px;border-radius:10px;display:grid;place-items:center;background:#EAF6FE;color:#14538F;border:1px solid #D7E8F5}
.brandstep .bs-name{flex:1}
.brandstep>summary::after{content:"";width:11px;height:11px;flex:0 0 11px;border-right:2.4px solid var(--muted);border-bottom:2.4px solid var(--muted);transform:rotate(45deg);transition:transform .18s;margin-right:4px}
.brandstep[open]>summary::after{transform:rotate(-135deg)}
.brandstep[open]>summary{border-bottom:1px solid var(--line)}
.brandstep .bs-body{padding:14px 18px 18px}
.brandstep .bs-body p{margin:0 0 10px;font:400 15px/1.6 'Inter','Segoe UI',sans-serif;color:var(--ink-soft)}
.brandstep .bs-body ol{margin:6px 0 12px;padding-left:20px}
.brandstep .bs-body li{font:400 15px/1.65 'Inter','Segoe UI',sans-serif;color:var(--ink-soft);margin:5px 0}
.brandstep .bs-body a{color:var(--cyan-ink);font-weight:600}
.brandstep .bs-body strong{color:var(--ink)}
.brandstep .bs-body em{font-style:normal;color:var(--ink);background:#F4F8FC;padding:1px 6px;border-radius:5px;font-size:.94em;white-space:nowrap}
@media(max-width:600px){.brandstep>summary{font-size:15px;padding:14px}.brandstep .bs-ic{width:32px;height:32px;flex-basis:32px}.brandstep .bs-body em{white-space:normal}}

/* ===== Estimate waiver — every indicative saving/cost surface carries one ===== */
.est-waiver{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:14px 16px;border-radius:12px;
  background:#FBF2E0;border:1px solid rgba(138,90,0,.28);border-left:4px solid #8A5A00}
.est-waiver p,
body.t-offer .section--ink .est-waiver p,
.section--ink .est-waiver p{margin:0;font-size:13.5px;line-height:1.55;color:#5A4413;max-width:none}
.est-waiver p strong,
.section--ink .est-waiver p strong{color:#3D2D09}
.est-waiver a,
.section--ink .est-waiver a{color:#6B4A0C;font-weight:700;text-underline-offset:2px}
.est-waiver a:hover{color:#3D2D09}
.est-waiver-badge{flex:none;font-family:var(--font-display);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:#8A5A00;border-radius:5px;padding:4px 8px;margin-top:1px}
.est-waiver--inline{margin:0;border-radius:0 0 var(--radius) var(--radius);border-left-width:1px;border-top:1px solid rgba(138,90,0,.28);
  border-right:0;border-bottom:0;padding:13px 22px 15px}
@media(max-width:560px){.est-waiver{flex-direction:column;gap:9px}}

/* ===== AA contrast: cyan on dark grounds =====
   --cyan-text (#1862AD) is the AA-safe cyan for light surfaces. On the dark navy
   bands it inverts: the brand's Light-Cyan Highlight #5CC9F0 is the readable one
   (7.6:1 on #0C2A4D), which is what BRAND.md already specifies for dark panels. */
/* Measured, not assumed: every one of these bands renders rgb(20,83,143) #14538F, not the
   #0C2A4D the note above reasons from. #5CC9F0 is 4.16:1 there — under AA. #8EDBF7 is 5.12:1
   on #14538F and 9.37:1 on #0C2A4D, so it clears both. */
.section--ink .eyebrow,
.cta-band .eyebrow,
.section--control .eyebrow{color:#8EDBF7}
.section--ink a:not(.btn):not(.nav-cta),
.cta-band a:not(.btn):not(.nav-cta){color:#8ED6F5}
.section--ink a:not(.btn):not(.nav-cta):hover,
.cta-band a:not(.btn):not(.nav-cta):hover{color:#BCE6FA}

/* Substantiation note under the savings figures. Deliberately quiet but readable —
   it is a legal basis statement, not fine print to be hidden. */
.save-basis{grid-column:1/-1;max-width:74ch;margin:8px auto 0;padding-top:22px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.65;color:var(--ink-soft);text-align:left}
.save-basis strong{color:var(--ink)}
.save-basis a{color:var(--cyan-text);font-weight:600}

/* The "Save up to 65%" proof-strip claim links to its basis statement. */
.proof-item .proof-basis{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor}
.proof-item .proof-basis:hover{color:var(--cyan-text);border-bottom-style:solid}
.proof-item .proof-basis sup{font-size:.7em;margin-left:1px}

/* National product page -> Melbourne counterpart */
.localtwin{display:grid;gap:20px;align-items:center;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:26px 30px;box-shadow:var(--shadow-sm)}
@media(min-width:820px){.localtwin{grid-template-columns:minmax(0,1fr) auto;gap:34px}
  .localtwin .lt-cta{white-space:nowrap}}
.localtwin .lt-text h2{font-size:22px;margin:0 0 6px;letter-spacing:-.01em}
.localtwin .lt-text p{margin:0;color:var(--ink-soft);max-width:58ch}
/* nowrap belongs to the two-column layout only. As a base rule it floored the single
   implicit track at the button's full width (325-379px) inside a 298px card, pushing the
   heading, paragraph and button off the right of the screen on every phone. */
.localtwin .lt-cta{justify-self:start}

/* Calculator hint sits on a white card inside a dark band; the band's paragraph
   colour was winning on specificity and rendering it invisible. */
.calc-hint,
body.t-offer .section--ink .calc-hint,
.section--ink .calc-hint{color:var(--ink-soft)}

/* Note under the bill-upload field */
.cform .field-note{margin:-6px 0 4px;font-size:13px;color:var(--ink-soft);line-height:1.5}

/* ===== 3CX partner section =====
   Namespaced tcxp-* : the console mockup further up this file already owns .tcx-grid
   (and the rest of the .tcx-* family), and these rules were overriding it — the console's
   extension list was being forced into a three-column grid. */
   3CX brand: #0596D4 blue, #373737 grey, Open Sans. Their badge is supplied on a
   dark grey ground, so the header block matches it rather than sitting on white. */
.tcxp-sec{background:var(--paper-2)}
.tcxp-head{display:grid;gap:22px;align-items:center;background:#373737;border-radius:var(--radius);
  padding:28px 30px;margin-bottom:26px}
@media(min-width:820px){.tcxp-head{grid-template-columns:auto minmax(0,1fr);gap:32px;padding:32px 38px}}
/* The Gold seal is a black badge on transparent, so it needs a light disc behind it to read
   against the dark grey header block — on #373737 the black ring all but disappears. */
.tcxp-badge{width:104px;height:104px;display:block;border-radius:50%;background:#fff;padding:7px;
  box-shadow:0 4px 16px rgba(0,0,0,.28)}
.tcxp-head-text .eyebrow{color:#4FC3F7;margin-bottom:8px}
.tcxp-head-text h2{color:#fff;font-size:24px;letter-spacing:-.015em;margin:0 0 8px}
.tcxp-head-text p{color:#D6DADE;margin:0;max-width:70ch;font-size:15.5px;line-height:1.6}
/* The product screenshots arrive at wildly different aspect ratios, so a plain auto-height
   grid produced cards three times taller than their neighbours. Each image now sits in a
   fixed 16:10 box and is contained inside it: tidier rows, and smaller on the page. */
.tcxp-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:700px){.tcxp-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.tcxp-grid{grid-template-columns:repeat(3,1fr)}}
.tcxp-shot{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.tcxp-shot img{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;display:block;
  border-bottom:1px solid var(--line);background:#fff;padding:10px}
.tcxp-shot figcaption{padding:12px 15px 14px;display:grid;gap:3px}
.tcxp-shot figcaption b{font-family:var(--font-display);font-size:15px;color:var(--ink)}
.tcxp-shot figcaption span{font-size:13.5px;color:var(--ink-soft);line-height:1.5}
.tcxp-credit{margin:18px 0 0;font-size:12.5px;color:var(--muted);text-align:center}

/* ============================================================
   Customer Information Centre — document pages
   The eleven policy documents are published exactly as the client
   approved them, so the markup they arrive with (section/h2/h3/
   table/.callout/.faq details/.govtable/.backtop) is styled here
   rather than rewritten. Everything is scoped to .doc-body so it
   cannot leak into the marketing templates.
   ============================================================ */
.docpage{padding:38px 0 64px;background:var(--paper-2)}
.doc-layout{display:grid;grid-template-columns:266px minmax(0,1fr);gap:38px;align-items:start}
/* minmax(0,1fr), not 1fr. `1fr` is `minmax(auto,1fr)`, so the track floor is the min-content
   of its contents — and .doc-tablewrap table sets min-width:520px. At 390px that made the
   whole document column 562px wide inside a 360px container, and because an ancestor clips
   overflow there was no scrollbar: a third of every line was silently cut off. */
@media(max-width:1000px){.doc-layout{grid-template-columns:minmax(0,1fr);gap:22px}}

/* contents rail */
.doc-toc{position:sticky;top:96px;align-self:start;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:20px 20px 14px;max-height:calc(100vh - 130px);overflow:auto}
@media(max-width:1000px){.doc-toc{position:static;max-height:none}}
.doc-toc-h{font-size:.74rem;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);
  margin:0 0 12px;font-family:var(--font-body);font-weight:700}
.doc-toc ol{list-style:none;margin:0;padding:0;counter-reset:none}
.doc-toc li{margin:0 0 3px}
.doc-toc a{display:block;text-decoration:none;color:var(--ink-soft);font-size:.87rem;line-height:1.4;
  border-left:3px solid var(--line);padding:6px 0 6px 12px}
.doc-toc a:hover,.doc-toc a:focus-visible{color:var(--cyan-text);border-left-color:var(--cyan);background:var(--soft)}

/* the document itself */
.doc-body{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:34px 44px 40px;font-size:1rem;line-height:1.7;color:var(--ink)}
@media(max-width:640px){.doc-body{padding:24px 20px 30px}}
.doc-body>section{scroll-margin-top:96px}
/* In-page targets land below the sticky header, not under it. #bill-form is where every
   'Free Bill Analysis' button on /bill-analysis/ now goes. */
#bill-form,#savings-calculator,#savings-basis,#estimate-waiver{scroll-margin-top:96px}
.doc-body h2{font-family:var(--font-display);color:var(--cyan-text);font-size:1.42rem;line-height:1.25;
  margin:2.1em 0 .5em;padding-bottom:.32em;border-bottom:2px solid var(--paper-2)}
.doc-body>section:first-child>h2{margin-top:0}
.doc-body h3{font-family:var(--font-display);color:var(--ink);font-size:1.08rem;margin:1.7em 0 .4em}
.doc-body h4{font-family:var(--font-display);margin:1.4em 0 .3em;font-size:1rem}
.doc-body p{margin:0 0 1em;max-width:74ch;color:var(--ink-soft)}
.doc-body ul,.doc-body ol{margin:0 0 1.2em;padding-left:1.25em;max-width:74ch;color:var(--ink-soft)}
.doc-body li{margin-bottom:.45em}
.doc-body li::marker{color:var(--cyan)}
.doc-body strong{color:var(--ink)}
.doc-body a{color:var(--cyan-text);text-decoration:underline;text-underline-offset:2px}
.doc-body a:hover{color:var(--cyan-text-hover)}

/* Callouts. Scoped to .doc-body until now, which meant the one callout that ships outside a
   Customer Information document — the call-recording law warning on
   /business-phone-systems/ai-call-transcription/ — rendered as plain unboxed prose. It is the
   most consequential callout on the site, so it is the last one that should look like body text.
   The heading is matched as h3 or h4 so the box survives the outline fix in hub/copy.js. */
.callout{background:var(--paper-2);border-left:5px solid var(--cyan);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:18px 22px;margin:1.5em 0;max-width:74ch}
.callout :is(h3,h4){margin:0 0 .35em;color:var(--cyan-text);font-size:1rem;font-family:var(--font-display)}
.callout p:last-child{margin-bottom:0}

/* tables */
.doc-body table{border-collapse:collapse;width:100%;margin:1.2em 0 1.7em;font-size:.94rem;
  border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.doc-body th{background:var(--cyan-text);color:#fff;text-align:left;padding:11px 14px;font-weight:600;
  font-family:var(--font-display);font-size:.9rem}
.doc-body td{border-bottom:1px solid var(--line);padding:11px 14px;vertical-align:top;color:var(--ink-soft)}
.doc-body tr:last-child td{border-bottom:0}
.doc-body tr:nth-child(even) td{background:#FAFCFE}
.doc-body .govtable td:first-child{width:34%;font-weight:600;color:var(--cyan-text);background:#F4F8FC}
.doc-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.2em 0 1.7em;max-width:100%}
.doc-tablewrap table{margin:0;min-width:520px}

/* the documents' own FAQ disclosure list */
.doc-body .faq details{border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 18px;
  margin-bottom:10px;background:var(--paper)}
.doc-body .faq details[open]{background:#FAFCFE;border-color:#CFE3F5}
.doc-body .faq summary{font-weight:600;cursor:pointer;color:var(--cyan-text);font-family:var(--font-display)}
.doc-body .faq summary::marker{color:var(--cyan)}
.doc-body .faq details p{margin:.7em 0 0}
.doc-body .faq details p:last-child{margin-bottom:0}

.doc-body .backtop{display:inline-block;margin-top:6px;font-size:.82rem;color:var(--muted);text-decoration:none}
.doc-body .backtop:hover{color:var(--cyan-text);text-decoration:underline}

/* version / effective-date pills in the page head */
.doc-pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.doc-pills span{background:var(--soft);border:1px solid #CFE3F5;color:var(--cyan-text);
  border-radius:var(--radius-pill);padding:5px 14px;font-size:.79rem;font-weight:600;
  font-family:var(--font-body)}

/* cross-links to the rest of the set */
.doc-more{margin-top:30px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:24px 28px}
.doc-more h2{font-family:var(--font-display);font-size:1.02rem;margin:0 0 14px;color:var(--ink)}
.doc-more ul{list-style:none;margin:0;padding:0;display:grid;gap:8px 26px;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.doc-more a{color:var(--cyan-text);text-decoration:none;font-size:.92rem}
.doc-more a:hover{text-decoration:underline}
.doc-more-all{margin:16px 0 0;font-size:.9rem;font-weight:600}

/* ---- the hub ---- */
.ci-group{margin:0 0 42px}
.ci-group h2{font-family:var(--font-display);color:var(--cyan-text);font-size:1.16rem;margin:0 0 4px;
  border-bottom:2px solid var(--line);padding-bottom:.45em}
.ci-cards{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.ci-card{display:flex;flex-direction:column;height:100%;background:var(--paper);border:1px solid var(--line);
  border-left:5px solid var(--cyan);border-radius:var(--radius-sm);padding:22px 24px;text-decoration:none;color:inherit}
.ci-card:hover,.ci-card:focus-visible{border-left-color:var(--cyan-text);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.ci-card{transition:box-shadow .16s ease,transform .16s ease,border-color .16s ease}
@media(prefers-reduced-motion:reduce){.ci-card{transition:none}.ci-card:hover{transform:none}}
.ci-card h3{font-family:var(--font-display);margin:0 0 .45em;color:var(--cyan-text);font-size:1.03rem;line-height:1.3}
.ci-card p{margin:0 0 1em;font-size:.9rem;color:var(--ink-soft);line-height:1.6}
.ci-go{margin-top:auto;font-size:.76rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:700}
.ci-card:hover .ci-go{color:var(--cyan-text)}
.ci-note{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);padding:26px 30px;margin-top:8px}
.ci-note h2{font-family:var(--font-display);font-size:1.05rem;margin:0 0 8px;color:var(--ink)}
.ci-note p{margin:0;color:var(--ink-soft);max-width:82ch;font-size:.94rem}
.ci-note a{color:var(--cyan-text);text-decoration:underline;text-underline-offset:2px}
.ci-note a:hover{color:var(--cyan-text-hover)}

/* ============================================================
   Cookie consent banner + preferences dialog
   ============================================================ */
.cc-banner{position:fixed;left:0;right:0;bottom:0;z-index:120;background:var(--paper);
  border-top:1px solid var(--line);box-shadow:0 -10px 30px -16px rgba(20,30,50,.3)}
.cc-inner{max-width:var(--container);margin-inline:auto;padding:18px 28px;display:flex;gap:26px;
  align-items:center;justify-content:space-between;flex-wrap:wrap}
.cc-copy{flex:1 1 420px;min-width:0}
.cc-copy h2{font-family:var(--font-display);font-size:1rem;margin:0 0 4px;color:var(--ink)}
.cc-copy p{margin:0;font-size:.88rem;color:var(--ink-soft);max-width:86ch;line-height:1.6}
.cc-copy a{color:var(--cyan-text);text-decoration:underline;text-underline-offset:2px}
.cc-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cc-actions .btn{font-size:.86rem;padding:10px 20px}
.cc-link{background:none;border:0;padding:8px 4px;font:inherit;font-size:.86rem;color:var(--cyan-text);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.cc-link:hover{color:var(--cyan-text-hover)}
@media(max-width:640px){.cc-inner{padding:16px 18px;gap:14px}.cc-actions{width:100%}.cc-actions .btn{flex:1 1 auto;justify-content:center}}

.cc-modal{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;padding:24px}
/* [hidden] is honoured site-wide — see the global rule near the estimate waiver. */
.cc-backdrop{position:absolute;inset:0;background:rgba(12,26,48,.55)}
.cc-panel{position:relative;background:var(--paper);border-radius:var(--radius);max-width:600px;width:100%;
  max-height:86vh;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.cc-panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 26px 14px;border-bottom:1px solid var(--line)}
.cc-panel-head h2{font-family:var(--font-display);font-size:1.12rem;margin:0;color:var(--ink)}
.cc-x{background:none;border:0;font-size:1.7rem;line-height:1;color:var(--muted);cursor:pointer;padding:0 4px}
.cc-x:hover{color:var(--ink)}
.cc-panel-body{padding:6px 26px 12px;overflow:auto}
.cc-panel-foot{display:flex;gap:10px;flex-wrap:wrap;padding:16px 26px 22px;border-top:1px solid var(--line)}
.cc-panel-foot .btn{font-size:.88rem;padding:11px 22px}
.cc-row{padding:16px 0;border-bottom:1px solid var(--line)}
.cc-row:last-child{border-bottom:0}
.cc-row-t{display:flex;align-items:center;justify-content:space-between;gap:16px}
.cc-row-h{font-family:var(--font-display);font-weight:600;color:var(--ink);font-size:.98rem}
.cc-row p{margin:6px 0 0;font-size:.87rem;color:var(--ink-soft);line-height:1.6;max-width:66ch}
.cc-fixed{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.cc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cc-switch{position:relative;display:inline-flex;align-items:center;cursor:pointer;flex:0 0 auto}
.cc-switch input{position:absolute;opacity:0;width:46px;height:26px;margin:0;cursor:pointer}
.cc-track{width:46px;height:26px;border-radius:var(--radius-pill);background:#C6CDD6;position:relative;
  transition:background .16s ease}
.cc-track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;transition:transform .16s ease;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.cc-switch input:checked+.cc-track{background:var(--cyan-text)}
.cc-switch input:checked+.cc-track::after{transform:translateX(20px)}
.cc-switch input:focus-visible+.cc-track{outline:2px solid var(--cyan-text);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.cc-track,.cc-track::after{transition:none}}
html.cc-locked{overflow:hidden}

.footer-cookiebtn{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px}

/* Published commitments row (support page) */
.commit-row{margin-top:34px;padding-top:30px;border-top:1px solid var(--line)}
.commit-h{font-family:var(--font-display);font-size:1.08rem;margin:0 0 16px;color:var(--ink)}
.commit-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.commit-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  border-left:4px solid var(--cyan);border-radius:var(--radius-sm);padding:20px 22px;text-decoration:none;color:inherit;
  transition:box-shadow .16s ease,border-color .16s ease}
.commit-card:hover,.commit-card:focus-visible{border-left-color:var(--cyan-text);box-shadow:var(--shadow-sm)}
.commit-card h3{font-family:var(--font-display);font-size:.98rem;margin:0 0 .4em;color:var(--cyan-text)}
.commit-card p{margin:0 0 .9em;font-size:.88rem;color:var(--ink-soft);line-height:1.6}
.commit-go{margin-top:auto;font-size:.8rem;font-weight:700;color:var(--cyan-text)}
@media(prefers-reduced-motion:reduce){.commit-card{transition:none}}
.commit-row--solo{margin-top:0;padding-top:0;border-top:0}
.commit-all{margin:18px 0 0;font-size:.9rem;font-weight:600}
.commit-all a{color:var(--cyan-text);text-decoration:none}
.commit-all a:hover{text-decoration:underline}

/* ============================================================
   [hidden] must win, site-wide.
   The UA sheet's `[hidden]{display:none}` is the weakest rule there is, so any
   author `display` beats it — .btn's inline-flex meant every hidden button on
   the site still rendered. That is why the savings calculator showed "Back" and
   "Start again" on step 1: the controller hides them, the stylesheet un-hid them.
   ============================================================ */
[hidden]{display:none!important}

/* ============================================================
   Estimate waiver — one component, three placements
   Every surface carrying an indicative figure gets the banner at the top of the
   section; forms and outputs get the compact repeat that links back to it.
   ============================================================ */
.ew{--ew-ink:#5A4413;--ew-strong:#3D2D09;--ew-bg:#FDF6E4;--ew-line:#E4C77A;--ew-badge:#8A5A00}
.ew--banner{max-width:980px;margin:0 auto 26px;background:var(--ew-bg);border:1px solid var(--ew-line);
  border-left:5px solid var(--ew-badge);border-radius:var(--radius-sm);padding:20px 24px 18px;text-align:left}
.ew-top{display:flex;gap:13px;align-items:flex-start;flex-wrap:wrap}
.ew-badge{flex:none;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-size:10.5px;
  font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#fff;background:var(--ew-badge);
  border-radius:var(--radius-pill);padding:5px 11px;line-height:1}
.ew-badge svg{width:13px;height:13px;flex:none}
.ew-lead{margin:0;font-family:var(--font-display);font-weight:700;font-size:16px;line-height:1.45;
  color:var(--ew-strong);flex:1 1 300px;min-width:0}
.ew-sub{margin:13px 0 9px;font-size:14px;line-height:1.6;color:var(--ew-ink);max-width:96ch}
.ew-deps{margin:0 0 12px;padding-left:1.15em;display:grid;gap:4px 30px;
  grid-template-columns:repeat(auto-fit,minmax(310px,1fr));max-width:none}
.ew-deps li{font-size:13.5px;line-height:1.5;color:var(--ew-ink)}
.ew-deps li::marker{color:var(--ew-badge)}
.ew-foot{margin:0;font-size:13.5px;line-height:1.6;color:var(--ew-ink);max-width:100ch}
/* The estimate waiver is a cream panel that can sit inside a dark band. The band's own link
   rule is more specific than a bare `.ew a`, so it won and painted these links #8ED6F5 on
   #FDF6E4 — 1.49:1, effectively invisible. Restated here at higher specificity. */
.ew a{color:#6B4A0C;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.cta-band .ew a:not(.btn):not(.nav-cta),
.section--ink .ew a:not(.btn):not(.nav-cta),
.section--control .ew a:not(.btn):not(.nav-cta){color:#6B4A0C}
.cta-band .ew a:not(.btn):not(.nav-cta):hover,
.section--ink .ew a:not(.btn):not(.nav-cta):hover,
.section--control .ew a:not(.btn):not(.nav-cta):hover{color:var(--ew-strong)}
.ew a:hover{color:var(--ew-strong)}

/* compact repeats */
.ew--inline,.ew--foot{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  background:var(--ew-bg);border:1px solid var(--ew-line)}
.ew--inline{margin:16px -30px -24px;padding:12px 30px;border-width:1px 0 0;
  border-radius:0 0 var(--radius) var(--radius)}
.ew--foot{margin-top:12px;padding:12px 16px;border-left-width:4px;border-left-color:var(--ew-badge);
  border-radius:var(--radius-sm)}
.ew--inline p,.ew--foot p,
.section--ink .ew--inline p,.section--ink .ew--foot p,
body.t-offer .section--ink .ew--inline p,body.t-offer .section--ink .ew--foot p{
  margin:0;font-size:13px;line-height:1.5;color:var(--ew-ink);max-width:none;flex:1 1 220px;min-width:0}
.section--ink .ew-lead,.section--ink .ew-sub,.section--ink .ew-deps li,.section--ink .ew-foot,
body.t-offer .section--ink .ew-lead,body.t-offer .section--ink .ew-sub,
body.t-offer .section--ink .ew-deps li,body.t-offer .section--ink .ew-foot{color:var(--ew-ink)}
.section--ink .ew-lead,body.t-offer .section--ink .ew-lead{color:var(--ew-strong)}
@media(max-width:640px){
  .ew--banner{padding:17px 18px 15px}
  .ew--inline{margin:14px -20px -18px;padding:12px 20px}
  .ew-deps{grid-template-columns:1fr}
}

/* calculator nav: three fixed slots, nothing wraps */
.calc-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px;flex-wrap:nowrap}
.calc-nav-l,.calc-nav-r{display:flex;align-items:center;gap:9px;flex:0 0 auto;min-width:0}
.calc-nav-l{justify-content:flex-start}
.calc-nav-r{justify-content:flex-end;margin-left:auto}
.calc-step-count{flex:0 0 auto;white-space:nowrap;font-family:var(--font-display);font-weight:600;
  font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.btn-sm{font-size:14.5px;padding:10px 20px;white-space:nowrap}
@media(max-width:520px){
  .calc-nav{flex-wrap:wrap;justify-content:center}
  .calc-nav-l,.calc-nav-r{flex:1 1 auto}
  .calc-nav-r .btn{flex:1 1 auto}
  .calc-step-count{order:-1;width:100%;text-align:center}
}

/* ============================================================
   Microsoft Teams Direct Routing — imagery carried over from the
   existing sipconnect.com.au page and re-laid out.
   ============================================================ */
.tdr-sec{background:var(--paper-2)}
.tdr-steps{list-style:none;margin:0 0 34px;padding:0;display:grid;gap:18px;
  grid-template-columns:1fr;counter-reset:none}
@media(min-width:860px){.tdr-steps{grid-template-columns:repeat(3,1fr)}}
.tdr-step{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:22px 22px 24px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-sm)}
.tdr-n{position:absolute;top:-13px;left:22px;width:30px;height:30px;border-radius:50%;background:var(--cyan-text);
  color:#fff;font-family:var(--font-display);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}
.tdr-step img{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;display:block;margin-top:6px}
.tdr-step-b h3{font-family:var(--font-display);font-size:1.02rem;margin:0 0 6px;color:var(--ink)}
.tdr-step-b p{margin:0;font-size:.9rem;line-height:1.6;color:var(--ink-soft)}

.tdr-split{display:grid;gap:18px;margin:0 0 34px;grid-template-columns:1fr}
@media(min-width:860px){.tdr-split{grid-template-columns:1fr 1fr}}
.tdr-shot{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);
  overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.tdr-shot img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.tdr-shot figcaption{padding:14px 18px 16px;font-size:.88rem;line-height:1.55;color:var(--ink-soft)}

.tdr-fh{font-family:var(--font-display);text-align:center;font-size:1.1rem;margin:0 0 18px;color:var(--ink)}
.tdr-feats{list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.tdr-feat{display:flex;gap:14px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:16px 18px}
.tdr-feat img{flex:none;width:44px;height:44px;object-fit:contain}
.tdr-feat b{display:block;font-family:var(--font-display);font-size:.95rem;color:var(--ink);margin-bottom:3px}
.tdr-feat span{display:block;font-size:.86rem;line-height:1.5;color:var(--ink-soft)}
.tdr-credit{margin:26px 0 0;font-size:12.5px;color:var(--muted);text-align:center}

/* ============================================================
   1300 / 1800 phone word search
   ============================================================ */
.ns-sec{padding-bottom:52px}
.ns-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ns-form{max-width:760px;margin:0 auto}
.ns-bar{display:flex;align-items:center;gap:10px;background:var(--paper);border-radius:var(--radius-pill);
  padding:8px 8px 8px 20px;box-shadow:var(--shadow)}
.ns-pre{display:flex;color:var(--cyan-text);flex:none}
.ns-input{flex:1 1 auto;min-width:0;border:0;background:none;font-family:var(--font-display);
  font-size:19px;font-weight:600;color:var(--ink);padding:12px 0;letter-spacing:.02em}
.ns-input::placeholder{color:#9AA4B2;font-weight:500;letter-spacing:0}
.ns-input:focus{outline:none}
.ns-bar:focus-within{outline:2px solid var(--cyan);outline-offset:3px}
.ns-go{flex:none}
.ns-examples{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;margin:16px 0 0}
.ns-examples span{font-size:13px;color:#C7D8EA}
.ns-chip{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff;
  border-radius:var(--radius-pill);padding:6px 14px;font-family:var(--font-display);font-size:12.5px;
  font-weight:600;letter-spacing:.04em;cursor:pointer;transition:background .15s ease}
.ns-chip:hover{background:rgba(255,255,255,.24)}

.ns-out{margin:34px 0 0}
.ns-rh{font-family:var(--font-display);color:#fff;font-size:1.02rem;margin:26px 0 14px;text-align:center}
.ns-rh:first-child{margin-top:0}
.ns-msg{text-align:center;color:#DCE7F3;font-size:.95rem;margin:18px 0}
.ns-msg--warn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);
  border-radius:var(--radius-sm);padding:16px 20px;max-width:70ch;margin-inline:auto}
.ns-msg a{color:#9FD9F5;text-decoration:underline}
.ns-note{text-align:center;color:#C7D8EA;font-size:.9rem;max-width:70ch;margin:0 auto 16px}

.ns-grid{list-style:none;margin:0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.ns-grid--exact{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-bottom:8px}

/* The phone word carries the weight — it is what someone is choosing. Dark ink for the
   characters that actually dial, muted (but still AA) for the decorative tail, and the dialled
   number stated plainly under it. Previously the word was the faintest thing on the card. */
.ns-card{position:relative;background:var(--paper);border-radius:var(--radius-sm);
  padding:16px 18px 16px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;
  border:1px solid transparent;box-shadow:var(--shadow-sm)}
/* Loading skeleton. Same box as a real result card, so nothing shifts when the answer lands. */
.ns-card--skel{pointer-events:none;background:rgba(255,255,255,.55);box-shadow:none;border-color:rgba(255,255,255,.35);gap:9px}
.ns-card--skel .sk{display:block;border-radius:6px;background:linear-gradient(90deg,#DCE7F3 0%,#EEF5FB 50%,#DCE7F3 100%);
  background-size:200% 100%;animation:skshine 1.15s linear infinite}
.ns-card--skel .sk-tag{width:74px;height:15px;border-radius:999px}
.ns-card--skel .sk-word{width:62%;height:21px}
.ns-card--skel .sk-num{width:42%;height:14px}
@keyframes skshine{from{background-position:200% 0}to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.ns-card--skel .sk{animation:none}}
.ns-card.is-ok{border-color:#B9E2CB}
.ns-card.is-no,.ns-card.is-unknown{background:#EDF1F5;box-shadow:none;border-color:#DFE5EC}
.ns-card.is-big{padding:20px 22px 20px;gap:8px}

.ns-state{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-display);
  font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);border-radius:var(--radius-pill);padding:3px 9px;background:var(--paper-2)}
.ns-card.is-ok .ns-state{color:#0A6B3F;background:#E3F5EB}
.ns-card.is-ok .ns-state::before{content:"";width:6px;height:6px;border-radius:50%;background:#0A7A48}

.ns-num{margin:2px 0 0;font-family:var(--font-display);font-weight:700;font-size:1.32rem;
  line-height:1.15;letter-spacing:-.01em;word-break:break-word;color:var(--ink)}
.ns-card.is-big .ns-num{font-size:1.62rem}
.ns-pre-fmt{color:var(--cyan-text);margin-right:.34em;font-weight:700}
.ns-dial{color:var(--ink)}
.ns-extra{color:var(--muted);font-weight:600}
.ns-card.is-no .ns-dial,.ns-card.is-unknown .ns-dial{color:var(--ink-soft)}
.ns-card.is-no .ns-pre-fmt,.ns-card.is-unknown .ns-pre-fmt{color:var(--ink-soft)}

/* These cards are a light island inside a dark section, so every inherited colour has to be
   restated. Without it .btn-secondary rendered white-on-white and .ns-held picked up the
   section's pale blue body colour — both invisible on the card. */
.ns-card,.section--ink .ns-card,body.t-offer .section--ink .ns-card{color:var(--ink)}
.ns-pick{margin-top:8px;align-self:stretch;justify-content:center}
.ns-card .btn-secondary,
.section--ink .ns-card .btn-secondary,
body.t-offer .section--ink .ns-card .btn-secondary{
  background:var(--paper);color:var(--cyan-text);border-color:#BFD9EF}
.ns-card .btn-secondary:hover,
.section--ink .ns-card .btn-secondary:hover,
body.t-offer .section--ink .ns-card .btn-secondary:hover{
  background:var(--soft);color:var(--cyan-text-hover);border-color:var(--cyan-text)}
.ns-held,.section--ink .ns-held,body.t-offer .section--ink .ns-held,
.section--ink .ns-card p.ns-held{margin:6px 0 0;font-size:.79rem;line-height:1.4;color:var(--muted);max-width:none}
.ns-digits,.section--ink .ns-card p.ns-digits,body.t-offer .section--ink .ns-card p.ns-digits{
  margin:0;font-size:.95rem;font-weight:600;color:var(--ink-soft);letter-spacing:.04em;
  font-variant-numeric:tabular-nums;max-width:none}
.ns-num,.section--ink .ns-card p.ns-num,body.t-offer .section--ink .ns-card p.ns-num{max-width:none}

/* the parser's rejection state */
.ns-err{display:flex;gap:13px;align-items:flex-start;max-width:74ch;margin:0 auto;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);
  border-radius:var(--radius-sm);padding:16px 20px}
.ns-err-ico{flex:none;width:24px;height:24px;border-radius:50%;background:#FDF6E4;color:#8A5A00;
  font-family:var(--font-display);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:15px}
.ns-err p{margin:0;color:#EAF2FA;font-size:.94rem;line-height:1.6}

/* live feedback under the search bar */
.ns-hint{min-height:20px;margin:12px 0 0;text-align:center;font-size:.86rem;line-height:1.4;color:#C7D8EA}
.ns-hint.is-short{color:#FFD9A0}
.ns-hint.is-ok{color:#A7E8C6}

.ns-basis{max-width:78ch;margin:30px auto 0;text-align:center;font-size:.86rem;line-height:1.6;color:#C7D8EA}
.ns-basis b{color:#fff}

/* owned, not rented */
.ns-own-tbl{border:1px solid var(--line);border-radius:var(--radius-sm);
  overflow:hidden;background:var(--paper)}
.ns-own-head,.ns-own-row{display:grid;grid-template-columns:1.05fr 1.4fr 1.25fr;gap:0}
.ns-own-head{background:var(--paper-2);border-bottom:1px solid var(--line)}
.ns-own-head span{padding:13px 18px;font-family:var(--font-display);font-size:.85rem;font-weight:700}
.ns-own-head .is-us{color:#0A7A48}
.ns-own-head .is-them{color:var(--muted)}
.ns-own-row{border-bottom:1px solid var(--line)}
.ns-own-row:last-child{border-bottom:0}
.ns-own-row>span{padding:15px 18px;font-size:.9rem;line-height:1.55;color:var(--ink-soft)}
.ns-own-k{font-weight:600;color:var(--ink);background:#FAFCFE}
.ns-own-a{display:flex;gap:9px;align-items:flex-start}
.ns-own-a svg{flex:none;color:#0A7A48;margin-top:2px}
.ns-own-a b{color:var(--ink)}
.ns-own-b{color:var(--muted)}
@media(max-width:760px){
  .ns-own-head{display:none}
  .ns-own-row{grid-template-columns:1fr}
  .ns-own-row>span{padding:12px 16px}
  .ns-own-a::before{content:"With SIP Connect";display:block;font-size:11px;font-weight:800;
    letter-spacing:.08em;text-transform:uppercase;color:#0A7A48;margin-bottom:4px;width:100%}
  .ns-own-a{flex-wrap:wrap}
  .ns-own-b::before{content:"Rented from a provider";display:block;font-size:11px;font-weight:800;
    letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
}
.ns-own-note{max-width:82ch;margin:24px auto 0;text-align:center;font-size:.94rem;line-height:1.65;color:var(--ink-soft)}

/* reserve */
.ns-enq-grid{display:grid;gap:30px;grid-template-columns:1fr;align-items:start}
@media(min-width:900px){.ns-enq-grid{grid-template-columns:1fr 1fr;gap:44px}}
.ns-enq-copy h2{margin:6px 0 12px}
.ns-enq-list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px}
.ns-enq-list li{display:flex;gap:12px;align-items:flex-start}
.ns-enq-list svg{flex:none;color:#0A7A48;margin-top:2px}
.ns-enq-list b{display:block;font-family:var(--font-display);font-size:.96rem;color:var(--ink);margin-bottom:2px}
.ns-enq-list span{display:block;font-size:.88rem;line-height:1.55;color:var(--ink-soft)}
.ns-enq-fine{margin:22px 0 0;font-size:.86rem;line-height:1.6;color:var(--muted);max-width:64ch}

/* ============================================================
   Regulated-by strip (footer)
   Its own full-width row between the link columns and the contact band. It first sat inside the
   brand column, which made that column run far longer than the five beside it and threw the
   whole footer out of balance.
   ============================================================ */
.reg-strip{display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  margin:30px 0 0;padding:20px 0 0;border-top:1px solid var(--line)}
.reg-h{margin:0;flex:none;font-family:var(--font-display);font-size:10.5px;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.reg-list{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:14px;flex-wrap:wrap;flex:1 1 auto}
.reg-item{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 16px;background:var(--paper);
  transition:border-color .16s ease,box-shadow .16s ease}
.reg-item:hover,.reg-item:focus-visible{border-color:#BFD9EF;box-shadow:var(--shadow-sm)}
.reg-abbr{flex:none;font-family:var(--font-display);font-weight:800;font-size:15px;letter-spacing:.05em;
  color:var(--cyan-text);line-height:1;white-space:nowrap}
/* Full colour, unlike the partner strip. These are credentials, not vendor badges — greyed out
   they read as decoration rather than as a statement about who we answer to. */
.reg-logo{flex:none;height:30px;width:auto;max-width:124px;object-fit:contain}
.reg-role{font-size:12px;line-height:1.35;color:var(--muted);white-space:nowrap}
@media(max-width:820px){
  .reg-strip{gap:14px}
  .reg-list{gap:10px}
  .reg-item{padding:9px 13px;gap:10px}
  .reg-role{white-space:normal}
}
@media(max-width:520px){.reg-list{flex-direction:column;align-items:stretch}}

/* ============================================================
   3CX feature-page visuals — CRM screen pop, transcript, analytics board
   Drawn rather than photographed: these are software screens, and stock
   photography of a headset says nothing about what the product does.
   ============================================================ */
.crmviz{display:grid;gap:18px;align-items:center;grid-template-columns:1fr;max-width:1000px;margin:0 auto}
@media(min-width:860px){.crmviz{grid-template-columns:230px 44px minmax(0,1fr)}}
.crmviz-call{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:20px 22px;box-shadow:var(--shadow-sm);text-align:center}
.crmviz-ring{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-size:11px;
  font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#0A6B3F;background:#E3F5EB;
  border-radius:var(--radius-pill);padding:4px 11px}
.crmviz-dot{width:7px;height:7px;border-radius:50%;background:#0A7A48;animation:crmPulse 1.6s ease-in-out infinite}
@keyframes crmPulse{0%,100%{opacity:1}50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.crmviz-dot{animation:none}}
.crmviz-num{font-family:var(--font-display);font-size:1.24rem;font-weight:700;color:var(--ink);margin-top:12px;
  font-variant-numeric:tabular-nums}
.crmviz-hint{display:block;font-size:.79rem;color:var(--muted);margin-top:3px}
.crmviz-arrow{display:flex;justify-content:center;color:var(--cyan)}
@media(max-width:859px){.crmviz-arrow{transform:rotate(90deg)}}
.crmviz-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);
  overflow:hidden;box-shadow:var(--shadow)}
.crmviz-head{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line);
  background:var(--paper-2);flex-wrap:wrap}
/* .crmviz-head span is (0,1,1) and beats a bare .crmviz-av (0,1,0), which stripped the avatar's
   white text and left grey on blue at 1.2:1. Match the specificity. */
.crmviz-head .crmviz-av{flex:none;width:38px;height:38px;border-radius:50%;background:var(--cyan-text);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:13px}
.crmviz-head b{display:block;font-family:var(--font-display);font-size:1rem;color:var(--ink)}
.crmviz-head span{font-size:.83rem;color:var(--muted)}
.crmviz-tag{margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cyan-text);background:var(--soft);border-radius:var(--radius-pill);padding:4px 10px}
.crmviz-rows{list-style:none;margin:0;padding:6px 18px}
.crmviz-rows li{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line);
  font-size:.9rem;flex-wrap:wrap}
.crmviz-rows li:last-child{border-bottom:0}
.crmviz-rows span{color:var(--muted)}
.crmviz-rows b{color:var(--ink);text-align:right}
.crmviz-foot{display:flex;align-items:center;gap:8px;padding:12px 18px;background:#F6FBF8;
  border-top:1px solid var(--line);font-size:.83rem;color:#0A6B3F}
.crmviz-foot svg{flex:none;color:#0A7A48}
.crmviz-plat{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;
  max-width:1000px;margin:26px auto 0;font-size:.86rem;color:var(--muted)}
.crmviz-plat em{font-style:normal;font-family:var(--font-display);font-weight:600;font-size:.83rem;
  color:var(--ink-soft);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-pill);padding:5px 12px}
.crmviz-more{font-style:italic}

/* transcript */
.trviz{display:grid;gap:18px;grid-template-columns:1fr;max-width:1040px;margin:0 auto;align-items:start}
@media(min-width:880px){.trviz{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}}
.trviz-main{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);
  overflow:hidden;box-shadow:var(--shadow-sm)}
.trviz-bar{display:flex;align-items:center;gap:14px;padding:13px 18px;background:var(--paper-2);
  border-bottom:1px solid var(--line)}
.trviz-wave{display:flex;align-items:center;gap:2px;height:26px;flex:1 1 auto;min-width:0}
.trviz-wave i{flex:1 1 auto;background:var(--cyan);opacity:.55;border-radius:2px;min-width:2px}
.trviz-len{flex:none;font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.trviz-lines{list-style:none;margin:0;padding:8px 18px 14px}
.trviz-lines li{display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:12px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--line)}
.trviz-lines li:last-child{border-bottom:0}
.trviz-who{font-family:var(--font-display);font-size:11px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.trviz-lines li.is-us .trviz-who{color:var(--cyan-text)}
.trviz-lines p{margin:0;font-size:.92rem;line-height:1.55;color:var(--ink-soft);max-width:none}
.trviz-t{font-size:.76rem;color:var(--muted);font-variant-numeric:tabular-nums}
.trviz-sum{background:var(--paper);border:1px solid #CFE3F5;border-left:4px solid var(--cyan);
  border-radius:var(--radius-sm);padding:18px 20px;box-shadow:var(--shadow-sm)}
.trviz-sum-h{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:11px;
  font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--cyan-text);margin-bottom:11px}
.trviz-sum p{margin:0 0 9px;font-size:.88rem;line-height:1.55;color:var(--ink-soft);max-width:none}
.trviz-sum b{color:var(--ink)}
.trviz-sum-f{margin-top:12px;padding-top:11px;border-top:1px solid var(--line);font-size:.79rem;color:var(--muted)}
.trviz-note{max-width:1040px;margin:20px auto 0;text-align:center;font-size:.82rem;color:var(--muted)}

/* analytics board */
.anviz{max-width:1000px;margin:0 auto;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow)}
.anviz-top{display:flex;align-items:center;gap:12px;padding:12px 18px;background:#16243B;color:#fff;flex-wrap:wrap}
.anviz-live{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-size:10px;
  font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#7EE2AC}
.anviz-live i{width:7px;height:7px;border-radius:50%;background:#31C878;animation:crmPulse 1.6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.anviz-live i{animation:none}}
.anviz-title{font-family:var(--font-display);font-weight:600;font-size:.9rem}
.anviz-when{margin-left:auto;font-size:.78rem;color:#9FB6D0}
.anviz-tiles{display:grid;gap:1px;background:var(--line);grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.anviz-tile{background:var(--paper);padding:15px 17px;display:grid;gap:2px}
.anviz-l{font-size:.76rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.anviz-tile b{font-family:var(--font-display);font-size:1.5rem;color:var(--ink);line-height:1.1;font-variant-numeric:tabular-nums}
.anviz-tile.is-up b{color:#0A7A48}
.anviz-tile.is-down b{color:#0A7A48}
.anviz-s{font-size:.78rem;color:var(--muted)}
.anviz-chart{padding:18px 18px 14px;border-top:1px solid var(--line)}
.anviz-chart-h{font-family:var(--font-display);font-size:.84rem;font-weight:700;color:var(--ink-soft);margin-bottom:12px}
.anviz-bars{display:flex;align-items:flex-end;gap:5px;height:108px}
.anviz-bars span{flex:1 1 auto;background:linear-gradient(180deg,var(--cyan),var(--cyan-text));
  border-radius:4px 4px 0 0;min-width:6px}
.anviz-axis{display:flex;justify-content:space-between;margin-top:8px;font-size:.74rem;color:var(--muted)}
.anviz-views{list-style:none;max-width:1000px;margin:24px auto 0;padding:0;display:grid;gap:8px 22px;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.anviz-views li{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--ink-soft)}
.anviz-views svg{flex:none;color:#0A7A48}
.anviz-views li.is-more{color:var(--muted);font-style:italic}

/* ---------- Live chat launcher (3CX Live Chat & Talk, loaded on demand) ----------
   The corner is shared real estate: the sticky mobile bar owns the bottom edge under 680px and
   the cookie banner owns it until it is answered. The launcher lifts clear of both rather than
   sitting on top of them, and hands the corner to the 3CX widget once that has loaded. */
:root{--lc-bottom:20px}
.lc{position:fixed;right:20px;bottom:var(--lc-bottom);z-index:95;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}
.lc>*{pointer-events:auto}
.lc[hidden]{display:none!important}
.lc-btn{display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 22px 0 18px;border:0;border-radius:999px;cursor:pointer;
  font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.01em;color:#fff;
  /* The label is white, so the whole run under it has to clear 4.5:1: the gradient reaches
     --cyan-text (#1862AD, 6.2:1 on white) by the time the text starts and darkens from there.
     The cyan end sits under the icon only. */
  background:linear-gradient(115deg,#27ADE3 0%,#1862AD 26%,#124B84 100%);
  box-shadow:0 0 0 3px rgba(255,255,255,.9),0 12px 30px -10px rgba(21,119,224,.62),0 2px 8px -2px rgba(16,24,40,.28);
  transform:translateZ(0);transition:transform .22s cubic-bezier(.34,1.4,.5,1),box-shadow .22s ease,filter .22s ease}
.lc-btn:hover{transform:translateY(-3px);box-shadow:0 0 0 3px rgba(255,255,255,.95),0 18px 38px -12px rgba(21,119,224,.7),0 3px 10px -2px rgba(16,24,40,.3)}
.lc-btn:active{transform:translateY(-1px) scale(.985)}
.lc-btn:focus-visible{outline:3px solid #fff;outline-offset:-6px;box-shadow:0 0 0 3px var(--cyan-text),0 0 0 6px rgba(255,255,255,.95),0 12px 30px -10px rgba(21,119,224,.62)}
.lc-ico{position:relative;display:grid;place-items:center;width:26px;height:26px;flex:0 0 auto}
.lc-ico-chat{display:grid;place-items:center;transition:opacity .18s ease,transform .18s ease}
.lc-ico svg{width:22px;height:22px;stroke-width:1.9}
/* The three dots inside the bubble type while it sits idle — one short cycle, not a loop. */
.lc-ico svg path:last-child{stroke-dasharray:.01 4.2;animation:lcType 2.6s ease-in-out 1.4s 3}
@keyframes lcType{0%,100%{opacity:.45}30%{opacity:1}}
.lc-label{white-space:nowrap}
.lc-dot{width:9px;height:9px;border-radius:50%;background:#3ED598;box-shadow:0 0 0 2px rgba(255,255,255,.85);flex:0 0 auto}
/* Loading state: the label becomes a spinner while the 3CX bundle is on the wire. */
.lc-spin{position:absolute;inset:0;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;opacity:0;animation:lcSpin .7s linear infinite}
.lc.is-loading .lc-btn{pointer-events:none;filter:saturate(.85)}
.lc.is-loading .lc-ico-chat{opacity:0;transform:scale(.7)}
.lc.is-loading .lc-spin{opacity:1}
.lc.is-loading .lc-dot{display:none}
@keyframes lcSpin{to{transform:rotate(360deg)}}
/* Greeting card — shown once per session, dismissible, never on the first paint. */
.lc-nudge{position:relative;max-width:272px;padding:15px 34px 16px 17px;border-radius:16px;background:var(--paper);border:1px solid var(--line);
  box-shadow:0 18px 40px -18px rgba(16,24,40,.4),0 2px 6px -2px rgba(16,24,40,.12);
  animation:lcIn .38s cubic-bezier(.2,.9,.3,1.25) both}
.lc-nudge::after{content:"";position:absolute;right:26px;bottom:-7px;width:12px;height:12px;background:var(--paper);border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
.lc-nudge-h{margin:0 0 4px;font-family:var(--font-display);font-weight:800;font-size:15px;color:#2B3036}
/* Fixed chrome floats over every page, so its colours are pinned rather than inherited: the
   policy pages scope --muted to #7a8292, which is only 3.86:1 on this card's white. #5C6168
   is 6.2:1 everywhere. */
.lc-nudge-p{margin:0;font-size:13.5px;line-height:1.5;color:#5C6168}
.lc-nudge-p a{color:#1862AD}
.lc-nudge-x{position:absolute;top:8px;right:8px;width:24px;height:24px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:#5C6168;cursor:pointer}
.lc-nudge-x:hover{background:#F3F6F9;color:#2B3036}
.lc-nudge-x:focus-visible{outline:2px solid var(--cyan-text);outline-offset:1px}
@keyframes lcIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.lc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* Lift clear of the cookie banner while it is open (site.js sets the class on <html>).
   --lc-bottom is the single source of truth for the corner: the launcher reads it here, and
   the 3CX widget reads the same variable through a stylesheet injected into its shadow root
   (custom properties inherit across the shadow boundary), so the two never diverge. */
.cc-open{--lc-bottom:calc(20px + var(--cc-h,150px))}
/* Under 680px the sticky call bar owns the bottom edge, so the launcher collapses to a
   circle and sits above it. The label stays in the accessible name, not on screen. */
@media(max-width:680px){
  :root{--lc-bottom:calc(74px + env(safe-area-inset-bottom))}
  .cc-open{--lc-bottom:calc(20px + var(--cc-h,150px))}
  .lc{right:14px}
  .lc-btn{height:52px;width:52px;padding:0;justify-content:center;gap:0;border-radius:50%}
  .lc-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
  .lc-dot{position:absolute;top:4px;right:4px;width:11px;height:11px}
  .lc-nudge{max-width:min(272px,calc(100vw - 34px))}
}
@media(prefers-reduced-motion:reduce){
  .lc-btn,.lc-btn:hover,.lc-btn:active{transition:none;transform:none}
  .lc-nudge{animation:none}
  .lc-ico svg path:last-child{animation:none}
}
/* Once callus.js is in, 3CX owns the corner and our launcher retires for good. The widget
   itself is positioned inside its own shadow root, out of reach from here — see the shadow
   stylesheet in site.js, which pins it to --lc-bottom. */
.lc.is-handed{display:none!important}
/* The live dot is a claim; drop it the moment the chat is known to be unreachable. */
.lc.is-down .lc-dot{display:none}

/* ---------- In-building coverage estimator (/business-internet/mobile-signal-boosters/) ----------
   Same two-column shape as the savings calculator: inputs on the left, a live result panel on
   the right that never scrolls out of reach on desktop. ---------- */
.cov{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:22px;align-items:start;margin-top:26px}
.cov-card{background:var(--paper);border-radius:18px;padding:24px 24px 18px;box-shadow:0 22px 50px -26px rgba(8,22,44,.55)}
.cov-card .cov-q{display:flex;align-items:center;gap:10px;margin:22px 0 12px;font-family:var(--font-display);font-weight:800;font-size:16px;color:#2B3036}
.cov-q:first-child{margin-top:0}
.cov-qn{display:grid;place-items:center;width:24px;height:24px;flex:0 0 auto;border-radius:50%;background:#1862AD;color:#fff;font-size:13px}
.cov-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:10px}
.cov-choices--row{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.cov-choice{position:relative;display:block;cursor:pointer}
.cov-choice input{position:absolute;opacity:0;width:1px;height:1px}
.cov-choice span{display:block;padding:12px 14px;border:1.5px solid #E4E8EC;border-radius:12px;transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;min-height:100%}
.cov-card .cov-choice strong{display:block;font-family:var(--font-display);font-weight:700;font-size:14.5px;color:#2B3036}
body.t-offer .cov-card .cov-choice small,
.cov-card .cov-choice small{display:block;margin-top:3px;font-size:12.5px;line-height:1.45;color:#5C6168}
.cov-choice input:checked + span{border-color:#27ADE3;background:#F2FAFE;box-shadow:0 0 0 1px #27ADE3 inset}
.cov-choice input:focus-visible + span{outline:2px solid #1862AD;outline-offset:2px}
.cov-field{display:block;margin:12px 0}
body.t-offer .cov-card .cov-field > span,
.cov-card .cov-field > span{display:block;margin-bottom:6px;font-size:13.5px;font-weight:600;color:#2B3036}
.cov-field select{width:100%;padding:11px 12px;border:1.5px solid #E4E8EC;border-radius:10px;background:#fff;font:inherit;font-size:14.5px;color:#2B3036}
.cov-field select:focus-visible{outline:none;border-color:#1862AD;box-shadow:0 0 0 3px rgba(39,173,227,.28)}
.cov-range-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.cov-out{font-family:var(--font-display);font-weight:800;font-size:17px;color:#1862AD}
.cov-range input[type=range]{width:100%;margin:4px 0 2px;accent-color:#1862AD}
.cov-card .cov-scale{display:flex;justify-content:space-between;font-size:11.5px;color:#5C6168;font-style:normal}
.cov-scale i{font-style:normal}
/* Result panel */
.cov-live{position:sticky;top:96px;display:grid;gap:12px}
.cov-paper{background:var(--paper);border-radius:18px;padding:20px;box-shadow:0 22px 50px -26px rgba(8,22,44,.55)}
.cov-paper .cov-head{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#5C6168;padding-bottom:12px;border-bottom:1px solid #E4E8EC}
.cov-dot{width:8px;height:8px;border-radius:50%;background:#3ED598;flex:0 0 auto}
.cov-range-out{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin:16px 0 4px}
.cov-paper .cov-lo,.cov-paper .cov-hi{font-family:var(--font-display);font-weight:800;font-size:clamp(23px,3.4vw,30px);color:#1862AD;line-height:1.1}
.cov-paper .cov-dash{font-size:13px;color:#5C6168}
/* The panel is a white card sitting inside a .section--ink block, and that block paints its
   prose for a dark background: `.section--ink p` is #c7ccd2 and `body.t-offer .section--ink p`
   is #D6E6F5 at specificity (0,2,2). A bare `.cov-note`, or even `.cov-paper .cov-note`, loses
   to it and the text renders near-white on white — 1.27:1. Every text rule inside the card is
   therefore scoped from body.t-offer so it outranks the theme rather than ties with it. */
body.t-offer .cov-paper .cov-note,
.cov-paper .cov-note{margin:8px 0 14px;font-size:13.5px;line-height:1.55;color:#5C6168}
.cov-rows{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;margin:0;padding-top:12px;border-top:1px solid #E4E8EC;font-size:13.5px}
body.t-offer .cov-paper .cov-rows dt,
.cov-paper .cov-rows dt{color:#5C6168}
body.t-offer .cov-paper .cov-rows dd,
.cov-paper .cov-rows dd{margin:0;text-align:right;color:#2B3036;font-weight:600}
body.t-offer .cov-paper .cov-src,
.cov-paper .cov-src{margin:14px 0 0;padding-top:12px;border-top:1px solid #E4E8EC;font-size:12.5px;line-height:1.55;color:#5C6168}
.cov-cta{justify-self:stretch;text-align:center}
@media(max-width:900px){
  .cov{grid-template-columns:minmax(0,1fr)}
  .cov-live{position:static}
  .cov-card{padding:20px 18px 14px}
}