/* ==================================================================
   AMPROTEQ · x3.css
   Third layer, loaded after site.css + fx.css. Everything here is
   depth, dimension and interaction:
     - a fixed perspective scenery field the page travels through
     - real 3-D transforms on cards, panels and the hero hardware
     - cursor-reactive surfaces
     - the commercial modules (savings model, buy-vs-PPA, proof strip)

   Kept in its own file so the working scroll layer in fx.* stays intact.
   Every rule degrades to flat-but-correct if transforms are unsupported or
   the visitor asks for reduced motion.
================================================================== */

/* ---------------------------------------------------------------- 1. scenery
   A fixed field behind the whole document: a receding ground grid, a horizon
   wash, pylons and a PV row. The page scrolls *through* it rather than over a
   flat colour, which is what gives the site a sense of place. */
#scenery{
  position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  perspective:640px; perspective-origin:50% 46%;
  contain:strict;
}
#scenery .sky{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 90% 52% at 50% 62%, rgba(24,152,252,.10), transparent 66%),
    radial-gradient(ellipse 120% 40% at 78% 22%, rgba(60,204,252,.055), transparent 70%);
}
#scenery .floor{
  position:absolute; left:-60%; width:220%; height:150vh; top:52%;
  transform-origin:50% 0;
  transform:rotateX(76deg) translateY(var(--gy,0px));
  background-image:
    linear-gradient(to right, rgba(122,180,255,.085) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(122,180,255,.085) 1px, transparent 1px);
  background-size:84px 84px;
  -webkit-mask-image:radial-gradient(ellipse 52% 62% at 50% 4%, #000 0%, rgba(0,0,0,.55) 34%, transparent 76%);
  mask-image:radial-gradient(ellipse 52% 62% at 50% 4%, #000 0%, rgba(0,0,0,.55) 34%, transparent 76%);
  opacity:.62;
}
#scenery .horiz{
  position:absolute; left:0; right:0; top:52%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(60,204,252,.30) 22%,rgba(60,204,252,.42) 50%,rgba(60,204,252,.30) 78%,transparent);
  opacity:.5;
}
#scenery .far{
  position:absolute; left:0; right:0; bottom:44%; height:26vh;
  opacity:.30; will-change:transform;
}
#scenery .far svg{width:100%; height:100%; display:block}
#scenery .orb{
  position:absolute; border-radius:50%; filter:blur(58px); opacity:.30;
  will-change:transform;
}
@media(prefers-reduced-motion:reduce){ #scenery .floor,#scenery .far,#scenery .orb{transform:none !important} }
@media(max-width:820px){ #scenery .far{display:none} #scenery .floor{opacity:.4} }

/* A z-index:-1 child of <body> paints BELOW body's own background box, so an
   opaque body hides the field completely. The page colour therefore has to live
   on <html>, where it paints the canvas, leaving the field visible above it and
   still behind every bit of content. */
html{background:var(--bg)}
body{background:transparent}
main,.hero,.sec,.stmt,footer{position:relative}


/* -------------------------------------------------------- 3. 3-D surfaces
   `data-tilt` gives an element a cursor-driven tilt about its own centre.
   The rotation is written to custom properties by x3.js so the compositor
   handles the transform and nothing reads layout on pointer move. */
[data-tilt]{
  transform:perspective(1100px)
            rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))
            translate3d(0,0,var(--tz,0px));
  transform-style:preserve-3d;
  transition:transform .55s var(--e), border-color .4s var(--e), box-shadow .55s var(--e);
  will-change:transform;
}
[data-tilt].on{transition:transform .12s linear, border-color .4s var(--e), box-shadow .55s var(--e)}
[data-tilt] .lift{transform:translateZ(26px); transition:transform .55s var(--e)}
.card[data-tilt]:hover,.hpanel[data-tilt]:hover{
  box-shadow:0 34px 80px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(150,190,255,.14) inset;
}

/* scroll-driven 3-D entrance: content hinges up into place */
.d3{
  opacity:0; transform:perspective(1200px) rotateX(11deg) translate3d(0,42px,-60px);
  transition:opacity .9s var(--e), transform 1.05s var(--e);
}
.d3.in{opacity:1; transform:perspective(1200px) rotateX(0) translate3d(0,0,0)}
.d3.dly1{transition-delay:.08s}.d3.dly2{transition-delay:.16s}.d3.dly3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){ .d3{opacity:1; transform:none} }

/* ------------------------------------------------------ 4. cursor surfaces */
[data-spot]{position:relative; isolation:isolate}
[data-spot]::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  border-radius:inherit; opacity:0; transition:opacity .45s var(--e);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),
             rgba(60,204,252,.13), rgba(24,152,252,.05) 38%, transparent 70%);
}
[data-spot]:hover::before{opacity:1}
[data-spot]>*{position:relative; z-index:1}

/* ------------------------------------------------------------ 5. hero art */
.hero-art{perspective:1400px}
.hero-art img{
  transform:rotateY(var(--hy,0deg)) rotateX(var(--hx,0deg)) translate3d(0,var(--hpy,0px),0) scale(var(--hs,1));
  transform-origin:58% 62%;
  will-change:transform;
}
.hero-art::after{
  content:''; position:absolute; left:6%; right:6%; bottom:6%; height:38%;
  background:radial-gradient(ellipse at 50% 100%, rgba(60,204,252,.16), transparent 68%);
  filter:blur(26px); z-index:-1;
}

/* ------------------------------------------------- 6. systems gallery 3-D
   Panels rotate about the vertical axis according to how far they are from the
   centre of the viewport, so the pinned track reads as a carousel of objects
   rather than a sliding filmstrip. */
@media(min-width:1025px){
  .htrack{perspective:1800px; perspective-origin:50% 50%}
  .hpanel{
    transform:rotateY(var(--py,0deg)) translateZ(var(--pz,0px)) scale(var(--ps,1));
    transform-style:preserve-3d;
    transition:box-shadow .5s var(--e), border-color .5s var(--e);
    will-change:transform;
  }
  .hpanel .hp-art img{transition:transform .7s var(--e)}
  .hpanel:hover .hp-art img{transform:translateZ(40px) scale(1.035)}
}

/* --------------------------------------------------------- 7. UI polish */
#nav{backdrop-filter:blur(18px) saturate(1.5); -webkit-backdrop-filter:blur(18px) saturate(1.5)}
.btn{overflow:hidden}
.btn::after{
  content:''; position:absolute; left:var(--rx2,50%); top:var(--ry2,50%);
  width:0; height:0; border-radius:50%; transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,255,255,.34),transparent 68%);
  pointer-events:none; opacity:0;
}
.btn.rip::after{animation:rip .62s var(--e) forwards}
@keyframes rip{
  0%{width:0;height:0;opacity:.7}
  100%{width:340px;height:340px;opacity:0}
}
.card,.panel,.hpanel{transition:transform .55s var(--e), border-color .45s var(--e), box-shadow .55s var(--e)}

/* section numerals sit further back in the field */
.wm{opacity:.030; letter-spacing:-.06em}

/* ----------------------------------------------------- 8. proof strip */
.proof{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
  gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px;
  overflow:hidden; margin-top:clamp(30px,4vw,52px);
}
.proof div{
  background:var(--bg2); padding:clamp(22px,2.4vw,30px);
  display:flex; flex-direction:column; gap:8px;
  transition:background .45s var(--e);
}
.proof div:hover{background:var(--bg3)}
.proof b{
  font-family:var(--fd); font-size:clamp(26px,3vw,40px); font-weight:500;
  letter-spacing:-.02em; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.proof span{font-size:13.4px; color:var(--mut); line-height:1.55}

/* ------------------------------------------------- 9. the savings model */
.model{
  border:1px solid var(--line); border-radius:20px; background:
    linear-gradient(180deg,rgba(24,152,252,.05),transparent 42%), var(--bg2);
  padding:clamp(26px,3vw,44px); position:relative; overflow:hidden;
}
.model::before{
  content:''; position:absolute; inset:0 auto auto 0; width:100%; height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent); opacity:.5;
}
.model-g{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3vw,48px); align-items:start}
@media(max-width:900px){ .model-g{grid-template-columns:1fr} }
.mrow{margin-bottom:22px}
.mrow label{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  font-family:var(--fm); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim); margin-bottom:11px;
}
.mrow label b{
  font-family:var(--fd); font-size:19px; letter-spacing:-.01em;
  color:var(--ink); text-transform:none; font-weight:500;
}
.mrow input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--cyan) 0%,var(--cyan) var(--p,50%),rgba(150,190,255,.16) var(--p,50%));
  outline:none; cursor:pointer;
}
.mrow input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:17px; height:17px; border-radius:50%;
  background:var(--ink); border:3px solid var(--cyan); cursor:grab;
  box-shadow:0 0 0 6px rgba(60,204,252,.13); transition:box-shadow .3s var(--e), transform .2s var(--e);
}
.mrow input[type=range]::-webkit-slider-thumb:active{cursor:grabbing; transform:scale(1.12)}
.mrow input[type=range]::-moz-range-thumb{
  width:17px; height:17px; border-radius:50%; background:var(--ink);
  border:3px solid var(--cyan); cursor:grab; box-shadow:0 0 0 6px rgba(60,204,252,.13);
}
.mout{
  border:1px solid var(--line); border-radius:15px; background:var(--bg);
  padding:clamp(22px,2.4vw,30px);
}
.mout .big{
  font-family:var(--fd); font-size:clamp(34px,4.6vw,58px); font-weight:500;
  letter-spacing:-.03em; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mout .cap{font-family:var(--fm); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dim); margin-bottom:12px}
.mline{
  display:flex; justify-content:space-between; gap:14px; padding:13px 0;
  border-bottom:1px solid var(--line); font-size:14px;
}
.mline:last-child{border-bottom:0}
.mline span{color:var(--mut)}
.mline b{font-family:var(--fm); font-variant-numeric:tabular-nums; color:var(--ink); font-weight:400}
.mnote{font-size:12.4px; color:var(--dim); line-height:1.6; margin-top:16px}

/* --------------------------------------------------- 10. buy vs. PPA */
.ways{display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,26px)}
@media(max-width:860px){ .ways{grid-template-columns:1fr} }
.way{
  border:1px solid var(--line); border-radius:18px; background:var(--bg2);
  padding:clamp(26px,2.8vw,38px); position:relative; overflow:hidden;
  transition:border-color .45s var(--e), transform .55s var(--e);
}
.way:hover{border-color:var(--line2)}
.way .tag{
  font-family:var(--fm); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--cyan); display:inline-flex; align-items:center; gap:9px; margin-bottom:18px;
}
.way .tag i{width:6px; height:6px; border-radius:50%; background:var(--cyan); flex:none}
.way h3{font-size:clamp(22px,2.3vw,30px); margin-bottom:12px}
.way p{font-size:14.6px; color:var(--mut); line-height:1.72}
.way ul{list-style:none; margin:20px 0 0; padding:0; display:grid; gap:11px}
.way li{
  display:flex; gap:11px; font-size:14px; color:var(--ink2); line-height:1.6;
}
.way li svg{width:15px; height:15px; flex:none; margin-top:4px; color:var(--cyan)}
.way .fin{
  margin-top:24px; padding-top:20px; border-top:1px solid var(--line);
  font-family:var(--fm); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim);
}

/* ------------------------------------------------------ 11. sticky CTA */
#cta{
  position:fixed; left:50%; bottom:22px; z-index:95; transform:translate(-50%,140%);
  display:flex; align-items:center; gap:16px; padding:11px 12px 11px 22px;
  border:1px solid var(--line2); border-radius:100px;
  background:rgba(8,12,20,.86); backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  box-shadow:0 22px 60px -20px rgba(0,0,0,.9);
  transition:transform .7s var(--e), opacity .5s var(--e);
  opacity:0; max-width:calc(100vw - 32px);
}
#cta.on{transform:translate(-50%,0); opacity:1}
body.showcase #cta{transform:translate(-50%,140%); opacity:0; pointer-events:none}
#cta p{font-size:13.6px; color:var(--ink2); margin:0; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
#cta p b{color:var(--ink); font-weight:500}
#cta .btn{padding:10px 18px; font-size:13.4px; white-space:nowrap}
#cta button.x{
  width:30px; height:30px; border-radius:50%; color:var(--dim); flex:none;
  display:grid; place-items:center; transition:color .3s var(--e), background .3s var(--e);
}
#cta button.x:hover{color:var(--ink); background:rgba(150,190,255,.09)}
@media(max-width:700px){
  #cta{left:12px; right:12px; transform:translateY(140%); padding:10px 10px 10px 16px}
  #cta.on{transform:translateY(0)}
  body.showcase #cta{transform:translateY(140%)}
  #cta p{display:none}
}

/* --------------------------------------------------- 12. spec callouts
   Labelled leader lines over the hero render, drawn once it is in view. */
.callouts{position:absolute; inset:0; pointer-events:none; z-index:4}
.callout{
  position:absolute; display:flex; align-items:center; gap:10px;
  opacity:0; transform:translateY(8px); transition:opacity .7s var(--e), transform .7s var(--e);
}
.callout.in{opacity:1; transform:none}
.callout i{
  width:7px; height:7px; border-radius:50%; background:var(--cyan); flex:none;
  box-shadow:0 0 0 4px rgba(60,204,252,.18), 0 0 16px rgba(60,204,252,.7);
}
.callout u{
  height:1px; background:linear-gradient(90deg,var(--cyan),rgba(60,204,252,.2));
  flex:none; width:0; transition:width .8s var(--e) .15s;
}
.callout.in u{width:52px}
.callout span{
  font-family:var(--fm); font-size:10px; letter-spacing:.19em; text-transform:uppercase;
  color:var(--ink2); white-space:nowrap; text-shadow:0 2px 12px rgba(0,0,0,.9);
}

/* --------------------------------------------------------- 13. sundry */
.stage{position:relative; overflow:hidden}
.stage::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 90% at 50% 118%, rgba(24,152,252,.16), transparent 62%);
}
.marq-in{will-change:transform}
.lead strong,.body strong{color:var(--ink); font-weight:500}

/* ------------------------------------------- 14. card depth on hover
   The card itself carries an inline GSAP transform from fx.js depth(), so the
   3-D has to live on the contents. preserve-3d on the card is enough to give
   the artwork somewhere to travel. */
.card,.per{transform-style:preserve-3d}
.card .stage img,.card .stage canvas{transition:transform .75s var(--e)}
.card:hover .stage img{transform:translateZ(34px) scale(1.055)}
.card:hover .stage canvas{transform:translateZ(18px) scale(1.02)}
.card .card-b{transition:transform .6s var(--e)}
.card:hover .card-b{transform:translateZ(14px)}

/* ============================================================ 15. turntable
   A scroll-scrubbed orbit of the unit. 18 pre-rendered frames drawn into a
   canvas, pinned while the visitor scrolls through the rotation.
   Desktop only, and strictly lazy: the frames are not fetched until the
   section is within about a viewport, and the static SVG carries the section
   until they arrive (and forever, on mobile or reduced motion). */
.turn{position:relative; padding:0}
.turn-pin{
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--navh) + 26px) 0 clamp(74px,9vh,104px); overflow:hidden;
}
.turn-head{margin-bottom:clamp(12px,2vw,26px)}
.turn-head .h2{margin-top:18px}
.turn-stage{
  position:relative; width:100%; max-width:1180px; margin:0 auto;
  padding:0 var(--gut); display:grid; place-items:center;
}
/* The frame is height-led, not width-led: the head, the spec chips and the
   scroll hint all have to share one viewport with it, so the artwork gets
   whatever is left rather than claiming the full column width. */
.turn-stage .fr{
  position:relative; aspect-ratio:1000/535;
  height:min(50svh, 46vw); width:auto; max-width:100%;
  margin:0 auto;
}
.turn-cv,.turn-fb{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; display:block;
}
.turn-cv{opacity:0; transition:opacity .6s var(--e)}
.turn.ready .turn-cv{opacity:1}
.turn.ready .turn-fb{opacity:0}
.turn-fb{transition:opacity .6s var(--e)}
.turn-glow{
  position:absolute; left:50%; top:56%; width:78%; aspect-ratio:2.4/1;
  transform:translate(-50%,-50%); z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(24,152,252,.20), rgba(60,204,252,.05) 46%, transparent 72%);
  filter:blur(40px);
}
.turn-specs{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  margin-top:clamp(16px,2.4vw,34px); padding:0 var(--gut);
}
.turn-specs b{
  font-family:var(--fm); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:400; color:var(--dim); padding:9px 15px; border-radius:100px;
  border:1px solid var(--line); background:rgba(8,12,20,.5);
  transition:color .45s var(--e), border-color .45s var(--e), background .45s var(--e), transform .45s var(--e);
}
.turn-specs b.hot{
  color:var(--ink); border-color:var(--line3); background:rgba(24,152,252,.10);
  transform:translateY(-2px);
}
.turn-hint{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin-top:clamp(14px,2vw,26px);
  font-family:var(--fm); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--faint);
  transition:opacity .5s var(--e);
}
.turn-hint i{
  width:34px; height:1px; background:var(--line2); position:relative; overflow:hidden;
}
.turn-hint i::after{
  content:''; position:absolute; inset:0; background:var(--cyan);
  transform:translateX(-100%); animation:hintsw 2.4s var(--e) infinite;
}
@keyframes hintsw{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
.turn.done .turn-hint{opacity:0}
@media(max-width:1024px){
  .turn-pin{min-height:auto; padding:clamp(60px,9vw,110px) 0}
  .turn-cv,.turn-hint{display:none}
  .turn-stage .fr{aspect-ratio:auto}
  .turn-fb{position:relative; opacity:1 !important}
}

/* ------------------------------------------------------- 16. hero trust row
   Four facts already stated elsewhere on the site, put where a first-time
   visitor decides whether to keep reading. Nothing here is a new claim. */
.trust{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px;
  margin-top:clamp(26px,3vw,38px); padding-top:clamp(20px,2.4vw,28px);
  border-top:1px solid var(--line);
  font-family:var(--fm); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--dim);
}
.trust span{display:inline-flex; align-items:center; gap:9px; white-space:nowrap}
.trust span::before{
  content:''; width:5px; height:5px; border-radius:50%; flex:none;
  background:var(--cyan); box-shadow:0 0 9px rgba(60,204,252,.8);
}
@media(max-width:700px){
  .trust{gap:9px 16px; font-size:9.5px; letter-spacing:.14em}
  .trust span:nth-child(n+4){display:none}
}
@media(min-width:1100px){ .hero-art ~ .wrap .trust{max-width:min(56%,760px)} }

/* ==================================================================
   17. PROFESSIONAL PASS
   The site now carries real specification content, so it has to read
   like a datasheet rather than a product launch. Two moves: give the
   tables the weight they deserve, and pull the decorative layer back
   so it supports the content instead of competing with it.
================================================================== */

/* ---- specification tables ------------------------------------------ */
.tbl{
  border-radius:12px; background:var(--bg2);
  box-shadow:0 1px 0 rgba(255,255,255,.02) inset;
}
.tbl th{
  font-size:9.8px; letter-spacing:.20em; color:var(--mut);
  background:rgba(150,190,255,.045);
  border-bottom:1px solid var(--line2);
  padding-top:15px; padding-bottom:15px;
}
/* a two-column table is a spec sheet: label left, value hard right, so the
   numbers form a single scannable column instead of drifting with the labels */
.tbl table:has(th[colspan="2"]) td:last-child{text-align:right}
.tbl table:has(th[colspan="2"]) td:first-child{
  font-family:var(--fb); font-weight:400; font-size:13.8px; color:var(--mut);
}
.tbl table:has(th[colspan="2"]) td:last-child{color:var(--ink)}
.tbl tbody tr:nth-child(even){background:rgba(255,255,255,.014)}
.tbl tbody tr:hover{background:rgba(60,204,252,.045)}
.tbl .n{font-size:13.2px; letter-spacing:.01em; color:var(--ink)}
.tbl td,.tbl th{border-bottom-color:rgba(150,190,255,.07)}
@media(min-width:900px){ .tbl table{min-width:0} }

/* the accent bar on row hover was a decorative tic; a spec table wants a
   readable highlight, not a marker */
.tbl tbody tr:hover td:first-child::before{display:none !important}

/* ---- restraint on the decorative layer ------------------------------ */
#scenery .orb{opacity:.17}
#scenery .floor{opacity:.40}
#scenery .far{opacity:.20}
#scenery .horiz{opacity:.32}
[data-spot]::before{
  background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),
             rgba(150,190,255,.075), rgba(24,152,252,.028) 40%, transparent 72%);
}
/* the click ripple read as a consumer app, not as industrial equipment */
.btn.rip::after{animation:none !important; opacity:0 !important}
.wm{opacity:.022}
.stage::after{
  background:radial-gradient(ellipse 70% 90% at 50% 118%, rgba(24,152,252,.10), transparent 62%);
}
.hero-art::after{background:radial-gradient(ellipse at 50% 100%, rgba(60,204,252,.09), transparent 68%)}
.turn-glow{background:radial-gradient(ellipse at center, rgba(24,152,252,.12), rgba(60,204,252,.03) 46%, transparent 72%)}

/* ---- typography: tighter, quieter, more editorial -------------------- */
.h2{letter-spacing:-.030em}
.h3{letter-spacing:-.022em}
.lead{line-height:1.66}
.body{line-height:1.72; color:var(--mut)}
.eyebrow{font-size:10px; letter-spacing:.24em}
.small{font-size:13.2px; line-height:1.7}

/* ---- surfaces: flatter, squarer, less glow --------------------------- */
.card,.panel,.hpanel,.way,.model,.mout,.pcard{border-radius:12px}
.card:hover,.panel:hover{box-shadow:0 20px 50px -34px rgba(0,0,0,.9)}
.card[data-tilt]:hover,.hpanel[data-tilt]:hover{
  box-shadow:0 22px 56px -34px rgba(0,0,0,.85), 0 0 0 1px rgba(150,190,255,.09) inset;
}
.proof b{
  background:none; -webkit-background-clip:border-box; background-clip:border-box;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.proof div{padding:clamp(20px,2.2vw,28px)}

/* ---- the sub-heads introducing each spec block ---------------------- */
.sechead .h3{margin-top:14px}
.tbl + .sechead,.g2 + .sechead{margin-top:clamp(40px,5vw,72px)}
/* rail label flashes on chapter change, stays on hover (ems/contact share this) */
#rail a.on s{animation:railFlash 2.6s ease forwards}
#rail:hover a s{opacity:1!important;transform:none!important;animation:none}
@keyframes railFlash{0%,70%{opacity:1}100%{opacity:0}}