/* ============================================================================
   PI NETWORK — "ALL SYSTEMS GREEN" design system
   Aurora Spine architecture · evergreen-black bands + porcelain clearings
   ----------------------------------------------------------------------------
   TOC
   01 Tokens & hue families        09 Stats Ledger
   02 Reset & base                 10 Scenario cards / dots / chips
   03 Typography & utilities       11 Testimonials
   04 Buttons & focus              12 ROI band
   05 Header crown                 13 Flagship case + timeline spine
   06 Dark band engine             14 Split / coverage / ticks / state chips
   07 Hero + Spine                 15 FAQ
   08 Consoles & marquee           16 Greenhouse Terminal CTA
   17 Footer  18 Subpage kit  19 Modules  20 Badge  21 Motion  22 A11y/print
   ----------------------------------------------------------------------------
   HARD RULES (do not drift):
   - CLEARING RULE: dense long-form copy lives on --paper/--mist only. Dark
     (.dark) bands never hold more than a few lines of body text.
   - --haze & --spark are NEVER text on light backgrounds. The only
     interactive green on --paper is --primary-deep.
   - Dark-band body text is always --mint-200.
   - QLD/SA state chips: ONLY .chip-state.capability (dashed, no dot).
   - One backdrop-filter site-wide (.mbar). Do not add more.
   ============================================================================ */

/* ====== 01 · TOKENS ====== */
:root{
  /* dark tiers */
  --abyss:#04130C;
  --deep:#082315;
  --pine:#0E3A24;
  /* light tiers */
  --paper:#FAF9F4;
  --mist:#F2F0E6;
  --surface:#FFFFFF;
  --tint:#E7F3E4;
  /* text */
  --ink-900:#06140D;
  --ink-600:#51635A;
  --mint-200:#CDE9D6;
  --mint-400:#9DBFAA;
  /* greens */
  --primary:#10B26C;
  --primary-deep:#0A7A4B;
  --pulse:#3FE08F;
  --haze:#7FF5C8;
  --spark:#B7F04C;
  /* lines & fx */
  --line-light:#DEEAE1;
  --line-dark:rgba(31,74,48,.7);
  --shadow-soft:0 24px 48px -24px rgba(6,20,13,.18);
  --glow-pulse:0 0 24px rgba(63,224,143,.35);
  --glow-spark:0 8px 28px rgba(183,240,76,.35);
  /* geometry */
  --r-card:14px; --r-tile:10px; --r-panel:24px; --r-cta:28px; --r-pill:999px;
  --wrap:1200px;
  /* faces */
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-grotesk:'Space Grotesk','Inter',system-ui,sans-serif;
  --font-body:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
  /* aurora stops (default: emerald — home & services) */
  --aur1:rgba(63,224,143,.16);
  --aur2:rgba(127,245,200,.08);
  --aur3:rgba(183,240,76,.06);
  /* grain (kills gradient banding — mandatory on every dark band) */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* aurora hue families — set on <body> for subpages, or per dark section */
.aurora-emerald,body.hue-services{--aur1:rgba(63,224,143,.16);--aur2:rgba(127,245,200,.08);--aur3:rgba(183,240,76,.06)}
.aurora-teal,body.hue-scenarios{--aur1:rgba(61,210,228,.13);--aur2:rgba(127,245,228,.07);--aur3:rgba(63,224,143,.06)}
.aurora-warm,body.hue-case{--aur1:rgba(63,224,143,.13);--aur2:rgba(214,236,138,.08);--aur3:rgba(242,214,118,.05)}
.aurora-sage,body.hue-about{--aur1:rgba(157,191,170,.14);--aur2:rgba(127,245,200,.06);--aur3:rgba(63,224,143,.05)}

/* ====== 02 · RESET & BASE ====== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,figure,blockquote{margin:0}
ul[class],ol[class]{padding:0;list-style:none}
body{
  font:400 17px/1.7 var(--font-body);
  background:var(--paper);color:var(--ink-900);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0}
input{font:inherit}
strong,b{font-weight:600}
::selection{background:rgba(63,224,143,.35)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
@media(max-width:640px){.wrap{padding:0 20px}}

section{padding:clamp(76px,9vw,132px) 0}
.sec-tight{padding:clamp(56px,7vw,92px) 0}
.bg-mist{background:var(--mist)}
.center{text-align:center}
.sec-gap{margin-top:clamp(38px,5vw,58px)}
.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-48{margin-top:48px}

/* ====== 03 · TYPOGRAPHY & SIGNATURE UTILITIES ====== */
h1,h2{font-family:var(--font-display);font-weight:540;letter-spacing:-.02em;color:var(--ink-900)}
h3,h4,h5{font-family:var(--font-grotesk);font-weight:600;letter-spacing:-.02em;color:var(--ink-900)}
h2{font-size:clamp(32px,4vw,52px);line-height:1.08}
h3{font-size:clamp(24px,2.6vw,31px);line-height:1.18}
h4{font-size:19px}

.eyebrow{
  font-family:var(--font-mono);font-weight:500;font-size:11.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--primary-deep);
}
.dark .eyebrow,.eyebrow.on-dark{color:var(--mint-400)}

/* node micro-divider — 1px rule terminated by a 6px pulse dot */
.node-rule{position:relative;width:64px;height:1px;margin-top:14px;
  background:linear-gradient(90deg,var(--primary),var(--pulse) 82%,transparent)}
.node-rule::after{content:"";position:absolute;right:-1px;top:-2.5px;width:6px;height:6px;
  border-radius:50%;background:var(--pulse)}
.center .node-rule,.node-rule.center{margin-left:auto;margin-right:auto;
  background:linear-gradient(90deg,transparent,var(--primary) 30%,var(--pulse))}

/* hairline aurora border — 1px seam between dark & light bands */
.hairline{height:1px;background:linear-gradient(90deg,transparent,var(--primary) 32%,var(--pulse) 58%,transparent)}
.hairline.flow{background-size:200% 100%;animation:flow 8s linear infinite}
@keyframes flow{to{background-position:-200% 0}}

/* gradient text — big stat numerals & console values ONLY */
.gtext{color:var(--pulse)} /* solid fallback */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .gtext{background:linear-gradient(128deg,var(--primary-deep),var(--pulse) 72%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    -webkit-text-fill-color:transparent}
}

.sec-head{max-width:740px}
.sec-head h2{margin-top:18px}
.sec-head .lede{margin-top:18px;font-size:18px;line-height:1.65;color:var(--ink-600)}
.sec-head.center{margin-left:auto;margin-right:auto}
.dark .sec-head h2{color:#F2FAF4}
.dark .sec-head .lede{color:var(--mint-200)}
.dark{font-size:16.5px}
.dark p{color:var(--mint-200)}

/* ====== 04 · BUTTONS & FOCUS ====== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 28px;border-radius:var(--r-pill);
  font:600 15px/1 var(--font-grotesk);letter-spacing:.01em;cursor:pointer;
  border:1.5px solid transparent;white-space:nowrap;
  transition:transform .2s,box-shadow .2s,background-color .2s,color .2s,border-color .2s;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(4px)}
.btn-sm{padding:11px 20px;font-size:13.5px}

.btn-primary{background:linear-gradient(120deg,var(--primary),var(--pulse));
  color:var(--abyss);box-shadow:0 0 16px rgba(63,224,143,.22)}
.btn-primary:hover{box-shadow:var(--glow-pulse)}
.btn-spark{background:var(--spark);color:var(--abyss)}
.btn-spark:hover{box-shadow:var(--glow-spark)}
.btn-ghost{border-color:rgba(157,191,170,.45);color:var(--mint-200)}
.btn-ghost:hover{background:rgba(255,255,255,.06);border-color:var(--mint-400)}
.btn-outline{border-color:var(--primary-deep);color:var(--primary-deep)}
.btn-outline:hover{background:var(--tint)}

:focus-visible{outline:2px solid var(--pulse);outline-offset:3px;border-radius:4px}
.btn:focus-visible{outline-offset:4px}

/* ====== 05 · HEADER CROWN (promo / utility / main nav) ====== */
.promo{position:relative;background:var(--abyss);color:var(--mint-200);text-align:center;
  font:400 12px/1.6 var(--font-mono);letter-spacing:.06em;padding:9px 16px}
.promo a{color:var(--pulse);text-decoration:underline;text-underline-offset:3px}
.promo a:hover{color:var(--haze)}
.promo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--primary) 32%,var(--pulse) 58%,transparent);
  background-size:200% 100%;animation:flow 8s linear infinite}

.ubar{background:var(--abyss);font:400 11.5px/1 var(--font-mono);letter-spacing:.08em}
.ubar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:40px;flex-wrap:wrap;gap:8px}
.ubar .ulinks{display:flex;gap:22px;align-items:center}
.ubar a{color:var(--mint-400);padding:6px 0;transition:color .2s}
.ubar a:hover{color:var(--haze)}
.ubar .uright{display:flex;gap:22px;align-items:center;color:var(--mint-400)}
.ubar .uright b{font:500 13px var(--font-grotesk);letter-spacing:.02em;color:#fff}
@media(max-width:760px){.ubar .ulinks{display:none}.ubar .wrap{justify-content:center}.ubar .uright{flex-wrap:wrap;justify-content:center;gap:2px 16px}.ubar .uright>*{white-space:nowrap}}

/* main nav — sticky dark glass. THE only backdrop-filter on the site. */
.mbar{position:sticky;top:0;z-index:80;
  background:rgba(4,19,12,.82);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-dark)}
@supports not ((backdrop-filter:blur(14px)) or (-webkit-backdrop-filter:blur(14px))){
  .mbar{background:var(--deep)}
}
.mbar .wrap{position:relative;display:flex;align-items:center;gap:26px;min-height:78px}
.mbar .logo{height:34px;width:auto;filter:brightness(0) invert(1)}
.mainmenu{display:flex;gap:26px}
.mainmenu a{position:relative;font:600 15px/1 var(--font-body);color:var(--mint-200);padding:12px 2px}
.mainmenu a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;
  background:var(--spark);border-radius:2px;box-shadow:0 0 6px rgba(183,240,76,.6);
  transform:scaleX(0);transform-origin:left;transition:transform .25s}
.mainmenu a:hover,.mainmenu a.active{color:#fff}
.mainmenu a:hover::after,.mainmenu a.active::after{transform:scaleX(1)}
.spacer{flex:1}
.search{display:flex;align-items:center;gap:9px;min-width:170px;
  border:1px solid var(--line-dark);border-radius:var(--r-pill);
  padding:9px 16px;color:var(--mint-400);background:rgba(255,255,255,.03)}
.search svg{flex:none}
.search input{background:transparent;border:0;outline:none;width:100%;
  font:400 12.5px var(--font-mono);letter-spacing:.04em;color:var(--mint-200)}
.search input::placeholder{color:var(--mint-400);opacity:.75}

.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:11px;border:1px solid var(--line-dark);border-radius:10px;cursor:pointer}
.nav-toggle span{display:block;height:2px;background:var(--mint-200);border-radius:2px;transition:transform .25s,opacity .25s}
.mbar.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mbar.open .nav-toggle span:nth-child(2){opacity:0}
.mbar.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:1080px){.search{display:none}}
@media(max-width:880px){
  html.js .nav-toggle{display:flex}
  html.js .mainmenu{display:none;position:absolute;top:100%;left:0;right:0;z-index:79;
    flex-direction:column;gap:0;padding:8px 24px 18px;
    background:var(--deep);border-bottom:1px solid var(--line-dark)}
  html.js .mbar.open .mainmenu{display:flex}
  html.js .mainmenu a{padding:14px 2px;border-bottom:1px solid rgba(31,74,48,.45);font-size:15px}
  html.js .mainmenu a::after{bottom:8px;right:auto;width:36px}
  /* no-JS fallback: menu simply wraps, always visible */
  html:not(.js) .mainmenu{flex-wrap:wrap;gap:4px 18px;padding:8px 0}
  html:not(.js) .mbar .wrap{flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
}
@media(max-width:560px){.mbar .btn{display:none}.mbar .wrap{gap:16px}}

/* ====== NAV DROPDOWNS — Services / Scenarios (added 2026-06-13) ====== */
.navitem{position:relative;display:flex;align-items:center;gap:3px}
.navcaret{display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;padding:0;margin:0;border:0;background:transparent;
  color:var(--mint-200);cursor:pointer}
.navcaret svg{width:11px;height:11px;transition:transform .25s}
.navcaret:hover{color:#fff}
.navitem:hover .navcaret svg,
.navitem:focus-within .navcaret svg,
.navitem.open .navcaret svg{transform:rotate(180deg)}
.submenu{position:absolute;top:calc(100% + 8px);left:-12px;z-index:81;
  min-width:264px;display:flex;flex-direction:column;padding:8px;
  background:var(--deep);border:1px solid var(--line-dark);border-radius:var(--r-card);
  box-shadow:0 20px 44px rgba(4,19,12,.5);
  opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,visibility .2s}
/* invisible hover bridge across the gap, so moving cursor from trigger to
   panel never drops :hover and closes the menu */
.submenu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.navitem:hover .submenu,
.navitem:focus-within .submenu,
.navitem.open .submenu{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.submenu a{padding:10px 12px;border-radius:9px;white-space:nowrap;
  font:600 14px/1.2 var(--font-body);color:var(--mint-200)}
.submenu a::after{display:none}
.submenu a:hover,.submenu a:focus-visible{background:rgba(255,255,255,.06);color:#fff}

@media(max-width:880px){
  /* mobile: dropdowns collapse into inline accordions in the hamburger panel */
  html.js .navitem{flex-wrap:wrap;width:100%;border-bottom:1px solid rgba(31,74,48,.45)}
  html.js .navitem>a{flex:1;border-bottom:0}
  html.js .navcaret{width:44px;height:44px;color:var(--mint-200)}
  html.js .submenu{position:static;opacity:1;visibility:visible;transform:none;
    pointer-events:auto;display:none;width:100%;min-width:0;padding:2px 0 10px 14px;
    background:transparent;border:0;box-shadow:none;z-index:auto}
  html.js .navitem:hover .submenu,
  html.js .navitem:focus-within .submenu{display:none}
  html.js .navitem.open .submenu{display:flex}
  html.js .submenu a{border-bottom:0;color:var(--mint-400)}
  html.js .submenu a:hover{color:#fff;background:transparent}
  html.js .submenu::before{display:none}  /* no hover bridge needed in the accordion */
}

/* ====== 06 · DARK BAND ENGINE (aurora + engineered grid + grain) ====== */
.dark{
  position:relative;color:var(--mint-200);
  background:
    radial-gradient(1100px 540px at 16% -12%,var(--aur1),transparent 62%),
    radial-gradient(900px 480px at 86% 4%,var(--aur2),transparent 60%),
    radial-gradient(760px 460px at 52% 112%,var(--aur3),transparent 60%),
    var(--abyss);
}
.dark::before{ /* 72px engineered grid */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(to right,rgba(157,191,170,.05) 0 1px,transparent 1px 72px),
    repeating-linear-gradient(to bottom,rgba(157,191,170,.05) 0 1px,transparent 1px 72px);
}
.dark::after{ /* grain — mandatory, kills banding */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.04;
  background:var(--grain);
}
.dark>*{position:relative;z-index:1}
.dark>.aurora-clip,.dark>.beam,.dark>.rings{z-index:0}
.dark h1,.dark h2,.dark h3,.dark h4{color:#F2FAF4}
/* softer dose for subpage heroes & footer */
.dark.soft::before{
  background:
    linear-gradient(rgba(4,19,12,.45),rgba(4,19,12,.45)),
    repeating-linear-gradient(to right,rgba(157,191,170,.05) 0 1px,transparent 1px 72px),
    repeating-linear-gradient(to bottom,rgba(157,191,170,.05) 0 1px,transparent 1px 72px);
}
/* drifting aurora layer — max ONE animated aurora per viewport */
.aurora-clip{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.aurora{position:absolute;inset:-30% -12%;
  background:radial-gradient(46% 40% at 30% 38%,rgba(63,224,143,.10),transparent 70%);
  animation:auroraDrift 52s ease-in-out infinite alternate}
@keyframes auroraDrift{to{transform:translate3d(9%,-7%,0) scale(1.1)}}

/* ====== 07 · HERO + THE SPINE ====== */
.hero{padding-bottom:0}
.hero .wrap{padding-top:clamp(56px,7vw,96px)}
.hero h1{font-weight:560;font-size:clamp(48px,7.2vw,92px);line-height:.98;
  letter-spacing:-.02em;color:#F4FBF6;margin:26px 0 0;max-width:840px}
.hero h1 em{font-style:italic;color:var(--pulse)}
.pagehero h1 em{font-style:italic;color:var(--pulse)}
.hero-line2{margin-top:18px;font:600 clamp(22px,3.4vw,42px)/1.15 var(--font-grotesk);
  letter-spacing:-.02em;color:var(--mint-200)}
.hero .sub{margin-top:22px;max-width:60ch;font-size:18px;line-height:1.7;color:var(--mint-200)}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

/* The Spine — contained full-width SVG diagram */
.spine{margin-top:clamp(44px,6vw,76px)}
.spine svg{width:100%;height:auto;display:block}
.spine .spine-path{stroke:url(#spineGrad);stroke-width:2;fill:none;stroke-linecap:round}
.spine .spine-glowpath{stroke:rgba(63,224,143,.5);stroke-width:5;fill:none;stroke-linecap:round}
.spine text{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;fill:var(--mint-400)}
.spine .term text{fill:var(--mint-200);font-size:11px}
.spine .term line{stroke:var(--mint-400);stroke-width:1.5}
.spine .stem{stroke:rgba(157,191,170,.35);stroke-width:1}
.spine .nd{fill:var(--pulse)}
.spine .halo{fill:rgba(63,224,143,.16)}
.spine-cap{display:none;font:500 10.5px var(--font-mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--mint-400);text-align:center;margin-top:14px}
@media(max-width:640px){
  .spine text{display:none}
  .spine-cap{display:block}
}

/* ====== 08 · CONSOLES (glass + porcelain) & MARQUEE ====== */
.console{background:var(--deep);border:1px solid var(--line-dark);border-radius:var(--r-panel);
  padding:24px;box-shadow:0 40px 80px -40px rgba(4,19,12,.6)}
.console-head{display:flex;justify-content:space-between;align-items:center;gap:14px;
  border-bottom:1px solid var(--line-dark);padding-bottom:16px;margin-bottom:18px}
.console-title{font:500 11px var(--font-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--mint-400)}
.live{display:inline-flex;align-items:center;gap:8px;
  font:500 10.5px var(--font-mono);letter-spacing:.2em;color:var(--pulse)}
.live i{width:8px;height:8px;border-radius:50%;background:var(--pulse);
  box-shadow:0 0 0 0 rgba(63,224,143,.6);animation:livepulse 1.9s infinite}
@keyframes livepulse{
  0%{box-shadow:0 0 0 0 rgba(63,224,143,.55)}
  70%{box-shadow:0 0 0 10px rgba(63,224,143,0)}
  100%{box-shadow:0 0 0 0 rgba(63,224,143,0)}
}
.console-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(max-width:680px){.console-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* glass console tile — NO backdrop-filter */
.tile{background:rgba(255,255,255,.05);border:1px solid var(--line-dark);
  border-radius:var(--r-tile);padding:14px}
.tile .k{font:500 10.5px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mint-400)}
.tile .v{overflow-wrap:anywhere;margin-top:7px;font:600 21px/1.1 var(--font-grotesk);letter-spacing:0;color:var(--mint-200)}
.tile .v small{font:500 11px var(--font-mono);letter-spacing:.08em;color:var(--pulse);margin-left:4px}
.tile .tick-ico{display:inline-block;vertical-align:-2px;margin-right:5px;color:var(--pulse)}
/* console rows (module media, contact console) */
.crow{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:11px 2px;border-bottom:1px solid var(--line-dark);
  font-size:13.5px;color:var(--mint-400)}
.crow:last-child{border-bottom:0}
.crow b{font:600 15px var(--font-grotesk);letter-spacing:.01em;color:var(--mint-200);text-align:right}
.cpill{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font:500 10.5px var(--font-mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--pulse);background:rgba(63,224,143,.08);border:1px solid var(--line-dark);
  border-radius:var(--r-pill);padding:6px 13px;margin-bottom:10px}
.console.mini{padding:22px;border-radius:var(--r-card)}
/* seam overlap — console hangs out of the hero into the light band below */
.console.seam{margin-bottom:-84px;position:relative;z-index:2}
/* porcelain console — light-section ICT credibility */
.porcelain{background:var(--surface);border:1px solid var(--line-light);
  border-radius:var(--r-panel);box-shadow:var(--shadow-soft);padding:28px}
.porcelain .console-head{border-color:var(--line-light)}
.porcelain .console-title{color:var(--ink-600)}
.porcelain .crow{border-color:var(--line-light);color:var(--ink-600)}
.porcelain .crow b{color:var(--ink-900)}
.porcelain .tile{background:var(--paper);border-color:var(--line-light)}
.porcelain .tile .k{color:var(--ink-600)}
.porcelain .tile .v{color:var(--ink-900)}
.porcelain .cpill{color:var(--primary-deep);background:var(--tint);border-color:var(--tint)}
/* gtext on porcelain — deep-green gradient; lightest stop --primary-deep stays AA on light tiles */
.porcelain .gtext{color:var(--primary-deep)} /* solid fallback */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .porcelain .gtext{background:linear-gradient(128deg,#075233,var(--primary-deep) 72%)}
}

/* logo marquee */
.trust{padding:84px 0 78px}
.trust--seam{padding-top:170px}
.trust-label{text-align:center;font:500 11px var(--font-mono);letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-600);margin-bottom:32px}
.marquee{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee .track{display:flex;gap:64px;width:max-content;align-items:center;
  animation:marquee 42s linear infinite}
.marquee:hover .track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.marquee .track span{font:500 14px var(--font-mono);letter-spacing:.18em;
  text-transform:uppercase;color:rgba(6,20,13,.55);white-space:nowrap}

/* ====== 09 · STATS LEDGER ====== */
.ledger-band{overflow:hidden}
.beam{position:absolute;top:0;bottom:0;left:0;width:220px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(63,224,143,.07),transparent);
  animation:beam 9s linear infinite}
@keyframes beam{from{transform:translateX(-260px)}to{transform:translateX(100vw)}}
.ledger{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(34px,4vw,52px)}
.stat{text-align:center;padding:10px 24px}
.stat+.stat{border-left:1px solid var(--line-dark)}
.stat .n{font:600 clamp(44px,5.4vw,76px)/1 var(--font-grotesk);letter-spacing:-.02em}
.stat .d{margin-top:14px;font:500 11px var(--font-mono);letter-spacing:.22em;
  text-transform:uppercase;color:var(--mint-400)}
.stat .mchips{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;min-height:76px;align-items:center}
.mchip{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:8px;
  font:600 13px var(--font-grotesk);letter-spacing:.04em;color:var(--mint-200);
  background:rgba(255,255,255,.05);border:1px solid var(--line-dark)}
.mchip i{width:6px;height:6px;border-radius:50%;background:var(--pulse);box-shadow:0 0 8px rgba(63,224,143,.6)}
@media(max-width:880px){
  .ledger{grid-template-columns:1fr 1fr;row-gap:42px}
  .stat:nth-child(3){border-left:0}
}
@media(max-width:520px){
  .ledger{grid-template-columns:1fr}
  .stat+.stat{border-left:0;border-top:1px solid var(--line-dark);padding-top:34px}
}
/* growth-ring watermark */
.rings{position:absolute;pointer-events:none;color:var(--pulse);opacity:.05}
.ledger-band .rings{right:-110px;top:50%;transform:translateY(-50%);width:480px}

/* ====== 10 · SCENARIO CARDS · DOT STRIP · STACK CHIPS ====== */
/* 8-dot service strip — fixed order: Voice Net Wi-Fi CCTV POS Signage Cabling IT */
.dotstrip{display:flex;gap:8px;align-items:center}
.dot{flex:none;width:10px;height:10px;border-radius:50%;display:inline-block;
  border:1px solid var(--line-light);background:transparent}
.dark .dot,.console .dot{border-color:rgba(157,191,170,.4)}
.dot.lit{background:var(--pulse);border-color:transparent;box-shadow:0 0 12px rgba(63,224,143,.45)}

/* labelled strip (subpage heroes) */
.servicestrip{display:flex;flex-wrap:wrap;gap:18px 22px;margin-top:30px}
.snode{display:flex;flex-direction:column;align-items:center;gap:7px}
.snode b{font:500 9.5px var(--font-mono);font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mint-400);opacity:.6}
.snode.lit b{color:var(--mint-200);opacity:1}

/* stack chip row — identical order on every card, the "one platform" tell */
.stackrow{display:flex;flex-wrap:wrap;gap:6px}
.schip{font:500 10px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;
  padding:4px 8px;border-radius:4px;border:1px solid var(--line-light);color:rgba(6,20,13,.3)}
.schip.lead{color:var(--primary-deep);background:var(--tint);border-color:var(--tint)}

.scards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:1020px){.scards{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.scards{grid-template-columns:1fr}}
.scard{position:relative;display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line-light);border-radius:var(--r-card);padding:26px 24px;
  transition:transform .25s,box-shadow .25s}
.scard::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,var(--primary),var(--pulse));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;opacity:0;transition:opacity .25s;pointer-events:none}
.scard:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}
.scard:hover::before{opacity:1}
.scard:hover .dot.lit{box-shadow:0 0 14px rgba(63,224,143,.6)}
.scard .glyph{position:absolute;top:20px;right:20px;width:58px;opacity:.08;color:var(--ink-900)}
.scard .dotstrip{margin-bottom:18px}
.scard h3{font-size:19px;margin-bottom:8px;padding-right:56px}
.scard p{font-size:15px;line-height:1.6;color:var(--ink-600)}
.scard .stackrow{margin-top:auto;padding-top:18px}
.scard-tag{display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  font:500 10px var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-600)}
.scard-tag.link{color:var(--primary-deep)}
.scard-tag .arr{transition:transform .2s}
.scard:hover .scard-tag .arr{transform:translateX(4px)}

/* generic light cards (subpage capability grids) */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cards.g2{grid-template-columns:repeat(2,1fr)}
.cards.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1020px){.cards,.cards.g4{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.cards,.cards.g2,.cards.g4{grid-template-columns:1fr}}
.card{display:block;background:var(--surface);border:1px solid var(--line-light);
  border-radius:var(--r-card);padding:26px;transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}
.card-ico{width:44px;height:44px;border-radius:12px;background:var(--tint);
  color:var(--primary-deep);display:grid;place-items:center;margin-bottom:18px}
.card h3{font-size:18px;margin-bottom:8px}
.card p{font-size:15px;line-height:1.6;color:var(--ink-600)}

/* ====== 11 · TESTIMONIALS ====== */
.tcards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:920px){.tcards{grid-template-columns:1fr}}
.tcard{position:relative;background:var(--surface);border:1px solid var(--line-light);
  border-radius:var(--r-card);padding:30px 28px;overflow:hidden}
.tcard::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--primary),var(--pulse))}
.tcard .qm{font:600 54px/0.6 var(--font-grotesk);display:block;margin-bottom:18px}
.tcard blockquote{font:italic 500 19px/1.55 var(--font-display);color:var(--ink-900)}
.tcard .who{display:flex;align-items:center;gap:14px;margin-top:24px}
.av{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--pulse))}
.av i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--surface);font:600 13px var(--font-grotesk);font-style:normal;color:var(--primary-deep)}
.who-meta b{display:block;font:600 14px var(--font-body);color:var(--ink-900)}
.who-meta span{font:500 11px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-600)}

/* ====== 12 · BEFORE/AFTER ROI BAND ====== */
.roi{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:clamp(34px,4vw,50px)}
.roi-item+.roi-item{border-left:1px solid var(--line-dark);padding-left:28px}
.roi-item .lbl{font:500 10.5px var(--font-mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--mint-400)}
.roi-vals{display:flex;align-items:center;gap:12px;margin-top:14px}
.from{font:500 17px var(--font-grotesk);color:var(--mint-400);
  text-decoration:line-through;text-decoration-color:rgba(157,191,170,.6)}
.to{font:600 30px/1 var(--font-grotesk);letter-spacing:-.01em}
.roi-arrow{position:relative;flex:none;width:34px;height:1px;
  background:linear-gradient(90deg,var(--primary-deep),var(--pulse))}
.roi-arrow::after{content:"";position:absolute;right:-2px;top:-3px;width:7px;height:7px;
  border-radius:50%;background:var(--pulse);box-shadow:0 0 8px rgba(63,224,143,.6)}
@media(max-width:880px){
  .roi{grid-template-columns:1fr 1fr;row-gap:36px}
  .roi-item:nth-child(3){border-left:0;padding-left:0}
}
@media(max-width:520px){
  .roi{grid-template-columns:1fr}
  .roi-item+.roi-item{border-left:0;padding-left:0;border-top:1px solid var(--line-dark);padding-top:28px}
}

/* ====== 13 · FLAGSHIP CASE + DELIVERY-SPINE TIMELINE ====== */
.flagship-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,72px);align-items:center}
@media(max-width:880px){.flagship-grid{grid-template-columns:1fr}}
.flagship-tag{font:500 11px var(--font-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--spark)}
.standfirst{margin-top:20px;font-size:18px;line-height:1.7;color:var(--mint-200)}
.schematic{color:var(--mint-400)}
.schematic svg{width:100%;height:auto}
.schematic .gn{fill:var(--pulse)}
.schematic .gh{fill:rgba(63,224,143,.18)}
.tl-wrap{margin-top:clamp(48px,6vw,84px);padding-top:clamp(36px,5vw,56px);border-top:1px solid var(--line-dark)}

/* horizontal delivery-spine timeline */
.tl{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.tl::before{content:"";position:absolute;top:5px;left:8.33%;right:8.33%;height:1px;
  background:linear-gradient(90deg,var(--primary-deep),var(--pulse))}
.tl-step{position:relative;text-align:center;padding-top:24px}
.tl-step::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:11px;height:11px;border-radius:50%;background:var(--pulse);box-shadow:var(--glow-pulse)}
.tl-step b{display:block;font:500 11px var(--font-mono);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mint-200)}
.tl-step span{display:block;margin-top:5px;font-size:12.5px;line-height:1.5;color:var(--mint-400)}
.tl-caption{margin-top:26px;text-align:center;
  font:italic 500 19px var(--font-display);color:var(--mint-200)}
@media(max-width:760px){
  .tl{grid-template-columns:repeat(3,1fr);row-gap:30px}
  .tl::before{display:none}
}
/* light variant (subpage onboarding / how-we-deliver) */
.tl.on-light::before{background:linear-gradient(90deg,var(--primary-deep),var(--primary))}
.tl.on-light .tl-step b{color:var(--ink-900)}
.tl.on-light .tl-step span{color:var(--ink-600)}
.tl.on-light+.tl-caption,.tl-caption.on-light{color:var(--ink-900)}

/* ====== 14 · SPLIT · COVERAGE · TICKS · STATE CHIPS ====== */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,72px);align-items:center}
@media(max-width:880px){.split{grid-template-columns:1fr}}

.coverage{background:var(--surface);border:1px solid var(--line-light);
  border-radius:var(--r-panel);box-shadow:var(--shadow-soft);padding:34px}
.coverage h3{margin-top:14px;font-size:24px}
.coverage .statechips{margin-top:24px}
.coverage-note{margin-top:18px;font:500 10.5px var(--font-mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-600)}

/* tick list — spark check on a pine node (AA-safe on light) */
.ticks{display:grid;gap:12px}
.ticks li{position:relative;padding-left:32px;font-size:16px;line-height:1.55}
.ticks li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;
  border-radius:50%;background-color:var(--pine);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23B7F04C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position:center;background-repeat:no-repeat;background-size:13px}
.ticks.sm li{font-size:15px;padding-left:30px}
.ticks.sm li::before{width:19px;height:19px;background-size:12px}

/* two-grade state chips — the guardrail component.
   Delivered: VIC NSW WA NZ (solid, lit dot). QLD/SA: .capability ONLY. */
.statechips{display:flex;flex-wrap:wrap;gap:10px}
.chip-state{display:inline-flex;align-items:center;gap:9px;padding:10px 18px;
  border-radius:var(--r-pill);font:600 13.5px/1 var(--font-grotesk);letter-spacing:.05em;
  background:var(--tint);color:var(--ink-900);border:1px solid rgba(10,122,75,.14)}
.chip-state .cdot{width:7px;height:7px;border-radius:50%;background:var(--pulse);
  box-shadow:0 0 9px rgba(63,224,143,.65)}
.chip-state.capability{background:transparent;border:1px dashed rgba(81,99,90,.45);
  color:var(--ink-600)}
.chip-state.capability em{font:500 8.5px var(--font-mono);letter-spacing:.16em;
  text-transform:uppercase;font-style:normal;margin-left:2px}
.statechips--dark .chip-state{background:rgba(255,255,255,.05);
  border:1px solid var(--line-dark);color:var(--mint-200)}
.statechips--dark .chip-state.capability{background:transparent;
  border:1px dashed rgba(157,191,170,.5);color:var(--mint-400)}

.confnote{margin:22px auto 0;max-width:720px;font:400 13px/1.7 var(--font-mono);letter-spacing:.01em;color:var(--ink-600);text-align:center}

/* ====== 15 · FAQ ====== */
.faq{max-width:840px;margin:clamp(36px,5vw,52px) auto 0}
.faq details{border-bottom:1px solid var(--line-light)}
.faq details:first-child{border-top:1px solid var(--line-light)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:21px 4px;cursor:pointer;list-style:none;
  font:600 17px/1.4 var(--font-body);color:var(--ink-900)}
.faq summary::-webkit-details-marker{display:none}
.faq .plus{flex:none;width:22px;height:22px;color:var(--primary-deep);transition:transform .25s}
.faq details[open] .plus{transform:rotate(45deg)}
.faq .faq-body{padding:0 4px 24px;max-width:64ch}
.faq .faq-body p{font-size:15.5px;line-height:1.65;color:var(--ink-600)}
.faq .faq-body p+p{margin-top:10px}

/* ====== 16 · GREENHOUSE TERMINAL CTA ====== */
.terminal{position:relative;overflow:hidden;border-radius:var(--r-cta);
  padding:clamp(60px,8vw,104px) clamp(26px,6vw,88px);text-align:center;color:var(--mint-200);
  background:linear-gradient(126deg,var(--primary-deep) -22%,var(--abyss) 52%,#062418 118%);
  background-size:170% 170%;animation:pan 18s ease-in-out infinite alternate}
@keyframes pan{from{background-position:0% 0%}to{background-position:100% 100%}}
.terminal::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(620px 320px at 50% -8%,var(--aur2),transparent 65%),
    radial-gradient(520px 300px at 88% 108%,var(--aur3),transparent 65%)}
.terminal::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;background:var(--grain)}
.terminal>*{position:relative;z-index:1}
.terminal>.converge{position:absolute;z-index:0;left:50%;top:46%;
  transform:translate(-50%,-50%);width:min(620px,86%);opacity:.5;pointer-events:none}
.terminal h2{color:#F4FBF6;max-width:16ch;margin:18px auto 0}
.terminal .lede{max-width:52ch;margin:18px auto 0;font-size:17px;color:var(--mint-200)}
.terminal .btn{margin-top:32px}
.microline{margin-top:24px;font:500 12px var(--font-mono);letter-spacing:.22em;
  text-transform:uppercase;color:var(--mint-400)}
.terminal .statechips{justify-content:center;margin-top:28px}

/* ====== 17 · FOOTER ====== */
footer.dark{padding:clamp(64px,8vw,92px) 0 34px;overflow:hidden}
.f-hairline{height:1px;background:linear-gradient(90deg,transparent,var(--primary) 32%,var(--pulse) 58%,transparent)}
footer .rings{right:-130px;bottom:-180px;width:520px;opacity:.04}
.fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:40px}
@media(max-width:880px){.fcols{grid-template-columns:1fr 1fr;gap:36px}}
@media(max-width:520px){.fcols{grid-template-columns:1fr}}
.fbrand .logo{height:34px;width:auto;filter:brightness(0) invert(1)}
.fbrand .glyph{width:64px;color:var(--pulse);opacity:.7;margin-top:22px}
.fbrand p{margin-top:18px;max-width:280px;font-size:14.5px;line-height:1.65;color:var(--mint-400)}
.fid{margin-top:16px;font:400 12px/2 var(--font-mono);letter-spacing:.06em;color:var(--mint-400)}
footer h5{font:500 11px var(--font-mono);font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mint-400)}
footer h5+.node-rule{margin-bottom:18px;background:linear-gradient(90deg,rgba(157,191,170,.4),var(--pulse) 82%,transparent)}
footer .fcol a{display:block;font-size:14.5px;color:var(--mint-200);padding:5px 0;transition:color .2s}
footer .fcol a:hover{color:var(--haze)}
footer .fcol p{font-size:14.5px;color:var(--mint-200);padding:5px 0;line-height:1.6}
.fbottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  margin-top:clamp(40px,5vw,56px);padding-top:24px;border-top:1px solid var(--line-dark)}
.fbottom .legal{font:400 12px var(--font-mono);letter-spacing:.08em;color:var(--mint-400)}
.signoff{font:italic 500 19px var(--font-display);color:var(--mint-200)}

/* ====== 18 · SUBPAGE KIT ====== */
/* page hero — 44–52vh dark band, page hue, softer dose */
.pagehero{display:flex;align-items:center;min-height:46vh;padding:clamp(56px,7vw,84px) 0 clamp(56px,7vw,88px)}
.pagehero-grid{display:grid;grid-template-columns:1fr 230px;gap:clamp(36px,5vw,64px);align-items:center;width:100%}
@media(max-width:959px){.pagehero-grid{grid-template-columns:1fr}}
.pagehero h1{font-weight:560;font-size:clamp(38px,5vw,64px);line-height:1.02;
  letter-spacing:-.02em;color:#F4FBF6;margin-top:22px;max-width:18ch}
.pagehero .sub{margin-top:20px;max-width:58ch;font-size:17.5px;line-height:1.7;color:var(--mint-200)}
.crumbs{font:500 11px var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mint-400)}
.crumbs a{transition:color .2s}
.crumbs a:hover{color:var(--haze)}
.crumbs .sep{margin:0 9px;opacity:.5}

/* stem locator — desktop-only right rail of sibling pages */
.stemloc{display:none}
@media(min-width:960px){
  .stemloc{display:block;position:relative;padding-left:26px}
  .stemloc::before{content:"";position:absolute;left:4px;top:30px;bottom:10px;width:1px;
    background:linear-gradient(180deg,var(--primary-deep),var(--pulse));opacity:.55}
  .sl-label{font:500 10px var(--font-mono);letter-spacing:.22em;text-transform:uppercase;
    color:var(--mint-400);margin-bottom:16px}
  .stemloc a{position:relative;display:block;padding:8px 0;
    font:500 11px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;
    color:var(--mint-400);transition:color .2s}
  .stemloc a::before{content:"";position:absolute;left:-26px;top:50%;margin-top:-4.5px;
    width:9px;height:9px;border-radius:50%;border:1px solid var(--mint-400);background:var(--abyss)}
  .stemloc a:hover{color:var(--haze)}
  .stemloc a.current{color:var(--mint-200)}
  .stemloc a.current::before{background:var(--pulse);border-color:transparent;box-shadow:var(--glow-pulse)}
}

/* long-form prose — clearings only */
.prose{max-width:68ch;font-size:17px;line-height:1.7;color:var(--ink-900)}
.prose p+p{margin-top:1.1em}
.prose h3{margin:1.7em 0 .6em}
.prose ul{margin:1.1em 0;padding-left:1.25em;list-style:disc}
.prose li{margin:.45em 0;color:var(--ink-600)}
.prose li::marker{color:var(--primary-deep)}
.prose a{color:var(--primary-deep);text-decoration:underline;text-underline-offset:3px}
.prose .lead{font-size:19px;color:var(--ink-600)}

/* dark callout — few lines max (Clearing Rule) */
.callout .wrap{max-width:900px;text-align:center}
.pullquote{font:italic 500 clamp(22px,3vw,30px)/1.45 var(--font-display);color:#F2FAF4}
.pullquote-who{margin-top:20px;font:500 11px var(--font-mono);letter-spacing:.22em;
  text-transform:uppercase;color:var(--mint-400)}

/* contact block (about.html) */
.contact-split{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
@media(max-width:880px){.contact-split{grid-template-columns:1fr}}
.contact-card{background:var(--surface);border:1px solid var(--line-light);
  border-radius:var(--r-panel);box-shadow:var(--shadow-soft);padding:36px}
.contact-card h3{margin-top:14px}
.contact-card address{font-style:normal;margin-top:18px;font-size:16px;line-height:1.8;color:var(--ink-600)}
.contact-card .pin{display:inline-grid;place-items:center;width:44px;height:44px;
  border-radius:12px;background:var(--tint);color:var(--primary-deep)}
.contact-console{background:var(--deep);border:1px solid var(--line-dark);
  border-radius:var(--r-panel);padding:36px;color:var(--mint-200)}
.contact-console .crow{font:500 13px var(--font-mono);letter-spacing:.06em;padding:14px 2px}
.contact-console .crow b{font:600 16px var(--font-grotesk)}
.dotp{flex:none;width:7px;height:7px;border-radius:50%;background:var(--pulse);
  box-shadow:0 0 8px rgba(63,224,143,.6)}

/* growth-ring diagram (about.html centrepiece) */
.rings-diagram{max-width:560px;margin:0 auto;color:var(--primary-deep)}
.rings-diagram svg{width:100%;height:auto}
.rings-diagram text{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;fill:var(--ink-600)}
.rings-diagram .core-label{font-family:var(--font-grotesk);font-size:13px;letter-spacing:.02em;fill:var(--ink-900);font-weight:600}

/* ====== 19 · FEATURE MODULES ====== */
.modules{display:grid;gap:clamp(48px,6vw,76px);margin-top:clamp(42px,5vw,64px)}
.module{display:grid;grid-template-columns:56px 1fr 1fr;gap:clamp(28px,4vw,52px);align-items:center}
.module:nth-of-type(even) .m-media{order:2}
.module:nth-of-type(even) .m-copy{order:3}
.m-rail{position:relative;align-self:stretch}
.m-rail::before{content:"";position:absolute;left:50%;top:-12px;bottom:-12px;width:1px;
  background:linear-gradient(180deg,transparent,var(--primary) 30%,var(--pulse) 70%,transparent);opacity:.45}
.m-node{position:relative;display:grid;place-items:center;width:52px;height:52px;margin:0 auto;
  border-radius:50%;background:var(--pine);color:var(--pulse);border:1px solid rgba(63,224,143,.25)}
.m-eyebrow{font:500 11px var(--font-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--primary-deep)}
.m-copy h3{margin-top:12px}
.m-copy>p{margin-top:12px;font-size:16.5px;line-height:1.65;color:var(--ink-600)}
.m-copy .ticks{margin-top:18px}
.m-link{margin-top:22px}
@media(max-width:959px){
  .module{grid-template-columns:1fr;gap:24px}
  .module:nth-of-type(even) .m-media{order:0}
  .module:nth-of-type(even) .m-copy{order:0}
  .m-rail{align-self:start}
  .m-rail::before{display:none}
  .m-node{margin:0}
}

/* ====== 20 · PREVIEW BADGE ====== */
.pvbadge{position:fixed;left:16px;bottom:16px;z-index:99;
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(8,35,21,.92);border:1px solid var(--pine);border-radius:var(--r-pill);
  padding:8px 15px;font:500 10.5px var(--font-mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--mint-400);box-shadow:var(--shadow-soft)}
.pvbadge b{color:var(--pulse);font-weight:500}

/* ====== 21 · MOTION ====== */
/* scroll reveal — hidden ONLY when JS is present (html.js) */
html.js .reveal{opacity:0;transform:translateY(24px);
  transition:opacity .65s cubic-bezier(.22,.61,.21,1),transform .65s cubic-bezier(.22,.61,.21,1);
  transition-delay:var(--rd,0s)}
html.js .reveal.in{opacity:1;transform:none}
.d1{--rd:.06s}.d2{--rd:.12s}.d3{--rd:.18s}.d4{--rd:.24s}.d5{--rd:.3s}.d6{--rd:.36s}.d7{--rd:.42s}.d8{--rd:.48s}

/* spine draw — paths carry pathLength="1"; complete by default, JS rewinds */
html.js .spine .drawpath{stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1) .15s}
html.js .spine.in .drawpath{stroke-dashoffset:0}
html.js .spine .node,html.js .spine .term{opacity:0;
  transition:opacity .5s ease calc(.7s + var(--i,0)*80ms)}
html.js .spine.in .node,html.js .spine.in .term{opacity:1}

/* ====== 22 · REDUCED MOTION & PRINT ====== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  html.js .reveal{opacity:1!important;transform:none!important}
  html.js .spine .drawpath{stroke-dashoffset:0!important}
  html.js .spine .node,html.js .spine .term{opacity:1!important}
  .aurora,.beam{display:none!important}
  .marquee .track{animation:none!important;width:auto;flex-wrap:wrap;justify-content:center}
}
@media print{
  .pvbadge,.promo,.ubar,.search,.nav-toggle,.aurora-clip,.beam,.marquee{display:none!important}
  .dark,.terminal,.mbar,footer.dark{background:#fff!important;color:#000!important}
  .dark::before,.dark::after,.terminal::before,.terminal::after{display:none!important}
  .dark h1,.dark h2,.dark h3,.dark p,.terminal h2{color:#000!important}
  html.js .reveal{opacity:1!important;transform:none!important}
}

/* ====== ZH TYPOGRAPHY (2026-07-05) — zh-Hans mirror pages ====== */
html[lang="zh-Hans"] body{font-family:'Inter','Noto Sans SC','PingFang SC','Microsoft YaHei',Roboto,sans-serif}
html[lang="zh-Hans"] h1,html[lang="zh-Hans"] h2{letter-spacing:0}
html[lang="zh-Hans"] h1,html[lang="zh-Hans"] h2,html[lang="zh-Hans"] .pullquote,html[lang="zh-Hans"] .signoff,html[lang="zh-Hans"] .tl-caption{font-family:'Fraunces','Noto Serif SC','Songti SC',serif}
html[lang="zh-Hans"] h3,html[lang="zh-Hans"] h4,html[lang="zh-Hans"] h5,html[lang="zh-Hans"] .btn{font-family:'Space Grotesk','Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif}

/* ====== ANZ WORLDLINE PRODUCT SHOTS (2026-07-21) ====== */
.prodcard img{width:100%;height:160px;object-fit:cover;border-radius:10px;margin-bottom:16px}
.anz-mark{height:30px;width:auto;margin-top:18px}
.edgeshot{width:100%;border-radius:var(--r-card);box-shadow:var(--shadow-soft)}

/* ====== PI OS — NEED/ANSWER LEDGER (2026-09-01) ====== */
.pios-matrix{border:1px solid var(--line-light);border-radius:var(--r-card);overflow:hidden;background:var(--surface)}
.pios-head,.pios-row{display:grid;grid-template-columns:5fr 7fr}
.pios-head{background:var(--mist);font-family:var(--font-mono);font-weight:500;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--primary-deep)}
.pios-head span{padding:13px 24px}
.pios-head span+span{border-left:1px solid var(--line-light)}
.pios-row{border-top:1px solid var(--line-light)}
.pios-row .need{padding:20px 24px;font-weight:600;font-size:15.5px;line-height:1.5;color:var(--ink-900)}
.pios-row .resp{padding:20px 24px;border-left:1px solid var(--line-light);font-size:15px;line-height:1.6;color:var(--ink-600)}
@media(max-width:760px){
  .pios-head{display:none}
  .pios-row{grid-template-columns:1fr}
  .pios-row .need{padding-bottom:6px}
  .pios-row .resp{border-left:0;padding-top:0}
}

/* ===== 2026-11 · AI pillars, payment band, Customer Centre, PI Assistant ===== */
.hero-rate{margin-top:10px;font:600 clamp(18px,2.2vw,26px)/1.2 var(--font-grotesk);color:var(--spark);letter-spacing:-.01em}
.ai4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:40px}
@media(max-width:1020px){.ai4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.ai4{grid-template-columns:1fr}}
.ai4 .pillar{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--line-light);border-top:3px solid var(--primary);border-radius:var(--r-card);padding:26px;color:var(--ink-900);text-decoration:none;transition:transform .25s,box-shadow .25s}
.ai4 .pillar:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft)}
.ai4 .ptop{display:flex;justify-content:space-between;align-items:center}
.ai4 .pico{width:48px;height:48px;border-radius:12px;background:var(--tint);color:var(--primary-deep);display:flex;align-items:center;justify-content:center}
.aitag{font:500 11px/1 var(--font-mono);letter-spacing:.18em;padding:6px 9px;border-radius:var(--r-pill);background:var(--pine);color:var(--pulse)}
.ai4 h3{font:600 24px/1.15 var(--font-grotesk);letter-spacing:-.01em;margin:4px 0 0}
.ai4 .plead{font:600 16px/1.35 var(--font-grotesk);color:var(--primary-deep);margin:0}
.ai4 p{margin:0;font-size:15.5px;color:var(--ink-600)}
.ai4 ul{list-style:none;margin:auto 0 0;padding:12px 0 0;border-top:1px solid var(--line-light);display:flex;flex-direction:column;gap:6px;font-size:14.5px}
.ai4 li{display:flex;gap:8px;align-items:flex-start}
.ai4 li::before{content:"";flex:0 0 7px;height:7px;margin-top:9px;border-radius:50%;background:var(--primary)}
.payband{margin-top:22px;border-radius:var(--r-panel);background:var(--deep);color:var(--mint-200);padding:clamp(28px,4vw,52px);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:center}
@media(max-width:920px){.payband{grid-template-columns:1fr}}
.payband h3{font-family:var(--font-display);font-weight:540;font-size:clamp(30px,3.6vw,46px);line-height:1.05;letter-spacing:-.02em;color:#fff;margin:0}
.payband p{margin:14px 0 0;max-width:560px}
.payband .pchips{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:20px;font:600 15px/1.3 var(--font-grotesk);color:#fff}
.payband .pchips span::before{content:"\2713\00a0";color:var(--spark)}
.payband .actions{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px}
.howto{background:var(--surface);color:var(--ink-900);border-radius:var(--r-card);padding:24px 26px}
.howto b.t{font:600 19px/1.2 var(--font-grotesk)}
.howto ol{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:14px;counter-reset:s}
.howto li{display:flex;gap:14px;counter-increment:s}
.howto li::before{content:counter(s);flex:0 0 30px;height:30px;border-radius:50%;background:var(--primary-deep);color:#fff;font:600 14px/30px var(--font-grotesk);text-align:center}
.howto small{display:block;color:var(--ink-600);font-size:14px}
.login-card{background:var(--surface);color:var(--ink-900);border-radius:var(--r-panel);padding:30px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);align-self:center}
.login-card h2{font:600 24px/1.2 var(--font-grotesk);color:var(--ink-900);margin:0}
.login-card p{margin:6px 0 18px;font-size:15px;color:var(--ink-600)}
.login-card .btn{width:100%;margin-top:14px}
.login-card .row2{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:12px;font-size:14px}
.login-card .new{margin-top:20px;padding-top:16px;border-top:1px solid var(--line-light);font-size:14px;color:var(--ink-600)}
.btn-outline{border-color:var(--primary-deep);color:var(--primary-deep);background:transparent}
.cc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:36px}
@media(max-width:920px){.cc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.cc-grid{grid-template-columns:1fr}}
.cc-card{display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--line-light);border-radius:var(--r-card);padding:24px;color:var(--ink-900);text-decoration:none;transition:transform .25s,box-shadow .25s}
.cc-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft)}
.cc-card.hl{border-top:3px solid var(--primary)}
.cc-card.soft{background:var(--tint);border-color:transparent}
.cc-card h3{font:600 19px/1.25 var(--font-grotesk);margin:2px 0 0}
.cc-card p{margin:0;font-size:15px;color:var(--ink-600)}
.cc-card .go{margin-top:auto;padding-top:6px;font:600 15px var(--font-grotesk);color:var(--primary-deep)}
.cc-card .k{font:500 11px/1.4 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--primary-deep)}
.fld{display:flex;flex-direction:column;gap:6px;font:600 14px/1.3 var(--font-grotesk);color:var(--ink-900);min-width:0}
.fld input,.fld select,.fld textarea{min-height:46px;padding:0 12px;border:1px solid #C6D6CB;border-radius:10px;font:400 15.5px/1.4 var(--font-body);background:#fff;color:var(--ink-900);width:100%;box-sizing:border-box}
.fld textarea{padding:10px 12px;min-height:96px;resize:vertical}
.frow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.frow.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:680px){.frow,.frow.three{grid-template-columns:1fr}}
.fsec{padding:26px 0;border-top:1px solid var(--line-light);display:flex;flex-direction:column;gap:16px}
.fsec h3{display:flex;gap:12px;align-items:baseline;font:600 20px/1.2 var(--font-grotesk);margin:0}
.fsec h3 .n{font:500 13px/1 var(--font-mono);color:var(--primary-deep)}
.chks{display:flex;flex-wrap:wrap;gap:8px}
.chk{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--line-light);border-radius:var(--r-pill);background:#fff;font-size:15px;cursor:pointer}
.chkline{display:flex;align-items:center;gap:10px;min-height:44px;font-size:15px}
.upload{display:flex;align-items:center;gap:12px;min-height:60px;padding:0 16px;border:1.5px dashed var(--mint-400);border-radius:12px;color:var(--primary-deep);font:600 15px var(--font-grotesk);cursor:pointer;position:relative}
.upload input{position:absolute;opacity:0;width:1px;height:1px}
.notice{padding:14px 16px;border-radius:12px;background:var(--tint);color:var(--pine);font-size:15px}
.fwrap{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;align-items:start}
@media(max-width:920px){.fwrap{grid-template-columns:1fr}}
.ftabs{display:flex;flex-direction:column;gap:8px}
@media(max-width:920px){.ftabs{flex-direction:row;flex-wrap:wrap}}
@media(max-width:560px){.ftabs button{flex:1 1 100%}}
.ftabs button{text-align:left;min-height:62px;padding:10px 16px;border-radius:12px;border:1px solid var(--line-light);background:#fff;color:var(--ink-900);font:600 15px/1.3 var(--font-grotesk);cursor:pointer}
.ftabs button small{display:block;font:400 13px var(--font-body);color:var(--ink-600)}
.ftabs button[aria-selected="true"]{background:var(--pine);border-color:var(--pine);color:#fff}
.ftabs button[aria-selected="true"] small{color:var(--mint-200)}
.ftabs .olabel{margin-top:12px;font:500 11px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-600)}
.ftabs a{min-height:40px;display:flex;align-items:center;padding:0 16px;color:var(--ink-900)}
.fpanel{background:#fff;border:1px solid var(--line-light);border-radius:var(--r-panel);padding:clamp(22px,3vw,40px)}
.fpanel h2{font:600 28px/1.15 var(--font-grotesk);margin:0}
.fpanel>p{color:var(--ink-600);margin:6px 0 0}
.factions{padding-top:20px;border-top:1px solid var(--line-light);display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end;align-items:center}
.fdone{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.fdone .ok{width:52px;height:52px;border-radius:50%;background:var(--tint);color:var(--primary-deep);display:flex;align-items:center;justify-content:center;font-size:26px}
[hidden]{display:none !important}
.tfilter{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.tfilter button{min-height:44px;padding:0 16px;border-radius:var(--r-pill);border:1px solid rgba(157,191,170,.45);background:transparent;color:var(--mint-200);font:600 14.5px var(--font-grotesk);cursor:pointer}
.tfilter button[aria-pressed="true"]{background:var(--pulse);border-color:var(--pulse);color:var(--abyss)}
.twrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start}
@media(max-width:960px){.twrap{grid-template-columns:1fr}}
.tgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(max-width:640px){.tgrid{grid-template-columns:1fr}}
.ttype{font:500 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;padding:5px 9px;border-radius:var(--r-pill);background:var(--tint);color:var(--primary-deep);align-self:flex-start}
.side{display:flex;flex-direction:column;gap:18px}
.sidebox{background:#fff;border:1px solid var(--line-light);border-radius:var(--r-card);padding:22px}
.sidebox.dk{background:var(--pine);border-color:var(--pine);color:var(--mint-200)}
.sidebox h3{font:600 20px/1.2 var(--font-grotesk);margin:0}
.sidebox.dk h3{color:#fff}
.sidebox .btn{width:100%;margin-top:16px}
.sidebox a.dl{display:flex;justify-content:space-between;gap:10px;min-height:44px;align-items:center;border-bottom:1px solid var(--line-light);color:var(--ink-900)}
.steps{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;counter-reset:s}
.steps li{display:flex;gap:12px;counter-increment:s;font-size:15px}
.steps li::before{content:counter(s);flex:0 0 28px;height:28px;border-radius:50%;background:var(--pine);color:#fff;font:600 13px/28px var(--font-grotesk);text-align:center}
.steps small{display:block;color:var(--ink-600);font-size:13.5px}
.demo-tag{display:inline-block;font:500 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;border-radius:var(--r-pill);background:rgba(183,240,76,.16);color:var(--spark);margin-bottom:14px}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media(max-width:920px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi{background:#fff;border:1px solid var(--line-light);border-radius:var(--r-card);padding:16px 18px}
.kpi small{display:block;color:var(--ink-600);font-size:13px}
.kpi b{display:block;font:600 28px/1.2 var(--font-grotesk)}
.alertbar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;padding:14px 18px;border-radius:12px;background:#FDF4EA;border:1px solid #F0D3B2;margin:20px 0}
.alertbar i{width:10px;height:10px;border-radius:50%;background:#D9822B}
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}
@media(max-width:920px){.pgrid{grid-template-columns:1fr}}
.panel{background:#fff;border:1px solid var(--line-light);border-radius:var(--r-card);overflow:hidden}
.panel h3{font:600 19px/1.2 var(--font-grotesk);margin:0;padding:16px 20px;border-bottom:1px solid var(--line-light);display:flex;justify-content:space-between;gap:10px}
.panel h3 a{font:600 14px var(--font-body)}
.panel .pb{padding:16px 20px}
.tscroll{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px}
.tbl th{text-align:left;font:600 12.5px var(--font-body);color:var(--ink-600);padding:10px 20px;background:var(--paper)}
.tbl td{padding:12px 20px;border-top:1px solid var(--line-light)}
.st{display:inline-flex;align-items:center;gap:8px}
.st::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--primary)}
.st.warn::before{background:#D9822B}
.rowi{display:flex;justify-content:space-between;gap:12px;padding:12px 20px;border-top:1px solid var(--line-light)}
.rowi:first-child{border-top:0}
.rowi small{display:block;color:var(--ink-600);font-size:13px}
.pill{font-size:12.5px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--tint);color:var(--primary-deep);white-space:nowrap;align-self:flex-start}
.pill.warn{background:#F6E3CF;color:#7A4210}
.bar{height:8px;border-radius:4px;background:var(--line-light);overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;background:var(--primary)}
/* PI Assistant floating widget */
.pia-launch{position:fixed;right:22px;bottom:22px;z-index:900;display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:0 22px 0 8px;border-radius:999px;border:0;background:var(--pine);color:#fff;font:600 15.5px var(--font-grotesk);cursor:pointer;box-shadow:0 12px 30px rgba(4,19,12,.35)}
.pia-launch .ic{width:40px;height:40px;border-radius:50%;background:var(--pulse);color:var(--abyss);display:flex;align-items:center;justify-content:center}
.pia-launch[aria-expanded="true"]{display:none}
.pia-panel{position:fixed;right:22px;bottom:22px;z-index:901;padding:0;width:400px;max-width:calc(100vw - 24px);height:min(680px,calc(100vh - 44px));background:#fff;border-radius:20px;box-shadow:0 24px 60px rgba(4,19,12,.35);display:flex;flex-direction:column;overflow:hidden;font:400 15px/1.5 var(--font-body);color:var(--ink-900)}
@media(max-width:520px){.pia-panel{right:12px;bottom:12px;height:calc(100vh - 24px)}.pia-launch span.t{display:none}.pia-launch{padding:0 8px}}
.pia-head{background:var(--deep);color:#fff;padding:14px 12px 12px 16px;display:flex;align-items:center;gap:12px}
.pia-av{flex:0 0 38px;height:38px;border-radius:50%;background:var(--pine);position:relative}
.pia-av::after{content:"";position:absolute;inset:9px;border-radius:50%;border:4px solid var(--pulse);border-left-color:transparent;transform:rotate(-30deg)}
.pia-head b{display:block;font:600 17px var(--font-grotesk)}
.pia-head small{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--mint-200)}
.pia-head small i{width:7px;height:7px;border-radius:50%;background:var(--pulse)}
.pia-x{margin-left:auto;width:44px;height:44px;border-radius:10px;border:0;background:transparent;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.pia-tabs{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line-light);background:var(--paper)}
.pia-tabs button{flex:1 1 0;min-height:40px;border-radius:10px;border:1px solid var(--line-light);background:#fff;color:var(--ink-900);font:600 14px var(--font-grotesk);cursor:pointer}
.pia-tabs button[aria-pressed="true"]{background:var(--pine);border-color:var(--pine);color:#fff}
.pia-chat{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.pia-log{flex:1 1 auto;min-height:0;overflow-y:auto;padding:16px 14px 8px;display:flex;flex-direction:column;gap:12px}
.pia-row{display:flex;gap:8px;align-items:flex-end}
.pia-row.me{justify-content:flex-end}
.pia-mini{flex:0 0 28px;height:28px;border-radius:50%;background:var(--deep);position:relative}
.pia-mini::after{content:"";position:absolute;inset:7px;border-radius:50%;border:3px solid var(--pulse);border-left-color:transparent}
.pia-b{max-width:300px;background:#EEF4EF;border-radius:16px 16px 16px 4px;padding:10px 14px;font-size:14.5px}
.pia-row.me .pia-b{background:var(--primary-deep);color:#fff;border-radius:16px 16px 4px 16px}
.pia-card{margin-left:36px;border:1px solid var(--line-light);border-radius:14px;overflow:hidden;background:#fff;font-size:13.5px}
.pia-card .hd{padding:9px 14px;background:var(--tint);font-weight:700;color:var(--primary-deep);font-size:13px}
.pia-card .bd{padding:10px 14px 12px;display:flex;flex-direction:column;gap:6px}
.pia-card .ttl{font:600 15.5px/1.35 var(--font-grotesk)}
.pia-card dl{display:grid;grid-template-columns:78px minmax(0,1fr);gap:3px 10px;margin:0}
.pia-card dt{color:var(--ink-600)}
.pia-card dd{margin:0}
.pia-card .note{color:var(--ink-600)}
.pia-card .demo{font-size:12px;color:#7A4210;background:#FDF4EA;border-radius:8px;padding:6px 8px}
.pia-chk{display:flex;gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--line-light)}
.pia-chk:last-child{border-bottom:0}
.pia-chk i{flex:0 0 8px;height:8px;border-radius:50%;background:var(--primary)}
.pia-chk i.w{background:#D9822B}
.pia-chk b{flex:0 0 74px}
.pia-chk span{color:var(--ink-600)}
.pia-chips{display:flex;flex-wrap:wrap;gap:6px;padding-left:36px}
.pia-chips button,.pia-card .slots button{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--mint-400);background:#fff;color:var(--primary-deep);font:600 13.5px var(--font-grotesk);cursor:pointer}
.pia-chips button[aria-pressed="true"],.pia-card .slots button[aria-pressed="true"]{background:var(--primary-deep);border-color:var(--primary-deep);color:#fff}
.pia-chips button.go{background:var(--deep);border-color:var(--deep);color:#fff}
.pia-card .slots{display:flex;flex-wrap:wrap;gap:6px}
.pia-card .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.pia-card .acts a{display:inline-flex;align-items:center;min-height:38px;padding:0 12px;border-radius:10px;background:var(--primary-deep);color:#fff;font-weight:600;text-decoration:none}
.pia-dots span{display:inline-block;width:7px;height:7px;margin-right:4px;border-radius:50%;background:var(--primary-deep);animation:piaBlink 1.2s infinite}
.pia-dots span:nth-child(2){animation-delay:.2s}.pia-dots span:nth-child(3){animation-delay:.4s}
@keyframes piaBlink{0%,80%,100%{opacity:.25}40%{opacity:1}}
@media (prefers-reduced-motion:reduce){.pia-dots span{animation:none}}
.pia-in{border-top:1px solid var(--line-light);padding:10px 12px;display:flex;gap:8px}
.pia-in input{flex:1 1 auto;min-width:0;min-height:44px;padding:0 14px;border:1px solid #C6D6CB;border-radius:12px;font:inherit}
.pia-send{flex:0 0 44px;height:44px;border-radius:12px;border:0;background:var(--primary-deep);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.pia-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pia-form{flex:1 1 auto;min-height:0;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.pia-form .fld input,.pia-form .fld select,.pia-form .fld textarea{min-height:42px;font-size:14.5px}
.pia-form .types{display:flex;flex-wrap:wrap;gap:6px}
.pia-form .types button{min-height:38px;padding:0 12px;border-radius:999px;border:1px solid var(--mint-400);background:#fff;color:var(--primary-deep);font:600 13px var(--font-grotesk);cursor:pointer}
.pia-form .types button[aria-pressed="true"]{background:var(--primary-deep);color:#fff;border-color:var(--primary-deep)}
.pia-form .submit{min-height:46px;border-radius:12px;border:0;background:var(--primary-deep);color:#fff;font:600 15px var(--font-grotesk);cursor:pointer}
.pia-foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:8px 16px 10px;border-top:1px solid var(--line-light);font-size:12px;color:var(--ink-600)}
.pia-foot a{color:var(--primary-deep);font-weight:600}
.pia-launch:focus-visible,.pia-panel button:focus-visible,.pia-panel a:focus-visible,.pia-panel input:focus-visible,.pia-panel select:focus-visible,.pia-panel textarea:focus-visible{outline:3px solid var(--pulse);outline-offset:2px}

.mixlead{margin-top:16px;font-size:18px;color:var(--ink-600);max-width:760px}
.mixgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:28px;margin-top:40px;align-items:stretch}
@media(max-width:960px){.mixgrid{grid-template-columns:1fr}}
.constants{display:flex;flex-direction:column;gap:14px}
.const{background:var(--surface);border:1px solid var(--line-light);border-left:4px solid var(--primary);border-radius:var(--r-card);padding:20px 22px}
.const b{display:block;font:600 21px/1.2 var(--font-grotesk)}
.const p{margin:6px 0 0;color:var(--ink-600);font-size:15.5px}
.mixboard{background:var(--deep);color:var(--mint-200);border-radius:var(--r-panel);padding:26px 28px;display:flex;flex-direction:column}
.mb-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:baseline;padding-bottom:14px;border-bottom:1px solid var(--line-dark)}
.mb-head span{font:600 20px var(--font-grotesk);color:#fff}
.mb-head small{font:500 11px/1.4 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mint-400)}
.mb-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line-dark)}
@media(max-width:560px){.mb-row{grid-template-columns:1fr}}
.mb-k{font:600 15px var(--font-grotesk);color:#fff}
.mb-v{display:flex;flex-wrap:wrap;gap:6px}
.mb-v i{font-style:normal;font-size:13.5px;padding:5px 11px;border-radius:var(--r-pill);border:1px solid var(--line-dark);color:var(--mint-400)}
.mb-v i.on{background:var(--pulse);border-color:var(--pulse);color:var(--abyss);font-weight:600}
.mb-foot{margin:16px 0 0;font-size:15px;color:var(--mint-200)}
.cc-hero{grid-template-columns:minmax(0,1.15fr) minmax(300px,420px) !important;align-items:center}
@media(max-width:920px){.cc-hero{grid-template-columns:1fr !important}}
.pagehero-grid>.reveal:only-child{grid-column:1/-1;justify-self:start;margin-left:0;max-width:820px}
.ftabs a{font-size:15px}
.pagehero>.wrap{width:100%}