/* NET2000 home 4.8: Better Online Experience page and homepage teaser (diagrams + palettes at the end), shooting stars in the night sky.
   Built from home-4.7.css. */
/* NET2000 home 4.7: 24-hour activity arc and AI server in the hero; per-section diagram colours (palettes below).
   Built from home-4.6.css, which was built from home-4.5.css. */
/* NET2000 homepage concept v3: quick services menu, dark "super fast" hero, modernised sections.
   Plain CSS on top of site.css. No external fonts or libraries. */
@property --spd{syntax:'<integer>';inherits:true;initial-value:0}
@property --arc{syntax:'<number>';inherits:true;initial-value:0}
:root{--sky:#19b3ff;--royal:#2a5bd7;--bolt:#e01330;--neon:#7fe3ff;--deep:#020a3a}
html{overflow-x:hidden}
section[id],#nbn-check{scroll-margin-top:150px}

/* ---- Header + quick services menu ---- */
.top{background:rgba(255,255,255,.84);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px)}
.qnav{border-top:1px solid rgba(217,225,239,.7)}
.top .qnav-in{display:flex;gap:8px;max-width:1320px;min-height:0;justify-content:flex-start;padding-top:10px;padding-bottom:10px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.qnav-in::-webkit-scrollbar{display:none}
.pill{display:inline-flex;align-items:center;gap:.45em;flex:none;min-height:40px;padding:.5em 1em;border-radius:999px;font-weight:700;font-size:.92rem;text-decoration:none;white-space:nowrap;color:var(--navy-800);background:linear-gradient(180deg,#fff,#f1f5ff);border:1px solid #cdd8f0;box-shadow:0 1px 0 #fff inset,0 2px 8px rgba(0,0,80,.07);transition:transform .15s,box-shadow .15s,background .15s,color .15s}
.pill svg{width:18px;height:18px;flex:none;color:var(--royal)}
.pill:hover,.pill:focus-visible{color:#fff;background:linear-gradient(135deg,var(--sky),var(--royal));border-color:transparent;box-shadow:0 6px 18px rgba(25,140,255,.35);transform:translateY(-1px)}
.pill:hover svg,.pill:focus-visible svg,.pill-hot svg{color:#fff}
.pill-hot{color:#fff;background:linear-gradient(135deg,var(--sky),var(--royal));border-color:transparent;box-shadow:0 4px 14px rgba(25,140,255,.35)}
@media (min-width:1100px){.top .qnav-in{justify-content:center;gap:6px}.pill{font-size:.85rem;padding:.45em .8em;gap:.4em}.pill svg{width:16px;height:16px}}
@media (min-width:1100px) and (max-width:1199px){.top .qnav-in{flex-wrap:wrap}}
/* 4.2: longer "Website refresh & new sites" label. Centre safely (never clip the first pill), use the full
   header width, and show pill icons only where the row fits with them. */
@media (min-width:1100px){.top .qnav-in{justify-content:safe center;max-width:none}}
@media (min-width:1100px) and (max-width:1479px){.pill svg{display:none}.pill{padding:.45em .85em}}
@media (min-width:1200px) and (max-width:1379px){.top .qnav-in{gap:4px}.pill{font-size:.8rem;padding:.42em .66em}}
@media (max-width:1099px){.qnav{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}.top .qnav-in{padding-right:40px}}
@media (max-width:520px){.pill{min-height:38px;font-size:.86rem;padding:.45em .85em}.top .qnav-in{padding-top:8px;padding-bottom:8px}}

/* ---- Hero ---- */
.journey{position:relative;overflow:hidden;color:#e6edff;padding:46px 0 44px;
  background:radial-gradient(900px 420px at 80% 0%,rgba(42,91,215,.55),transparent 65%),
             radial-gradient(700px 380px at 0% 30%,rgba(25,179,255,.22),transparent 70%),
             radial-gradient(600px 300px at 60% 100%,rgba(224,19,48,.10),transparent 70%),
             linear-gradient(170deg,#000a4a 0%,#020a3a 55%,#00061f 100%)}
.journey::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(127,200,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(127,200,255,.07) 1px,transparent 1px);background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 75%)}
.journey::after{content:"";position:absolute;left:-30%;top:18%;width:60%;height:2px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(127,227,255,.8),transparent);filter:blur(.5px);animation:jstreak 15s linear infinite;opacity:.6;transform:translateX(-50%)}
/* 4.4: 14 s sweep from fully off-screen left to off-screen right, then a 1 s hold off-screen (was 6 s, restarting in view) */
@keyframes jstreak{0%{transform:translateX(-50%)}93.33%,100%{transform:translateX(260%)}}
.journey .wrap{position:relative;max-width:1180px}
.j-top{display:grid;gap:28px;align-items:center;margin-bottom:26px}
@media (min-width:900px){.j-top{grid-template-columns:1.35fr .65fr}}
.j-kicker{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#bfe6ff;background:rgba(255,255,255,.07);border:1px solid rgba(127,200,255,.25);border-radius:999px;padding:.4em .95em;margin-bottom:16px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.j-kicker i{width:8px;height:8px;border-radius:50%;background:#ff3b55;box-shadow:0 0 10px #ff3b55;animation:jblink 3.2s ease-in-out infinite}
.journey h1{font-size:clamp(2rem,5vw,3.5rem);line-height:1.05;letter-spacing:-.02em;margin:0 0 .35em;color:#fff}
.journey h1 .j-big{display:block;background:linear-gradient(90deg,#7fe3ff,#19b3ff 40%,#5b8cff 80%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(25,179,255,.35))}
.journey h1 .j-calm{display:block;font-size:.62em;font-weight:700;color:#dbe6ff;margin-top:.25em;letter-spacing:-.01em}
.j-lead{font-size:clamp(1.02rem,2vw,1.18rem);color:#c3d0f2;margin:0 0 22px;max-width:52ch}
.j-cta{display:flex;flex-wrap:wrap;gap:12px}
.btn-bold{background:linear-gradient(135deg,var(--sky),var(--royal));color:#fff;box-shadow:0 0 0 1px rgba(127,227,255,.35) inset,0 8px 26px rgba(25,140,255,.45);border:0;padding:.85em 1.45em}
.btn-bold:hover{background:linear-gradient(135deg,#3cc2ff,#1e4fc8);color:#fff;box-shadow:0 0 0 1px rgba(127,227,255,.5) inset,0 10px 30px rgba(25,140,255,.6)}
.btn-glass{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.28);padding:.85em 1.45em;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn-glass:hover{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.5)}
.glass-dark{background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid rgba(160,200,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 24px 60px rgba(0,0,30,.45);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%)}

/* speed gauge */
.spd{position:relative;border-radius:24px;padding:18px 20px 16px;text-align:center}
.spd-dial{display:block;width:100%;max-width:300px;margin:0 auto -64px;overflow:visible}
.spd-track{fill:none;stroke:rgba(160,200,255,.15);stroke-width:12;stroke-linecap:round}
.spd-arc{fill:none;stroke:url(#g-gauge);stroke-width:12;stroke-linecap:round;stroke-dasharray:100 200;stroke-dashoffset:calc(100 - var(--arc));filter:drop-shadow(0 0 8px rgba(25,179,255,.8))}
.spd-ticks path{stroke:rgba(200,225,255,.45);stroke-width:2;stroke-linecap:round}
.spd-read{position:relative;display:flex;align-items:baseline;justify-content:center;gap:8px}
.spd-num{font:800 clamp(2.8rem,6vw,3.8rem)/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:#fff;font-variant-numeric:tabular-nums;min-width:3.2ch;text-align:right;text-shadow:0 0 22px rgba(25,179,255,.7);counter-reset:spd var(--spd)}
.spd-num::after{content:counter(spd)}
.spd-unit{font-weight:800;color:#7fe3ff;letter-spacing:.06em}
.spd-tier{position:relative;height:1.6em;margin:6px 0 8px;font-size:.86rem;font-weight:700;color:#bfe6ff}
.spd-tier span{position:absolute;inset:0;opacity:0;animation:jt1 10.4s linear 1 forwards}
.spd-tier span:nth-child(2){animation-name:jt2}.spd-tier span:nth-child(3){animation-name:jt3}
/* 4.5: one gauge cycle = 10.4 s, from 1000 (0.8 s ease down to 0, 1 s at 0) up through 100 and 400 to 1000, then it stops
   on 1000 (fill forwards). sections-4.5.js waits a random 3-7 s and replays every gauge animation together. Times (s):
   0-0.8 drop | 0.8-1.8 at 0 | 2.76-5.4 at 100 | 6.6-9.24 at 400 | 10.4 at 1000 */
@keyframes jt1{0%,23%{opacity:0}26.5%,51.9%{opacity:1}55%,100%{opacity:0}}
@keyframes jt2{0%,60%{opacity:0}63.5%,88.8%{opacity:1}92%,100%{opacity:0}}
@keyframes jt3{0%{opacity:1}6%,96%{opacity:0}100%{opacity:1}}
.spd-note{font-size:.78rem;line-height:1.4;color:#9fb2dc;margin:0}
.spd{animation:jspeed 10.4s ease-in-out 1 forwards}
@keyframes jspeed{
  0%{--spd:1000;--arc:100} 7.69%,17.31%{--spd:0;--arc:0} 26.54%,51.92%{--spd:100;--arc:25} 63.46%,88.85%{--spd:400;--arc:55} 100%{--spd:1000;--arc:100}}

/* art panel */
.j-panel{border-radius:28px;padding:14px 14px 6px}
.j-art{display:block;width:100%;height:auto}
.j-art-m{display:none}
@media (max-width:760px){
  .journey{padding:30px 0 32px}
  .j-art-d{display:none}.j-art-m{display:block;max-width:420px;margin:0 auto}
  .j-panel{padding:10px 4px 4px;border-radius:22px}
  .j-cta .btn{flex:1 1 100%}
  .spd-dial{max-width:240px;margin-bottom:-52px}
  
}

/* SVG styling on dark */
.ln{fill:none;stroke:var(--ln,#cfe6ff);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fg{fill:rgba(var(--ac-rgb,127,200,255),.07)}
.ln-sky{fill:none;stroke:var(--ac,#7fe3ff);stroke-width:1.8;stroke-linecap:round;filter:drop-shadow(0 0 3px var(--ac-g,#19b3ff))}
.ln-soft{fill:none;stroke:var(--ac-s,#7fc8ff);stroke-opacity:.35;stroke-width:1.1}
.scr{stroke:var(--ac,#7fe3ff);stroke-opacity:.6;stroke-dasharray:4 3;animation:jtype 8s linear infinite}
@keyframes jtype{to{stroke-dashoffset:-14}}
.win{fill:rgba(255,214,120,.0);animation:jwin 9s ease-in-out infinite}.win.w2{animation-delay:3s}.win.w3{animation-delay:6s}
@keyframes jwin{0%,40%{fill:rgba(255,214,120,0)}50%,90%{fill:rgba(255,214,120,.55)}}
.nbn-t{font:800 14px system-ui,Arial,sans-serif;fill:#fff;text-anchor:middle}
.wire{fill:none;stroke:var(--ac-d,#3d7bff);stroke-opacity:.35;stroke-width:1.6;stroke-linecap:round}
.cable{fill:none;stroke:var(--ac-s,#7fc8ff);stroke-width:3.2;stroke-linecap:round;stroke-opacity:.6}
.st{fill:none;stroke-linecap:round;stroke-width:2.6}
.st.dn{stroke:var(--ac,#7fe3ff);stroke-dasharray:1.2 8.8;animation:jdn var(--d,3s) linear infinite}
.st.up{stroke:#ffffff;stroke-opacity:.75;stroke-width:1.8;stroke-dasharray:.8 11.7;animation:jup calc(var(--d,3s)*1.4) linear infinite}
/* 4.4: flowing dots about 2.1x slower (were 1.1 / 2.2 / 3 / 3.8 / 4.6 s) */
/* 4.5: flowing dots slowed again, about 1.75-1.9x (4.4: 2.4 / 4.6 / 6.4 / 8 / 9.6 s) */
.s0{--d:4.5s}.s1{--d:8s}.s2{--d:11s}.s3{--d:14s}.s4{--d:17s}
@keyframes jdn{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes jup{from{stroke-dashoffset:0}to{stroke-dashoffset:100}}
/* 4.4: single light pulses. The dash period (200) is longer than the path (100), so each pulse enters from the start,
   leaves past the end, then waits 1 s off the line before the next run: no restart jump. */
/* 4.5: pulse 5 s run + 1 s hold (4.4: 2.8 s + 1 s) */
@keyframes jpulse{0%{stroke-dashoffset:20}83.33%,100%{stroke-dashoffset:-106}}
.streak{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:14 186;stroke-dashoffset:20;animation:jpulse 6s cubic-bezier(.5,0,.5,1) infinite;filter:drop-shadow(0 0 4px var(--ac,#7fe3ff))}
.streak.k2{animation-delay:-3s;stroke:var(--ac,#7fe3ff)}
.glowy{filter:url(#glow)}
/* 4.4: extra flow shown only at the 400 and 1000 Mbps steps of the gauge (13 s cycle). The selector now outranks .st.dn so it applies.
   jpulse2 = 2 s run + 1 s hold. */
@keyframes jpulse2{0%{stroke-dashoffset:20}78.26%,100%{stroke-dashoffset:-106}}
.st.dn.boost1{opacity:0;animation:jdn 4.5s linear infinite,jb1 10.4s linear 1 forwards}
.streak.boost2{opacity:0;animation:jpulse2 4.6s cubic-bezier(.5,0,.5,1) infinite,jb2 10.4s linear 1 forwards}  /* 4.5: 3.6 s run + 1 s hold (4.4: 2 s + 1 s) */
.streak.k2.boost2{animation-delay:-2.3s,0s}
/* 4.5: boost dots on from the 400 step, boost pulses from the 1000 step; both stay on through the random hold at 1000 */
@keyframes jb1{0%{opacity:1}4%,60.5%{opacity:0}64.5%,100%{opacity:1}}
@keyframes jb2{0%{opacity:1}4%,89.5%{opacity:0}94%,100%{opacity:1}}
.led{fill:var(--ac,#7fe3ff);filter:drop-shadow(0 0 3px var(--ac-g,#19b3ff))}
.led-r{fill:#ff3b55;filter:drop-shadow(0 0 3px #ff3b55)}
.blink{animation:jblink 2.8s steps(2,jump-none) infinite}.blink.b2{animation-duration:2s}.blink.b3{animation-duration:3.6s;animation-delay:.6s}.blink.b4{animation-duration:1.6s}
@keyframes jblink{0%{opacity:1}50%{opacity:.15}100%{opacity:1}}
.wave{animation:jwave 3.2s ease-in-out infinite}.wave.w2{animation-delay:.45s}.wave.w3{animation-delay:.9s}
@keyframes jwave{0%,100%{opacity:.2}40%{opacity:1}}
.tile-ring{fill:rgba(10,30,110,.65);stroke:#3d7bff;stroke-opacity:.7;stroke-width:1.3}
.tile .ln{stroke:#e8f3ff}
.tile.hot .tile-ring{stroke:#7fe3ff;stroke-opacity:1;animation:jring 4.6s ease-in-out infinite}
@keyframes jring{0%,100%{filter:drop-shadow(0 0 0 rgba(25,179,255,0))}50%{filter:drop-shadow(0 0 8px rgba(25,179,255,.9))}}
.tile-lbl{font:600 11.5px system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;fill:#cfe0ff;text-anchor:middle}
.cap{font:800 12px system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;fill:#7fe3ff;text-anchor:middle;letter-spacing:.14em;text-transform:uppercase}
.tag{font:800 10.5px system-ui,Arial,sans-serif;fill:var(--ac,#7fe3ff);text-anchor:middle;letter-spacing:.08em}
.lbl{font:700 15px system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;fill:#fff;text-anchor:middle}
.sub{font:500 12.5px system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;fill:#9fb2dc;text-anchor:middle}
.lbl.l,.sub.l{text-anchor:start}
.halo{fill:none;stroke:#19b3ff;stroke-opacity:.25;stroke-width:8;filter:url(#glow-lg)}
.globe-rim{stroke:#9fd4ff}
.mer{fill:none;stroke:#7fc8ff;stroke-opacity:.55;stroke-width:1.1;animation:jmer 18s linear infinite}  /* 4.4: globe spin 8 s -> 18 s; a continuous spin, so no hold (index.html delays rescaled) */

@keyframes jmer{0%{transform:scaleX(1)}25%{transform:scaleX(0)}50%{transform:scaleX(-1)}75%{transform:scaleX(0)}100%{transform:scaleX(1)}}
.orbit{fill:none;stroke:#7fc8ff;stroke-opacity:.3;stroke-width:1;stroke-dasharray:3 6}
/* 4.4: 15 s per swing (was 9 s), resting 0.5 s at each end, so 1 s still at each turn */
.sway{animation:jsway 15s ease-in-out infinite alternate}
@keyframes jsway{0%,3.33%{transform:rotate(calc(var(--a) - 16deg))}96.67%,100%{transform:rotate(calc(var(--a) + 16deg))}}
@keyframes jorbit{to{transform:rotate(360deg)}}
.beam{stroke:url(#g-beam);stroke-width:6;stroke-linecap:round;opacity:.5}
.beam{stroke:#7fe3ff;stroke-width:7;opacity:.18;filter:url(#glow-lg)}
/* 4.4: beam pulses 2.4 s run + 1 s hold (were a 1.1 s continuous loop) */
/* 4.5: beam 4.4 s run + 1 s hold (4.4: 2.4 s + 1 s) */
@keyframes jbeam{0%{stroke-dashoffset:32}81.48%,100%{stroke-dashoffset:-110}}
.beam-core{stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-dasharray:22 178;stroke-dashoffset:32;animation:jbeam 5.4s linear infinite;filter:drop-shadow(0 0 4px #7fe3ff)}
.beam-core.b2{animation-delay:-2.7s;stroke:#7fe3ff}

/* 4.5: second satellite orbits the globe (see .orb2 below). 4.4 rules kept for reference: second satellite: drifts gently on its own (11 s each way, 0.5 s rest at each end), faint relay link to the data centre */
.sat2{transform-box:fill-box;transform-origin:50% 50%;animation:jdrift 11s ease-in-out infinite alternate}
@keyframes jdrift{0%,4.5%{transform:translate(-3px,2px) rotate(-5deg)}95.5%,100%{transform:translate(3px,-3px) rotate(4deg)}}
.slink{fill:none;stroke:var(--ac-s,#7fc8ff);stroke-opacity:.32;stroke-width:1.2;stroke-dasharray:2 5;stroke-linecap:round}
.slink-core{fill:none;stroke:var(--ac-l,#bfe6ff);stroke-opacity:.8;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:16 184;stroke-dashoffset:20;animation:jlink 7s ease-in-out infinite;animation-delay:-1.2s}
/* 4.5: relay pulse 6 s run + 1 s hold (4.4: 3.6 s + 1 s) */
@keyframes jlink{0%{stroke-dashoffset:20}85.71%,100%{stroke-dashoffset:-104}}

/* 4.5: second satellite swings on its own arc about the globe centre (radius ~158 desktop, ~146 mobile), outside the first
   satellite's radius (~110 / ~106), in step with it, 15 s per swing, 0.5 s rest at each end of a pass so it is still for 1 s at each turn.
   The dish and the dotted link point at the globe's centre the whole time because the whole group rotates about it. */
.orb2{animation:jorb2 15s ease-in-out infinite alternate}
@keyframes jorb2{0%,3.33%{transform:rotate(var(--a0))}96.67%,100%{transform:rotate(var(--a1))}}
/* pause when off-screen (toggled by a few lines of JS) and reduced motion */
.journey.is-paused *,.journey.is-paused,.journey.is-paused::after{animation-play-state:paused !important}
@media (prefers-reduced-motion:reduce){
  .journey *,.journey,.journey::after{animation:none !important}
  .journey,.spd{--spd:1000;--arc:100}
  .spd-tier span{opacity:0}.spd-tier span:last-child{opacity:1}
  .st.dn{stroke-dasharray:1.2 8.8}.boost1,.boost2,.streak,.st.dn.boost1,.streak.boost2,.slink-core{opacity:0}
  .win.w2{fill:rgba(255,214,120,.55)}
}

/* ---- Lower sections, light refresh ---- */
.hero.hero-lite{background:linear-gradient(180deg,#f3f7ff,#fff);color:var(--ink);padding:56px 0 60px}
.hero-lite h2.h1-like{color:var(--navy-800);font-size:clamp(1.7rem,4vw,2.5rem);letter-spacing:-.015em;max-width:20ch}
.hero-lite .lead{color:var(--muted)}
.hero-lite .kicker{color:var(--royal)}
.hero-lite .facts{color:var(--ink)}.hero-lite .facts svg{color:var(--royal)}
.hero-lite .hero-card{box-shadow:0 18px 50px rgba(10,31,143,.14);border:1px solid var(--line)}
.btn-primary{background:linear-gradient(135deg,var(--sky),var(--royal));box-shadow:0 4px 14px rgba(25,140,255,.3)}
.btn-primary:hover{background:linear-gradient(135deg,#3cc2ff,#1e4fc8)}
.card{border-radius:18px}
.speed-note{margin-top:10px;padding:10px 14px;border-radius:12px;background:var(--blue-50);font-size:.92rem;color:var(--navy-800)}
@media (max-width:760px){.j-cta .btn-glass{flex:1 1 40%;padding:.8em .9em}}
.mer{stroke-opacity:.8;stroke-width:1.3}
@media (prefers-reduced-motion:reduce){.journey::after{display:none}}
.budget-note{margin:8px 0 0;font-size:.85rem;color:var(--muted)}

/* ================= 4.5: line diagrams for each section (same line-art language as the hero) ================= */
.sx{margin:0;position:relative;border-radius:20px;padding:12px 12px 8px;color:#e6edff;overflow:hidden;
  background:radial-gradient(420px 220px at 85% 0%,rgba(var(--pn-rgb,42,91,215),var(--pn-a,.5)),transparent 70%),radial-gradient(360px 200px at 0% 100%,rgba(var(--ac2-rgb,25,179,255),.18),transparent 70%),linear-gradient(165deg,#000a4a 0%,#020a3a 60%,#00061f 100%);
  border:1px solid rgba(var(--ac-rgb,127,200,255),.26);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 16px 40px rgba(0,10,60,.22)}
.sx svg{display:block;width:100%;height:auto;overflow:visible}
.sx-l{font:600 13px system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;fill:var(--ln,#dbe8ff);text-anchor:middle}
.sx-n{font:700 12.5px system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;fill:#fff;text-anchor:middle}
.sx-s{font:500 11.5px system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;fill:#9fb2dc;text-anchor:middle}
.sx-k{font:800 11px system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;fill:#7fe3ff;text-anchor:middle;letter-spacing:.12em;text-transform:uppercase}
.sx .sx-k{fill:var(--ac,#7fe3ff)}
.sx-big{font:800 19px system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;fill:#fff;text-anchor:middle;filter:drop-shadow(0 0 6px rgba(var(--ac2-rgb,25,179,255),.7))}
.sx-keys circle{fill:var(--ac-s,#7fc8ff);opacity:.7}
.sx-chip{fill:rgba(10,30,110,.65);stroke:var(--ac-d,#3d7bff);stroke-opacity:.7;stroke-width:1.3}
.sx-chip-on{fill:rgba(var(--ac2-rgb,25,179,255),.2);stroke:var(--ac,#7fe3ff);stroke-width:1.6;opacity:0;filter:drop-shadow(0 0 5px rgba(var(--ac2-rgb,25,179,255),.8));animation:sxchip 16s ease-in-out infinite}
.sx-chip-on.c1{animation-delay:4s}.sx-chip-on.c2{animation-delay:8s}.sx-chip-on.c3{animation-delay:12s}
@keyframes sxchip{0%{opacity:0}5%,22%{opacity:1}27%,100%{opacity:0}}
.sx-arc{fill:none;stroke:var(--sx-arc,url(#g-gauge));stroke-width:7;stroke-linecap:round;stroke-dasharray:100 200;stroke-dashoffset:0;filter:drop-shadow(0 0 5px rgba(var(--ac2-rgb,25,179,255),.8));animation:sxarc 12s ease-in-out infinite}
@keyframes sxarc{0%,8%{stroke-dashoffset:100}45%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}
.sx-caret{fill:var(--ac,#7fe3ff);animation:jblink 2.4s steps(2,jump-none) infinite}
.sx-pin{animation:sxbob 6s ease-in-out infinite}
@keyframes sxbob{0%,16%{transform:translateY(0)}50%,66%{transform:translateY(-5px)}100%{transform:translateY(0)}}
.sx-ripple{fill:none;stroke:var(--ac,#7fe3ff);stroke-width:1.4;opacity:0;transform-box:fill-box;transform-origin:50% 50%;animation:sxripple 5s ease-out infinite}
@keyframes sxripple{0%{transform:scale(.3);opacity:.9}75%{transform:scale(1.5);opacity:0}100%{transform:scale(1.5);opacity:0}}
.sx-card{fill:rgba(255,214,120,.25);stroke:#ffd678;stroke-width:1.2;animation:sxcard 8s ease-in-out infinite}
@keyframes sxcard{0%,12%{transform:translateY(0)}40%,80%{transform:translateY(8px)}100%{transform:translateY(0)}}
.sx-lock{fill:none;stroke:#4ade80;stroke-width:1.2}
.sx-tick{fill:none;stroke:#4ade80;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:0;filter:drop-shadow(0 0 4px rgba(74,222,128,.7));animation:sxtick 9s ease-in-out infinite}
@keyframes sxtick{0%,10%{stroke-dashoffset:100;opacity:1}35%,85%{stroke-dashoffset:0;opacity:1}95%{stroke-dashoffset:0;opacity:0}96%,100%{stroke-dashoffset:100;opacity:0}}
.sx-spin{animation:jorbit 20s linear infinite}
.sx-hand{animation:jorbit 16s linear infinite}
.sx-eye{animation:sxeye 7s ease-in-out infinite}
@keyframes sxeye{0%,90%{transform:scaleY(1)}94%{transform:scaleY(.1)}98%,100%{transform:scaleY(1)}}
.sx-dot{fill:var(--ac-l,#bfe6ff);animation:jwave 3.2s ease-in-out infinite}.sx-dot.d2{animation-delay:.45s}.sx-dot.d3{animation-delay:.9s}
/* website refresh: old site fades into the new one, holds, fades back, holds (14 s) */
.sx-dated{fill:none;stroke:#a7a39a;stroke-width:1.2;stroke-opacity:.8}
.sx-serif{font:italic 700 15px "Times New Roman",Times,serif;fill:#e8c86a;text-anchor:middle}
.sx-counter{font:10px "Courier New",monospace;fill:#cfc6a8;text-anchor:middle}
.sx-hero{fill:rgba(var(--ac2-rgb,25,179,255),.2);stroke:var(--ac,#7fe3ff);stroke-width:1.4}
.sx-hl{stroke:#fff;stroke-width:5;stroke-linecap:round}
.sx-btn{fill:var(--ac-g,#19b3ff);filter:drop-shadow(0 0 5px rgba(var(--ac2-rgb,25,179,255),.9))}
.sx-old{opacity:0;animation:sxold 14s ease-in-out infinite}
.sx-new{opacity:1;animation:sxnew 14s ease-in-out infinite}
.sx-scan{fill:var(--ac-l,#bfe6ff);opacity:0;filter:drop-shadow(0 0 6px var(--ac,#7fe3ff));animation:sxscan 14s ease-in-out infinite}
@keyframes sxold{0%,30%{opacity:1}40%,92%{opacity:0}100%{opacity:1}}
@keyframes sxnew{0%,30%{opacity:0}40%,92%{opacity:1}100%{opacity:0}}
@keyframes sxscan{0%,28%{transform:translateY(0);opacity:0}30%{opacity:1}40%{transform:translateY(158px);opacity:1}42%,100%{transform:translateY(158px);opacity:0}}

/* layout */
.sx-top{display:grid;gap:18px;align-items:center;margin-bottom:28px}
.sx-top > .section-head,.sx-top > .m365-head{margin-bottom:0;min-width:0}
.sx-top > .sx{order:-1;width:100%;max-width:460px;justify-self:center}
.service.has-art{grid-template-areas:"art" "text" "side"}
.service.has-art > .sx{grid-area:art;width:100%;max-width:460px;justify-self:center}
.service.has-art > div:nth-of-type(1){grid-area:text}.service.has-art > div:nth-of-type(2){grid-area:side}
.hero-grid.has-art{grid-template-areas:"art" "text" "card" "more"}
.hero-grid.has-art > .sx{grid-area:art;width:100%;max-width:460px;justify-self:center}
.cta-band.has-art > .sx{flex:1 1 100%;max-width:420px;background:rgba(0,6,40,.45);margin:0 auto}
.cta-band.has-art > .sx-band-text{flex:1 1 280px;min-width:0}
@media (max-width:520px){.sx{border-radius:16px;padding:8px 6px 4px}.sx-top{gap:14px}}
@media (min-width:860px){
  .sx-top{grid-template-columns:minmax(0,1fr) minmax(0,440px);column-gap:44px}
  .sx-top > .sx{order:0;max-width:440px;justify-self:end}
  .sv-home.has-art{grid-template-areas:"text side" "art side";grid-template-rows:auto 1fr}
  .sv-biz.has-art{grid-template-areas:"text art" "text side";grid-template-rows:auto 1fr}
  .service.has-art > .sx{align-self:start}
  .service.has-art > .sx{max-width:500px;justify-self:stretch}
  .sv-biz.has-art > div:nth-of-type(1){align-self:start}
  .hero-grid.has-art{grid-template-areas:"text card" "art card" "more card";grid-template-rows:auto auto 1fr}
  .hero-grid.has-art > .sx{max-width:520px;justify-self:start}
  .cta-band.has-art{flex-wrap:nowrap;gap:28px}
  .cta-band.has-art > .sx{flex:0 0 300px;margin:0}
  .cta-band.has-art > .top-actions{flex:0 0 auto}
}
@media (min-width:860px) and (max-width:1099px){.cta-band.has-art{flex-wrap:wrap}.cta-band.has-art > .sx{flex:0 0 260px}}
@media (min-width:1100px){.cta-band.has-art > .sx{flex-basis:340px}}
.sx-web .sx-n{font-size:15px}.sx-web .sx-s{font-size:14px}.sx-web .sx-big{font-size:22px}

/* off-screen diagrams pause (sections-4.5.js); reduced motion: static and fully drawn */
.sx.is-off *{animation-play-state:paused !important}
@media (prefers-reduced-motion:reduce){
  .sx *{animation:none !important}
  .sx .streak,.sx .slink-core,.sx-scan,.sx-ripple,.sx-old{opacity:0}
  .sx-new{opacity:1}.sx-chip-on{opacity:1}.sx-chip-on.c1,.sx-chip-on.c2,.sx-chip-on.c3{opacity:0}
  .sx-arc,.sx-tick{stroke-dashoffset:0}
}

/* ================= 4.6: a colour for each section diagram =================
   Every diagram colour comes from a few CSS custom properties (fallbacks = the 4.5 blues, so the hero is unchanged).
   Palette switch: <html data-palette="context"> (default), "soft" (muted), "cool" (blues/teals/violets only) or "classic" (4.5 blue).
   For a preview without editing the page, add ?palette=soft (or cool / classic / context) to the URL (sections-4.6.js). */
/* context */
.sx-check{--ac:#4ee6d5;--ac-rgb:78,230,213;--ac-g:#14b8a6;--ac2-rgb:20,184,166;--ac-d:#0d9488;--ac-s:#69eadb;--ac-l:#aff4ec;--ln:#d8faf6;--pn-rgb:13,148,136;--pn-a:.42;--sx-arc:#4ee6d5}
.sx-home{--ac:#ffbf5e;--ac-rgb:255,191,94;--ac-g:#f59e0b;--ac2-rgb:245,158,11;--ac-d:#b8660c;--ac-s:#ffc976;--ac-l:#ffe2b7;--ln:#fff1dc;--pn-rgb:184,102,12;--pn-a:.42;--sx-arc:#ffbf5e}
.sx-biz{--ac:#98abff;--ac-rgb:152,171,255;--ac-g:#5468ff;--ac2-rgb:84,104,255;--ac-d:#3b4cca;--ac-s:#a7b8ff;--ac-l:#d1d9ff;--ln:#e8edff;--pn-rgb:59,76,202;--pn-a:.42;--sx-arc:#98abff}
.sx-host{--ac:#5eea8f;--ac-rgb:94,234,143;--ac-g:#22c55e;--ac2-rgb:34,197,94;--ac-d:#15803d;--ac-s:#76eda0;--ac-l:#b7f6cd;--ln:#dcfae6;--pn-rgb:21,128,61;--pn-a:.42;--sx-arc:#5eea8f}
.sx-web{--ac:#f78ce6;--ac-rgb:247,140,230;--ac-g:#e04fd0;--ac2-rgb:224,79,208;--ac-d:#a3339a;--ac-s:#f89dea;--ac-l:#fbcbf4;--ln:#fde6fa;--pn-rgb:163,51,154;--pn-a:.42;--sx-arc:#f78ce6}
.sx-m365{--ac:#5fc4ff;--ac-rgb:95,196,255;--ac-g:#0a8fe6;--ac2-rgb:10,143,230;--ac-d:#0067b8;--ac-s:#77cdff;--ac-l:#b7e4ff;--ln:#dcf2ff;--pn-rgb:0,103,184;--pn-a:.42;--sx-arc:#5fc4ff}
.sx-why{--ac:#ffd75e;--ac-rgb:255,215,94;--ac-g:#e6ac00;--ac2-rgb:230,172,0;--ac-d:#a77c00;--ac-s:#ffdd76;--ac-l:#ffedb7;--ln:#fff6dc;--pn-rgb:167,124,0;--pn-a:.42;--sx-arc:#ffd75e}
.sx-sup{--ac:#ff9c87;--ac-rgb:255,156,135;--ac-g:#ff6a50;--ac2-rgb:255,106,80;--ac-d:#c2412d;--ac-s:#ffab99;--ac-l:#ffd2c9;--ln:#ffe9e5;--pn-rgb:194,65,45;--pn-a:.42;--sx-arc:#ff9c87}
.sx-con{--ac:#bba3ff;--ac-rgb:187,163,255;--ac-g:#8b5cf6;--ac2-rgb:139,92,246;--ac-d:#6d3fd6;--ac-s:#c5b1ff;--ac-l:#e0d6ff;--ln:#f0ebff;--pn-rgb:109,63,214;--pn-a:.42;--sx-arc:#bba3ff}
/* soft */
[data-palette="soft"] .sx-check{--ac:#94dcd3;--ac-rgb:148,220,211;--ac-g:#4fb3a8;--ac2-rgb:79,179,168;--ac-d:#2f7f78;--ac-s:#a4e1da;--ac-l:#cfefeb;--ln:#e7f7f5;--pn-rgb:47,127,120;--pn-a:.42;--sx-arc:#94dcd3}
[data-palette="soft"] .sx-home{--ac:#ecc994;--ac-rgb:236,201,148;--ac-g:#c99a55;--ac2-rgb:201,154,85;--ac-d:#8a6633;--ac-s:#efd1a4;--ac-l:#f6e7cf;--ln:#fbf3e7;--pn-rgb:138,102,51;--pn-a:.42;--sx-arc:#ecc994}
[data-palette="soft"] .sx-biz{--ac:#b0bcec;--ac-rgb:176,188,236;--ac-g:#7183c9;--ac2-rgb:113,131,201;--ac-d:#47559a;--ac-s:#bcc6ef;--ac-l:#dbe1f6;--ln:#eef0fb;--pn-rgb:71,85,154;--pn-a:.42;--sx-arc:#b0bcec}
[data-palette="soft"] .sx-host{--ac:#a3dfb4;--ac-rgb:163,223,180;--ac-g:#5fae79;--ac2-rgb:95,174,121;--ac-d:#3b7a50;--ac-s:#b1e4bf;--ac-l:#d6f1dd;--ln:#ebf8ee;--pn-rgb:59,122,80;--pn-a:.42;--sx-arc:#a3dfb4}
[data-palette="soft"] .sx-web{--ac:#e4aedc;--ac-rgb:228,174,220;--ac-g:#b871ad;--ac2-rgb:184,113,173;--ac-d:#7e4a77;--ac-s:#e8bae1;--ac-l:#f3dbef;--ln:#f9edf7;--pn-rgb:126,74,119;--pn-a:.42;--sx-arc:#e4aedc}
[data-palette="soft"] .sx-m365{--ac:#a2cdee;--ac-rgb:162,205,238;--ac-g:#5b9ccc;--ac2-rgb:91,156,204;--ac-d:#386c94;--ac-s:#b0d4f1;--ac-l:#d5e8f7;--ln:#ebf4fb;--pn-rgb:56,108,148;--pn-a:.42;--sx-arc:#a2cdee}
[data-palette="soft"] .sx-why{--ac:#e9d38e;--ac-rgb:233,211,142;--ac-g:#c4a648;--ac2-rgb:196,166,72;--ac-d:#86702c;--ac-s:#ecda9f;--ac-l:#f5ebcc;--ln:#faf5e6;--pn-rgb:134,112,44;--pn-a:.42;--sx-arc:#e9d38e}
[data-palette="soft"] .sx-sup{--ac:#eeb4a6;--ac-rgb:238,180,166;--ac-g:#cc7b68;--ac2-rgb:204,123,104;--ac-d:#8f4f40;--ac-s:#f1bfb3;--ac-l:#f7ddd7;--ln:#fbeeeb;--pn-rgb:143,79,64;--pn-a:.42;--sx-arc:#eeb4a6}
[data-palette="soft"] .sx-con{--ac:#c8baee;--ac-rgb:200,186,238;--ac-g:#9580cf;--ac2-rgb:149,128,207;--ac-d:#62528f;--ac-s:#d0c4f1;--ac-l:#e6e0f7;--ln:#f3f0fb;--pn-rgb:98,82,143;--pn-a:.42;--sx-arc:#c8baee}
/* cool */
[data-palette="cool"] .sx-check{--ac:#4ee6d5;--ac-rgb:78,230,213;--ac-g:#14b8a6;--ac2-rgb:20,184,166;--ac-d:#0d9488;--ac-s:#69eadb;--ac-l:#aff4ec;--ln:#d8faf6;--pn-rgb:13,148,136;--pn-a:.42;--sx-arc:#4ee6d5}
[data-palette="cool"] .sx-home{--ac:#7fd8ff;--ac-rgb:127,216,255;--ac-g:#22a8f0;--ac2-rgb:34,168,240;--ac-d:#1478c0;--ac-s:#92deff;--ac-l:#c5edff;--ln:#e3f6ff;--pn-rgb:20,120,192;--pn-a:.42;--sx-arc:#7fd8ff}
[data-palette="cool"] .sx-biz{--ac:#98abff;--ac-rgb:152,171,255;--ac-g:#5468ff;--ac2-rgb:84,104,255;--ac-d:#3b4cca;--ac-s:#a7b8ff;--ac-l:#d1d9ff;--ln:#e8edff;--pn-rgb:59,76,202;--pn-a:.42;--sx-arc:#98abff}
[data-palette="cool"] .sx-host{--ac:#5ee8c0;--ac-rgb:94,232,192;--ac-g:#14c39a;--ac2-rgb:20,195,154;--ac-d:#0f8a70;--ac-s:#76ebc9;--ac-l:#b7f5e3;--ln:#dcfaf1;--pn-rgb:15,138,112;--pn-a:.42;--sx-arc:#5ee8c0}
[data-palette="cool"] .sx-web{--ac:#d7a2ff;--ac-rgb:215,162,255;--ac-g:#a855f7;--ac2-rgb:168,85,247;--ac-d:#7e3bd0;--ac-s:#ddb0ff;--ac-l:#edd5ff;--ln:#f6ebff;--pn-rgb:126,59,208;--pn-a:.42;--sx-arc:#d7a2ff}
[data-palette="cool"] .sx-m365{--ac:#62b8ff;--ac-rgb:98,184,255;--ac-g:#2b86ff;--ac2-rgb:43,134,255;--ac-d:#1f5fd6;--ac-s:#7ac3ff;--ac-l:#b8dfff;--ln:#dcefff;--pn-rgb:31,95,214;--pn-a:.42;--sx-arc:#62b8ff}
[data-palette="cool"] .sx-why{--ac:#b8ccff;--ac-rgb:184,204,255;--ac-g:#7c95ff;--ac2-rgb:124,149,255;--ac-d:#4e63c9;--ac-s:#c3d4ff;--ac-l:#dfe8ff;--ln:#eff4ff;--pn-rgb:78,99,201;--pn-a:.42;--sx-arc:#b8ccff}
[data-palette="cool"] .sx-sup{--ac:#7ff0ff;--ac-rgb:127,240,255;--ac-g:#1fc8e0;--ac2-rgb:31,200,224;--ac-d:#0f8fa6;--ac-s:#92f2ff;--ac-l:#c5f8ff;--ln:#e3fcff;--pn-rgb:15,143,166;--pn-a:.42;--sx-arc:#7ff0ff}
[data-palette="cool"] .sx-con{--ac:#bba3ff;--ac-rgb:187,163,255;--ac-g:#8b5cf6;--ac2-rgb:139,92,246;--ac-d:#6d3fd6;--ac-s:#c5b1ff;--ac-l:#e0d6ff;--ln:#f0ebff;--pn-rgb:109,63,214;--pn-a:.42;--sx-arc:#bba3ff}
[data-palette="classic"] .sx{--ac:initial;--ac-rgb:initial;--ac-g:initial;--ac2-rgb:initial;--ac-d:initial;--ac-s:initial;--ac-l:initial;--ln:initial;--pn-rgb:initial;--pn-a:initial;--sx-arc:initial}

/* ================= 4.7: hero "Everything you do online" on a 24-hour arc (sections-4.7.js) =================
   Three activities on an arc. Each one enters at the right, rises to the top, waits there 1.8 s (larger, brighter ring and
   label), then glides on (2.6 s) and leaves at the left: anti-clockwise, the way the sun crosses our northern sky.
   16 activities = one 24-hour day in 70.4 s. The sky follows the hour of the activity at the top.
   No JS / reduced motion: Smart home, Streaming TV (top) and Social media under a sunset sky. */
.sky-bg{opacity:.6}
.sky-edge{fill:none;stroke:#7fc8ff;stroke-opacity:.18;stroke-width:1}
.sky-hz{fill:none;stroke:#cfe6ff;stroke-opacity:.22;stroke-width:1.2}
.sky-star{fill:#fff}
.tw{animation:jtw 7s ease-in-out infinite}.tw.t1{animation-delay:-2.3s}.tw.t2{animation-delay:-4.6s}
@keyframes jtw{0%,100%{opacity:.9}50%{opacity:.35}}
.sc-star{fill:#fff;filter:drop-shadow(0 0 3px rgba(191,230,255,.9))}
.sun-c{fill:rgba(255,214,120,.3);stroke:#ffd678;stroke-width:1.6;filter:drop-shadow(0 0 6px #ffb347)}
.sun-rays{stroke:#ffd678;stroke-width:1.6;stroke-linecap:round}
.moon{fill:rgba(230,240,255,.22);stroke:#e8f0ff;stroke-width:1.4;filter:drop-shadow(0 0 5px #bfe6ff)}
.cap.l{text-anchor:start}.cap.r{text-anchor:end}
.sky-tod{transition:opacity .6s ease}
.arc-track{fill:none;stroke:#7fc8ff;stroke-opacity:.3;stroke-width:1;stroke-dasharray:3 6}
.arc-halo{fill:rgba(25,179,255,.14);stroke:#7fe3ff;stroke-opacity:.7;stroke-width:1.2;filter:drop-shadow(0 0 8px rgba(25,179,255,.9))}
.arc-it .tile-lbl{paint-order:stroke;stroke:rgba(2,10,58,.75);stroke-width:3px;stroke-linejoin:round;transition:fill .5s ease}
.arc-it.em .tile-lbl{fill:#fff;font-weight:800}
.j-art-m .arc-it .tile-lbl{font-size:10.5px}
.arc-it.em .tile-ring{stroke:#7fe3ff;stroke-opacity:1}

/* ================= 4.7: AI server rack + cut-away (AI chip under a water block, RAM, NVMe SSDs, radiator and fans) ================= */
.ai-u{fill:rgba(25,179,255,.16);stroke:#7fe3ff;stroke-width:1.6;filter:drop-shadow(0 0 4px #19b3ff)}
.ai-t{font:800 7px system-ui,Arial,sans-serif;fill:#7fe3ff;text-anchor:middle}
.aib-h{font:800 10.5px system-ui,Arial,sans-serif;fill:#7fe3ff;letter-spacing:.14em}
.aib-ai{font:800 12px system-ui,Arial,sans-serif;fill:#fff;text-anchor:middle;filter:drop-shadow(0 0 4px #19b3ff)}
.aib-n{fill:#7fe3ff;opacity:.8}
.aib-blk{fill:rgba(25,179,255,.18)}
.aib-l{opacity:var(--aib-l,1)}
.aib-l text{font:600 10.5px system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;fill:#cfe0ff;text-anchor:middle}
.zoom{fill:none;stroke:#7fc8ff;stroke-opacity:.35;stroke-width:1;stroke-dasharray:2 4}
.tube{fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:.45}
.t-hot{stroke:#ff9a6a}.t-cool{stroke:#7fe3ff}
.cflow{fill:none;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:1.5 8.5;animation:jdn 16s linear infinite}
.cf-h{stroke:#ffd0b0}.cf-c{stroke:#e0fbff}
.fan-b{animation:jorbit 10s linear infinite}
@media (prefers-reduced-motion:reduce){.tw,.cflow,.fan-b{animation:none !important}.arc-it .tile-lbl{transition:none}.sky-tod{transition:none}}

/* ================= 4.8: Better Online Experience (better-online.html) and the homepage teaser =================
   Diagram colours: same custom-property scheme as 4.6 (context / soft / cool palettes; classic = 4.5 blue via the .sx reset above). */
/* context */
.sx-tips{--ac:#6ff0c4;--ac-rgb:111,240,196;--ac-g:#14c38e;--ac2-rgb:20,195,142;--ac-d:#0f7a5c;--ac-s:#85f2cd;--ac-l:#bef8e4;--ln:#dffcf2;--pn-rgb:15,122,92;--pn-a:.42;--sx-arc:#6ff0c4}
.sx-bwifi{--ac:#6fd3ff;--ac-rgb:111,211,255;--ac-g:#0ea5e9;--ac2-rgb:14,165,233;--ac-d:#0369a1;--ac-s:#85daff;--ac-l:#beebff;--ln:#dff5ff;--pn-rgb:3,105,161;--pn-a:.42;--sx-arc:#6fd3ff}
.sx-bscam{--ac:#ffc46b;--ac-rgb:255,196,107;--ac-g:#f59e0b;--ac2-rgb:245,158,11;--ac-d:#b45309;--ac-s:#ffcd81;--ac-l:#ffe4bc;--ln:#fff2de;--pn-rgb:180,83,9;--pn-a:.42;--sx-arc:#ffc46b}
.sx-bsec{--ac:#7beab0;--ac-rgb:123,234,176;--ac-g:#22c55e;--ac2-rgb:34,197,94;--ac-d:#15803d;--ac-s:#8fedbc;--ac-l:#c4f6db;--ln:#e2faee;--pn-rgb:21,128,61;--pn-a:.42;--sx-arc:#7beab0}
.sx-brtr{--ac:#c4a5ff;--ac-rgb:196,165,255;--ac-g:#8b5cf6;--ac2-rgb:139,92,246;--ac-d:#6d28d9;--ac-s:#cdb2ff;--ac-l:#e4d6ff;--ln:#f2ebff;--pn-rgb:109,40,217;--pn-a:.42;--sx-arc:#c4a5ff}
.sx-bquick{--ac:#c6f27a;--ac-rgb:198,242,122;--ac-g:#84cc16;--ac2-rgb:132,204,22;--ac-d:#4d7c0f;--ac-s:#cff48e;--ac-l:#e5f9c3;--ln:#f2fce2;--pn-rgb:77,124,15;--pn-a:.42;--sx-arc:#c6f27a}
/* soft */
[data-palette="soft"] .sx-tips{--ac:#95e2cc;--ac-rgb:149,226,204;--ac-g:#47b099;--ac2-rgb:71,176,153;--ac-d:#2e7069;--ac-s:#a5e6d4;--ac-l:#cff2e8;--ln:#e8f9f4;--pn-rgb:46,112,105;--pn-a:.42;--sx-arc:#95e2cc}
[data-palette="soft"] .sx-bwifi{--ac:#95d1ef;--ac-rgb:149,209,239;--ac-g:#439fce;--ac2-rgb:67,159,206;--ac-d:#276691;--ac-s:#a5d8f1;--ac-l:#cfeaf8;--ln:#e8f5fb;--pn-rgb:39,102,145;--pn-a:.42;--sx-arc:#95d1ef}
[data-palette="soft"] .sx-bscam{--ac:#e8c899;--ac-rgb:232,200,153;--ac-g:#c99b4d;--ac2-rgb:201,155,77;--ac-d:#8d5938;--ac-s:#ebd0a8;--ac-l:#f5e6d1;--ln:#faf3e9;--pn-rgb:141,89,56;--pn-a:.42;--sx-arc:#e8c899}
[data-palette="soft"] .sx-bsec{--ac:#9cdec1;--ac-rgb:156,222,193;--ac-g:#4fb17d;--ac2-rgb:79,177,125;--ac-d:#317357;--ac-s:#abe3ca;--ac-l:#d2f0e3;--ln:#e9f8f1;--pn-rgb:49,115,87;--pn-a:.42;--sx-arc:#9cdec1}
[data-palette="soft"] .sx-brtr{--ac:#c6b6ef;--ac-rgb:198,182,239;--ac-g:#8c74d5;--ac2-rgb:140,116,213;--ac-d:#6440b1;--ac-s:#cfc1f1;--ac-l:#e5def8;--ln:#f2effb;--pn-rgb:100,64,177;--pn-a:.42;--sx-arc:#c6b6ef}
[data-palette="soft"] .sx-bquick{--ac:#c7e3a1;--ac-rgb:199,227,161;--ac-g:#88b553;--ac2-rgb:136,181,83;--ac-d:#52713c;--ac-s:#cfe7af;--ac-l:#e6f2d5;--ln:#f3f9ea;--pn-rgb:82,113,60;--pn-a:.42;--sx-arc:#c7e3a1}
/* cool */
[data-palette="cool"] .sx-tips{--ac:#4ee6d5;--ac-rgb:78,230,213;--ac-g:#14b8a6;--ac2-rgb:20,184,166;--ac-d:#0d9488;--ac-s:#69eadb;--ac-l:#aff4ec;--ln:#d8faf6;--pn-rgb:13,148,136;--pn-a:.42;--sx-arc:#4ee6d5}
[data-palette="cool"] .sx-bwifi{--ac:#7fd8ff;--ac-rgb:127,216,255;--ac-g:#22a8f0;--ac2-rgb:34,168,240;--ac-d:#1478c0;--ac-s:#92deff;--ac-l:#c5edff;--ln:#e3f6ff;--pn-rgb:20,120,192;--pn-a:.42;--sx-arc:#7fd8ff}
[data-palette="cool"] .sx-bscam{--ac:#b8ccff;--ac-rgb:184,204,255;--ac-g:#7c95ff;--ac2-rgb:124,149,255;--ac-d:#4e63c9;--ac-s:#c3d4ff;--ac-l:#dfe8ff;--ln:#eff4ff;--pn-rgb:78,99,201;--pn-a:.42;--sx-arc:#b8ccff}
[data-palette="cool"] .sx-bsec{--ac:#5ee8c0;--ac-rgb:94,232,192;--ac-g:#14c39a;--ac2-rgb:20,195,154;--ac-d:#0f8a70;--ac-s:#76ebc9;--ac-l:#b7f5e3;--ln:#dcfaf1;--pn-rgb:15,138,112;--pn-a:.42;--sx-arc:#5ee8c0}
[data-palette="cool"] .sx-brtr{--ac:#d7a2ff;--ac-rgb:215,162,255;--ac-g:#a855f7;--ac2-rgb:168,85,247;--ac-d:#7e3bd0;--ac-s:#ddb0ff;--ac-l:#edd5ff;--ln:#f6ebff;--pn-rgb:126,59,208;--pn-a:.42;--sx-arc:#d7a2ff}
[data-palette="cool"] .sx-bquick{--ac:#62b8ff;--ac-rgb:98,184,255;--ac-g:#2b86ff;--ac2-rgb:43,134,255;--ac-d:#1f5fd6;--ac-s:#7ac3ff;--ac-l:#b8dfff;--ln:#dcefff;--pn-rgb:31,95,214;--pn-a:.42;--sx-arc:#62b8ff}
/* diagram details */
.bo-cov{fill:rgba(var(--ac2-rgb,25,179,255),.09);stroke:var(--ac,#7fe3ff);stroke-opacity:.35;stroke-width:1.2;stroke-dasharray:3 5}
.bo-warn{fill:#ffb020;filter:drop-shadow(0 0 4px rgba(255,176,32,.8))}
.bo-bubble{fill:rgba(var(--ac2-rgb,245,158,11),.16);stroke:var(--ac,#ffc46b);stroke-width:1.2}
.bo-glass{animation:boglass 7s ease-in-out infinite}
@keyframes boglass{0%,100%{transform:translateX(0)}45%,60%{transform:translateX(-120px)}}
.bo-fw{fill:none;stroke:var(--ac,#7fe3ff);stroke-width:6;stroke-linecap:round;stroke-dasharray:100 200;filter:drop-shadow(0 0 4px rgba(var(--ac2-rgb,25,179,255),.8));animation:bofw 9s ease-in-out infinite}
@keyframes bofw{0%,8%{stroke-dashoffset:100}40%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}
.bo-spin{animation-duration:9s}
.bo-needle{animation:boneedle 6s ease-in-out infinite}
@keyframes boneedle{0%,10%{transform:rotate(-95deg)}45%,80%{transform:rotate(0)}100%{transform:rotate(-95deg)}}
.sx.is-off .bo-glass,.sx.is-off .bo-fw,.sx.is-off .bo-needle{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.bo-glass,.bo-fw,.bo-needle{animation:none}.bo-fw{stroke-dashoffset:0}}
/* homepage teaser */
.tips-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:0 0 22px;padding:0;list-style:none}
.tip{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 18px 16px;box-shadow:var(--shadow)}
.tip h3{display:flex;align-items:center;gap:10px;font-size:1.05rem;margin:0 0 .4em}
.tip h3 svg{width:22px;height:22px;flex:none;color:var(--royal,#1b4fd8)}
.tip p{margin:0;color:var(--muted);font-size:.95rem}
.web-lead{font-weight:600;font-size:.98rem;color:#fff;margin:.15em 0 .6em;opacity:.95}
.web-lead + p{margin-top:0}
.bo-more{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.bo-more .btn svg{width:18px;height:18px}
/* the page */
.bo-page .page-head p{max-width:62ch}
.bo-jump{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.bo-jump .pill{white-space:normal}
.bo-body{max-width:860px}
.bo-body h3{font-size:1.12rem;margin:1.4em 0 .5em}
.bo-body p,.bo-body li{line-height:1.6}
.bo-body ul{padding-left:1.25em}.bo-body li{margin:.35em 0}
.bo-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:12px 0 8px}
.bo-grid .card{padding:20px}
.bo-grid .card h4{margin:0 0 .45em;font-size:1.02rem;color:var(--navy-800)}
.bo-grid .card p{margin:.3em 0;font-size:.95rem}
.bo-grid .card .k{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--royal,#1b4fd8);margin-bottom:.35em}
.bo-note{margin:14px 0 0;padding:12px 16px;border-radius:12px;background:var(--blue-50,#eef4ff);color:var(--navy-800);font-size:.95rem}
.bo-table{width:100%;border-collapse:collapse;margin:10px 0;font-size:.95rem}
.bo-table th,.bo-table td{text-align:left;vertical-align:top;padding:9px 10px;border-bottom:1px solid var(--line)}
.bo-table th{color:var(--navy-800);white-space:nowrap}
@media (max-width:560px){.bo-table,.bo-table tbody,.bo-table tr,.bo-table th,.bo-table td{display:block}.bo-table th{padding-bottom:0;border:0}.bo-table td{padding-top:4px}}
.bo-sources ol{font-size:.86rem;color:var(--muted);padding-left:1.3em}
.bo-sources li{margin:.3em 0;overflow-wrap:anywhere}
.qnav .pill[aria-current="page"]{background:linear-gradient(135deg,var(--sky),var(--royal));color:#fff;border-color:transparent}

/* ================= 4.8: shooting stars in the hero's night sky (sections-4.8.js) =================
   A thin bright head with a fading tail, 0.6-1.0 s each, a few per night, never over the Southern Cross, moon or labels.
   Drawn only with JS, while the hero is on screen and the tab is visible; none with reduced motion. */
.meteor{pointer-events:none;opacity:0;animation:jmet-o var(--md,.8s) linear forwards}
.meteor path{fill:none;stroke-linecap:round}
.meteor .m-tail{stroke:#9fd2ff;stroke-width:1.1;stroke-opacity:.38;stroke-dasharray:34 400;animation:jmet-t var(--md,.8s) cubic-bezier(.3,.1,.55,1) forwards}
.meteor .m-mid{stroke:#d8ecff;stroke-width:1.4;stroke-opacity:.7;stroke-dasharray:14 400;animation:jmet-m var(--md,.8s) cubic-bezier(.3,.1,.55,1) forwards}
.meteor .m-head{stroke:#fff;stroke-width:2;stroke-dasharray:4 400;animation:jmet-h var(--md,.8s) cubic-bezier(.3,.1,.55,1) forwards}
@keyframes jmet-h{from{stroke-dashoffset:4}to{stroke-dashoffset:-100}}
@keyframes jmet-m{from{stroke-dashoffset:14}to{stroke-dashoffset:-90}}
@keyframes jmet-t{from{stroke-dashoffset:34}to{stroke-dashoffset:-70}}
@keyframes jmet-o{0%{opacity:0}12%{opacity:1}65%{opacity:.95}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.meteor{display:none}}