/* ==========================================================================
   BE WATCH - bewatch.nz
   Palette sampled from BeWatch_Product_Logo.png:
     #6B46C1 wordmark violet · #57AADC sky · #96BE17 lime · #F6B73B amber
     #D63229 red · #002885 / #00135C navy facets of the "Be" ribbon.
   The ribbon's facets are the status colours of a monitoring dashboard:
   sky = online / secured, lime = ready / ok, amber = attention, red = alert.
   The site commits to one visual world: night, one lit screen. Dark only.

   Boundary-contrast rule (WCAG 1.4.11): --hair is decorative only. Anything
   clickable uses --edge, which is solved to >= 3:1 against the darkest ground.
   ========================================================================== */
:root{
  /* PAGE - light lilac. The dark dashboards get their own token set further
     down, scoped to .live/.screen/.ai-cam/.sites, so everything inside them
     keeps a light-on-dark palette without a single duplicated rule. */
  --ground:#F7F5FD; --ground-2:#FFFFFF; --ground-3:#FFFFFF; --plate:#EDE7FB; --lift:#ECE7F6;
  --card:#FFFFFF; --fill-1:rgba(23,19,64,.035); --fill-2:rgba(23,19,64,.055);
  --navy:#171340; --navy-2:#002885;

  /* Brand. The -lift names now hold the ON-LIGHT version of each hue, so every
     existing usage reads correctly; the screens re-point them to the bright
     originals. Each was solved against #F7F5FD for 4.5:1. */
  --violet:#6B46C1; --violet-lift:#5A38B0; --violet-deep:#4B2E9A; --violet-wash:rgba(107,70,193,.10);
  --sky:#57AADC; --sky-lift:#1A6EA8; --lime:#96BE17; --lime-lift:#4E7A00; --amber:#8F5F00; --red:#C63A31;

  --ink:#171340; --ink-2:#3B3766; --muted:#5F5C86;
  --hair:rgba(23,19,64,.10); --hair-2:rgba(23,19,64,.16);
  --edge:rgba(23,19,64,.52);
  --focus:#4B2E9A;

  --ftr-bg:#171340; --ftr-ink:#E9E6F8; --ftr-mute:#ADA7D0; --ftr-accent:#B39DFF;

  /* read by the hero node-field canvas in bewatch.js */
  --net-rgb:107,70,193; --net-ptr-rgb:26,110,168;

  --shadow-1:0 1px 2px rgba(23,19,64,.05),0 4px 12px rgba(23,19,64,.05);
  --shadow-2:0 14px 34px rgba(23,19,64,.10),0 2px 6px rgba(23,19,64,.06);
  --shadow-3:0 28px 64px rgba(23,19,64,.14),0 6px 14px rgba(23,19,64,.07);
  --glow-v:0 0 0 1px rgba(107,70,193,.28),0 0 42px rgba(107,70,193,.16);

  --f-head:"Schibsted Grotesk","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --f-body:"Instrument Sans","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"Cascadia Mono","Segoe UI Mono",Consolas,monospace;

  /* Family View Standard (be-shell/be-shell.css): the theme's own layout tokens
     resolve to the --be-* family tokens so every Be site sits at one zoom.
     --cap is the floor for real mono labels; --cap-screen for labels that are
     part of a dashboard picture (camera tags, chart axes, map pins). */
  --max:var(--be-max,1440px); --max-narrow:var(--be-max-narrow,1080px); --gutter:var(--be-gutter,clamp(20px,3.2vw,48px)); --sec-y:var(--be-sec-y,clamp(40px,3.9vw,64px)); --sec-y-tight:var(--be-sec-y-tight,clamp(28px,2.6vw,40px));
  --cap:var(--be-eyebrow,13px); --cap-screen:12.5px;
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px; --r-pill:999px;
  --ease:cubic-bezier(.22,.61,.36,1);
  color-scheme:light;
}

/* ==========================================================================
   SCREENS. Every dark panel on the site - the live dashboard, the camera
   views, the workforce dashboard, the timesheet, the multi-site map - simply
   re-points the same tokens to their on-dark values. Nothing inside needs a
   second rule, and a new component dropped inside a screen is correct by
   construction.
   ========================================================================== */
.live,.screen,.ai-cam,.sites{
  --ink:#EEF0FA; --ink-2:#C3C9E2; --muted:#8A93B6;
  --violet-lift:#A78BFA; --sky-lift:#8CCBF0; --lime-lift:#B7DD3A; --amber:#F6B73B; --red:#E4483F;
  --hair:rgba(255,255,255,.10); --hair-2:rgba(255,255,255,.16); --edge:rgba(255,255,255,.40);
  --card:rgba(255,255,255,.035); --fill-1:rgba(255,255,255,.03); --fill-2:rgba(255,255,255,.05);
  --violet-wash:rgba(107,70,193,.22);
  color:var(--ink);
}

/* ========================= base ========================= */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-body);font-size:var(--be-body,17.5px);line-height:var(--be-body-lh,1.6);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--f-head);margin:0 0 .46em;font-weight:700;line-height:1.1;letter-spacing:-.022em;text-wrap:balance;color:var(--ink)}
h1{font-size:var(--be-h1,clamp(36px,calc(26.366px + 2.5352vw),72px));letter-spacing:-.035em;font-weight:800;line-height:var(--be-h1-lh,1.05)}
h2{font-size:var(--be-h2,clamp(28px,calc(23.718px + 1.1268vw),44px));line-height:var(--be-h2-lh,1.12);letter-spacing:-.032em;font-weight:800}
h3{font-size:var(--be-h3,clamp(19px,calc(17.662px + .3521vw),24px));line-height:var(--be-h3-lh,1.25);letter-spacing:-.015em}
h4{font-size:var(--be-body,17.5px);font-weight:600;letter-spacing:-.006em}
p{margin:0 0 1.05em}
a{color:var(--sky-lift);text-decoration:none}
a:hover{color:var(--violet-lift)}
img{max-width:100%;height:auto;display:block}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--violet);color:#fff;padding:.6rem 1rem;border-radius:var(--r-sm);font-weight:700}
.skip:focus{top:12px;color:#0B1400}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter);position:relative}
.wrap--narrow{max-width:var(--max-narrow)}
.sec{padding-block:var(--sec-y);position:relative}
.sec--lift{background:var(--lift)}
.sec--plate{background:linear-gradient(180deg,var(--plate),var(--ground));border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.sec-gap{margin-top:clamp(18px,2vw,30px)}
.sec-gap-b{margin-bottom:clamp(24px,2.5vw,40px)}
.mt{margin-top:1.4rem}
.muted-p{color:var(--muted);font-size:var(--be-body-card,16.25px)}
.eyebrow{font-family:var(--f-mono);font-size:var(--cap);font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--violet-lift);margin:0 0 .9rem;display:flex;align-items:center;gap:.65rem;flex-wrap:wrap}
.eyebrow::before{content:"";width:30px;height:3px;background:var(--violet);border-radius:2px;flex:none}
.eyebrow--sky{color:var(--sky-lift)}.eyebrow--sky::before{background:var(--sky)}
.eyebrow--lime{color:var(--lime-lift)}.eyebrow--lime::before{background:var(--lime)}
.eyebrow--amber{color:var(--amber)}.eyebrow--amber::before{background:var(--amber)}
.lede{font-size:var(--be-lede,clamp(18px,calc(17.197px + .2113vw),21px));color:var(--ink-2);max-width:68ch;line-height:var(--be-lede-lh,1.6)}
.hero .lede{font-size:var(--be-lede-hero,clamp(19px,calc(17.93px + .2817vw),23px))}
.hero .lede,.split .lede,.cta-in .lede{max-width:62ch}
.head{margin-bottom:clamp(26px,2.4vw,44px)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.mini-h{font-family:var(--f-mono);font-size:var(--cap);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:1rem 0 .3rem}

.grid{display:grid;gap:clamp(14px,1.2vw,22px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:820px){.g3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:var(--be-btn-h,48px);padding:.72rem 1.35rem;border-radius:var(--r-pill);font-weight:600;font-size:var(--be-btn,15.5px);letter-spacing:-.005em;border:1.5px solid transparent;transition:transform .18s var(--ease),background .18s,border-color .18s,box-shadow .18s;white-space:nowrap;text-align:center}
.btn:hover{transform:translateY(-1px)}
.btn--v{background:var(--violet);color:#fff;border-color:#8A6AE0;box-shadow:0 8px 24px rgba(107,70,193,.35)}
.btn--v:hover{background:#7A55D6;color:#fff}
.btn--sky{background:var(--sky);color:#031A33;border-color:#2E86BC}
.btn--sky:hover{background:#6FB9E4;color:#031A33}
.btn--line{background:transparent;color:var(--ink);border-color:var(--edge)}
.btn--line:hover{border-color:var(--ink);color:var(--ink);background:var(--fill-2)}
.btn--ghost{background:transparent;color:var(--sky-lift);padding-inline:.4rem;min-height:44px}
.btn--ghost:hover{color:var(--ink)}
.btn svg,.ic-svg{width:18px;height:18px;flex:none}
.btn--sm{min-height:44px;padding:.5rem 1rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.3rem}

/* ========================= brand bar ========================= */
/* Laid out to match the redesigned Be Digital family bar: a "Be family" eyebrow
   on the left, the brands reading left to right after it, Pay Now as an outlined
   pill hard right, and the current site marked by a 2px underline in the brand's
   own colour rather than a filled pill. The GROUND stays Be Watch's own ink navy
   (--navy #171340) instead of Be Digital's #0E1726, so the bar still belongs to
   this site. Items keep a 44px height (Be Digital's are 38px): the AAA target
   size was already met here and there is no reason to give it up for 6px. */
.bebar{background:var(--navy);font-family:var(--f-body);border-bottom:1px solid rgba(255,255,255,.07)}
.bebar-in{display:flex;justify-content:flex-start;align-items:stretch;gap:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;max-width:var(--max);margin:0 auto;padding-inline:calc(var(--gutter) - 13px)}
.bebar-in::-webkit-scrollbar{display:none}
/* .46 rather than Be Digital's .34: on this darker ground .34 lands at 3.05:1 and
   .46 at 4.56:1, so the eyebrow stays quiet AND passes 1.4.3. */
.bebar-lead{display:inline-flex;align-items:center;flex:0 0 auto;padding-right:16px;margin-right:6px;border-right:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.46);font-size:.75rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.bebar-item{position:relative;display:inline-flex;align-items:center;flex:0 0 auto;padding:0 13px;height:var(--be-bar-h,40px);color:rgba(255,255,255,.66);font-size:.845rem;font-weight:500;letter-spacing:.005em;white-space:nowrap;transition:color .18s}
.bebar-item::after{content:"";position:absolute;left:13px;right:13px;bottom:0;height:2px;background:var(--bc);transform:scaleX(0);transform-origin:center;transition:transform .22s ease}
.bebar-item:hover,.bebar-item:focus-visible{color:#fff}
.bebar-item:hover::after,.bebar-item:focus-visible::after{transform:scaleX(1)}
.bebar-item.active{color:#fff;font-weight:600}
.bebar-item.active::after{transform:scaleX(1)}
/* Pay Now is an action, not a sibling site: pushed right and drawn as a pill.
   The border is lifted to .34 (3.05:1) so the control has a 1.4.11 boundary. */
.bebar-action{margin-left:auto;padding-left:18px}
.bebar-action::after{display:none}
.bebar-action span{display:inline-flex;align-items:center;min-height:28px;padding:5px 14px;border:1px solid rgba(255,255,255,.34);border-radius:var(--r-pill);color:rgba(255,255,255,.88);font-size:.78rem;font-weight:600;letter-spacing:.02em;transition:background .18s,color .18s,border-color .18s}
.bebar-action:hover span,.bebar-action:focus-visible span{background:#fff;border-color:#fff;color:var(--navy)}
@media (max-width:900px){
	.bebar-lead{display:none}
	.bebar-in{padding-inline:12px}
	.bebar-item{padding:0 11px}
	.bebar-item::after{left:11px;right:11px}
	/* Once the row scrolls, auto margin collapses anyway - drop it so Pay Now
	   sits directly after Be Screen instead of leaving a dead gap. */
	.bebar-action{margin-left:0;padding-left:11px}
}

/* ========================= header ========================= */
.hdr{position:sticky;top:0;z-index:60;background:rgba(247,245,253,.88);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--hair)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--be-header-h,72px)}
@media (max-width:640px){.hdr-in{min-height:var(--be-header-h-m,60px)}.logo img{height:40px}}
.logo{display:flex;align-items:center;gap:.6rem;min-height:44px;padding:2px 0}
.logo img{height:46px;width:auto}
.logo .tag{display:block;font:500 .74rem/1.22 var(--f-mono);letter-spacing:.03em;color:var(--muted);border-left:1px solid var(--hair-2);padding-left:11px;white-space:nowrap}
@media (min-width:700px){.logo .tag{font-size:.8rem;padding-left:14px;letter-spacing:.05em}}
@media (min-width:1280px){.logo .tag{font-size:.82rem;letter-spacing:.06em}}
@media (max-width:359px){.logo .tag{display:none}}
/* Between the burger breakpoint and a comfortable desktop, the full nav, the
   wider Poppins lockup and the CTA cannot all fit on one row. The tagline is
   the piece that can go - the drawer still carries it at every width. */
@media (min-width:1281px) and (max-width:1499px){.hdr .logo .tag{display:none}}
.nav{display:flex;align-items:center;gap:.15rem}
.nav>li{position:relative}
.nav>li>a,.nav>li>button{display:inline-flex;align-items:center;gap:.35rem;padding:.6rem .85rem;color:var(--ink-2);font-weight:500;font-size:var(--be-nav,15px);border-radius:var(--r-sm);background:none;border:0;min-height:44px}
.nav>li>a:hover,.nav>li>button:hover,.nav>li>button[aria-expanded="true"]{color:var(--ink);background:var(--fill-2)}
.nav>li>button svg{width:12px;height:12px;transition:transform .2s}
.nav>li>button[aria-expanded="true"] svg{transform:rotate(180deg)}
.menu{position:absolute;top:calc(100% + 8px);left:0;min-width:300px;background:var(--ground-3);border:1px solid var(--hair-2);border-radius:var(--r-lg);padding:.6rem;box-shadow:var(--shadow-3);display:none;z-index:70}
.menu.open{display:grid;gap:.15rem}
.menu--wide{min-width:620px;grid-template-columns:1fr 1fr}
.menu a{display:grid;gap:.1rem;padding:.6rem .75rem;border-radius:var(--r-sm);color:var(--ink);min-height:44px}
.menu a:hover{background:var(--violet-wash);color:var(--ink)}
.menu a b{font-weight:600;font-size:.95rem}
.menu a span{font-size:.82rem;color:var(--muted)}
.menu a.menu-all{grid-column:1/-1;border-top:1px solid var(--hair);margin-top:.3rem;padding-top:.7rem}
.menu a.menu-all b{color:var(--violet-lift)}
.hdr-cta{display:flex;align-items:center;gap:.6rem}
.burger{display:none;width:48px;height:48px;border-radius:12px;background:var(--violet);border:1.5px solid #8A6AE0;color:#fff;align-items:center;justify-content:center}
.burger svg{width:24px;height:24px}
@media (max-width:1280px){.nav,.hdr-cta .btn--line{display:none}.burger{display:inline-flex}}
@media (max-width:520px){.hdr-cta .btn--v{display:none}.logo img{height:40px}}

/* ========================= app menu (phone + tablet) =========================
   Ported from Be Connect's .appm pattern (be-connect/redesign-site/src/css/
   70-appmenu.css): full-screen panel, greeting, live search, a 4-up quick-action
   row, tiles, chips and a status strip - so the two sites' phone navigation feels
   like one family. Recoloured to BE WATCH: the ground is the brand navy --ftr-bg
   with violet and sky glows, and every text colour reuses the footer tokens,
   which are already contrast-checked against that ground. */
.appm{position:fixed;inset:0;z-index:950;display:flex;flex-direction:column;color:var(--ftr-ink);padding-top:env(safe-area-inset-top,0px);
	background:radial-gradient(120% 60% at 100% 0%,rgba(107,70,193,.42),transparent 60%),radial-gradient(80% 50% at 0% 100%,rgba(87,170,220,.18),transparent 60%),var(--ftr-bg);
	opacity:0;visibility:hidden;transform:scale(.985);transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s}
.appm.open{opacity:1;visibility:visible;transform:none;transition:opacity .22s ease,transform .22s ease}
.am-top{flex:none;display:flex;align-items:center;justify-content:space-between;min-height:64px;padding-inline:var(--gutter)}
.am-logo{display:inline-flex;align-items:center;min-height:44px}
.am-logo img{height:28px;width:auto;display:block}
.am-x{width:44px;height:44px;box-sizing:border-box;border-radius:14px;border:1px solid rgba(255,255,255,.34);background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;cursor:pointer}
.am-x svg{width:20px;height:20px}
.am-x:hover,.am-x:focus-visible{background:rgba(255,255,255,.16)}
.am-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px var(--gutter) calc(26px + env(safe-area-inset-bottom));max-width:860px;width:100%;margin:0 auto}
/* Children fade up in sequence when the panel opens - the app-like touch. */
.am-body>*,.am-main>*{opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .35s cubic-bezier(.22,.61,.36,1);transition-delay:calc(var(--i,0) * 35ms)}
.appm.open .am-body>*,.appm.open .am-main>*{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
	.appm,.appm.open,.am-body>*,.am-main>*{transition:none!important;transform:none!important}
}
.am-main{display:grid;gap:22px}
.am-hello b{display:block;font-family:var(--f-head);font-size:26px;font-weight:800;line-height:1.1;letter-spacing:-.02em;color:#fff}
.am-hello span{display:block;color:var(--ftr-mute);font-size:14.5px;margin-top:4px}

.am-search{display:flex;align-items:center;gap:10px;margin:16px 0 18px;min-height:52px;padding:0 8px 0 16px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.34);transition:border-color .15s,background .15s}
.am-search:focus-within{border-color:var(--ftr-accent);background:rgba(255,255,255,.13)}
.am-search>svg{width:19px;height:19px;flex:none;color:var(--ftr-mute)}
.am-search input{flex:1;min-width:0;min-height:44px;border:0;outline:0;background:none;color:#fff;font:500 16px var(--f-body)}
.am-search input::placeholder{color:var(--ftr-mute)}
.am-search input::-webkit-search-cancel-button{display:none}
.am-clear{width:36px;height:36px;border-radius:10px;border:0;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none}
.am-clear svg{width:16px;height:16px}
.am-clear[hidden],.am-results[hidden],.am-main[hidden]{display:none}

.am-results{display:grid;gap:8px;margin-bottom:20px}
.am-res{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:var(--ftr-ink);min-height:60px}
.am-res:hover,.am-res:focus-visible{background:rgba(107,70,193,.34);border-color:rgba(179,157,255,.5)}
.am-res .ri{width:40px;height:40px;border-radius:12px;background:rgba(107,70,193,.34);display:grid;place-items:center;color:#DCD2FF}
.am-res .ri svg{width:19px;height:19px}
.am-res b{display:block;font-size:14.5px;color:#fff}
.am-res small{display:block;font-size:12px;color:var(--ftr-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-res em{font-style:normal;font-size:11px;color:var(--ftr-accent);border:1px solid rgba(179,157,255,.4);border-radius:var(--r-pill);padding:2px 8px;white-space:nowrap}
.am-none{color:var(--ftr-mute);font-size:14px;padding:14px 2px;margin:0}

.am-quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.amq{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 4px;border-radius:16px;border:0;background:rgba(255,255,255,.07);color:var(--ftr-ink);font:600 12px/1.2 var(--f-body);text-align:center;cursor:pointer;transition:background .15s,transform .15s}
.amq span{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(140deg,var(--violet),var(--violet-deep));color:#fff;box-shadow:0 10px 20px -10px rgba(107,70,193,.95)}
.amq span svg{width:21px;height:21px}
.amq:active{transform:scale(.97)}
.amq:hover,.amq:focus-visible{background:rgba(255,255,255,.12)}

.am-sec h4{font-family:var(--f-mono);font-size:11.5px;line-height:1;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ftr-mute);margin:0 0 10px}
.am-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.amt{position:relative;display:flex;flex-direction:column;gap:3px;padding:14px;border-radius:18px;min-height:112px;background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.34);overflow:hidden;color:var(--ftr-ink);transition:transform .15s,border-color .15s}
.amt::after{content:"";position:absolute;right:-30px;top:-30px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(107,70,193,.5),transparent 70%)}
.amt:active{transform:scale(.98)}
.amt:hover,.amt:focus-visible{border-color:rgba(179,157,255,.55)}
.amti{width:40px;height:40px;border-radius:12px;background:rgba(107,70,193,.34);color:#DCD2FF;display:grid;place-items:center;margin-bottom:auto;position:relative;z-index:1}
.amti svg{width:20px;height:20px}
.amt b{font-size:15px;margin-top:12px;color:#fff;position:relative;z-index:1}
.amt small{font-size:12px;color:var(--ftr-mute);position:relative;z-index:1}

.am-chips{display:flex;flex-wrap:wrap;gap:8px}
.amc{padding:9px 16px;border-radius:var(--r-pill);border:1px solid rgba(179,157,255,.52);background:rgba(255,255,255,.05);font:500 13.5px var(--f-body);color:var(--ftr-ink);min-height:44px;display:inline-flex;align-items:center}
.amc:hover,.amc:focus-visible{background:rgba(107,70,193,.38);border-color:transparent;color:#fff}

.am-help{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.amh{display:flex;align-items:center;gap:10px;padding:12px;border-radius:14px;background:rgba(255,255,255,.06);font:600 13.5px var(--f-body);color:var(--ftr-ink);min-height:52px}
.amh span{width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.09);display:grid;place-items:center;color:#CBB9FF;flex:none}
.amh span svg{width:17px;height:17px}
.amh:hover,.amh:focus-visible{background:rgba(107,70,193,.3);color:#fff}

.am-status{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:16px;background:rgba(150,190,23,.12);border:1px solid rgba(150,190,23,.38);color:#D8EE9A;font:600 13.5px var(--f-body)}
.am-status span{flex:1}
.am-status svg{width:17px;height:17px;flex:none}
.am-status .dot{width:9px;height:9px;border-radius:50%;background:#B7DD3A;box-shadow:0 0 0 4px rgba(183,221,58,.18);flex:none}

/* Three tile columns once there is room - tablets get the same menu, not a
   stretched phone one. */
@media (min-width:601px){
	.am-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
	.am-help{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:360px){
	.am-quick{gap:6px}
	.amq{font-size:11px}
	.amq span{width:40px;height:40px}
}

/* ========================= hero ========================= */
.hero{position:relative;overflow:hidden;padding-block:var(--sec-y);background:radial-gradient(1200px 600px at 78% 10%,rgba(107,70,193,.13),transparent 60%),radial-gradient(900px 500px at 8% 90%,rgba(87,170,220,.13),transparent 60%),var(--ground)}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(23,19,64,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(23,19,64,.05) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse at 60% 40%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse at 60% 40%,#000 20%,transparent 75%);pointer-events:none}
.hero-net{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.hero-in{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(24px,2.8vw,52px);align-items:center;position:relative;z-index:1}
.hero h1 .w{display:inline-block;margin-right:.16em}
.hero h1 .w--v{color:var(--violet-lift)}
.hero h1 .w--s{color:var(--sky-lift)}
.hero h1 .w--l{color:var(--lime-lift)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.1rem 0 .75rem}
.hero-proof{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;font-size:var(--be-small,14px);color:var(--muted);margin-top:.8rem}
.hero-proof li{display:flex;align-items:center;gap:.45rem}
.hero-proof i{width:7px;height:7px;border-radius:50%;background:var(--lime)}
.pillar-strip{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.2rem}
.pillar-strip span{font-family:var(--f-mono);font-size:var(--cap);letter-spacing:.08em;text-transform:uppercase;padding:.35rem .65rem;border:1px solid var(--hair-2);border-radius:var(--r-pill);color:var(--ink-2);background:var(--card)}
@media (max-width:1000px){.hero-in{grid-template-columns:1fr}.hero .lede{max-width:none}}
@media (max-width:640px){.hero-ctas{display:grid;grid-template-columns:1fr}.hero-ctas .btn{width:100%;min-height:var(--be-btn-h-m,52px)}}
.hero--page{padding-block:var(--sec-y-tight) var(--sec-y-tight)}
.hero--page .wrap{position:relative;z-index:1}
.hero-page-in{max-width:none}
.hero-page-in .lede{max-width:68ch}
.hero--page h1{font-size:var(--be-h1-page,clamp(32px,calc(26.648px + 1.4085vw),52px))}
.crumbs{margin-bottom:.6rem;font-size:.84rem;color:var(--muted)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.35rem .5rem;align-items:center}
.crumbs li{display:flex;align-items:center;gap:.5rem}
.crumbs li+li::before{content:"/";color:var(--hair-2)}
.crumbs a{color:var(--ink-2);display:inline-flex;align-items:center;min-height:44px}
.crumbs a:hover{color:var(--ink)}
.crumbs span{color:var(--muted)}

/* ---- BE WATCH LIVE panel ---- */
.live{background:linear-gradient(180deg,#0E1533,#0A0F26);border:1px solid rgba(167,139,250,.28);border-radius:var(--r-xl);box-shadow:var(--shadow-3),var(--glow-v);overflow:hidden;font-size:.9rem;will-change:transform;transition:transform .5s var(--ease)}
.live-top{display:flex;align-items:center;gap:.8rem;padding:.75rem 1rem;border-bottom:1px solid var(--hair);font-family:var(--f-mono);font-size:var(--cap);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.live-top b{color:#fff;font-weight:600}
.live-ok{display:inline-flex;align-items:center;gap:.4rem;color:var(--lime-lift)}
.live-ok i{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime);animation:pulse 2.2s infinite}
.live-clock{margin-left:auto;color:var(--sky-lift);font-variant-numeric:tabular-nums}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.live-cam{position:relative;aspect-ratio:16/7;background:#05081A}
.live-cam canvas,.ai-cam canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.cam-tag{position:absolute;left:12px;top:10px;font-family:var(--f-mono);font-size:var(--cap-screen);letter-spacing:.1em;color:#fff;background:rgba(0,0,0,.45);padding:.3rem .5rem;border-radius:6px;display:flex;gap:.6rem;align-items:center;z-index:1}
.cam-tag i{width:7px;height:7px;background:var(--red);border-radius:50%;animation:pulse 1.4s infinite}
.demo-tag{position:absolute;left:12px;bottom:10px;font-family:var(--f-mono);font-size:var(--cap-screen);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);background:rgba(0,0,0,.5);padding:.3rem .5rem;border-radius:6px;z-index:1}
.chip{position:absolute;display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .7rem;border-radius:var(--r-pill);background:rgba(7,10,24,.78);border:1px solid var(--hair-2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:13px;font-weight:600;color:#fff;white-space:nowrap;box-shadow:0 8px 20px rgba(0,0,0,.4);z-index:1}
.chip i{width:8px;height:8px;border-radius:50%;flex:none}
.chip--sky i{background:var(--sky);box-shadow:0 0 10px var(--sky)}
.chip--lime i{background:var(--lime);box-shadow:0 0 10px var(--lime)}
.chip--amber i{background:var(--amber);box-shadow:0 0 10px var(--amber)}
.chip--v i{background:var(--violet-lift);box-shadow:0 0 10px var(--violet-lift)}
.chip.c1{right:14px;top:12px}.chip.c2{left:14px;bottom:40px}.chip.c3{right:14px;bottom:14px}.chip.c4{left:14px;top:46px}.chip.c5{right:14px;top:48px}
@media (max-width:640px){.chip.c4,.chip.c5,.chip.c2{display:none}}
.live-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--hair)}
.live-col{padding:.7rem .9rem;border-right:1px solid var(--hair)}
.live-col:last-child{border-right:0}
.live-col h4{font-family:var(--f-mono);font-size:var(--cap);letter-spacing:.16em;text-transform:uppercase;color:var(--violet-lift);margin:0 0 .5rem;font-weight:600}
.live-col dl{margin:0;display:grid;gap:.28rem}
.live-col div{display:flex;justify-content:space-between;gap:.5rem;align-items:baseline}
.live-col dt{color:var(--muted);font-size:var(--be-small,14px)}
.live-col dd{margin:0;font-family:var(--f-mono);font-size:13px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums;text-align:right}
.st{color:var(--sky-lift)}.st--ok{color:var(--lime-lift)}.st--warn{color:var(--amber)}
.live-feed{border-top:1px solid var(--hair);padding:.5rem .9rem .65rem}
.live-feed h4{font-family:var(--f-mono);font-size:var(--cap);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 .4rem;font-weight:600}
.feed{display:grid;gap:.26rem;min-height:86px}
.feed li{display:grid;grid-template-columns:auto auto 1fr;gap:.6rem;align-items:center;font-size:16px;color:var(--ink-2);animation:feedin .5s var(--ease)}
.feed li time{font-family:var(--f-mono);font-size:var(--cap);color:var(--muted);font-variant-numeric:tabular-nums}
.feed li i{width:8px;height:8px;border-radius:50%;background:var(--sky)}
.feed li.ok i{background:var(--lime)}.feed li.warn i{background:var(--amber)}.feed li.v i{background:var(--violet-lift)}
.feed li b{color:#fff;font-weight:600}
@keyframes feedin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width:640px){.live-grid{grid-template-columns:1fr}.live-col{border-right:0;border-bottom:1px solid var(--hair)}.live-col:last-child{border-bottom:0}}

/* ========================= cards ========================= */
.pillar{position:relative;background:var(--ground-2);border:1px solid var(--hair);border-radius:var(--r-lg);padding:clamp(20px,1.8vw,30px);overflow:hidden;transition:transform .25s var(--ease),border-color .25s,box-shadow .25s;display:grid;gap:.4rem;align-content:start;color:var(--ink);box-shadow:var(--shadow-1)}
.pillar:hover{transform:translateY(-3px);border-color:rgba(23,19,64,.26);box-shadow:var(--shadow-2)}
.pillar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--pc,var(--violet))}
.pillar .ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--pc,var(--violet)) 18%,transparent);color:var(--pc,var(--violet-lift));margin-bottom:.6rem}
.pillar .ic svg{width:26px;height:26px}
.pillar .k{font-family:var(--f-mono);font-size:var(--cap);letter-spacing:.18em;text-transform:uppercase;color:var(--pc,var(--violet-lift));font-weight:600}
.pillar h3{margin:0}
.pillar p{color:var(--ink-2);margin:0;font-size:var(--be-body-card,16.25px)}
.pillar .cap{color:var(--muted);font-size:var(--be-small,14px)}
.pillar .more{margin-top:.3rem;font-weight:600;color:var(--ink);display:inline-flex;gap:.35rem;align-items:center;min-height:44px}
.pillar .more svg{width:16px;height:16px}
.pillar--w{--pc:var(--violet-lift)}.pillar--c{--pc:var(--sky-lift)}.pillar--a{--pc:var(--amber)}.pillar--o{--pc:var(--lime-lift)}
a.pillar:hover{color:var(--ink)}
.spot::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(107,70,193,.13),transparent 60%);opacity:0;transition:opacity .35s;pointer-events:none;z-index:0}
.spot:hover::before{opacity:1}
.spot>:not(.ribbon){position:relative;z-index:1}

/* ========================= ONE chain + scenarios ========================= */
.chain{position:relative;margin-top:clamp(18px,2vw,30px)}
.chain-track{display:grid;grid-template-columns:repeat(9,1fr);gap:8px;position:relative;z-index:1}
.chain-track li{background:var(--card);border:1px solid var(--hair-2);border-radius:var(--r-md);padding:.85rem .6rem;text-align:center;font-size:15px;font-weight:600;color:var(--ink);display:grid;gap:.35rem;justify-items:center;transition:border-color .3s,box-shadow .3s,transform .3s var(--ease)}
.chain-track li svg{width:24px;height:24px;color:var(--sky-lift)}
.chain-track li small{font-weight:400;color:var(--muted);font-size:13px;display:block}
.chain-track li.lit{border-color:var(--lime-lift);box-shadow:0 0 0 1px rgba(150,190,23,.5),0 0 26px rgba(150,190,23,.35);transform:translateY(-3px)}
.chain-track li.lit svg{color:var(--lime-lift)}
.chain-line{position:absolute;left:4%;right:4%;top:50%;height:2px;background:linear-gradient(90deg,var(--violet),var(--sky),var(--lime));opacity:.55;z-index:0}
.chain-line::after{content:"";position:absolute;top:-3px;width:90px;height:8px;border-radius:4px;background:var(--violet);filter:blur(3px);opacity:.75;animation:flow 4.5s linear infinite}
@keyframes flow{from{left:-10%}to{left:104%}}
@media (max-width:1100px){.chain-track{grid-template-columns:repeat(3,1fr)}.chain-line{display:none}}
@media (max-width:480px){.chain-track{grid-template-columns:repeat(2,1fr)}}
.one-badge{display:inline-flex;align-items:center;gap:.6rem;padding:.55rem 1rem .55rem .6rem;border-radius:var(--r-pill);background:var(--violet-wash);border:1px solid rgba(167,139,250,.4);font-family:var(--f-mono);font-size:var(--cap);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:1rem}
.one-badge b{background:var(--violet);color:#fff;border-radius:var(--r-pill);padding:.2rem .6rem;font-weight:700}
.scen{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(20px,2.5vw,44px);margin-top:clamp(24px,2.5vw,40px);align-items:start}
@media (max-width:960px){.scen{grid-template-columns:1fr}}
.scen-p{color:var(--ink-2)}
.scen-btns{display:grid;gap:.5rem;margin-top:1rem}
.scen-btn{display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:center;text-align:left;padding:.75rem 1rem;border:1.5px solid var(--edge);border-radius:var(--r-md);background:var(--card);color:var(--ink);min-height:58px;transition:border-color .2s,background .2s,transform .2s var(--ease)}
.scen-btn:hover{transform:translateX(3px);border-color:var(--ink)}
.scen-btn b{display:block;font-weight:600}
.scen-btn span{display:block;color:var(--muted);font-size:var(--be-small,14px)}
.scen-btn svg{width:22px;height:22px;color:var(--sky-lift)}
.scen-btn[aria-pressed="true"]{border-color:var(--violet-lift);background:var(--violet-wash)}
.scen-log{display:grid;gap:.45rem}
.scen-log li{display:grid;grid-template-columns:auto auto 1fr;gap:.7rem;align-items:start;padding:.6rem .8rem;border:1px solid var(--hair);border-radius:var(--r-md);background:rgba(255,255,255,.025);transition:opacity .4s,border-color .4s,background .4s}
.scen-log time{font-family:var(--f-mono);font-size:var(--cap);color:var(--sky-lift);padding-top:.2rem;white-space:nowrap}
.scen-log i{width:8px;height:8px;border-radius:50%;background:var(--lime);margin-top:.5rem;box-shadow:0 0 10px var(--lime)}
.scen-log b{display:block;color:#fff;font-weight:600;font-size:15px}
.scen-log span{display:block;color:var(--muted);font-size:var(--be-small,14px)}
.scen-log li.wait{opacity:.32}
.scen-log li.wait i{background:var(--hair-2);box-shadow:none}
.scen-log li.now{border-color:rgba(150,190,23,.55);background:rgba(150,190,23,.07)}
.scen-done{margin-top:.7rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-family:var(--f-mono);font-size:var(--cap);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ========================= AI motion wall ========================= */
.ai-wall{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(280px,.9fr);gap:clamp(14px,1.4vw,24px);align-items:start}
@media (max-width:1000px){.ai-wall{grid-template-columns:1fr}}
.ai-cam{position:relative;aspect-ratio:16/9;min-width:0;background:#05081A;border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:var(--shadow-3);cursor:crosshair}
.ai-side{display:grid;gap:.6rem;align-content:start}
.tog{display:flex;flex-wrap:wrap;gap:.45rem}
.tog button{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.5rem .9rem;border-radius:var(--r-pill);border:1.5px solid var(--edge);background:var(--card);color:var(--ink);font-weight:600;font-size:var(--be-small,14px);transition:border-color .2s,background .2s}
.tog button i{width:9px;height:9px;border-radius:50%;background:var(--tc,var(--violet-lift));opacity:.35;transition:opacity .2s,box-shadow .2s}
.tog button[aria-pressed="true"]{border-color:var(--tc,var(--violet-lift));background:color-mix(in srgb,var(--tc,var(--violet-lift)) 14%,#fff)}
.tog button[aria-pressed="true"] i{opacity:1;box-shadow:0 0 10px var(--tc,var(--violet-lift))}
.ai-stats{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:0}
.ai-stats div{padding:.7rem .8rem;border:1px solid var(--hair-2);border-radius:var(--r-md);background:var(--card)}
.ai-stats dt{font-size:var(--cap);color:var(--muted)}
.ai-stats dd{margin:.1rem 0 0;font-family:var(--f-head);font-size:1.6rem;font-weight:800;color:var(--ink);letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.ai-last{padding:.75rem .9rem;border-radius:var(--r-md);border:1px solid rgba(167,139,250,.45);background:var(--violet-wash);font-size:var(--be-small,14px);color:var(--ink-2);min-height:78px}
.ai-last b{color:var(--ink);display:block;font-weight:600}
.ai-last time{font-family:var(--f-mono);font-size:var(--cap);color:var(--violet-lift);letter-spacing:.06em}
.ai-hint{font-size:var(--be-body-card,16.25px);color:var(--muted);margin:0}
.eye{display:inline-grid;place-items:center;width:34px;height:34px;vertical-align:middle}
.eye svg{width:34px;height:34px;overflow:visible;animation:blink 7s infinite}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.08)}}

/* ========================= split + screens ========================= */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,3.5vw,72px);align-items:center}
.split--rev>.split-visual{order:-1}
@media (max-width:960px){.split{grid-template-columns:1fr}.split--rev>.split-visual{order:0}.split .lede{max-width:none}}
.list{display:grid;gap:.55rem;margin-top:1rem}
.list li{display:flex;gap:.7rem;align-items:flex-start;color:var(--ink-2);font-size:var(--be-body,17.5px)}
.list li::before{content:"";flex:none;width:18px;height:18px;margin-top:.3rem;border-radius:50%;background:var(--lc,var(--violet-wash));box-shadow:inset 0 0 0 1.5px var(--lk,var(--violet-lift))}
.list li b{color:var(--ink)}
.list--sky{--lc:rgba(87,170,220,.18);--lk:var(--sky-lift)}
.list--lime{--lc:rgba(150,190,23,.18);--lk:var(--lime-lift)}
.list--amber{--lc:rgba(246,183,59,.18);--lk:var(--amber)}
.tick-wide .list{grid-template-columns:1fr 1fr;gap:.7rem 2rem}
@media (max-width:820px){.tick-wide .list{grid-template-columns:1fr}}
.tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.1rem}
.tags span{font-size:var(--be-small,14px);padding:.38rem .72rem;border-radius:var(--r-pill);border:1px solid var(--hair-2);color:var(--ink-2);background:var(--card)}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:1rem 2rem}
@media (max-width:640px){.cols2{grid-template-columns:1fr}}
.screen{background:linear-gradient(180deg,#0E1533,#090D22);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-xl);box-shadow:var(--shadow-3);overflow:hidden}
.screen-top{display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;border-bottom:1px solid var(--hair);font-family:var(--f-mono);font-size:var(--cap);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);flex-wrap:wrap}
.screen-top b{color:#fff;font-weight:600}
.screen-top .tail{margin-left:auto;color:var(--sky-lift)}
.screen-body{padding:.85rem}
.events{display:grid;gap:.5rem}
.ev{display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center;padding:.7rem .85rem;border:1px solid var(--hair);border-radius:var(--r-md);background:rgba(255,255,255,.025);transition:border-color .3s,background .3s}
.ev.on{border-color:rgba(167,139,250,.55);background:var(--violet-wash)}
.ev .ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.06);color:var(--sky-lift)}
.ev .ic svg{width:20px;height:20px}
.ev b{display:block;color:#fff;font-weight:600;font-size:15.5px}
.ev span{display:block;color:var(--muted);font-size:var(--be-small,14px)}
.ev .conf{font-family:var(--f-mono);font-size:var(--cap);color:var(--lime-lift);font-variant-numeric:tabular-nums;white-space:nowrap}
.ev.warn .conf{color:var(--amber)}
.tl{display:grid;gap:.9rem;position:relative;padding-left:1.6rem}
.tl::before{content:"";position:absolute;left:.5rem;top:.6rem;bottom:.6rem;width:2px;background:linear-gradient(180deg,var(--sky),var(--violet))}
.tl li{position:relative;display:grid;grid-template-columns:1fr auto;gap:.8rem;align-items:center;background:var(--card);border:1px solid var(--hair-2);border-radius:var(--r-md);padding:.8rem .9rem}
.tl li::before{content:"";position:absolute;left:calc(-1.6rem + .5rem - 5px);top:50%;width:12px;height:12px;border-radius:50%;background:var(--sky);box-shadow:0 0 12px var(--sky);transform:translateY(-50%)}
.tl li.v::before{background:var(--violet-lift);box-shadow:0 0 12px var(--violet-lift)}
.tl time{font-family:var(--f-mono);font-size:var(--cap);color:var(--sky-lift);font-variant-numeric:tabular-nums;display:block}
.tl b{color:var(--ink);font-weight:600}
.tl span{display:block;color:var(--muted);font-size:var(--be-small,14px)}
.tl--wide{gap:.7rem}
.tl--wide li{grid-template-columns:1fr}
.tl--wide li b{font-size:1.05rem}
.thumb{width:96px;height:60px;border-radius:8px;background:radial-gradient(60px 30px at 50% 80%,rgba(87,170,220,.35),transparent 70%),linear-gradient(180deg,#131B3E,#070A18);border:1px solid var(--hair-2);position:relative;overflow:hidden;flex:none}
.thumb::after{content:"";position:absolute;inset:18% 30% 20% 30%;border:1.5px solid var(--lime-lift);border-radius:4px;box-shadow:0 0 10px rgba(150,190,23,.5)}
.thumb--veh::after{inset:34% 18% 24% 18%;border-color:var(--sky-lift);box-shadow:0 0 10px rgba(87,170,220,.5)}
.thumb i{position:absolute;left:6px;top:5px;font-family:var(--f-mono);font-size:var(--cap-screen);letter-spacing:.04em;color:#fff;font-style:normal;opacity:.8}

/* arrive home */
.seq{display:grid;gap:.4rem}
@media (min-width:1150px){.seq{grid-template-columns:1fr 1fr}}
.seq li{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:center;padding:.5rem .7rem;border-radius:var(--r-md);border:1px solid var(--hair);background:rgba(255,255,255,.025);transition:all .35s var(--ease)}
.seq li .n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--hair-2);font-family:var(--f-mono);font-size:var(--cap);color:var(--muted);transition:all .35s}
.seq li b{color:#fff;font-weight:600;display:block}
.seq li span{display:block;color:var(--muted);font-size:var(--be-small,14px);line-height:1.35}
.seq li .s{font-family:var(--f-mono);font-size:var(--cap);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.seq li.on{border-color:rgba(150,190,23,.55);background:rgba(150,190,23,.08)}
.seq li.on .n{background:var(--lime);color:#0B1400;border-color:var(--lime)}
.seq li.on .s{color:var(--lime-lift)}
.seq li.done .n{border-color:var(--lime-lift);color:var(--lime-lift)}
.seq li.done .s{color:var(--lime-lift)}
.house{position:relative;height:128px;border-radius:var(--r-lg);margin-bottom:1rem;overflow:hidden;background:linear-gradient(180deg,#0A1030 0%,#070A18 100%);border:1px solid var(--hair)}
.house .bld{position:absolute;left:12%;right:30%;bottom:0;height:72%;background:#0F1636;border:1px solid rgba(255,255,255,.12);border-bottom:0;border-radius:10px 10px 0 0}
.house .roof{position:absolute;left:9%;right:27%;bottom:72%;height:22px;background:#151E48;clip-path:polygon(0 100%,50% 0,100% 100%)}
.house .win{position:absolute;width:11%;height:26%;background:#141C44;border-radius:3px;transition:background .5s,box-shadow .5s}
.house .win.w1{left:18%;bottom:34%}.house .win.w2{left:34%;bottom:34%}.house .win.w3{left:50%;bottom:34%}
.house .door{position:absolute;left:36%;width:10%;bottom:0;height:28%;background:#0C1230;border:1px solid rgba(255,255,255,.14);border-bottom:0;border-radius:4px 4px 0 0}
.house .gate{position:absolute;right:8%;bottom:0;width:16%;height:36%;border:2px solid rgba(255,255,255,.3);border-bottom:0;border-radius:4px 4px 0 0;transition:transform .8s var(--ease),border-color .5s;transform-origin:left bottom}
.house .lamp{position:absolute;right:26%;bottom:0;width:3px;height:52%;background:rgba(255,255,255,.2)}
.house .lamp::after{content:"";position:absolute;top:-8px;left:-9px;width:21px;height:10px;border-radius:50%;background:#1B2660;transition:background .5s,box-shadow .5s}
.house .car{position:absolute;bottom:6px;left:-20%;width:14%;height:16px;border-radius:6px 8px 3px 3px;background:#3A4270;transition:left 2s var(--ease)}
.house .car::before,.house .car::after{content:"";position:absolute;bottom:-4px;width:6px;height:6px;border-radius:50%;background:#12183A}
.house .car::before{left:3px}.house .car::after{right:3px}
.house .car i{position:absolute;right:-2px;top:5px;width:4px;height:4px;border-radius:50%;background:#FFF3C4;box-shadow:0 0 12px 4px rgba(255,230,150,.6)}
.house .drive{position:absolute;bottom:0;left:0;right:0;height:4px;background:rgba(255,255,255,.06)}
.house.s1 .car{left:52%}
.house.s2 .gate{transform:rotate(-70deg);border-color:var(--lime-lift)}
.house.s3 .lamp::after{background:#FFF3C4;box-shadow:0 0 18px 6px rgba(255,235,170,.55)}
.house.s4 .door{background:#3B3060;box-shadow:inset 0 0 12px rgba(255,220,150,.4)}
.house.s5 .badge{opacity:1}
.house.s6 .win{background:#FFE9B0;box-shadow:0 0 16px rgba(255,225,150,.5)}
.house .badge{position:absolute;left:12px;top:10px;font-family:var(--f-mono);font-size:var(--cap-screen);letter-spacing:.1em;color:var(--lime-lift);opacity:0;transition:opacity .5s}
.house .stamp{position:absolute;right:12px;top:10px;font-family:var(--f-mono);font-size:var(--cap-screen);letter-spacing:.1em;color:var(--muted)}

/* ========================= industries ========================= */
.ind{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1vw,16px)}
@media (max-width:1100px){.ind{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.ind{grid-template-columns:1fr 1fr}}
.ind a{display:grid;gap:.35rem;padding:1rem;box-shadow:var(--shadow-1);border:1px solid var(--hair-2);border-radius:var(--r-md);background:var(--card);color:var(--ink);transition:border-color .2s,background .2s,transform .2s var(--ease);min-height:112px;align-content:start}
.ind a:hover{border-color:var(--sky-lift);background:rgba(87,170,220,.10);transform:translateY(-2px);color:var(--ink)}
.ind b{font-weight:600;font-size:var(--be-body-card,16.25px)}
.ind span{font-size:var(--be-small,14px);color:var(--muted)}
.ind svg{width:22px;height:22px;color:var(--sky-lift)}
.sites{position:relative;height:230px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--hair);background:linear-gradient(180deg,#0B1130,#070A18)}
.sites::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:36px 36px}
.sites svg{position:absolute;inset:0;width:100%;height:100%}
.pin{position:absolute;transform:translate(-50%,-50%)}
.pin i{display:block;width:12px;height:12px;border-radius:50%;background:var(--sky);box-shadow:0 0 14px var(--sky);position:relative}
.pin i::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1.5px solid var(--sky);opacity:0;animation:ring 2.6s ease-out infinite;animation-delay:var(--d,0s)}
.pin.hub i{background:var(--violet-lift);box-shadow:0 0 16px var(--violet-lift)}
.pin.hub i::after{border-color:var(--violet-lift)}
.pin b{position:absolute;left:18px;top:-6px;white-space:nowrap;font-family:var(--f-mono);font-size:var(--cap-screen);letter-spacing:.08em;color:var(--ink-2)}
@keyframes ring{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.outcome{display:grid;gap:.6rem}
.outcome li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;padding:.75rem .9rem;border:1px solid rgba(78,122,0,.30);border-radius:var(--r-md);background:rgba(150,190,23,.12);color:var(--ink);font-weight:500}
.outcome svg{width:20px;height:20px;color:var(--lime-lift);margin-top:.15rem}

/* ========================= workforce ========================= */
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin:0}
@media (max-width:520px){.kpi{grid-template-columns:1fr 1fr}}
.kpi div{padding:.75rem .85rem;border:1px solid var(--hair-2);border-radius:var(--r-md);background:var(--card)}
.kpi dt{font-size:var(--cap);color:var(--muted);letter-spacing:.02em}
.kpi dd{margin:.15rem 0 0;font-family:var(--f-head);font-size:1.7rem;font-weight:800;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.kpi dd small{font-family:var(--f-mono);font-size:var(--cap);font-weight:500;color:var(--muted);margin-left:.3rem;letter-spacing:.04em}
.kpi dd.dd-text{font-size:1.1rem;padding-top:.35rem}
.kpi .warn dd{color:var(--amber)}.kpi .ok dd{color:var(--lime-lift)}
.kpi--wide{grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.2vw,20px)}
.kpi--wide div{padding:1.2rem 1.3rem;background:var(--card);box-shadow:var(--shadow-2)}
.kpi--wide dd{font-size:clamp(1.8rem,2.6vw,2.6rem);color:var(--lime-lift)}
.kpi--wide p{margin:.5rem 0 0;color:var(--ink-2);font-size:var(--be-body-card,16.25px)}
@media (max-width:900px){.kpi--wide{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.kpi--wide{grid-template-columns:1fr}}
.insight{display:grid;gap:.5rem;margin-top:.7rem}
.insight li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;padding:.7rem .85rem;border-radius:var(--r-md);border:1px solid var(--hair);background:rgba(255,255,255,.025);font-size:var(--be-body-card,16.25px);color:var(--ink-2)}
.insight li i{width:8px;height:8px;border-radius:50%;margin-top:.5rem;background:var(--amber)}
.insight li.v i{background:var(--violet-lift)}
.insight b{color:#fff;font-weight:600}
.flowv{display:grid;gap:0;margin-top:1.2rem}
.flowv li{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:center;padding:.55rem 0}
.flowv li+li{border-top:1px dashed var(--hair-2)}
.flowv .n{width:30px;height:30px;border-radius:50%;background:var(--violet-wash);border:1px solid rgba(167,139,250,.5);display:grid;place-items:center;font-family:var(--f-mono);font-size:var(--cap);color:var(--violet-lift)}
.flowv b{color:var(--ink);font-weight:600;font-size:var(--be-body-card,16.25px)}
.flowv span{color:var(--muted);font-size:var(--be-small,14px);display:block}
.note{margin-top:1.2rem;padding:1rem 1.1rem;border-left:3px solid var(--sky-lift);background:rgba(87,170,220,.12);border-radius:0 var(--r-md) var(--r-md) 0;color:var(--ink-2);font-size:var(--be-body-card,16.25px)}
.note b{color:var(--ink)}
.chart{margin-top:1rem;padding:.9rem .9rem .6rem;border:1px solid var(--hair);border-radius:var(--r-md);background:rgba(255,255,255,.03)}
.chart-h{display:flex;justify-content:space-between;gap:1rem;font-family:var(--f-mono);font-size:var(--cap-screen);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.7rem}
.bars{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:end;height:110px;position:relative}
.bars::before{content:"";position:absolute;left:0;right:0;top:5%;border-top:1px dashed rgba(150,190,23,.5)}
.bar{position:relative;display:grid;align-items:end;height:100%}
.bar i{display:block;background:linear-gradient(180deg,var(--sky),var(--violet));border-radius:5px 5px 2px 2px;height:var(--h);transition:height .9s var(--ease),filter .2s;min-height:4px}
.bar.low i{background:linear-gradient(180deg,var(--amber),#A86E14)}
.bar.off i{background:rgba(255,255,255,.12)}
.bar:hover i,.bar:focus i{filter:brightness(1.3)}
.bar:focus{outline:none}
.bar b{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--h) + 6px);font-family:var(--f-mono);font-size:var(--cap-screen);color:#fff;background:rgba(7,10,24,.95);border:1px solid var(--hair-2);padding:.15rem .4rem;border-radius:5px;opacity:0;pointer-events:none;transition:opacity .2s;white-space:nowrap;z-index:2}
.bar:hover b,.bar:focus b{opacity:1}
.bar-x{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:.4rem;text-align:center;font-family:var(--f-mono);font-size:var(--cap-screen);color:var(--muted)}
.armed .bars:not(.in) .bar i{height:0}
.pay{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-top:1rem}
@media (max-width:820px){.pay{grid-template-columns:1fr 1fr}}
.pay li{padding:1rem;border:1px solid var(--hair-2);border-radius:var(--r-md);text-align:center;font-weight:600;color:var(--ink);background:var(--card)}
.pay li small{display:block;font-weight:400;color:var(--muted);font-size:13px;margin-top:.2rem}
.sheet{display:grid;gap:0;font-family:var(--f-mono);font-size:13px;font-variant-numeric:tabular-nums}
.sheet div{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:.5rem;padding:.55rem .2rem;border-bottom:1px solid var(--hair)}
.sheet div:first-child{color:var(--muted);letter-spacing:.06em;font-size:var(--cap-screen);text-transform:uppercase}
.sheet div:last-child{border-bottom:0;color:#fff;font-weight:600}
.sheet .ok{color:var(--lime-lift)}.sheet .warn{color:var(--amber)}
.ready{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.9rem;padding:.8rem 1rem;border-radius:var(--r-md);background:rgba(150,190,23,.1);border:1px solid rgba(150,190,23,.45);font-size:15px;flex-wrap:wrap}
.ready b{color:var(--lime-lift);font-family:var(--f-mono);font-size:var(--cap);letter-spacing:.12em;text-transform:uppercase}

/* ========================= plans ========================= */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.2vw,22px);align-items:stretch}
@media (max-width:900px){.plans{grid-template-columns:1fr}}
.plan{position:relative;display:grid;gap:.6rem;align-content:start;padding:clamp(22px,2vw,32px);border:1px solid var(--hair-2);border-radius:var(--r-xl);background:var(--card);box-shadow:var(--shadow-2)}
.plan--hi{border-color:rgba(107,70,193,.55);background:linear-gradient(180deg,rgba(107,70,193,.09),var(--card));box-shadow:var(--glow-v)}
.plan .k{font-family:var(--f-mono);font-size:var(--cap);letter-spacing:.2em;text-transform:uppercase;color:var(--violet-lift);font-weight:600}
.plan h3{font-size:clamp(1.5rem,2vw,2rem);margin:0;letter-spacing:-.03em}
.plan .tag{color:var(--ink-2);font-size:var(--be-body-card,16.25px);margin:0}
.plan ul{display:grid;gap:.45rem;margin:.6rem 0 1rem;padding-top:.9rem;border-top:1px solid var(--hair)}
.plan li{display:flex;gap:.6rem;align-items:flex-start;color:var(--ink-2);font-size:var(--be-body-card,16.25px)}
.plan li svg{width:18px;height:18px;flex:none;margin-top:.2rem;color:var(--lime-lift)}
.plan .btn{margin-top:auto}
.plan .fit{font-size:var(--be-body-card,16.25px);color:var(--muted);margin:0}
.ribbon{position:absolute;top:-1px;right:24px;font-family:var(--f-mono);font-size:var(--cap);letter-spacing:.16em;text-transform:uppercase;background:var(--violet);color:#fff;padding:.35rem .7rem;border-radius:0 0 8px 8px;font-weight:600}
.care{margin-top:clamp(18px,2vw,30px);display:grid;grid-template-columns:1.1fr 2fr;gap:1.4rem;padding:clamp(20px,2vw,32px);border-radius:var(--r-xl);background:var(--card);border:1px solid var(--hair-2);box-shadow:var(--shadow-2)}
@media (max-width:900px){.care{grid-template-columns:1fr}}
.care p{color:var(--ink-2);margin:0}
.care .eyebrow{margin-bottom:.5rem}
.care ul{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
@media (max-width:700px){.care ul{grid-template-columns:1fr 1fr}}
.care li{font-size:15px;color:var(--ink-2);padding:.55rem .7rem;border-radius:var(--r-sm);background:var(--fill-1);border:1px solid var(--hair)}

/* ========================= why + compare ========================= */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}
@media (max-width:900px){.why{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.why{grid-template-columns:1fr}}
.why>div{position:relative;padding:1.1rem;border-radius:var(--r-md);border:1px solid var(--hair-2);background:var(--card);overflow:hidden;box-shadow:var(--shadow-1)}
.why b{display:block;color:var(--ink);font-family:var(--f-head);font-size:var(--be-h3-card,19.4px);letter-spacing:-.02em;margin-bottom:.25rem}
.why p{margin:0;color:var(--ink-2);font-size:var(--be-body-card,16.25px)}
.cover{margin-top:clamp(18px,2vw,30px);overflow-x:auto;-webkit-overflow-scrolling:touch}
.cover table{width:100%;border-collapse:collapse;font-size:15px;min-width:640px}
.cover th,.cover td{padding:.7rem .8rem;border-bottom:1px solid var(--hair);text-align:left;vertical-align:top}
.cover thead th{font-family:var(--f-mono);font-size:var(--cap);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.cover tbody th{font-weight:600;color:var(--ink)}
.cover td.y{color:var(--lime-lift);font-weight:600}
.cover td.n{color:var(--muted)}
.cover tr.us th,.cover tr.us td{color:var(--ink);background:var(--violet-wash)}
.cover tr.us td.y{color:var(--lime-lift)}

/* ========================= assessment ========================= */
.assess{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(26px,3vw,60px);align-items:start}
@media (max-width:960px){.assess{grid-template-columns:1fr}}
.form{background:var(--card);border:1px solid rgba(107,70,193,.30);border-radius:var(--r-xl);box-shadow:var(--shadow-3);overflow:hidden;position:relative}
.form-top{display:flex;align-items:center;gap:.6rem;padding:.9rem 1.2rem;border-bottom:1px solid var(--hair);font-family:var(--f-mono);font-size:var(--cap);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.steps{display:flex;gap:.35rem;margin-left:auto}
.steps i{width:22px;height:4px;border-radius:2px;background:var(--hair-2)}
.steps i.on{background:var(--violet-lift)}
.form-body{padding:clamp(18px,2vw,28px)}
.fs{display:none;border:0;padding:0;margin:0;min-width:0}.fs.on{display:block}
.fs h3{margin-bottom:.9rem}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem}
@media (max-width:640px){.opts{grid-template-columns:1fr 1fr}}
.opt{position:relative}
.opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.opt span{display:grid;gap:.2rem;padding:.85rem .9rem;border:1.5px solid var(--edge);border-radius:var(--r-md);min-height:64px;color:var(--ink);font-weight:600;font-size:.95rem;transition:border-color .2s,background .2s;align-content:center}
.opt span small{font-weight:400;color:var(--muted);font-size:13px}
.opt input:checked+span{border-color:var(--violet-lift);background:var(--violet-wash)}
.opt input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.fields--top{margin-top:1rem}
@media (max-width:560px){.fields{grid-template-columns:1fr}}
.field{display:grid;gap:.3rem}
.field label{font-size:var(--be-small,14px);color:var(--ink-2);font-weight:500}
.field input,.field select,.field textarea{font:inherit;font-size:16px;padding:.7rem .85rem;border-radius:var(--r-sm);border:1.5px solid var(--edge);background:var(--card);color:var(--ink);min-height:48px;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--focus);outline-offset:1px;border-color:var(--violet-lift)}
.field input.bad{border-color:var(--red)}
.field select option{color:#000}
.field--full{grid-column:1/-1}
.form-nav{display:flex;justify-content:space-between;gap:.6rem;margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--hair)}
.summary{display:grid;gap:.4rem;font-size:15px;color:var(--ink-2);margin:.5rem 0 1rem}
.summary div{display:grid;grid-template-columns:120px 1fr;gap:.6rem;padding:.4rem 0;border-bottom:1px dashed var(--hair-2)}
.summary b{color:var(--muted);font-weight:500;font-family:var(--f-mono);font-size:var(--cap);letter-spacing:.1em;text-transform:uppercase}
.form-note{font-size:var(--be-small,14px);color:var(--muted);margin:.8rem 0 0}
.form-note--warn{color:var(--amber)}
.notice{padding:1.2rem 1.3rem;border-radius:var(--r-lg);border:1px solid var(--hair-2);background:var(--card);margin-bottom:1rem}
.notice h3{margin-bottom:.3rem}
.notice p{margin:0;color:var(--ink-2)}
.notice--ok{border-color:rgba(78,122,0,.4);background:rgba(150,190,23,.14);text-align:center;padding:1.6rem 1.2rem}
.notice--ok .ok{width:64px;height:64px;border-radius:50%;background:rgba(150,190,23,.15);border:1.5px solid var(--lime);display:grid;place-items:center;margin:0 auto 1rem;color:var(--lime-lift)}
.notice--ok .ok svg{width:30px;height:30px}
.notice--bad{border-color:rgba(228,72,63,.5);background:rgba(228,72,63,.08)}
.contact-cards{display:grid;gap:.6rem;margin-top:1.4rem}
.contact-cards a,.contact-cards>div{display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:center;padding:.85rem 1rem;border:1px solid var(--hair-2);border-radius:var(--r-md);color:var(--ink);background:var(--card)}
.contact-cards a:hover{border-color:var(--sky-lift);color:var(--ink)}
.contact-cards svg{width:22px;height:22px;color:var(--sky-lift)}
.contact-cards b{display:block;font-weight:600}
.contact-cards span{display:block;color:var(--muted);font-size:var(--be-small,14px)}
.side-steps{margin-top:1.6rem}
.side-steps .eyebrow{margin-bottom:.2rem}

/* ========================= prose ========================= */
.prose{font-size:var(--be-body,17.5px);line-height:1.7;color:var(--ink-2)}
.prose h2{font-size:calc(var(--be-h2,40px) * .8);margin:1.8em 0 .5em;color:var(--ink)}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.4em}
.prose p{margin:0 0 1.1em}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.4rem;display:grid;gap:.45rem}
.prose ul{list-style:disc}.prose ol{list-style:decimal}
.prose li b{color:var(--ink)}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose img{border-radius:var(--r-md)}
.prose blockquote{margin:0 0 1.2em;padding:1rem 1.2rem;border-left:3px solid var(--violet);background:var(--violet-wash);border-radius:0 var(--r-md) var(--r-md) 0}
.legal-updated{font-family:var(--f-mono);font-size:var(--cap);color:var(--muted);margin-top:2rem}
.guide-cta{margin-top:clamp(24px,2.5vw,40px);padding:clamp(20px,2vw,32px);border-radius:var(--r-xl);background:var(--card);border:1px solid rgba(107,70,193,.30);box-shadow:var(--shadow-2)}
.guide-cta p{color:var(--ink-2)}
.faq{display:grid;gap:.5rem}
.faq details{border:1px solid var(--hair-2);border-radius:var(--r-md);background:var(--card)}
.faq details[open]{border-color:rgba(107,70,193,.45)}
.faq summary{list-style:none;cursor:pointer;padding:.95rem 3rem .95rem 1.1rem;font-family:var(--f-head);font-weight:600;font-size:var(--be-body,17.5px);color:var(--ink);position:relative;min-height:52px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:1.1rem;top:.75rem;font-size:1.5rem;color:var(--violet-lift);font-weight:500;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq-a{padding:0 1.1rem 1rem}
.faq-a p{margin:0;color:var(--ink-2)}
.pager{margin-top:2rem;display:flex;justify-content:center;gap:.5rem}
.pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 .6rem;border:1px solid var(--edge);border-radius:var(--r-sm);color:var(--ink)}
.pager .page-numbers.current{background:var(--violet);border-color:#8A6AE0}

/* ========================= CTA band ========================= */
.cta-in{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:clamp(20px,3vw,60px);align-items:center}
@media (max-width:900px){.cta-in{grid-template-columns:1fr}}
.cta-btns{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:flex-end}
@media (max-width:900px){.cta-btns{justify-content:flex-start}}

/* ==========================================================================
   Footer. An INDEX, not a sitemap: the header menus already carry all nine
   solutions and eleven industries, so this is sixteen links in three columns.
   Rows are 28px, which clears WCAG 2.2 AA target size (2.5.8, 24px); the
   44px AAA figure is reserved for primary navigation.
   ========================================================================== */
.ftr{background:var(--ftr-bg);color:var(--ftr-ink);padding:clamp(22px,2vw,30px) 0 calc(14px + env(safe-area-inset-bottom));overflow-x:clip}

/* TWO ROWS, not columns. The old 1.8fr/1fr/1fr grid was a link farm: at full
   browser width the two short link columns sat marooned in the middle with a
   third of the footer empty to their right, and a long brand paragraph made it
   tall as well as sparse. Row 1 is brand | links | contact, where the links are
   ONE wrapping line that absorbs the extra width instead of leaving a hole. */
.ftr-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(16px,2vw,36px);align-items:center}
.ftr-brand{display:flex;flex-direction:column;gap:.35rem;flex:0 0 auto}
.ftr-brand img{height:28px;width:auto;display:block}
.ftr-brand .strap{font-size:12px;letter-spacing:.06em;color:var(--ftr-accent);margin:0;white-space:nowrap}

.ftr-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.1rem 1.35rem}
.ftr-links a{color:var(--ftr-mute);font-size:14px;display:inline-flex;align-items:center;min-height:32px;white-space:nowrap;transition:color .18s}
.ftr-links a:hover,.ftr-links a:focus-visible{color:#fff}

.ftr-contact{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:flex-end;flex:0 0 auto}
.ftr-pill{display:inline-flex;align-items:center;gap:.45rem;min-height:38px;padding:.3rem .85rem;border:1px solid rgba(255,255,255,.22);border-radius:var(--r-pill);color:var(--ftr-ink);font-size:13.5px;font-weight:600;white-space:nowrap;transition:background .18s,border-color .18s,color .18s}
.ftr-pill svg{width:15px;height:15px;flex:none;opacity:.8}
.ftr-pill:hover,.ftr-pill:focus-visible{background:#fff;border-color:#fff;color:var(--ftr-bg)}

/* Below the point where brand + 14 links + two pills stop fitting on one line,
   stack to three short rows rather than squeezing. */
@media (max-width:1180px){
	.ftr-top{grid-template-columns:1fr;gap:.9rem;justify-items:center;text-align:center}
	.ftr-links{justify-content:center}
	.ftr-contact{justify-content:center}
}
/* A two-column grid was tried here and MEASURED WORSE: it forces 14 links into
   7 full rows (238px), while the centred wrapping list packs two or three short
   links per line and comes to 180px. Keep the wrap - it is the shorter footer,
   which is what the phone needs. Only the contact pills are stretched, so the
   two tap targets fill the row instead of huddling in the middle. */
@media (max-width:620px){
	.ftr-contact{width:100%}
	.ftr-pill{flex:1 1 auto;justify-content:center}
}

.ftr-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.3rem 1.2rem;margin-top:clamp(14px,1.4vw,22px);padding-top:.7rem;border-top:1px solid rgba(255,255,255,.13);font-size:12.5px;color:var(--ftr-mute);align-items:center}
/* The back-to-top button is position:fixed bottom-right, so when the page is
   scrolled to the end it lands on top of the last legal link ("Sitemap" was
   half hidden behind it). Reserve its width at the end of the row. */
.ftr-legal{padding-right:64px}
@media (max-width:760px){.ftr-legal{padding-right:0;justify-content:center;text-align:center}}
.ftr-legal ul{display:flex;gap:0 1rem;flex-wrap:wrap;align-items:center}
.ftr-legal a{color:var(--ftr-mute);display:inline-flex;align-items:center;min-height:28px}
.ftr-legal a:hover{color:#fff}
@media (max-width:480px){.ftr-legal{gap:.2rem .9rem}}

/* ========================= mobile sliders ========================= */
@media (max-width:640px){
  .is-slider{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
  .is-slider::-webkit-scrollbar{display:none}
  .is-slider>*{flex:0 0 84%;scroll-snap-align:start}
}
.slider-ctl{display:none;align-items:center;justify-content:center;gap:.6rem;margin-top:.9rem}
.slider-ctl button{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--edge);background:var(--card);color:var(--ink);display:grid;place-items:center}
.slider-ctl button svg{width:18px;height:18px}
.slider-ctl .dots{display:flex;gap:6px}
.slider-ctl .dots i{width:8px;height:8px;border-radius:50%;background:var(--hair-2)}
.slider-ctl .dots i.on{background:var(--violet-lift)}
@media (max-width:640px){.slider-ctl{display:flex}}

/* ========================= chrome ========================= */
.progress{position:fixed;left:0;top:0;height:3px;width:0;z-index:100;background:linear-gradient(90deg,var(--violet),var(--sky),var(--lime));pointer-events:none}
.rail{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:45;display:none;flex-direction:column;gap:2px}
@media (min-width:1500px){.rail:not([hidden]){display:flex}}
.rail a{position:relative;width:30px;height:30px;display:grid;place-items:center}
.rail a::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--hair-2);border:1px solid var(--edge);transition:background .2s,transform .2s,box-shadow .2s}
.rail a:hover::before{background:var(--ink)}
.rail a.on::before{background:var(--violet-lift);transform:scale(1.35);box-shadow:0 0 12px rgba(167,139,250,.7);border-color:var(--violet-lift)}
.rail a span{position:absolute;right:34px;top:50%;transform:translateY(-50%);white-space:nowrap;font-family:var(--f-mono);font-size:var(--cap-screen);letter-spacing:.1em;text-transform:uppercase;color:var(--ftr-ink);background:rgba(23,19,64,.94);border:1px solid var(--hair-2);padding:.28rem .55rem;border-radius:6px;opacity:0;transition:opacity .2s;pointer-events:none}
.rail a:hover span,.rail a.on span{opacity:1}
.top{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:50;width:48px;height:48px;border-radius:50%;background:var(--violet);border:1.5px solid #8A6AE0;color:#fff;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .25s;box-shadow:var(--shadow-2)}
.top.show{opacity:1;pointer-events:auto}
.top svg{width:20px;height:20px}

/* reveals - armed by JS only; content is visible without it */
.rv{transition:opacity .7s var(--ease),transform .7s var(--ease)}
.armed .rv:not(.in){opacity:0;transform:translateY(16px)}
.armed .rv:nth-child(2){transition-delay:.07s}.armed .rv:nth-child(3){transition-delay:.14s}.armed .rv:nth-child(4){transition-delay:.21s}.armed .rv:nth-child(5){transition-delay:.28s}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .armed .rv:not(.in){opacity:1;transform:none}
}
@media print{
  .bebar,.hdr,.appm,.rail,.top,.progress,.hero-net,.live,.ai-wall,.scen,.form{display:none!important}
  body{background:#fff;color:#000}
  h1,h2,h3,h4,.pillar,.pillar p{color:#000}
  .sec{padding-block:14px}
}

/* --------------------------------------------------------------------------
   A few components appear both inside a screen and on the page. The screen
   token block above handles their colour; these handle the surfaces that were
   authored as translucent white.
   -------------------------------------------------------------------------- */
.screen .tl li,.screen .kpi div,.screen .ai-stats div{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.12)}
.screen .kpi--wide div{box-shadow:none}
.screen .pillar,.live .pillar{background:rgba(255,255,255,.03)}

/* The brand bar is the one element shared across every Be site, so it keeps
   the family navy whatever the page does. */
.bebar{--ink:#fff}

.screen .pillar,.live .pillar,.screen .why>div{box-shadow:none}