@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/dm-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{--navy:#0B2A4A;--navy-deep:#081E36;--ink:#14212B;--muted:#5C6C7A;--teal:#007878;--teal-deep:#00605F;--teal-bright:#0A9A96;--sun:#E8A33D;--sun-deep:#B4761A;--roof:#2E4C6D;--panel:#0E1E33;--panel-line:#6E9CC8;--ok:#1F8A5B;--silver:#A0A8A8;
--ground:#FDFCFA;--paper:#F4EFE6;--line:#DCE3EA;--line-soft:#EAEFF3;--on-navy:#F4F8FB;--on-navy-muted:#B7C6D3;--sky:#FFD98A;
--sans:"DM Sans",system-ui,"Segoe UI",Helvetica,Arial,sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
--wrap:1180px;--r:12px;--ease:cubic-bezier(.16,1,.3,1);
/* Type scale. DESIGN.md's own ratio-1.25 display run plus the sub-body run it never specified (~1.12).
   research/13-typography-whitespace-audit.md measured 36 sizes and 127 combinations live, 29 of the 35
   steps below ratio 1.07: a pile of near-values, not a hierarchy. Nothing may introduce a size off this
   scale; typo-probe.js fails the build surface if anything does. */
--d1:clamp(34px,4.4vw,52px);--d2:clamp(28px,3.4vw,41.5px);--d3:clamp(27px,2.9vw,33px);--d4:26.5px;
--t1:21px;--t2:18.5px;--t3:17px;--t4:15px;--t5:13.5px;
--lh-d1:1.06;--lh-d2:1.10;--lh-d3:1.16;--lh-d4:1.22;--lh-t1:1.30;--lh-t2:1.65;--lh-t3:1.60;--lh-t4:1.55;--lh-t5:1.45;
/* Vertical unit. Section padding picks from these two and nothing else; the audit found eight values
   (0/48/56/72/80/88/96/104) producing a 4.2x spread between the smallest and largest boundary on one page. */
--sec:72px;--sec-lg:96px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-variant-numeric:tabular-nums}
h1,h2,h3{margin:0;line-height:var(--lh-t1);letter-spacing:-.015em;text-wrap:balance;font-weight:600}
h1{font-size:var(--d1);line-height:var(--lh-d1);letter-spacing:-.022em;font-weight:700}
h2{font-size:var(--d3);line-height:var(--lh-d3);letter-spacing:-.015em;font-weight:700}
h3{font-size:var(--t1);line-height:var(--lh-t1);letter-spacing:-.005em;font-weight:600}
/* A section heading followed by a grid or a list had 0px under it. Bind the heading to what it heads. */
h2+.grid,h2+ul.ruled,h2+.stats,h2+.duo,h2+.trio,h2+.modules,h2+.specs,h2+ul,h2+ol,h2+table{margin-top:28px}
/* Leading has to rise as the clamp bottoms out, or a wrapped heading on a phone closes to ~5px between
   its lines. A 2.6x size range cannot share one ratio; that was the old h1,h2,h3{line-height:1.12}. */
@media(max-width:600px){h1{line-height:1.14}h2{line-height:1.24}h3{line-height:1.34}}
/* Phone gutter. At 390px a 20px gutter each side pushed every running block under the 45-character
   floor, which turns a long article into 27 screens. 14px recovers about 8 characters a line. */
@media(max-width:420px){.wrap{width:min(var(--wrap),100% - 28px)}}
p{margin:0}a{color:var(--navy)}img{max-width:100%;height:auto;display:block}
.wrap{width:min(var(--wrap),100% - 40px);margin-inline:auto}
.eyebrow{display:block;font:600 var(--t5)/1.35 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin:0 0 18px;max-width:34em}
/* Leading 1.35, not the K step's 1.0: the K step assumes a single-line label, and display:block
   means a long eyebrow now wraps, where 1.0 put the two lines almost touching. */
.lead{font-size:var(--t1);line-height:1.5;max-width:33em}.measure{max-width:34em}
/* Replaces five hand-typed inline rem sizes in build.py. Capped measure: two of those paragraphs ran
   159 and 174 characters per line because they sat at the full 1180px wrap with nothing holding them. */
section p,.card p,li>p{max-width:34em}
.center p,[style*='text-align:center'] p,.head.center p,.verify p{margin-inline:auto}
.srcs{counter-reset:s;list-style:none;padding:0;margin:22px 0 0;max-width:46em}
.srcs li{counter-increment:s;position:relative;padding:11px 0 11px 34px;border-bottom:1px solid var(--line-soft);font-size:var(--t4);line-height:var(--lh-t4)}
.srcs li:before{content:counter(s);position:absolute;left:0;top:13px;font:500 var(--t5)/1 var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.srcs a{color:var(--teal-deep)}
.srcs .ck{display:block;margin-top:3px;color:var(--muted)}
.note{max-width:34em;font-size:var(--t4);line-height:var(--lh-t4);color:var(--muted)}
.lead.sm{font-size:var(--t4);line-height:var(--lh-t4)}
.cite{font:400 var(--t5)/var(--lh-t5) var(--sans);color:var(--muted);max-width:34em}
.btn{display:inline-flex;align-items:center;gap:12px;padding:14px 24px;border-radius:999px;font:600 var(--t3)/1.2 var(--sans);text-decoration:none;background:var(--navy);color:#fff;border:1.5px solid var(--navy);transition:background .15s var(--ease),border-color .15s var(--ease),transform .15s var(--ease);cursor:pointer}
.btn:hover{background:var(--navy-deep);border-color:var(--navy-deep)}.btn.ghost{background:transparent;color:var(--navy)}.btn.ghost:hover{background:rgba(11,42,74,.06)}
.btn.sun{background:var(--teal);border-color:var(--teal);color:#fff}.btn.sun:hover{background:var(--teal-deep);border-color:var(--teal-deep)}
.btn.onnavy{background:var(--teal-bright);color:#fff;border-color:var(--teal-bright)}.btn.ghost.onnavy{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}.btn.ghost.onnavy:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn svg{width:18px;height:18px;transition:transform .15s var(--ease)}.btn:hover svg{transform:translateX(3px)}
.btn.up{font-size:var(--t4);letter-spacing:.08em;text-transform:uppercase;padding:15px 26px}


.err{margin:0 0 12px;padding:11px 14px;background:#FDECEA;border:1px solid #C0392B;color:#8E2A20;font-size:14.5px;line-height:1.5}
.daycycle{margin:0;position:relative}
.daycycle .prod{display:block;width:100%;height:96px;margin-top:10px}
@media(max-width:860px){.daycycle .prod{height:74px}}

.dc-stack{position:relative;aspect-ratio:1280/543;overflow:hidden;border:1px solid rgba(244,248,251,.14);background:var(--navy-deep)}
.dc-stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s var(--ease)}
.dc-stack img.on{opacity:1}
@media(prefers-reduced-motion:reduce){.dc-stack img{transition:none}}
/* animated system flow: dashes travel along each path so direction is shown, not described */
@keyframes flowdash{to{stroke-dashoffset:-44}}
@keyframes flowdashrev{to{stroke-dashoffset:44}}
@keyframes raypulse{0%,100%{opacity:.35}50%{opacity:1}}
.flowfig .fl{animation:flowdash 1.6s linear infinite;animation-delay:var(--d,0s)}
.flowfig .fl.rev{animation-name:flowdashrev;animation-duration:2.4s}
.flowfig .ray{animation:raypulse 2.6s ease-in-out infinite;animation-delay:var(--d,0s)}
@media(prefers-reduced-motion:reduce){.flowfig .fl,.flowfig .ray{animation:none}.flowfig .ray{opacity:.8}}
.card.module{display:flex;flex-direction:column;overflow:hidden;padding:0}
.card.module .mmedia{margin:0;aspect-ratio:16/9;overflow:hidden;background:var(--paper)}
.card.module .mmedia img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.card.module:hover .mmedia img{transform:scale(1.035)}
.card.module .n,.card.module h3,.card.module p{padding-inline:26px}
.card.module .n{padding-top:22px}
.card.module p{flex:1 1 auto}
.card.module .more{margin:4px 26px 24px;align-self:flex-start}
/* The "why now" trio: the h2 ran straight into the column headings with no gap, and the column headings
   were set at the same weight and near the same size as the h2, so the eye saw four headlines and no
   hierarchy. The footnote also ran the full 140ch width. */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px;margin-top:48px;align-items:start}
section .stats+p.cite,section .stats~p{max-width:34em;margin-top:40px}
.stats>div{display:flex;flex-direction:column}
.stats .stat{font:700 clamp(23px,2.3vw,27px)/1.15 var(--sans);letter-spacing:-.015em;color:var(--navy);margin:0 0 12px;padding-bottom:12px;border-bottom:2px solid var(--teal);align-self:start}
.stats p{font-size:16px;line-height:1.62;color:#2A3B49;margin:0;max-width:28.7em}
@media(max-width:900px){.stats{grid-template-columns:1fr;gap:30px}.stats p{max-width:34em}}
section{padding-block:var(--sec-lg)}.band{background:var(--paper)}.band-navy{background:var(--navy);color:var(--on-navy)}.band-navy .eyebrow{color:var(--teal-bright)}.band-navy .cite{color:var(--on-navy-muted)}
/* strap + three-tier header, the family pattern */
.strap{background:var(--navy-deep);color:var(--on-navy-muted);font-size:13px}.strap .wrap{display:flex;justify-content:space-between;gap:16px;padding-block:8px;flex-wrap:wrap}.strap b{color:var(--on-navy);font-weight:500}.strap a{color:var(--on-navy);text-decoration:none}.strap .util{display:flex;gap:22px}
header.top{background:#fff}.top .wrap{display:flex;align-items:center;gap:32px;padding-block:18px}.top .logolink{line-height:0;flex:0 0 auto}.top .logo{width:270px;height:auto;display:block}
.top .reach{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:14px;line-height:1.3}.top .reach svg{width:26px;height:26px;color:var(--navy);flex:0 0 auto}.top .reach b{display:block;font-weight:500;color:var(--ink);font-size:15px}.top .reach a{color:var(--muted);text-decoration:none;font-size:13.5px}
.top .acts{display:flex;gap:10px;flex:0 0 auto}
.navbar{background:var(--navy);position:sticky;top:0;z-index:20}.navbar .wrap{display:flex;align-items:stretch;gap:0;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.navbar .wrap>*{scroll-snap-align:start}
.navbar a{color:#fff;text-decoration:none;font-weight:500;font-size:15px;padding:16px 22px 16px 0;margin-right:22px;position:relative;white-space:nowrap}
.navbar a::after{content:'';position:absolute;left:0;right:22px;bottom:10px;height:2px;background:var(--teal-bright);transform:scaleX(0);transform-origin:left;transition:transform .18s var(--ease)}
/* ---------- Learn mega panel. Scoped under .navbar so these beat the .navbar a rules above. ----------
   One row of four short-label columns plus one promoted tool. The previous version listed every article
   headline in a 4x2 grid: 22 links of identical weight, with row heights set by the tallest column, so two
   cells were mostly dead space. Short labels, fixed columns, one clear primary. */
.navbar{position:relative}
.navbar .navitem{background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:7px;color:#fff;font:500 15px/1 var(--sans);padding:16px 22px 16px 0;margin-right:22px;white-space:nowrap}
.navbar .navitem svg{width:12px;height:12px;opacity:.7;transition:transform .18s var(--ease)}
.navbar .navitem[aria-expanded=true] svg{transform:rotate(180deg);opacity:1}
.navbar .mm{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 18px 40px rgba(11,42,74,.13);z-index:30;text-align:left}
.navbar .mm[hidden]{display:none}
/* .navbar .wrap is a descendant selector, so it also matched the panel's own inner .wrap and
   turned it into a scrolling flex row, collapsing the columns to 122px. Reset it. */
.navbar .mm .wrap{display:block;overflow:visible;scroll-snap-type:none}
.navbar .mm-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 40px;padding:28px 0 24px;align-items:start}
.navbar .mm-col{display:flex;flex-direction:column;gap:2px;min-width:0}
.navbar .mm-col+.mm-col{padding-left:36px;border-left:1px solid var(--line-soft);margin-left:-36px}
.navbar .mm-head{font:600 13px/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--navy);opacity:.52;margin:0 0 14px}
.navbar .mm-col a{display:block;margin:0;padding:7px 0;border:0;font:500 15px/1.35 var(--sans);color:var(--ink);text-decoration:none;text-transform:none;letter-spacing:0;opacity:1;white-space:normal}
.navbar .mm-col a:hover{color:var(--teal-deep);background:none;text-decoration:none}
/* the nav strip's underline indicator is an ::after bar at bottom:10px. Inside the panel it draws straight
   through the middle of a link and reads as a strikethrough. Kill it for everything in the panel. */
.navbar .mm a::after{display:none!important;content:none!important}
.navbar .mm-card{display:flex;align-items:center;gap:14px;flex:0 1 480px;padding:13px 16px;background:#fff;
  border:1px solid var(--line);border-radius:12px;text-decoration:none;margin:0;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease),transform .16s var(--ease)}
.navbar .mm-card:hover{border-color:var(--teal);box-shadow:0 6px 18px rgba(0,120,120,.13);transform:translateY(-1px)}
.navbar .mm-ico{flex:0 0 38px;height:38px;border-radius:10px;background:rgba(0,120,120,.09);color:var(--teal-deep);display:grid;place-items:center}
.navbar .mm-ico svg{width:19px;height:19px}
.navbar .mm-txt{display:block;min-width:0}
.navbar .mm-card b{display:block;font:600 15px/1.25 var(--sans);color:var(--navy);margin:0}
.navbar .mm-sub{display:block;margin-top:3px;font:400 13px/1.4 var(--sans);color:var(--muted)}
.navbar .mm-chev{flex:0 0 auto;margin-left:auto;color:var(--line);display:grid;place-items:center;transition:color .16s var(--ease),transform .16s var(--ease)}
.navbar .mm-chev svg{width:17px;height:17px}
.navbar .mm-card:hover .mm-chev{color:var(--teal);transform:translateX(3px)}
.navbar .mm-foot{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;padding:18px 0 20px;border-top:1px solid var(--line-soft)}
.navbar .mm-all{display:inline-flex;align-items:center;gap:8px;padding:0;margin:0;font:600 14.5px/1 var(--sans);color:var(--teal-deep);text-decoration:none;white-space:nowrap}
.navbar .mm-all svg{width:16px;height:16px;transition:transform .16s var(--ease)}
.navbar .mm-all:hover{text-decoration:none}
.navbar .mm-all:hover svg{transform:translateX(3px)}
@media(max-width:1100px){.navbar .mm-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 32px}
  .navbar .mm-col+.mm-col{padding-left:0;border-left:0;margin-left:0}
  .navbar .mm-foot{flex-direction:column;align-items:stretch;gap:16px}
  .navbar .mm-card{flex:1 1 auto}}
@media(max-width:860px){.navbar .mm-grid{grid-template-columns:1fr;gap:16px;padding:18px 0 14px}
  .navbar .mm{max-height:72vh;overflow-y:auto}
  .navbar .navitem{font-size:14px;margin-right:16px;padding-right:12px}}
.navbar a:hover::after,.navbar a[aria-current]::after{transform:scaleX(1)}/* The sticky nav's Free quote is the only call to action that survives scrolling, since the header above
   it scrolls away. It was plain teal text floating at the right edge. Make it read as the button it is. */
.navbar a.quote{margin-left:auto;margin-right:0;align-self:center;padding:9px 20px;border-radius:999px;
  background:var(--teal);color:#fff;font-weight:600;font-size:14.5px;line-height:1;white-space:nowrap;
  transition:background .16s var(--ease),transform .16s var(--ease),box-shadow .16s var(--ease)}
.navbar a.quote:hover{background:var(--teal-bright);transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,120,120,.35)}
.navbar a.quote:focus-visible{outline:2px solid #fff;outline-offset:2px}
.navbar a.quote{opacity:0;transform:translateY(-6px);pointer-events:none;visibility:hidden;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s linear .3s}
.navbar.stuck a.quote{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s,0s,0s}
@media(prefers-reduced-motion:reduce){.navbar a.quote{transition:none}}
.navbar a.quote::after{display:none}
@media(max-width:860px){.top .reach .mailto,.top .reach svg{display:none}.top .reach{margin-left:auto}.top .reach b{font-size:15px}.top .logo{width:150px}.top .wrap{gap:12px}.top .acts .btn{padding:11px 16px;font-size:14px}.strap .util a:not(:first-child){display:none}.navbar .wrap{width:100%;padding-inline:20px}.navbar a{margin-right:16px;padding-right:12px;font-size:14px}.navbar a.quote{display:none}}
@media(max-width:480px){.top .acts .btn{padding:10px 12px;font-size:13px}.top .logo{width:150px}}
/* hero: white ground, the drawn field behind (masked right), the loop, the stage the only dark object */
.hero{position:relative;padding-block:var(--sec-lg) var(--sec);background:var(--ground);color:var(--ink);overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#fff 0%,#F7F3EC 100%);z-index:-3}
.hero .net{position:absolute;inset:0;width:100%;height:100%;z-index:-2;opacity:.35;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 30%,#000 60%);mask-image:linear-gradient(90deg,transparent 0,transparent 30%,#000 60%)}
.hero .loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;opacity:.55;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 34%,#000 62%);mask-image:linear-gradient(90deg,transparent 0,transparent 34%,#000 62%)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:56px;align-items:center}
.hero h1{color:var(--navy)}.hero h1::after{content:"";display:block;width:72px;height:4px;background:var(--teal);border-radius:2px;margin-top:22px}
.hero .lead{color:#2A3B49;margin-top:22px}
.hero .ticks{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:10px;font-size:var(--t3);color:var(--ink)}.hero .ticks li{display:flex;gap:10px;align-items:flex-start}.hero .ticks svg{flex:0 0 18px;width:18px;height:18px;margin-top:4px;color:var(--teal)}
.hero .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr}.hero .loop,.hero .net{display:none}}
/* the stage: drawn illustration in a dark frame, six chips drawing into the at-a-glance card */
.stage{position:relative;margin:0;border-radius:18px;overflow:hidden;max-width:100%;background:#0F2A3C;box-shadow:0 40px 80px -36px rgba(3,15,28,.6)}
.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:st-img 1.6s cubic-bezier(.2,.8,.2,1) both}
.stage .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,20,32,.18) 0%,rgba(6,20,32,0) 40%,rgba(6,20,32,.12) 100%);pointer-events:none}
.stage .links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.stage .links path{fill:none;stroke:#7FD8D4;stroke-width:.24;opacity:.9;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 .45px rgba(10,154,150,.8));animation:st-draw .8s cubic-bezier(.4,0,.2,1) both;animation-delay:calc(.7s + var(--i) * .12s)}
.stage .chip{position:absolute;display:inline-flex;align-items:center;gap:7px;padding:6px 11px 6px 9px;border-radius:999px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 8px 20px -10px rgba(3,15,28,.55);font:600 var(--t5)/1 var(--sans);color:var(--navy);white-space:nowrap;animation:st-in .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.35s + var(--i) * .12s)}
.stage .chip i{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px rgba(0,120,120,.2)}
.stage .glance{position:absolute;padding:11px 13px 9px;border-radius:12px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);border:1px solid rgba(255,255,255,.9);box-shadow:0 22px 44px -18px rgba(3,15,28,.6);animation:st-in .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:1.45s}
.stage .g-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px;white-space:nowrap}.stage .g-head b{font:600 13px/1.2 var(--sans);color:var(--navy)}.stage .g-head span{font:500 11px/1.2 var(--sans);color:var(--muted)}
/* 11px is the documented floor for type inside the scaled .stage graphic; it is not a scale step. */
.stage .g-kpis{display:flex;gap:10px;margin:0 0 8px}.stage .g-kpis span{flex:1;display:flex;flex-direction:column;gap:2px}.stage .g-kpis i{font:600 11px/1.2 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-style:normal}.stage .g-kpis b{font:600 13px/1.1 var(--sans);color:var(--navy);letter-spacing:-.01em}.stage .g-kpis s{height:2px;border-radius:1px;margin-top:2px;text-decoration:none;display:block}
.stage .g-trend{display:block;width:100%;height:auto;overflow:visible}.stage .slab{font:500 6px var(--sans);fill:var(--muted)}
.stage .trace{fill:none;stroke:var(--sun);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:st-draw 1.1s cubic-bezier(.4,0,.2,1) both;animation-delay:1.75s}
.stage .pin{fill:var(--ok);stroke:#fff;stroke-width:1.6;transform-box:fill-box;transform-origin:center;animation:st-pop .45s cubic-bezier(.34,1.56,.64,1) both;animation-delay:2.7s}
.stage .halo{fill:rgba(31,138,91,.35);transform-box:fill-box;transform-origin:center;animation:st-halo 2.4s ease-out 3.2s infinite}
/* .g-foot deleted: 9px body text at 4.30:1. The chip on the figure already says it is an example. */
@keyframes st-img{from{transform:scale(1.06)}to{transform:scale(1)}}@keyframes st-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes st-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}@keyframes st-pop{0%{transform:scale(0)}70%{transform:scale(1.25)}100%{transform:scale(1)}}@keyframes st-halo{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.8);opacity:0}}
@media(max-width:600px){.stage .chip{font-size:10px;padding:4px 7px 4px 6px}.stage .links{display:none}}
@media(prefers-reduced-motion:reduce){.stage *{animation:none!important}.stage .links path,.stage .trace{stroke-dashoffset:0}.stage .halo{opacity:0}.hero .loop{display:none}}
/* verify band (the family's "trusted" band) */
.verify{padding-block:var(--sec);border-bottom:1px solid var(--line-soft);text-align:center}.verify .wrap{display:grid;justify-items:center;gap:26px}.verify p{font-size:var(--t3);color:var(--muted);max-width:34em;margin-top:10px}
.verify ul{list-style:none;margin:0;padding:0;display:flex;gap:16px 44px;flex-wrap:wrap;justify-content:center}.verify li{text-align:left}.verify li b{display:block;font:600 var(--t1)/var(--lh-t1) var(--sans);color:var(--navy);letter-spacing:-.005em}.verify li span{font-size:var(--t5);line-height:var(--lh-t5);color:var(--muted)}
/* spec strip */
.specs{background:var(--navy-deep);color:var(--on-navy);padding-block:0}.specs .strip-k{font:600 var(--t5)/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--teal-bright);padding:44px 0 30px}
/* `.specs div` matched EVERY descendant div, not just the columns: each .k/.v/.s took 26px of vertical
   padding (156px of dead space per column) and drew its own border-right at its own height, which is where
   the fragmented rules and the orphan line beside the strip heading came from. Scope to direct children. */
.specs .wrap{display:grid;grid-template-columns:repeat(3,1fr);padding-bottom:48px}
.specs .spec{padding:0 32px;border-right:1px solid rgba(255,255,255,.14)}
.specs .spec:first-of-type{padding-left:0}.specs .spec:last-child{border-right:0;padding-right:0}
.specs .k{font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--on-navy-muted);margin:0 0 14px}
.specs .v{font:600 var(--t1)/var(--lh-t1) var(--sans);letter-spacing:-.01em;color:#fff;margin:0}
.specs .s{font:400 15px/1.6 var(--sans);color:var(--on-navy-muted);margin:8px 0 0;max-width:23.3em}
@media(max-width:800px){.specs .wrap{grid-template-columns:1fr;row-gap:26px;padding-bottom:34px}
.specs .spec{border-right:0;padding:0 0 26px;border-bottom:1px solid rgba(255,255,255,.14)}
.specs .spec:last-child{border-bottom:0;padding-bottom:0}.specs .s{max-width:none}}
/* who */
.who{padding-block:var(--sec-lg)}.who .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:64px;align-items:start}.who p+p{margin-top:16px}
.facts{margin-top:8px;display:grid;gap:14px}.facts div{padding:16px 0;border-top:1px solid var(--line)}.facts b{display:block;font-weight:600;color:var(--navy)}.facts span{font-size:var(--t4);line-height:var(--lh-t4);color:#2A3B49}
@media(max-width:900px){.who .wrap{grid-template-columns:1fr}}
/* suite: three jobs */
.head.center{margin-inline:auto;text-align:center;max-width:33em}.head.center p{margin-top:18px;color:var(--muted);font-size:var(--t1);line-height:1.5}.suite .head{margin-bottom:56px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 30px -18px rgba(20,33,44,.28);transition:transform .18s var(--ease),box-shadow .18s var(--ease)}.card:hover{transform:translateY(-3px);box-shadow:0 22px 44px -22px rgba(20,33,44,.4)}
.modules{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.module{padding:32px;display:flex;flex-direction:column}.module .n{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}.module .n b{font:500 var(--t5)/1 var(--mono);color:var(--teal)}.module .n span{font:600 var(--t5)/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#176B48;padding:4px 8px;border:1px solid rgba(31,138,91,.35);border-radius:999px}
.module p{margin-top:12px;color:#2A3B49;font-size:15.5px}.module .more{margin-top:auto;padding-top:20px;font-weight:600;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--teal);text-decoration:none;display:inline-flex;align-items:center;gap:8px}.module .more svg{width:16px;height:16px}
@media(max-width:900px){.modules{grid-template-columns:1fr}}
/* the problem: the figure that carries the argument */
.problem{padding-block:var(--sec-lg);text-align:center}.problem .head{max-width:34em;margin:0 auto 28px}.problem .head p{margin-top:16px;color:var(--muted);font-size:var(--t1);line-height:1.5}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:48px;text-align:left;margin-top:56px}.duo h3{margin-bottom:10px}.duo p{color:#2A3B49;font-size:15.5px}.duo .k{font:400 12px var(--mono);color:var(--muted);display:block;margin-bottom:10px}
@media(max-width:800px){.duo{grid-template-columns:1fr}}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;text-align:left;margin-top:56px}.trio h3{margin-bottom:8px}.trio p{color:#2A3B49;font-size:15.5px}.trio .cite{display:block;margin-top:12px}
@media(max-width:800px){.trio{grid-template-columns:1fr}}
/* one-day band */
.video{background:var(--navy);color:var(--on-navy);padding-block:var(--sec-lg)}.video h2{color:#fff}.video .lead{color:#DCE7EF;margin-top:18px;max-width:34em}
.video .head{max-width:34em;margin-bottom:40px}
.day{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:56px;align-items:start}
.day .daycycle{position:sticky;top:104px}
/* each beat is a scroll row: its own frames play while its own line is being read */
.beats{list-style:none;margin:0;padding:0;counter-reset:b}
.beats li{display:grid;grid-template-columns:84px 1fr;gap:20px;align-content:center;min-height:15vh;padding:20px 0;border-top:1px solid rgba(255,255,255,.12);transition:color .35s var(--ease),border-color .35s var(--ease)}
.beats li:first-child{border-top:0}
.beats li.on{border-color:var(--teal-bright)}
.beats li.on p{color:#fff}
.beats li:not(.on) b{color:#7FD4D0}
.beats b{font:500 13.5px/1.5 var(--mono);color:var(--teal-bright);letter-spacing:.02em;white-space:nowrap}
.video .cite{color:var(--on-navy-muted)}
.beats p{font-size:17.5px;line-height:1.6;color:#C6D5E2;max-width:24.6em;margin:0}
.beats li.on b{color:var(--teal-bright)}
.seq{margin:0;position:sticky;top:clamp(96px,calc(50vh - 190px),340px);align-self:start}
.day{--seq-w:1.22fr}
.seq canvas{width:100%;height:auto;display:block;border-radius:14px;box-shadow:0 30px 60px -20px rgba(3,15,28,.7),0 0 0 1px rgba(255,255,255,.08) inset;background:#0B1520}
.clock{display:flex;gap:0;margin-top:16px;border-top:1px solid rgba(255,255,255,.14);padding-top:10px}
.clock span{flex:1;font:500 11.5px/1 var(--mono);color:#7F95AA;position:relative;padding-top:12px;text-align:center;transition:color .3s var(--ease)}
.clock span::before{content:"";position:absolute;top:0;left:50%;width:1px;height:6px;background:rgba(255,255,255,.22)}
.clock span.on{color:var(--teal-bright)}.clock span.on::before{background:var(--teal-bright);height:9px;width:2px}
@media(max-width:900px){.day{grid-template-columns:1fr;gap:28px}.seq{position:sticky;top:calc(56px + 8px);order:-1}.beats li{min-height:auto;padding:16px 0}}

/* cta */
.cta{padding-block:var(--sec-lg)}.cta .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:start}.cta .side p+p{margin-top:12px}.cta .side .k{font:600 var(--t5)/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
@media(max-width:900px){.cta .wrap{grid-template-columns:1fr}}
/* footer */
/* The licence record on /about. Data sheet, not plaque: hairline rules, no container, no side stripe,
   no hero numeral. The current licence is distinguished by weight and a teal marker rule under the row,
   not by a coloured left border. Numbers in mono with tabular figures so the two align as a ledger. */
.lr{padding-block:56px 8px}
.lr-h{margin:0 0 10px;color:var(--navy)}
.lr-lead{max-width:34em;margin:0 0 30px;color:var(--muted);font-size:var(--t3);line-height:var(--lh-t3)}
.lr-list{list-style:none;margin:0;padding:0;max-width:790px;border-top:1px solid var(--line)}
.lr-row{display:grid;grid-template-columns:8.5rem 1fr auto;gap:2px 22px;align-items:baseline;
  padding:17px 0 16px;border-bottom:1px solid var(--line)}
.lr-num{grid-row:span 2;font:500 var(--t1)/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--muted);
  text-decoration:none;border-bottom:1px solid transparent;align-self:center}
.lr-num:hover{color:var(--teal-deep);border-bottom-color:var(--teal)}
.lr-name{font-weight:600;color:var(--ink)}
.lr-who{grid-column:2;color:var(--muted);font-size:var(--t5);line-height:var(--lh-t5)}
.lr-when{grid-column:3;grid-row:span 2;text-align:right;color:var(--muted);font-size:13.5px;line-height:1.5;align-self:center}
.lr-when b{display:block;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.lr-when i{font-style:normal}
.lr-row.is-current .lr-when i{color:var(--teal-deep);font-weight:600}
/* Not bolded on purpose. IBM Plex Mono slashes its zero by default, and at 600 the slashes in 0032580A
   line up into what reads as a strike through the number, making the ACTIVE licence look cancelled.
   The current row is already marked by the teal rule and the darker number. */
.lr-row.is-current .lr-num{color:var(--navy)}
.lr-foot{margin:22px 0 0;color:var(--muted);font-size:13.5px}
.lr-foot a{color:var(--teal-deep)}
@media(max-width:640px){
  .lr-row{grid-template-columns:1fr auto;gap:1px 14px}
  .lr-num{grid-row:auto;grid-column:1/-1;font-size:17px}
  .lr-who{grid-column:1}
  .lr-when{grid-column:2;grid-row:span 2}
}
footer{background:var(--navy-deep);color:var(--on-navy-muted);padding-block:var(--sec) 28px;font-size:var(--t4)}footer .cols{display:grid;grid-template-columns:2fr 1fr 1.4fr;gap:40px}footer .cols p,footer .cols li{max-width:34em}footer h4{color:#fff;margin:0 0 12px;font:600 var(--t5)/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}footer ul{list-style:none;padding:0;margin:0}footer li{margin:.4em 0}footer a{color:#fff;text-decoration:none}footer .legal{margin-top:34px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);font-size:var(--t5);line-height:var(--lh-t5);color:#8FA3B6;max-width:36em}
@media(max-width:800px){footer .cols{grid-template-columns:1fr}}
/* forms (family card) */
form.quote{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:0 22px 44px -22px rgba(20,33,44,.35)}form.quote h3{font-size:var(--t1);margin-bottom:6px}form.quote .lead{font-size:var(--t4);color:var(--muted);margin-bottom:18px}
.f{display:grid;gap:14px}.f2{grid-template-columns:1fr 1fr}@media(max-width:600px){.f2{grid-template-columns:1fr}}
label{font-weight:500;font-size:var(--t4);display:block;margin-bottom:6px}input,select,textarea,button{font:inherit}
input,select,textarea{width:100%;padding:12px 14px;border:1px solid #C9D2DA;border-radius:10px;background:#fff;color:var(--ink);min-height:44px}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,120,120,.28)}
.consent{display:block;position:relative;padding-left:26px;font-size:13px;line-height:1.5;color:var(--muted);font-weight:400}.consent input{position:absolute;left:0;top:3px;width:auto;min-height:0;margin:0}.consent a{color:var(--teal-deep)}.hp{position:absolute;left:-9999px}
.ok{display:none;padding:18px;border-radius:10px;background:#E8F4EE;color:#125C3B;font-weight:600}
form.quote .btn{margin-top:4px}
/* scroll-bound figures (v2 mechanics) */
.scrub{margin:26px auto 0;max-width:1000px}.scrub:not(.two):not(.beam)>svg{max-width:720px;margin-inline:auto}.scrub>svg{width:100%;height:auto;display:block;overflow:visible}
.scrub.two{display:grid;grid-template-columns:430fr 1px 450fr;column-gap:40px;align-items:start}.scrub.two .rule{background:var(--line);align-self:stretch}.scrub.two figcaption{grid-column:1/-1}@media(max-width:860px){.scrub.two{grid-template-columns:1fr;row-gap:26px}.scrub.two .rule{height:1px}}
.scrub .lay{--t:clamp(0,calc(var(--p,1) * var(--n,1) - var(--i,0)),1);opacity:var(--t)}.scrub .lay.slide{transform:translateY(calc((1 - var(--t)) * 14px))}
.scrub .grow rect{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(var(--k,var(--t)))}.scrub .pop{transform-box:fill-box;transform-origin:center;transform:scale(var(--k,var(--t)))}.scrub .fill rect{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(var(--t))}
.scrub .ray{stroke-dasharray:var(--L);stroke-dashoffset:calc(var(--L) * (1 - var(--t)))}.scrub .wipe{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(calc(1 - var(--cut,0) * var(--t)))}.scrub .eyebrow-fig{font:600 10.5px var(--mono);fill:var(--muted);letter-spacing:.14em}
.scrub .lab{font:600 14px var(--sans);fill:var(--navy)}.scrub .val{font:700 14px var(--sans);fill:var(--ink)}.scrub .axis{font:500 12px var(--sans);fill:var(--muted)}@media(max-width:860px){.scrub .lab{font-size:17px}.scrub .val{font-size:17px}.scrub .axis{font-size:17px}.scrub .eyebrow-fig{font-size:13px}}
.figcta{margin:34px 0 0;text-align:center}
.scrub .figsrc{margin:6px auto 0;text-align:center;font:400 var(--t5)/var(--lh-t5) var(--sans);color:var(--muted);max-width:34em;text-wrap:balance}
.scrub>figcaption{margin:14px auto 0;text-align:center;font:500 15px/1.5 var(--sans);color:var(--muted);max-width:34em;min-height:2.6em}
.seq{margin:0}.seq .stage2{position:sticky;top:calc(56px + 12px)}.seq canvas{width:100%;height:auto;display:block;border-radius:14px;box-shadow:0 30px 60px -20px rgba(3,15,28,.7),0 0 0 1px rgba(255,255,255,.08) inset;background:#0B1520}
.seq figcaption{margin-top:12px;font:400 13px/1.5 var(--mono);color:var(--on-navy-muted);min-height:2.6em}.seq .span{height:150vh}
@media(prefers-reduced-motion:reduce){.scrub .lay{--t:1}}
/* ---- the "how sunlight becomes a lower bill" section -------------------------------------------
   Two movements: what the roof makes, then what that does to the reader's own bill. The craft budget
   goes on scale and material, not on effects: PRODUCT.md bans the AI-landing-page look by name. */
.beam{margin-top:44px;text-align:left}
.beam-top{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);gap:8px 56px;align-items:center}
.beam-fig{margin:0}
.beam-fig svg{width:100%;height:auto;display:block;overflow:visible}
.beam-fig figcaption{margin-top:10px;font:400 14px/1.55 var(--sans);color:var(--muted);max-width:30.1em}
.beam-k{font:600 var(--t5)/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0}
.beam-big{margin:14px 0 0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.beam-big b{font:700 var(--d1)/var(--lh-d1) var(--sans);letter-spacing:-.035em;color:var(--navy);
  font-variant-numeric:tabular-nums}
.beam-big span{font:500 18px/1.2 var(--sans);color:var(--muted)}
.beam-bars{width:100%;height:auto;display:block;overflow:visible;margin-top:20px}

/* the live bill. One control, two figures, and the statutory line at 16px. */
.beam-bill{margin-top:56px;padding-top:34px;border-top:1px solid var(--line);text-align:left}
.beam-ask{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap}
.beam-ask label{font:600 19px/1.3 var(--sans);color:var(--navy)}
.beam-ask output{font:700 34px/1 var(--sans);color:var(--navy);font-variant-numeric:tabular-nums;
  letter-spacing:-.02em}
#beam-slider{-webkit-appearance:none;appearance:none;width:100%;margin:22px 0 0;height:30px;
  background:transparent;cursor:pointer;display:block;border:0;padding:0;min-height:0;border-radius:0}
#beam-slider::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:var(--line)}
#beam-slider::-moz-range-track{height:6px;border-radius:3px;background:var(--line)}
#beam-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:30px;
  margin-top:-12px;border-radius:50%;background:var(--navy);border:3px solid #fff;
  box-shadow:0 2px 8px rgba(11,42,74,.35)}
#beam-slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--navy);
  border:3px solid #fff;box-shadow:0 2px 8px rgba(11,42,74,.35)}
#beam-slider:focus-visible{outline:3px solid var(--teal);outline-offset:4px;border-radius:6px}
.beam-track{position:relative;height:22px;border-radius:11px;background:var(--sky);overflow:hidden;
  margin-top:10px}
.beam-track .beam-left{position:absolute;inset:0 auto 0 0;display:block;background:var(--navy);
  border-radius:11px;transition:width .18s var(--ease)}
.beam-split{display:flex;justify-content:space-between;gap:24px;margin-top:14px}
.beam-split div{display:flex;flex-direction:column;gap:2px}
.beam-split .e{text-align:right}
.beam-split b{font:700 26px/1.1 var(--sans);color:var(--navy);font-variant-numeric:tabular-nums}
.beam-split .e b{color:var(--sun-deep)}
.beam-split span{font:400 15px/1.4 var(--sans);color:var(--muted)}
/* NRS 598.9819 requires the savings language at 12 point. 12pt = 16px; do not shrink this. */
.beam-gate{margin:26px 0 0;font:400 var(--t3)/var(--lh-t3) var(--sans);color:var(--ink);max-width:34em}
.beam-bill .btn{margin-top:24px}
.beam-cap{margin:30px auto 0;text-align:center;font:500 16px/1.55 var(--sans);color:var(--muted);
  max-width:34em;min-height:2.6em}
@media(max-width:860px){
  .beam-top{grid-template-columns:minmax(0,1fr);gap:26px}
  .beam-big b{font-size:clamp(42px,13vw,58px)}
  .beam-ask output{font-size:30px}
  .beam-split{flex-direction:column;gap:14px}.beam-split .e{text-align:left}
  .beam-bill{margin-top:40px}
}

/* ---- the persistent ask ------------------------------------------------------------------------
   34 of 41 pages carry no form, and the articles run to 16,000px, so without this the only ask on an
   organic landing page is a band at the very bottom. Hidden while a real form is on screen. */
.stickycta{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--navy-deep);
  border-top:1px solid rgba(255,255,255,.14);transform:translateY(100%);transition:transform .32s var(--ease);
  padding-bottom:env(safe-area-inset-bottom,0px)}
.stickycta.on{transform:translateY(0)}
.sc-in{max-width:var(--wrap);margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:14px}
.sc-t{margin:0;margin-right:auto;display:flex;flex-direction:column;line-height:1.25}
.sc-t b{font:600 15px var(--sans);color:#fff}
.sc-t span{font:400 13.5px var(--sans);color:var(--on-navy-muted)}
.stickycta .btn{padding:11px 18px;font-size:15px;white-space:nowrap}
.stickycta .sc-call{color:var(--on-navy);border-color:rgba(244,248,251,.5);background:transparent;
  display:inline-flex;align-items:center;gap:8px}
.stickycta .sc-call svg{width:17px;height:17px;flex:none}
.stickycta .sc-call:hover{background:rgba(244,248,251,.1)}
.stickycta .sc-go{background:var(--sun);border-color:var(--sun);color:#20160A}
.stickycta .sc-go:hover{background:var(--sun-deep);border-color:var(--sun-deep);color:#fff}
@media(max-width:700px){
  .sc-in{padding:10px 14px;gap:10px}
  .sc-t{display:none}                                   /* on a phone the two controls are the message */
  .stickycta .btn{flex:1 1 0;justify-content:center;padding:13px 10px;font-size:15px}
  .stickycta .sc-call span{display:inline}
}
@media print{.stickycta{display:none}}

/* inner pages (v2 bodies re-skinned) */
.page-hero{padding-block:72px 56px;background:linear-gradient(180deg,#fff 0%,#F7F3EC 100%);border-bottom:1px solid var(--line-soft)}.page-hero h1{color:var(--navy)}.page-hero h1::after{content:"";display:block;width:72px;height:4px;background:var(--teal);border-radius:2px;margin-top:22px}.page-hero .lead{margin-top:22px;color:#2A3B49}.page-hero .eyebrow{margin-bottom:14px}
.grid{display:grid;gap:22px}.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}@media(max-width:900px){.g3,.g4{grid-template-columns:1fr 1fr}}@media(max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}@media(max-width:900px){.split{grid-template-columns:1fr}}.split img{border-radius:14px;box-shadow:0 30px 60px -24px rgba(3,15,28,.5)}
ul.check{list-style:none;padding:0;margin:0 0 1em}ul.check li{padding-left:30px;position:relative;margin:.5em 0}ul.check li:before{content:"";position:absolute;left:0;top:.42em;width:16px;height:16px;border-radius:50%;background:var(--teal)}
.ruled{list-style:none;padding:0;margin:0;border-top:2px solid var(--navy)}.ruled li{display:grid;grid-template-columns:minmax(200px,.9fr) 2fr;gap:8px 36px;padding:20px 0;border-bottom:1px solid var(--line)}.ruled li h3{margin:0}.ruled li p{margin:0;color:var(--muted)}@media(max-width:700px){.ruled li{grid-template-columns:1fr}}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}@media(max-width:700px){.stats{grid-template-columns:1fr}}.stat{font-size:34px;font-weight:600;color:var(--navy);line-height:1;letter-spacing:-.02em}.stat+p{color:var(--muted);margin-top:8px}
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid var(--navy)}@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}@media(max-width:600px){.steps{grid-template-columns:1fr}}
.step{counter-increment:s;padding:24px 24px 24px 0;border-right:1px solid var(--line)}.step:last-child{border-right:0}.step+.step{padding-left:24px}.step:before{content:counter(s,decimal-leading-zero);display:block;font:500 13px var(--mono);color:var(--teal);margin-bottom:10px}.step p{margin:0;color:var(--muted);font-size:var(--t4)}
@media(max-width:900px){.step{border-right:0;border-bottom:1px solid var(--line);padding:22px 0}.step+.step{padding-left:0}}
.license{display:flex;flex-wrap:wrap;gap:14px 34px;align-items:center;justify-content:center;padding:22px;border:1px dashed var(--line);border-radius:14px;background:#fff}.license b{display:block;color:var(--navy);font:600 var(--t1)/var(--lh-t1) var(--sans)}.license span{font-size:var(--t5);line-height:var(--lh-t5);color:var(--muted)}
.faq details{border-bottom:1px solid var(--line);padding:14px 0}.faq summary{cursor:pointer;font-weight:600;font-size:18px;min-height:44px;display:flex;align-items:center}.faq p{margin:10px 0 0;color:var(--muted)}
table{width:100%;border-collapse:collapse}th,td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:left}th{font:600 var(--t5)/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.card.pad{padding:28px}.card h3{margin-bottom:8px}.card p{color:#2A3B49}
section.alt{background:var(--paper)}section.dark{background:var(--navy);color:var(--on-navy)}section.dark h2,section.dark h3{color:#fff}section.dark .lead,section.dark .muted{color:#DCE7EF}section.dark .eyebrow{color:var(--sky)}
.band-sun{background:var(--teal);color:#fff;padding:22px 0;font-weight:600;text-align:center}.band-sun a{color:#fff}
:focus-visible{outline:3px solid var(--teal-bright);outline-offset:2px}

/* ---------- reading pages ---------- */
.crumbs{background:var(--paper);border-bottom:1px solid var(--line)}
.crumbs .wrap{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding-block:11px;font:500 13px/1 var(--sans)}
.crumbs a{color:var(--teal);text-decoration:none}.crumbs a:hover{text-decoration:underline}
.crumbs span{color:var(--muted)}
.crumbs a:after,.crumbs span:not(:last-child):after{content:"/";color:var(--line);margin-left:10px}
.crumbs>.wrap>:last-child:after{content:none}

.art-head{padding:72px 0 34px;background:#fff}
.art-head h1{font:700 var(--d1)/var(--lh-d1) var(--sans);letter-spacing:-.022em;color:var(--navy);margin:0;max-width:13.7em;text-wrap:balance}
.art-head.wide h1{max-width:16.4em}
.art-head .deck{font:400 var(--t1)/1.5 var(--sans);color:var(--muted);max-width:33em;margin:20px 0 0}
.art-meta{display:flex;gap:26px;flex-wrap:wrap;align-items:center;margin-top:34px;padding:13px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font:500 13px/1 var(--sans);color:var(--muted);font-variant-numeric:tabular-nums}
.art-meta .byline{color:var(--ink);flex:1 1 100%}.art-meta .byline b{color:var(--navy);font-weight:600}@media(min-width:720px){.art-meta .byline{flex:0 1 auto}}.art-meta .stamp{color:var(--ink)}.art-meta .stamp b{color:var(--teal-deep);font-weight:600}
.art-lead{margin:0;padding:34px 0 0;background:#fff}
.art-lead img{display:block;width:min(var(--wrap),100% - 40px);margin-inline:auto;height:auto;border:1px solid var(--line)}

.art-grid{padding:54px 0 90px;background:#fff}
.art-grid>.wrap{display:grid;grid-template-columns:214px minmax(0,1fr);gap:0 62px;align-items:start}
.rail-in{position:sticky;top:96px;padding-right:10px}
.rk{font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.toc{display:flex;flex-direction:column;gap:11px;border-top:1px solid var(--line);padding-top:14px}
.toc a{font:500 var(--t5)/var(--lh-t5) var(--sans);color:var(--muted);text-decoration:none;transition:color .15s}
.toc a:hover,.toc a.on{color:var(--teal-deep)}
.rail-cta{margin-top:34px;padding-top:22px;border-top:1px solid var(--line)}
.rail-cta .tel{display:block;margin-top:12px;font:600 15px/1 var(--sans);color:var(--navy);text-decoration:none;font-variant-numeric:tabular-nums}
.btn.sm{padding:11px 18px;font-size:14px}
.art-cta .btn.ghost{color:var(--on-navy);border-color:rgba(244,248,251,.55)}
.art-cta .btn.ghost:hover{background:rgba(244,248,251,.1)}

.prose{max-width:34em;font:400 var(--t2)/var(--lh-t2) var(--sans);color:var(--ink)}
.prose>p{margin:0 0 1.5em}
@media(max-width:420px){.prose ul>li,.prose ol>li{padding-left:22px}}
.prose>p:first-child{font-size:var(--t1);line-height:1.5;color:var(--navy)}
.prose h2{font:700 var(--d3)/var(--lh-d3) var(--sans);letter-spacing:-.015em;color:var(--navy);margin:2.1em 0 .55em;position:relative;padding-top:20px;text-wrap:balance}
.prose h2:before{content:"";position:absolute;top:0;left:0;width:38px;height:2px;background:var(--teal)}
.prose h3{font:600 var(--t1)/var(--lh-t1) var(--sans);color:var(--navy);margin:1.9em 0 .5em}
.prose a{color:var(--teal-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--teal)}
.prose strong{font-weight:600;color:var(--navy)}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:0;list-style:none}
.prose ul>li,.prose ol>li{position:relative;padding-left:30px;margin-bottom:.55em}
.prose ul>li:before{content:"";position:absolute;left:4px;top:.72em;width:11px;height:1.5px;background:var(--teal)}
.prose ol{counter-reset:s}
.prose ol>li{counter-increment:s}
.prose ol>li:before{content:counter(s);position:absolute;left:0;top:.16em;font:600 12.5px/1 var(--mono);color:var(--teal-deep);font-variant-numeric:tabular-nums}
.prose blockquote{margin:1.7em 0;padding:24px 28px;background:var(--paper);border:1px solid var(--line)}
.prose blockquote p{margin:0;font-size:var(--t2);line-height:var(--lh-t2);color:var(--navy)}
.prose code{font:500 .87em/1 var(--mono);background:var(--paper);padding:2px 5px;border:1px solid var(--line)}
.tw{overflow-x:auto;margin:1.7em 0}
.tw table{width:100%;border-collapse:collapse;font-size:var(--t4);line-height:var(--lh-t5);font-variant-numeric:tabular-nums}
.tw th{text-align:left;font:600 var(--t5)/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:0 18px 10px 0;border-bottom:1.5px solid var(--navy);white-space:nowrap}
.tw td{padding:12px 18px 12px 0;border-bottom:1px solid var(--line-soft);vertical-align:top;color:var(--ink)}
.tw tr:last-child td{border-bottom:1px solid var(--line)}

.fig{margin:2.1em 0;border:1px solid var(--line);background:var(--ground)}
.fig svg{display:block;width:100%;height:auto}
.fig figcaption{font:400 var(--t5)/var(--lh-t5) var(--sans);max-width:40em;color:var(--muted);padding:13px 18px;border-top:1px solid var(--line);background:#fff}
.fig.missing{border-style:dashed;background:var(--paper)}
.fig.missing .ph{padding:46px 18px;text-align:center;font:500 14px/1.4 var(--sans);color:var(--muted)}

.faq{margin-top:3em}
.faq h2{font:700 clamp(25px,2.7vw,31px)/1.2 var(--sans);color:var(--navy);margin:0 0 .7em;padding-top:20px;position:relative}
.faq h2:before{content:"";position:absolute;top:0;left:0;width:38px;height:2px;background:var(--teal)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:17px 34px 17px 0;font:600 17px/1.42 var(--sans);color:var(--navy);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;margin-top:-6px;border-right:1.6px solid var(--teal);border-bottom:1.6px solid var(--teal);transform:rotate(45deg) translateY(-2px);transition:transform .2s var(--ease)}
.faq details[open] summary:after{transform:rotate(225deg) translateY(-2px)}
.faq details p{margin:0 0 20px;font-size:17px;line-height:1.68;color:var(--ink);max-width:34em}

.sources{margin-top:1.6em}
.sources h2{font:700 var(--d4)/var(--lh-d4) var(--sans);color:var(--navy);margin:0 0 .8em;padding-top:20px;position:relative}
.sources h2:before{content:"";position:absolute;top:0;left:0;width:38px;height:2px;background:var(--teal)}
.sources ol{counter-reset:src;list-style:none;padding:0;margin:0}
.sources li{counter-increment:src;position:relative;padding:11px 0 11px 34px;border-bottom:1px solid var(--line-soft);font:400 var(--t4)/var(--lh-t4) var(--sans)}
.sources li:before{content:counter(src);position:absolute;left:0;top:13px;font:500 12px/1 var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.sources a{color:var(--teal-deep)}
.ck{font:400 var(--t5)/1 var(--mono);color:var(--muted);white-space:nowrap}

.gates{margin-top:2.4em;border-top:1px solid var(--line)}
.gate{padding:16px 0;border-bottom:1px solid var(--line-soft);display:grid;grid-template-columns:104px 1fr;gap:18px}
.gate b{font:600 11px/1.5 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.gate p{margin:0;font-size:16px;line-height:1.55;color:var(--ink)}  /* 16px = 12pt, NRS 598.9819 minimum */
.recheck{margin-top:22px;display:block;max-width:40em}

.art-cta{background:var(--navy);color:var(--on-navy);padding-block:72px}
.art-cta .eyebrow{color:var(--teal-bright)}
.cta-in{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:end}
.art-cta h2{font:700 var(--d2)/var(--lh-d2) var(--sans);letter-spacing:-.02em;margin:0;color:#fff;max-width:12.3em;text-wrap:balance}
.art-cta p:not(.eyebrow){margin:16px 0 0;color:var(--on-navy-muted);max-width:33em;font-size:var(--t3);line-height:var(--lh-t3)}
.cta-do{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.art-cta .cite{color:var(--on-navy-muted);margin-top:6px}

.related{background:var(--paper);padding-block:var(--sec)}
.related h2{font:600 var(--t5)/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.rels{display:flex;flex-direction:column}
.rel{display:grid;grid-template-columns:200px 1fr;gap:26px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:padding-left .18s var(--ease)}
.rel:first-child{border-top:1px solid var(--line)}
.rel:hover{padding-left:10px}
.rp{font:600 11px/1.5 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--teal-deep)}
.rel b{font:600 var(--t1)/var(--lh-t1) var(--sans);color:var(--navy);display:block;margin-bottom:6px}
.rel .rd{font-size:15.5px;line-height:1.55;color:var(--muted);display:block;max-width:34em}
.rel:hover b{color:var(--teal-deep)}

.listing{padding:44px 0 90px;background:#fff}
.lsec{margin-bottom:64px}
.lhead h2{font:700 27px/1.2 var(--sans);color:var(--navy);margin:0}
.lhead h2 a{color:inherit;text-decoration:none}.lhead h2 a:hover{color:var(--teal-deep)}
.lhead p{margin:8px 0 22px;color:var(--muted);max-width:34em;font-size:16.5px}
.lrows{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.lrow{display:grid;grid-template-columns:1fr 152px;gap:8px 26px;padding:22px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:padding-left .18s var(--ease)}
.lrow:hover{padding-left:10px;background:linear-gradient(90deg,rgba(0,120,120,.04),transparent 60%)}
.lrow b{font:600 var(--t1)/var(--lh-t1) var(--sans);color:var(--navy);grid-column:1}
.lrow span{font-size:15.5px;line-height:1.55;color:var(--muted);grid-column:1;max-width:34em}
.lrow .ck{grid-column:2;grid-row:1/3;text-align:right;align-self:start;font-style:normal}
.lrow:hover b{color:var(--teal-deep)}


/* every row reserves the image column so the titles align down the list whether or not a given
   article has a lead scene. A ragged left edge is the thing that makes a listing look assembled
   rather than designed. */

.totop{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--navy);display:grid;place-items:center;cursor:pointer;z-index:40;
  box-shadow:0 2px 10px rgba(11,42,74,.10);opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s}
.totop.on{opacity:1;visibility:visible;transform:none}
.totop:hover{border-color:var(--teal);color:var(--teal-deep)}
.totop:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.totop svg{width:19px;height:19px}
@media(max-width:620px){.totop{right:14px;bottom:14px;width:42px;height:42px}}
@media print{.totop{display:none}}

.tools{margin:0 0 42px}
.toolcard{display:block;padding:26px 28px;border:1px solid var(--teal);background:rgba(0,120,120,.04);text-decoration:none;transition:background .18s var(--ease)}
.toolcard:hover{background:rgba(0,120,120,.08)}
.toolcard .tk{font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--teal-deep);display:block;margin-bottom:10px}
.toolcard b{font:700 clamp(20px,2.4vw,26px)/1.25 var(--sans);color:var(--navy);display:block;max-width:17.8em}
.toolcard .td{display:block;margin-top:9px;font-size:15.5px;line-height:1.55;color:var(--muted);max-width:34em}
.toolcard .tgo{display:inline-block;margin-top:14px;font:600 14.5px/1 var(--sans);color:var(--teal-deep)}
.toolcard:hover .tgo{text-decoration:underline}
.lrows .lrow{grid-template-columns:150px 1fr 152px;gap:8px 22px}
.lrows .lrow b,.lrows .lrow span{grid-column:2}
.lrows .lrow .ck{grid-column:3;grid-row:1/3}
.lrow .lthumb{grid-column:1;grid-row:1/4;width:150px;height:84px;object-fit:cover;border:1px solid var(--line);align-self:start}
@media(max-width:620px){.lrows .lrow{grid-template-columns:1fr}.lrow .lthumb{grid-column:1;grid-row:auto;width:100%;height:150px;margin-bottom:10px}.lrows .lrow b,.lrows .lrow span,.lrows .lrow .ck{grid-column:1;grid-row:auto}}
@media(max-width:1080px){
  .art-grid>.wrap{grid-template-columns:minmax(0,1fr);gap:0}
  .rail-in{position:static;padding:0 0 26px;margin-bottom:30px;border-bottom:1px solid var(--line)}
  .toc{flex-flow:row wrap;gap:8px 18px}
  .rail-cta{display:none}
  .prose{max-width:none}
  .cta-in{grid-template-columns:1fr;gap:30px;align-items:start}
}
@media(max-width:620px){
  .art-head{padding-top:44px}
  .prose{font-size:17.5px}.prose>p:first-child{font-size:19px}
  .rel,.lrow{grid-template-columns:1fr}
  .lrow .ck{grid-column:1;grid-row:auto;text-align:left}
  .gate{grid-template-columns:1fr;gap:6px}
}

/* ---------- the closing band, with the real quote form in it ----------
   One form on this site, one place it is defined (build.py form()), one thing that handles its
   failures (assets/site.js). This only lays that card out on the navy band.
   The band paints its own paragraphs in --on-navy-muted, which is a light grey chosen for navy and
   would be unreadable on the white card, so the form's own text is restated here rather than left to
   whichever rule happens to come last. */
.art-cta.has-form .cta-in{grid-template-columns:minmax(0,1fr) minmax(0,470px);gap:52px;align-items:center}
.art-cta.has-form .cta-do{flex-direction:row;flex-wrap:wrap;align-items:center;gap:14px;margin-top:30px}
.art-cta.has-form .cta-do .cite{flex:1 0 100%;margin-top:4px;max-width:32.8em}
.art-cta .cta-form form.quote{box-shadow:0 26px 54px -26px rgba(0,0,0,.55)}
.art-cta .cta-form p{margin:0;max-width:none;font-size:15px;line-height:1.6;color:var(--ink)}
.art-cta .cta-form form.quote .lead{margin:0 0 18px;font-size:15px;color:var(--muted)}
.art-cta .cta-form .err{margin:0 0 12px;font-size:14.5px;color:#8E2A20}
.art-cta .cta-form .ok{color:#125C3B}
/* .cta-in collapses to one column at 1080px, but .art-cta.has-form .cta-in outranks it, so the
   stacked case has to be spelled out or the form would stay in a 470px column on a phone. */
@media(max-width:1080px){
  .art-cta.has-form .cta-in{grid-template-columns:1fr;gap:34px}
}
@media(max-width:620px){
  .art-cta .cta-form form.quote{padding:20px}
  .art-cta.has-form .cta-do .btn{width:100%;justify-content:center}
}

/* ---------- demand charge calculator ---------- */
.calc{padding:44px 0 90px;background:#fff}
.calc-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:52px;align-items:start}
.calc-intro{font:400 18.5px/1.7 var(--sans);color:var(--ink);max-width:34em}
.calc-intro strong{color:var(--navy);font-weight:600}
.loads{margin-top:30px;border-top:1px solid var(--line)}
.load{display:grid;grid-template-columns:26px 1fr 96px;gap:0 16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line-soft)}
.load input[type=checkbox]{width:18px;height:18px;accent-color:var(--teal);cursor:pointer}
.load .lb{grid-column:2}
.load .lb b{display:block;font:600 var(--t3)/1.3 var(--sans);color:var(--navy)}
.load .lb span{display:block;font-size:13.5px;line-height:1.45;color:var(--muted);margin-top:2px}
.load .kw{grid-column:3;display:flex;align-items:center;gap:6px;justify-content:flex-end}
.load .kw input{width:62px;padding:7px 8px;border:1px solid var(--line);font:500 15px/1 var(--mono);text-align:right;color:var(--ink);background:#fff;font-variant-numeric:tabular-nums}
.load .kw input:focus{outline:2px solid var(--teal);outline-offset:1px}
.load .kw i{font-style:normal;font:500 var(--t5)/1 var(--mono);color:var(--muted)}
.load.off .lb b{color:var(--muted)}
.load.off .lb span{color:var(--muted);opacity:.85}

.readout{position:sticky;top:96px;border:1px solid var(--line);background:var(--ground)}
.readout .rhead{padding:16px 22px;border-bottom:1px solid var(--line);background:#fff}
.readout .rhead b{font:600 11px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.big{padding:24px 22px 6px}
.big .n{font:500 clamp(34px,5vw,46px)/1 var(--mono);color:var(--navy);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.big .u{font:500 14px/1 var(--sans);color:var(--muted);margin-top:8px}
.rrow{display:flex;justify-content:space-between;align-items:baseline;padding:11px 22px;border-top:1px solid var(--line-soft);font-size:15px}
.rrow span{color:var(--muted)}
.rrow b{font:500 17px/1 var(--mono);color:var(--navy);font-variant-numeric:tabular-nums}
.rrow.hero b{color:#8F5D12;font-size:var(--t1)}   /* was --sun-deep at 3.72:1 on the one number that matters */
.bat{margin-top:0;padding:16px 22px;background:rgba(31,138,91,.06);border-top:1px solid var(--line)}
.bat .bh{font:600 13px/1.4 var(--sans);color:var(--ok);margin-bottom:8px}
.bat .brow{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;color:var(--muted)}
.bat .brow b{font:500 17px/1 var(--mono);color:var(--ok);font-variant-numeric:tabular-nums}
.bat p{margin:9px 0 0;font-size:var(--t5);line-height:var(--lh-t5);color:var(--muted)}
.rfoot{padding:14px 22px;border-top:1px solid var(--line);font:400 var(--t5)/var(--lh-t5) var(--mono);color:var(--muted)}

.calc-fig{margin:34px 0 0;border:1px solid var(--line);background:var(--ground)}
.calc-fig svg{display:block;width:100%;height:auto}
.calc-fig figcaption{font:400 var(--t5)/var(--lh-t5) var(--sans);color:var(--muted);padding:12px 18px;border-top:1px solid var(--line);background:#fff}

.calc-note{margin-top:38px;padding:22px 26px;background:var(--paper);border:1px solid var(--line);max-width:34em}
.calc-note h3{font:600 var(--t3)/1.3 var(--sans);color:var(--navy);margin:0 0 8px}
.calc-note p{margin:0 0 9px;font-size:15.5px;line-height:1.62;color:var(--ink)}
.calc-note p:last-child{margin-bottom:0}
.calc-gate{margin-top:26px;font-size:16px;line-height:1.55;color:var(--ink);max-width:34em}  /* 16px = 12pt, NRS 598.9819 */
@media(max-width:980px){
  .calc-grid{grid-template-columns:1fr;gap:30px}
  .readout{position:static}
}