/* Bitara. Deep navy, one teal accent, white and cool-grey pages.
   One spacing scale (8px steps) so every page lines up; movement kept to a
   few quiet touches. Light, or dark as the visitor or their system chooses. */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('fonts/manrope-latin.woff2') format('woff2');}

:root{
  /* Colour */
  --navy:#16171A; --navy-2:#1E1F23; --navy-3:#292B30;
  --teal:#35373E; --teal-hover:#2B2D33; --teal-soft:#EEF0E9; --aqua:#C2DE6F;
  --bg:#F9F9F7; --surface:#FFFFFF; --sunken:#F5F6F2; --tint:#F3F4F0;
  --border:#E9ECE3; --border-strong:#D2D3D6;
  --text:#16171A; --text-2:#54565C; --text-3:#686B74;
  --on-dark:#EDEFE9; --on-dark-2:#B5B7BC; --on-dark-3:#898C95; --line-dark:rgba(255,255,255,.09);
  --ok:#547511; --ok-bg:#EDEFE9; --bad:#B91C1C; --bad-bg:#FEE2E2;
  /* Space */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;
  --section:clamp(44px,5vw,64px);
  /* Shape */
  --r:10px; --r-lg:14px;
  --shadow:0 1px 2px rgba(22,23,26,.05);
  --shadow-md:0 12px 32px rgba(22,23,26,.08),0 2px 6px rgba(22,23,26,.04);
  --wrap:1760px;               /* use the screen: wide layouts, text keeps its own measure */
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px;overflow-x:hidden;}
@supports (overflow:clip){html{overflow-x:clip;}}
/* Phones widen the page to fit anything that sticks out, and body alone does
   not stop them: html, body and main all clip sideways. clip, not hidden,
   so the sticky header and hero still stick. */
main{overflow-x:clip;}
body{margin:0;font-family:'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.65;color:var(--text);background:var(--bg);overflow-x:clip;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
h1,h2,h3,p,ul,ol,figure{margin:0;}
h1,h2,h3{text-wrap:balance;}
p{text-wrap:pretty;}
a{color:var(--teal);text-underline-offset:3px;}
a:hover{color:var(--teal-hover);}
img,svg{display:block;}
.icon{width:18px;height:18px;flex:none;stroke:currentColor;stroke-width:1.8;fill:none;
  stroke-linecap:round;stroke-linejoin:round;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(16px,4vw,72px);}
.narrow{max-width:760px;}
.sprite{position:absolute;width:0;height:0;overflow:hidden;}
.skip-link{position:absolute;left:-9999px;top:8px;background:var(--surface);padding:8px 12px;border-radius:8px;z-index:100;}
.skip-link:focus{left:8px;}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px;}

/* ---- Top bar ---- */
.topbar{position:sticky;top:0;z-index:50;background:rgba(22,23,26,.96);color:var(--on-dark);
  border-bottom:1px solid var(--line-dark);}
.topbar-inner{display:flex;align-items:center;gap:var(--s3);height:72px;}
.brand{display:inline-flex;align-items:center;gap:12px;color:#fff;text-decoration:none;}
.brand:hover{color:#fff;}
.brand-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;
  background:var(--teal);color:#fff;}
.brand-mark svg{width:22px;height:22px;}
.brand-name{font-weight:800;font-size:19px;letter-spacing:-.02em;}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px;}
.nav a:not(.btn){color:var(--on-dark-2);text-decoration:none;font-weight:600;font-size:15px;padding:8px 14px;border-radius:8px;
  transition:color .15s,background-color .15s;}
.nav a:not(.btn):hover{color:#fff;background:rgba(255,255,255,.06);}
.nav a[aria-current="page"]:not(.btn){color:#fff;}
.nav .btn{margin-left:var(--s2);}
.nav-mobile{display:none;margin-left:auto;position:relative;}
.nav-mobile summary{list-style:none;cursor:pointer;color:#fff;padding:8px;border-radius:8px;}
.nav-mobile summary::-webkit-details-marker{display:none;}
.nav-mobile summary .icon{width:24px;height:24px;}
/* On a phone the menu drops down the full width under the bar: the main
   sections and Contact, each a full-width row easy to tap. */
.nav-mobile-panel{position:fixed;left:0;right:0;top:64px;background:var(--surface);border-bottom:1px solid var(--border);
  box-shadow:0 18px 32px rgba(22,23,26,.18);padding:var(--s1) var(--s2) var(--s3);display:grid;}
.nav-mobile-panel a:not(.btn){display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:0 4px;
  color:var(--text);text-decoration:none;font-weight:700;font-size:17px;border-bottom:1px solid var(--border);}
.nav-mobile-panel a:not(.btn) .icon{color:var(--text-3);}
.nav-mobile-panel .btn{margin-top:var(--s2);min-height:48px;}
.nav-mobile[open] summary{background:rgba(255,255,255,.08);}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;font:inherit;font-weight:700;font-size:15px;line-height:1.2;
  padding:13px 22px;border-radius:var(--r);border:1px solid transparent;text-decoration:none;cursor:pointer;
  transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s;}
.btn-sm{padding:9px 16px;font-size:14px;}
.btn-primary{background:var(--teal);color:#fff;}
.btn-primary:hover{background:var(--teal-hover);color:#fff;}
.btn-secondary{background:var(--surface);color:var(--text);border-color:var(--border-strong);}
.btn-secondary:hover{border-color:var(--teal);color:var(--teal);}
.btn-ghost{color:#fff;border-color:rgba(255,255,255,.25);}
.btn-ghost:hover{color:#fff;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.4);}
.btn-light{background:#fff;color:var(--navy);}
.btn-light:hover{background:var(--teal-soft);color:var(--navy);}
.btn .icon{width:16px;height:16px;transition:transform .2s var(--ease);}
.btn:hover .icon{transform:translateX(2px);}

/* ---- Type ---- */
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);}
.section h2{font-size:clamp(28px,3.2vw,38px);line-height:1.18;letter-spacing:-.025em;font-weight:800;margin-top:12px;}
.h3,.section h2.h3{font-size:22px;letter-spacing:-.015em;margin:0 0 var(--s3);}
.lede{margin-top:var(--s2);font-size:18px;line-height:1.6;color:var(--text-2);}
.fine{margin-top:var(--s3);font-size:14px;color:var(--text-3);}

/* ---- Hero ---- */
.hero{position:relative;overflow:hidden;color:var(--on-dark);
  background:radial-gradient(1000px 520px at 85% -10%,rgba(53,55,62,.30),transparent 65%),
             linear-gradient(180deg,var(--navy),var(--navy-2));}
.hero-net{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.55;z-index:0;}
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.45fr 1fr;gap:var(--s6);align-items:center;
  padding-top:var(--s7);padding-bottom:var(--s7);}
.hero .eyebrow{color:var(--aqua);}
.hero h1.eyebrow{line-height:1.5;}
.hero .hero-slogan{margin-top:var(--s2);font-size:clamp(38px,4.6vw,58px);line-height:1.06;letter-spacing:-.035em;font-weight:800;color:#fff;}
.rotator{margin-top:var(--s2);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px;color:var(--aqua);min-height:1.6em;}
.rotator .prompt{color:var(--on-dark-3);}
.caret{display:inline-block;width:8px;height:1.05em;background:var(--aqua);vertical-align:-3px;margin-left:3px;opacity:.8;
  animation:blink 1.2s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}
[data-rotate]{display:inline-block;transition:opacity .4s var(--ease),transform .4s var(--ease);}
[data-rotate].out{opacity:0;transform:translateY(6px);}
.hero-lede{margin-top:var(--s3);font-size:18px;line-height:1.65;color:var(--on-dark-2);max-width:38rem;}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s4);}
.pills{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:var(--s4);}
.pills li{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--on-dark-2);}
.pills .icon{width:16px;height:16px;color:var(--aqua);}
.hero-side{display:grid;gap:var(--s2);}
.terminal{border-radius:var(--r-lg);overflow:hidden;background:rgba(12,13,14,.7);border:1px solid var(--line-dark);
  box-shadow:0 24px 48px rgba(0,0,0,.28);}
.terminal-bar{display:flex;align-items:center;gap:6px;padding:11px 16px;background:rgba(255,255,255,.03);border-bottom:1px solid var(--line-dark);}
.terminal-bar i{width:11px;height:11px;border-radius:50%;background:#EF6B63;}
.terminal-bar i:nth-child(2){background:#F2BE4A;}
.terminal-bar i:nth-child(3){background:#B0D63D;}
.terminal-bar span{margin-left:8px;font-size:12px;color:var(--on-dark-3);font-family:ui-monospace,Menlo,Consolas,monospace;}
.terminal pre{margin:0;padding:18px 20px 20px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13.5px;line-height:1.7;color:#D0D1D5;white-space:pre-wrap;min-height:calc(7 * 1.7em + 38px);}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s3);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:4px;}
.stat-big{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.15;}
.stat-small{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);}
.hero .stat{background:rgba(255,255,255,.04);border-color:var(--line-dark);box-shadow:none;padding:14px 16px;}
.hero .stat-big{color:#fff;font-size:clamp(17px,1.6vw,21px);white-space:nowrap;}
.hero .stat-small{color:var(--on-dark-3);font-size:11px;}

/* AI line art behind the hero. The wrapper (.ha) is moved by the script:
   leaning with the pointer and gliding away from it; the drawing inside drifts
   and turns on its own. */
.hero-art{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.ha{position:absolute;color:var(--aqua);opacity:.3;transition:opacity .45s var(--ease),filter .45s var(--ease);will-change:transform;}
.ha.near{opacity:.9;filter:drop-shadow(0 0 12px rgba(194,222,111,.55));}
.ha svg{display:block;width:100%;height:auto;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;animation:ha-float var(--t,16s) ease-in-out infinite alternate;}
@keyframes ha-float{0%{transform:translate(0,0) rotate(0deg);}50%{transform:translate(12px,-16px) rotate(3deg);}
  100%{transform:translate(-10px,10px) rotate(-3deg);}}
.ha-turn{transform-box:view-box;transform-origin:50% 50%;animation:ha-turn 40s linear infinite;}
.ha-fast{animation-duration:12s;}
.ha-reverse{animation-duration:24s;animation-direction:reverse;}
@keyframes ha-turn{to{transform:rotate(360deg);}}
.ha-lines{opacity:.45;}
.ha-nodes circle{fill:var(--navy);animation:ha-blink 3.2s ease-in-out infinite;}
.ha-nodes circle:nth-child(3n+1){animation-delay:-1s;}
.ha-nodes circle:nth-child(3n+2){animation-delay:-2.1s;}
@keyframes ha-blink{0%,100%{fill:var(--navy);}50%{fill:var(--aqua);}}
.ha-core{fill:rgba(194,222,111,.12);animation:ha-glow 2.6s ease-in-out infinite alternate;}
@keyframes ha-glow{to{fill:rgba(194,222,111,.4);}}
.ha text{fill:currentColor;stroke:none;font:800 17px Manrope,sans-serif;}
.ha-fill{fill:currentColor;stroke:none;}
.ha-lit{fill:rgba(194,222,111,.16);animation:ha-glow 3s ease-in-out infinite alternate;}
.ha-faint{opacity:.4;}
.ha-bars line{stroke-width:5;transform-box:fill-box;transform-origin:center;animation:ha-level 1.4s ease-in-out infinite alternate;}
.ha-bars line:nth-child(2n){animation-delay:-.5s;}
.ha-bars line:nth-child(3n){animation-delay:-.9s;}
@keyframes ha-level{from{transform:scaleY(.35);}to{transform:scaleY(1);}}
.ha-spark svg{fill:currentColor;stroke:none;animation:ha-twinkle 3.4s ease-in-out infinite;}
@keyframes ha-twinkle{0%,100%{transform:scale(.5) rotate(0deg);opacity:.3;}50%{transform:scale(1.1) rotate(45deg);opacity:1;}}
.ha-net{top:6%;left:38%;width:250px;--t:18s;}
.ha-globe{bottom:-80px;right:-60px;width:300px;opacity:.2;--t:26s;}
.ha-chip{top:8%;right:3%;width:96px;--t:14s;}
.ha-orbit{top:-60px;left:-70px;width:250px;opacity:.24;--t:21s;}
.ha-hex{bottom:5%;left:-30px;width:170px;--t:17s;}
.ha-wave{bottom:7%;left:56%;width:200px;--t:15s;}
.ha-cube{top:58%;left:50%;width:72px;--t:12s;}
.ha-spark{width:14px;opacity:.7;}
.ha-spark-1{top:22%;left:31%;}
.ha-spark-2{top:72%;left:35%;width:10px;}
.ha-spark-3{top:13%;left:63%;width:12px;}
.ha-spark-4{top:86%;right:31%;width:16px;}
.ha-spark-5{top:44%;left:3%;width:10px;}
.ha-spark-2 svg{animation-delay:-1.2s;}
.ha-spark-3 svg{animation-delay:-2.3s;}
.ha-spark-4 svg{animation-delay:-.6s;}
.ha-spark-5 svg{animation-delay:-1.8s;}

/* The games page's hero art (_hero_art_games.html): the games themselves.
   Placed round the edges, clear of the title on the left and the emblem
   on the right; each moves a little as its game does. */
.ga-px{fill:currentColor;stroke:none;}
.ga-tetris{top:7%;left:46%;width:96px;--t:17s;}
.ga-fall{transform-box:view-box;animation:ga-fall 3.6s cubic-bezier(.5,0,.8,.4) infinite;}
@keyframes ga-fall{0%{transform:translateY(-30px);opacity:0;}15%{opacity:1;}85%{transform:translateY(78px);opacity:1;}100%{transform:translateY(84px);opacity:0;}}
.ga-invader{top:9%;right:24%;width:84px;--t:13s;}
.ga-wobble{transform-box:fill-box;transform-origin:center;animation:ga-wobble 1.2s steps(2) infinite;}
@keyframes ga-wobble{50%{transform:translateX(6px);}}
.ga-maze{bottom:9%;left:38%;width:220px;--t:19s;}
.ga-chomp{transform-box:fill-box;transform-origin:30% 50%;animation:ga-chomp .45s ease-in-out infinite alternate;}
@keyframes ga-chomp{to{transform:scaleY(.82);}}
.ga-snake{bottom:6%;left:2%;width:180px;--t:16s;}
.ga-body{stroke-width:7;stroke-dasharray:14 5;}
.ga-barrel{top:16%;left:4%;width:64px;--t:12s;}
.ga-heli{top:5%;right:3%;width:130px;--t:15s;}
.ga-rotor{transform-box:fill-box;transform-origin:center;animation:ga-rotor .35s linear infinite alternate;}
@keyframes ga-rotor{to{transform:scaleX(.15);}}
.ga-drops{bottom:22%;left:60%;width:78px;--t:11s;}
.ga-lanes{top:46%;left:-40px;width:200px;opacity:.2;--t:20s;}
.ga-dash{stroke-dasharray:10 12;animation:ga-dash 1s linear infinite;}
@keyframes ga-dash{to{stroke-dashoffset:-22;}}
.ga-joystick{bottom:7%;right:4%;width:100px;--t:14s;}
.ga-tilt{transform-box:view-box;transform-origin:40px 64px;animation:ga-tilt 2.4s ease-in-out infinite alternate;}
@keyframes ga-tilt{from{transform:rotate(-14deg);}to{transform:rotate(14deg);}}
.ga-heart{width:26px;opacity:.45;}
.ga-heart-1{top:28%;left:30%;}
.ga-heart-2{top:78%;left:30%;width:20px;}
.ga-heart-3{top:20%;right:14%;width:22px;}
.ga-coin{width:24px;}
.ga-coin-1{top:62%;left:66%;}
.ga-coin-2{top:34%;right:30%;width:18px;}
.ga-coin-3{top:84%;left:52%;width:20px;}
.ga-spin{transform-box:fill-box;transform-origin:center;animation:ga-spin 2.2s ease-in-out infinite;}
@keyframes ga-spin{50%{transform:scaleX(.15);}}
@media (max-width:900px){
  .ga-tetris{left:auto;right:6%;top:4%;width:70px;}
  .ga-maze,.ga-drops,.ga-lanes,.ga-heart-1,.ga-heart-2,.ga-coin-1,.ga-coin-3{display:none;}
  .ga-invader{right:30%;top:3%;width:60px;}
}
@media (prefers-reduced-motion:reduce){
  .ga-fall,.ga-wobble,.ga-chomp,.ga-rotor,.ga-dash,.ga-tilt,.ga-spin{animation:none;}
}
@media (max-width:900px){
  .ha{opacity:.2;}
  .ha-net{top:auto;bottom:24%;left:auto;right:-40px;width:200px;}
  .ha-wave,.ha-cube,.ha-spark-3{display:none;}
}
@media (max-width:720px){
  .ha-chip{top:4%;width:70px;}
  .ha-globe{width:220px;}
  .ha-hex{width:120px;}
}

/* ---- The hero as a stargate ----
   On every page with a gate in its hero (.gate-hero, and its words .gate-text,
   both marked by site.js). site.js adds .gate-on (not for reduced motion) and sets --p from 0 to 1 as
   the page scrolls: the hero holds still, a gate opens in it and the view
   flies through, while the next section rises over it from below. */
.gate{position:absolute;left:50%;top:var(--gy,48%);width:min(78vw,680px);aspect-ratio:1;translate:-50% -50%;pointer-events:none;
  z-index:0;opacity:0;}
.gate-ring{position:absolute;inset:0;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(194,222,111,.9) 0deg 6deg,transparent 6deg 40deg);
  -webkit-mask:radial-gradient(circle,transparent 0 61%,#000 62% 68%,transparent 69%);
          mask:radial-gradient(circle,transparent 0 61%,#000 62% 68%,transparent 69%);}
.gate-ring::before{content:"";position:absolute;inset:3%;border-radius:50%;border:2px solid rgba(194,222,111,.55);}
.gate-ring::after{content:"";position:absolute;inset:-4%;border-radius:50%;border:1px solid rgba(194,222,111,.25);}
.gate-horizon{position:absolute;inset:16%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.85) 0,rgba(194,222,111,.55) 22%,rgba(53,55,62,.4) 48%,rgba(22,23,26,0) 70%);
  animation:horizon 2.8s ease-in-out infinite alternate;}
@keyframes horizon{from{scale:.94;opacity:.75;}to{scale:1.04;opacity:1;}}
.gate-on .gate-hero{position:sticky;top:var(--stick,72px);z-index:0;}
.gate-on main > section:not(.gate-hero){position:relative;z-index:1;}
.gate-on main > .section:not(.section-tint):not(.section-dark){background:var(--bg);}
.gate-on .gate-hero + section{border-radius:28px 28px 0 0;box-shadow:0 -28px 60px rgba(12,13,14,.45);}
.gate-on .gate{opacity:calc(min(1, var(--p,0) * 5) * (1 - var(--p,0) * .8));scale:calc(.3 + var(--p,0) * 2.8);}
.gate-on .gate-ring{rotate:calc(var(--p,0) * 200deg);}
.gate-on .gate-horizon{opacity:calc(var(--p,0) * 1.6);}
.gate-on .gate-text{transform-origin:50% var(--gy,45%);scale:calc(1 + var(--p,0) * .45);opacity:calc(1 - var(--p,0) * 1.6);}
.gate-on .gate-hero > .hero-net{scale:calc(1 + var(--p,0) * .9);}
.gate-on .gate-hero .ha{translate:calc(var(--wx,0) * var(--p,0) * 70vw) calc(var(--wy,0) * var(--p,0) * 70vh);
  scale:calc(1 + var(--p,0) * 1.6);}
@media (max-width:720px){
  .gate-on .gate-hero + section{border-radius:20px 20px 0 0;}
}

/* ---- Page heads ---- */
.page-hero{padding:var(--s5) 0 var(--s4);background:var(--surface);border-bottom:1px solid var(--border);}
.page-hero h1{font-size:clamp(34px,4.2vw,50px);line-height:1.1;letter-spacing:-.03em;font-weight:800;margin-top:var(--s2);}
.page-hero .lede{max-width:46rem;}
.page-hero .hero-actions{margin-top:var(--s4);}
.page-hero-title{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s2);}
.page-hero-title h1{margin-top:0;}
.page-hero-title .tag{margin-bottom:8px;}
.crumbs{font-size:13px;color:var(--text-3);}
.crumbs a{color:var(--text-2);text-decoration:none;}
.crumbs a:hover{color:var(--teal);}
.page-hero-dark{position:relative;overflow:hidden;color:var(--on-dark);border-bottom:0;
  background:radial-gradient(900px 420px at 90% -20%,rgba(53,55,62,.28),transparent 65%),linear-gradient(180deg,var(--navy),var(--navy-2));}
.page-hero-dark .wrap{position:relative;z-index:1;}
.page-hero-dark h1{color:#fff;}
.page-hero-dark .lede{color:var(--on-dark-2);}
.page-hero-dark .crumbs,.page-hero-dark .crumbs a{color:var(--on-dark-3);}
.page-hero-dark .crumbs a:hover{color:#fff;}
.page-hero-dark .card-icon{background:rgba(194,222,111,.12);color:var(--aqua);}

/* ---- Sections ---- */
.section{padding:var(--section) 0;}
.section-tint{background:var(--tint);}
.section-head{max-width:720px;margin-bottom:var(--s5);}
/* Two plain sections in a row share one gap, divided by a hairline. */
.section:not(.section-tint):not(.section-dark) + .section:not(.section-tint):not(.section-dark){padding-top:0;}
.section:not(.section-tint):not(.section-dark) + .section:not(.section-tint):not(.section-dark) > .wrap{border-top:1px solid var(--border);padding-top:var(--section);}
.section-slim{--section:var(--s6);}
.section-dark{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--navy),var(--navy-2));color:var(--on-dark);}
.section-dark .eyebrow{color:var(--aqua);}
.section-dark h2{color:#fff;}
.section-dark .lede{color:var(--on-dark-2);}
.section-dark + .section-dark{padding-top:0;}
.section-dark + .section-dark > .wrap{border-top:1px solid var(--line-dark);padding-top:var(--section);}
.section-dark > .wrap{position:relative;z-index:1;}

/* ---- Cards ---- */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);}
.card-grid-3{grid-template-columns:repeat(3,1fr);}
.card-grid-4{grid-template-columns:repeat(4,1fr);}
/* Flex instead of grid where the count varies, so a short last row sits in the middle. */
.card-grid-center{display:flex;flex-wrap:wrap;justify-content:center;}
.card-grid-center > *{flex:0 0 calc((100% - 2 * var(--s3)) / 3);}
@media (max-width:980px){ .card-grid-center > *{flex-basis:calc((100% - var(--s3)) / 2);} }
@media (max-width:720px){ .card-grid-center > *{flex-basis:100%;} }
.card,.panel{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow);}
.card{padding:28px;display:flex;flex-direction:column;gap:12px;}
.card .card-icon{margin-bottom:4px;}
.service-card{color:inherit;text-decoration:none;transition:transform .2s var(--ease),box-shadow .2s,border-color .2s;}
.service-card:hover{color:inherit;transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--border-strong);}
.card h3{font-size:18px;line-height:1.35;letter-spacing:-.01em;}
.card p{color:var(--text-2);font-size:15px;}
.card-more{margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;color:var(--teal);}
.card-more .icon{width:15px;height:15px;transition:transform .2s var(--ease);}
.service-card:hover .card-more .icon{transform:translateX(3px);}
.card-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:var(--teal-soft);color:var(--teal);flex:none;}
.card-icon .icon{width:22px;height:22px;}
.card-icon-lg{width:56px;height:56px;border-radius:12px;}
.card-icon-lg .icon{width:28px;height:28px;}
.panel{padding:var(--s4);}
.panel h2{font-size:22px;letter-spacing:-.015em;margin:0 0 var(--s3);}
.panel-accent{border-top:3px solid var(--teal);}
.value-card h3{font-size:17px;}
.feature-no{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;font-weight:700;color:var(--teal);letter-spacing:.06em;}
.tag{display:inline-block;align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;color:var(--navy);background:var(--aqua);}
.tag-light{background:var(--teal-soft);color:var(--teal);margin-bottom:8px;}
.tag-soon{background:#F4E2B8;color:#6B4A0E;}
.tag-light.tag-soon{background:#FBF1DC;color:#7A520C;}

/* Products on the dark band. */
.product-card{color:var(--on-dark);text-decoration:none;background:rgba(255,255,255,.035);border-color:var(--line-dark);box-shadow:none;
  transition:transform .2s var(--ease),border-color .2s,background-color .2s;}
.product-card:hover{color:var(--on-dark);transform:translateY(-3px);border-color:rgba(194,222,111,.4);background:rgba(255,255,255,.06);}
.product-card h3{color:#fff;font-size:19px;}
.product-card p{color:var(--on-dark-2);}
.product-card .card-icon{background:rgba(194,222,111,.12);color:var(--aqua);}
.product-card .card-more{color:var(--aqua);}
.product-card:hover .card-more .icon{transform:translateX(3px);}

/* Zero trust: three principle cards on the dark band. */
.zt-card{background:rgba(255,255,255,.035);border-color:var(--line-dark);box-shadow:none;gap:14px;}
.zt-card h3{color:#fff;font-size:20px;}
.zt-card > p{color:var(--on-dark-2);}
.zt-card .card-icon{background:rgba(194,222,111,.12);color:var(--aqua);}
.zt-card .ticks{margin-top:4px;}
.zt-card .ticks li{color:var(--on-dark);font-size:15px;}
.zt-card .ticks .icon{color:var(--aqua);}
.zt-no{position:absolute;top:24px;right:26px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;
  font-weight:700;letter-spacing:.06em;color:var(--on-dark-3);}
.section-dark .text-link{color:var(--aqua);}
.section-dark .text-link:hover{color:#fff;}

/* ---- Split layouts ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:start;}
.why{margin-top:var(--s4);padding-left:var(--s3);border-left:2px solid var(--teal);}
.why h3{font-size:18px;}
.why h3 span{color:var(--teal);}
.why p{color:var(--text-2);margin-top:6px;}
.ai-panel{display:grid;gap:var(--s2);border-top:3px solid var(--teal);}
.ai-panel h3{font-size:22px;letter-spacing:-.015em;}
.ai-panel p{color:var(--text-2);}
.text-link{display:inline-flex;align-items:center;gap:6px;font-weight:700;text-decoration:none;}
.text-link .icon{width:15px;height:15px;transition:transform .2s var(--ease);}
.text-link:hover .icon{transform:translateX(3px);}
.link-row{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:var(--s4);}

/* ---- Lists ---- */
.ticks{list-style:none;padding:0;display:grid;gap:12px;}
.ticks li{display:flex;gap:12px;align-items:flex-start;color:var(--text-2);}
.ticks .icon{width:18px;height:18px;margin-top:4px;color:var(--teal);stroke-width:2.4;}
.ticks-inline{margin-top:var(--s2);gap:6px;}
.ticks-inline li{font-size:14px;}
.ticks-inline .icon{width:16px;height:16px;margin-top:3px;}
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);}
.steps li{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:28px;box-shadow:var(--shadow);}
.step-no{display:grid;place-items:center;width:36px;height:36px;border-radius:999px;background:var(--navy);color:#fff;font-weight:800;font-size:15px;}
.steps h3{margin-top:var(--s2);font-size:18px;}
.steps p{margin-top:6px;color:var(--text-2);font-size:15px;}
.service-list{display:grid;gap:var(--s2);}
.service-row{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s3);align-items:start;}
.service-row h2{font-size:21px;margin:0 0 6px;letter-spacing:-.015em;}
.service-row h2 a{color:var(--text);text-decoration:none;}
.service-row h2 a:hover{color:var(--teal);}
.service-row p{color:var(--text-2);}
.service-row .btn{align-self:center;}
.about-stats{display:grid;gap:var(--s2);}
.prose p{margin-top:var(--s2);color:var(--text-2);font-size:17px;}
.prose h2{font-size:24px;margin-top:var(--s5);}
.prose h2:first-child{margin-top:0;}
.faq{max-width:760px;}
.faq h3{font-size:18px;margin-top:var(--s4);}
.faq p{margin-top:6px;}
.faq .fine{margin-top:var(--s4);}
.case-shot{margin:0;max-height:520px;overflow:hidden;border-radius:14px;box-shadow:0 12px 32px rgba(23,24,27,.16);}
.case-shot img{display:block;width:100%;height:auto;}
.prose ul,.prose ol{margin-top:var(--s2);padding-left:22px;color:var(--text-2);display:grid;gap:8px;font-size:16px;}
.legal-list{display:grid;grid-template-columns:max-content 1fr;gap:10px 24px;margin-top:var(--s2);font-size:16px;}
.legal-list dt{font-weight:700;color:var(--text);}
.legal-list dd{margin:0;color:var(--text-2);}

/* ---- Flows ---- */
.flow{padding:28px 28px 24px;border-radius:var(--r-lg);background:linear-gradient(180deg,var(--navy),var(--navy-2));
  border:1px solid var(--navy-3);box-shadow:var(--shadow-md);overflow-x:auto;scrollbar-width:none;}
.flow::-webkit-scrollbar{display:none;}
.panel .flow{margin-top:var(--s1);}
.flow figcaption{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--aqua);margin-bottom:var(--s3);}
.flow-steps{--n:6;list-style:none;padding:0;margin:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(104px,1fr);
  position:relative;min-width:calc(var(--n) * 104px);}
.flow-steps::before{content:"";position:absolute;left:calc(50% / var(--n));right:calc(50% / var(--n));top:9px;height:2px;
  background:rgba(194,222,111,.28);}
.flow-steps::after{content:"";position:absolute;top:5px;left:calc(50% / var(--n));width:10px;height:10px;border-radius:50%;
  background:#fff;box-shadow:0 0 12px 3px rgba(194,222,111,.7);animation:travel var(--flow-t) linear infinite;}
@keyframes travel{from{left:calc(50% / var(--n));}to{left:calc(100% - 50% / var(--n) - 10px);}}
.flow-steps li,.flow-branches li{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:0 8px;}
.flow-dot{width:20px;height:20px;border-radius:50%;background:var(--navy);border:2px solid var(--aqua);position:relative;z-index:1;}
.flow-label{font-size:13px;font-weight:600;color:var(--on-dark-2);line-height:1.35;}
/* One trip of the pulse takes --flow-t; step i is reached i/(n-1) of the way,
   and lights up then, glowing briefly before it fades for the next one. */
.flow{--flow-t:calc(var(--n,6) * 1.4s);}
.flow-steps,.flow-branches{--flow-t:calc(var(--n) * 1.4s);}
.flow-dot{animation:flow-lit var(--flow-t) linear infinite;animation-delay:calc(var(--i,0) / (var(--n) - 1) * var(--flow-t));}
.flow-label{animation:flow-lit-label var(--flow-t) linear infinite;animation-delay:calc(var(--i,0) / (var(--n) - 1) * var(--flow-t));}
@keyframes flow-lit{0%,10%{background:var(--aqua);box-shadow:0 0 0 5px rgba(194,222,111,.18),0 0 18px 2px rgba(194,222,111,.75);transform:scale(1.18);}
  28%,100%{background:var(--navy);box-shadow:none;transform:none;}}
@keyframes flow-lit-label{0%,10%{color:#fff;}28%,100%{color:var(--on-dark-2);}}
/* Branches: a dashed bracket down from two neighbouring steps, joining at a
   node of its own, for the path taken only sometimes. */
.flow-branches{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:repeat(var(--n),minmax(104px,1fr));
  min-width:calc(var(--n) * 104px);}
.flow-branches li{grid-row:1;padding-top:46px;}
.flow-branches li::before{content:"";position:absolute;top:0;left:calc(25% + 6px);right:calc(25% + 6px);height:22px;border:2px dashed rgba(194,222,111,.35);
  border-top:0;border-radius:0 0 14px 14px;}
.flow-branches li::after{content:"";position:absolute;top:22px;left:50%;width:0;height:24px;border-left:2px dashed rgba(194,222,111,.35);}
.flow-branches .flow-dot{width:16px;height:16px;}
/* A branch spans two columns, but its neighbour may start one column along:
   its label keeps to one column's width so two neighbours never overlap. */
.flow-branches .flow-label{font-weight:500;font-size:12.5px;max-width:min(150px,50%);}
.fb-0{grid-column:1 / span 2;} .fb-1{grid-column:2 / span 2;} .fb-2{grid-column:3 / span 2;} .fb-3{grid-column:4 / span 2;}
.fb-4{grid-column:5 / span 2;} .fb-5{grid-column:6 / span 2;} .fb-6{grid-column:7 / span 2;} .fb-7{grid-column:8 / span 2;}

/* ---- Capabilities ---- */
.cap-index{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s4);}
.cap-index a{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;
  color:var(--on-dark);text-decoration:none;background:rgba(255,255,255,.04);border:1px solid var(--line-dark);transition:background-color .15s,border-color .15s;}
.cap-index a:hover{color:#fff;background:rgba(194,222,111,.12);border-color:rgba(194,222,111,.35);}
.cap-index span{font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--aqua);font-size:12px;}
.cap-list{display:grid;gap:var(--s3);}
.cap{scroll-margin-top:96px;display:grid;gap:var(--s3);}
.cap-head{display:flex;align-items:baseline;gap:var(--s2);}
.cap-head h2{margin:0;font-size:23px;}
.cap-body{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);}
.cap-body h3{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-bottom:var(--s2);}
.chips{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--s2);}
.chips li{padding:5px 11px;border-radius:999px;font-size:13px;font-weight:600;background:var(--sunken);border:1px solid var(--border);color:var(--text-2);}
.chips li.chip-own{background:var(--navy);color:#fff;border-color:var(--navy);}

/* ---- The spec sheet ---- */
.spec-section .wrap{align-items:center;}
.spec{border-radius:var(--r-lg);overflow:hidden;background:rgba(12,13,14,.6);border:1px solid var(--line-dark);}
.spec dl{margin:0;padding:20px 22px 22px;display:grid;grid-template-columns:auto 1fr;gap:10px 20px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;}
.spec dt{color:var(--aqua);}
.spec dt::after{content:":";}
.spec dd{margin:0;color:var(--on-dark);}
.spec dd b{color:#fff;}
.spec dd em{font-style:normal;color:var(--on-dark-3);}
.spec dd em.spec-why{display:block;margin-top:6px;font-size:.92em;line-height:1.55;}
.meter{display:block;height:5px;margin-top:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;max-width:260px;}
.meter i{display:block;height:100%;width:0;border-radius:inherit;background:var(--aqua);transition:width 1.6s var(--ease);}

/* ---- Call to action ---- */
.cta-band{position:relative;overflow:hidden;background:var(--navy-2);color:#fff;border-top:1px solid var(--line-dark);}
.cta-band .wrap{position:relative;z-index:1;}
.cta-band .hero-net{opacity:.4;}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding-top:var(--s6);padding-bottom:var(--s6);flex-wrap:wrap;}
.cta-band h2{font-size:clamp(24px,2.8vw,32px);letter-spacing:-.02em;line-height:1.2;}
.cta-band p{margin-top:8px;color:var(--on-dark-2);}

/* ---- Forms ---- */
.form{display:grid;gap:20px;}
.field{display:grid;gap:8px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);}
.field label{font-weight:700;font-size:14px;}
.optional{font-weight:500;color:var(--text-3);}
input,select,textarea{font:inherit;font-size:15px;color:var(--text);background:var(--surface);border:1px solid var(--border-strong);
  border-radius:var(--r);padding:12px 14px;width:100%;transition:border-color .15s,box-shadow .15s;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(53,55,62,.16);}
textarea{resize:vertical;min-height:150px;}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--text-2);}
.check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--teal);}
.form .btn{justify-self:start;}
/* Cloudflare Turnstile: the form's full width; its height kept while it loads.
   It will not draw narrower than 300px, which is more than a 360px phone left
   inside the card: the box pushed the whole card off the right of the screen.
   So the form's items may be narrower than their content, the card's padding
   is trimmed on small phones (300px then fits at full size from 360px), and
   only below that is the box scaled down to the form's width. */
.form{container-type:inline-size;}
.form > *{min-width:0;}
.turnstile-box{min-height:65px;max-width:100%;}
@media (max-width:400px){ .contact-split .panel{padding:var(--s3) 12px;} }
@container (max-width:299px){ .turnstile-box{transform:scale(.87);transform-origin:0 0;margin-bottom:-9px;} }
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;}
.msg{display:flex;gap:12px;padding:14px 16px;border-radius:var(--r);margin-bottom:20px;}
.msg ul{margin:0;padding-left:18px;}
.msg-ok{background:var(--ok-bg);color:#3A510C;}
.msg-ok .icon{color:var(--ok);margin-top:3px;}
.msg-bad{background:var(--bad-bg);color:#7F1D1D;}
.contact-split{grid-template-columns:1.5fr 1fr;gap:var(--s4);}
.contact-aside p{color:var(--text-2);}
.contact-list{list-style:none;padding:0;margin-top:var(--s3);display:grid;gap:12px;}
.contact-list li{display:flex;gap:10px;align-items:center;}
.contact-list .icon{color:var(--teal);}

/* ---- Games ---- */
/* The page is one screen: header 72 + padding 2x32 + panel padding 2x24 leave
   100svh - 184px for the board, which is drawn at 220x396 and scaled up. */
.games-page{padding:var(--s4) 0;background:var(--bg);}
.games{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s6);align-items:center;
  min-height:calc(100svh - 72px - 2 * var(--s4));}
.games-intro{display:grid;gap:var(--s3);align-content:center;max-width:460px;}
.games-intro h2{font-size:clamp(26px,3vw,34px);line-height:1.15;letter-spacing:-.02em;font-weight:800;margin-top:-8px;}
.games-intro .lede{margin-top:-8px;}
/* The seven games as buttons in three equal columns: two full rows, and the
   seventh centred under the middle, so every button lines up. */
.games-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:10px;background:var(--sunken);
  border:1px solid var(--border);border-radius:14px;}
.games-tabs button{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 6px;
  font:inherit;font-weight:700;font-size:14px;min-height:46px;border:1px solid var(--border);border-radius:10px;
  background:var(--surface);color:var(--text-2);cursor:pointer;white-space:nowrap;
  transition:background-color .15s,color .15s,border-color .15s,transform .15s;}
.games-tabs button:nth-child(7){grid-column:2;}
/* The buttons fit the room they have, which narrows beside a wide game: the
   icons give way first, then the text shrinks a touch. */
.games-tabs{container-type:inline-size;}
@container (max-width:410px){ .games-tabs button .icon{display:none;} }
@container (max-width:330px){ .games-tabs button{font-size:12.5px;padding:0 3px;} }
@container (max-width:410px){ .games-tabs button{white-space:normal;line-height:1.15;text-align:center;} }
.games-tabs button{min-width:0;overflow:hidden;text-overflow:ellipsis;}
.games-tabs button .icon{width:17px;height:17px;flex:none;color:var(--teal);}
/* Liquid buttons: a pool of teal waits below each one, two layers turning
   slowly so its surface rolls like water. Pointing at a button floods it,
   with a jelly wobble; the chosen game stays full, its surface rolling at the
   top; moving off drains it. */
.games-tabs button{position:relative;overflow:hidden;isolation:isolate;}
.games-tabs button::before,.games-tabs button::after{content:"";position:absolute;left:50%;top:210%;width:260%;aspect-ratio:1;
  translate:-50% 0;border-radius:42%;pointer-events:none;transition:top 1.2s cubic-bezier(.25,1,.4,1);
  animation:liquidTurn 14s linear infinite;}
.games-tabs button::before{z-index:-1;background:linear-gradient(180deg,#B6ED12,var(--teal));}
.games-tabs button::after{z-index:-2;top:220%;border-radius:38%;background:#D9F978;opacity:.55;animation-duration:20s;animation-direction:reverse;}
@keyframes liquidTurn{to{rotate:360deg;}}
.games-tabs button:hover{color:#fff;border-color:var(--teal);animation:liquidWobble .65s ease-out;}
.games-tabs button:hover::before{top:10%;}
.games-tabs button:hover::after{top:2%;}
.games-tabs button:hover .icon{color:#fff;}
@keyframes liquidWobble{0%{transform:scale(1);}30%{transform:scale(1.06,.92);}50%{transform:scale(.97,1.04);}
  70%{transform:scale(1.02,.98);}100%{transform:scale(1);}}
/* The chosen game: no water, just a solid teal that glows softly in and out. */
.games-tabs button[aria-selected="true"]{color:#fff;background:var(--teal);border-color:var(--teal);
  animation:tabGlow 2.6s ease-in-out infinite;}
.games-tabs button[aria-selected="true"]::before,.games-tabs button[aria-selected="true"]::after{display:none;}
.games-tabs button[aria-selected="true"] .icon{color:#fff;}
@keyframes tabGlow{0%,100%{box-shadow:0 0 0 0 rgba(182,237,18,0),0 6px 16px -8px rgba(56,58,66,.5);}
  50%{box-shadow:0 0 0 3px rgba(217,249,120,.35),0 0 22px 2px rgba(182,237,18,.55);}}
@media (prefers-reduced-motion:reduce){
  .games-tabs button::before,.games-tabs button::after{animation:none;transition:none;}
  .games-tabs button:hover,.games-tabs button[aria-selected="true"]{animation:none;}
}
.games-tabs button[aria-selected="true"] .icon{color:#fff;}
.games-scores{display:flex;gap:var(--s5);font-size:14px;color:var(--text-3);}
.games-scores strong{display:block;color:var(--text);font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.2;
  font-variant-numeric:tabular-nums;}
.games-hint{font-size:14px;color:var(--text-3);min-height:2.6em;}
.games-board{display:grid;justify-items:center;gap:var(--s2);padding:var(--s3);}
.games-canvas{display:block;width:min(330px,calc((100svh - 184px) * 220 / 396));min-width:180px;height:auto;aspect-ratio:220/396;
  border-radius:10px;background:var(--navy);touch-action:none;cursor:pointer;}
/* Phone controls: a joystick for the left thumb, round buttons for the right,
   staggered like a game controller's. */
.games-pad{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;max-width:360px;padding:0 4px;
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
.pad-stick{position:relative;flex:none;width:128px;height:128px;border-radius:50%;touch-action:none;cursor:pointer;
  background:radial-gradient(circle,var(--sunken) 0 54%,var(--surface) 56%);border:1px solid var(--border-strong);
  box-shadow:inset 0 2px 10px rgba(22,23,26,.14);}
.pad-stick::before{content:"";position:absolute;inset:9px;border-radius:50%;border:1px dashed var(--border-strong);opacity:.7;}
.pad-knob{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 40% 35%,#ABD52C,var(--teal) 55%,#2B2D33);
  box-shadow:0 5px 14px rgba(22,23,26,.35),inset 0 2px 0 rgba(255,255,255,.25);transition:transform .14s var(--ease);}
.pad-stick.is-held .pad-knob{transition:none;}
.pad-buttons{display:flex;align-items:center;gap:14px;}
.pad-btn{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;font:inherit;font-weight:800;font-size:14px;
  border:1px solid var(--border-strong);background:var(--surface);color:var(--text);cursor:pointer;touch-action:none;
  box-shadow:0 4px 10px rgba(22,23,26,.12);}
.pad-btn[hidden]{display:none;}
.pad-btn:active{background:var(--teal-soft);border-color:var(--teal);color:var(--teal);transform:scale(.95);}
.pad-up{margin-top:-30px;}
.pad-action{width:80px;height:80px;background:var(--teal);border-color:var(--teal);color:#fff;}
.pad-action:active{background:var(--teal-hover);color:#fff;}
/* Three buttons (Sand Drift): Rotate over Faster, as tall as the stick, with Drop beside them. */
.pad-three{display:grid;grid-template-columns:auto auto;gap:8px 14px;align-items:center;}
.pad-three .pad-up,.pad-three .pad-down{width:60px;height:60px;margin:0;font-size:12px;}
.pad-three .pad-up{grid-area:1/1;}
.pad-three .pad-down{grid-area:2/1;}
.pad-three .pad-action{grid-area:1/2/3/3;}
/* The narrowest phones: everything smaller, so nothing runs off the screen. */
@media (max-width:359px){
  .games-pad{gap:8px;padding:0;}
  .pad-stick{width:104px;height:104px;}
  .pad-knob{width:48px;height:48px;margin:-24px 0 0 -24px;}
  .pad-three{gap:6px 8px;}
  .pad-three .pad-up,.pad-three .pad-down{width:52px;height:49px;border-radius:24px;font-size:11px;}
  .pad-three .pad-action{width:68px;height:68px;}
}
/* A keyboard and a mouse need no buttons. */
@media (hover:hover) and (pointer:fine){ .games-pad{display:none;} }
/* Narrow screens stack: a short heading, the tabs and scores, then the board
   and its buttons, which give way so they fit on the screen together. */
@media (max-width:900px){
  /* minmax(0,1fr): the column is the screen's width, never pushed wider by its contents. */
  .games{grid-template-columns:minmax(0,1fr);gap:var(--s2);min-height:0;justify-items:center;}
  .games-intro{max-width:520px;width:100%;gap:12px;}
  .games-intro h2{font-size:24px;margin-top:0;}
  .games-intro .lede{display:none;}
  .games-scores{justify-content:space-between;gap:var(--s2);}
  .games-scores span{display:flex;align-items:baseline;gap:8px;}
  .games-scores strong{font-size:20px;}
  .games-hint{display:none;}
  .games-board{width:100%;max-width:520px;padding:var(--s2);gap:12px;}
  .games-canvas{width:min(100%,330px,calc((100svh - 396px) * 220 / 396));min-width:160px;}
}
@media (max-width:900px) and (hover:hover) and (pointer:fine){
  .games-canvas{width:min(100%,330px,calc((100svh - 300px) * 220 / 396));}
}

/* The artwork cannot be dragged off the page or selected (site.js stops "Save image as"). */
svg,canvas,img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;}
.topics .chips{margin:0;}
.topics .h3{margin-bottom:var(--s2);}

/* ---- Footer: a line to start a conversation, the services in their five
   groups with a search, products and company, then the small print. ---- */
.footer{position:relative;overflow:hidden;background:radial-gradient(120% 80% at 85% 0%,#25272B 0%,var(--navy) 55%);
  color:var(--on-dark-3);padding-top:var(--s5);}
/* A teal line sweeps slowly along the top edge. */
.footer-glow{position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent 0%,rgba(171,213,44,.15) 20%,#ABD52C 50%,rgba(171,213,44,.15) 80%,transparent 100%) 0 0/50% 100% repeat-x;
  animation:footerSweep 9s linear infinite;}
@keyframes footerSweep{to{background-position:100% 0;}}
.footer-cta{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
  padding:var(--s3) var(--s4);margin-bottom:var(--s5);border-radius:var(--r-lg);
  background:linear-gradient(120deg,rgba(171,213,44,.16),rgba(171,213,44,.04));border:1px solid rgba(217,249,120,.22);}
.footer-cta-title{color:#fff;font-size:clamp(18px,2vw,22px);font-weight:800;letter-spacing:-.01em;}
.footer-cta-text{margin-top:4px;font-size:14px;color:var(--on-dark-2);max-width:34rem;}
.footer-cta-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.footer-pill{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:600;
  color:var(--on-dark);text-decoration:none;border:1px solid var(--line-dark);background:rgba(255,255,255,.04);transition:border-color .2s,background .2s;}
.footer-pill:hover{border-color:#ABD52C;background:rgba(171,213,44,.12);color:#fff;}
.footer-pill .icon{width:16px;height:16px;color:#D9F978;}
.footer-main{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--s5);}
.brand-footer .brand-name{font-size:18px;}
.footer-slogan{margin-top:var(--s2);color:var(--on-dark);font-weight:700;}
.footer-note{margin-top:8px;font-size:14px;max-width:28rem;}
.footer-badges{list-style:none;padding:0;margin:var(--s3) 0 0;display:flex;flex-wrap:wrap;gap:8px;}
.footer-badges li{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:12.5px;font-weight:700;
  color:var(--on-dark-2);background:rgba(255,255,255,.05);border:1px solid var(--line-dark);}
.footer-badges .icon{width:14px;height:14px;color:#D9F978;}
.footer-reach{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:var(--s2);font-size:14px;}
.footer-reach a{display:inline-flex;align-items:center;gap:7px;color:var(--on-dark-2);text-decoration:none;}
.footer-reach a:hover{color:#fff;}
.footer-reach .icon{width:15px;height:15px;color:#D9F978;}
.footer-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);}
.footer-title{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark);margin-bottom:var(--s2);}
.footer-links{list-style:none;padding:0;margin:0;display:grid;gap:9px;font-size:14px;}
/* Links slide a touch to the right on hover, with a small teal arrow. */
.footer-links a{position:relative;display:inline-block;color:var(--on-dark-2);text-decoration:none;transition:color .2s,transform .2s var(--ease);}
.footer-links a::before{content:"";position:absolute;left:-12px;top:50%;width:6px;height:6px;margin-top:-3px;border-top:2px solid #ABD52C;
  border-right:2px solid #ABD52C;transform:rotate(45deg) scale(.4);opacity:0;transition:opacity .2s,transform .2s;}
.footer-links a:hover,.footer-links a:focus-visible{color:#fff;transform:translateX(10px);}
.footer-links a:hover::before,.footer-links a:focus-visible::before{opacity:1;transform:rotate(45deg) scale(1);}
/* The services: five groups side by side, with a search over them. */
.footer-services{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line-dark);}
.footer-services-head{display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap;margin-bottom:var(--s3);}
.footer-services-head .footer-title{margin:0;}
.footer-search{position:relative;flex:0 1 300px;}
.footer-search .icon{position:absolute;left:12px;top:50%;width:16px;height:16px;margin-top:-8px;color:var(--on-dark-3);pointer-events:none;}
.footer-search input{width:100%;min-height:40px;padding:0 12px 0 36px;border-radius:999px;font:inherit;font-size:16px;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid var(--line-dark);transition:border-color .2s,background .2s;}
.footer-search input::placeholder{color:var(--on-dark-3);}
.footer-search input:focus{outline:none;border-color:#ABD52C;background:rgba(171,213,44,.1);box-shadow:0 0 0 3px rgba(171,213,44,.2);}
.footer-all{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:#D9F978;text-decoration:none;}
.footer-all .icon{width:16px;height:16px;transition:transform .2s;}
.footer-all:hover .icon{transform:translateX(3px);}
.footer-groups{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s3);}
.footer-group summary{display:flex;align-items:center;gap:10px;list-style:none;margin-bottom:12px;font-size:14px;font-weight:800;color:#fff;cursor:default;}
.footer-group summary::-webkit-details-marker{display:none;}
.footer-group-icon{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:9px;color:#D9F978;
  background:rgba(171,213,44,.14);box-shadow:inset 0 0 0 1px rgba(217,249,120,.25);transition:box-shadow .25s;}
.footer-group:hover .footer-group-icon{box-shadow:inset 0 0 0 1px rgba(217,249,120,.5),0 0 14px rgba(171,213,44,.45);}
.footer-group-icon .icon{width:16px;height:16px;}
.footer-chevron{display:none;}
.footer-links li[hidden],.footer-group[hidden]{display:none;}
.footer-nomatch{margin-top:var(--s2);font-size:14px;color:var(--on-dark-2);}
.footer-nomatch a{color:#D9F978;font-weight:700;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:var(--s5);padding-top:var(--s3);
  padding-bottom:var(--s4);border-top:1px solid var(--line-dark);font-size:13px;}
.footer-top{display:inline-flex;align-items:center;gap:6px;color:var(--on-dark-2);text-decoration:none;font-weight:600;}
.footer-top .icon{width:15px;height:15px;transform:rotate(-90deg);transition:transform .2s;}
.footer-top:hover{color:#fff;}
.footer-top:hover .icon{transform:rotate(-90deg) translateX(3px);}
/* Sections fade up as they come into view (site.js adds is-ready, then is-in). */
.footer.is-ready [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
.footer.is-ready [data-reveal].is-in{opacity:1;transform:none;}
@media (max-width:1100px){ .footer-groups{grid-template-columns:repeat(3,minmax(0,1fr));} }
/* A phone: each group folds away behind its title. */
@media (max-width:720px){
  .footer-main{grid-template-columns:1fr;gap:var(--s4);}
  .footer-cta{padding:var(--s3) 18px;}
  .footer-cta-actions .btn{width:100%;justify-content:center;}
  .footer-search{flex:1 1 100%;order:3;}
  .footer-groups{grid-template-columns:1fr;gap:0;}
  .footer-group{border-bottom:1px solid var(--line-dark);}
  .footer-group summary{margin:0;min-height:52px;cursor:pointer;}
  .footer-chevron{display:block;margin-left:auto;width:16px;height:16px;color:var(--on-dark-3);transform:rotate(90deg);transition:transform .2s;}
  .footer-group[open] .footer-chevron{transform:rotate(-90deg);}
  .footer-group .footer-links{padding:0 0 12px 40px;}
}
@media (prefers-reduced-motion:reduce){
  .footer-glow{animation:none;}
  .footer.is-ready [data-reveal]{opacity:1;transform:none;transition:none;}
  .footer-links a,.footer-links a::before{transition:none;}
}

/* ---- Quiet movement ---- */
/* Items fade in as they are scrolled to, and stay. Quick and in order (--d,
   from the script: each item a step after the one before it in its row), so
   a row arrives together instead of trickling in. A fade only: nothing moves
   while the page scrolls. Icons sit still. */
.js [data-reveal]{opacity:0;}
.js [data-reveal].in{opacity:1;transition:opacity .55s var(--ease) var(--d,0ms);}

/* Scroll progress, under the header. */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;pointer-events:none;}
.scroll-progress i{display:block;height:100%;transform-origin:left;transform:scaleX(0);background:var(--teal);}

/* No scrollbar, as the owner asked. The page scrolls with wheel, touch and keys;
   where you are is shown by the section dots, the back-to-top ring and the line. */
html{scrollbar-width:none;-ms-overflow-style:none;}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none;}
.cap-index{scrollbar-width:none;}
.cap-index::-webkit-scrollbar{display:none;}

/* Back to top, once you are well down a page. */
.to-top{position:fixed;right:20px;bottom:20px;z-index:55;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--navy);box-shadow:0 8px 20px rgba(22,23,26,.25);color:#fff;
  opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .25s,transform .25s var(--ease);}
.to-top:hover{color:#fff;}
.to-top.show{opacity:1;transform:none;pointer-events:auto;}
.to-top-arrow{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease);}
.to-top:hover .to-top-arrow{transform:translateY(-2px);}

/* ---- Smaller screens ---- */
/* Six menu items need about 900px; below that, the menu button. */
@media (max-width:900px){
  .nav{display:none;}
  .nav-mobile{display:block;}
  .nav-mobile-panel{top:72px;}
}
@media (max-width:980px){
  :root{--section:80px;}
  .hero-inner,.split,.contact-split{grid-template-columns:minmax(0,1fr);gap:var(--s5);}
  .hero-inner{padding-top:var(--s6);padding-bottom:var(--s6);}
  .card-grid,.card-grid-3{grid-template-columns:repeat(2,1fr);}
  .card-grid-4,.steps{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:720px){
  :root{--section:var(--s6);}
  .section-slim{--section:var(--s5);}
  .wrap{padding:0 var(--s2);}
  .topbar-inner{height:64px;}
  .nav-mobile-panel{top:64px;}
  .hero-inner{padding-top:var(--s5);padding-bottom:var(--s5);}
  .hero-lede{font-size:17px;}
  .hero-stats{grid-template-columns:1fr;}
  .page-hero{padding:var(--s5) 0 var(--s4);}
  .card-grid,.card-grid-3,.card-grid-4,.steps,.field-row,.cap-body{grid-template-columns:1fr;}
  .card,.panel,.steps li{padding:var(--s3);}
  .section-head{margin-bottom:var(--s4);}
  .service-row{grid-template-columns:1fr;gap:var(--s2);}
  .service-row .btn{justify-self:start;}
  .page-hero-title{align-items:flex-start;flex-direction:column;}
  .terminal pre{font-size:12px;min-height:calc(8 * 1.7em + 38px);}
  .flow{padding:20px 16px;}
  .legal-list{grid-template-columns:1fr;gap:0;}
  .legal-list dd{margin-bottom:10px;}
  .cta-inner{padding-top:var(--s5);padding-bottom:var(--s5);}
  .to-top{right:14px;bottom:14px;width:44px;height:44px;}
}
/* Touch screens: every link and button at least 44px tall, so a thumb hits
   the one it means; labels no smaller than 12px. */
@media (pointer:coarse), (max-width:720px){
  .footer-links{gap:0;}
  .footer-links a,.text-link,.crumbs a,.service-row h2 a,.contact-list a,.cap-index a{display:inline-flex;align-items:center;min-height:44px;}
  .crumbs a{padding:0 4px;margin:0 -4px;}
  .link-row{gap:0 24px;}
  .nav-mobile summary{display:grid;place-items:center;width:44px;height:44px;padding:0;}
  .check{min-height:44px;align-items:center;}
  .check input{width:22px;height:22px;margin-top:0;}
  .tag,.hero .stat-small,.stat-small{font-size:12px;}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;scroll-behavior:auto !important;}
  .caret,.flow-steps::after,.flow-dot,.flow-label,.ha svg,.ha-turn,.ha-nodes circle,.ha-core,.ha-lit,.ha-bars line{animation:none !important;}
  .js [data-reveal]{opacity:1;}
  .card .card-icon{animation:none;}
}

/* ---- Measured availability (app/status.py, templates/_availability.html) ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.avail{margin-top:var(--s3);max-width:420px;}
.avail-head{display:flex;flex-wrap:wrap;gap:6px 22px;}
.avail-figure{margin:0;font-size:13px;color:var(--text-2);}
.avail-figure strong{font-size:20px;color:var(--text);letter-spacing:-.01em;font-variant-numeric:tabular-nums;margin-right:2px;}
.avail-chart{display:block;width:100%;max-width:340px;height:auto;margin-top:8px;overflow:visible;}
.avail-grid{stroke:var(--border);stroke-width:1;}
.avail-axis{font-size:9px;fill:var(--text-3);font-variant-numeric:tabular-nums;}
.avail-line{fill:none;stroke:var(--teal);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;}
.avail-dot circle{fill:var(--teal);stroke:var(--surface);stroke-width:2;}
.avail-dot .avail-hit{fill:transparent;stroke:none;}
.avail-dot:hover circle:not(.avail-hit){r:5;}
.avail-note{margin:6px 0 0;font-size:12px;color:var(--text-3);}
.avail-panel .avail{margin-top:0;max-width:none;}
.avail-panel .avail-chart{max-width:400px;}

/* Desktop scrolling: the stargate's moving layers are handed to the
   compositor up front, and the hero's repaints stay inside the hero. */
.gate-on .gate-hero{contain:paint;}
.gate-on .gate-text,.gate-on .gate,.gate-on .gate-ring,.gate-on .gate-hero > .hero-net,.gate-on .gate-hero .ha{will-change:transform,scale,translate,rotate,opacity;}

/* Scroll-driven, where the browser supports it (html.sda, set by site.js):
   the stargate and the progress bar follow the scroll position directly, in
   step with it and off the main thread. The keyframes are the --p rules above
   with p running 0 to 1 between --gs and --ge, which site.js measures. */
@keyframes sda-progress{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@keyframes gate-open{0%{opacity:0;scale:.3;}20%{opacity:.84;scale:.86;}100%{opacity:.2;scale:3.1;}}
@keyframes gate-turn{from{rotate:0deg;}to{rotate:200deg;}}
@keyframes gate-glow{0%{opacity:0;}62.5%,100%{opacity:1;}}
@keyframes gate-text{0%{scale:1;opacity:1;}62.5%{opacity:0;}100%{scale:1.45;opacity:0;}}
@keyframes gate-net{from{scale:1;}to{scale:1.9;}}
@keyframes gate-fly{from{translate:0 0;scale:1;}to{translate:calc(var(--wx,0) * 70vw) calc(var(--wy,0) * 70vh);scale:2.6;}}
.sda .scroll-progress i{animation:sda-progress linear both;animation-timeline:scroll(root);}
.sda.gate-on .gate{animation:gate-open linear both;}
.sda.gate-on .gate-ring{animation:gate-turn linear both;}
.sda.gate-on .gate-text{animation:gate-text linear both;}
.sda.gate-on .gate-hero > .hero-net{animation:gate-net linear both;}
.sda.gate-on .gate-hero .ha{animation:gate-fly linear both;}
.sda.gate-on .gate,.sda.gate-on .gate-ring,.sda.gate-on .gate-text,.sda.gate-on .gate-hero > .hero-net,.sda.gate-on .gate-hero .ha{
  animation-timeline:scroll(root);animation-range:var(--gs,0px) var(--ge,600px);}
/* The horizon keeps its slow pulse in size; its brightness follows the scroll. */
.sda.gate-on .gate-horizon{animation:horizon 2.8s ease-in-out infinite alternate,gate-glow linear both;
  animation-timeline:auto,scroll(root);animation-range:normal,var(--gs,0px) var(--ge,600px);}


/* ---- Light and dark ----
   The light pages swap their tokens; the navy sections were dark already
   and stay as they are. The system's setting until the visitor chooses
   (the sun and moon in the top bar, kept on the device). */
:root[data-theme="dark"]{
  --bg:#0E0F11; --surface:#17181B; --sunken:#121315; --tint:#1A1C1F;
  --border:#26282D; --border-strong:#35373E;
  --text:#EDEFE9; --text-2:#BFC1C6; --text-3:#999BA2;
  --teal:#B0E11E; --teal-hover:#B2DD33; --teal-soft:#1A1B1F;
  --ok-bg:#39500B; --bad-bg:#3A1414;
  --shadow:0 1px 2px rgba(0,0,0,.35);
  --shadow-md:0 12px 32px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.3);
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E0F11; --surface:#17181B; --sunken:#121315; --tint:#1A1C1F;
    --border:#26282D; --border-strong:#35373E;
    --text:#EDEFE9; --text-2:#BFC1C6; --text-3:#999BA2;
    --teal:#B0E11E; --teal-hover:#B2DD33; --teal-soft:#1A1B1F;
    --ok-bg:#39500B; --bad-bg:#3A1414;
    --shadow:0 1px 2px rgba(0,0,0,.35);
    --shadow-md:0 12px 32px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.3);
    color-scheme:dark;
  }
}
.top-tools{display:flex;gap:6px;margin-left:auto;}
.nav + .top-tools{margin-left:0;}
.tool-btn{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;cursor:pointer;
  color:var(--on-dark);background:rgba(255,255,255,.04);border:1px solid var(--line-dark);}
.tool-btn:hover{color:#fff;background:rgba(255,255,255,.1);}
.tool-btn[aria-pressed="true"]{color:#fff;background:var(--teal);border-color:var(--teal);}
.tool-btn[hidden]{display:none;}
.tool-btn .icon-sun{display:none;}
:root[data-theme="dark"] .tool-btn .icon-sun{display:block;}
:root[data-theme="dark"] .tool-btn .icon-moon{display:none;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tool-btn .icon-sun{display:block;}
  :root:not([data-theme="light"]) .tool-btn .icon-moon{display:none;}
}
.site-version{font-size:12px;font-variant-numeric:tabular-nums;}

/* ================================================================ Ipsa Verba's artwork
   As on Ipsa Verba's sign-in page (_scribbella_art.html). */
.sb-art{display:block;}
.sb-art-svg{width:100%;height:auto;overflow:visible;display:block;}
.sb-art-svg *{transform-box:fill-box;transform-origin:center;}
.sb-art-hero{width:min(440px,100%);margin:var(--s3) 0 0;}
@media (min-width:1100px){.sb-art-hero{position:absolute;right:4%;top:50%;transform:translateY(-50%);width:min(440px,34vw);margin:0;}
  .page-hero-dark .wrap:has(.sb-art-hero) .lede,.page-hero-dark .wrap:has(.sb-art-hero) .pills,
  .page-hero-dark .wrap:has(.sb-art-hero) .page-hero-title{max-width:min(46rem,52vw);}}
.sb-art-row{width:140px;flex:none;}
.sb-art-card{width:120px;height:86px;margin:-6px 0 2px -10px;}
.sb-net-line{fill:none;stroke:rgba(206,248,80,.16);stroke-width:1;}
.sb-net-pulse{fill:none;stroke:#CEF850;stroke-width:1.4;stroke-linecap:round;stroke-dasharray:6 160;opacity:.8;animation:sb-run 4.5s linear infinite;}
.sb-net-node{fill:#CEF850;opacity:.35;animation:sb-blink 3.2s ease-in-out infinite;}
.sb-net-node.n1{animation-delay:-.4s;} .sb-net-node.n2{animation-delay:-.9s;} .sb-net-node.n3{animation-delay:-1.4s;}
.sb-net-node.n4{animation-delay:-1.9s;} .sb-net-node.n5{animation-delay:-2.5s;}
.sb-ring{fill:none;stroke:rgba(206,248,80,.30);stroke-width:1.2;}
.sb-ring-a{stroke-dasharray:2 10;animation:sb-spin 26s linear infinite;}
.sb-ring-b{stroke:rgba(186,245,10,.22);stroke-dasharray:60 22 4 22;animation:sb-spin 40s linear infinite reverse;}
.sb-ring-c{stroke:rgba(206,248,80,.18);stroke-dasharray:1 6;animation:sb-spin 18s linear infinite reverse;}
.sb-emit path{fill:none;stroke:#CEF850;stroke-width:2;stroke-linecap:round;opacity:0;animation:sb-emit 2.4s ease-out infinite;}
.sb-emit path:nth-child(2){animation-delay:.3s;} .sb-emit path:nth-child(3){animation-delay:.6s;}
.sb-band{fill:none;stroke-width:7;stroke-linecap:round;}
.sb-cup{stroke:#CEF850;stroke-width:2;}
.sb-light{fill:#CEF850;animation:sb-glow 2.4s ease-in-out infinite;}
.sb-phones{animation:sb-float 6s ease-in-out infinite;}
.sb-core{animation:sb-pulse 2.4s ease-in-out infinite;}
.sb-voice{fill:none;stroke:#111214;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:90;animation:sb-draw 2.4s ease-in-out infinite;}
/* Ipsa Verba as its sign-in page now is (owner, 2026-11-07): the silver logo,
   and a quill writing four lines of a poem, over and over (14 s). */
.sb-art-svg .sb-fixed{transform-box:view-box;transform-origin:0 0;}   /* their own transform places them */
.sb-iv-art .sb-iv-name{font-family:"Cormorant Garamond","Didot","Bodoni 72","Bodoni MT","Book Antiqua","Palatino Linotype",Georgia,serif;
  font-size:30px;font-weight:500;}
.sb-iv-art .sb-iv-tag{font-family:inherit;font-size:9px;font-weight:600;fill:#AFB1B6;}
.sb-iv-art .sb-iv-mono{font-family:"Cormorant Garamond","Didot","Bodoni 72","Bodoni MT","Book Antiqua","Palatino Linotype",Georgia,serif;font-size:27px;font-weight:500;letter-spacing:2px;}
.sb-iv-art .sb-pen-line{font-family:"Segoe Script","Snell Roundhand","Apple Chancery","URW Chancery L","Brush Script MT",cursive;
  font-size:15px;fill:rgba(240,242,236,.82);}
.sb-art-svg .sb-pen-reveal{transform-origin:0 50%;transform:scaleX(0);animation:14s linear infinite;}
.sb-pen-r0{animation-name:sb-pen-0 !important;}.sb-pen-r1{animation-name:sb-pen-1 !important;}
.sb-pen-r2{animation-name:sb-pen-2 !important;}.sb-pen-r3{animation-name:sb-pen-3 !important;}
@keyframes sb-pen-0{0%{transform:scaleX(0);}17%,90%{transform:scaleX(1);}97%,100%{transform:scaleX(0);}}
@keyframes sb-pen-1{0%,20%{transform:scaleX(0);}37%,90%{transform:scaleX(1);}97%,100%{transform:scaleX(0);}}
@keyframes sb-pen-2{0%,40%{transform:scaleX(0);}57%,90%{transform:scaleX(1);}97%,100%{transform:scaleX(0);}}
@keyframes sb-pen-3{0%,60%{transform:scaleX(0);}77%,90%{transform:scaleX(1);}97%,100%{transform:scaleX(0);}}
.sb-art-svg .sb-quill{transform-box:view-box;transform-origin:0 0;animation:sb-quill 14s linear infinite;
  filter:drop-shadow(3px 5px 3px rgba(0,0,0,.55));}
@keyframes sb-quill{
  0%{transform:translate(48px,176px);opacity:1;} 17%{transform:translate(300px,176px);}
  19%,20%{transform:translate(48px,202px);} 37%{transform:translate(306px,202px);}
  39%,40%{transform:translate(48px,228px);} 57%{transform:translate(320px,228px);}
  59%,60%{transform:translate(48px,254px);} 77%{transform:translate(318px,254px);opacity:1;}
  85%{transform:translate(352px,228px);opacity:0;} 99%{transform:translate(48px,176px);opacity:0;} 100%{transform:translate(48px,176px);opacity:1;}}
@media (prefers-reduced-motion:reduce){.sb-art-svg .sb-pen-reveal{transform:none;}.sb-art-svg .sb-quill{display:none;}}
/* Ipsa Verba's IV mark in the headphones, as on its sign-in page. */
.sb-iv-orbit{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:80 45;opacity:.9;animation:sb-iv-turn 8s linear infinite;}
.sb-iv-badge{stroke:rgba(225,251,147,.45);stroke-width:1;}
.sb-iv-shine{transform:translateX(-130%);animation:sb-iv-sheen 5s ease-in-out 1.2s infinite;}
.sb-art-svg .sb-iv-mark{fill:none;stroke-linecap:round;stroke-linejoin:round;transform-box:view-box;transform-origin:0 0;}
.sb-iv-letter{stroke-width:2.3;stroke-dasharray:1;animation:sb-iv-draw 1.3s cubic-bezier(.6,0,.2,1) .2s backwards;}
.sb-iv-v{animation-delay:.6s;}
.sb-iv-bar{stroke:#CEF850;stroke-width:2;animation:sb-iv-beat 1.1s ease-in-out infinite;}
.sb-iv-bar1{animation-delay:-.35s;}.sb-iv-bar2{animation-delay:-.7s;}
@keyframes sb-iv-turn{to{transform:rotate(360deg);}}
@keyframes sb-iv-sheen{0%,55%{transform:translateX(-130%);}100%{transform:translateX(130%);}}
@keyframes sb-iv-draw{from{stroke-dashoffset:1;}to{stroke-dashoffset:0;}}
@keyframes sb-iv-beat{0%,100%{transform:scaleY(.55);}50%{transform:scaleY(1.15);}}
.sb-bubble rect,.sb-bubble > path{fill:rgba(25,26,29,.85);stroke:rgba(206,248,80,.55);stroke-width:1.2;}
.sb-dot{fill:#CEF850;animation:sb-dot 1.2s ease-in-out infinite;}
.sb-dot:nth-of-type(2){animation-delay:.15s;} .sb-dot:nth-of-type(3){animation-delay:.3s;}
.sb-bubble-a{animation:sb-bubble-a 7s ease-in-out infinite;}
.sb-bubble-b{animation:sb-bubble-b 8s ease-in-out infinite;}
.sb-bar{fill:#BFF51B;animation:sb-bar 1s ease-in-out infinite;}
.sb-bar.b1{animation-delay:-.13s;} .sb-bar.b2{animation-delay:-.26s;} .sb-bar.b3{animation-delay:-.39s;}
.sb-bar.b4{animation-delay:-.52s;} .sb-bar.b5{animation-delay:-.65s;} .sb-bar.b6{animation-delay:-.78s;}
.sb-floor path{fill:none;stroke:rgba(206,248,80,.12);stroke-width:1;}
@keyframes sb-run{from{stroke-dashoffset:0;}to{stroke-dashoffset:-332;}}
@keyframes sb-blink{0%,100%{opacity:.25;}50%{opacity:.9;}}
@keyframes sb-spin{to{transform:rotate(360deg);}}
@keyframes sb-emit{0%{opacity:0;transform:scale(.7);}25%{opacity:.9;}100%{opacity:0;transform:scale(1.25);}}
@keyframes sb-glow{0%,100%{opacity:.45;}50%{opacity:1;}}
@keyframes sb-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
@keyframes sb-pulse{0%,100%{transform:scale(.92);opacity:.85;}50%{transform:scale(1.08);opacity:1;}}
@keyframes sb-draw{0%{stroke-dashoffset:90;}45%,60%{stroke-dashoffset:0;}100%{stroke-dashoffset:-90;}}
@keyframes sb-dot{0%,100%{transform:translateY(0);opacity:.5;}50%{transform:translateY(-3px);opacity:1;}}
@keyframes sb-bubble-a{0%,100%{transform:translate(0,6px);opacity:.75;}50%{transform:translate(6px,-6px);opacity:1;}}
@keyframes sb-bubble-b{0%,100%{transform:translate(0,-4px);opacity:.8;}50%{transform:translate(-6px,6px);opacity:1;}}
@keyframes sb-bar{0%,100%{transform:scaleY(.45);}50%{transform:scaleY(1);}}

/* The hero scenes (site.js) cross-fade when one gives way to another. */
.hero-net{transition:opacity .9s ease;}
.hero-net.net-fade{opacity:0;}

@media (prefers-reduced-motion: reduce){
  .sb-art-svg *{animation:none !important;}
  .sb-emit path{opacity:.5;}
  .hero-net{transition:none;}
}

/* ---- Polish (1.2.0) ---- */
/* Light sections: a faint dot grid fading down, and a soft teal glow in one corner. */
:root{--dot:rgba(22,23,26,.09);--glow:rgba(53,55,62,.08);}
:root[data-theme="dark"]{--dot:rgba(255,255,255,.05);--glow:rgba(194,222,111,.07);}
.section{position:relative;}
.section:not(.section-dark)::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(560px 340px at 100% 0%,var(--glow),transparent 70%),
             radial-gradient(circle,var(--dot) 1px,transparent 1.6px) 0 0/22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 70%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 70%,transparent 100%);}
.section-tint:not(.section-dark)::before{background:radial-gradient(560px 340px at 0% 100%,var(--glow),transparent 70%),
             radial-gradient(circle,var(--dot) 1px,transparent 1.6px) 0 0/22px 22px;}
.section > .wrap{position:relative;z-index:1;}

/* Cards: lift, a teal glow and an accent line on hover; icon tiles with depth. */
.card:not(.product-card),.steps li{transition:transform .25s var(--ease),box-shadow .25s,border-color .25s;}
.card:not(.product-card)::after{content:"";position:absolute;left:20px;right:20px;top:-1px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--teal),var(--aqua),transparent);opacity:0;transition:opacity .25s;}
.card:not(.product-card):hover,.steps li:hover{transform:translateY(-4px);border-color:rgba(53,55,62,.35);
  box-shadow:0 18px 36px -18px rgba(53,55,62,.45),var(--shadow);}
.card:not(.product-card):hover::after{opacity:1;}
.card-icon{background:linear-gradient(135deg,var(--teal-soft),var(--surface));box-shadow:inset 0 0 0 1px rgba(53,55,62,.16);}
.card:not(.product-card):hover .card-icon{background:linear-gradient(135deg,var(--teal),#648C14);color:#fff;box-shadow:0 6px 16px -6px rgba(53,55,62,.6);}
.card .card-icon{transition:background .25s,color .25s,box-shadow .25s;}

/* The header emblem. */
.has-emblem .wrap > h1,.has-emblem .wrap > .lede,.has-emblem .page-hero-title,.has-emblem .chip-nav{max-width:min(46rem,calc(100% - 300px));}
.emblem{position:absolute;right:-10px;top:50%;width:260px;height:260px;transform:translateY(-50%);pointer-events:none;}
.emblem svg{width:100%;height:100%;overflow:visible;}
.em-icon{color:#E8EBE2;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.em-spin,.em-spin-rev,.em-sweep,.em-pulse,.em-core{transform-box:view-box;transform-origin:50% 50%;}
.em-spin{animation:em-spin 48s linear infinite;}
.em-spin-rev{animation:em-spin 30s linear infinite reverse;}
.em-sweep{animation:em-spin 9s linear infinite;}
.em-pulse{animation:em-pulse 4s ease-out infinite;}
.em-pulse-2{animation-delay:2s;}
.em-core{animation:em-float 5s ease-in-out infinite alternate;}
@keyframes em-spin{to{transform:rotate(360deg);}}
@keyframes em-pulse{0%{transform:scale(.7);opacity:.7;}100%{transform:scale(1.7);opacity:0;}}
@keyframes em-float{from{transform:translateY(-5px);}to{transform:translateY(5px);}}
@media (max-width:980px){
  .emblem{display:none;}
  .has-emblem .wrap > h1,.has-emblem .wrap > .lede,.has-emblem .page-hero-title,.has-emblem .chip-nav{max-width:none;}
}

/* Services: jump links in the header, and each kind of service as its own section. */
.chip-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s4);}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 14px;border-radius:999px;font-size:14px;font-weight:600;
  color:var(--on-dark);text-decoration:none;background:rgba(255,255,255,.05);border:1px solid rgba(194,222,111,.28);
  transition:background .2s,border-color .2s,color .2s,transform .2s var(--ease);}
.chip:hover{color:#fff;background:rgba(194,222,111,.16);border-color:var(--aqua);transform:translateY(-1px);}
.chip .icon{width:16px;height:16px;color:var(--aqua);}
.chip-count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;font-size:12px;font-weight:800;
  color:var(--navy);background:var(--aqua);}
.service-group{scroll-margin-top:72px;}
.group-head{display:flex;gap:var(--s3);align-items:flex-start;margin-bottom:var(--s4);}
.group-head h2{font-size:clamp(26px,3vw,34px);letter-spacing:-.025em;line-height:1.15;}
.group-head .lede{margin-top:8px;max-width:40rem;}
.ticks-card{display:grid;gap:6px;margin-top:4px;}
.ticks-card li{font-size:14px;color:var(--text-2);}

/* About: facts with icons and gradient figures; the steps joined by a line. */
.stat-iconed{flex-direction:row;gap:var(--s3);align-items:flex-start;}
.stat-iconed > div{display:flex;flex-direction:column;gap:4px;}
.stat-iconed .stat-big{background:linear-gradient(90deg,var(--text),var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent;}
.stat-text{margin-top:6px;font-size:14px;color:var(--text-2);}
.steps .step-no{background:linear-gradient(135deg,var(--teal),var(--navy));box-shadow:0 0 0 6px var(--teal-soft);}
@media (min-width:1101px){
  .steps-joined li{position:relative;}
  .steps-joined li:not(:last-child)::before{content:"";position:absolute;top:45px;left:84px;right:calc(-1 * var(--s3) - 2px);height:2px;
    background:linear-gradient(90deg,var(--teal),rgba(53,55,62,.12));}
}


@media (prefers-reduced-motion:reduce){
  .emblem *{animation:none !important;}
  .card:not(.product-card):hover,.steps li:hover,.chip:hover{transform:none;}
}

/* ---- Home: the services as five glowing tiles (1.3.0) ---- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s3);}
.bento-security,.bento-infrastructure{grid-column:span 3;}
.bento-software,.bento-data,.bento-planning{grid-column:span 2;}
.bento-tile{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;gap:12px;
  padding:30px;border-radius:calc(var(--r-lg) + 4px);color:var(--on-dark);
  background:radial-gradient(420px 260px at 100% 0%,rgba(53,55,62,.45),transparent 70%),
             radial-gradient(circle,rgba(194,222,111,.10) 1px,transparent 1.6px) 0 0/18px 18px,
             linear-gradient(160deg,var(--navy-3),var(--navy));
  border:1px solid rgba(194,222,111,.18);box-shadow:0 20px 40px -24px rgba(22,23,26,.6);
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;}
.bento-tile::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;z-index:-1;pointer-events:none;
  background:conic-gradient(from var(--spin,0deg),transparent 0 70%,rgba(194,222,111,.9) 80%,transparent 90%);
  -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 .3s;animation:bento-spin 6s linear infinite;}
@property --spin{syntax:"<angle>";inherits:false;initial-value:0deg;}
@keyframes bento-spin{to{--spin:360deg;}}
.bento-tile:hover{transform:translateY(-4px);border-color:rgba(194,222,111,.45);box-shadow:0 26px 50px -24px rgba(53,55,62,.7);}
.bento-tile:hover::before{opacity:1;}
.bento-mark{position:absolute;right:-30px;bottom:-30px;width:220px;height:220px;z-index:-1;pointer-events:none;
  color:rgba(194,222,111,.07);stroke:currentColor;stroke-width:1.2;fill:none;transition:transform .6s var(--ease),color .6s;}
.bento-tile:hover .bento-mark{transform:rotate(-8deg) scale(1.06);color:rgba(194,222,111,.12);}
.bento-top{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.bento-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;color:#fff;
  background:linear-gradient(135deg,var(--teal),#648C14);box-shadow:0 0 0 6px rgba(194,222,111,.08),0 10px 24px -8px rgba(53,55,62,.8);}
.bento-icon .icon{width:26px;height:26px;}
.bento-count{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--aqua);
  padding:5px 10px;border-radius:999px;background:rgba(194,222,111,.1);border:1px solid rgba(194,222,111,.22);}
.bento-tile h3{font-size:clamp(22px,2.2vw,28px);letter-spacing:-.02em;line-height:1.2;margin-top:6px;}
.bento-tile h3 a{color:#fff;text-decoration:none;}
.bento-tile h3 a:hover{color:var(--aqua);}
.bento-tile > p{color:var(--on-dark-2);font-size:15px;max-width:34rem;}
.bento-tags{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-wrap:wrap;gap:8px;}
.bento-tags a{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:6px 12px;border-radius:999px;font-size:13.5px;font-weight:600;
  color:var(--on-dark);text-decoration:none;background:rgba(255,255,255,.05);border:1px solid rgba(194,222,111,.2);
  transition:background .2s,border-color .2s,color .2s,transform .2s var(--ease);}
.bento-tags a:hover{color:#fff;background:rgba(194,222,111,.18);border-color:var(--aqua);transform:translateY(-1px);}
.bento-tags .icon{width:15px;height:15px;color:var(--aqua);}
.bento-more{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  font-weight:700;font-size:14px;color:var(--aqua);text-decoration:none;}
.bento-more .icon{width:15px;height:15px;transition:transform .2s var(--ease);}
.bento-more:hover{color:#fff;}
.bento-more:hover .icon{transform:translateX(3px);}
@media (max-width:980px){
  .bento{grid-template-columns:1fr 1fr;}
  .bento-security,.bento-infrastructure{grid-column:span 2;}
  .bento-software,.bento-data{grid-column:span 1;}
  .bento-planning{grid-column:span 2;}
}
@media (max-width:720px){
  .bento{grid-template-columns:1fr;}
  .bento-tile{grid-column:auto !important;padding:var(--s3);}
}
@media (prefers-reduced-motion:reduce){
  .bento-tile::before{animation:none;}
  .bento-tile:hover,.bento-tags a:hover{transform:none;}
  .bento-tile:hover .bento-mark{transform:none;}
}

/* ---- Capabilities: a live console under the platforms, a scene of its
   own for each capability (templates/_cap_art.html) ---- */
.cap-art{margin-top:var(--s3);border-radius:12px;overflow:hidden;border:1px solid rgba(194,222,111,.2);
  background:radial-gradient(300px 120px at 100% 0%,rgba(53,55,62,.35),transparent 70%),linear-gradient(160deg,var(--navy-3),var(--navy));}
.cap-art svg{display:block;width:100%;height:auto;}
.cap-art text{font:700 8px Manrope,sans-serif;letter-spacing:.08em;fill:#C2DE6F;}
.cap-art .cap-num{font-size:12px;letter-spacing:0;fill:#fff;}
.cap-art .cap-code{font-size:10px;letter-spacing:.04em;}
.cap-art .cap-dark{fill:#16171A;letter-spacing:.14em;}
.cap-art .cap-red{fill:#E0577A;font-size:9px;}
.cap-art .cap-white{fill:#fff;}
.cap-art *{transform-box:fill-box;}
.cap-led{animation:cap-blink 1.6s steps(2,end) infinite;}
@keyframes cap-blink{50%{opacity:.2;}}
.cap-scroll{animation:cap-scroll 7s linear infinite;}
@keyframes cap-scroll{to{transform:translateX(-172px);}}
.cap-ping{transform-origin:50% 50%;animation:cap-ping 2.6s ease-out infinite;}
@keyframes cap-ping{0%{transform:scale(.7);opacity:.9;}100%{transform:scale(1.6);opacity:0;}}
.cap-pk{animation-duration:2.4s;animation-timing-function:linear;animation-iteration-count:infinite;}
.cap-pk1{animation-name:cap-pk1;}.cap-pk2{animation-name:cap-pk2;animation-delay:.6s;}
.cap-pk3{animation-name:cap-pk3;animation-delay:1.2s;}.cap-pk4{animation-name:cap-pk4;animation-delay:1.8s;}
@keyframes cap-pk1{0%{transform:translate(0,0);opacity:0;}12%,88%{opacity:1;}100%{transform:translate(80px,-30px);opacity:0;}}
@keyframes cap-pk2{0%{transform:translate(0,0);opacity:0;}12%,88%{opacity:1;}100%{transform:translate(85px,-30px);opacity:0;}}
@keyframes cap-pk3{0%{transform:translate(0,0);opacity:0;}12%,88%{opacity:1;}100%{transform:translate(80px,-27px);opacity:0;}}
@keyframes cap-pk4{0%{transform:translate(0,0);opacity:0;}12%,88%{opacity:1;}100%{transform:translate(80px,29px);opacity:0;}}
.cap-bar{transform-origin:50% 100%;animation:cap-grow 2.6s ease-in-out infinite alternate;}
@keyframes cap-grow{from{transform:scaleY(.35);}to{transform:scaleY(1);}}
.cap-gauge{animation:cap-gauge 4s ease-in-out infinite alternate;}
@keyframes cap-gauge{from{stroke-dasharray:96 170;}to{stroke-dasharray:160 170;}}
.cap-fill{transform-origin:0 50%;animation:cap-fill 4.8s ease-in-out infinite both;}
@keyframes cap-fill{0%{transform:scaleX(0);opacity:1;}60%,88%{transform:scaleX(1);opacity:1;}100%{transform:scaleX(1);opacity:0;}}
.cap-done{transform-origin:50% 50%;animation:cap-done 4.8s ease-out infinite both;}
@keyframes cap-done{0%,58%{opacity:0;transform:scale(.4);}66%,88%{opacity:1;transform:scale(1);}100%{opacity:0;transform:scale(1);}}
.cap-flow{animation:cap-flow 4.8s ease-in-out infinite both;}
@keyframes cap-flow{0%{transform:translateX(0);opacity:0;}10%,85%{opacity:1;}100%{transform:translateX(var(--dx,120px));opacity:0;}}
.cap-dx112{--dx:112px;}.cap-dx120{--dx:120px;}.cap-dx200{--dx:200px;}
.cap-dash{stroke-dasharray:6 6;animation:cap-dash .8s linear infinite;}
@keyframes cap-dash{to{stroke-dashoffset:-12;}}
.cap-spin{transform-origin:50% 100%;animation:cap-spin 4s linear infinite;}
@keyframes cap-spin{to{transform:rotate(360deg);}}
.cap-bob{animation:cap-bob 3s ease-in-out infinite alternate;}
@keyframes cap-bob{from{transform:translateY(-3px);}to{transform:translateY(3px);}}
.cap-rise{animation:cap-rise 2.4s ease-in infinite both;}
@keyframes cap-rise{0%{transform:translateY(0);opacity:0;}20%{opacity:1;}100%{transform:translateY(-34px);opacity:0;}}
.cap-scan2{animation:cap-scan2 1.8s ease-in-out infinite alternate;}
@keyframes cap-scan2{to{transform:translateY(46px);}}
.cap-sign{stroke-dasharray:160;animation:cap-sign 4.8s ease-in-out infinite;}
@keyframes cap-sign{0%{stroke-dashoffset:160;opacity:1;}45%,88%{stroke-dashoffset:0;opacity:1;}100%{stroke-dashoffset:0;opacity:0;}}
.cap-stamp{transform-origin:50% 50%;animation:cap-stamp 4.8s ease-out infinite both;}
@keyframes cap-stamp{0%,50%{opacity:0;transform:scale(1.8);}58%{opacity:1;transform:scale(.94);}62%,88%{opacity:1;transform:scale(1);}100%{opacity:0;}}
.cap-ring{animation:cap-ring 4.8s ease-in-out infinite;}
@keyframes cap-ring{0%{stroke-dasharray:0 190;}70%,90%{stroke-dasharray:189 190;}100%{stroke-dasharray:189 190;opacity:0;}}
.cap-pan{transform-origin:0% 30%;animation:cap-pan 3.6s ease-in-out infinite alternate;}
@keyframes cap-pan{from{transform:rotate(-14deg);}to{transform:rotate(16deg);}}
.cap-key{animation:cap-key 3s steps(1,end) infinite;}
@keyframes cap-key{0%{fill:#FF5A6E;}55%{fill:#C0E550;}}
.cap-talk{animation:cap-talk 1.2s ease-in-out infinite alternate;}
@keyframes cap-talk{from{stroke-opacity:.2;}to{stroke-opacity:1;}}
.cap-d1{animation-delay:.4s !important;}.cap-d2{animation-delay:.8s !important;}.cap-d3{animation-delay:1.2s !important;}
.cap-w0{animation-delay:.2s !important;}.cap-w1{animation-delay:.7s !important;}.cap-w2{animation-delay:1.2s !important;}
.cap-w3{animation-delay:1.7s !important;}.cap-w4{animation-delay:2.2s !important;}.cap-w5{animation-delay:2.7s !important;}
@media (prefers-reduced-motion:reduce){.cap-art *{animation:none !important;}}

/* ---- Games 1.5.0: wide boards, the high-score table and its form ---- */
.games{grid-template-areas:"intro board" "scores board";}
.games-intro{grid-area:intro;align-self:end;}
.games-board{grid-area:board;position:relative;}
.hiscores{grid-area:scores;align-self:start;width:100%;max-width:460px;}
.hiscores h2{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:8px;}
.hiscores h2 span{color:var(--teal);}
.hs-list{list-style:none;padding:0;margin:0;display:grid;gap:4px;}
.hs-list li{display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:center;padding:5px 12px;border-radius:9px;
  background:var(--surface);border:1px solid var(--border);font-size:14px;}
.hs-list li.hs-empty{grid-template-columns:1fr;color:var(--text-3);}
.hs-rank{display:grid;place-items:center;width:24px;height:24px;border-radius:999px;font-weight:800;font-size:12px;background:var(--sunken);color:var(--text-2);}
.hs-list li:nth-child(1) .hs-rank{background:linear-gradient(135deg,#FFE08A,#D9A441);color:#3A2608;}
.hs-list li:nth-child(2) .hs-rank{background:linear-gradient(135deg,#F3F5F0,#B5B7BC);color:#202125;}
.hs-list li:nth-child(3) .hs-rank{background:linear-gradient(135deg,#F2C29A,#B8743E);color:#3A1E08;}
.hs-name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hs-score{font-weight:800;color:var(--teal);font-variant-numeric:tabular-nums;}
.hs-list li.is-new{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft);}
/* The name for the table: an arcade panel over the game screen, which it
   dims; the same in every game and in light or dark mode. games.js lays the
   form exactly over the canvas. */
.score-form{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:10px;border-radius:12px;
  background:rgba(9,9,10,.66);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:scoreIn .25s ease-out;}
.score-form[hidden]{display:none;}
.score-card{width:min(290px,100%);display:grid;justify-items:center;gap:8px;text-align:center;padding:18px 18px 14px;border-radius:16px;
  color:#F4F6F1;background:linear-gradient(180deg,rgba(29,31,35,.97),rgba(15,16,18,.97));border:1px solid rgba(194,222,111,.4);
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 22px 50px -14px rgba(0,0,0,.75),0 0 42px -10px rgba(197,246,48,.5);}
.score-card p{margin:0;}
.score-form-kicker{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#D9F978;}
.score-form-score{font-size:40px;font-weight:800;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:#FFE08A;
  text-shadow:0 0 18px rgba(255,200,90,.55);}
.score-form-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#A3A5AC;margin-top:4px;}
.score-form input[type="text"]{width:100%;font:inherit;font-size:17px;font-weight:700;text-align:center;padding:9px 12px;border-radius:10px;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:#fff;}
.score-form input[type="text"]::placeholder{color:rgba(244,246,241,.35);font-weight:600;}
.score-form input[type="text"]:focus{outline:none;border-color:#C5F630;box-shadow:0 0 0 3px rgba(197,246,48,.3);}
.score-form-error{font-size:12.5px;font-weight:700;color:#FF8F8F;}
.score-form-error:empty{display:none;}
.score-form-actions{display:grid;grid-template-columns:1fr auto;gap:8px;width:100%;margin-top:2px;}
.score-form-save,.score-form-skip{font:inherit;font-size:14px;font-weight:800;border-radius:10px;padding:10px 14px;min-height:44px;cursor:pointer;}
.score-form-save{border:0;color:#0C0D0E;background:linear-gradient(90deg,#C5F630,#D9F978);box-shadow:0 8px 22px -8px rgba(197,246,48,.8);}
.score-form-skip{border:1px solid rgba(255,255,255,.18);background:transparent;color:#D5D6D9;}
.score-form-save:hover,.score-form-save:focus-visible{filter:brightness(1.08);outline:none;box-shadow:0 0 0 3px rgba(197,246,48,.35);}
.score-form-skip:hover,.score-form-skip:focus-visible{background:rgba(255,255,255,.08);outline:none;}
.score-form-fine{font-size:11px;color:#90929A;}
/* A short game screen (a wide game on a phone): the same panel, tighter, so
   it stays on the screen and off the touch controls. */
.score-form.is-compact{padding:6px;}
.score-form.is-compact .score-card{gap:5px;padding:10px 12px 8px;border-radius:12px;}
.score-form.is-compact .score-form-score{font-size:28px;}
.score-form.is-compact .score-form-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.score-form.is-compact input[type="text"]{padding:7px 10px;font-size:16px;}
.score-form.is-compact .score-form-save,.score-form.is-compact .score-form-skip{min-height:40px;padding:8px 12px;}
.score-form.is-compact .score-form-fine{font-size:10px;}
@keyframes scoreIn{from{opacity:0;}to{opacity:1;}}
@media (prefers-reduced-motion:reduce){.score-form{animation:none;}}
.games-canvas.is-wide{width:min(600px,calc((100svh - 184px) * 384 / 240),calc(100vw - 620px));min-width:280px;aspect-ratio:384/240;}
@media (max-width:900px){
  .games{grid-template-areas:"intro" "board" "scores";}
  .games-intro{align-self:auto;}
  .hiscores{max-width:520px;}
  .games-canvas.is-wide{width:min(100%,560px);}
}

.pad-in-view .to-top{opacity:0 !important;visibility:hidden;pointer-events:none;}

/* ---- Games: the champions board, an arcade hall of fame ---- */
.champions{position:relative;overflow:hidden;margin-bottom:var(--s4);padding:18px 18px 16px;border-radius:18px;isolation:isolate;
  background:radial-gradient(120% 140% at 50% -20%,#2A2C32 0%,#161619 55%,#0D0E0F 100%);
  border:1px solid rgba(217,249,120,.22);box-shadow:0 0 0 1px rgba(0,0,0,.25),0 18px 40px rgba(13,14,15,.28),inset 0 0 40px rgba(171,213,44,.08);}
/* A faint grid and scanlines, like the glass of an arcade screen. */
.champions::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(217,249,120,.05) 1px,transparent 1px) 0 0/100% 22px,
             linear-gradient(90deg,rgba(217,249,120,.04) 1px,transparent 1px) 0 0/22px 100%;
  mask-image:linear-gradient(180deg,#000 0%,transparent 85%);}
.champions::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);}
.champ-head{display:flex;align-items:baseline;justify-content:space-between;gap:6px 18px;flex-wrap:wrap;margin-bottom:14px;}
.champ-head h2{display:flex;align-items:center;gap:10px;margin:0;font-size:18px;font-weight:800;letter-spacing:.22em;
  text-transform:uppercase;color:#FFE08A;text-shadow:0 0 12px rgba(255,200,90,.55),0 0 2px rgba(255,224,138,.9);}
.champ-head h2 .icon{width:22px;height:22px;color:#FFD15C;filter:drop-shadow(0 0 6px rgba(255,200,90,.7));animation:crownBob 2.6s ease-in-out infinite;}
.champ-head p{margin:0;font-size:13px;color:#B0B2B7;}
@keyframes crownBob{0%,100%{transform:translateY(0) rotate(-6deg);}50%{transform:translateY(-2px) rotate(6deg);}}
/* A conveyor of cubes. The track holds the row twice and slides by half its
   width, so the loop has no seam; hovering or focusing it stops it. Each cube
   turns through four faces (game, champion, score, Play), staggered so they
   never all turn at once, and bobs gently. */
.champions{--cube:118px;}
.champ-belt{overflow:hidden;padding:16px 0 20px;margin:-6px 0 -10px;
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);}
.champ-track{display:flex;width:max-content;animation:champBelt 48s linear infinite;}
.champ-belt:hover .champ-track,.champ-belt:focus-within .champ-track{animation-play-state:paused;}
@keyframes champBelt{to{transform:translateX(-50%);}}
.champ-list{list-style:none;margin:0;padding:0 22px 0 0;display:flex;gap:22px;}
.champ-list li{animation:champBob 3.2s ease-in-out infinite alternate;}
@keyframes champBob{from{transform:translateY(-4px);}to{transform:translateY(4px);}}
.champ{display:block;width:var(--cube);height:var(--cube);perspective:560px;border-radius:14px;color:#F1F3ED;text-decoration:none;outline:none;}
.cube{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;
  transform:translateZ(calc(var(--cube) / -2));animation:cubeTurn 13.5s cubic-bezier(.7,0,.25,1) infinite;}
.champ:hover .cube,.champ:focus-visible .cube{animation-play-state:paused;}
.face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:10px;
  text-align:center;border-radius:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:linear-gradient(160deg,#2D2F35 0%,#1A1B1F 60%,#141517 100%);border:1px solid rgba(217,249,120,.38);
  box-shadow:inset 0 0 22px rgba(171,213,44,.2),inset 0 1px 0 rgba(255,255,255,.12);}
.face-game{transform:rotateX(0deg) translateZ(calc(var(--cube) / 2));}
.face-name{transform:rotateX(-90deg) translateZ(calc(var(--cube) / 2));}
.face-score{transform:rotateX(-180deg) translateZ(calc(var(--cube) / 2));
  background:linear-gradient(160deg,#3A2E10 0%,#1E1A10 55%,#121008 100%);border-color:rgba(255,209,92,.5);
  box-shadow:inset 0 0 24px rgba(255,190,70,.22),inset 0 1px 0 rgba(255,255,255,.1);}
.face-play{transform:rotateX(-270deg) translateZ(calc(var(--cube) / 2));
  background:linear-gradient(160deg,#648C14 0%,#31343A 60%,#25262B 100%);border-color:rgba(217,249,120,.6);}
.champ:hover .face,.champ:focus-visible .face{border-color:#D9F978;box-shadow:inset 0 0 26px rgba(171,213,44,.32),0 0 18px rgba(171,213,44,.45);}
.champ-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;color:#D9F978;
  background:rgba(171,213,44,.16);box-shadow:inset 0 0 0 1px rgba(217,249,120,.35),0 0 16px rgba(171,213,44,.35);}
.champ-icon .icon{width:22px;height:22px;}
.champ-game{font-size:11px;font-weight:800;line-height:1.25;letter-spacing:.08em;text-transform:uppercase;color:#D0D1D5;}
.champ-crown{color:#FFD15C;filter:drop-shadow(0 0 6px rgba(255,200,90,.8));}
.champ-crown .icon{width:24px;height:24px;}
.champ-name{max-width:100%;font-size:14px;font-weight:800;line-height:1.2;color:#fff;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.champ-label{font-size:9.5px;font-weight:800;line-height:1.25;letter-spacing:.12em;text-transform:uppercase;color:#A7A9B0;}
.face-score .champ-label{color:#C9A85A;}
.champ-score{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:17px;font-weight:700;letter-spacing:.06em;
  color:#FFD15C;text-shadow:0 0 10px rgba(255,190,70,.6);font-variant-numeric:tabular-nums;}
.champ-play{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;}
.champ-play .icon{width:18px;height:18px;}
/* No champion yet: an invitation, gently blinking like an arcade's "insert coin". */
.champ:not(.has-champ) .champ-crown{opacity:.3;filter:none;}
.champ:not(.has-champ) .champ-name{color:#D9F978;font-size:13px;letter-spacing:.06em;text-transform:uppercase;animation:coinBlink 1.6s steps(1) infinite;}
.champ:not(.has-champ) .champ-score{color:rgba(255,209,92,.4);text-shadow:none;}
@keyframes coinBlink{0%,60%{opacity:1;}61%,100%{opacity:.35;}}
/* A new champion: the cube flashes gold once. */
.champ.is-new .face{animation:champFlash 1.4s ease-out;}
@keyframes champFlash{0%{box-shadow:0 0 0 2px #FFD15C,0 0 30px rgba(255,200,90,.8);}100%{box-shadow:none;}}
.champ-list li:nth-child(1){animation-delay:-0.7s;} .champ-list li:nth-child(1) .cube{animation-delay:-1.4s;}
.champ-list li:nth-child(2){animation-delay:-1.4s;} .champ-list li:nth-child(2) .cube{animation-delay:-2.7s;}
.champ-list li:nth-child(3){animation-delay:-2.1s;} .champ-list li:nth-child(3) .cube{animation-delay:-4.1s;}
.champ-list li:nth-child(4){animation-delay:-2.8s;} .champ-list li:nth-child(4) .cube{animation-delay:-5.4s;}
.champ-list li:nth-child(5){animation-delay:-3.5s;} .champ-list li:nth-child(5) .cube{animation-delay:-6.8s;}
.champ-list li:nth-child(6){animation-delay:-4.2s;} .champ-list li:nth-child(6) .cube{animation-delay:-8.1s;}
.champ-list li:nth-child(7){animation-delay:-4.9s;} .champ-list li:nth-child(7) .cube{animation-delay:-9.5s;}
.champ-list li:nth-child(8){animation-delay:-5.6s;} .champ-list li:nth-child(8) .cube{animation-delay:-10.8s;}
.champ-list li:nth-child(9){animation-delay:-6.3s;} .champ-list li:nth-child(9) .cube{animation-delay:-12.2s;}
@media (max-width:900px){
  .champions{--cube:104px;margin-bottom:var(--s2);padding:14px 12px 12px;border-radius:14px;}
  .champ-head{margin-bottom:6px;}
  .champ-head h2{font-size:15px;letter-spacing:.18em;}
  .champ-head p{font-size:12px;}
  .champ-list{gap:16px;padding-right:16px;}
}
/* Without motion: still cards in rows, every face's words on show. */
@media (prefers-reduced-motion:reduce){
  .champ-head h2 .icon,.champ:not(.has-champ) .champ-name,.champ.is-new .face{animation:none;}
  .champ-belt{mask-image:none;margin:0;padding:0;}
  .champ-track{animation:none;width:auto;}
  .champ-list[aria-hidden]{display:none;}
  .champ-list{flex-wrap:wrap;padding:0;gap:10px;}
  .champ-list li{animation:none;}
  .champ{width:150px;height:auto;perspective:none;}
  .cube{animation:none;transform:none;display:grid;gap:6px;padding:10px;border-radius:14px;
    background:linear-gradient(160deg,#2D2F35,#141517);border:1px solid rgba(217,249,120,.38);}
  .face{position:static;transform:none;backface-visibility:visible;background:none;border:0;box-shadow:none;padding:0;}
  .face-play,.face-name .champ-label,.face-score .champ-label{display:none;}
}

/* Arcade neon: each game glows in its own colour (--neon), a cube now and then
   flickers like a neon tube, and now and then one tilts left and right. */
.champions{background:radial-gradient(60% 90% at 8% 0%,rgba(203,247,70,.16) 0%,transparent 60%),
  radial-gradient(60% 90% at 95% 100%,rgba(202,247,68,.14) 0%,transparent 60%),
  radial-gradient(120% 140% at 50% -20%,#2A2C32 0%,#161619 55%,#0D0E0F 100%);}
.champ-list li:nth-child(1){--neon:#CBF746;} .champ-list li:nth-child(1) .champ{animation-delay:-0.0s,-0.0s;}
.champ-list li:nth-child(2){--neon:#CAF744;} .champ-list li:nth-child(2) .champ{animation-delay:-2.3s,-1.7s;}
.champ-list li:nth-child(3){--neon:#CAF744;} .champ-list li:nth-child(3) .champ{animation-delay:-4.6s,-3.4s;}
.champ-list li:nth-child(4){--neon:#FF9F1C;} .champ-list li:nth-child(4) .champ{animation-delay:-6.9s,-5.1s;}
.champ-list li:nth-child(5){--neon:#D7F971;} .champ-list li:nth-child(5) .champ{animation-delay:-9.2s,-6.8s;}
.champ-list li:nth-child(6){--neon:#FFE14D;} .champ-list li:nth-child(6) .champ{animation-delay:-0.5s,-8.5s;}
.champ-list li:nth-child(7){--neon:#CBF745;} .champ-list li:nth-child(7) .champ{animation-delay:-2.8s,-1.2s;}
.champ-list li:nth-child(8){--neon:#FF5E7A;} .champ-list li:nth-child(8) .champ{animation-delay:-5.1s,-2.9s;}
.champ-list li:nth-child(9){--neon:#C3F62A;} .champ-list li:nth-child(9) .champ{animation-delay:-7.4s,-4.6s;}
.champ{--neon-soft:color-mix(in srgb,var(--neon,#CAF744) 45%,transparent);
  animation:champTilt 11s ease-in-out infinite,champFlicker 9s linear infinite;}
@keyframes champTilt{0%,72%,100%{transform:rotate(0);}76%{transform:rotate(-6deg);}81%{transform:rotate(5deg);}
  86%{transform:rotate(-3deg);}90%{transform:rotate(1.5deg);}94%{transform:rotate(0);}}
@keyframes champFlicker{0%,93%,100%{filter:none;}94%{filter:brightness(.55);}94.6%{filter:brightness(1.25);}
  95.2%{filter:brightness(.7);}96%{filter:none;}}
.face{border:2px solid var(--neon,#CAF744);
  background:linear-gradient(160deg,color-mix(in srgb,var(--neon,#CAF744) 26%,#1C1D21) 0%,#17181B 62%,#0E0F11 100%);
  box-shadow:0 0 8px var(--neon-soft),0 0 22px color-mix(in srgb,var(--neon,#CAF744) 25%,transparent),
    inset 0 0 18px color-mix(in srgb,var(--neon,#CAF744) 28%,transparent),inset 0 1px 0 rgba(255,255,255,.15);}
.face-name{background:linear-gradient(160deg,color-mix(in srgb,var(--neon,#CAF744) 38%,#16171A) 0%,#111214 70%);}
.face-score{border-color:var(--neon,#CAF744);
  background:linear-gradient(160deg,color-mix(in srgb,var(--neon,#CAF744) 30%,#39500B) 0%,#39500B 70%);
  box-shadow:0 0 8px var(--neon-soft),0 0 22px color-mix(in srgb,var(--neon,#CAF744) 25%,transparent),
    inset 0 0 22px color-mix(in srgb,var(--neon,#CAF744) 32%,transparent);}
.face-play{border-color:#fff;background:linear-gradient(160deg,var(--neon,#CAF744) 0%,color-mix(in srgb,var(--neon,#CAF744) 55%,#0E0F11) 100%);}
.face-play .champ-play{color:#0E0F11;text-shadow:0 1px 0 rgba(255,255,255,.35);}
.champ:hover .face,.champ:focus-visible .face{border-color:#fff;
  box-shadow:0 0 12px var(--neon,#CAF744),0 0 34px var(--neon-soft),inset 0 0 26px var(--neon-soft);}
.champ-icon{color:var(--neon,#CAF744);background:color-mix(in srgb,var(--neon,#CAF744) 16%,transparent);
  box-shadow:inset 0 0 0 1px var(--neon-soft),0 0 16px var(--neon-soft);}
.champ-game{color:#fff;text-shadow:0 0 8px var(--neon-soft);}
.champ-name{text-shadow:0 0 10px var(--neon-soft);}
.champ-label,.face-score .champ-label{color:color-mix(in srgb,var(--neon,#CAF744) 70%,#fff);}
.champ:not(.has-champ) .champ-name{color:var(--neon,#CAF744);}
@media (prefers-reduced-motion:reduce){ .champ{animation:none;} }

/* The board's party tricks (games.js): sparkles, streamers, comets, fireworks. */
.champ-spark,.champ-streamer,.champ-comet,.champ-ember{position:absolute;z-index:4;pointer-events:none;}
.champ-spark{width:16px;height:16px;margin:-8px 0 0 -8px;filter:drop-shadow(0 0 5px currentColor) drop-shadow(0 0 2px #fff);}
.champ-spark i{display:block;width:100%;height:100%;background:currentColor;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);}
.champ-streamer{border-radius:3px;box-shadow:0 0 8px rgba(255,255,255,.35);}
.champ-comet{width:150px;height:3px;border-radius:3px;transform-origin:100% 50%;
  background:linear-gradient(90deg,transparent,currentColor 70%,#fff);filter:drop-shadow(0 0 6px currentColor);}
.champ-ember{width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:currentColor;
  box-shadow:0 0 8px currentColor,0 0 2px #fff;}
.champ-walkers{position:absolute;z-index:6;display:flex;align-items:flex-end;gap:2px;pointer-events:none;}
.champ-duo,.champ-floppy,.champ-car{overflow:visible;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5));}
.champ-duo .duo-leg{transform-box:fill-box;transform-origin:50% 0;animation:duoStep .5s ease-in-out infinite alternate;}
.champ-duo .duo-leg.duo-late{animation-delay:-.5s;}
@keyframes duoStep{from{rotate:-18deg;}to{rotate:18deg;}}
.champ-duo .air-strum{transform-box:fill-box;transform-origin:70% 50%;animation:airStrum .25s ease-in-out infinite alternate;}
@keyframes airStrum{from{rotate:-6deg;}to{rotate:6deg;}}
.champ-floppy .floppy-wave{transform-box:fill-box;transform-origin:0 100%;animation:floppyWave .35s ease-in-out infinite alternate;}
@keyframes floppyWave{from{rotate:-20deg;}to{rotate:25deg;}}
.champ-say.champ-say-small{font-size:11.5px;padding:4px 8px;width:max-content;max-width:230px;white-space:normal;line-height:1.25;}
.champ-say.champ-say-small::after{content:"";position:absolute;left:var(--tail,50%);bottom:-6px;translate:-50% 0;
  border:6px solid transparent;border-top-color:#fff;border-bottom:0;}
.champ-car{position:absolute;z-index:6;pointer-events:none;}
.champ-duo .bike-wheel{transform-box:fill-box;transform-origin:50% 50%;animation:bikeWheel .25s linear infinite;}
@keyframes bikeWheel{to{rotate:360deg;}}
.champ-dog .dog-tail{transform-box:fill-box;transform-origin:100% 100%;animation:dogWag .18s ease-in-out infinite alternate;}
@keyframes dogWag{from{rotate:-14deg;}to{rotate:16deg;}}
.champ-dog .dog-ear{transform-box:fill-box;transform-origin:70% 0;animation:dogWag .25s ease-in-out infinite alternate;}
.champ-dog .duo-leg{animation-duration:.22s;}
.champ-terminator .bike-wheel{transform-box:fill-box;transform-origin:50% 50%;animation:bikeWheel .25s linear infinite;}
.champ-car .car-zap{animation:carZap .12s steps(1) infinite;}
@keyframes carZap{50%{opacity:0;}}
.champ-flash{position:absolute;z-index:7;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#fff 0%,#E1FB93 30%,rgba(202,247,68,0) 70%);}
.champ-trail{position:absolute;z-index:5;height:4px;border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,#FF5E1A,#FFD15C,#FF5E1A);box-shadow:0 0 10px #FF9F1C,0 -3px 8px rgba(255,120,30,.6);}
/* The runaway cube and the hand that fetches it (games.js). */
.champ-runner{position:absolute;z-index:3;pointer-events:none;}
.champ.is-away{visibility:hidden;}
.champ-belt.is-held .champ-track,.champ-belt.is-held .champ-list li{animation-play-state:paused;}
.champ-hand{position:absolute;z-index:4;pointer-events:none;filter:drop-shadow(0 8px 14px rgba(0,0,0,.45));}
.champ-pump{position:absolute;z-index:4;pointer-events:none;overflow:visible;filter:drop-shadow(0 8px 14px rgba(0,0,0,.45));}
.champ-ufo{position:absolute;z-index:5;pointer-events:none;overflow:visible;filter:drop-shadow(0 0 10px rgba(217,249,120,.55));}
.champ-ufo .ufo-light{animation:ufoBlink .5s steps(1) infinite;}
.champ-ufo .ufo-light:nth-of-type(2n){animation-delay:.25s;}
@keyframes ufoBlink{50%{opacity:.25;}}
.champ-beam{position:absolute;z-index:2;pointer-events:none;transform-origin:50% 0;
  clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);
  background:linear-gradient(180deg,rgba(219,250,125,.75),rgba(219,250,125,.08));}
.champ-terminator{position:absolute;z-index:5;pointer-events:none;overflow:visible;filter:drop-shadow(0 6px 10px rgba(0,0,0,.55));}
.champ-terminator .t-glow{animation:tEye 1.1s ease-in-out infinite;}
@keyframes tEye{50%{opacity:.25;}}
.champ-laser,.champ-tracer{position:absolute;z-index:4;height:2px;margin-top:-1px;transform-origin:0 50%;pointer-events:none;}
.champ-laser{height:1px;background:#FF2A2A;box-shadow:0 0 6px #FF2A2A;}
.champ-tracer{height:3px;background:linear-gradient(90deg,#FFF6C8,#FFD15C 40%,rgba(255,159,28,.2));box-shadow:0 0 8px #FFD15C;}
.champ-say{position:absolute;z-index:6;padding:5px 10px;border-radius:10px;background:#fff;color:#131417;font-size:12.5px;font-weight:800;
  white-space:nowrap;box-shadow:0 6px 16px rgba(0,0,0,.4);pointer-events:none;}
.champ.is-broken .face{filter:grayscale(.85) brightness(.5);}
.champ-crack{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 0 2px #000);}
.champ-smoke{background:rgba(120,130,145,.7);width:16px;height:16px;}
.champ-hand.has-wrench{overflow:visible;}
.champ-puff{position:absolute;z-index:4;width:12px;height:12px;border-radius:50%;background:rgba(236,239,231,.75);pointer-events:none;opacity:0;}

/* The name entry on Liquid Rush's and FLUXBOUND's game-over screens. */
.champ-entry{margin:12px 0 4px;padding:12px;border-radius:12px;text-align:left;
  background:linear-gradient(180deg,rgba(255,209,92,.14),rgba(255,209,92,.05));border:1px solid rgba(255,209,92,.45);
  box-shadow:0 0 18px rgba(255,190,70,.18);}
.champ-entry[hidden]{display:none;}
.champ-entry-title{margin:0 0 8px;font-size:13px;font-weight:800;letter-spacing:.04em;color:#FFE08A;text-shadow:0 0 8px rgba(255,190,70,.45);}
.champ-entry-row{display:flex;gap:8px;}
.champ-entry input{flex:1;min-width:0;padding:10px 12px;border-radius:9px;border:1px solid rgba(255,255,255,.25);
  background:rgba(13,14,15,.6);color:#fff;font:inherit;font-size:16px;}
.champ-entry input:focus{outline:2px solid #FFD15C;outline-offset:1px;}
.champ-entry button{padding:0 16px;border-radius:9px;border:0;background:#FFD15C;color:#2A1C04;font:inherit;font-weight:800;cursor:pointer;}
.champ-entry button:disabled{opacity:.6;cursor:default;}
.champ-entry-msg{margin:6px 0 0;font-size:12.5px;color:#DBDCDE;min-height:1em;}
.champ-entry-msg:empty{display:none;}

/* ---- Home: each game as an arcade screen with a small scene playing ---- */
.arcade-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3);}
/* Five a row on a wide screen, so each game's picture is smaller (owner, 2026-11-07). */
.arcade-grid > *{flex:0 0 calc((100% - 4 * var(--s3)) / 5);}
@media (max-width:1280px){ .arcade-grid > *{flex-basis:calc((100% - 3 * var(--s3)) / 4);} }
@media (max-width:1100px){ .arcade-grid > *{flex-basis:calc((100% - 2 * var(--s3)) / 3);} }
@media (max-width:820px){ .arcade-grid > *{flex-basis:calc((100% - var(--s3)) / 2);} }
/* Phones: still two to a row, smaller, so the seven fit in about a screen and
   a half rather than four. */
@media (max-width:520px){
  .arcade-grid{gap:12px;}
  .arcade-grid > *{flex-basis:calc((100% - 12px) / 2);}
}
.arcade-card{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;text-decoration:none;color:var(--on-dark);
  background:linear-gradient(170deg,var(--navy-3),var(--navy));border:1px solid rgba(194,222,111,.18);
  box-shadow:0 16px 36px -22px rgba(22,23,26,.7);transition:transform .25s var(--ease),box-shadow .25s,border-color .25s;}
.arcade-card:hover{color:var(--on-dark);transform:translateY(-4px);border-color:rgba(194,222,111,.5);box-shadow:0 22px 44px -20px rgba(53,55,62,.7);}
.arcade-screen{position:relative;aspect-ratio:2/1;overflow:hidden;border-bottom:1px solid rgba(194,222,111,.15);
  background:radial-gradient(120% 90% at 50% 0%,#292B30,#0E0F10);}
.arcade-screen::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);}
.arcade-screen svg{display:block;width:100%;height:100%;}
.arcade-new{position:absolute;top:10px;left:10px;z-index:1;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;background:#F4C452;color:#3A2608;}
.arcade-body{display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px;flex:1;}
.arcade-body h3{font-size:18px;color:#fff;letter-spacing:-.01em;}
.arcade-body p{font-size:14px;color:var(--on-dark-2);}
.arcade-play{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;
  font-weight:800;font-size:13px;color:var(--navy);background:var(--aqua);transition:background .2s;}
.arcade-card:hover .arcade-play{background:#fff;}
.arcade-play .icon{width:14px;height:14px;}
.arcade-screen *{transform-box:fill-box;}
.ga-d1{animation-delay:.35s !important;}.ga-d2{animation-delay:.7s !important;}
.ga-fall{animation:ga-fall 3.2s steps(12,end) infinite;}
@keyframes ga-fall{from{transform:translateY(0);}to{transform:translateY(60px);}}
.ga-flash{animation:ga-flash 1.6s ease-in-out infinite;}
@keyframes ga-flash{0%,70%{opacity:1;}85%{opacity:.15;}100%{opacity:1;}}
.ga-bob{animation:ga-bob 1.6s ease-in-out infinite alternate;}
.ga-bob-fast{animation:ga-bob .32s ease-in-out infinite alternate;}
@keyframes ga-bob{from{transform:translateY(-2.5px);}to{transform:translateY(2.5px);}}
.ga-twinkle{animation:ga-twinkle 1.8s ease-in-out infinite alternate;}
@keyframes ga-twinkle{from{opacity:.25;}to{opacity:1;}}
.ga-shoot{animation:ga-shoot 1.1s linear infinite;}
@keyframes ga-shoot{from{transform:translateY(0);opacity:1;}to{transform:translateY(-58px);opacity:0;}}
.ga-scales{stroke-dasharray:2 8;animation:ga-scales 1.2s linear infinite;}
@keyframes ga-scales{to{stroke-dashoffset:-20;}}
.ga-roll{transform-origin:50% 50%;animation:ga-roll 3.2s linear infinite;}
@keyframes ga-roll{from{transform:translateX(0) rotate(0);}to{transform:translateX(70px) rotate(720deg);}}
/* Maze Muncher's card (_game_art.html): hunted, the glowing dot, then the
   chase the other way and a chomp (owner, 2026-11-08). One 8 s loop. */
.ga-mm-muncher{animation:ga-mm-muncher 8s linear infinite;}
@keyframes ga-mm-muncher{0%{transform:translateX(0);}44%{transform:translateX(100px);}50%{transform:translateX(100px);}86%{transform:translateX(-14px);}94%{transform:translateX(-14px);}100%{transform:translateX(0);}}
.ga-mm-face{transform-box:fill-box;transform-origin:50% 50%;animation:ga-mm-face 8s steps(1,end) infinite;}
@keyframes ga-mm-face{0%{transform:scaleX(1);}47%{transform:scaleX(-1);}91%{transform:scaleX(1);}}
.ga-mm-mouth{transform-box:fill-box;transform-origin:30% 50%;animation:ga-chomp .22s ease-in-out infinite alternate;}
.ga-mm-bug{animation:ga-mm-bug 8s linear infinite;}
@keyframes ga-mm-bug{0%{transform:translateX(0);}44%{transform:translateX(100px);}48%{transform:translateX(102px);}86%{transform:translateX(-4px);}100%{transform:translateX(0);}}
.ga-mm-body{animation:ga-mm-body 8s steps(1,end) infinite;}
@keyframes ga-mm-body{0%{fill:#E0577A;}45%{fill:#3B6FE0;}78%{fill:#F2F4F8;}80%{fill:#3B6FE0;}82%{fill:#F2F4F8;}84%{fill:#3B6FE0;}97%{fill:#E0577A;}}
.ga-mm-gone{transform-box:fill-box;transform-origin:50% 50%;animation:ga-mm-gone 8s ease-in infinite;}
@keyframes ga-mm-gone{0%,86%{opacity:1;transform:scale(1);}90%{opacity:0;transform:scale(.2);}97%{opacity:0;transform:scale(.2);}100%{opacity:1;transform:scale(1);}}
.ga-mm-power{animation:ga-mm-power 8s steps(1,end) infinite;}
@keyframes ga-mm-power{0%{opacity:1;}44%{opacity:0;}97%{opacity:1;}}
@media (prefers-reduced-motion:reduce){.ga-mm-muncher,.ga-mm-face,.ga-mm-mouth,.ga-mm-bug,.ga-mm-body,.ga-mm-gone,.ga-mm-power{animation:none;}}
.ga-zip{animation:ga-zip 1s linear infinite;}
@keyframes ga-zip{from{transform:translateX(0);opacity:1;}to{transform:translateX(70px);opacity:0;}}
.ga-rotor{transform-origin:50% 50%;animation:ga-rotor .16s linear infinite alternate;}
@keyframes ga-rotor{from{transform:scaleX(1);}to{transform:scaleX(.15);}}
.ga-drift{animation:ga-drift 9s linear infinite alternate;}
@keyframes ga-drift{to{transform:translateX(-40px);}}
/* SKYGORGE's card (_game_art.html): the canyon scrolls by, the jet rides up
   and down, and each plane that flies in is shot down. One 2.4 s loop. */
.ga-sg-scroll{animation:ga-sg-scroll 2.4s linear infinite;}
.arcade-screen .ga-sg-big{transform-box:view-box;transform-origin:0 0;}
@keyframes ga-sg-scroll{to{transform:translateX(-80px);}}
.ga-sg-fly{animation:ga-sg-fly 2.4s ease-in-out infinite;}
@keyframes ga-sg-fly{0%,100%{transform:translateY(0) rotate(0);}30%{transform:translateY(-6px) rotate(-6deg);}70%{transform:translateY(3px) rotate(4deg);}}
.ga-sg-foe{animation:ga-sg-foe 2.4s linear infinite;}
@keyframes ga-sg-foe{0%{transform:translateX(34px) translateY(4px);opacity:1;}58%{transform:translateX(0) translateY(0);opacity:1;}60%,100%{transform:translateX(0);opacity:0;}}
.ga-sg-boom{transform-origin:50% 50%;animation:ga-sg-boom 2.4s ease-out infinite;}
@keyframes ga-sg-boom{0%,57%{opacity:0;transform:scale(.2);}60%{opacity:1;transform:scale(.6);}82%{opacity:0;transform:scale(1.5);}100%{opacity:0;transform:scale(1.5);}}
@media (prefers-reduced-motion:reduce){.ga-sg-scroll,.ga-sg-fly,.ga-sg-foe,.ga-sg-boom{animation:none;}}
/* ARCANA's ring of cards: one slow turn around the teller. */
.ga-orbit{transform-origin:50% 50%;animation:ga-orbit 40s linear infinite;}
@keyframes ga-orbit{to{transform:rotate(360deg);}}
/* Each card placed round the ring by its own rotate(): about the picture, not itself. */
.arcade-screen .ga-ring-card{transform-box:view-box;transform-origin:0 0;}
@media (prefers-reduced-motion:reduce){ .arcade-screen *{animation:none !important;} .arcade-card:hover{transform:none;} }

/* ---- Page heroes built like the home hero (1.5.0) ----
   The home hero's glow, spacing, type and drifting line art, an eyebrow above
   the title, buttons, and the emblem as the side picture: beside the words on
   a computer, under them on a tablet or phone, as the terminal is at home. */
.page-hero-dark{padding:var(--s5) 0;
  background:radial-gradient(1000px 520px at 85% -10%,rgba(53,55,62,.30),transparent 65%),
             linear-gradient(180deg,var(--navy),var(--navy-2));}
.page-hero-dark .eyebrow{color:var(--aqua);}
.page-hero-dark .crumbs + .eyebrow{margin-top:var(--s3);}
.page-hero-dark h1,.page-hero-dark .page-hero-title{margin-top:var(--s2);}
.page-hero-dark .page-hero-title h1{margin-top:0;}
.page-hero-dark h1{font-size:clamp(36px,4.4vw,54px);line-height:1.06;letter-spacing:-.035em;}
.page-hero-dark .lede{margin-top:var(--s3);font-size:18px;line-height:1.65;max-width:40rem;}
.page-hero-dark .hero-art .ha{opacity:.22;}
.has-emblem .wrap > .hero-actions,.has-emblem .wrap > .cap-index{max-width:min(46rem,calc(100% - 320px));}
.page-hero-dark .emblem{right:0;width:280px;height:280px;}
@media (max-width:980px){
  .page-hero-dark{padding:var(--s6) 0;}
  .has-emblem .wrap > .hero-actions,.has-emblem .wrap > .cap-index{max-width:none;}
  .page-hero-dark .emblem{display:block;position:relative;right:auto;top:auto;transform:none;width:210px;height:210px;margin:var(--s4) auto 0;}
  /* Below a long list of jump links the picture would only push the page down. */
  .page-hero-dark .wrap:has(.chip-nav,.cap-index) .emblem{display:none;}
}
@media (max-width:720px){
  .page-hero-dark{padding:var(--s5) 0;}
  .page-hero-dark .lede{font-size:17px;}
  .page-hero-dark .emblem{width:170px;height:170px;margin-top:var(--s3);}
}

/* Phones: the read-aloud and theme buttons sit beside the menu button, not
   next to the name (the hidden desktop menu still counted as their neighbour). */
@media (max-width:900px){
  .nav + .top-tools{margin-left:auto;}
  .nav-mobile{margin-left:6px;}
}
/* The open menu never runs off a short screen. */
.nav-mobile-panel{max-height:calc(100svh - 64px);overflow-y:auto;overscroll-behavior:contain;}

/* Games on a phone: every game's name on one line, and room under the title. */
@media (max-width:520px){
  .games-intro h2{margin-bottom:4px;}
  .games-tabs{gap:6px;padding:8px;}
  .games-tabs button{font-size:12.5px;padding:0 3px;letter-spacing:-.01em;min-height:44px;}
  .games-tabs button .icon{display:none;}
}
@media (max-width:520px){
  .arcade-body{gap:6px;padding:12px 12px 14px;}
  .arcade-body h3{font-size:15px;}
  .arcade-body p{font-size:12.5px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
  .arcade-play{padding:6px 12px;font-size:13px;}
}
.nowrap{white-space:nowrap;}
/* The emblem shows the page's icon, so the small tile beside the title goes. */
.has-emblem .page-hero-title > .card-icon{display:none;}

/* ---- Every hero the same size (1.5.1) ----
   On a computer each page's header is the home hero's height, its words
   centred in it; on a tablet or phone they keep their own height. */
:root{--hero-h:670px;}
@media (min-width:981px){
  .hero,.page-hero-dark{min-height:var(--hero-h);}
  .page-hero-dark{display:flex;align-items:center;}
  .page-hero-dark > .wrap{width:100%;}
}
/* Capabilities: the jump links under the header, every one in sight on a
   wide screen (one faded row looked cut off, and gave no sign it scrolled);
   on a phone one row that scrolls sideways, fading at the edge. */
.cap-strip{position:relative;background:var(--bg);border-bottom:1px solid var(--border);padding:14px 0;}
.cap-strip .cap-index{margin:0;flex-wrap:wrap;gap:8px;}
@media (max-width:760px){
  .cap-strip .cap-index{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent);}
}
.cap-strip .cap-index a{flex:none;color:var(--text-2);background:var(--surface);border-color:var(--border);}
.cap-strip .cap-index a:hover{color:var(--teal);background:var(--surface);border-color:var(--teal);}
.cap-strip .cap-index span{color:var(--teal);}

/* The games page: FLUXBOUND, which has a page of its own. */
.fx-promo{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;text-decoration:none;color:#F4F6F1;
  background:linear-gradient(90deg,#111214,#1F2024);border:1px solid rgba(194,222,111,.3);
  box-shadow:0 0 30px -12px rgba(197,246,48,.6);transition:transform .2s var(--ease),box-shadow .2s;}
.fx-promo:hover{transform:translateY(-2px);box-shadow:0 0 34px -8px rgba(220,250,129,.7);color:#fff;}
.fx-promo strong{display:block;letter-spacing:.08em;color:#fff;}
.fx-promo span:nth-child(2){flex:1;font-size:13.5px;color:#BDBFC4;}
.fx-promo .icon{width:18px;height:18px;color:#C5F630;}
.fx-promo-new{flex:none;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#0E0F10;background:linear-gradient(90deg,#C5F630,#DCFA81);}
/* On a phone it is one short line, so the board stays near the top. */
@media (max-width:900px){
  .fx-promo{padding:8px 12px;gap:10px;}
  .fx-promo span:nth-child(2){font-size:0;}
  .fx-promo strong{font-size:13px;}
}

/* ---- Cards 1.9.6: every card in the look of the home page's service
   tiles (.bento-tile): deep navy with a teal glow in the corner and a dotted
   grid, a glossy teal icon, the card's own icon large and faint behind it
   (site.js adds .card-mark), and a light running round the edge on hover. ---- */
.card{overflow:hidden;isolation:isolate;padding:28px;border-radius:calc(var(--r-lg) + 4px);color:var(--on-dark);
  background:radial-gradient(360px 220px at 100% 0%,rgba(53,55,62,.42),transparent 70%),
             radial-gradient(circle,rgba(194,222,111,.10) 1px,transparent 1.6px) 0 0/18px 18px,
             linear-gradient(160deg,var(--navy-3),var(--navy));
  border:1px solid rgba(194,222,111,.18);box-shadow:0 20px 40px -24px rgba(22,23,26,.6);
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;}
.card:not(.product-card)::after{content:none;}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;z-index:-1;pointer-events:none;
  background:conic-gradient(from var(--spin,0deg),transparent 0 70%,rgba(194,222,111,.9) 80%,transparent 90%);
  -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 .3s;animation:bento-spin 6s linear infinite;}
.card:hover,.card:not(.product-card):hover,.product-card:hover{transform:translateY(-4px);border-color:rgba(194,222,111,.45);
  box-shadow:0 26px 50px -24px rgba(53,55,62,.7);color:var(--on-dark);
  background:radial-gradient(360px 220px at 100% 0%,rgba(53,55,62,.42),transparent 70%),
             radial-gradient(circle,rgba(194,222,111,.10) 1px,transparent 1.6px) 0 0/18px 18px,
             linear-gradient(160deg,var(--navy-3),var(--navy));}
.card:hover::before{opacity:1;}
.card-mark{position:absolute;right:-26px;bottom:-26px;width:150px;height:150px;z-index:-1;pointer-events:none;
  color:rgba(194,222,111,.07);stroke:currentColor;stroke-width:1.2;fill:none;transition:transform .6s var(--ease),color .6s;}
.card:hover .card-mark{transform:rotate(-8deg) scale(1.06);color:rgba(194,222,111,.12);}
.card .card-icon,.card:not(.product-card):hover .card-icon,.product-card .card-icon,.zt-card .card-icon{color:#fff;
  background:linear-gradient(135deg,var(--teal),#648C14);box-shadow:0 0 0 6px rgba(194,222,111,.08),0 10px 24px -8px rgba(53,55,62,.8);}
.card h3,.product-card h3,.zt-card h3{color:#fff;}
.card p,.card > p,.product-card p,.zt-card > p{color:var(--on-dark-2);}
.card .card-more,.card .text-link{color:var(--aqua);}
.card:hover .card-more{color:#fff;}
.card .ticks li,.card .ticks-card li{color:var(--on-dark);}
.card .ticks .icon{color:var(--aqua);}
.card .feature-no,.card .zt-no{align-self:flex-start;color:var(--aqua);font-family:inherit;font-size:12px;font-weight:800;letter-spacing:.08em;
  padding:5px 10px;border-radius:999px;background:rgba(194,222,111,.1);border:1px solid rgba(194,222,111,.22);}
.card .tag-light{background:rgba(194,222,111,.14);color:var(--aqua);}
.card .tag-light.tag-soon{background:rgba(244,196,82,.16);color:#F4C452;}
.card a:focus-visible{outline:2px solid var(--aqua);outline-offset:3px;}
a.card:focus-visible{outline:3px solid var(--aqua);outline-offset:3px;}
@media (prefers-reduced-motion:reduce){.card::before{animation:none;}.card:hover{transform:none;}}
/* The process steps in the same look: dark tiles, the number glowing teal. */
.steps li{position:relative;overflow:hidden;color:var(--on-dark);border-radius:calc(var(--r-lg) + 4px);
  background:radial-gradient(300px 200px at 100% 0%,rgba(53,55,62,.4),transparent 70%),
             radial-gradient(circle,rgba(194,222,111,.10) 1px,transparent 1.6px) 0 0/18px 18px,
             linear-gradient(160deg,var(--navy-3),var(--navy));
  border:1px solid rgba(194,222,111,.18);box-shadow:0 20px 40px -24px rgba(22,23,26,.6);}
.steps li:hover{border-color:rgba(194,222,111,.45);box-shadow:0 26px 50px -24px rgba(53,55,62,.7);}
.steps h3{color:#fff;}
.steps p{color:var(--on-dark-2);}
.steps .step-no{background:linear-gradient(135deg,var(--teal),#648C14);box-shadow:0 0 0 6px rgba(194,222,111,.1),0 10px 24px -8px rgba(53,55,62,.8);}

/* ---- Availability 1.9.6: live state, uptime windows, a bar a day ---- */
.avail-live{margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-weight:800;font-size:15px;color:var(--text);}
.avail-checked{font-weight:600;font-size:13px;color:var(--text-3);}
.avail-pulse{position:relative;width:10px;height:10px;border-radius:50%;background:#AEDD22;flex:none;}
.avail-pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #AEDD22;opacity:.5;animation:availPulse 2s ease-out infinite;}
.avail-live.is-down .avail-pulse,.avail-live.is-down .avail-pulse::after{background:#D64545;border-color:#D64545;}
.avail-live.is-down .avail-pulse::after{background:transparent;}
@keyframes availPulse{from{transform:scale(.6);opacity:.7;}to{transform:scale(1.6);opacity:0;}}
.avail-windows{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 0;}
.avail-windows div{padding:8px 10px;border-radius:10px;background:var(--sunken);border:1px solid var(--border);}
.avail-windows dt{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);}
.avail-windows dd{margin:2px 0 0;font-size:18px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.avail-days{display:grid;grid-template-columns:repeat(30,1fr);gap:3px;height:34px;margin-top:14px;}
.avail-day{display:block;border-radius:3px;background:#AEDD22;transition:transform .15s,filter .15s;}
.avail-days .avail-day:hover{transform:scaleY(1.12);filter:brightness(1.15);}
.avail-day.is-dip{background:#E8A93A;}
.avail-day.is-down{background:#D64545;}
.avail-day.is-none{background:var(--border);}
.avail-day.is-maint{background:#BEE93C;}   /* planned maintenance: blue, not an outage */
.avail-days-axis{display:flex;justify-content:space-between;margin-top:4px;font-size:11px;color:var(--text-3);}
.avail-key{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:11.5px;color:var(--text-3);}
.avail-key li{display:inline-flex;align-items:center;gap:6px;}
.avail-key .avail-day{width:10px;height:10px;}
.avail-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 0;}
.avail-facts div{padding:10px 12px;border-radius:10px;border:1px solid var(--border);}
.avail-facts dt{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);}
.avail-facts dd{margin:2px 0 0;font-size:18px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;}
.avail-facts small{display:block;font-size:11.5px;font-weight:500;color:var(--text-3);margin-top:1px;}
.avail-sub{margin:16px 0 0;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);}
.avail-full{max-width:none;}
.avail-full .avail-days{height:44px;gap:4px;}
@media (max-width:560px){
  .avail-windows dd,.avail-facts dd{font-size:15px;}
  .avail-facts{grid-template-columns:1fr;}
  .avail-days{gap:2px;}
}
@media (prefers-reduced-motion:reduce){.avail-pulse::after{animation:none;}}
/* Capabilities: each card's services, a short run of links. */
.cap-links{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:14px;}
/* Liquid Rush's link on the Games page: the liquid's blues. */
/* The two game banners as a pair, closer together than the parts around them. */
.lr-promo{background:linear-gradient(110deg,#212327,#BAF50A);}
.lr-promo + .fx-promo{margin-top:calc(10px - var(--s3));}
@media (max-width:900px){ .lr-promo + .fx-promo{margin-top:-4px;} }
.lr-promo:hover{box-shadow:0 0 34px -8px rgba(202,247,68,.75);}

/* ---- Games: the arcade layout. Tiles across the top, then the screen with
   its side panel. Later than the older games rules, so it takes their place. ---- */
.arcade{display:grid;gap:var(--s3);}
.arcade-head h2{font-size:clamp(26px,3vw,34px);line-height:1.15;letter-spacing:-.02em;font-weight:800;}
.arcade-head .lede{margin-top:6px;}
.arcade-picker{display:grid;grid-template-columns:minmax(0,7.4fr) repeat(4,minmax(0,1fr));gap:10px;padding:10px;border-radius:16px;
  background:var(--sunken);border:1px solid var(--border);}
.arcade-picker .games-tabs{grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;padding:0;background:none;border:0;border-radius:0;}
.arcade-picker .games-tabs button,.arcade-out{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:82px;padding:10px 6px;white-space:normal;line-height:1.2;text-align:center;font-size:13.5px;}
.arcade-picker .games-tabs button:nth-child(n){grid-column:auto;}
.arcade-picker .games-tabs button .icon{display:block;width:24px;height:24px;}
.arcade-picker .games-tabs button:nth-child(1) .icon{color:#CBF746;}
.arcade-picker .games-tabs button:nth-child(2) .icon{color:#C3F62A;}
.arcade-picker .games-tabs button:nth-child(3) .icon{color:#CBF745;}
.arcade-picker .games-tabs button:nth-child(4) .icon{color:#FF9F1C;}
.arcade-picker .games-tabs button:nth-child(5) .icon{color:#D7F971;}
.arcade-picker .games-tabs button:nth-child(6) .icon{color:#E8B400;}
.arcade-picker .games-tabs button:nth-child(7) .icon{color:#FF5E7A;}
.arcade-picker .games-tabs button[aria-selected="true"] .icon,.arcade-picker .games-tabs button:hover .icon{color:#fff;}
.arcade-out{position:relative;border-radius:10px;font-weight:800;text-decoration:none;color:#fff;letter-spacing:.02em;
  transition:transform .2s var(--ease),box-shadow .2s;}
.arcade-out .icon{width:24px;height:24px;}
.arcade-out:hover{transform:translateY(-2px);}
.arcade-out-lr{background:linear-gradient(135deg,#212327,#BAF50A);}
.arcade-out-lr:hover{box-shadow:0 0 24px -6px rgba(202,247,68,.8);}
.arcade-out-fx{background:linear-gradient(135deg,#151619,#383A42);}
.arcade-out-fx:hover{box-shadow:0 0 24px -6px rgba(220,250,129,.8);}
.arcade-out-gl{background:linear-gradient(135deg,#151619,#7A5A0A);}
.arcade-out-gl:hover{box-shadow:0 0 24px -6px rgba(255,210,63,.8);}
.arcade-out-ar{background:linear-gradient(135deg,#121315,#B0E01F);}
.arcade-out-ar:hover{box-shadow:0 0 24px -6px rgba(225,251,147,.85);}
.arcade-new{position:absolute;top:6px;right:6px;padding:2px 6px;border-radius:999px;font-size:9px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:#131417;background:linear-gradient(90deg,#D0F857,#DCFA81);}
.arcade-main{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s3);align-items:start;}
.arcade .games-board{grid-area:auto;margin:0;width:auto;max-width:none;justify-self:stretch;display:grid;justify-items:center;}
.arcade .hiscores,.arcade .games-scores,.arcade .games-hint{grid-area:auto;align-self:auto;}
.arcade-stats span{flex:none;}
.arcade-side{display:grid;gap:var(--s2);padding:var(--s3);border-radius:16px;background:var(--surface);border:1px solid var(--border);
  box-shadow:var(--shadow);}
.arcade-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.arcade-stats span{display:grid;gap:2px;padding:10px 12px;border-radius:12px;background:var(--sunken);border:1px solid var(--border);
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);}
.arcade-stats strong{font-size:28px;line-height:1.1;letter-spacing:0;text-transform:none;color:var(--text);font-variant-numeric:tabular-nums;}
.arcade-hint{display:block;margin:0;font-size:13px;line-height:1.5;color:var(--text-2);}
.arcade .hiscores{max-width:none;width:100%;}
@media (max-width:1100px){
  .arcade-main{grid-template-columns:minmax(0,1fr) 280px;}
}
/* Narrower: the tiles become one strip to swipe, the panel goes under the screen. */
@media (max-width:900px){
  .arcade-picker{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:8px;padding:8px;}
  .arcade-picker::-webkit-scrollbar{display:none;}
  .arcade-picker .games-tabs{display:flex;flex:0 0 auto;gap:8px;container-type:normal;width:max-content;}
  .arcade-picker .games-tabs button,.arcade-out{flex:0 0 96px;min-height:76px;scroll-snap-align:start;font-size:12.5px;}
  .arcade-main{grid-template-columns:minmax(0,1fr);}
  .arcade-side{padding:var(--s2);}
  .arcade .games-hint{display:none;}
}

/* The footer's services: the five groups in one calm row. */
.footer-services .footer-title{margin-bottom:var(--s2);}
.footer-areas{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;}
.footer-areas a{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:var(--on-dark);text-decoration:none;}
.footer-areas a:hover{color:#fff;}
.footer-areas a:hover .footer-group-icon{box-shadow:inset 0 0 0 1px rgba(217,249,120,.5),0 0 14px rgba(171,213,44,.45);}
.footer-areas .footer-all{margin-left:0;color:#D9F978;}

/* The call to talk and the footer set apart: the band in teal-tinted light,
   the footer a deeper, quieter navy, the small print darker still. */
.cta-band{background:linear-gradient(120deg,#282A2F 0%,#292B31 55%,#26282D 100%);border-top:0;}
.cta-band p{color:#DBDCDE;}
.footer{background:#0F1012;border-top:1px solid rgba(217,249,120,.18);}
.footer-glow{opacity:.6;}
.footer-main,.footer-services{position:relative;}
.footer-bottom{border-top:0;margin-top:var(--s4);padding-top:var(--s3);background:#0B0C0D;box-shadow:0 0 0 100vmax #0B0C0D;clip-path:inset(0 -100vmax);}
.footer-title{color:#D9F978;}

/* The screen and its panel as one centred pair: the card hugs the board,
   and the panel is as tall as the screen, its table filling the rest. */
.arcade-main{grid-template-columns:auto 320px;justify-content:center;align-items:stretch;}
.arcade .games-board{padding:var(--s2);}
.arcade-side{align-content:start;grid-template-rows:auto auto auto 1fr;}
.arcade .hiscores{display:flex;flex-direction:column;min-height:0;}
.arcade .hs-list{flex:1;align-content:start;}
@media (max-width:900px){ .arcade-main{grid-template-columns:minmax(0,1fr);} }

/* ---- A game on a page of its own (game.html): the name and its picture,
   then the arcade with only that game, its one tab kept for games.js but
   not shown. ---- */
.arcade-single .arcade-picker{display:none;}
/* The New badge on a game card: a small pill in the corner (a later rule styles the old tiles' one). */
.arcade-screen .arcade-new{top:10px;left:10px;right:auto;padding:3px 8px;font-size:10px;}
.game-page{padding-top:var(--s3);}
.game-intro{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:var(--s3);align-items:center;margin-bottom:var(--s3);}
.game-intro h1{font-size:clamp(32px,4vw,46px);line-height:1.1;letter-spacing:-.03em;font-weight:800;margin-top:var(--s1);}
.game-intro .lede{margin-top:8px;max-width:40rem;}
.game-intro .fine{margin-top:8px;}
.game-intro-art{border-radius:16px;border:1px solid rgba(194,222,111,.25);box-shadow:0 16px 36px -22px rgba(22,23,26,.7);}
@media (max-width:700px){
  .game-intro{grid-template-columns:minmax(0,1fr) 120px;gap:var(--s2);}
  .game-intro .fine{display:none;}
}
/* The other games under a game: smaller cards, five to a row, name only. */
.arcade-grid-more{gap:var(--s2);}
.arcade-grid-more > *{flex-basis:calc((100% - 4 * var(--s2)) / 5);}
.arcade-grid-more .arcade-body{padding:12px 14px 14px;gap:8px;}
.arcade-grid-more .arcade-body h3{font-size:15px;}
.arcade-grid-more .arcade-body p{display:none;}
@media (max-width:1100px){ .arcade-grid-more > *{flex-basis:calc((100% - 3 * var(--s2)) / 4);} }
@media (max-width:820px){ .arcade-grid-more > *{flex-basis:calc((100% - 2 * var(--s2)) / 3);} }
@media (max-width:520px){ .arcade-grid-more{gap:12px;} .arcade-grid-more > *{flex-basis:calc((100% - 12px) / 2);} }
.games-gallery{margin-top:var(--s5);}

/* The footer in one row: Bitara, then products, company and services. */
.footer{background:#131417;padding-top:var(--s4);}
.footer-main{grid-template-columns:minmax(0,1.15fr) minmax(0,2.4fr);gap:var(--s4);}
.footer-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);}
.footer-areas{display:grid;gap:9px;flex-wrap:nowrap;}
.footer-areas a{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:400;color:var(--on-dark-2);}
.footer-areas a .icon{width:15px;height:15px;color:#D9F978;flex:none;}
.footer-areas .footer-all{font-weight:700;color:#D9F978;}
.footer-bottom{margin-top:var(--s4);}
@media (max-width:900px){
  .footer-main{grid-template-columns:1fr;}
  .footer-cols{grid-template-columns:1fr 1fr;}
}
@media (max-width:520px){ .footer-cols{grid-template-columns:1fr;} }

/* The champions board on a phone: a short heading, smaller cubes and clear
   room above them, so the hand, the saucer and speech bubbles have space and
   do not cover the heading or each other. */
@media (max-width:600px){
  .champions{--cube:112px;padding:14px 10px 12px;}
  .champ-head p{display:none;}
  .champ-belt{margin-top:64px;padding-bottom:30px;}
  .champ-list{gap:14px;padding-right:14px;}
  .champ-name{font-size:15px;}
  .champ-score{font-size:18px;}
}

/* ---- The call-to-talk band: a server rack behind the button ---- */
.cta-rack{position:absolute;right:calc(6% + 30px);top:50%;transform:translateY(-50%);width:176px;padding:12px 10px;
  display:grid;gap:7px;border:1px solid rgba(217,249,120,.28);border-radius:10px;pointer-events:none;z-index:0;opacity:.8;
  background:linear-gradient(180deg,rgba(21,22,25,.8),rgba(18,19,21,.55));box-shadow:0 0 50px rgba(217,249,120,.12);}
.rack-unit{display:flex;align-items:center;gap:6px;height:18px;padding:0 8px;border-radius:4px;
  background:rgba(217,249,120,.06);border:1px solid rgba(217,249,120,.14);}
.rack-unit i{width:5px;height:5px;border-radius:50%;background:#B5E621;box-shadow:0 0 6px #B5E621;
  animation:rackBlink 2.4s ease-in-out infinite;}
.rack-unit i:nth-child(2){background:#D9F978;box-shadow:0 0 6px #D9F978;animation-duration:1.7s;}
.rack-unit i:nth-child(3){background:#FBBF24;box-shadow:none;opacity:.45;animation:none;}
.rack-unit span{margin-left:auto;width:58px;height:4px;border-radius:2px;
  background:repeating-linear-gradient(90deg,rgba(217,249,120,.35) 0 3px,transparent 3px 6px);}
.rack-unit:nth-child(2) i{animation-delay:-.7s;} .rack-unit:nth-child(3) i{animation-delay:-1.3s;}
.rack-unit:nth-child(4) i{animation-delay:-.4s;} .rack-unit:nth-child(5) i{animation-delay:-1.9s;}
.rack-unit:nth-child(6) i{animation-delay:-1s;}
@keyframes rackBlink{0%,100%{opacity:1;}50%{opacity:.25;}}
/* Three columns inside the page width: words left, rack centred, button right,
   so the band is balanced instead of everything gathering at one edge. */
.cta-inner{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--s4);padding-top:var(--s5);padding-bottom:var(--s5);}
.cta-inner .btn{justify-self:end;}
.cta-band .cta-rack{position:relative;right:auto;top:auto;transform:none;width:150px;gap:5px;padding:9px 8px;}
.cta-band .rack-unit{height:15px;}
@media (max-width:900px){ .cta-inner{grid-template-columns:1fr;} .cta-band .cta-rack{display:none;} .cta-inner .btn{justify-self:start;} }
@media (prefers-reduced-motion:reduce){ .rack-unit i{animation:none;} }
/* The rack's network: six devices wired to it, a packet of light travelling
   each wire (towards the rack or away from it) and the device glowing softly
   as a packet arrives or leaves. Wires end at the rack's edges (x 125 and 275). */
.cta-scene{position:relative;width:400px;height:190px;}
.cta-net{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.cta-band .cta-scene .cta-rack{position:absolute;left:125px;top:50%;transform:translateY(-50%);z-index:1;}
.net-wire{fill:none;stroke:rgba(217,249,120,.24);stroke-width:1.2;stroke-dasharray:2 3;}
.net-packet{fill:none;stroke:#D9F978;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:7 93;stroke-dashoffset:7;
  filter:drop-shadow(0 0 3px #D9F978);animation:netFlowIn 3s linear infinite;}
.net-packet.net-out{stroke:#E0FA94;filter:drop-shadow(0 0 3px #B5E621);animation-name:netFlowOut;}
@keyframes netFlowIn{from{stroke-dashoffset:7;}to{stroke-dashoffset:-100;}}
@keyframes netFlowOut{from{stroke-dashoffset:-100;}to{stroke-dashoffset:7;}}
.net-disc{fill:rgba(20,21,24,.85);stroke:rgba(217,249,120,.45);stroke-width:1.2;}
.net-node rect,.net-node path,.net-node ellipse,.net-node circle:not(.net-disc):not(.net-halo){fill:none;stroke:#DFF796;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.net-halo{fill:none;stroke:#D9F978;stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center;
  animation:netHaloIn 3s ease-out infinite;}
.net-n2 .net-halo,.net-n4 .net-halo,.net-n6 .net-halo{stroke:#B5E621;animation-name:netHaloOut;}
@keyframes netHaloIn{0%{opacity:.7;transform:scale(1);}25%,100%{opacity:0;transform:scale(1.6);}}
@keyframes netHaloOut{0%,88%{opacity:0;transform:scale(1);}92%{opacity:.7;transform:scale(1);}100%{opacity:0;transform:scale(1.5);}}
.net-p1,.net-n1 .net-halo{animation-delay:0s;}
.net-p2,.net-n2 .net-halo{animation-delay:-.9s;}
.net-p3,.net-n3 .net-halo{animation-delay:-1.7s;}
.net-p4,.net-n4 .net-halo{animation-delay:-.5s;}
.net-p5,.net-n5 .net-halo{animation-delay:-2.2s;}
.net-p6,.net-n6 .net-halo{animation-delay:-1.3s;}
/* Not enough room for the network beside the words: the rack alone. */
@media (max-width:1140px){
  .cta-scene{width:150px;height:auto;} .cta-net{display:none;}
  .cta-band .cta-scene .cta-rack{position:relative;left:auto;top:auto;transform:none;}
}
@media (max-width:900px){ .cta-scene{display:none;} }
@media (prefers-reduced-motion:reduce){
  .net-packet{animation:none;stroke-dashoffset:-46;} .net-halo{animation:none;}
}
.cta-stars{position:absolute;inset:0;pointer-events:none;z-index:0;}
.cta-stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#F4F6F1;box-shadow:0 0 6px #D9F978;
  animation:ctaTwinkle 3s ease-in-out infinite;}
@keyframes ctaTwinkle{0%,100%{opacity:.15;transform:scale(.8);}50%{opacity:.7;transform:scale(1.1);}}
.cta-stars i:nth-child(1){left:0.0%;top:0.0%;animation-delay:-0.0s;animation-duration:2.0s;width:3px;height:3px;}
.cta-stars i:nth-child(2){left:37.3%;top:61.7%;animation-delay:-0.4s;animation-duration:2.7s;}
.cta-stars i:nth-child(3){left:74.6%;top:23.4%;animation-delay:-0.9s;animation-duration:3.4s;}
.cta-stars i:nth-child(4){left:11.9%;top:85.1%;animation-delay:-1.3s;animation-duration:4.1s;}
.cta-stars i:nth-child(5){left:49.2%;top:46.8%;animation-delay:-1.7s;animation-duration:4.8s;}
.cta-stars i:nth-child(6){left:86.5%;top:8.5%;animation-delay:-2.1s;animation-duration:2.5s;}
.cta-stars i:nth-child(7){left:23.8%;top:70.2%;animation-delay:-2.6s;animation-duration:3.2s;}
.cta-stars i:nth-child(8){left:61.1%;top:31.9%;animation-delay:-0.0s;animation-duration:3.9s;width:3px;height:3px;}
.cta-stars i:nth-child(9){left:98.4%;top:93.6%;animation-delay:-0.4s;animation-duration:4.6s;}
.cta-stars i:nth-child(10){left:35.7%;top:55.3%;animation-delay:-0.9s;animation-duration:2.3s;}
.cta-stars i:nth-child(11){left:73.0%;top:17.0%;animation-delay:-1.3s;animation-duration:3.0s;}
.cta-stars i:nth-child(12){left:10.3%;top:78.7%;animation-delay:-1.7s;animation-duration:3.7s;}
.cta-stars i:nth-child(13){left:47.6%;top:40.4%;animation-delay:-2.2s;animation-duration:4.4s;}
.cta-stars i:nth-child(14){left:84.9%;top:2.1%;animation-delay:-2.6s;animation-duration:2.1s;}
.cta-stars i:nth-child(15){left:22.2%;top:63.8%;animation-delay:-0.0s;animation-duration:2.8s;width:3px;height:3px;}
.cta-stars i:nth-child(16){left:59.5%;top:25.5%;animation-delay:-0.5s;animation-duration:3.5s;}
.cta-stars i:nth-child(17){left:96.8%;top:87.2%;animation-delay:-0.9s;animation-duration:4.2s;}
.cta-stars i:nth-child(18){left:34.1%;top:48.9%;animation-delay:-1.3s;animation-duration:4.9s;}
.cta-stars i:nth-child(19){left:71.4%;top:10.6%;animation-delay:-1.7s;animation-duration:2.6s;}
.cta-stars i:nth-child(20){left:8.7%;top:72.3%;animation-delay:-2.2s;animation-duration:3.3s;}
.cta-stars i:nth-child(21){left:46.0%;top:34.0%;animation-delay:-2.6s;animation-duration:4.0s;}
.cta-stars i:nth-child(22){left:83.3%;top:95.7%;animation-delay:-0.0s;animation-duration:4.7s;width:3px;height:3px;}
.cta-stars i:nth-child(23){left:20.6%;top:57.4%;animation-delay:-0.5s;animation-duration:2.4s;}
.cta-stars i:nth-child(24){left:57.9%;top:19.1%;animation-delay:-0.9s;animation-duration:3.1s;}
.cta-stars i:nth-child(25){left:95.2%;top:80.8%;animation-delay:-1.3s;animation-duration:3.8s;}
.cta-stars i:nth-child(26){left:32.5%;top:42.5%;animation-delay:-1.8s;animation-duration:4.5s;}
.cta-stars i:nth-child(27){left:69.8%;top:4.2%;animation-delay:-2.2s;animation-duration:2.2s;}
.cta-stars i:nth-child(28){left:7.1%;top:65.9%;animation-delay:-2.6s;animation-duration:2.9s;}
.cta-stars i:nth-child(29){left:44.4%;top:27.6%;animation-delay:-0.0s;animation-duration:3.6s;width:3px;height:3px;}
.cta-stars i:nth-child(30){left:81.7%;top:89.3%;animation-delay:-0.5s;animation-duration:4.3s;}
.cta-stars i:nth-child(31){left:19.0%;top:51.0%;animation-delay:-0.9s;animation-duration:2.0s;}
.cta-stars i:nth-child(32){left:56.3%;top:12.7%;animation-delay:-1.3s;animation-duration:2.7s;}
.cta-stars i:nth-child(33){left:93.6%;top:74.4%;animation-delay:-1.8s;animation-duration:3.4s;}
.cta-stars i:nth-child(34){left:30.9%;top:36.1%;animation-delay:-2.2s;animation-duration:4.1s;}
.cta-stars i:nth-child(35){left:68.2%;top:97.8%;animation-delay:-2.6s;animation-duration:4.8s;}
.cta-stars i:nth-child(36){left:5.5%;top:59.5%;animation-delay:-0.0s;animation-duration:2.5s;width:3px;height:3px;}
.cta-stars i:nth-child(37){left:42.8%;top:21.2%;animation-delay:-0.5s;animation-duration:3.2s;}
.cta-stars i:nth-child(38){left:80.1%;top:82.9%;animation-delay:-0.9s;animation-duration:3.9s;}
.cta-stars i:nth-child(39){left:17.4%;top:44.6%;animation-delay:-1.3s;animation-duration:4.6s;}
.cta-stars i:nth-child(40){left:54.7%;top:6.3%;animation-delay:-1.8s;animation-duration:2.3s;}
.cta-stars i:nth-child(41){left:92.0%;top:68.0%;animation-delay:-2.2s;animation-duration:3.0s;}
.cta-stars i:nth-child(42){left:29.3%;top:29.7%;animation-delay:-2.6s;animation-duration:3.7s;}
.cta-stars i:nth-child(43){left:66.6%;top:91.4%;animation-delay:-0.1s;animation-duration:4.4s;width:3px;height:3px;}
.cta-stars i:nth-child(44){left:3.9%;top:53.1%;animation-delay:-0.5s;animation-duration:2.1s;}
.cta-stars i:nth-child(45){left:41.2%;top:14.8%;animation-delay:-0.9s;animation-duration:2.8s;}
.cta-stars i:nth-child(46){left:78.5%;top:76.5%;animation-delay:-1.4s;animation-duration:3.5s;}
@media (prefers-reduced-motion:reduce){ .cta-stars i{animation:none;} }


/* ---- Menus that list every service and product (1.28.0) ----
   On a wide screen Services and Products open a panel on hover, or when
   tabbed to (focus-within), so keyboards reach every link; the panel hangs
   from the sticky top bar. On a phone the same lists fold out in the menu. */
.nav{align-self:stretch;}
.nav-drop{display:flex;align-items:center;}
.nav-drop-near{position:relative;}
.nav-drop > a{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;}
.nav-caret{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.7;transition:transform .15s;}
.nav-drop:hover .nav-caret,.nav-drop:focus-within .nav-caret{transform:translateY(1px) rotate(225deg);}
.nav-panel{position:absolute;top:100%;z-index:60;visibility:hidden;opacity:0;transform:translateY(-6px);
  transition:opacity .15s,transform .15s,visibility 0s .15s;background:var(--surface);color:var(--text);
  border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-md);padding:var(--s3);}
.nav-drop:hover > .nav-panel,.nav-drop:focus-within > .nav-panel{visibility:visible;opacity:1;transform:none;transition-delay:0s;}
.nav-panel ul{list-style:none;margin:0;padding:0;display:grid;gap:2px;}
.nav .nav-panel a:not(.btn){display:block;color:var(--text-2);font-size:14px;font-weight:500;padding:5px 8px;line-height:1.35;}
.nav .nav-panel a:not(.btn):hover{color:var(--teal);background:var(--teal-soft);}
.nav-panel-wide{left:50%;width:min(1160px,calc(100vw - 32px));transform:translate(-50%,-6px);
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s2) var(--s3);}
.nav-drop:hover > .nav-panel-wide,.nav-drop:focus-within > .nav-panel-wide{transform:translate(-50%,0);}
.nav .nav-panel a.nav-group-title:not(.btn){display:flex;align-items:center;gap:8px;color:var(--text);font-weight:700;
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px;}
.nav-group-title .icon{width:18px;height:18px;color:var(--teal);flex:none;}
.nav .nav-panel a.nav-panel-all:not(.btn){grid-column:1 / -1;justify-self:end;display:inline-flex;align-items:center;gap:6px;
  color:var(--teal);font-weight:700;}
.nav-drop-near .nav-panel{left:-8px;width:380px;}
.nav-drop-near .nav-panel strong{display:block;color:var(--text);font-weight:700;}
.nav-drop-near .nav-panel span{display:block;color:var(--text-3);font-size:13px;margin-top:2px;}
.nav-drop-near .nav-panel a:not(.btn){padding:10px 12px;}
/* The dropdowns nearest the right edge open leftwards; a long plain list takes two columns. */
.nav-drop-end .nav-panel{left:auto;right:-8px;}
.nav-panel-cols ul{grid-template-columns:1fr 1fr;}
.nav-mobile-group{border-bottom:1px solid var(--border);}
.nav-mobile .nav-mobile-group > summary{display:flex;align-items:center;justify-content:space-between;width:auto;height:auto;
  min-height:56px;padding:0 4px;background:none;border-radius:0;color:var(--text);font-weight:700;font-size:17px;}
.nav-mobile .nav-mobile-group > summary::after{content:"+";color:var(--text-3);font-weight:600;font-size:20px;}
.nav-mobile .nav-mobile-group[open] > summary::after{content:"\2212";}
.nav-mobile-group ul{list-style:none;margin:0 0 var(--s2);padding:0 4px;display:grid;}
.nav-mobile-panel .nav-mobile-group a:not(.btn){min-height:44px;font-weight:500;font-size:15px;color:var(--text-2);border-bottom:0;}
@media (prefers-reduced-motion:reduce){ .nav-panel{transition:none;} }
/* The two carets make the menu wider: keep Contact on one line down to 900px. */
.nav .btn{white-space:nowrap;}
@media (max-width:1060px){ .nav > a:not(.btn),.nav .nav-drop > a:not(.btn){padding:8px 9px;} .nav .btn{margin-left:6px;} }

/* ======================================================================
   Portfolio (portfolio.html): design concepts drawn as live pages in a
   browser frame, a word band in motion, walkthroughs that play like screen
   recordings, stacked process cards, the SUS scale and the CIA triad.
   Motion is CSS only and still for reduced motion.
   ====================================================================== */
.folio-hero{padding-bottom:0;}
.folio-hero .wrap{padding-bottom:var(--s4);}
.folio-marquee{position:relative;overflow:hidden;border-top:1px solid rgba(255,255,255,.08);padding:18px 0;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.folio-marquee-track{display:flex;align-items:center;gap:28px;width:max-content;animation:folioMarquee 42s linear infinite;}
.folio-marquee span{font-size:clamp(26px,3.6vw,46px);font-weight:800;letter-spacing:-.03em;color:transparent;
  -webkit-text-stroke:1px rgba(194,222,111,.55);white-space:nowrap;}
.folio-marquee span:nth-of-type(3n+1){color:#fff;-webkit-text-stroke:0;}
.folio-marquee i{width:10px;height:10px;border-radius:50%;background:var(--teal);box-shadow:0 0 12px var(--aqua);flex:none;}
@keyframes folioMarquee{to{transform:translateX(-50%);}}
/* The work, alive: a laptop, a browser window and a phone beside the heading,
   each showing a concept whose page scrolls slowly down and back, with the
   qualities every site gets floating around them. Drawn at 600 x 380 and
   scaled to the room there is; wide screens only. */
.folio-stage{position:absolute;z-index:1;top:max(56px,calc(50% - 230px));right:max(4vw,calc((100% - 1760px) / 2 + 72px));width:660px;height:420px;
  transform-origin:right top;pointer-events:none;}
.fs-device{position:absolute;background:#161619;border:1px solid rgba(217,249,120,.22);border-radius:12px;overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.2);animation:fsBob 7s ease-in-out infinite alternate;}
.fs-bar{display:flex;align-items:center;gap:5px;height:24px;padding:0 10px;background:#1D1E22;border-bottom:1px solid rgba(217,249,120,.12);}
.fs-bar i{width:7px;height:7px;border-radius:50%;background:#F87171;}.fs-bar i:nth-child(2){background:#FBBF24;}.fs-bar i:nth-child(3){background:#B5E621;}
.fs-bar span{margin-left:10px;padding:2px 10px;border-radius:6px;background:rgba(255,255,255,.07);color:#B0B2B7;font:11px/1.4 ui-monospace,Consolas,monospace;}
.fs-screen{position:relative;overflow:hidden;height:calc(100% - 24px);--h:236px;}
.fs-screen img{display:block;width:100%;height:auto;max-width:none;animation:fsRead 28s ease-in-out infinite alternate;}
@keyframes fsRead{0%,10%{transform:translateY(0);}90%,100%{transform:translateY(calc(-100% + var(--h)));}}
@keyframes fsBob{from{transform:translateY(0);}to{transform:translateY(-8px);}}
.fs-laptop{left:80px;top:20px;width:420px;height:260px;}
.fs-window{right:20px;top:190px;width:290px;height:196px;z-index:2;animation-delay:-3s;}
/* A tablet with Lumora, and a shop card whose photo slowly zooms (Ken Burns)
   while "Added to bag" pops in and out. */
.fs-tablet{right:0;top:-6px;width:140px;height:186px;border-radius:16px;border:5px solid #101113;z-index:3;animation-delay:-2s;}
.fs-tablet .fs-screen{height:100%;--h:176px;border-radius:11px;}
.fs-tablet img{width:100%;animation-duration:30s;animation-delay:-9s;}
.fs-shop{position:absolute;left:130px;top:318px;z-index:4;display:flex;gap:10px;align-items:center;width:230px;padding:8px;
  border-radius:14px;background:#F6EFE4;color:#2B2118;box-shadow:0 24px 50px -20px rgba(0,0,0,.8);animation:fsBob 6s ease-in-out infinite alternate;animation-delay:-1.5s;}
.fs-shop-photo{width:64px;height:78px;border-radius:9px;overflow:hidden;flex:none;}
.fs-shop-photo i{display:block;width:100%;height:100%;background:#E9DFCC url("noa-linen.webp") center / cover;animation:kenBurns 14s ease-in-out infinite alternate;}
@keyframes kenBurns{from{transform:scale(1) translate(0,0);}to{transform:scale(1.35) translate(-6%,4%);}}
.fs-shop-text{display:grid;gap:3px;font-size:12px;}
.fs-shop-text b{font-size:14px;}
.fs-shop-text span{color:#7A6A58;}
.fs-shop-text em{display:inline-flex;align-items:center;gap:4px;font-style:normal;font-weight:700;color:#4D6C0F;
  opacity:0;animation:fsAdded 7s ease-in-out infinite;}
.fs-shop-text em .icon{width:12px;height:12px;}
/* On and off at once, not faded: part-way, the word is too faint to read. */
@keyframes fsAdded{0%,40%{opacity:0;transform:translateY(4px);}40.01%{opacity:1;transform:translateY(4px);}48%,90%{opacity:1;transform:none;}90.01%,100%{opacity:0;}}
.fs-window .fs-screen{--h:172px;}.fs-window img{animation-duration:22s;animation-delay:-6s;}
.fs-phone{left:0;top:150px;width:116px;height:230px;border-radius:22px;border:5px solid #101113;z-index:3;animation-delay:-5s;}
.fs-phone .fs-screen{height:100%;--h:220px;border-radius:17px;}
.fs-phone img{width:100%;animation-duration:26s;animation-delay:-2s;}
.fs-chip{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;white-space:nowrap;
  background:rgba(21,22,25,.88);border:1px solid rgba(217,249,120,.35);color:#F3F5F0;font-size:12.5px;font-weight:700;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.7);animation:fsBob 5s ease-in-out infinite alternate;}
.fs-chip .icon{width:13px;height:13px;color:#B5E621;}
.fs-c1{left:300px;top:2px;animation-delay:-1s;}
.fs-c2{left:524px;top:196px;animation-delay:-2.5s;}
.fs-c3{left:388px;top:398px;animation-delay:-4s;}
.fs-c4{left:-30px;top:110px;animation-delay:-.5s;}
.fs-c5{left:90px;top:6px;animation-delay:-3.2s;}
@media (max-width:1499px){ .folio-stage{transform:scale(.8);} }
@media (max-width:1279px){ .folio-stage{display:none;} }
@media (prefers-reduced-motion:reduce){ .fs-device,.fs-chip,.fs-screen img,.fs-shop,.fs-shop-photo i{animation:none;} .fs-shop-text em{animation:none;opacity:1;} }

.folio-note{margin-top:var(--s2);padding:12px 16px;border-left:3px solid var(--teal);background:var(--teal-soft);
  color:var(--text-2);font-size:15px;border-radius:0 8px 8px 0;}
.folio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);}
.folio-card{display:flex;flex-direction:column;gap:var(--s3);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--s3);box-shadow:var(--shadow);transition:transform .35s var(--ease),box-shadow .35s var(--ease);}
.folio-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.folio-card-wide{grid-column:1 / -1;display:grid;grid-template-columns:1.25fr 1fr;align-items:center;}
.folio-card h3{font-size:22px;letter-spacing:-.02em;}
.folio-kicker{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
.folio-kicker span{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);
  padding:3px 8px;border:1px solid var(--border);border-radius:999px;}
.folio-kicker .folio-concept{color:var(--teal);border-color:var(--teal);}
.folio-story{margin-top:10px;display:grid;gap:4px;}
.folio-story dt{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-top:6px;}
.folio-story dd{margin:0;color:var(--text-2);font-size:15px;line-height:1.55;}
.folio-tags{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px;}
.folio-tags li{font-size:13px;padding:4px 10px;border-radius:6px;background:var(--sunken);color:var(--text-2);}

/* The browser frame and the page inside it, which scrolls on hover or focus. */
.mock{margin:0;border-radius:12px;overflow:hidden;border:1px solid var(--border-strong);background:var(--m-bg);
  box-shadow:0 24px 48px -24px rgba(22,23,26,.45);outline-offset:4px;}
.mock-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#EEF0EA;border-bottom:1px solid #DADBDE;}
.mock-bar i{width:9px;height:9px;border-radius:50%;background:#F26B5E;} .mock-bar i:nth-child(2){background:#F5BE4F;}
.mock-bar i:nth-child(3){background:#B2D54A;}
.mock-bar span{margin-left:10px;flex:1;max-width:220px;font:500 11px/1 ui-monospace,Consolas,monospace;color:#64676F;
  background:#fff;border-radius:6px;padding:5px 10px;}
.mock-view{height:300px;overflow:hidden;position:relative;}
.folio-card-wide .mock-view{height:360px;}
.mock-page{color:var(--m-ink);padding:14px 18px 20px;display:grid;gap:16px;transition:transform 4.5s cubic-bezier(.45,0,.2,1);}
.mock:hover .mock-page,.mock:focus .mock-page{transform:translateY(calc(-100% + 300px));}
.folio-card-wide .mock:hover .mock-page,.folio-card-wide .mock:focus .mock-page{transform:translateY(calc(-100% + 360px));}
.m-nav{display:flex;align-items:center;gap:10px;font-size:12px;}
.m-nav b{font-weight:800;letter-spacing:-.01em;margin-right:auto;}
.m-nav span{width:34px;height:5px;border-radius:3px;background:currentColor;opacity:.25;}
.m-nav em{width:54px;height:18px;border-radius:999px;background:var(--m-acc);}
.m-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:14px;align-items:center;min-height:170px;}
.m-copy h3{font-size:24px;line-height:1.08;letter-spacing:-.035em;font-weight:800;}
.m-copy p{font-size:12px;opacity:.7;margin-top:8px;}
.m-btn{display:inline-block;margin-top:12px;font-size:11px;font-weight:700;padding:7px 12px;border-radius:999px;
  background:var(--m-acc);color:var(--m-bg);}
.m-visual{position:relative;height:150px;border-radius:14px;overflow:hidden;
  background:linear-gradient(135deg,var(--m-acc2),var(--m-acc));}
.m-visual i{position:absolute;border-radius:50%;background:var(--m-bg);opacity:.18;}
.m-visual i:nth-child(1){width:120px;height:120px;right:-30px;top:-30px;}
.m-visual i:nth-child(2){width:70px;height:70px;left:18px;bottom:16px;opacity:.28;}
.m-visual i:nth-child(3){width:26px;height:26px;left:50%;top:40%;background:var(--m-ink);opacity:.35;}
.m-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.m-cards div{border-radius:10px;padding:10px;background:color-mix(in srgb,var(--m-ink) 6%,var(--m-bg));display:grid;gap:6px;}
.m-cards i{width:22px;height:22px;border-radius:7px;background:var(--m-acc);opacity:.85;}
.m-cards span{height:5px;border-radius:3px;background:currentColor;opacity:.2;}
.m-cards span + span{width:60%;}
.m-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.m-stats b{height:44px;border-radius:8px;border:1px solid color-mix(in srgb,var(--m-ink) 15%,transparent);
  background:linear-gradient(transparent 55%,color-mix(in srgb,var(--m-acc) 35%,transparent) 55%);}
.m-band{display:grid;gap:8px;padding:18px;border-radius:12px;background:var(--m-acc);}
.m-band span{height:8px;border-radius:4px;background:var(--m-bg);opacity:.75;width:70%;}
.m-band span + span{width:45%;opacity:.45;}
.m-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.m-tiles div{aspect-ratio:4 / 3;border-radius:8px;background:linear-gradient(160deg,var(--m-acc2),color-mix(in srgb,var(--m-acc) 60%,var(--m-bg)));}
.m-tiles div:nth-child(2n){background:linear-gradient(200deg,color-mix(in srgb,var(--m-ink) 12%,var(--m-bg)),var(--m-acc2));}
.m-foot{display:flex;gap:10px;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--m-ink) 15%,transparent);}
.m-foot span{height:5px;width:50px;border-radius:3px;background:currentColor;opacity:.2;}

/* Each concept's own look. */
.mock-veldra{--m-bg:#151618;--m-ink:#F4EFE6;--m-acc:#C9A45C;--m-acc2:#3A3C44;}
.mock-lumora{--m-bg:#F8F8F6;--m-ink:#39500B;--m-acc:#668F14;--m-acc2:#D9EBA3;}
.mock-kestrel{--m-bg:#131416;--m-ink:#EEF0EA;--m-acc:#FF7A1A;--m-acc2:#323438;}
.mock-atelier-noa{--m-bg:#F6F1EA;--m-ink:#161412;--m-acc:#B4532A;--m-acc2:#E3D5C3;}
.mock-brightpath{--m-bg:#FAFBF9;--m-ink:#1E1F23;--m-acc:#CCF74A;--m-acc2:#FFD166;}
.mock-sable-stone{--m-bg:#EDEAE6;--m-ink:#22201E;--m-acc:#C0603C;--m-acc2:#9A948C;}
/* Layouts: each concept arranges the same parts its own way. */
.mock-editorial .m-hero{grid-template-columns:1fr;min-height:0;}
.mock-editorial .m-copy h3{font-size:38px;font-weight:300;letter-spacing:-.05em;}
.mock-editorial .m-visual{height:120px;background:linear-gradient(90deg,var(--m-acc2),var(--m-acc) 140%);}
.mock-split .m-visual{border-radius:60% 40% 55% 45% / 50% 55% 45% 50%;}
.mock-dashboard .mock-page{gap:12px;}
.mock-dashboard .m-hero{grid-template-columns:.8fr 1.2fr;}
.mock-dashboard .m-visual{background:var(--m-acc2);display:flex;align-items:flex-end;gap:10px;padding:14px;}
.mock-dashboard .m-visual i{position:static;flex:1;border-radius:4px 4px 0 0;background:var(--m-acc);opacity:.9;height:45%;width:auto;}
.mock-dashboard .m-visual i:nth-child(2){height:80%;opacity:.6;} .mock-dashboard .m-visual i:nth-child(3){height:62%;}
.mock-dashboard .m-copy h3{font-size:22px;}
.mock-shop .m-hero{grid-template-columns:.9fr 1.1fr;}
.mock-shop .m-visual{height:180px;border-radius:2px;}
.mock-shop .m-btn{border-radius:2px;}
.mock-shop .m-tiles{order:-1;}
.mock-shop .m-nav{order:-2;}
.mock-centered .m-hero{grid-template-columns:1fr;text-align:center;justify-items:center;}
.mock-centered .m-visual{width:100%;height:90px;border-radius:999px;}
.mock-centered .m-copy h3{font-size:28px;}
.mock-gallery .m-hero{grid-template-columns:1fr;min-height:0;}
.mock-gallery .m-copy h3{font-size:30px;font-weight:300;letter-spacing:-.04em;}
.mock-gallery .m-visual{display:none;}
.mock-gallery .m-tiles{grid-template-columns:2fr 1fr;}
.mock-gallery .m-tiles div:first-child{grid-row:span 2;aspect-ratio:auto;}

/* Walkthroughs: a finger and a pointer working through two concepts, played
   like screen recordings on a loop (12 s). Screens slide, buttons press. */
.walks{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--s5);align-items:center;}
.walk{margin:0;display:grid;justify-items:center;gap:12px;}
.walk figcaption{font-size:14px;color:var(--text-2);text-align:center;max-width:34ch;}
.walk figcaption b{color:var(--text);}
.walks-pair{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:end;}
@media (max-width:640px){ .walks-pair{grid-template-columns:1fr;} }
.phone{position:relative;width:230px;height:460px;border-radius:36px;padding:12px;background:#101113;
  box-shadow:0 30px 60px -28px rgba(22,23,26,.6),inset 0 0 0 2px #35373B;}
.phone::before{content:"";position:absolute;left:50%;top:18px;width:70px;height:18px;margin-left:-35px;border-radius:12px;background:#101113;z-index:3;}
.phone-screen{position:relative;height:100%;border-radius:26px;overflow:hidden;background:var(--m-bg);color:var(--m-ink);}
.laptop{position:relative;width:100%;max-width:560px;}
.laptop-screen{position:relative;aspect-ratio:16 / 10;border:12px solid #101113;border-bottom-width:16px;border-radius:14px 14px 4px 4px;
  overflow:hidden;background:var(--m-bg);color:var(--m-ink);box-shadow:0 30px 60px -28px rgba(22,23,26,.6);}
.laptop::after{content:"";display:block;height:14px;margin:0 -6%;border-radius:0 0 14px 14px;background:linear-gradient(#CFD0D4,#A2A4AA);}
.wscreen{position:absolute;inset:0;padding:42px 16px 16px;display:grid;align-content:start;gap:10px;font-size:12px;
  animation:12s ease-in-out infinite;}
.laptop .wscreen{padding:16px 20px;}
.wscreen h4{font-size:17px;letter-spacing:-.02em;line-height:1.15;}
.wscreen p{opacity:.7;}
.wbtn{justify-self:start;padding:9px 14px;border-radius:999px;background:var(--m-acc);color:var(--m-bg);font-weight:700;}
.wrow{display:flex;justify-content:space-between;align-items:center;padding:9px 10px;border-radius:10px;
  background:color-mix(in srgb,var(--m-ink) 6%,var(--m-bg));}
.wdays{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;}
.wdays span{padding:8px 0;text-align:center;border-radius:8px;background:color-mix(in srgb,var(--m-ink) 6%,var(--m-bg));}
.wdays .pick{animation:wPick 12s infinite;}
.wtick{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;justify-self:center;margin-top:30px;
  background:var(--m-acc);color:var(--m-bg);font-size:30px;font-weight:800;}
.wfield{padding:9px 10px;border-radius:8px;border:1px solid color-mix(in srgb,var(--m-ink) 25%,transparent);font-family:ui-monospace,Consolas,monospace;}
.wfield span{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;width:0;animation:wType 12s steps(10) infinite;}
.wbar{height:8px;border-radius:4px;background:color-mix(in srgb,var(--m-ink) 12%,var(--m-bg));overflow:hidden;}
.wbar i{display:block;height:100%;width:72%;background:var(--m-acc);border-radius:4px;transform-origin:left;animation:wGrow 12s infinite;}
/* A night-mode street map (kestrel-map.svg): blocks, roads, a highway, a park,
   a river, and the load's route from depot to pin. */
.wmap{height:120px;border-radius:10px;background:#222326 url("kestrel-map.svg") center / cover no-repeat;
  box-shadow:inset 0 0 0 1px rgba(238,240,234,.06);}
/* Lumora (phone): home, then pick a day, then booked. */
.walk-lumora .ws1{animation-name:wS1;} .walk-lumora .ws2{animation-name:wS2;} .walk-lumora .ws3{animation-name:wS3;}
/* Kestrel (laptop): sign in, type a load number, see it live. */
.walk-kestrel .ws1{animation-name:wS1;} .walk-kestrel .ws2{animation-name:wS2;} .walk-kestrel .ws3{animation-name:wS3;}
@keyframes wS1{0%,24%{transform:none;opacity:1;}30%,94%{transform:translateX(-30%);opacity:0;}100%{transform:none;opacity:1;}}
@keyframes wS2{0%,24%{transform:translateX(100%);opacity:1;}30%,57%{transform:none;opacity:1;}63%,100%{transform:translateX(-30%);opacity:0;}}
@keyframes wS3{0%,57%{transform:translateX(100%);opacity:1;}63%,94%{transform:none;opacity:1;}100%{transform:translateX(100%);opacity:0;}}
@keyframes wPick{0%,42%{background:color-mix(in srgb,var(--m-ink) 6%,var(--m-bg));color:inherit;}
  45%,100%{background:var(--m-acc);color:var(--m-bg);}}
@keyframes wType{0%,32%{width:0;}48%,100%{width:10ch;}}
@keyframes wGrow{0%,62%{transform:scaleX(0);}80%,100%{transform:scaleX(1);}}
/* The finger lands, taps and lifts; the pointer moves like a hand: quick off
   the mark, slowing onto its target with a small overshoot, a pause, a click. */
.wtap{position:absolute;z-index:4;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;
  background:rgba(53,55,62,.25);border:2px solid rgba(255,255,255,.9);box-shadow:0 2px 10px rgba(0,0,0,.25);
  animation:12s ease-in-out infinite;}
.wpointer{position:absolute;z-index:4;width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;
  border-bottom:22px solid #fff;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));transform:rotate(-25deg);animation:12s ease-in-out infinite;}
.walk-lumora .wtap{animation-name:wTapLumora;}
.walk-kestrel .wpointer{animation-name:wPointKestrel;}
@keyframes wTapLumora{0%,13%{left:30%;top:47%;opacity:0;transform:scale(1.35);}
  17%{opacity:1;transform:scale(1);}21%{transform:scale(.7);}24%{transform:scale(1);opacity:1;}27%{left:30%;top:47%;opacity:0;transform:scale(1.2);}
  29%{left:61%;top:41%;opacity:0;transform:scale(1.35);}38%{opacity:1;transform:scale(1);}41.5%{transform:scale(.7);}44%{transform:scale(1);opacity:1;}
  47%{left:61%;top:41%;opacity:0;transform:scale(1.2);}49%{left:31%;top:65%;opacity:0;transform:scale(1.35);}51%{opacity:1;transform:scale(1);}
  54%{transform:scale(.7);}56.5%{transform:scale(1);opacity:1;}60%,100%{left:31%;top:65%;opacity:0;transform:scale(1.2);}}
@keyframes wPointKestrel{0%{left:82%;top:82%;opacity:0;}5%{left:82%;top:82%;opacity:1;animation-timing-function:cubic-bezier(.3,.75,.25,1);}13%{left:27%;top:66%;animation-timing-function:ease-out;}18%{left:15%;top:55%;}19.5%{left:16%;top:56%;transform:rotate(-25deg);}21.5%{transform:rotate(-25deg) scale(.85);}23.5%{transform:rotate(-25deg);left:16%;top:56%;}28%{left:16.5%;top:55%;animation-timing-function:cubic-bezier(.3,.75,.25,1);}33%{left:26%;top:40%;animation-timing-function:ease-out;}36%{left:30.5%;top:35.5%;}49%{left:31%;top:36.5%;}50.5%{left:31%;top:36.5%;animation-timing-function:cubic-bezier(.3,.75,.25,1);}53.5%{left:55%;top:39%;animation-timing-function:ease-out;}56%{left:62.5%;top:35.5%;}57%{left:62%;top:36%;transform:rotate(-25deg);}58.5%{transform:rotate(-25deg) scale(.85);}61%{transform:rotate(-25deg);left:62%;top:36%;opacity:1;}66%{animation-timing-function:ease-in;}72%,100%{left:88%;top:88%;opacity:0;}}

/* How we design: cards that stack as you scroll (sticky), the heading beside them. */
.folio-process{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s6);align-items:start;}
.folio-process-head{position:sticky;top:110px;}
.folio-process-head p:last-child{color:var(--text-2);margin-top:var(--s2);}
.folio-steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3);}
.folio-step{position:sticky;display:flex;gap:var(--s3);padding:var(--s3) var(--s4);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-md);}
.folio-step:nth-child(1){top:100px;} .folio-step:nth-child(2){top:114px;} .folio-step:nth-child(3){top:128px;}
.folio-step:nth-child(4){top:142px;} .folio-step:nth-child(5){top:156px;} .folio-step:nth-child(6){top:170px;}
.folio-step-n{font-size:42px;font-weight:800;letter-spacing:-.04em;line-height:1;color:transparent;
  -webkit-text-stroke:1.5px var(--teal);flex:none;}
.folio-step-what{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);}
.folio-step h3{font-size:19px;margin-top:2px;}
.folio-step p:last-child{color:var(--text-2);font-size:15px;margin-top:6px;}

/* SUS: the bands grow in when the gauge comes into view. */
.sus-gauge{margin:0;padding:var(--s4);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);
  box-shadow:var(--shadow-md);}
.sus-scale{position:relative;display:flex;height:54px;border-radius:10px;margin:52px 0 30px;}
.sus-band{position:relative;height:100%;transform-origin:left;transition:transform 1.4s var(--ease);}
.sus-band:first-child{border-radius:10px 0 0 10px;} .sus-band:nth-child(4){border-radius:0 10px 10px 0;}
.sus-band-1{width:51%;background:#F4C7C3;} .sus-band-2{width:17%;background:#F8E3A5;transition-delay:.2s;}
.sus-band-3{width:12%;background:#D6E5A9;transition-delay:.4s;} .sus-band-4{width:20%;background:#AAD42B;transition-delay:.6s;}
.sus-band em{position:absolute;bottom:-24px;left:6px;font-style:normal;font-size:12px;font-weight:700;color:var(--text-3);}
.js .sus-gauge:not(.in) .sus-band{transform:scaleX(0);}
.sus-mark{position:absolute;top:-46px;display:flex;flex-direction:column;align-items:center;transform:translateX(-50%);font-style:normal;}
.sus-mark::after{content:"";width:2px;height:62px;background:var(--text);margin-top:2px;}
.sus-mark b{font-size:18px;line-height:1;} .sus-mark small{font-size:11px;color:var(--text-3);}
.sus-mark-avg{left:68%;} .sus-mark-goal{left:80%;}
.sus-mark-goal b{color:var(--teal);} .sus-mark-goal::after{background:var(--teal);}
.sus-gauge figcaption{font-size:13px;color:var(--text-3);margin-top:var(--s2);}

/* Security: the CIA triad as three overlapping rings, glowing in turn. */
.triad-list{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:var(--s2);}
.triad-list li{display:flex;gap:12px;}
.triad-list .icon{width:22px;height:22px;color:var(--aqua);flex:none;margin-top:2px;}
.triad-list p{color:var(--on-dark-2);font-size:15px;margin-top:2px;}
.no-wp{margin-top:var(--s4);padding:var(--s3);border:1px solid rgba(194,222,111,.25);border-radius:var(--r-lg);
  background:rgba(194,222,111,.06);}
.no-wp h3{font-size:18px;color:#fff;}
.no-wp p{color:var(--on-dark-2);font-size:15px;margin-top:6px;}
.triad{position:relative;width:min(420px,100%);aspect-ratio:1;margin:var(--s4) auto 0;}
.triad-ring{position:absolute;width:62%;aspect-ratio:1;border-radius:50%;border:2px solid rgba(194,222,111,.6);
  background:radial-gradient(circle,rgba(53,55,62,.28),rgba(53,55,62,.06) 70%);display:grid;place-items:center;
  animation:triadGlow 6s ease-in-out infinite;}
.triad-ring em{font-style:normal;font-weight:800;font-size:15px;color:#fff;letter-spacing:.02em;}
.triad-ring-1{left:19%;top:0;} .triad-ring-1 em{transform:translateY(-36%);}
.triad-ring-2{left:0;bottom:2%;animation-delay:2s;} .triad-ring-2 em{transform:translate(-22%,22%);}
.triad-ring-3{right:0;bottom:2%;animation-delay:4s;} .triad-ring-3 em{transform:translate(22%,22%);}
.triad-core{position:absolute;left:50%;top:56%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;
  display:grid;place-items:center;background:var(--teal);box-shadow:0 0 40px rgba(194,222,111,.55);}
.triad-core .icon{width:30px;height:30px;color:#fff;}
@keyframes triadGlow{0%,100%{box-shadow:0 0 0 rgba(194,222,111,0);}35%{box-shadow:0 0 46px rgba(194,222,111,.35);border-color:#D9F978;}}

@media (max-width:900px){
  .folio-grid,.folio-card-wide,.folio-process,.walks{grid-template-columns:1fr;}
  .folio-process-head{position:static;}
  .folio-step{position:static;}
}
@media (prefers-reduced-motion:reduce){
  .triad-ring,.wscreen,.wtap,.wpointer,.wdays .pick,.wfield span,.wbar i{animation:none;}
  .wscreen:not(.ws1){display:none;}
  .wtap,.wpointer{display:none;}
  .mock-page,.sus-band{transition:none;}
  .js .sus-gauge:not(.in) .sus-band{transform:none;}
}

/* Live work: screenshots of our own platforms, in the same browser frame. */
.live-work{padding-bottom:0;}
.live-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);}
.live-card{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--border-strong);background:var(--surface);
  color:inherit;text-decoration:none;box-shadow:0 24px 48px -24px rgba(22,23,26,.45);transition:transform .35s var(--ease),box-shadow .35s var(--ease);}
.live-card:hover{transform:translateY(-4px) rotate(-.3deg);box-shadow:0 30px 60px -24px rgba(22,23,26,.55);color:inherit;}
.live-card img{display:block;width:100%;height:auto;}
.live-body{display:grid;gap:4px;padding:var(--s3);}
.live-body b{font-size:19px;} .live-body span{color:var(--text-2);font-size:15px;}
@media (max-width:900px){ .live-grid{grid-template-columns:1fr;} }

/* The portfolio's hero stacks: the words, then the word band at full width. */
.page-hero-dark.folio-hero{display:flex;flex-direction:column;align-items:stretch;}
.folio-hero > .wrap{width:100%;}

/* WhatsApp: always on screen at the right, above the back-to-top ring; a round
   icon, with its words sliding out on hover or keyboard focus. */
.whatsapp{position:fixed;right:20px;bottom:78px;z-index:56;display:flex;align-items:center;justify-content:center;gap:0;
  height:52px;min-width:52px;padding:0 14px;border-radius:999px;background:#B4E817;color:#fff;font-weight:700;font-size:15px;text-decoration:none;
  box-shadow:0 10px 24px -8px rgba(22,23,26,.45);transition:background-color .2s,transform .2s,gap .3s;}
.whatsapp:hover{background:#567811;color:#fff;transform:translateY(-2px);}
.whatsapp svg{width:24px;height:24px;flex:none;}
.whatsapp span{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .3s var(--ease);}
.whatsapp:hover,.whatsapp:focus-visible{gap:8px;}  /* a circle until the words slide out */
.whatsapp:hover span,.whatsapp:focus-visible span{max-width:160px;}
@media (pointer:coarse),(max-width:720px){ .whatsapp{right:14px;bottom:74px;} }
@media (prefers-reduced-motion:reduce){ .whatsapp,.whatsapp span{transition:none;} }

/* E-commerce: the Atelier Noa walkthrough (collection, product, paid order). */
.shop-points{margin:var(--s3) 0;padding-left:1.1em;display:grid;gap:8px;color:var(--text-2);}
.shop-points b{color:var(--text);}
.wshop{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.wshop span{display:grid;gap:4px;font-size:11px;}
.wshop i{display:block;aspect-ratio:3 / 4;border-radius:4px;background:linear-gradient(160deg,var(--m-acc2),color-mix(in srgb,var(--m-acc) 55%,var(--m-bg)));}
.wshop span:nth-child(2) i{background:linear-gradient(160deg,#CFC3B0,#8C7A64);}
.wshop span:nth-child(3) i{background:linear-gradient(160deg,#E9D9C9,var(--m-acc));}
.wshop b{font-size:11px;}
.wproduct{display:grid;grid-template-columns:.9fr 1.1fr;gap:16px;align-items:start;}
.wproduct > i{display:block;aspect-ratio:3 / 4;border-radius:4px;background:linear-gradient(160deg,var(--m-acc2),color-mix(in srgb,var(--m-acc) 55%,var(--m-bg)));}
.wproduct > div{display:grid;gap:8px;}
.wsizes{display:flex;gap:6px;}
.wsizes span{min-width:28px;padding:6px 0;text-align:center;border:1px solid color-mix(in srgb,var(--m-ink) 30%,transparent);border-radius:3px;}
.wsizes .pick{animation:wPick 12s infinite;}
.walk-shop .wbtn{border-radius:3px;}
.walk-shop .ws1{animation-name:wS1;} .walk-shop .ws2{animation-name:wS2;} .walk-shop .ws3{animation-name:wS3;}
.walk-shop .wpointer{animation-name:wPointShop;}
@keyframes wPointShop{0%{left:82%;top:86%;opacity:0;}6%{left:82%;top:86%;opacity:1;animation-timing-function:cubic-bezier(.3,.75,.25,1);}14%{left:30%;top:56%;animation-timing-function:ease-out;}18.5%{left:17%;top:44%;}20%{left:18%;top:45%;transform:rotate(-25deg);}22%{transform:rotate(-25deg) scale(.85);}24.5%{transform:rotate(-25deg);left:18%;top:45%;}31%{left:19%;top:46%;animation-timing-function:cubic-bezier(.3,.75,.25,1);}36%{left:52%;top:58%;animation-timing-function:ease-out;}39%{left:63.5%;top:63.5%;}40.5%{left:63%;top:63%;transform:rotate(-25deg);}42%{transform:rotate(-25deg) scale(.85);}44.5%{transform:rotate(-25deg);left:63%;top:63%;animation-timing-function:cubic-bezier(.3,.75,.25,1);}48.5%{left:61%;top:75%;animation-timing-function:ease-out;}51.5%{left:60%;top:80.5%;}53%{left:60%;top:80%;transform:rotate(-25deg);}55%{transform:rotate(-25deg) scale(.85);}58%{transform:rotate(-25deg);left:60%;top:80%;opacity:1;}61%{animation-timing-function:ease-in;}68%,100%{left:86%;top:92%;opacity:0;}}
@media (prefers-reduced-motion:reduce){ .wsizes .pick{animation:none;} }
/* Each walkthrough keeps its own clock and starts at a different point, so the
   finger and the two pointers never move in step. */
.walk-lumora :is(.wscreen,.wtap,.wdays .pick){animation-duration:11s;}
.walk-kestrel :is(.wscreen,.wpointer,.wfield span,.wbar i){animation-duration:13.5s;animation-delay:-4.5s;}
.walk-shop :is(.wscreen,.wpointer,.wsizes .pick){animation-duration:12.5s;animation-delay:-8.5s;}

/* Bespoke design and mobile apps: three phones of an app concept, fanned out
   and floating gently, each a little out of step with the others. */
.bespoke{position:relative;overflow:hidden;}
.bespoke .hero-net{opacity:.35;}
.bespoke-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:center;}
.bespoke-points{margin:var(--s3) 0 var(--s4);padding-left:1.1em;display:grid;gap:8px;color:var(--on-dark-2);}
.bespoke-points b{color:#fff;}
.mock-fynbos{--m-bg:#131416;--m-ink:#F1F3ED;--m-acc:#BDED2C;--m-acc2:#2A2B2E;}
.app-fan{position:relative;margin:0;height:500px;}
.app-fan figcaption{position:absolute;left:0;right:0;bottom:-6px;text-align:center;font-size:14px;color:var(--on-dark-2);}
.app-fan figcaption b{color:#fff;}
.app-phone{position:absolute;top:30px;width:200px;height:400px;border-radius:32px;padding:10px;background:#070708;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.7),inset 0 0 0 2px #2F3033;animation:appFloat 7s ease-in-out infinite;}
.app-phone .phone-screen{border-radius:24px;}
.app-phone-1{left:2%;transform:rotate(-8deg);--r:-8deg;animation-delay:-1s;}
.app-phone-2{left:calc(50% - 100px);top:0;z-index:2;--r:0deg;animation-delay:-3s;}
.app-phone-3{right:2%;transform:rotate(8deg);--r:8deg;animation-delay:-5s;}
@keyframes appFloat{0%,100%{transform:translateY(0) rotate(var(--r));}50%{transform:translateY(-12px) rotate(var(--r));}}
.app-screen{padding:34px 14px 14px;display:grid;gap:10px;font-size:11px;color:var(--m-ink);}
.app-screen h4{font-size:16px;}
.app-hi{font-weight:700;font-size:13px;}
.app-ring{justify-self:center;width:120px;height:120px;border-radius:50%;display:grid;place-content:center;text-align:center;
  background:radial-gradient(closest-side,var(--m-bg) 78%,transparent 80% 100%),conic-gradient(var(--m-acc) 72%,var(--m-acc2) 0);}
.app-ring b{font-size:24px;} .app-ring small{opacity:.7;}
.app-class{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:9px 10px;border-radius:10px;
  background:color-mix(in srgb,var(--m-ink) 7%,var(--m-bg));}
.app-class em{font-style:normal;font-weight:700;color:var(--m-acc);}
.app-class-on{outline:1.5px solid var(--m-acc);}
.app-class-on em{color:var(--m-bg);background:var(--m-acc);padding:2px 7px;border-radius:999px;}
.app-pass{display:grid;gap:4px;padding:14px;border-radius:14px;background:linear-gradient(140deg,var(--m-acc),#B5EA15);color:#39500B;}
.app-pass b{font-size:15px;}
.app-pass i{display:block;margin-top:8px;height:90px;border-radius:8px;background:
  repeating-linear-gradient(90deg,#39500B 0 3px,transparent 3px 5px,#39500B 5px 6px,transparent 6px 9px),#F1F3ED;}
.app-note{opacity:.7;text-align:center;}
@media (max-width:900px){ .bespoke-grid{grid-template-columns:1fr;} .app-fan{height:460px;max-width:560px;width:100%;margin:0 auto;} }
@media (max-width:520px){ .app-phone{width:160px;height:330px;} .app-phone-2{left:calc(50% - 80px);} .app-fan{height:390px;} }
@media (prefers-reduced-motion:reduce){ .app-phone{animation:none;transform:rotate(var(--r));} }

/* Text on the portfolio's dark sections: the light-page grey is too faint there. */
.bespoke .prose > p,.folio-secure .prose > p,.folio-secure .no-wp p,.bespoke-points li,.triad-list p{color:#D3D4D8;}
.bespoke h2,.folio-secure h2{color:#fff;}
.triad-list strong,.bespoke-points b{color:#fff;}

/* UX and UI principles: two columns of short, numbered checks. */
.principles-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);}
.principles-col{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s4);box-shadow:var(--shadow);}
.principles-col h3{display:flex;align-items:center;gap:12px;font-size:18px;margin-bottom:var(--s3);}
.principles-col h3 span{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--teal);
  color:#fff;font-size:15px;font-weight:800;letter-spacing:.02em;flex:none;}
.principles-col ul{list-style:none;margin:0;padding:0;display:grid;gap:4px;counter-reset:p;}
.principles-col li{counter-increment:p;display:grid;grid-template-columns:30px 1fr;column-gap:10px;padding:10px 0;
  border-top:1px solid var(--border);}
.principles-col li::before{content:counter(p, decimal-leading-zero);grid-row:span 2;font-weight:800;color:var(--teal);font-size:14px;padding-top:2px;}
.principles-col li b{font-size:16px;}
.principles-col li span{color:var(--text-2);font-size:15px;}
@media (max-width:900px){ .principles-grid{grid-template-columns:1fr;} }

/* Concept previews, take two: real words, and a picture that is a small scene
   with a glass card of live interface on it. (Later rules refine the first;
   the scene's shapes use .m-scene i.sN so the first rules cannot win.) */
.mock-page{gap:18px;padding:14px 20px 22px;font-size:11px;}
.m-nav{gap:14px;}
.m-logo{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:12px;}
.m-logo i{width:14px;height:14px;border-radius:4px;background:var(--m-acc);}
.m-links{display:flex;gap:14px;margin-left:auto;opacity:.75;}
.m-nav .m-links span{width:auto;height:auto;background:none;opacity:1;border-radius:0;}
.m-nav em{width:auto;height:auto;padding:5px 11px;border-radius:999px;font-style:normal;font-weight:700;font-size:10.5px;
  background:var(--m-acc);color:var(--m-bg);}
.m-nav b{margin-right:0;}
.m-kicker{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--m-acc);margin-bottom:6px;}
.m-copy p{font-size:11.5px;}
.m-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.m-actions .m-btn{margin-top:0;}
.m-btn-ghost{background:transparent;color:var(--m-ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--m-ink) 35%,transparent);}
.m-visual.m-scene{position:relative;display:block;padding:0;height:170px;border-radius:14px;overflow:hidden;
  box-shadow:0 18px 30px -18px rgba(0,0,0,.45);}
.m-visual.m-scene i{position:absolute;display:block;border-radius:0;opacity:1;background:none;flex:none;width:0;height:0;}
.m-glass{position:absolute;right:10px;bottom:10px;z-index:2;display:grid;gap:1px;min-width:96px;padding:8px 11px;border-radius:10px;
  background:color-mix(in srgb,var(--m-bg) 72%,transparent);color:var(--m-ink);backdrop-filter:blur(8px);
  box-shadow:0 8px 20px -8px rgba(0,0,0,.4),inset 0 0 0 1px color-mix(in srgb,var(--m-ink) 14%,transparent);}
.m-glass small{font-size:9px;opacity:.7;} .m-glass b{font-size:15px;letter-spacing:-.02em;color:var(--m-acc);} .m-glass span{font-size:9.5px;opacity:.75;}
.m-cards div{padding:12px;gap:4px;}
.m-cards i{width:20px;height:20px;border-radius:6px;margin-bottom:4px;}
.m-cards b{font-size:11.5px;} .m-cards span{height:auto;background:none;opacity:.7;font-size:10px;width:auto;}
.m-cards span + span{width:auto;}
.m-stats{grid-template-columns:repeat(3,1fr);}
.m-stats div{padding:10px 12px;border-radius:10px;border:1px solid color-mix(in srgb,var(--m-ink) 14%,transparent);}
.m-stats b{display:block;height:auto;border:0;background:none;font-size:18px;letter-spacing:-.03em;color:var(--m-acc);}
.m-stats span{font-size:9.5px;opacity:.7;}
.m-band{gap:4px;padding:16px 18px;}
.m-band q{font-size:13px;font-weight:700;color:var(--m-bg);}
.m-band span{height:auto;width:auto;background:none;color:var(--m-bg);opacity:.8;font-size:10px;}
.m-band span + span{width:auto;}
.m-tiles div{aspect-ratio:auto;background:none;display:grid;gap:2px;}
.m-tiles div:nth-child(2n){background:none;}
.m-tiles i{display:block;aspect-ratio:4 / 5;border-radius:6px;background:linear-gradient(160deg,var(--m-acc2),color-mix(in srgb,var(--m-acc) 55%,var(--m-bg)));}
.m-tiles b{font-size:10.5px;margin-top:4px;} .m-tiles span{font-size:9.5px;opacity:.7;}
.m-foot{align-items:center;gap:14px;}
.m-foot span{height:auto;width:auto;background:none;font-size:9.5px;opacity:.6;}
.m-foot .m-logo{margin-right:auto;font-size:11px;}
.mock-gallery .m-tiles div:first-child{grid-row:auto;}
.mock-gallery .m-tiles{grid-template-columns:repeat(3,1fr);}
.mock-centered .m-visual.m-scene{border-radius:14px;}

/* Veldra: dusk over a city skyline. */
.mock-veldra .m-visual.m-scene{height:150px;background:linear-gradient(180deg,#1F2125 0%,#3A3C44 45%,#B98F4E 100%);}
.mock-veldra .m-visual.m-scene i.s1{left:0;width:100%;bottom:0;height:62%;background:#101113;
  clip-path:polygon(0 70%,6% 70%,6% 40%,12% 40%,12% 55%,18% 55%,18% 20%,22% 15%,26% 20%,26% 60%,33% 60%,33% 35%,40% 35%,40% 65%,47% 65%,47% 10%,52% 0,57% 10%,57% 50%,64% 50%,64% 30%,71% 30%,71% 62%,78% 62%,78% 25%,84% 25%,84% 58%,90% 58%,90% 42%,96% 42%,96% 68%,100% 68%,100% 100%,0 100%);}
.mock-veldra .m-visual.m-scene i.s2{width:22px;height:22px;border-radius:50%;left:16%;top:16%;background:#E9D2A0;box-shadow:0 0 24px #E9D2A0;}
.mock-veldra .m-visual.m-scene i.s3{left:47.5%;width:9%;bottom:10%;height:40%;background:repeating-linear-gradient(0deg,transparent 0 6px,rgba(233,210,160,.5) 6px 8px);}
/* Lumora: soft mint shapes and a smile. */
.mock-lumora .m-visual.m-scene{background:linear-gradient(140deg,#D9EBA3,#668F14);}
.mock-lumora .m-visual.m-scene i.s1{width:120px;height:120px;border-radius:50%;left:-24px;bottom:-40px;background:rgba(255,255,255,.3);}
.mock-lumora .m-visual.m-scene i.s2{width:64px;height:64px;border-radius:50%;left:22%;top:16%;background:#fff;box-shadow:0 10px 20px -8px rgba(57,80,11,.35);}
.mock-lumora .m-visual.m-scene i.s3{width:28px;height:12px;left:calc(22% + 18px);top:calc(16% + 32px);border:3px solid #668F14;border-top:0;border-radius:0 0 30px 30px;}
.mock-lumora .m-visual.m-scene i.s4{width:5px;height:5px;border-radius:50%;left:calc(22% + 22px);top:calc(16% + 22px);background:#39500B;box-shadow:16px 0 0 #39500B;}
.mock-lumora .m-visual.m-scene i.s5{width:46px;height:46px;border-radius:50%;right:28%;top:-12px;background:rgba(255,255,255,.4);}
/* Kestrel: a route on a dark map, with a truck. */
.mock-kestrel .m-visual.m-scene{background:repeating-linear-gradient(0deg,transparent 0 22px,rgba(238,240,234,.06) 22px 23px),
  repeating-linear-gradient(90deg,transparent 0 22px,rgba(238,240,234,.06) 22px 23px),#1B1C1E;}
.mock-kestrel .m-visual.m-scene i.s1{left:8%;width:72%;top:44%;height:3px;background:repeating-linear-gradient(90deg,#FF7A1A 0 10px,transparent 10px 16px);transform:rotate(-14deg);}
.mock-kestrel .m-visual.m-scene i.s2{width:14px;height:14px;border-radius:50%;left:7%;top:62%;background:#EEF0EA;box-shadow:0 0 0 4px rgba(238,240,234,.2);}
.mock-kestrel .m-visual.m-scene i.s3{width:16px;height:16px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);right:18%;top:14%;background:#FF7A1A;}
.mock-kestrel .m-visual.m-scene i.s4{width:30px;height:16px;left:42%;top:30%;border-radius:3px;background:#FF7A1A;box-shadow:0 0 18px rgba(255,122,26,.6);}
.mock-kestrel .m-visual.m-scene i.s5{width:10px;height:16px;left:calc(42% + 30px);top:30%;border-radius:0 6px 3px 0;background:#EEF0EA;}
/* Atelier Noa: a linen shirt in a warm studio. */
.mock-atelier-noa .m-visual.m-scene{height:190px;border-radius:2px;background:radial-gradient(ellipse at 50% 92%,#C9A98A 0 28%,transparent 29%),linear-gradient(180deg,#E8DCCB,#D9C3A8);}
.mock-atelier-noa .m-visual.m-scene i.s1{width:120px;height:120px;left:calc(50% - 60px);top:22px;background:linear-gradient(160deg,#FBF7F1,#E4D6C2);
  clip-path:polygon(30% 0,40% 6%,60% 6%,70% 0,100% 18%,90% 40%,78% 34%,78% 100%,22% 100%,22% 34%,10% 40%,0 18%);}
.mock-atelier-noa .m-visual.m-scene i.s2{width:1px;height:86px;left:50%;top:30px;background:rgba(180,83,42,.4);}
.mock-atelier-noa .m-visual.m-scene i.s3{width:5px;height:5px;border-radius:50%;left:calc(50% - 2px);top:48px;background:#B4532A;box-shadow:0 16px 0 #B4532A,0 32px 0 #B4532A;}
.mock-atelier-noa .m-tiles i{aspect-ratio:3 / 4;border-radius:2px;}
.mock-atelier-noa .m-tiles div:nth-child(2) i{background:linear-gradient(160deg,#CFC3B0,#8C7A64);}
.mock-atelier-noa .m-tiles div:nth-child(3) i{background:linear-gradient(160deg,#E9D9C9,#B4532A);}
.mock-atelier-noa .m-tiles div:nth-child(4) i{background:linear-gradient(160deg,#F2EEE8,#C9BFB2);}
.mock-atelier-noa .m-tiles div:nth-child(5) i{background:linear-gradient(160deg,#6E5E4C,#2E2620);}
.mock-atelier-noa .m-tiles div:nth-child(6) i{background:linear-gradient(160deg,#E3D5C3,#A88F70);}
/* Brightpath: playful shapes in purple and yellow. */
.mock-brightpath .m-visual.m-scene{height:120px;background:linear-gradient(120deg,#CCF74A,#D9F979);}
.mock-brightpath .m-visual.m-scene i.s1{width:70px;height:70px;border-radius:50%;left:8%;top:-18px;background:#FFD166;}
.mock-brightpath .m-visual.m-scene i.s2{left:30%;bottom:12px;border-left:26px solid transparent;border-right:26px solid transparent;border-bottom:44px solid rgba(255,255,255,.85);}
.mock-brightpath .m-visual.m-scene i.s3{width:44px;height:44px;border-radius:10px;left:52%;top:20px;background:#FF8FAB;transform:rotate(14deg);}
.mock-brightpath .m-visual.m-scene i.s4{width:120px;height:120px;border-radius:50%;right:-40px;bottom:-60px;background:rgba(255,255,255,.18);}
/* Sable & Stone: the projects as angular buildings in light. */
.mock-sable-stone .m-tiles i{aspect-ratio:4 / 3;border-radius:0;}
.mock-sable-stone .m-tiles div:nth-child(1) i{background:linear-gradient(115deg,#D8D2CA 0 46%,#9A948C 46% 70%,#5D5852 70%);}
.mock-sable-stone .m-tiles div:nth-child(2) i{background:linear-gradient(200deg,#C0603C 0 30%,#EDEAE6 30% 62%,#22201E 62%);}
.mock-sable-stone .m-tiles div:nth-child(3) i{background:linear-gradient(90deg,#B9B2A8 0 25%,#EDEAE6 25% 50%,#9A948C 50% 75%,#D8D2CA 75%);}
.mock-sable-stone .m-tiles div:nth-child(4) i{background:linear-gradient(160deg,#EDEAE6 0 40%,#C0603C 40% 55%,#5D5852 55%);}
.mock-sable-stone .m-tiles div:nth-child(5) i{background:linear-gradient(30deg,#22201E 0 35%,#9A948C 35% 70%,#EDEAE6 70%);}
.mock-sable-stone .m-tiles div:nth-child(6) i{background:linear-gradient(135deg,#D8D2CA 0 50%,#C0603C 50%);}
/* The links wrapper is a span too: undo the old placeholder-bar rule on it. */
.m-nav .m-links{width:auto;height:auto;background:none;opacity:.75;border-radius:0;white-space:nowrap;}
.m-nav .m-links span{white-space:nowrap;}
@container (max-width:620px){ .m-nav .m-links span:nth-child(n+3){display:none;} }
@media (max-width:1100px){ .m-nav .m-links span:nth-child(n+3){display:none;} }
@media (max-width:560px){ .m-nav .m-links{display:none;} }
.mock-page{container-type:inline-size;}
/* Shop previews: hero (the shirt) first, then the six products in one row. */
.mock-shop .m-tiles{order:0;grid-template-columns:repeat(6,1fr);}
@container (max-width:620px){ .mock-shop .m-tiles{grid-template-columns:repeat(3,1fr);} }
/* The scenes place every shape themselves: clear the old placeholder offsets. */
.m-visual.m-scene i{top:auto;right:auto;bottom:auto;left:auto;}
/* Sable & Stone: a cantilevered concrete house in late light. */
.mock-sable-stone .m-visual.m-scene{height:170px;border-radius:0;background:linear-gradient(180deg,#F3E6D8 0%,#E7D3BF 62%,#BDB4A9 62%,#A69D92 100%);}
.mock-sable-stone .m-visual.m-scene i.s1{left:14%;bottom:38%;width:58%;height:22%;background:linear-gradient(180deg,#EDEAE6,#CFC8BF);box-shadow:0 10px 14px -6px rgba(34,32,30,.45);}
.mock-sable-stone .m-visual.m-scene i.s2{left:20%;bottom:20%;width:40%;height:18%;background:repeating-linear-gradient(90deg,#2B3036 0 22px,#8A9096 22px 24px);}
.mock-sable-stone .m-visual.m-scene i.s3{left:60%;bottom:20%;width:6%;height:58%;background:#C0603C;}
.mock-sable-stone .m-visual.m-scene i.s4{left:10%;bottom:12%;width:72%;height:8%;background:#7E766D;}
.mock-sable-stone .m-visual.m-scene i.s5{width:40px;height:40px;border-radius:50%;left:6%;top:12%;background:#F7C99B;box-shadow:0 0 30px #F7C99B;}
/* Sable sits in a half-width card: put the house beside the headline so it is seen whole. */
.mock-sable-stone .m-hero{grid-template-columns:1fr 1fr;align-items:center;}
@container (max-width:420px){ .mock-sable-stone .m-hero{grid-template-columns:1fr;} }

/* A service's "why" section (local LLMs on AI Software Development). */
.why-local .card h3{font-size:18px;margin-bottom:6px;}
.why-note{margin-top:var(--s4);max-width:760px;}

/* A live product's screenshot on its own product page. */
.product-shot .live-card{max-width:1100px;margin:0 auto;}
.product-shot .live-card:hover{transform:none;}

/* Concept previews: a real screenshot of each full homepage, scrolled on hover. */
.mock-shot{display:block;width:100%;height:auto;transition:transform 6s cubic-bezier(.45,0,.2,1);}
.mock:hover .mock-shot,.mock:focus .mock-shot{transform:translateY(calc(-100% + 300px));}
.folio-card-wide .mock:hover .mock-shot,.folio-card-wide .mock:focus .mock-shot{transform:translateY(calc(-100% + 360px));}
@media (prefers-reduced-motion:reduce){ .mock-shot{transition:none;} }
/* The reveal page (/reveal/...): the number, large and easy to tap. */
.reveal-number{display:inline-block;margin-top:6px;font-size:clamp(30px,4vw,46px);font-weight:800;letter-spacing:-.01em;color:#fff;text-decoration:none;}
.reveal-number:hover{color:var(--aqua);}
.reveal-box form{display:grid;gap:var(--s3);justify-items:start;margin-top:var(--s3);}

/* About: the senior IT roles we cover. */
.roles-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);}
@media (max-width:1100px){ .roles-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:700px){ .roles-grid{grid-template-columns:1fr;} }
.role-card h3{font-size:20px;margin-bottom:4px;}
.role-card > p{color:var(--text-2);margin-bottom:var(--s2);}
.role-card .ticks li{font-size:15px;}

/* ---- Portfolio, 1.44.0 ------------------------------------------------- */
/* Words that fly in letter by letter, hold, and fade: one every 2s. */
.folio-words{position:relative;height:clamp(48px,5vw,66px);margin-top:var(--s4);font-size:clamp(32px,4.2vw,54px);
  font-weight:800;letter-spacing:-.03em;line-height:1.1;}
.folio-words .fw{position:absolute;left:0;top:0;white-space:nowrap;}
.folio-words b{display:inline-block;white-space:pre;opacity:0;font-weight:inherit;
  animation:wordFly 22s cubic-bezier(.2,.8,.2,1) infinite;animation-delay:calc(var(--wd) + var(--cd));}
.folio-words .fw:nth-child(3n+1) b{color:#fff;}
.folio-words .fw:nth-child(3n+2) b{color:#C2DE6F;}
.folio-words .fw:nth-child(3n) b{color:#FFD166;}
.folio-words .fw:nth-child(even) b{animation-name:wordRise;}
.fw1{--wd:0s;}.fw2{--wd:2s;}.fw3{--wd:4s;}.fw4{--wd:6s;}.fw5{--wd:8s;}.fw6{--wd:10s;}.fw7{--wd:12s;}.fw8{--wd:14s;}.fw9{--wd:16s;}.fw10{--wd:18s;}.fw11{--wd:20s;}
.folio-words b:nth-child(1){--cd:0.000s;}.folio-words b:nth-child(2){--cd:0.035s;}.folio-words b:nth-child(3){--cd:0.070s;}.folio-words b:nth-child(4){--cd:0.105s;}.folio-words b:nth-child(5){--cd:0.140s;}.folio-words b:nth-child(6){--cd:0.175s;}.folio-words b:nth-child(7){--cd:0.210s;}.folio-words b:nth-child(8){--cd:0.245s;}.folio-words b:nth-child(9){--cd:0.280s;}.folio-words b:nth-child(10){--cd:0.315s;}.folio-words b:nth-child(11){--cd:0.350s;}.folio-words b:nth-child(12){--cd:0.385s;}.folio-words b:nth-child(13){--cd:0.420s;}.folio-words b:nth-child(14){--cd:0.455s;}.folio-words b:nth-child(15){--cd:0.490s;}.folio-words b:nth-child(16){--cd:0.525s;}
@keyframes wordFly{0%{opacity:0;transform:translateX(42px) rotate(8deg) scale(.6);filter:blur(6px);}
  1.64%{opacity:1;transform:none;filter:blur(0);}
  7.09%{opacity:1;transform:none;filter:blur(0);}
  8.91%{opacity:0;transform:translateY(-18px) scale(1.05);filter:blur(5px);}
  100%{opacity:0;}}
@keyframes wordRise{0%{opacity:0;transform:translateY(34px) scale(.7);filter:blur(6px);}
  1.64%{opacity:1;transform:none;filter:blur(0);}
  7.09%{opacity:1;transform:none;filter:blur(0);}
  8.91%{opacity:0;transform:translateX(-26px) scale(.96);filter:blur(5px);}
  100%{opacity:0;}}

/* Sparkles and streamers (templates/_sparkle.html). */
.sparkle-field{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.streamers{position:absolute;inset:0;width:100%;height:100%;}
.streamer-track{fill:none;stroke:rgba(194,222,111,.07);stroke-width:1.5;}
.streamer{fill:none;stroke-width:3;stroke-linecap:round;stroke-dasharray:22 78;
  filter:drop-shadow(0 0 6px rgba(194,222,111,.7));animation:streamerFlow 9s linear infinite;}
.st2{animation-duration:12s;animation-delay:-4s;stroke-width:2.4;}
.st3{animation-duration:15s;animation-delay:-9s;stroke-width:2;}
.st4{animation-duration:11s;animation-delay:-2s;stroke-width:1.8;stroke-dasharray:14 86;}
@keyframes streamerFlow{from{stroke-dashoffset:100;}to{stroke-dashoffset:0;}}
.spark{position:absolute;width:var(--sz,10px);height:var(--sz,10px);background:#fff;opacity:0;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  filter:drop-shadow(0 0 6px rgba(255,255,255,.9));animation:twinkle var(--tw,3.2s) ease-in-out infinite;animation-delay:var(--td,0s);}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.2) rotate(0deg);}50%{opacity:1;transform:scale(1) rotate(90deg);}}
.sp0{left:6%;top:18%;--sz:10px;--tw:3.1s;--td:-0.4s;}.sp1{left:14%;top:72%;--sz:7px;--tw:2.6s;--td:-1.2s;background:#FFD166;}.sp2{left:22%;top:34%;--sz:12px;--tw:3.8s;--td:-2.1s;}.sp3{left:31%;top:84%;--sz:8px;--tw:2.9s;--td:-0.9s;background:#C2DE6F;}.sp4{left:39%;top:12%;--sz:9px;--tw:3.4s;--td:-2.7s;}.sp5{left:47%;top:58%;--sz:6px;--tw:2.4s;--td:-1.6s;background:#FFD166;}.sp6{left:55%;top:24%;--sz:11px;--tw:3.6s;--td:-0.2s;}.sp7{left:62%;top:78%;--sz:8px;--tw:2.8s;--td:-2.3s;background:#E1FB93;}.sp8{left:68%;top:40%;--sz:13px;--tw:4.1s;--td:-1.1s;}.sp9{left:74%;top:8%;--sz:7px;--tw:2.5s;--td:-3.0s;background:#FFD166;}.sp10{left:80%;top:62%;--sz:10px;--tw:3.3s;--td:-0.7s;}.sp11{left:86%;top:28%;--sz:8px;--tw:2.7s;--td:-1.9s;background:#C2DE6F;}.sp12{left:91%;top:82%;--sz:12px;--tw:3.9s;--td:-2.5s;}.sp13{left:95%;top:46%;--sz:7px;--tw:2.3s;--td:-0.5s;background:#FFD166;}.sp14{left:3%;top:52%;--sz:9px;--tw:3.0s;--td:-1.4s;background:#E1FB93;}.sp15{left:50%;top:92%;--sz:8px;--tw:3.5s;--td:-2.9s;}
.folio-hero > .wrap{position:relative;z-index:1;}
.folio-hero .folio-stage{z-index:1;}
.cta-band > .wrap{position:relative;z-index:1;}

/* Concept cards: each preview pans slowly by itself (its own pace), and a
   ribbon of light runs round the card on hover. */
@property --glow{syntax:'<angle>';inherits:false;initial-value:0deg;}
.folio-card{position:relative;isolation:isolate;}
.folio-card::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:2px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--glow),transparent 0 60%,#B4E71A 75%,#FFD166 85%,transparent 95%);
  -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 exclude,linear-gradient(#000 0 0);
  opacity:0;transition:opacity .35s;animation:cardGlow 3.5s linear infinite;}
.folio-card:hover::after,.folio-card:focus-within::after{opacity:1;}
@keyframes cardGlow{to{--glow:360deg;}}
.mock-view{--vh:300px;}
.folio-card-wide .mock-view{--vh:360px;}
/* Each preview scrolls its whole page down and back up, each at its own speed. */
.mock:not(:hover):not(:focus) .mock-shot{animation:shotPan 26s ease-in-out infinite alternate;}
.folio-card:nth-child(2) .mock-shot{animation-duration:18s;animation-delay:-5s;}
.folio-card:nth-child(3) .mock-shot{animation-duration:34s;animation-delay:-9s;}
.folio-card:nth-child(4) .mock-shot{animation-duration:14s;animation-delay:-3s;}
.folio-card:nth-child(5) .mock-shot{animation-duration:29s;animation-delay:-12s;}
.folio-card:nth-child(6) .mock-shot{animation-duration:22s;animation-delay:-7s;}
@keyframes shotPan{0%,6%{transform:translateY(0);}94%,100%{transform:translateY(calc(-100% + var(--vh)));}}
.folio-card-flip{grid-template-columns:1fr 1.25fr;}
.folio-card-flip > .mock{order:2;}

/* The shop walkthrough: real product photos, a bag that fills, and a burst
   of sparkles when the order is paid. */
.wshop i.np-linen{background:#E9DFCC url("noa-linen-thumb.webp") center / cover;}
.wshop i.np-hat{background:#E9DFCC url("noa-hat.webp") center / cover;}
.wshop i.np-scarf{background:#E9DFCC url("noa-scarf.webp") center / cover;}
.wproduct > i.np-main{background:#E9DFCC url("noa-linen.webp") center / cover;}
.wbag{position:absolute;top:12px;right:14px;z-index:3;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
  color:var(--m-ink);background:color-mix(in srgb,var(--m-bg) 85%,transparent);padding:4px 8px;border-radius:999px;}
.wbag b{display:grid;place-items:center;min-width:17px;height:17px;border-radius:50%;background:var(--m-acc);color:var(--m-bg);font-size:10px;
  transform:scale(0);animation:wBag 12.5s infinite;animation-delay:-8.5s;}
@keyframes wBag{0%,53%{transform:scale(0);}56%{transform:scale(1.45);}59%,94%{transform:scale(1);}100%{transform:scale(0);}}
.walk-shop .wscreen.ws3{justify-items:center;text-align:center;}
.wburst{position:absolute;left:50%;top:62px;width:0;height:0;}
.wburst i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:2px;background:var(--m-acc);opacity:0;
  animation:wBurst 12.5s ease-out infinite;animation-delay:-8.5s;}
.wburst i:nth-child(3n+1){background:#FFD166;} .wburst i:nth-child(3n+2){background:#B4E71A;border-radius:50%;}
.wburst i:nth-child(1){--a:0deg;}.wburst i:nth-child(2){--a:30deg;}.wburst i:nth-child(3){--a:60deg;}.wburst i:nth-child(4){--a:90deg;}.wburst i:nth-child(5){--a:120deg;}.wburst i:nth-child(6){--a:150deg;}.wburst i:nth-child(7){--a:180deg;}.wburst i:nth-child(8){--a:210deg;}.wburst i:nth-child(9){--a:240deg;}.wburst i:nth-child(10){--a:270deg;}.wburst i:nth-child(11){--a:300deg;}.wburst i:nth-child(12){--a:330deg;}
@keyframes wBurst{0%,63%{opacity:0;transform:rotate(var(--a)) translateY(0) scale(.4);}
  65%{opacity:1;}78%{opacity:1;transform:rotate(var(--a)) translateY(-58px) scale(1);}86%,100%{opacity:0;transform:rotate(var(--a)) translateY(-70px) scale(.6);}}

@media (prefers-reduced-motion:reduce){
  .folio-words b,.streamer,.spark,.folio-card::after,.mock-shot,.wbag b,.wburst i{animation:none !important;}
  .folio-words .fw1 b{opacity:1;} .wbag b{transform:scale(1);}
}
@media (max-width:720px){ .sp8,.sp9,.sp10,.sp11,.sp12,.sp13,.sp14,.sp15{display:none;} }

/* About: the executive summary. */
.exec-lede{max-width:860px;font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--text-2);margin:var(--s2) 0 var(--s4);
  padding-left:var(--s3);border-left:3px solid var(--teal);}
.exec-card h3{font-size:17px;}
.exec-card p{color:var(--on-dark-2);}

/* Champions board, the new cast (games.js): the jets and their missiles, the
   hunter's three red dots and plasma bolt, Mr Plop's whiff, the sponge's bubbles. */
.champ-jet{position:absolute;z-index:6;pointer-events:none;overflow:visible;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5));}
.champ-jet .jet-burn{animation:jetBurn .12s linear infinite alternate;}
@keyframes jetBurn{from{opacity:.6;}to{opacity:1;}}
.champ-missile{position:absolute;z-index:6;width:18px;height:4px;margin:-2px 0 0 -9px;border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,#FFB347,#EEF0EA 40%);box-shadow:0 0 8px #FF9F1C;transform-origin:50% 50%;}
.champ-dot{position:absolute;z-index:6;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#FF2A2A;box-shadow:0 0 8px #FF2A2A;pointer-events:none;}
.champ-plasma{position:absolute;z-index:6;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#fff,#CAF744 55%,rgba(202,247,68,0) 70%);box-shadow:0 0 16px #CAF744;}
.champ-hunter{opacity:0;}
.champ-pile{z-index:3;overflow:visible;}
.champ-pile .champ-whiff{animation:whiff 1.2s ease-in-out infinite alternate;}
@keyframes whiff{from{opacity:.3;transform:translateY(2px);}to{opacity:1;transform:translateY(-2px);}}
.champ-bubble{position:absolute;z-index:5;width:9px;height:9px;border-radius:50%;border:1.5px solid currentColor;pointer-events:none;
  animation:bubbleUp .9s ease-out forwards;}
@keyframes bubbleUp{from{opacity:1;transform:translateY(0) scale(.6);}to{opacity:0;transform:translateY(-26px) scale(1.3);}}

/* The champions' cubes, as real cubes: tilted so their sides show as they
   roll, both ends closed, lit from above, and hopping with a squash on
   landing, a stretch at the top, and a shadow on the floor that follows. */
.champ-list li{position:relative;}
.champ-list li::after{content:"";position:absolute;left:14%;right:14%;bottom:-16px;height:10px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);animation:cubeShadow 1.7s cubic-bezier(.33,0,.55,1) infinite;
  animation-delay:inherit;}
@keyframes cubeTurn{
  0%,21%{transform:translateZ(calc(var(--cube) / -2)) rotateY(-26deg) rotateX(-12deg);}
  25%,46%{transform:translateZ(calc(var(--cube) / -2)) rotateY(-26deg) rotateX(78deg);}
  50%,71%{transform:translateZ(calc(var(--cube) / -2)) rotateY(-26deg) rotateX(168deg);}
  75%,96%{transform:translateZ(calc(var(--cube) / -2)) rotateY(-26deg) rotateX(258deg);}
  100%{transform:translateZ(calc(var(--cube) / -2)) rotateY(-26deg) rotateX(348deg);}}
.face{border-radius:10px;}
.face::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 40%,rgba(0,0,0,.22));}
.face-end{background:linear-gradient(160deg,#1F2125,#111214);border-color:rgba(217,249,120,.3);}
.face-left{transform:rotateY(-90deg) translateZ(calc(var(--cube) / 2));}
.face-right{transform:rotateY(90deg) translateZ(calc(var(--cube) / 2));filter:brightness(.7);}
.champ-list li{animation:cubeHop 1.7s cubic-bezier(.33,0,.55,1) infinite;transform-origin:50% 100%;}
@keyframes cubeHop{
  0%{transform:translateY(0) scale(1.08,.9);}
  12%{transform:translateY(-4px) scale(.95,1.06);}
  50%{transform:translateY(-22px) scale(1,1);}
  88%{transform:translateY(-3px) scale(.97,1.04);}
  100%{transform:translateY(0) scale(1.08,.9);}}
@keyframes cubeShadow{0%,100%{transform:translateY(0) scale(1);opacity:1;}50%{transform:translateY(22px) scale(.6);opacity:.45;}}
.champ-belt{padding-top:30px;padding-bottom:30px;}
@media (prefers-reduced-motion:reduce){ .champ-list li,.champ-list li::after{animation:none;} }

/* The posture report typing itself out (site.js). */
/* Untyped text keeps its place, invisible; the bars wait for their line. The
   cursor overlaps the next letter instead of pushing it along. */
.spec .spec-rest{color:transparent;}
@media (prefers-reduced-motion:no-preference){ .js .spec-typed .meter:not(.meter-on){visibility:hidden;} }
.spec-typed .meter i{transition:width 1.6s cubic-bezier(.2,.7,.2,1);}
/* A label's colon comes from CSS, so it waits for its line too (a column of
   stray colons stood where the untyped lines were). */
.js .spec-typed dt:not(.spec-on)::after{color:transparent;}
.spec-cursor{display:inline-block;width:.55em;height:1.05em;margin-right:-.55em;vertical-align:text-bottom;background:var(--aqua);
  animation:caretBlink 1s steps(1) infinite;}
@keyframes caretBlink{50%{opacity:0;}}

/* ---- Portfolio 1.52: the six concepts as case studies across the page ----
   An index of the six, then each concept with a large live preview in its
   own colours (a soft glow behind it, a slight turn towards the story that
   straightens on hover) and the story beside it, alternating sides. */
.case-index{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:var(--s4) 0 var(--s6);}
.case-index a{position:relative;display:grid;gap:2px;padding:14px 16px 16px;border-radius:14px;text-decoration:none;
  background:var(--surface);border:1px solid var(--border);color:var(--text);font-weight:700;font-size:15px;line-height:1.25;
  transition:border-color .25s,box-shadow .25s;}
.case-index a b{font-size:12px;letter-spacing:.08em;color:var(--text-2);}
.case-index a span{font-size:12px;font-weight:600;color:var(--text-3);}
.case-index a::after{content:"";position:absolute;left:16px;right:16px;bottom:8px;height:2px;border-radius:2px;background:var(--m-acc);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);}
.case-index a:hover,.case-index a:focus-visible{border-color:var(--border-strong);box-shadow:var(--shadow-md);}
.case-index a:hover::after,.case-index a:focus-visible::after{transform:scaleX(1);}
.cases{display:grid;gap:clamp(72px,9vw,128px);}
.case{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:center;scroll-margin-top:96px;}
.case-flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr);}
.case-flip .case-media{order:2;}
.case-media{position:relative;isolation:isolate;perspective:1600px;}
.case-glow{position:absolute;inset:6% 4%;z-index:-1;border-radius:40px;filter:blur(48px);opacity:.38;
  background:radial-gradient(circle at 30% 30%,var(--m-acc),transparent 60%),radial-gradient(circle at 75% 75%,var(--m-acc2),transparent 60%);}
.case .mock{border-radius:16px;box-shadow:0 40px 80px -40px rgba(22,23,26,.55),0 0 0 1px rgba(22,23,26,.06);
  transform:rotateY(-5deg) rotateX(2deg);transform-origin:right center;transition:transform .8s var(--ease),box-shadow .8s var(--ease);}
.case-flip .mock{transform:rotateY(5deg) rotateX(2deg);transform-origin:left center;}
.case .mock:hover,.case .mock:focus{transform:none;box-shadow:0 50px 90px -40px rgba(22,23,26,.6),0 0 0 1px rgba(22,23,26,.08);}
.case .mock-view{height:460px;--vh:460px;}
.case-no{margin:0 0 6px;font-size:clamp(48px,6vw,72px);font-weight:800;line-height:1;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1.5px var(--m-acc);}
.case-no span{font-size:16px;letter-spacing:.02em;-webkit-text-stroke:0;color:var(--text-3);}
.case-body h3{font-size:clamp(26px,2.6vw,34px);letter-spacing:-.025em;margin:2px 0 0;}
.case-story{display:grid;gap:14px;margin:18px 0 0;}
.case-story div{padding-left:16px;border-left:2px solid var(--m-acc);}
.case-story dt{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);}
.case-story dd{margin:4px 0 0;color:var(--text-2);font-size:16px;line-height:1.6;}
.case .folio-tags{margin-top:20px;}
/* Each preview reads down its page and back, each at its own steady pace;
   pointing at one (or focusing it) pauses it where it is, to read. */
.case .mock .mock-shot{transition:none;animation:shotPan 30s ease-in-out infinite alternate;}
.case .mock:hover .mock-shot,.case .mock:focus .mock-shot{animation-play-state:paused;}
.case:nth-child(1) .mock-shot{animation-duration:48s;}
.case:nth-child(2) .mock-shot{animation-duration:24s;animation-delay:-6s;}
.case:nth-child(3) .mock-shot{animation-duration:36s;animation-delay:-10s;}
.case:nth-child(4) .mock-shot{animation-duration:20s;animation-delay:-4s;}
.case:nth-child(5) .mock-shot{animation-duration:40s;animation-delay:-12s;}
.case:nth-child(6) .mock-shot{animation-duration:26s;animation-delay:-8s;}
@media (max-width:1100px){ .case-index{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:900px){
  .case,.case-flip{grid-template-columns:1fr;gap:24px;}
  .case-flip .case-media{order:0;}
  .case .mock,.case-flip .mock{transform:none;}
  .case .mock-view{height:340px;--vh:340px;}
}
@media (max-width:560px){ .case-index{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (prefers-reduced-motion:reduce){ .case .mock,.case-flip .mock{transform:none;transition:none;} .case .mock-shot{animation:none !important;} }

/* ---- About 1.52: the software development lifecycle, seven stages joined
   by a line that a light travels along, each with how it is done here. ---- */
.sdlc .section-head p{color:var(--on-dark-2);max-width:72ch;}
.sdlc-flow{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px;position:relative;}
.sdlc-flow::before{content:"";position:absolute;left:24px;right:24px;top:24px;height:2px;
  background:linear-gradient(90deg,rgba(194,222,111,.15),rgba(194,222,111,.45),rgba(194,222,111,.15));}
.sdlc-flow::after{content:"";position:absolute;top:21px;left:24px;width:8px;height:8px;border-radius:50%;background:var(--aqua);
  box-shadow:0 0 14px 4px rgba(194,222,111,.6);animation:sdlcRun 9s linear infinite;}
@keyframes sdlcRun{from{left:24px;}to{left:calc(100% - 32px);}}
.sdlc-stage{position:relative;display:flex;flex-direction:column;gap:8px;}
.sdlc-icon{position:relative;z-index:1;width:50px;height:50px;display:grid;place-items:center;border-radius:14px;color:#fff;
  background:linear-gradient(135deg,var(--teal),#648C14);box-shadow:0 0 0 6px var(--navy),0 10px 24px -8px rgba(53,55,62,.8);}
.sdlc-icon .icon{width:22px;height:22px;}
.sdlc-name{margin:10px 0 0;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--aqua);}
.sdlc-name b{color:var(--on-dark-3);margin-right:4px;}
.sdlc-stage h3{margin:0;font-size:16px;line-height:1.3;color:#fff;}
.sdlc-stage ul{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:8px;}
.sdlc-stage li{position:relative;padding-left:14px;font-size:13.5px;line-height:1.5;color:var(--on-dark-2);}
.sdlc-stage li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--aqua);opacity:.7;}
@media (max-width:1200px){
  .sdlc-flow{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:36px;}
  .sdlc-flow::before,.sdlc-flow::after{display:none;}
}
@media (max-width:760px){ .sdlc-flow{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:480px){ .sdlc-flow{grid-template-columns:1fr;} }
@media (prefers-reduced-motion:reduce){ .sdlc-flow::after{animation:none;display:none;} }

/* Live client work (portfolio.html): StaffSource in its own navy and teal; a
   "Live" mark beside the kicker instead of "Concept". */
.mock-staffsource{--m-bg:#1A1B1F;--m-ink:#F8F8F6;--m-acc:#BAF50A;--m-acc2:#4B690F;}
.folio-live{display:inline-flex;align-items:center;gap:6px;color:#4B690F;font-weight:700;}
.folio-live::before{content:"";width:8px;height:8px;border-radius:50%;background:#BAF50A;box-shadow:0 0 0 4px rgba(186,245,10,.18);}
:root[data-theme="dark"] .folio-live{color:#CEF850;}
.live-visit{margin-top:18px;}

/* 1.58.1: one animation for each preview, pointed at or not; pointing only
   pauses it. (The rule above for previews not pointed at gave a different
   speed, so the moment the pointer arrived the page jumped elsewhere.) */
.cases .case .mock .mock-shot{animation:shotPan 30s ease-in-out infinite alternate;}
.cases .case:nth-child(1) .mock .mock-shot{animation-duration:48s;}
.cases .case:nth-child(2) .mock .mock-shot{animation-duration:24s;animation-delay:-6s;}
.cases .case:nth-child(3) .mock .mock-shot{animation-duration:36s;animation-delay:-10s;}
.cases .case:nth-child(4) .mock .mock-shot{animation-duration:20s;animation-delay:-4s;}
.cases .case:nth-child(5) .mock .mock-shot{animation-duration:40s;animation-delay:-12s;}
.cases .case:nth-child(6) .mock .mock-shot{animation-duration:26s;animation-delay:-8s;}
.cases .case .mock:hover .mock-shot,.cases .case .mock:focus .mock-shot{animation-play-state:paused;}
@media (prefers-reduced-motion:reduce){ .cases .case .mock .mock-shot{animation:none !important;} }

/* ---- 1.60: tokenisation, explained (templates/_tokenisation.html) ---- */
.tok{margin-top:var(--s4,32px);padding:clamp(20px,3vw,36px);border-radius:18px;color:#E9EBE3;
  background:radial-gradient(900px 400px at 100% 0%,rgba(208,248,87,.10),transparent 60%),linear-gradient(160deg,#191A1D,#131416);
  border:1px solid rgba(194,222,111,.22);box-shadow:0 30px 60px -36px rgba(18,19,21,.7);}
.tok .eyebrow{color:#D0F857;}
.tok h3{margin:4px 0 10px;color:#fff;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em;}
.tok-what{margin:0;max-width:78ch;color:#C6C7CB;font-size:16px;line-height:1.65;}
.tok-lanes{display:grid;gap:18px;margin-top:26px;}
.tok-lane{position:relative;padding:18px 18px 20px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(194,222,111,.16);overflow:hidden;}
.tok-lane-name{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#C2DE6F;}
.tok-lane-name .icon{color:#F4C452;}
.tok-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));counter-reset:none;}
.tok-step{position:relative;display:grid;gap:6px;align-content:start;padding:14px 14px 12px;border-radius:12px;background:#141417;border:1px solid rgba(194,222,111,.25);}
.tok-step b{color:#fff;font-size:15px;}
.tok-step span:not(.tok-no){color:#AFB1B7;font-size:13.5px;line-height:1.5;}
.tok-step code{justify-self:start;margin-top:4px;padding:3px 8px;border-radius:6px;background:rgba(208,248,87,.1);color:#D0F857;font:600 12.5px ui-monospace,Menlo,Consolas,monospace;}
.tok-no{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#D0F857;color:#131416;font-weight:800;font-size:12px;}
.tok-unlock .tok-no{background:#F4C452;}
.tok-step::after{content:"";position:absolute;top:26px;right:-14px;width:14px;height:2px;background:linear-gradient(90deg,rgba(194,222,111,.5),rgba(194,222,111,.1));}
.tok-step:last-child::after{display:none;}
.tok-vault{border-color:rgba(244,196,82,.55);box-shadow:0 0 0 3px rgba(244,196,82,.08);}
.tok-kms{border-color:rgba(244,196,82,.55);}
.tok-runner{position:absolute;left:18px;bottom:6px;padding:1px 7px;border-radius:5px;background:#D0F857;color:#131416;
  font:700 10.5px ui-monospace,Menlo,Consolas,monospace;animation:tokRun 7s cubic-bezier(.45,0,.2,1) infinite;}
@keyframes tokRun{0%{transform:translateX(0);opacity:0}8%{opacity:1}85%{opacity:1}100%{transform:translateX(calc(100cqw - 120px));opacity:0}}
.tok-lock{container-type:inline-size;padding-bottom:30px;}
.tok-compare{margin-top:26px;border-radius:12px;overflow:hidden;border:1px solid rgba(194,222,111,.18);font-size:14px;}
.tok-row{display:grid;grid-template-columns:1fr 2fr 1.4fr 1.6fr;gap:14px;padding:12px 16px;border-top:1px solid rgba(194,222,111,.12);color:#C6C7CB;}
.tok-row-head{border-top:0;background:rgba(255,255,255,.04);font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#C2DE6F;}
.tok-row b{color:#fff;}
.tok-row-ours{background:rgba(208,248,87,.06);}
.tok-how-h{margin:28px 0 12px;color:#fff;font-size:18px;}
.tok-how{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));counter-reset:how;}
.tok-how li{counter-increment:how;position:relative;display:grid;gap:4px;padding:14px 14px 14px 52px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(194,222,111,.14);}
.tok-how li::before{content:counter(how);position:absolute;left:14px;top:14px;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;
  background:rgba(208,248,87,.12);color:#D0F857;font-weight:800;font-size:13px;}
.tok-how b{color:#fff;font-size:15px;}
.tok-how span{color:#AFB1B7;font-size:13.5px;line-height:1.55;}
.tok-why{margin:20px 0 0;padding:12px 16px;border-left:3px solid #F4C452;background:rgba(244,196,82,.06);color:#E9EBE3;font-size:14.5px;border-radius:0 10px 10px 0;}
@media (max-width:760px){
  .tok-step::after{display:none;}
  .tok-row{grid-template-columns:1fr;gap:4px;}
  .tok-row-head{display:none;}
  .tok-row span:nth-child(3)::before{content:"Reversed: ";color:#C2DE6F;font-weight:700;}
  .tok-row span:nth-child(4)::before{content:"Best for: ";color:#C2DE6F;font-weight:700;}
}
@media (prefers-reduced-motion:reduce){ .tok-runner{animation:none;opacity:0;} }

/* ---- 1.61: live from this server: patches, open issues, protections (_security_live.html) ---- */
.sec-live{position:relative;margin-top:clamp(28px,4vw,48px);padding:clamp(20px,3vw,32px);border-radius:18px;color:#E9EBE3;
  background:linear-gradient(160deg,rgba(25,26,29,.92),rgba(19,20,22,.96));border:1px solid rgba(194,222,111,.22);}
.sec-live .eyebrow{display:flex;align-items:center;gap:8px;color:#D0F857;}
.live-dot{width:8px;height:8px;border-radius:50%;background:#D0F857;box-shadow:0 0 0 0 rgba(208,248,87,.6);animation:livePulse 2s ease-out infinite;}
@keyframes livePulse{70%{box-shadow:0 0 0 8px rgba(208,248,87,0)}100%{box-shadow:0 0 0 0 rgba(208,248,87,0)}}
.sec-live h3{margin:4px 0 6px;color:#fff;font-size:clamp(20px,2.2vw,26px);letter-spacing:-.015em;}
.sec-live-sub{margin:0;color:#A3A5AC;font-size:13.5px;}
.sec-live-grid{display:grid;grid-template-columns:1fr 1.35fr 1fr;gap:16px;margin-top:20px;}
.sec-col{padding:16px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(194,222,111,.14);min-width:0;}
.sec-num{margin:0 0 12px;color:#AFB1B7;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
.sec-num b{display:block;color:#fff;font-size:34px;line-height:1.05;letter-spacing:-.02em;text-transform:none;}
.sec-guard .sec-num{color:#D0F857;}
.sec-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.sec-list li{display:grid;grid-template-columns:auto 1fr;column-gap:10px;row-gap:2px;align-items:center;}
.sec-list li b{color:#fff;font-size:14px;font-weight:700;overflow-wrap:anywhere;}
.sec-list li span:last-child{grid-column:2;color:#A3A5AC;font-size:12.5px;}
.sev{grid-row:span 2;align-self:start;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.04em;}
.sev-critical{background:rgba(255,90,110,.18);color:#FF8A9A;}
.sev-important{background:rgba(244,196,82,.16);color:#F4C452;}
.sev-moderate{background:rgba(208,248,87,.14);color:#D8F976;}
.sev-low,.sev-unrated,.sev-unknown{background:rgba(255,255,255,.08);color:#C6C7CB;}
.sev-site{background:rgba(208,248,87,.14);color:#D0F857;}
.sev-other{background:rgba(225,251,147,.14);color:#E1FB93;}
.sec-other{margin:12px 0 0;color:#C6C7CB;font-size:13px;line-height:1.5;}
.sec-other b{color:#fff;}
.sec-clear{margin:0;color:#D0F857;font-weight:700;}
.sec-fine{margin:12px 0 0;color:#82858D;font-size:12px;line-height:1.5;}
.sec-guards{list-style:none;margin:0;padding:0;display:grid;gap:9px;}
.sec-guards li{position:relative;padding-left:22px;color:#D4D5D9;font-size:13.5px;line-height:1.45;}
.sec-guards li::before{content:"";position:absolute;left:0;top:4px;width:12px;height:12px;border-radius:4px;background:rgba(208,248,87,.18);
  box-shadow:inset 0 0 0 1.5px #D0F857;}
/* The antivirus strip under the three columns. */
.sec-av{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;margin-top:16px;padding:14px 16px;border-radius:14px;
  background:rgba(208,248,87,.05);border:1px solid rgba(208,248,87,.2);}
.sec-av p{margin:0;color:#C6C7CB;font-size:13.5px;}
.sec-av-name{display:flex;align-items:center;gap:8px;color:#D0F857 !important;font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:12.5px !important;}
.sec-av-name b{color:#fff;text-transform:none;letter-spacing:0;font-size:14px;}
.sec-av-name .icon{width:18px;height:18px;}
.sec-av-fact b{color:#fff;}
.sec-av-fact .sec-av-ok{color:#D0F857;}
.sec-av-fact .sec-av-bad{color:#F4C452;}
@media (max-width:980px){ .sec-live-grid{grid-template-columns:1fr;} }
@media (prefers-reduced-motion:reduce){ .live-dot{animation:none;} }

/* A severity in the posture report's vulns line. */
.sev-inline{display:inline-block;padding:0 7px;font:800 10.5px/1.6 var(--font,inherit);vertical-align:1px;}

/* ---- 1.63: each walkthrough beside its own site, in the case study ---- */
.case-walk{position:absolute;z-index:3;pointer-events:none;filter:drop-shadow(0 30px 40px rgba(22,23,26,.35));}
.case-walk .walk figcaption{display:none;}
.case-walk-phone{right:-30px;bottom:-56px;transform:scale(.6);transform-origin:bottom right;}
.case-walk-laptop{left:-34px;bottom:-60px;width:560px;transform:scale(.5);transform-origin:bottom left;}
.case-flip .case-walk-laptop{left:auto;right:-34px;transform-origin:bottom right;}
@media (max-width:900px){
  .case-walk{position:relative;right:auto;left:auto;bottom:auto;margin:18px auto 0;transform:none;filter:none;}
  .case-walk-phone{width:230px;}
  .case-walk-laptop{width:100%;max-width:420px;}
}
/* The security list: every severity badge one width, so the lines align. */
.sec-list .sev{width:86px;box-sizing:border-box;text-align:center;}
.sec-live-note{margin:6px 0 0;color:#9598A0;font-size:13px;}

/* A severity badge in the typed report: its pill waits for its word. */
@media (prefers-reduced-motion:no-preference){ .js .spec-typed .sev-inline:not(.typed){background:transparent;} }

/* ---- 1.65: App Store and Google Play badges ---- */
.store-badges{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0 4px;}
.store-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 12px;min-width:152px;border-radius:12px;background:#000;color:#fff;border:1px solid rgba(255,255,255,.28);box-shadow:0 6px 18px rgba(22,23,26,.18);transition:transform .25s ease,box-shadow .25s ease;}
.store-badge:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(22,23,26,.28);}
.store-logo{width:26px;height:26px;flex:none;}
.store-text{display:flex;flex-direction:column;line-height:1.1;}
.store-text small{font-size:10.5px;letter-spacing:.02em;opacity:.85;}
.store-text b{font-size:17px;font-weight:600;letter-spacing:-.01em;}
@media (prefers-reduced-motion:reduce){.store-badge{transition:none;}.store-badge:hover{transform:none;}}

/* ---- Server performance (app/host.py, templates/_server.html) ---- */
.host-verdict{margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-weight:800;font-size:15px;color:var(--text);}
.host-dot{width:10px;height:10px;border-radius:50%;background:#AEDD22;flex:none;}
.host-verdict.is-busy .host-dot{background:#E8A93A;}
.host-verdict.is-strain .host-dot{background:#D64545;}
.host-verdict.is-none .host-dot{background:var(--border-strong);}
.host-verdict-text{margin:4px 0 0;font-size:13px;color:var(--text-2);}
.host-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin:12px 0 0;}
.host-tiles div{padding:8px 10px;border-radius:10px;background:var(--sunken);border:1px solid var(--border);}
.host-tiles dt{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);}
.host-tiles dd{margin:2px 0 0;font-size:18px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.host-spans{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;}
.host-spans a{padding:4px 12px;border-radius:999px;border:1px solid var(--border);font-size:12.5px;font-weight:700;color:var(--text-2);text-decoration:none;}
.host-spans a:hover{border-color:var(--teal);color:var(--teal);}
.host-spans a[aria-current]{background:var(--teal);border-color:var(--teal);color:#fff;}
.host-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px 22px;}
.host-chart{margin:0;}
.host-chart .avail-chart{max-width:none;}
.host-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;}
.host-line-1{stroke:var(--teal);}
.host-line-2{stroke:#E8A93A;}
.host-maint{fill:#BEE93C;opacity:.18;}   /* planned maintenance: the same blue as the uptime bars */
.host-swatch{display:inline-block;width:12px;height:3px;border-radius:2px;}
.host-swatch.host-line-1{background:var(--teal);}
.host-swatch.host-line-2{background:#E8A93A;}
.host-swatch.host-maint{height:10px;background:#BEE93C;opacity:.35;}
@media (max-width:560px){.host-tiles dd{font-size:15px;}}

/* ---- 1.75.0: calmer and more professional (owner, 2026-11-03: "remove those
   little dots everywhere ... it just needs to be professional; not meaning
   they all need to be the same colour"). No dot patterns anywhere; the
   service groups are light cards, each group with its own muted accent on
   the icon and a thin top edge; the faint oversized icons and the light
   running round the edges are gone. Overrides the layers above. ---- */
.section:not(.section-dark)::before{background:radial-gradient(560px 340px at 100% 0%,var(--glow),transparent 70%);}
.card,.card:hover,.card:not(.product-card):hover,.product-card:hover{
  background:radial-gradient(360px 220px at 100% 0%,rgba(53,55,62,.30),transparent 70%),
             linear-gradient(160deg,var(--navy-3),var(--navy));}
.steps li{background:radial-gradient(300px 200px at 100% 0%,rgba(53,55,62,.28),transparent 70%),
             linear-gradient(160deg,var(--navy-3),var(--navy));}
.card::before,.card-mark,.bento-tile::before,.bento-mark{display:none;}

.bento-security{--c:#35373E;--c-soft:#EEF0E9;}
.bento-infrastructure{--c:#BFF51B;--c-soft:#F3F5F0;}
.bento-software{--c:#C5F631;--c-soft:#F5F6F3;}
.bento-data{--c:#B45309;--c-soft:#FDF1E2;}
.bento-planning{--c:#547511;--c-soft:#EEF0EA;}
.bento-tile{color:var(--text);background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--c);
  box-shadow:var(--shadow-md);}
.bento-tile:hover{transform:translateY(-3px);border-color:var(--border-strong);border-top-color:var(--c);
  box-shadow:0 22px 44px -26px rgba(22,23,26,.35);}
.bento-icon{color:var(--c);background:var(--c-soft);box-shadow:none;border:1px solid color-mix(in srgb,var(--c) 18%,transparent);}
.bento-count{color:var(--c);background:var(--c-soft);border-color:transparent;}
.bento-tile h3 a{color:var(--text);}
.bento-tile h3 a:hover{color:var(--c);}
.bento-tile > p{color:var(--text-2);}
.bento-tags a{color:var(--text);background:var(--sunken);border-color:var(--border);}
.bento-tags a:hover{color:var(--c);background:var(--surface);border-color:var(--c);}
.bento-tags .icon{color:var(--c);}
.bento-more{color:var(--c);}
.bento-more:hover{color:var(--text);}
:root[data-theme="dark"] .bento-security{--c:#BADF4C;--c-soft:rgba(186,223,76,.12);}
:root[data-theme="dark"] .bento-infrastructure{--c:#DBFA7F;--c-soft:rgba(219,250,127,.12);}
:root[data-theme="dark"] .bento-software{--c:#E1FB93;--c-soft:rgba(225,251,147,.12);}
:root[data-theme="dark"] .bento-data{--c:#F2B464;--c-soft:rgba(242,180,100,.12);}
:root[data-theme="dark"] .bento-planning{--c:#C2E261;--c-soft:rgba(194,226,97,.12);}
:root[data-theme="dark"] .bento-tile{background:var(--navy-2);border-color:var(--line-dark);border-top-color:var(--c);color:var(--on-dark);}
:root[data-theme="dark"] .bento-tile h3 a{color:#fff;}
:root[data-theme="dark"] .bento-tile > p{color:var(--on-dark-2);}
:root[data-theme="dark"] .bento-tags a{color:var(--on-dark);background:rgba(255,255,255,.04);border-color:var(--line-dark);}

/* ---- 1.76.0: Coming-soon applications, each shown working (_app_art.html).
   A small app window, one thing happening in it on an 8 s loop. Still for
   reduced motion, showing the finished state. Placed where Ipsa Verba's
   art is: the product page hero (.sb-art-hero), the Products list
   (.sb-art-row) and the home cards (.sb-art-card). ---- */
.app-art-svg{width:100%;height:auto;display:block;overflow:visible;font-family:var(--font,inherit);}
.app-art-svg *{transform-box:fill-box;}
.aa-win{fill:#1A1B1F;stroke:rgba(194,222,111,.22);stroke-width:1.2;}
.aa-bar,.aa-bar-fill{fill:#23252A;}
.aa-pill{fill:rgba(194,222,111,.55);}.aa-pill-dim{fill:rgba(255,255,255,.14);}
.aa-label{fill:#B5B7BC;font-size:11.5px;font-weight:700;letter-spacing:.04em;}
.aa-small{fill:#898C95;font-size:11px;font-weight:600;}
.aa-lane{fill:rgba(255,255,255,.035);stroke:rgba(255,255,255,.07);}
.aa-card{fill:#2B2D32;stroke:rgba(194,222,111,.28);}
.aa-ink{fill:#EDEFE9;}.aa-ink-dim{fill:rgba(237,239,233,.35);}
.aa-day{fill:rgba(255,255,255,.06);}
.aa-track{fill:rgba(255,255,255,.08);}
.aa-tick{fill:none;stroke:#CEF850;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;}
.aa-road{fill:none;stroke:rgba(255,255,255,.07);stroke-width:7;stroke-linecap:round;}
.aa-slot{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.08);}
.md-taken{fill:rgba(194,222,111,.34);stroke:rgba(194,222,111,.45);}

/* Legal: the file across the lanes, the court date, the payments. */
.lg-tag{fill:#F2B464;}
.lg-file{animation:lgFile 8s cubic-bezier(.6,0,.3,1) infinite;}
@keyframes lgFile{0%,18%{transform:translateX(0)}30%,52%{transform:translateX(130px)}64%,90%{transform:translateX(254px)}100%{transform:translateX(254px);opacity:0}}
.lg-due{fill:#E1FB93;animation:lgDue 2s ease-in-out infinite;transform-origin:center;}
@keyframes lgDue{50%{fill:#E1FB93;transform:scale(1.14)}}
.lg-paid{fill:#CEF850;transform-origin:left;animation:lgPaid 8s ease-out infinite;}
@keyframes lgPaid{0%,10%{transform:scaleX(.18)}35%{transform:scaleX(.42)}60%,100%{transform:scaleX(.67)}}
.lg-tick{animation:aaTick 8s ease-out infinite;}
@keyframes aaTick{0%,62%{stroke-dashoffset:30}72%,100%{stroke-dashoffset:0}}

/* Fleet: the truck on its route, the stops, the arrival time. */
.ff-route{fill:none;stroke:#CEF850;stroke-width:3;stroke-dasharray:7 7;opacity:.85;animation:ffDash 1.2s linear infinite;}
@keyframes ffDash{to{stroke-dashoffset:-14}}
.ff-stop{fill:#1A1B1F;stroke:#DBFA7F;stroke-width:3;}
.ff-s1{animation:ffStop1 8s infinite;}.ff-s2{animation:ffStop2 8s infinite;}
.ff-stop.ff-s3{animation:ffStop3 8s infinite;}
@keyframes ffStop1{0%,100%{fill:#DBFA7F}}
@keyframes ffStop2{0%,44%{fill:#1A1B1F}48%,100%{fill:#DBFA7F}}
@keyframes ffStop3{0%,82%{fill:#1A1B1F}86%,100%{fill:#CEF850;stroke:#CEF850}}
.ff-ring{fill:none;stroke:#CEF850;stroke-width:2;transform-origin:center;opacity:0;animation:ffRing 8s infinite;}
@keyframes ffRing{0%,84%{opacity:0;transform:scale(1)}88%{opacity:.9}100%{opacity:0;transform:scale(3)}}
.ff-truck{offset-path:path("M50 240 C 110 240, 120 160, 180 150 S 260 90, 360 90");offset-rotate:auto;
  animation:ffDrive 8s cubic-bezier(.45,0,.35,1) infinite;}
@keyframes ffDrive{0%,6%{offset-distance:0%}46%,52%{offset-distance:50%}86%,100%{offset-distance:100%}}
.ff-cab{fill:#F2B464;}.ff-glass{fill:#1A1B1F;}
.ff-t{fill:#fff;font-size:17px;font-weight:800;opacity:0;}
.ff-t1{animation:ffT1 8s infinite;}.ff-t2{animation:ffT2 8s infinite;}.ff-t3{fill:#CEF850;animation:ffT3 8s infinite;}
@keyframes ffT1{0%,40%{opacity:1}44%,100%{opacity:0}}
@keyframes ffT2{0%,44%{opacity:0}48%,80%{opacity:1}84%,100%{opacity:0}}
@keyframes ffT3{0%,84%{opacity:0}88%,100%{opacity:1}}

/* Medical: the slot booked, the script to the pharmacy, dispensed. */
.md-new{animation:mdBook 8s infinite;}
@keyframes mdBook{0%,14%{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.08)}22%,100%{fill:rgba(206,248,80,.32);stroke:#CEF850}}
.md-booked{fill:#CEF850;font-size:11.5px;font-weight:800;opacity:0;animation:mdBooked 8s infinite;}
@keyframes mdBooked{0%,20%{opacity:0}28%,100%{opacity:1}}
.md-way{stroke-dasharray:4 7;stroke-width:3;stroke:rgba(194,222,111,.35);}
.md-rx{fill:#F2B464;font-size:16px;font-weight:800;}
.md-script{animation:mdScript 8s cubic-bezier(.6,0,.3,1) infinite;}
@keyframes mdScript{0%,34%{transform:translateX(0);opacity:1}62%{transform:translateX(118px);opacity:1}70%,100%{transform:translateX(118px);opacity:0}}
.md-cross{fill:none;stroke:#C2E261;stroke-width:7;stroke-linecap:round;}
.md-done{fill:#CEF850;transform-origin:center;transform:scale(0);animation:mdDone 8s infinite;}
@keyframes mdDone{0%,64%{transform:scale(0)}70%,100%{transform:scale(1)}}
.md-tick{stroke:#1A1B1F;animation:mdTick 8s ease-out infinite;}
@keyframes mdTick{0%,68%{stroke-dashoffset:30}76%,100%{stroke-dashoffset:0}}

/* Hotel: booked, notified, the discount and the payment, the room lit. The
   rules outside the keyframes are the finished state, which reduced motion shows. */
.ht-on{fill:rgba(242,180,100,.55);}
.ht-tw1,.ht-tw2{fill:rgba(242,180,100,.55);animation:htTwinkle 5s ease-in-out infinite;}
.ht-tw2{animation-delay:-2.5s;}
@keyframes htTwinkle{0%,100%{fill:rgba(242,180,100,.7)}50%{fill:rgba(255,255,255,.06)}}
.ht-room{fill:#CEF850;animation:htRoom 8s infinite;}
@keyframes htRoom{0%,74%{fill:rgba(255,255,255,.06)}80%,94%{fill:#CEF850}100%{fill:rgba(255,255,255,.06)}}
.ht-ring{fill:none;stroke:#CEF850;stroke-width:2;transform-origin:center;opacity:0;animation:htRing 8s infinite;}
@keyframes htRing{0%,76%{opacity:0;transform:scale(1)}80%{opacity:.9}94%,100%{opacity:0;transform:scale(2.6)}}
.ht-book{animation:htBook 8s ease-out infinite;}
@keyframes htBook{0%,4%{opacity:0;transform:translateX(16px)}12%,94%{opacity:1;transform:translateX(0)}100%{opacity:0}}
.ht-conf{fill:#CEF850;font-size:12.5px;font-weight:800;animation:htConf 8s infinite;}
@keyframes htConf{0%,16%{opacity:0}22%,100%{opacity:1}}
.ht-note{animation:htNote 8s ease-out infinite;}
@keyframes htNote{0%,24%{opacity:0;transform:translateY(-10px)}32%,94%{opacity:1;transform:translateY(0)}100%{opacity:0}}
.ht-bell{fill:#F2B464;}
.ht-note-t{fill:#fff;font-size:13px;font-weight:700;}
.ht-pay{animation:htPay 8s ease-out infinite;}
@keyframes htPay{0%,38%{opacity:0;transform:translateY(10px)}46%,94%{opacity:1;transform:translateY(0)}100%{opacity:0}}
.ht-strike{fill:#DEFA89;transform-origin:left;animation:htStrike 8s infinite;}
@keyframes htStrike{0%,50%{transform:scaleX(0)}56%,100%{transform:scaleX(1)}}
.ht-off{fill:#E1FB93;}
.ht-off-t{fill:#1A1B1F;font-size:10.5px;font-weight:800;}
.ht-off,.ht-off-t{animation:htOff 8s infinite;}
@keyframes htOff{0%,48%{opacity:0}54%,100%{opacity:1}}
.ht-now{fill:#fff;font-size:20px;font-weight:800;animation:htNow 8s infinite;}
@keyframes htNow{0%,54%{opacity:0}60%,100%{opacity:1}}
.ht-tick{animation:htTick 8s ease-out infinite;}
@keyframes htTick{0%,62%{stroke-dashoffset:30}70%,100%{stroke-dashoffset:0}}

@media (prefers-reduced-motion:reduce){
  .app-art-svg *{animation:none !important;}
  .lg-file{transform:translateX(254px);}
  .lg-paid{transform:scaleX(.67);}
  .aa-tick{stroke-dashoffset:0;}
  .ff-truck{offset-distance:100%;}
  .ff-stop{fill:#DBFA7F;}.ff-t1,.ff-t2{opacity:0;}.ff-t3{opacity:1;}
  .md-new{fill:rgba(206,248,80,.32);stroke:#CEF850;}.md-booked{opacity:1;}
  .md-script{opacity:0;}.md-done{transform:scale(1);}
}

/* ---- 1.78.0: the capabilities in six categories (content.CAPABILITY_GROUPS),
   in place of one band of thirty pills; each category its own muted accent. ---- */
.cap-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 18px;}
.cap-group{--c:#35373E;padding:14px 16px 12px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--c);}
.cap-group-2{--c:#B4232A;}.cap-group-3{--c:#BFF51B;}.cap-group-4{--c:#C5F631;}.cap-group-5{--c:#B45309;}.cap-group-6{--c:#547511;}
.cap-group-title{display:block;font-weight:800;font-size:15px;color:var(--text);text-decoration:none;margin-bottom:6px;}
.cap-group-title:hover{color:var(--c);}
.cap-group ul{list-style:none;margin:0;padding:0;display:grid;gap:2px;}
.cap-group li a{display:block;padding:3px 0;font-size:14px;color:var(--text-2);text-decoration:none;}
.cap-group li a:hover{color:var(--c);}
.cap-group-head{margin:var(--s5) 0 var(--s2);font-size:clamp(20px,2vw,26px);padding-left:12px;border-left:4px solid var(--c,#35373E);}
.cap-group-head:first-child{margin-top:0;}
.cap-group-head.cap-group-2{--c:#B4232A;}.cap-group-head.cap-group-3{--c:#BFF51B;}.cap-group-head.cap-group-4{--c:#C5F631;}
.cap-group-head.cap-group-5{--c:#B45309;}.cap-group-head.cap-group-6{--c:#547511;}
@media (max-width:980px){.cap-groups{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:600px){.cap-groups{grid-template-columns:1fr;}}
:root[data-theme="dark"] .cap-group{background:var(--navy-2);border-color:var(--line-dark);border-top-color:var(--c);}
:root[data-theme="dark"] .cap-group-title{color:#fff;}
:root[data-theme="dark"] .cap-group li a{color:var(--on-dark-2);}

/* 1.79.0: more colour (owner, 2026-11-04). The six colours of the service
   groups (teal, blue, violet, amber, green, rose) carried through the site:
   each card in a grid takes the next one for its icon, top edge and link,
   each section's label its own, and the hero figures one each. Buttons and
   text links stay teal, the brand colour. */
.card-grid > :nth-child(6n+1),.hero-stats > :nth-child(6n+1),.section:nth-of-type(6n+1){--c:#35373E;--c-soft:#EEF0E9;--c-lit:#BADF4C;}
.card-grid > :nth-child(6n+2),.hero-stats > :nth-child(6n+2),.section:nth-of-type(6n+2){--c:#BFF51B;--c-soft:#F3F5F0;--c-lit:#DBFA7F;}
.card-grid > :nth-child(6n+3),.hero-stats > :nth-child(6n+3),.section:nth-of-type(6n+3){--c:#C5F631;--c-soft:#F5F6F3;--c-lit:#E1FB93;}
.card-grid > :nth-child(6n+4),.hero-stats > :nth-child(6n+4),.section:nth-of-type(6n+4){--c:#B45309;--c-soft:#FDF1E2;--c-lit:#F2B464;}
.card-grid > :nth-child(6n+5),.hero-stats > :nth-child(6n+5),.section:nth-of-type(6n+5){--c:#547511;--c-soft:#EEF0EA;--c-lit:#C2E261;}
.card-grid > :nth-child(6n+6),.hero-stats > :nth-child(6n+6),.section:nth-of-type(6n+6){--c:#BAF50A;--c-soft:#F2F4EF;--c-lit:#DEFA89;}
.card-grid > .card{border-top:3px solid var(--c);}
.card-grid .card-icon{background:var(--c-soft);color:var(--c);}
.card-grid .card-more,.card-grid .feature-no{color:var(--c);}
.card-grid > .service-card:hover{border-color:var(--c);box-shadow:0 18px 36px -22px var(--c);}
.section:not(.section-dark) .section-head .eyebrow{color:var(--c);}
.section-dark .section-head .eyebrow{color:var(--c-lit);}
.hero-stats .stat{border-top:2px solid var(--c-lit);}
.hero-stats .stat-big{color:var(--c-lit);}
.stat-iconed .stat-big{background:linear-gradient(90deg,var(--text),var(--c,var(--teal)));-webkit-background-clip:text;background-clip:text;}
.page-hero-dark .card-grid .card-icon,.section-dark .card-grid .card-icon{background:color-mix(in srgb,var(--c-lit) 14%,transparent);color:var(--c-lit);}
.section-dark .card-grid .card-more{color:var(--c-lit);}
:root[data-theme="dark"] .card-grid .card-icon{background:color-mix(in srgb,var(--c-lit) 14%,transparent);color:var(--c-lit);}
:root[data-theme="dark"] .card-grid > .card{border-top-color:var(--c-lit);}
:root[data-theme="dark"] .card-grid .card-more,:root[data-theme="dark"] .card-grid .feature-no,
:root[data-theme="dark"] .section .section-head .eyebrow{color:var(--c-lit);}

/* Animations nobody can see wait until they are back near the screen (site.js),
   so the browser is not restyling a whole page of them while it scrolls. */
.is-offscreen,.is-offscreen *,.is-offscreen *::before,.is-offscreen *::after{animation-play-state:paused !important;}

/* Deskara's picture (_deskara_art.html): everything it does, grouped round one platform. */
.ds-link{fill:none;stroke:rgba(206,248,80,.4);stroke-width:1.3;}
.ds-link-soon{fill:none;stroke:rgba(217,235,163,.3);stroke-width:1.1;stroke-dasharray:3 4;}
.ds-pulse{fill:none;stroke:#CEF850;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:12 260;animation:ds-run 3.6s linear infinite;}
.ds-pulse.p1{animation-delay:-.5s;} .ds-pulse.p2{animation-delay:-1s;} .ds-pulse.p3{animation-delay:-1.5s;}
.ds-pulse.p4{animation-delay:-2s;} .ds-pulse.p5{animation-delay:-2.5s;} .ds-pulse.p6{animation-delay:-3s;}
.ds-glow{fill:#CEF850;opacity:.18;}
.ds-hex{fill:#1E1F23;stroke:#CEF850;stroke-width:2.4;stroke-linejoin:round;}
.ds-mark{fill:none;stroke:#F6F7F4;stroke-width:7;stroke-linejoin:round;}
.ds-tile{fill:rgba(27,28,31,.88);stroke:rgba(206,248,80,.5);stroke-width:1.2;}
.ds-icon{fill:none;stroke:#CEF850;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.ds-group{fill:#F6F7F4;font-size:14px;font-weight:800;}
.ds-item{fill:#D9EBA2;font-size:10px;font-weight:600;}
.ds-item-soon{fill:rgba(217,235,163,.68);font-weight:500;}
.ds-dot{fill:#CEF850;stroke:#CEF850;stroke-width:1.1;}
.ds-dot-soon{fill:none;stroke:rgba(217,235,163,.75);}
.ds-beat{stroke-dasharray:50;animation:ds-beat 3s linear infinite;}
/* So much to show: more room than the other products' pictures. */
.sb-art-hero:has(.ds-art-svg){width:min(620px,100%);}
@media (min-width:1100px){.sb-art-hero:has(.ds-art-svg){width:min(620px,40vw);}}
/* Too small to read the items: the group names, and on the smallest the dots alone. */
@media (max-width:700px){.sb-art-hero .ds-item,.sb-art-hero .ds-key,.sb-art-hero .ds-dot,.sb-art-hero .ds-icon{display:none;}.sb-art-hero .ds-group{font-size:27px;transform:translate(-27px,18px);}}
.sb-art-row .ds-item,.sb-art-card .ds-item,.sb-art-row .ds-group,.sb-art-card .ds-group,.sb-art-row .ds-key,.sb-art-card .ds-key,.sb-art-row .ds-icon,.sb-art-card .ds-icon{display:none;}
.sb-art-card:has(.ds-art-svg),.sb-art-row:has(.ds-art-svg){width:150px;height:auto;}
.sb-art-row .ds-dot,.sb-art-card .ds-dot{stroke-width:2;}
@keyframes ds-run{from{stroke-dashoffset:272;}to{stroke-dashoffset:0;}}
@keyframes ds-beat{from{stroke-dashoffset:50;}to{stroke-dashoffset:-50;}}
@media (prefers-reduced-motion:reduce){
  .ds-pulse,.ds-beat{animation:none;}
  .ds-pulse{display:none;}
  .ds-beat{stroke-dasharray:none;}
}

/* The payment clip (_payment_clip.html): 18 seconds, on a loop, one timeline. */
.pc{margin:0;padding:clamp(12px,3vw,28px);border-radius:20px;background:linear-gradient(160deg,#1E1F23,#16171A);color:#F6F7F4;}
.pc-svg{display:block;width:100%;height:auto;}
.pc-svg text{font-family:inherit;}
.pc-link{fill:none;stroke:rgba(206,248,80,.35);stroke-width:2;stroke-dasharray:4 6;}
.pc-phone{fill:#17181B;stroke:rgba(206,248,80,.6);stroke-width:2;}
.pc-notch{fill:rgba(246,247,244,.2);}
.pc-small{fill:#B9BABF;font-size:12px;}
.pc-mid{text-anchor:middle;}
.pc-big{fill:#fff;font-size:22px;font-weight:800;}
.pc-chip{fill:rgba(246,247,244,.08);stroke:rgba(246,247,244,.28);}
.pc-chip-on{animation:pc-chip 18s linear infinite;}
.pc-chip-t{fill:#EAECE4;font-size:10.5px;font-weight:600;text-anchor:middle;}
.pc-btn{fill:#3C3E46;animation:pc-btn 18s linear infinite;}
.pc-btn-t{fill:#fff;font-size:14px;font-weight:800;text-anchor:middle;opacity:0;}
.pc-btn-pay{animation:pc-show-pay 18s linear infinite;}
.pc-btn-wait{animation:pc-show-wait 18s linear infinite;}
.pc-btn-done{animation:pc-show-done 18s linear infinite;}
.pc-tap{fill:none;stroke:#fff;stroke-width:3;opacity:0;transform-box:fill-box;transform-origin:center;}
.pc-tap-1{animation:pc-tap1 18s linear infinite;}
.pc-tap-2{animation:pc-tap2 18s linear infinite;}
.pc-note{fill:#FFD27A;font-size:13px;font-weight:700;text-anchor:middle;opacity:0;}
.pc-locked{animation:pc-locked 18s linear infinite;}
.pc-same{animation:pc-same 18s linear infinite;}
.pc-box{fill:rgba(246,247,244,.05);stroke:rgba(206,248,80,.45);stroke-width:1.6;}
.pc-head{fill:#fff;font-size:15px;font-weight:800;text-anchor:middle;}
.pc-row{fill:#EAECE4;font-size:13px;text-anchor:middle;}
.pc-left{text-anchor:start;}
.pc-sweep{fill:rgba(206,248,80,.2);animation:pc-sweep 18s linear infinite;}
.pc-check{opacity:.25;}
.pc-check-1{animation:pc-check1 18s linear infinite;}
.pc-check-2{animation:pc-check2 18s linear infinite;}
.pc-check-3{animation:pc-check3 18s linear infinite;}
.pc-tick-bg{fill:#B3E718;}
.pc-tick{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.pc-paid{fill:#B3E718;}
.pc-paid-t{fill:#fff;font-size:14px;font-weight:800;text-anchor:middle;}
.pc-receipt{opacity:0;animation:pc-receipt 18s linear infinite;}
.pc-dot{fill:#CEF850;opacity:0;}
.pc-dot-go{animation:pc-go 18s linear infinite;}
.pc-dot-on{animation:pc-on 18s linear infinite;}
.pc-dot-retry{fill:#FFD27A;animation:pc-retry 18s linear infinite;}
.pc-caps{display:grid;margin-top:12px;text-align:center;font-size:clamp(15px,2.4vw,18px);font-weight:700;}
.pc-cap{grid-area:1/1;opacity:0;}
.pc-cap b{display:inline-grid;place-items:center;width:1.6em;height:1.6em;margin-right:6px;border-radius:50%;background:#CEF850;color:#111214;font-size:.85em;}
.pc-cap.c1{animation:pc-c1 18s linear infinite;} .pc-cap.c2{animation:pc-c2 18s linear infinite;}
.pc-cap.c3{animation:pc-c3 18s linear infinite;} .pc-cap.c4{animation:pc-c4 18s linear infinite;}
.pc-cap.c5{animation:pc-c5 18s linear infinite;}
.pc-steps{margin:var(--s3) 0 0;padding-left:1.4em;display:grid;gap:6px;color:var(--text-2);}
@keyframes pc-c1{0%,16%{opacity:1;}18%,100%{opacity:0;}}
@keyframes pc-c2{0%,17%{opacity:0;}19%,33%{opacity:1;}35%,100%{opacity:0;}}
@keyframes pc-c3{0%,34%{opacity:0;}36%,53%{opacity:1;}55%,100%{opacity:0;}}
@keyframes pc-c4{0%,54%{opacity:0;}56%,73%{opacity:1;}75%,100%{opacity:0;}}
@keyframes pc-c5{0%,74%{opacity:0;}76%,98%{opacity:1;}100%{opacity:0;}}
@keyframes pc-chip{0%,8%{fill:rgba(246,247,244,.08);stroke:rgba(246,247,244,.28);}10%,97%{fill:rgba(206,248,80,.32);stroke:#CEF850;}100%{fill:rgba(246,247,244,.08);}}
@keyframes pc-tap1{0%,18%{opacity:0;transform:scale(.4);}19%{opacity:.9;transform:scale(.6);}23%,100%{opacity:0;transform:scale(1.5);}}
@keyframes pc-tap2{0%,26%{opacity:0;transform:scale(.4);}27%{opacity:.9;transform:scale(.6);}31%,100%{opacity:0;transform:scale(1.5);}}
@keyframes pc-btn{0%,19%{fill:#3C3E46;}20%,76%{fill:#56585E;}78%,97%{fill:#B3E718;}100%{fill:#3C3E46;}}
@keyframes pc-show-pay{0%,19%{opacity:1;}20%,99%{opacity:0;}100%{opacity:1;}}
@keyframes pc-show-wait{0%,19%{opacity:0;}20%,76%{opacity:1;}77%,100%{opacity:0;}}
@keyframes pc-show-done{0%,77%{opacity:0;}78%,97%{opacity:1;}100%{opacity:0;}}
@keyframes pc-locked{0%,26%{opacity:0;}28%,34%{opacity:1;}36%,100%{opacity:0;}}
@keyframes pc-go{0%,35%{opacity:0;transform:translateX(0);}36%{opacity:1;transform:translateX(0);}42%{opacity:1;transform:translateX(66px);}43%,100%{opacity:0;transform:translateX(66px);}}
@keyframes pc-sweep{0%,42%{opacity:0;}43%,97%{opacity:1;}100%{opacity:0;}}
@keyframes pc-on{0%,50%{opacity:0;transform:translateX(0);}51%{opacity:1;transform:translateX(0);}55%{opacity:1;transform:translateX(46px);}56%,100%{opacity:0;transform:translateX(46px);}}
@keyframes pc-check1{0%,55%{opacity:.25;}56%,98%{opacity:1;}100%{opacity:.25;}}
@keyframes pc-retry{0%,58%{opacity:0;transform:translateX(0);}59%{opacity:1;transform:translateX(0);}63%,68%{opacity:1;transform:translateX(36px);}70%,100%{opacity:0;transform:translateX(36px);}}
@keyframes pc-same{0%,62%{opacity:0;}64%,74%{opacity:1;}76%,100%{opacity:0;}}
@keyframes pc-check2{0%,68%{opacity:.25;}69%,98%{opacity:1;}100%{opacity:.25;}}
@keyframes pc-check3{0%,79%{opacity:.25;}80%,98%{opacity:1;}100%{opacity:.25;}}
@keyframes pc-receipt{0%,83%{opacity:0;}85%,98%{opacity:1;}100%{opacity:0;}}
@media (prefers-reduced-motion:reduce){
  .pc *{animation:none !important;}
  .pc-check,.pc-receipt,.pc-btn-done{opacity:1;}
  .pc-btn{fill:#B3E718;} .pc-btn-pay{opacity:0;} .pc-chip-on{fill:rgba(206,248,80,.32);stroke:#CEF850;}
  .pc-caps{display:none;}
}

/* The search box (base.html, site.js). */
.search-box{width:min(640px,calc(100vw - 32px));max-height:min(76vh,640px);margin:10vh auto auto;padding:0;overflow:hidden;
  border:1px solid var(--border-strong);border-radius:16px;background:var(--surface);color:var(--text);box-shadow:0 24px 70px rgba(12,13,14,.45);}
.search-box[open]{display:flex;flex-direction:column;}
.search-box::backdrop{background:rgba(12,13,14,.6);}
.search-head{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 16px;border-bottom:1px solid var(--border);}
.search-head > .icon{flex:none;width:20px;height:20px;color:var(--text-3);}
.search-head input{flex:1;min-width:0;min-height:44px;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:17px;}
.search-head input::-webkit-search-cancel-button{display:none;}
.search-close{flex:none;min-width:44px;min-height:44px;border:0;border-radius:10px;background:transparent;color:var(--text-3);font:600 13px/1 inherit;cursor:pointer;}
.search-close:hover{background:var(--sunken);color:var(--text);}
.search-note{margin:0;padding:10px 16px;color:var(--text-3);font-size:14px;}
.search-note a{color:var(--teal);text-decoration:underline;}
.search-results{list-style:none;margin:0;padding:0 8px 8px;overflow-y:auto;}
.search-results a{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px;border-radius:10px;color:var(--text);text-decoration:none;}
.search-results strong{font-weight:700;}
.search-results em{font-style:normal;font-size:12px;font-weight:700;color:var(--teal);align-self:center;}
.search-results span{grid-column:1 / -1;font-size:13.5px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.search-results a:hover,.search-results li.is-picked a{background:var(--teal-soft);}

/* The walkthroughs in a slim modern window, not a laptop with a base; the shop's
   store and its order confirmation drawn as a store looks today. */
.laptop-screen{border:0;border-radius:18px;background:var(--m-bg);box-shadow:0 0 0 1px rgba(22,23,26,.1),0 40px 80px -30px rgba(22,23,26,.55),0 12px 30px -18px rgba(22,23,26,.35);}
.laptop-screen::before{content:"";position:absolute;inset:0 0 auto 0;height:34px;z-index:2;background:color-mix(in srgb,var(--m-ink) 6%,var(--m-bg));
  box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--m-ink) 10%,transparent);}
.laptop-screen::after{content:"";position:absolute;left:14px;top:13px;width:8px;height:8px;border-radius:50%;z-index:3;
  background:#FF6B5F;box-shadow:14px 0 0 #FDBC2C,28px 0 0 #B4E817;}
.laptop::after{display:none;}
.laptop .wscreen{padding:50px 22px 18px;}
.walk-shop .wbag{top:6px;right:10px;background:transparent;}
.walk-shop h4{font-size:20px;font-weight:800;letter-spacing:-.03em;}
.wshop i{border-radius:12px;}
.wshop span{font-weight:600;}
.wproduct > i{border-radius:14px;}
.wsizes span{border-radius:999px;min-width:34px;}
.walk-shop .wbtn{border-radius:999px;background:var(--m-ink);color:var(--m-bg);padding:10px 20px;}
.walk-shop .wscreen.ws3{justify-items:stretch;text-align:left;align-content:center;gap:12px;}
.wdone-head{position:relative;display:flex;align-items:center;gap:14px;}
.wdone-head .wtick{flex:none;width:44px;height:44px;margin:0;font-size:20px;background:#B4E817;color:#fff;box-shadow:0 0 0 6px rgba(180,232,23,.16);}
.wdone-head p{margin:2px 0 0;font-size:12px;}
.wdone-head .wburst{left:22px;top:22px;}
.wdone-card{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;padding:10px 14px 10px 10px;border-radius:14px;
  background:color-mix(in srgb,var(--m-ink) 5%,var(--m-bg));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--m-ink) 8%,transparent);}
.wdone-card > i{display:block;width:44px;height:52px;border-radius:8px;background:#E9DFCC url("noa-linen-thumb.webp") center / cover;}
.wdone-card div{display:grid;gap:2px;}
.wdone-card span{font-size:11px;opacity:.7;}
.wtrack{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding-top:14px;font-size:10.5px;font-weight:600;}
.wtrack span{opacity:.7;} .wtrack span.on{opacity:1;}
.wtrack-line{position:absolute;inset:0 0 auto 0;height:6px;border-radius:3px;background:color-mix(in srgb,var(--m-ink) 10%,var(--m-bg));overflow:hidden;}
.wtrack-line i{display:block;height:100%;width:100%;border-radius:3px;background:#B4E817;transform-origin:left;transform:scaleX(.12);animation:wTrack 12.5s ease-in-out infinite;animation-delay:-8.5s;}
@keyframes wTrack{0%,64%{transform:scaleX(0);}80%,100%{transform:scaleX(.3);}}
@media (prefers-reduced-motion:reduce){ .wtrack-line i{animation:none;} }

.wshop span i.np-hat{background:#E9DFCC url("noa-hat.webp") center / cover;}
.wshop span i.np-scarf{background:#E9DFCC url("noa-scarf.webp") center / cover;}
.wshop i{aspect-ratio:1 / 1;}
.walk-shop h4,.walk-shop p{margin:0;}
.walk-shop .wscreen{gap:10px;}
.wproduct > i{aspect-ratio:auto;height:250px;}

/* The work shown as clean, sharp cards: no tilt (it blurred the pictures), no
   imitation browser window with its dots and typed address. */
.mock{border:0;border-radius:20px;}
.case .mock,.case-flip .mock{transform:none;border-radius:20px;transition:transform .35s var(--ease),box-shadow .35s;
  box-shadow:0 0 0 1px rgba(22,23,26,.07),0 32px 64px -32px rgba(22,23,26,.45);}
.case .mock:hover,.case .mock:focus,.case-flip .mock:hover,.case-flip .mock:focus{transform:translateY(-6px);
  box-shadow:0 0 0 1px rgba(22,23,26,.1),0 44px 80px -34px rgba(22,23,26,.55);}
.case-media{perspective:none;}
.fs-device{border-radius:16px;border-color:rgba(255,255,255,.14);box-shadow:0 30px 60px -24px rgba(0,0,0,.65);}
.fs-screen{height:100%;}
.fs-laptop .fs-screen{--h:260px;} .fs-window .fs-screen{--h:196px;}
/* The walkthroughs too: the screen alone, in a soft rounded card. */
.laptop-screen::before,.laptop-screen::after{display:none;}
.laptop .wscreen{padding:24px 24px 20px;}
.walk-shop .wbag{top:14px;right:16px;}

/* The security frameworks (_frameworks.html). */
.fw-group{margin-top:var(--s4);}
.fw-group h3{margin:0;font-size:21px;}
.fw-line{margin:4px 0 14px;color:var(--text-2);}
.fw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;}
.fw-card{display:flex;flex-direction:column;gap:8px;padding:18px 20px;border-radius:16px;background:var(--surface);
  border:1px solid var(--border);transition:transform .2s var(--ease),box-shadow .2s;}
.fw-card:hover{transform:translateY(-3px);box-shadow:0 18px 36px -24px rgba(22,23,26,.45);}
.fw-card h4{margin:0;font-size:16px;line-height:1.3;}
.fw-card p{margin:0;font-size:14px;line-height:1.5;color:var(--text-2);}
.fw-card .fw-who{margin-top:auto;padding-top:8px;border-top:1px solid var(--border);}
.fw-who b{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);}
@media (prefers-reduced-motion:reduce){ .fw-card{transition:none;} .fw-card:hover{transform:none;} }

/* The search box, compact: under its button on a wide screen, no larger than it needs to be. */
.search-box{width:min(420px,calc(100vw - 32px));max-height:min(70vh,560px);margin:68px max(16px,calc((100vw - 1472px) / 2)) auto auto;border-radius:14px;}
.search-head{gap:8px;padding:2px 4px 2px 12px;}
.search-head > .icon{width:17px;height:17px;}
.search-head input{font-size:15px;padding:0;}
.search-head input:focus,.search-head input:focus-visible{outline:0;box-shadow:none;border:0;}
.search-box:focus-within{border-color:var(--teal);}
.search-close{font-size:12px;}
.search-note{padding:8px 12px;font-size:13px;}
.search-note:empty{display:none;}
.search-results{padding:0 6px 6px;}
.search-results a{padding:8px 10px;}
.search-results strong{font-size:14px;}
.search-results span{font-size:12.5px;}
@media (max-width:720px){ .search-box{margin:64px auto auto;} }

.search-box{margin-right:var(--search-right,16px);}
@media (max-width:720px){ .search-box{margin-right:auto;} }

/* ================================================================ Black and electric lime
   (owner, 2026-11-07): one accent instead of six. Lime fills what to press
   and what is alive (buttons, live dots, the line under a link); a deep olive
   carries the accent as text on white, where lime cannot be read. The
   sections, cards and groups no longer take a colour each. */
:root{--lime:#C6F432;--lime-2:#D9FB6E;--lime-ink:#0A0B0D;--olive:#4D7C0F;
  --teal:#4D7C0F;--teal-hover:#3F6212;--teal-soft:#F1F7DC;--aqua:#C6F432;}
:root[data-theme="dark"]{--teal:#C6F432;--teal-hover:#D9FB6E;--teal-soft:rgba(198,244,50,.1);}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--teal:#C6F432;--teal-hover:#D9FB6E;--teal-soft:rgba(198,244,50,.1);}}
.card-grid > :nth-child(n),.hero-stats > :nth-child(n),.section:nth-of-type(n),.bento-security,.bento-infrastructure,.bento-software,.bento-data,.bento-planning,
.cap-group,.cap-group-2,.cap-group-3,.cap-group-4,.cap-group-5,.cap-group-6,
.cap-group-head.cap-group-2,.cap-group-head.cap-group-3,.cap-group-head.cap-group-4,.cap-group-head.cap-group-5,.cap-group-head.cap-group-6{
  --c:var(--olive);--c-soft:#F1F7DC;--c-lit:var(--lime)}
:root[data-theme="dark"] .card-grid > :nth-child(n),:root[data-theme="dark"] .hero-stats > :nth-child(n),:root[data-theme="dark"] .section:nth-of-type(n),
:root[data-theme="dark"] [class*="bento-"],:root[data-theme="dark"] [class*="cap-group"]{--c:var(--lime);--c-soft:rgba(198,244,50,.1)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) :is(.card-grid > :nth-child(n),.hero-stats > :nth-child(n),.section:nth-of-type(n),[class*="bento-"],[class*="cap-group"]){--c:var(--lime);--c-soft:rgba(198,244,50,.1)}}
.card-grid > .card{border-top:2px solid var(--line, var(--border));}
.card-grid > .card:hover{border-top-color:var(--lime);}

/* What to press: lime with black lettering, a light running across it, and a lift. */
.btn-primary,.btn-primary:visited{background:var(--lime);color:var(--lime-ink);border-color:var(--lime);position:relative;overflow:hidden;isolation:isolate;
  box-shadow:0 0 0 0 rgba(198,244,50,0);transition:transform .2s var(--ease),box-shadow .25s,background .2s}
.btn-primary:hover{background:var(--lime-2);color:var(--lime-ink);transform:translateY(-2px);box-shadow:0 10px 30px -10px rgba(198,244,50,.75)}
.btn-primary::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;transform:translateX(-120%);
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.7) 48%,transparent 64%);animation:btSheen 5s ease-in-out 2s infinite}
@keyframes btSheen{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

/* Links in running text: a lime line that fills in under the word. */
main p a:not(.btn),main li a:not(.btn){color:inherit;text-decoration:none;font-weight:600;
  background:linear-gradient(var(--lime),var(--lime)) 0 100%/100% 2px no-repeat;transition:background-size .25s var(--ease)}
main p a:not(.btn):hover,main li a:not(.btn):hover{background-size:100% 100%;color:var(--lime-ink)}

/* The top menu: a lime bar slides under what you point at. */
.nav a,.nav summary,.nav button{position:relative}
.nav a::after,.nav summary::after{content:"";position:absolute;left:10px;right:10px;bottom:2px;height:2px;border-radius:2px;background:var(--lime);
  transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav a:hover::after,.nav summary:hover::after{transform:scaleX(1)}

/* Section labels with a live lime dot. */
.eyebrow{display:inline-flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 rgba(198,244,50,.6);animation:btLive 2.2s ease-out infinite}
@keyframes btLive{0%{box-shadow:0 0 0 0 rgba(198,244,50,.6)}80%,100%{box-shadow:0 0 0 9px rgba(198,244,50,0)}}

/* The hero follows you: a soft lime light under the pointer (site.js sets --mx and --my). */
.hero,.page-hero{--mx:70%;--my:30%;isolation:isolate}
.hero::after,.page-hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(520px circle at var(--mx) var(--my),rgba(198,244,50,.13),transparent 60%);transition:background .1s}
/* Cards tilt a fraction towards the pointer and catch a lime edge. */
.card{transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(10,11,13,.5),0 0 0 1px rgba(198,244,50,.45)}

@media (prefers-reduced-motion:reduce){
  .btn-primary::after,.eyebrow::before{animation:none}
  .hero::after,.page-hero::after{display:none}
  .card:hover,.btn-primary:hover{transform:none}
}

/* The security blog (blog.html, blog_post.html). */
.blog-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.blog-item a{display:block;padding:20px 22px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border);color:inherit;text-decoration:none;
  transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.blog-item a:hover{transform:translateY(-3px);border-color:var(--lime);box-shadow:0 18px 36px -24px rgba(10,11,13,.5)}
.blog-item time,.blog-mini time{font:600 12.5px var(--mono,ui-monospace,monospace);color:var(--text-3);letter-spacing:.04em}
.blog-new{margin-left:10px;padding:2px 8px;border-radius:999px;background:var(--lime);color:var(--lime-ink);font-size:11.5px;font-weight:800}
.blog-item h2{margin:6px 0 6px;font-size:21px;line-height:1.3}
.blog-item p{margin:0 0 10px;color:var(--text-2)}
.blog-item.is-latest a{border-left:3px solid var(--lime)}
.blog-cves{display:flex;flex-wrap:wrap;gap:6px}
.blog-cves code{font-size:12px;padding:2px 8px;border-radius:6px;background:var(--sunken);color:var(--text-2)}
.blog-body h2{margin-top:30px}
.blog-sources a{word-break:break-word}
.blog-note{margin-top:26px;padding:14px 16px;border-radius:var(--r);background:var(--sunken);color:var(--text-2);font-size:14.5px}
.blog-more{font-size:20px;margin:36px 0 10px}
.blog-mini{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.blog-mini a{display:flex;gap:14px;align-items:baseline;text-decoration:none;color:inherit}
.blog-mini a:hover{color:var(--teal)}
/* The CIS scores (home.html): one row each, label, bar and figure lined up;
   the plain-words explanation beneath, with room to breathe. */
.cis-row{display:grid;grid-template-columns:minmax(9.5em,auto) 1fr 3.4em;align-items:center;gap:12px;margin:10px 0 0;max-width:34em}
.cis-row .meter{margin:0;width:100%}
.cis-row b{text-align:right}
.spec dd em.spec-why{display:block;margin-top:12px;font-size:.92em;line-height:1.6;max-width:62ch;color:#C9CCD2;font-style:normal}
.spec dd em.spec-why b{color:var(--lime);font-style:normal}
@media (max-width:560px){.cis-row{grid-template-columns:1fr 3em;gap:6px 10px}.cis-row>span:first-child{grid-column:1/-1}}
.blog-help{margin-top:30px;padding:18px 20px;border-radius:var(--r-lg);background:var(--sunken);border-left:3px solid var(--lime)}
.blog-help h2{margin-top:0}
.blog-filter{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.blog-filter a{padding:7px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.22);color:inherit;text-decoration:none;font-weight:700;font-size:14px}
.blog-filter a[aria-current]{background:var(--lime);border-color:var(--lime);color:#0B0C0A}
.blog-kind{margin-left:10px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--olive)}
/* Cards, the picture on top: four across on wide screens, down to one on
   phones (owner, 2026-11-08). */
.blog-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:stretch}
.blog-item{display:flex}
.blog-item a{display:flex;flex-direction:column;gap:14px;width:100%;padding:14px 14px 18px}
.blog-pic{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:12px;background:#15171A}
.blog-text{display:flex;flex-direction:column;min-width:0;flex:1}
.blog-item h2{font-size:18px;line-height:1.3;margin:8px 0 8px}
.blog-item p{font-size:15px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.blog-item .blog-cves{margin-top:auto}
.blog-item .blog-cves code{font-size:11px;padding:2px 6px}
.blog-item.is-latest a{border-left:1px solid var(--lime);border-color:var(--lime)}
.blog-item.is-latest .blog-pic{box-shadow:0 0 0 2px var(--lime)}
.blog-hero-pic{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-lg);margin:0 0 26px;background:#15171A}
@media (max-width:1180px){.blog-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:880px){.blog-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.blog-list{grid-template-columns:minmax(0,1fr)}.blog-item p{-webkit-line-clamp:5}}