/* ===== ev-v7-shell.css ===== */
/* =====================================================================
   EMPTY VAPES v7 - THE STYLESHEET. There is exactly one.
   Every route loads assets/css/ev-v7.css, built from this file plus
   ev-v7-pages.css (rules scoped to a single route). No page carries an
   inline <style> block. Editing a rule here changes it everywhere, which
   is the whole point: on 2026-08-23 the site ran four stylesheets and 126
   inline blocks, and a fix to .stat was silently beaten by a .stats .stat
   rule in another file. That cannot happen with one file.
   Cascade is top to bottom. Later wins. Nothing else can override this.
   Banned by director ruling: radial spots, accent borders (coloured stripe
   on a card edge), red/green as text colour, zebra fill, gradient scrims,
   ink as a large background surface.
   ===================================================================== */

:root{
--ev-blue:#2457ff;
--ev-orange:#ff4f12;
--ev-ink:#11110f;
--ev-paper:#f3f5f8;
--ev-white:#fff;
--ev-field:#dbe3ff;
--ev-steel:#647185;
--ev-green:#38d47a;
--ev-amber:#e9a914;
--ev-red:#d94040;
--ev-focus:#8ca5ff;
--ev-line:rgba(17,17,15,.16);
--ev-line-light:rgba(255,255,255,.28);
--ev-sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
--ev-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
--ev-content:1680px;
--ev-gutter:clamp(22px,3.2vw,78px);   /* bible s10: "Gutter 22-78 px, fluid via clamp" */
--ev-radius:0;
--ev-pill:999px;
--ev-ease-sweep:cubic-bezier(.2,0,0,1);
--ev-ease-spring:cubic-bezier(.34,1.4,.5,1);
--ev-head:74px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ev-paper);color:var(--ev-ink);font:18px/1.6 var(--ev-sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}

/* v7 display type is scoped. Applied globally it rewrote every heading on
   127 content pages that were never designed for it. */
.hero h1,.sec h2,.sec h3,section.band h2,.feature h2,.contact h2,.range h3,.panel h3,.disp{
  font-family:var(--ev-sans);font-weight:700;letter-spacing:-.055em;
  text-transform:uppercase;line-height:.88}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit}
:focus-visible{outline:3px solid var(--ev-focus);outline-offset:3px}

/* ================= HEADER ==========================================
   Transparent at the very top. Opaque once the page scrolls, like
   colossal.com. Colour inversion only where it measures legible.     */
.hd{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--ev-head);
  display:flex;align-items:center;gap:var(--ev-gutter);padding:0 var(--ev-frame);
  background:transparent;border-bottom:1px solid var(--ev-line-light);
  color:#fff;mix-blend-mode:normal;
  transition:height .38s var(--ev-ease-sweep),background .38s var(--ev-ease-sweep),
             border-color .38s var(--ev-ease-sweep)}
/* difference blend measured per surface:
     over white #ffffff -> #000000  21.00:1  AAA
     over paper #f3f5f8 -> #0c0a07  18.10:1  AAA
     (ink surfaces retired 2026-08-23: dark bands are brand blue)
     over blue  #2457ff -> #dba800   2.48:1  FAIL -> never blend on blue */
.hd.is-blend{mix-blend-mode:difference}
.hd.is-plain{mix-blend-mode:normal;color:#fff}
.hd.is-plain .hd-nav a{opacity:.82}
.hd.is-stuck{mix-blend-mode:normal!important;color:#fff;height:60px;
  background:rgba(36,87,255,.92);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom-color:rgba(255,255,255,.16)}
.hd.is-stuck .hd-nav a{opacity:.78}
.hd.is-stuck .hd-nav a:hover{opacity:1}
@supports not (backdrop-filter:blur(1px)){.hd.is-stuck{background:var(--ev-blue)}}
.hd a,.hd button{color:#fff}
.hd.is-blend a,.hd.is-blend button{color:#fff}
.hd-n{font:600 13px var(--ev-mono);letter-spacing:.14em;opacity:.55;flex:0 0 auto}
.hd-logo{font-weight:700;font-size:19px;letter-spacing:-.045em;text-transform:uppercase;flex:0 0 auto}
.hd-nav{display:flex;align-items:center;gap:30px;margin-left:auto;margin-right:18px;flex:0 0 auto}
.hd-nav a{font:600 14px var(--ev-mono);letter-spacing:.12em;text-transform:uppercase;
  opacity:.62;transition:opacity .28s var(--ev-ease-sweep);position:relative;padding:6px 0}
.hd-nav a:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .38s var(--ev-ease-sweep)}
.hd-nav a:hover{opacity:1}
.hd-nav a:hover:after{transform:scaleX(1)}
/* header CTA. Not a table of contents - the one commercial action. */
.hd-cta{position:relative;isolation:isolate;overflow:hidden;flex:0 0 auto;
  display:inline-flex;align-items:center;gap:14px;
  font:700 19px var(--ev-sans);letter-spacing:-.02em;
  border:2px solid currentColor;border-radius:var(--ev-pill);padding:10px 20px;
  background:transparent;cursor:pointer;
  transition:border-color .4s,transform .4s var(--ev-ease-sweep),color .3s .08s}
.hd-cta:before{content:"";position:absolute;inset:0;background:var(--ev-orange);
  transform:translateX(-101%);transition:transform .45s var(--ev-ease-sweep);z-index:-1}
.hd-cta:hover{transform:translateY(-1px);color:#fff;border-color:var(--ev-orange)}
.hd-cta:hover:before{transform:translateX(0)}
.hd-cta .lab,.hd-cta .pl{position:relative;z-index:2;transition:color .3s .08s}
.hd-cta:hover .lab,.hd-cta:hover .pl{color:#fff}
.hd-cta .pl{font-size:18px;line-height:1;
  transition:transform .45s var(--ev-ease-spring),color .3s .08s}
.hd-cta:hover .pl{transform:rotate(90deg)}
@media(max-width:560px){.hd-cta .lab{display:none}.hd-cta{padding:10px 14px;gap:0}}
@media(max-width:900px){.hd-nav{display:none}}


/* ================= FULL WIDTH SHELL ================================*/
.sec,.section{width:100%;padding:clamp(104px,10vw,190px) var(--ev-frame);position:relative;margin:0}
.sec--blue,.section.blue{background:var(--ev-blue);color:#fff}
.sec--ink,.section.dark{background:var(--ev-blue);color:#fff}
.sec--white,.section.white{background:#fff;color:var(--ev-ink)}
.sec--paper{background:var(--ev-paper);color:var(--ev-ink)}
.ev-measure{max-width:820px}
.main{margin-left:0}
.rail{display:none}

/* section row: number + hatch + label */
.row,.ev-row{display:flex;align-items:center;gap:18px;margin-bottom:34px;
  font:600 13px var(--ev-mono);letter-spacing:.14em;text-transform:uppercase}
.row .num,.ev-row .num{opacity:.85;white-space:nowrap}
.row .hatch,.ev-hatch{flex:1;height:10px;
  background:repeating-linear-gradient(115deg,currentColor 0 1px,transparent 1px 7px);opacity:.4}
.row .lab,.ev-eye{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;opacity:.85;color:inherit}
.row .lab:before,.ev-eye:before{content:"";width:8px;height:8px;background:var(--ev-orange);flex:0 0 8px}
.ev-tag{border:1px solid currentColor;border-radius:var(--ev-pill);padding:4px 12px;
  white-space:nowrap;opacity:.75}
.plus{font:300 30px/1 var(--ev-sans);opacity:.5;display:block;margin:0 0 10px}
.rule{height:1px;width:100%;background:currentColor;opacity:.2;margin:44px 0}

/* eyebrow / labels */
.eyebrow,.token-label{font:600 13px var(--ev-mono);letter-spacing:.13em;text-transform:uppercase;
  opacity:.7;display:block;margin-bottom:14px}

/* heads */
.head{display:grid;grid-template-columns:.3fr 1fr;gap:clamp(24px,3.5vw,60px);margin-bottom:clamp(56px,5.5vw,84px)}
.head h2{font-size:clamp(38px,5.6vw,104px);letter-spacing:-.06em;max-width:20ch}
.head p{font-size:clamp(17px,1.3vw,21px);opacity:.8;max-width:58ch;margin-top:20px}
@media(max-width:900px){.head{grid-template-columns:1fr}}
.big{font-size:clamp(38px,6.4vw,118px);letter-spacing:-.06em;max-width:20ch}
.lede{font-size:clamp(17px,1.3vw,21px);opacity:.86;max-width:56ch}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,110px);align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr}}

/* ---- panels / cards: hairline boxes, no fill, no stripe ---- */
.grid2,.grid3,.grid4{display:grid;gap:0;border-top:1px solid var(--ev-line);border-left:1px solid var(--ev-line)}
.grid2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.grid3{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.grid4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.panel,.card{background:transparent;padding:clamp(24px,2.8vw,44px);
  border:0;border-right:1px solid var(--ev-line);border-bottom:1px solid var(--ev-line);
  transition:background .35s var(--ev-ease-sweep)}
.panel:hover,.card:hover{background:rgba(17,17,15,.035)}
.dark .grid2,.dark .grid3,.dark .grid4,.blue .grid2,.blue .grid3,.blue .grid4,
.sec--ink .grid2,.sec--ink .grid3,.sec--blue .grid2,.sec--blue .grid3{
  border-top-color:var(--ev-line-light);border-left-color:var(--ev-line-light)}
.dark .panel,.blue .panel,.dark .card,.blue .card,
.sec--ink .panel,.sec--blue .panel{border-right-color:var(--ev-line-light);
  border-bottom-color:var(--ev-line-light);background:transparent;color:#fff}
.dark .panel:hover,.blue .panel:hover,.sec--ink .panel:hover,.sec--blue .panel:hover{
  background:rgba(255,255,255,.06)}
.panel h3,.card h3{font-size:clamp(24px,2.2vw,38px);margin:16px 0 12px;letter-spacing:-.045em}
.panel p,.card p{opacity:.78}

/* ---- pill CTA. ONE definition for the whole site. -----------------------
   No per-surface overrides: the border is currentColor and the label is
   inherit, so a pill on the blue hero is white and a pill on paper is ink
   without a single context rule. Every ".page-hero .btn" style override was
   deleted on 2026-08-23 - they were the reason a fix in one place did not
   show up in another.
   The sweep is inset:-2px, not 0: an absolutely positioned child is laid out
   against the PADDING box, so at inset:0 the 2px border ring stayed white
   while the inside went orange. That white ring was the reported bug.       */
.btn,.ev-btn{position:relative;isolation:isolate;overflow:hidden;border:2px solid currentColor;
  justify-self:start;align-self:start;
  border-radius:var(--ev-pill);display:inline-flex;align-items:center;
  justify-content:space-between;gap:34px;min-width:225px;padding:17px 25px;cursor:pointer;
  background:transparent;appearance:none;font-family:var(--ev-sans);font-weight:700;
  font-size:19px;color:inherit;text-align:center;
  transition:border-color .4s,transform .4s var(--ev-ease-sweep),color .3s}
.btn:before,.ev-btn:before{content:"";position:absolute;inset:-2px;background:var(--ev-orange);
  transform:translateX(-101%);transition:transform .45s var(--ev-ease-sweep);z-index:-1}
.btn:hover,.ev-btn:hover{transform:translateY(-2px);border-color:var(--ev-orange);color:#fff}
.btn:hover:before,.ev-btn:hover:before{transform:translateX(0)}
/* white on orange is 3.29:1, AA-large only, so every label is 19px/700 */
.btn:hover *,.ev-btn:hover *{color:#fff}
.btn .lab,.btn .pl,.ev-btn .ev-lab,.ev-btn .ev-pl{position:relative;transition:color .3s .08s}
.btn:not(:has(.lab)){justify-content:center;gap:0}
.btn .pl,.ev-btn .ev-pl{font-size:19px;line-height:1;
  transition:transform .45s var(--ev-ease-spring),color .3s .08s}
.btn:hover .pl,.ev-btn:hover .ev-pl{transform:rotate(90deg)}
/* two filled variants. Both sweep to orange on hover, like the outline pill. */
.btn--solid{border-color:var(--ev-blue);background:var(--ev-blue);color:#fff}
.btn-ghost,.btn-solid{background:#fff;color:var(--ev-ink);border-color:#fff}
.btn--solid:hover,.btn-ghost:hover,.btn-solid:hover{color:#fff;border-color:var(--ev-orange)}
.btn-arrow::after{content:"\2192";transition:transform .35s var(--ev-ease-sweep)}
.btn-arrow:hover::after{transform:translateX(3px)}
.btn:focus-visible,.ev-btn:focus-visible{outline:3px solid var(--ev-focus);outline-offset:3px}
.btn.small{min-width:0;padding:12px 18px;font-size:17px;gap:16px}
.btn.primary{background:var(--ev-blue);border-color:var(--ev-blue);color:#fff}
.btn.outline,.btn.ghost{background:transparent}
/* dimensioned technical drawing panel, beside a datasheet */
.draw{display:flex;flex-direction:column;align-items:center;gap:18px;
  border:1px solid var(--ev-line);background:#fff;padding:clamp(22px,2.4vw,40px);color:var(--ev-blue)}
.draw svg{max-width:100%;height:auto}

/* ---- link list rows: sweep from below ---- */
.range{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  border-top:1px solid var(--ev-line);border-left:1px solid var(--ev-line)}
.range a{display:flex;flex-direction:column;padding:clamp(24px,2.6vw,40px);position:relative;isolation:isolate;overflow:hidden;
  border-right:1px solid var(--ev-line);border-bottom:1px solid var(--ev-line);
  transition:color .38s var(--ev-ease-sweep)}
.range a:before{content:"";position:absolute;inset:0;background:var(--ev-blue);
  transform:translateY(101%);transition:transform .45s var(--ev-ease-sweep);z-index:-1}
.range a:hover:before{transform:translateY(0)}
.range a:hover{color:#fff}
.range a>*{position:relative;z-index:1}
.range h3{font-size:clamp(23px,2.1vw,34px);margin:16px 0 12px;letter-spacing:-.045em;
  min-height:2.05em;display:flex;align-items:flex-end}
.range p{margin:0}
.range .spec{font:600 13px var(--ev-mono);letter-spacing:.14em;text-transform:uppercase;opacity:.62}
.range .go{font:700 22px/1 var(--ev-sans);margin-top:auto;padding-top:26px;display:inline-block;
  transition:transform .45s var(--ev-ease-spring)}
.range a:hover .go{transform:rotate(90deg)}

/* ---- facts ---- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));border-top:1px solid currentColor;gap:0;margin-top:30px;text-align:center}
.facts div{padding:clamp(28px,3vw,46px) clamp(16px,1.6vw,26px);border-bottom:1px solid currentColor;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center}
.facts b{display:block;font-size:clamp(36px,4.4vw,74px);font-weight:700;letter-spacing:-.06em;line-height:.94;text-align:center;transform-origin:50% 100%;backface-visibility:hidden;font-variant-numeric:tabular-nums}
.facts span{font:600 13px var(--ev-mono);letter-spacing:.13em;text-transform:uppercase;opacity:.62;display:block;margin-top:14px;text-align:center;max-width:22ch}

/* ---- tables: hairlines only. No zebra, no red, no green. ---- */
table{width:100%;border-collapse:collapse;font-size:17px;background:transparent;color:inherit}
thead th{background:transparent;color:inherit;text-align:left;
  font:600 13px var(--ev-mono);letter-spacing:.13em;text-transform:uppercase;
  padding:0 18px 14px 0;border:0;border-bottom:1px solid currentColor;vertical-align:bottom}
tbody td{background:transparent;color:inherit;padding:20px 18px 20px 0;border:0;
  border-bottom:1px solid var(--ev-line);vertical-align:top}
.dark tbody td,.blue tbody td,.sec--ink tbody td,.sec--blue tbody td{border-bottom-color:var(--ev-line-light)}
/* The closing rule of a table. Was `tbody tr:last-child td` with currentColor, which produced the
   stray half-width dark line under the last row: a row's LABEL is a <th> and only its VALUE is a
   <td>, so the rule painted from the value column rightward and stopped. currentColor also made it
   opaque ink against every other row's 16% --ev-line. Measured 2026-08-23 on 510-cartridges:
   th border rgba(17,17,15,0.16) starting at x=459, td border rgb(17,17,15) starting at x=819. */
tbody tr:last-child th,tbody tr:last-child td{border-bottom:1px solid var(--ev-ink)}
.dark tbody tr:last-child th,.dark tbody tr:last-child td,
.blue tbody tr:last-child th,.blue tbody tr:last-child td,
.sec--ink tbody tr:last-child th,.sec--ink tbody tr:last-child td,
.sec--blue tbody tr:last-child th,.sec--blue tbody tr:last-child td{border-bottom-color:#fff}
tbody td:first-child{width:22%;font-weight:700}
tbody td:last-child{padding-right:0}
.no{font:600 13px var(--ev-mono);letter-spacing:.14em;text-transform:uppercase;
  display:inline-flex;align-items:flex-start;gap:9px;color:inherit}
.no:before{content:"";width:8px;height:8px;background:var(--ev-orange);flex:0 0 8px;margin-top:4px}
.yes{font-weight:700;color:inherit}
@media(max-width:680px){
  thead{display:none}
  tbody tr{display:block;border-bottom:1px solid currentColor;padding:14px 0}
  tbody td{display:block;width:auto!important;padding:6px 0;border:0}
}

/* ---- checklist ---- */
.checklist{list-style:none;padding:0;margin:0;background:transparent}
.checklist li{padding:16px 0 16px 30px;border-top:1px solid var(--ev-line);position:relative}
.checklist li:before{content:"";position:absolute;left:0;top:23px;width:8px;height:8px;
  background:var(--ev-orange)}

/* ---- code ---- */
code{font-family:var(--ev-mono);font-size:.9em;background:rgba(17,17,15,.06);padding:2px 5px}
pre.code,.code{background:var(--ev-blue);color:#eaf0ff;padding:26px;overflow:auto;
  font:13px/1.7 var(--ev-mono);white-space:pre}

/* ---- footer ---- */
.ft,.footer{background:var(--ev-blue);color:#fff;padding:clamp(54px,5vw,90px) var(--ev-frame) 34px;
  width:100%;display:block}
.ft-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:34px;
  padding-bottom:44px;border-bottom:1px solid var(--ev-line-light)}
.ft h4{font:600 13px var(--ev-mono);letter-spacing:.16em;text-transform:uppercase;opacity:.5;margin:0 0 16px}
.ft li{list-style:none;margin-bottom:9px}
/* The footer Scope note. Was an inline style on a bare <p>, emitted 126 times by
   reshell_site.py - one per route. Same two declarations, no margin and no measure,
   so the render is identical; it is a class only so a CSS gate can see it. */
.ft-scope{font-size:15px;opacity:.75}
.ft-top a{font-size:16px;opacity:.72;transition:opacity .25s,padding-left .3s var(--ev-ease-sweep);
  display:inline-block;font-size:15px}
.ft-top a:hover{opacity:1;padding-left:7px}
.ft-btm{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;padding-top:26px;
  font:600 13px var(--ev-mono);letter-spacing:.13em;text-transform:uppercase;opacity:.5}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{transition:none!important;animation:none!important}
  .btn:hover,.ev-btn:hover,.hd-cta:hover{transform:none}
}

/* ---- product cutout inside a hairline cell ---- */
.ev-shot{margin:0 0 20px;aspect-ratio:1;overflow:hidden;display:grid;place-items:center;
  background:rgba(17,17,15,.03)}
.ev-shot img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;
  transition:transform .5s var(--ev-ease-sweep)}
.range a:hover .ev-shot img,.panel:hover .ev-shot img{transform:scale(1.05)}
.sec--ink .ev-shot,.sec--blue .ev-shot{background:rgba(255,255,255,.06)}
.sec--ink .ev-shot img,.sec--blue .ev-shot img{mix-blend-mode:normal}
.range a:hover .ev-shot{background:#fff}


/* ---- full-bleed hero background ------------------------------------
   assets/img/hero-bg.webp is Empty Vapes' own render: EV-branded, empty
   devices, brand blue, deliberate copy space on the left. Blue tint sits
   under it so the headline holds contrast on any crop.                */
.hero--img{position:relative;isolation:isolate}
.hero--img .hero-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;object-position:72% 50%}
.hero--img:before{opacity:.34}
@media(max-width:900px){
  .hero--img .hero-bg{object-position:64% 50%}
  }

/* ---- full-bleed image band ------------------------------------------
   Manufacturing, warehouse and QC. Chosen because they carry no device
   wordmark and no visible oil, and because scale is the point: the page
   should read as an operation that already has everything.            */
section.band{position:relative;width:100%;min-height:clamp(420px,48vw,720px);
  display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;
  padding:0;color:#fff}
section.band img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  object-position:60% 50%}
/* solid colour field, hard edges. No gradient. */
section.band>div{position:relative;background:var(--ev-blue);color:#fff;
  padding:clamp(34px,3.4vw,58px) clamp(30px,3vw,54px);
  margin:clamp(28px,3vw,54px);max-width:min(58ch,52%)}
section.band--ink>div{background:var(--ev-ink)}
@media(max-width:820px){section.band>div{max-width:none;margin:0;width:100%}}
section.band h2{font-size:clamp(32px,4.6vw,84px);letter-spacing:-.06em;margin-bottom:18px}
section.band p{font-size:clamp(17px,1.3vw,21px);opacity:.94}
section.band .row{color:#fff}

/* ---- account gate ---- */
.gate{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  border-top:1px solid currentColor;border-left:1px solid currentColor;margin-top:34px}
.gate>div{padding:clamp(22px,2.4vw,36px);border-right:1px solid currentColor;
  border-bottom:1px solid currentColor}
.gate b{display:block;font:600 13px var(--ev-mono);letter-spacing:.13em;
  text-transform:uppercase;opacity:.65;margin-bottom:12px}
.gate span{display:block;font-weight:700;font-size:clamp(19px,1.7vw,26px);
  letter-spacing:-.03em;line-height:1.1}

/* ---- testimonial ---- */
.quote{margin:0;font-weight:700;font-size:clamp(19px,1.6vw,26px);line-height:1.22;
  letter-spacing:-.025em}
.quote:before{content:"\201C"}
.quote:after{content:"\201D"}
.cite{display:block;margin-top:18px;font:600 13px var(--ev-mono);letter-spacing:.12em;
  text-transform:uppercase;opacity:.6}

/* ---- contact card: the last thing on every page ---- */
.contact{width:100%;background:var(--ev-blue);color:#fff;text-align:center;
  padding:clamp(104px,10vw,190px) var(--ev-frame)}
.contact .row{justify-content:center;max-width:820px;margin:0 auto 30px}
.contact h2{font-size:clamp(36px,5.4vw,92px);letter-spacing:-.06em;margin:0 auto 22px;max-width:16ch}
.contact p{font-size:clamp(17px,1.3vw,21px);max-width:60ch;margin:0 auto;opacity:.94}
.contact .btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin:38px 0 0}
.contact .btn{justify-self:center}
/* SPEC-EV-0002 AC1. The contact form on the blue band. The base .ev-form control style is
   already built for a dark surface (translucent fill, currentColor border); the light
   overrides are scoped to .sec--white and .sec--paper, so nothing else is needed here.
   .contact centres its text, which would centre the labels too - hence text-align:left. */
/* SPEC-EV-0002 AC3. The trade-account form, at the #account anchor the header pill targets.
   It sits in a .sec--white section, so the light-background overrides on .ev-form controls
   apply and nothing more is needed. */
.apply-wrap{margin-top:38px}
/* The apply confirmation stays LEFT aligned: it sits in a left-aligned white split section,
   not in the centred blue band, so centring it here would be the same mismatch in reverse. */
.apply-ok h3{font-size:clamp(23px,1.9vw,30px);font-weight:700;line-height:1.15;
  letter-spacing:-.02em;margin:0 0 14px;max-width:24ch}
.apply-ok p{font-weight:400;font-size:clamp(16px,1.2vw,19px);line-height:1.55;max-width:52ch;
  margin:0;opacity:.9}
.contact-form{max-width:720px;margin:clamp(38px,4vw,58px) auto 0;text-align:left}
/* The SENT state, corrected 2026-08-24 after the director saw it live and said "this is ugly".
   He was right and the cause was measurable: the paragraph computed to font-weight 700 and the
   whole block inherited text-align:left from .contact-form, so a left-aligned bold slab sat
   under a centred heading and centred lede. The form needs left-aligned labels; the message
   that replaces it does not, and it should read like the rest of the band. */
.contact-form .lead-ok{text-align:center;max-width:56ch;margin:0 auto}
.contact-form .lead-ok h3{font-size:clamp(23px,1.9vw,30px);font-weight:700;line-height:1.15;
  letter-spacing:-.02em;margin:0 auto 14px;max-width:24ch;text-align:center}
.contact-form .lead-ok p{font-weight:400;font-size:clamp(16px,1.2vw,19px);line-height:1.55;
  max-width:52ch;margin:0 auto;opacity:.9;text-align:center}
/* Without this the band keeps its full 190px padding around a short message and leaves a void
   where a 758px form used to be. Driven by a class the handler adds, never by :has() on an
   inline style attribute, which is a matcher that breaks the moment the markup changes. */
.contact.is-sent{padding-top:clamp(70px,6vw,116px);padding-bottom:clamp(70px,6vw,116px)}
.contact.is-sent .contact-form{margin-top:clamp(26px,2.6vw,38px)}
.contact-note{margin-top:34px!important;font:600 13px var(--ev-mono);letter-spacing:.12em;
  text-transform:uppercase;opacity:.7}

/* ---- lead magnet: obvious, centred, its own space ---- */
.ev-magnet{max-width:620px;margin:0 auto;text-align:center}
.ev-magnet form{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:stretch;
  border:0;margin-top:26px}
.ev-magnet input[type=email],.ev-magnet input{flex:1 1 280px;min-height:60px;
  background:#fff;color:var(--ev-ink);border:2px solid var(--ev-ink);border-radius:var(--ev-pill);
  padding:0 24px;font-size:18px;text-align:center;
  transition:border-color .3s var(--ev-ease-sweep)}
.ev-magnet input::placeholder{color:var(--ev-steel);opacity:1}
.ev-magnet input:focus{border-color:var(--ev-orange);outline:0}
.ev-magnet button{flex:0 0 auto}
.sec--blue .ev-magnet input,.band .ev-magnet input{border-color:#fff}

/* container band: the subject sits low-left, so bias the crop and darken the top */
section.band--tall{min-height:clamp(380px,40vw,600px)}
section.band--tall img{object-position:50% 70%}

/* ---- stat numbers: flip in as they count ---- */
.facts b.is-flip{animation:ev-flip .7s var(--ev-ease-spring) both}
@keyframes ev-flip{
  0%{opacity:0;transform:perspective(600px) rotateX(-78deg) translateY(14px)}
  60%{opacity:1}
  100%{opacity:1;transform:perspective(600px) rotateX(0) translateY(0)}}
@media(prefers-reduced-motion:reduce){
  .facts b.is-flip{animation:none}}

/* busy frames need a heavier scrim or the heading disappears into the shelving */
section.band--busy img{object-position:70% 50%}

/* ---- product card CTA rendered as a pill ----
   The whole card is an <a>, so this cannot be a nested <button>. It is a span
   styled as the pill, driven by the card's own hover.                        */
.prod{display:flex;flex-direction:column}
.prod .go.pill{margin-top:auto;align-self:flex-start;position:relative;isolation:isolate;
  overflow:hidden;display:inline-flex;align-items:center;gap:22px;
  border:2px solid currentColor;border-radius:var(--ev-pill);padding:12px 22px;
  font:700 17px var(--ev-sans);letter-spacing:-.01em;
  transition:border-color .4s,transform .4s var(--ev-ease-sweep),color .3s .08s}
.prod .go.pill:before{content:"";position:absolute;inset:0;background:var(--ev-orange);
  transform:translateX(-101%);transition:transform .45s var(--ev-ease-sweep);z-index:-1}
.prod .go.pill .lab,.prod .go.pill .pl{position:relative;transition:color .3s .08s}
.prod .go.pill .pl{font-size:18px;line-height:1;
  transition:transform .45s var(--ev-ease-spring),color .3s .08s}
.prod:hover .go.pill{border-color:var(--ev-orange);transform:translateY(-2px)}
.prod:hover .go.pill:before{transform:translateX(0)}
.prod:hover .go.pill .lab,.prod:hover .go.pill .pl{color:#fff}
.prod:hover .go.pill .pl{transform:rotate(90deg)}

/* ---- feature: half image, half type. Breaks a run of full-bleed bands. ----
   The image bleeds to the page edge on its own side; the type keeps the
   gutter on the other. Reverse with .feature--flip.                        */
.feature{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;width:100%;
  background:var(--ev-paper);color:var(--ev-ink)}
.feature--ink{background:var(--ev-blue);color:#fff}
.feature figure{margin:0;position:relative;overflow:hidden;min-height:clamp(300px,34vw,560px)}
.feature figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ev-ease-sweep)}
.feature:hover figure img{transform:scale(1.03)}
.feature .feature-txt{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(56px,6vw,110px) var(--ev-gutter)}
.feature h2{font-size:clamp(32px,4.2vw,74px);letter-spacing:-.06em;margin-bottom:20px;max-width:16ch}
.feature p{font-size:clamp(17px,1.3vw,21px);opacity:.86;max-width:48ch}
.feature .row{margin-bottom:26px}
.feature--flip figure{order:2}
@media(max-width:900px){
  .feature{grid-template-columns:1fr}
  .feature figure{min-height:clamp(260px,52vw,420px);order:0!important}
}


/* ---- mobile navigation ------------------------------------------------
   Under 900px the desktop nav was display:none with nothing in its place,
   so a phone had no navigation at all. This is that replacement.        */
.hd-burger{display:none;flex:0 0 auto;width:44px;height:44px;margin-left:12px;
  background:transparent;border:0;cursor:pointer;position:relative}
.hd-burger span{position:absolute;left:11px;right:11px;height:2px;background:currentColor;
  transition:transform .35s var(--ev-ease-sweep),opacity .25s}
.hd-burger span:nth-child(1){top:18px}
.hd-burger span:nth-child(2){top:25px}
.hd-burger.is-x span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.hd-burger.is-x span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:99;background:var(--ev-blue);color:#fff;overflow:auto;
  padding:calc(var(--ev-head) + 34px) var(--ev-gutter) 40px;
  display:grid;grid-template-columns:1fr;gap:34px;align-content:start;
  opacity:0;visibility:hidden;transition:opacity .35s var(--ev-ease-sweep),visibility .35s}
.mnav.open{opacity:1;visibility:visible}
.mnav h4{font:600 13px var(--ev-mono);letter-spacing:.16em;text-transform:uppercase;
  opacity:.6;margin:0 0 12px}
.mnav a{display:block;padding:14px 0;border-top:1px solid var(--ev-line-light);
  font-weight:700;font-size:21px;letter-spacing:-.03em;
  transition:padding-left .3s var(--ev-ease-sweep)}
.mnav a:hover{padding-left:10px}
@media(max-width:900px){
  .hd-nav{display:none}
  .hd-burger{display:block}
}
@media(min-width:901px){.mnav{display:none}}

/* ================= MOVED UP FROM THE SITE LAYER 2026-08-23 =============
   These classes were defined in two files at once, so editing one had no
   visible effect. They are global components, so they live here, once.
   ===================================================================== */
.eyebrow.accent{color:var(--ev-blue)}
/* white text on the blue field. NOT a blanket ".page-hero a" - that painted the
   ghost CTA's label white on its own white pill and made it read as an empty
   blob. Links are whitened where they are text, and the pills own their own
   colours below. */
.page-hero,.page-hero p,.page-hero li,.page-hero h1,
.page-hero .crumbs,.page-hero .crumbs a,.page-hero p a,.page-hero li a,
.page-hero .eyebrow,.page-hero .cert,.page-hero .lbl{color:#fff}
.page-hero .eyebrow{opacity:.82;margin-bottom:16px}
.stat .num,.stat .n{font:700 clamp(38px,4.2vw,74px)/.9 var(--ev-sans);
  letter-spacing:-.05em;color:var(--ev-blue)}
.prod{display:block;padding:clamp(26px,2.6vw,40px);background:#fff;
  border-right:1px solid var(--ev-line);border-bottom:1px solid var(--ev-line);
  transition:background .3s var(--ev-ease-sweep),color .3s var(--ev-ease-sweep)}
.prod:hover{background:var(--ev-blue);color:#fff}
.cert,.chip,.pill:not(.go){display:inline-flex;align-items:center;gap:8px;
  border:1px solid currentColor;border-radius:var(--ev-pill);padding:7px 15px;
  font:600 13px var(--ev-mono);letter-spacing:.1em;text-transform:uppercase;opacity:.85;
  background:transparent}
.val,.n,.num{font-weight:700}
/* ---- lead magnet: obvious, centred, its own space ---- */
.ev-magnet{max-width:640px;margin:0 auto;text-align:center}


/* ================= INNER-PAGE LAYOUT AND COMPONENTS =================
   Was a separate file until 2026-08-23. Merged because two files meant
   two owners for .btn, .prod, .num, .stat and .band at once.
   ===================================================================== */
/* ================= RECOVERED COMPONENTS (was ev-v7-legacy.css) ================= */
/* ---- legacy body rules recovered from site.css.pre-v6.bak ------------
   Stripping every page's <style> and swapping site.css removed the rules
   these 128 page bodies depend on. Recovered, not reinvented; old token
   names remapped to --ev-*.                                            */
.mono{font-family:var(--ev-mono)}
.accent{color:var(--ev-blue)}
.muted{color:var(--ev-steel)}
.gridbg-dark{background-image:linear-gradient(rgba(125,160,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(125,160,255,.10) 1px,transparent 1px);background-size:26px 26px}
.hero-full h1 .accent{color:#f2f6ff}
.hero-full p.sub{font-size:18.5px;color:#e7edfb;margin:22px 0 30px;max-width:540px;line-height:1.6}
.hero-full 
.hero-full 
.hero p.sub{font-size:18.5px;color:var(--ev-ink);margin:22px 0 30px;max-width:540px;line-height:1.6}
/* ---------- 11. PROOF CARDS ---------- */
/* was a single fixed column, so every proof card rendered full width and the section became
   a vertical stack of near-empty boxes on a wide screen. Same shape as the other grids. */
.proofs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0;border-top:1px solid var(--ev-line);border-left:1px solid var(--ev-line)}
.proof{background:#fff;border:1px solid var(--ev-line);border-radius:var(--ev-radius);padding:24px 22px}
.proof .n{font-family:var(--ev-mono);font-size:11px;color:var(--ev-blue);font-weight:500;margin-bottom:16px;letter-spacing:.1em}
.proof h3{font-size:18px;font-weight:600;margin-bottom:7px;font-family:var(--ev-sans);letter-spacing:0}
.proof p{font-size:14px;color:var(--ev-steel);line-height:1.55}
/* These two were breakpoint overrides that lost their @media wrappers somewhere in the merge,
   so the MOBILE column count won at every width and the section stacked one card per row on a
   2560px screen. Wrappers restored. Found on oem.html 2026-08-23. */
@media(max-width:1100px){.proofs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.proofs{grid-template-columns:1fr}}
/* ---------- 14. STEPS (dark) ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step{position:relative;padding:26px 22px;background:var(--ev-ink);color:var(--ev-paper);border-radius:var(--ev-radius);border:1px solid var(--ev-line-light)}
.step .n{font-family:var(--ev-mono);font-size:11px;font-weight:500;color:var(--ev-blue);letter-spacing:.14em}
.step h3{font-size:17px;margin:10px 0 7px;color:#fff;font-weight:600;font-family:var(--ev-sans);letter-spacing:0}
.step p{font-size:13.5px;color:#8fa6c9;line-height:1.55}
@media(max-width:1100px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.steps{grid-template-columns:1fr}}
/* ---------- 16. PROSE ---------- */
.prose{max-width:760px}
.prose h2{font-size:28px;font-weight:600;margin:36px 0 12px}
.prose h3{font-size:20px;font-weight:600;margin:26px 0 10px;font-family:var(--ev-sans)}
.prose p{font-size:16.5px;color:var(--ev-ink);margin-bottom:16px;line-height:1.7}
.prose ul,.prose ol{margin:0 0 16px 22px}
.prose li{font-size:16.5px;color:var(--ev-ink);margin-bottom:8px}
.prose a{color:var(--ev-blue);text-decoration:underline}
/* ---------- 17. FORM ---------- */
.form-wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:46px;align-items:start}
.ok{display:none;background:var(--ev-field);border:1px solid var(--ev-blue);color:var(--ev-blue);padding:14px;border-radius:var(--ev-radius);font-size:14.5px;font-weight:500;margin-bottom:15px}
.benefit-list{list-style:none;display:flex;flex-direction:column;gap:16px;margin-top:6px}
.benefit-list li{display:flex;gap:13px}
.benefit-list .ic{width:38px;height:38px;flex:none;border-radius:var(--ev-radius);background:var(--ev-ink);display:flex;align-items:center;justify-content:center}
.benefit-list h3{font-size:16px;font-weight:600;font-family:var(--ev-sans)}
.benefit-list p{font-size:13.5px;color:var(--ev-steel)}
.form-wrap{grid-template-columns:1fr;gap:30px}
/* ---------- 21. UTILITIES ---------- */
.center{text-align:center}
.mt-0{margin-top:0}
.mt-3{margin-top:24px}
.mt-4{margin-top:34px}
/* ---------- 24. DOCUMENT DOWNLOAD ---------- */
.doc-dl{display:inline-flex;align-items:center;gap:11px;border:1px solid var(--ev-line);background:#fff;border-radius:var(--ev-radius);padding:14px 18px;font-weight:600;font-size:14.5px;color:var(--ev-ink);transition:border-color .35s var(--ev-ease-sweep)}
.doc-dl:hover{border-color:var(--ev-steel)}
.doc-dl .ic{width:30px;height:30px;border-radius:var(--ev-radius);background:var(--ev-field);display:flex;align-items:center;justify-content:center;flex:none}
.doc-dl small{display:block;font-weight:400;color:var(--ev-steel);font-size:12px;font-family:var(--ev-mono)}
.badge.ok{background:rgba(34,197,94,.12);color:#15803d}
/* ---------- 27. SWATCHES (style guide) ---------- */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.sw .chip{height:72px}
.icongrid .ic{background:#fff;padding:20px 10px;display:flex;flex-direction:column;align-items:center;gap:11px;text-align:center}
.icongrid .ic svg{color:var(--ev-blue)}
.icongrid .ic span{font-family:var(--ev-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ev-steel)}
.svc .l{font-family:var(--ev-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ev-ink);line-height:1.4}
/* notes / alerts (full border, icon + mono label; no edge-accent bars) */
.note{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--ev-line);background:#fff;border-radius:var(--ev-radius);padding:14px 16px}
.note svg{flex:none;color:var(--ev-blue);margin-top:1px}
.note .nl{font-family:var(--ev-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ev-blue);display:block;margin-bottom:3px}
.note .nt{font-size:14px;color:var(--ev-ink);line-height:1.5}
.note.ok{background:rgba(34,197,94,.06);border-color:rgba(34,197,94,.4)}
.note.ok svg,.note.ok .nl{color:#15803d}
.note.warn{background:rgba(186,117,23,.06);border-color:rgba(186,117,23,.4)}
.note.warn svg,.note.warn .nl{color:#9a6516}
/* tabs */
.tabs{display:flex;border-bottom:1px solid var(--ev-line);margin-bottom:18px}
.tab{font-family:var(--ev-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;padding:11px 16px;color:var(--ev-steel);border:none;border-bottom:2px solid transparent;background:none;cursor:pointer}
.tab.on{color:var(--ev-blue);border-bottom-color:var(--ev-blue)}
.kpi .v{font-family:var(--ev-mono);font-size:28px;color:var(--ev-ink);font-weight:500;line-height:1}
.kpi .k{font-family:var(--ev-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ev-steel);margin-top:8px}
.kpi .d{font-size:12.5px;color:var(--ev-green);margin-top:5px;font-family:var(--ev-mono)}
/* chips / filters (squared, technical) */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.spacescale .bar{height:14px;background:var(--ev-blue)}
.misbox .tag{font-family:var(--ev-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px}
.misbox.ok .tag{color:#15803d}
.misbox.no .tag{color:#a32d2d}
/* ================================================================
   30. WHOLESALE-BLUEPRINT COMPONENTS (v2 restructure — Qogita structure, Faire craft)
   Added for the selling-platform homepage: 3-prop grid, direct-from-China
   comparison table, featured-hardware feed (gated pricing), risk-reversal
   block, supply-side CTA. Reusable across pages.
   ================================================================ */

/* 3-up value props (proof cards, three columns with emotional tail) */
.proofs.three{grid-template-columns:repeat(3,1fr)}
.proofs.three .proof p{font-size:14.5px;color:var(--ev-ink)}
.proofs.three{grid-template-columns:1fr}
/* comparison table — direct from China vs Empty Vapes */
.vs{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--ev-line);border-radius:var(--ev-radius);overflow:hidden;font-size:14.5px}
.vs caption{caption-side:top;text-align:left;font-family:var(--ev-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ev-blue);padding:0 0 12px}
.vs th,.vs td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--ev-line);vertical-align:top;line-height:1.45}
.vs thead th{font-family:var(--ev-mono);font-weight:500;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.vs thead th.cn{background:var(--ev-ink);color:#fff}
.vs thead th.ev{background:var(--ev-blue);color:#fff}
.vs thead th:first-child{background:#fff}
.vs tbody th{font-family:var(--ev-sans);font-weight:600;color:var(--ev-ink);font-size:13.5px;width:26%}
.vs td{color:var(--ev-steel)}
.vs td.cn::before{content:"\2014";color:var(--ev-steel);font-family:var(--ev-mono);margin-right:8px}
.vs td.ev{color:var(--ev-ink);font-weight:600;background:var(--ev-field)}
.vs td.ev::before{content:"\2713";color:var(--ev-green);font-family:var(--ev-mono);margin-right:8px;font-weight:700}
.vs tr:last-child th,.vs tr:last-child td{border-bottom:none}
.vs th,.vs td{padding:11px 12px;font-size:13px}
.vs tbody th{width:34%}

/* ================= INNER-PAGE LAYOUT (was ev-v7-layout.css) ================= */
/* =====================================================================
   INNER-PAGE LAYOUT - built to brand bible v6 s10 and design system v6 s04.
     Canvas   100%      backgrounds and imagery reach the viewport edge
     Frame    1680px    maximum content frame
     Gutter   22-78px   fluid clamp
     Hero H1  64-124px  leading .78-.86
     Section  36-64px   700
     Body     18-20px   1.6-1.78, 65-75 character measure
     Reading  990px     long-form maximum

   Fixed 2026-08-23 after the render check:
     - .wrap > * had margin-inline:auto, which CENTRED every narrow child.
       That is why the hero paragraph sat in the middle of an empty right
       half while the h1 was hard left. The frame is now inline PADDING on
       .wrap itself, so the background still reaches the edge and every
       child stays left-aligned on one axis.
     - .page-hero inherited a dark body colour on a blue field.
     - .stat rendered as a black box. Ink is not a background surface.
     - <div class="band"> collided with the full-bleed image band.
   ===================================================================== */

/* THE SHELL. One token. Every top-level band asks this and nothing else, so the site's measure
   moves in one place instead of four.
   VALUE SET BY BRAND BIBLE v6 SECTION 10, ratified by the director 2026-08-23: "Full width is a
   rule, not a flourish. The page edge belongs to imagery and colour fields. Text remains inside a
   responsive 1680px frame with large gutters." Both halves of that sentence are load-bearing. The
   frame caps TEXT at --ev-content; bands carrying imagery or a colour field keep padding 0 and run
   to the viewport edge. Implementing either half alone gives a page the bible does not describe.
   Got wrong twice in one day, so it is written down. First --ev-frame existed and only .wrap and
   .page-hero used it while .hd .sec .ft .contact hardcoded --ev-gutter, so an inner page ran two
   shells at once, 432px and 54px, and nothing shared a left edge. Then it was collapsed to the
   gutter alone, which unified the edges and put every line of text 772px wider than spec. */
/* DIRECTOR RULING 2026-08-23, option C: NO CONTENT CAP. Bands run the full viewport and the
   gutter is the only inset. Prose is not affected - .lf children carry their own 72ch reading
   measure, so text never runs to 2452px even though its band does.
   This AMENDS brand bible s10, which specified a 1680px frame. The bible is amended in the
   same change rather than left to contradict the site: a canon document the build disagrees
   with is worse than either value.
   --ev-content is retained: ev-v7-pages.css uses it for the design-system CARD, not a band. */
:root{--ev-frame:var(--ev-gutter)}

/* full canvas, framed content, everything left-aligned */
.wrap{width:100%;max-width:none;margin:0;padding-inline:var(--ev-frame)}
.pad{padding-block:clamp(80px,7.5vw,140px)}
.bg-white{background:#fff}
section.pad + section.pad.bg-white,
section.pad.bg-white + section.pad{border-top:1px solid var(--ev-line)}

/* ---------- page hero: full-bleed blue field with the brand grid ---------- */
.page-hero{position:relative;isolation:isolate;width:100%;max-width:none;
  background:var(--ev-blue);color:#fff;overflow:hidden;
  padding:calc(var(--ev-head) + clamp(48px,5.5vw,92px)) var(--ev-frame) clamp(52px,5.5vw,92px)}
.page-hero:before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(var(--ev-line-light) 1px,transparent 1px),
             linear-gradient(90deg,var(--ev-line-light) 1px,transparent 1px);
  background-size:clamp(48px,6vw,92px) clamp(48px,6vw,92px);opacity:.4}
.page-hero > *{max-width:none;margin-inline:0}




.page-hero h1{font-family:var(--ev-sans);font-weight:700;text-transform:uppercase;
  font-size:clamp(68px,5.4vw,156px);letter-spacing:-.055em;line-height:.86;  /* bible s10 Hero H1 */
  max-width:22ch;margin:0}
/* 16ch -> 22ch and 62ch -> 72ch. At the shell's full width a 16ch headline used a third of the
   viewport and left the rest empty blue; the void was a MEASURE bug, not a missing component.
   72ch is not invented: it is the measure .lf already uses for body copy in this same file.
   RISK, named rather than hidden: a longer line is a harder line to read, and 22ch is the point
   where a 104px headline still breaks into 2-3 lines rather than one wide ribbon. If a headline
   ever reads as one long line on a wide screen, this number is the one to pull back, not the shell. */
.page-hero p{font-size:clamp(18px,1.35vw,21px);line-height:1.6;margin:22px 0 0;
  max-width:72ch;opacity:.94}
.page-hero .crumbs{font:600 13px var(--ev-mono);letter-spacing:.14em;text-transform:uppercase;
  opacity:.72;margin-bottom:24px}
.page-hero .certs,.page-hero .hero-cta{margin-top:30px}
.page-hero .hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.page-hero .cert{background:transparent;border:1px solid rgba(255,255,255,.5);opacity:.92}

/* ---------- section headings, per system s03 ---------- */
.pad h2{font-family:var(--ev-sans);font-weight:700;text-transform:uppercase;
  font-size:clamp(30px,3.4vw,60px);letter-spacing:-.05em;line-height:.94;
  max-width:22ch;margin:0 0 22px}
.pad h3{font-family:var(--ev-sans);font-weight:700;font-size:clamp(20px,1.8vw,30px);
  letter-spacing:-.03em;margin:34px 0 12px}
.pad p,.pad li{font-size:19px;line-height:1.7}
.pad p{max-width:70ch;margin:0 0 16px}
.sec-head{margin-bottom:clamp(34px,3.4vw,58px)}
.sec-head h2{margin:0}

/* ---------- long-form reading column: 990px per system s04 ---------- */
/* Long-form CENTRES in the shell. It used to be margin:0, which pinned a 990px column to the far
   left of a 2560px viewport with the rest of the screen empty. NOTE: .lf is redefined again lower
   in this file (max-width:820px), and the later block wins. Both carry the centring. */
.lf{max-width:990px;margin-inline:auto}
.lf h2{font-family:var(--ev-sans);font-weight:700;text-transform:uppercase;
  font-size:clamp(28px,2.9vw,48px);letter-spacing:-.05em;line-height:.96;margin:64px 0 18px}
.lf > h2:first-child{margin-top:0}
.lf h3{font-family:var(--ev-sans);font-weight:700;font-size:clamp(19px,1.6vw,26px);
  letter-spacing:-.03em;margin:34px 0 10px}
.lf p{margin:0 0 16px}
.lf ul,.lf ol{margin:12px 0 20px 22px}
.lf li{margin-bottom:10px}
.lf a{text-decoration:underline;text-underline-offset:3px}
.lf strong{font-weight:700}
.lf .faq dt{font-family:var(--ev-sans);font-weight:700;font-size:20px;margin:28px 0 6px}
.lf .dateline{font:600 13px var(--ev-mono);letter-spacing:.14em;text-transform:uppercase;opacity:.6}

/* ---------- rule divider - a divider, NOT a width cap ---------- */
.measure{display:flex;align-items:center;gap:14px;font:600 13px var(--ev-mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ev-steel);margin:0 0 30px}
.measure::before,.measure::after{content:"";height:1px;background:var(--ev-line);flex:1}
.mt-0{margin-top:0}.mt-3{margin-top:26px}.mt-4{margin-top:38px}

/* ---------- number cards: hairline grid, centred, never a black box ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
  border-top:1px solid var(--ev-line);border-left:1px solid var(--ev-line);background:#fff}
.stat{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:12px;padding:clamp(32px,3.2vw,56px) 22px;background:#fff;
  border-right:1px solid var(--ev-line);border-bottom:1px solid var(--ev-line)}
.stat .lbl{font:600 13px var(--ev-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ev-steel);opacity:1;max-width:18ch}

/* ---------- inner-page CTA band (a div, not the full-bleed image band) ---- */
div.band{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,3vw,56px);
  align-items:start;width:100%;max-width:none;margin:0;min-height:0;
  background:var(--ev-blue);color:#fff;padding:clamp(34px,3.4vw,60px)}
div.band > div{background:transparent;margin:0;padding:0;max-width:none;color:#fff}
div.band h2{font-family:var(--ev-sans);font-weight:700;text-transform:uppercase;
  font-size:clamp(28px,3vw,52px);letter-spacing:-.05em;line-height:.94;margin:0 0 16px;max-width:20ch}
div.band p{font-size:19px;line-height:1.65;max-width:56ch;opacity:.94}
div.band ul{margin:16px 0 0 20px}
div.band li{font-size:17px;line-height:1.7;opacity:.92}
.band-card{border:1px solid rgba(255,255,255,.34);padding:4px clamp(24px,2vw,34px)}
.band-card .spec-row{border-bottom:1px solid rgba(255,255,255,.24)}
.band-card .spec-row:last-child{border-bottom:0}
.band-card .spec-row span:last-child{color:#fff}
@media(max-width:900px){div.band{grid-template-columns:1fr}}

/* ---------- cross-link grid ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  border-top:1px solid var(--ev-line);border-left:1px solid var(--ev-line)}
.prod h3{font-family:var(--ev-sans);font-weight:700;text-transform:uppercase;
  font-size:clamp(19px,1.5vw,25px);letter-spacing:-.035em;margin:0 0 10px}
.prod p{font-size:17px;line-height:1.6;margin:0;opacity:.8;max-width:30ch}
.prod:hover p{opacity:.92}

/* ---------- INDEX VARIANT of the card grid: many short items, not a few big ones ----------
   `.prod-grid` is tuned for the 3 to 8 hardware cards on a product page, where a 250px minimum
   and an uppercase 25px heading read as bold. The guides hub has 108 items and the same rules
   produced NINE columns of 128px on a 2545px band, with titles wrapping to five and six lines:
   "MATCHING A / 510 BATTERY / TO A / CARTRIDGE / COIL". Uppercase destroys word shape, which is
   what the eye uses to read a wrapped line, so a 6-word title became a shape-puzzle.
   Measured 2026-08-24: 9 columns, titles to 6 lines, rows raggedly sized by their tallest card.

   The cap is `max(300px,24%)`, so the grid can never exceed FOUR columns at any viewport and
   never drops below 300px. A percentage minimum is what caps the column COUNT; a pixel minimum
   only caps the width, which is why auto-fit alone kept adding columns as the screen grew. */
.prod-grid--index{grid-template-columns:repeat(auto-fit,minmax(max(300px,24%),1fr))}
.prod-grid--index .prod{padding:26px 26px 24px;display:flex;flex-direction:column;gap:10px}
.prod-grid--index .prod h3{text-transform:none;letter-spacing:-.02em;
  font-size:clamp(18px,1.25vw,21px);line-height:1.25;margin:0;text-wrap:balance}
.prod-grid--index .prod p{font-size:15.5px;line-height:1.5;max-width:42ch;opacity:.75;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* the arrow is the only thing that moves, and it is pinned to the bottom so every card in a row
   ends on the same line however long its title ran */
.prod-grid--index .prod .go{margin-top:auto;padding-top:6px;font:600 11px/1 var(--ev-mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ev-steel);
  display:inline-flex;align-items:center;gap:8px}
.prod-grid--index .prod .go:after{content:"\2192";font-size:14px;
  transition:transform .35s var(--ev-ease-sweep)}
.prod-grid--index .prod:hover .go{color:#fff}
.prod-grid--index .prod:hover .go:after{transform:translateX(4px)}

/* ---------- category jump nav: 108 items need a way in ---------- */
/* The nav band sits between the hero and the first section, so it must not add a full band's
   padding to two neighbours that already have one. Measured before: a 180px hole. */
.catnav-band{padding-block:clamp(26px,3vw,46px) 0}
.catnav{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--ev-line);
  border-left:1px solid var(--ev-line);margin:0}
.catnav a{flex:1 1 200px;padding:16px 20px;text-decoration:none;color:inherit;
  border-right:1px solid var(--ev-line);border-bottom:1px solid var(--ev-line);
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  transition:background .3s var(--ev-ease-sweep)}
.catnav a:hover{background:var(--ev-field)}
.catnav a b{font-weight:700;font-size:16px;letter-spacing:-.01em}
.catnav a i{font:600 11px/1 var(--ev-mono);font-style:normal;color:var(--ev-steel)}
.sec-head .eyebrow i{font-style:normal;opacity:.55;margin-left:10px}
/* Two stacked bands each contribute 140px, so the nav sat in a 280px hole. They read as
   deliberate separation when the fields differ and as a gap when they match, which they do here.
   The nav band owns its own top space and hands the bottom to the section below it. */
.catnav-band{padding-block:clamp(26px,3vw,46px) 0}
.catnav-band + .pad{padding-top:clamp(40px,4vw,64px)}
/* An index heading is a signpost over a grid, not the page's claim. 54px over three lines
   outweighed the 26 cards it introduced. The measure is wide enough for two lines, not so wide
   that it forces three - the earlier 22ch CAUSED the wrap it was meant to prevent. */
.sec-head:has(+ .prod-grid--index) h2{font-size:clamp(26px,2.2vw,38px);max-width:38ch;
  text-wrap:balance}

/* ---------- data + spec tables ---------- */
.spec-table,.frame table{width:100%;border-collapse:collapse;font-size:17px}
.spec-table caption,.frame table caption{text-align:left;font:600 13px var(--ev-mono);
  letter-spacing:.13em;text-transform:uppercase;color:var(--ev-steel);padding-bottom:16px}
.spec-table th,.frame table th{text-align:left;font:600 13px var(--ev-mono);letter-spacing:.13em;
  text-transform:uppercase;padding:0 16px 14px 0;border-bottom:1px solid var(--ev-ink)}
.spec-table tbody th{font:600 17px var(--ev-sans);letter-spacing:0;text-transform:none;
  padding:18px 18px 18px 0;border-bottom:1px solid var(--ev-line)}
.spec-table td,.frame table td{padding:18px 0 18px 18px;border-bottom:1px solid var(--ev-line);
  vertical-align:top}
.spec-table td.v,.frame table td[style*="right"]{text-align:right;font-weight:700}
.spec-row{display:grid;grid-template-columns:1fr auto;gap:24px;padding:22px 0;
  border-bottom:1px solid var(--ev-line)}
.spec-row span:last-child{font:700 13px var(--ev-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ev-blue)}
.frame{border:1px solid var(--ev-line);padding:clamp(22px,2.4vw,40px);background:#fff}
.certs{display:flex;flex-wrap:wrap;gap:10px}
.dot{width:8px;height:8px;background:var(--ev-orange);flex:0 0 8px;display:inline-block}
.crumbs{font:600 13px var(--ev-mono);letter-spacing:.14em;text-transform:uppercase;opacity:.6}
.accent{color:var(--ev-orange)}
.lbl,.src,.meta{font:600 13px var(--ev-mono);letter-spacing:.12em;text-transform:uppercase;opacity:.62}
.success{color:#0a7a3c;font-weight:700}
.page-hero .success,.sec--blue .success,div.band .success{color:#bff5d4}
.toc{border:1px solid var(--ev-line);padding:20px 24px;margin:30px 0;background:#fff}
.toc a{display:block;padding:7px 0;text-decoration:underline;text-underline-offset:3px}
.band-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.band-links a{border:1px solid currentColor;border-radius:var(--ev-pill);padding:9px 18px;
  font:700 15px var(--ev-sans);transition:background .3s,color .3s,border-color .3s}
.band-links a:hover{background:var(--ev-orange);border-color:var(--ev-orange);color:#fff}
.status{display:inline-flex;align-items:center;gap:8px;font:600 13px var(--ev-mono);
  letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border:1px solid var(--ev-line)}
.swatch{min-height:130px;padding:16px;display:flex;flex-direction:column;justify-content:flex-end;
  font:600 13px var(--ev-mono);letter-spacing:.06em}
.js-gated{display:none}
.lead-form{display:block}

/* ---------- LEAD MAGNET: one short row inside a card. ONE definition, every route. ----------
   Built three ways before 2026-08-24: index/ via a [data-page="index"] rule in the page layer,
   compliance/ entirely in inline style attributes on the markup, and the shell not at all.
   The inline copy is why compliance looked broken - 11px padding and 14px text on a 150px input,
   sitting on a page where every other control is 56px and 16px.
   It shipped because INLINE STYLES ARE INVISIBLE TO GATES 1-10, which parse the stylesheet. A
   component defined in an HTML attribute is outside the design system by construction, and no
   amount of care in the CSS can catch it. */
.magnet-form{display:flex;gap:12px;flex-wrap:wrap;align-items:stretch;margin-top:8px}
.magnet-form input{flex:1 1 240px;min-height:56px;padding:0 16px;
  border:1px solid var(--ev-line);border-radius:var(--ev-radius);
  background:var(--ev-paper);color:var(--ev-ink);
  font-family:var(--ev-sans);font-size:16px}
.magnet-form input::placeholder{color:var(--ev-steel);opacity:1}
.magnet-form input:focus{border-color:var(--ev-blue);background:#fff;
  outline:2px solid var(--ev-focus);outline-offset:1px}
.magnet-form button{flex:0 0 auto}
.magnet-form + .magnet-ok,.magnet-ok{margin-top:14px}
.lead-note,.form-note{margin-top:20px;max-width:62ch;font-size:15px;opacity:.75}
.magnet-ok,.lead-ok{display:none;margin-top:16px;font-weight:700}
.magnet-ok.is-on,.lead-ok.is-on{display:block}
.text{font-weight:400}.good{font-weight:700}.bad{opacity:.75}.doc{max-width:none}

@media(max-width:680px){
  .spec-table,.frame table{display:block;overflow-x:auto}
}

/* ================= FORMS AND RECOVERED ODDS (was ev-v7-site-tail.css) ================= */

/* ---- hero (site) ---- */
.hero{min-height:100svh;background:var(--ev-blue);color:#fff;
  padding:calc(var(--ev-head) + 8vh) var(--ev-frame) 56px;display:flex;flex-direction:column;
  justify-content:flex-end;position:relative;overflow:hidden;width:100%}
.hero:before{content:"";position:absolute;inset:0;
  background:linear-gradient(var(--ev-line-light) 1px,transparent 1px),
             linear-gradient(90deg,var(--ev-line-light) 1px,transparent 1px);
  background-size:clamp(48px,6vw,92px) clamp(48px,6vw,92px);opacity:.5}
.hero>*{position:relative}
/* bible s10: Hero H1 68-156px. 190px was above the ceiling, 46px below the floor. */
.hero h1{font-size:clamp(68px,10vw,156px);letter-spacing:-.06em;margin:0 0 30px;max-width:22ch}
.hero h1 em,.hero h1 span{font-style:normal;color:var(--ev-orange)}
.hero-foot{display:flex;flex-wrap:wrap;align-items:flex-end;gap:34px;justify-content:space-between}
.hero p{font-size:clamp(16px,1.3vw,22px);max-width:52ch;opacity:.92}

/* ---- page head band for inner routes ---- */
.pagehead{background:var(--ev-blue);color:#fff;width:100%;overflow:hidden;position:relative;
  padding:calc(var(--ev-head) + 8vh) var(--ev-frame) clamp(48px,5vw,88px)}
.pagehead:before{content:"";position:absolute;inset:0;
  background:linear-gradient(var(--ev-line-light) 1px,transparent 1px),
             linear-gradient(90deg,var(--ev-line-light) 1px,transparent 1px);
  background-size:clamp(48px,6vw,92px) clamp(48px,6vw,92px);opacity:.5}
.pagehead>*{position:relative}
.pagehead h1{font-size:clamp(38px,6.4vw,116px);letter-spacing:-.06em;max-width:20ch;margin:0}
.pagehead p{font-size:clamp(16px,1.3vw,21px);max-width:56ch;opacity:.92;margin-top:22px}

/* ---- long-form body: full-bleed section, capped reading column ---- */
/* LONG-FORM: a reading measure for TEXT, the full frame for STRUCTURE.
   Capping the whole block at 820px capped its tables too. On compliance.html that left a
   four-column regulation table 477px wide, wrapping to roughly one word per line, which is the
   narrow squeezed column the director photographed on 2026-08-23. Bible s08 asks for a 65-75
   character measure on TEXT; it says nothing about tables, and a table is not read like a sentence.
   So the block spans the frame and only the prose children carry the measure. */
.lf{max-width:none;margin-inline:0}
.lf > p,.lf > ul,.lf > ol,.lf > dl,.lf > h2,.lf > h3,.lf > h4,.lf > blockquote,.lf > .lede{
  max-width:72ch}
/* Body copy matches the GUIDES, which the director confirmed read well, and the pages did not.
   Measured 2026-08-23 on oem-vs-odm-vs-white-label.html vs 510-cartridges.html: the guide ran
   21px/1.6 in an 841px column, the page 18px/1.72 in 721px, under identical 40px headings. Same
   stylesheet, two body sizes, and the page looked cramped because the headings were sized for the
   guide's proportion. Bible s08 asks for 18-20px body and a 65-75 character measure; 21px at 72ch
   is the guide's number and sits at the top of that range. */
/* THE ONLY definition of long-form body copy. It was declared three times in this one file
   (19px, 21px, 18px) and the last one won, so raising it to the guides' 21px changed nothing
   and looked like the edit had not landed. build_css gates a class split across FILES; it did
   not gate a class split across this file. 2026-08-23. */
.lf p,.lf li,.lf dd,.lf .faq dd{font-size:21px;line-height:1.6}
.lf p,.lf > dl{max-width:72ch}
.lf > table,.lf > figure,.lf > .grid2,.lf > .grid3,.lf > .grid4,.lf > .cards,.lf > .band,
.lf > .stats,.lf > .spec-table,.lf > .steps,.lf > .prod-grid,.lf > .frame{max-width:none;width:100%}
.lf h2{font-family:var(--ev-sans);font-weight:700;text-transform:uppercase;letter-spacing:-.04em;
  font-size:clamp(26px,2.4vw,40px);line-height:1;margin:52px 0 14px;color:inherit}
.lf h3{font-family:var(--ev-sans);font-weight:700;text-transform:uppercase;letter-spacing:-.03em;
  font-size:clamp(19px,1.6vw,26px);margin:32px 0 10px;color:inherit}
.lf ul,.lf ol{margin:10px 0 14px 22px}
.lf strong{opacity:1;font-weight:700}
.lf a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.lf .faq dt{font-family:var(--ev-sans);font-weight:700;text-transform:uppercase;
  font-size:18px;margin:26px 0 6px}
.lf .dateline{font:600 13px var(--ev-mono);letter-spacing:.16em;text-transform:uppercase;opacity:.55}


/* ---- forms -----------------------------------------------------------
   The live markup is .form-card > .two > .field > label + control.
   Earlier CSS put a grid on <form> itself, which turned each .two row
   into a single cell and produced the broken column layout. Style the
   classes the markup actually uses.                                    */
.ev-form form{display:block;border:0}
.ev-form .two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,1.6vw,26px)}
@media(max-width:680px){.ev-form .two{grid-template-columns:1fr}}
.ev-form .field{display:block;margin:0 0 clamp(16px,1.6vw,26px)}
.ev-form label{display:block;font:600 13px var(--ev-mono);letter-spacing:.12em;
  text-transform:uppercase;opacity:.72;margin-bottom:10px}
.ev-form input,.ev-form select,.ev-form textarea{width:100%;min-height:56px;
  background:rgba(255,255,255,.10);color:inherit;
  border:1px solid currentColor;border-radius:0;padding:14px 16px;font-size:17px;
  transition:border-color .3s var(--ev-ease-sweep),background .3s}
.sec--white .ev-form input,.sec--white .ev-form select,.sec--white .ev-form textarea,
.sec--paper .ev-form input,.sec--paper .ev-form select,.sec--paper .ev-form textarea{
  background:#fff;border-color:var(--ev-line)}
.ev-form textarea{min-height:120px;resize:vertical}
.ev-form input::placeholder,.ev-form textarea::placeholder{color:inherit;opacity:.5}
.ev-form input:focus,.ev-form select:focus,.ev-form textarea:focus{
  border-color:var(--ev-orange);outline:0;background:rgba(255,255,255,.16)}
.sec--white .ev-form input:focus,.sec--paper .ev-form input:focus{background:#fff}
.ev-form .hp{position:absolute!important;left:-9999px!important;width:1px!important;
  height:1px!important;overflow:hidden!important}
/* THE FORM SUBMIT IS A .btn. It is not a third button.
   Deleted 2026-08-24. This block reimplemented the whole button - border, pill, sweep, hover lift -
   with its own values, and got two things wrong that line 177 had already been fixed for:
     - `inset:0` on the sweep, so the 2px border ring stayed white while the inside went orange.
       That is the exact white-ring bug the comment above .btn warns about, still live here.
     - `.ev-form [type=submit]` is a class plus an attribute, specificity (0,2,0) - an exact TIE
       with `.btn.primary`, declared 692 lines later, so it won on ORDER. Every variant lost its
       styling inside a form: the identical <button class="btn primary"> rendered #2457ff outside
       a form and transparent inside one.
   Every live submit already carries class="btn", so removing this restores the canonical button
   and its variants. Only .ev-form's own spacing stays below.
   A duplicate is not a variant. A variant adds; a duplicate competes, and the loser is whichever
   one the reader was looking at. */
.ev-form button,.ev-form [type=submit]{margin-top:6px}
.ev-form .form-note{margin-top:22px;max-width:62ch;font-size:15px;opacity:.75}
.ev-magnet form{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:30px}
.ev-magnet input{flex:1 1 300px;min-height:62px;text-align:center;font-size:18px;
  border-radius:var(--ev-pill);padding:0 26px;background:#fff;color:var(--ev-ink);
  border:2px solid #fff}
.ev-magnet input::placeholder{color:var(--ev-steel);opacity:1}
.ev-magnet input:focus{border-color:var(--ev-orange);background:#fff}
.ev-magnet button{flex:0 0 auto;margin-top:0}

/* ---------------------------------------------------------------------
   Recovered 2026-08-23. The page <style> strip removed 2,262 rules whose
   selector touched a canon class; a rule written as ".btn.sticky-cta{}"
   went with them, which silently killed the floating CTA on 122 routes.
   These are the survivors, re-declared against v6 tokens.
   ------------------------------------------------------------------- */
.sticky-cta{position:fixed;right:20px;bottom:20px;z-index:60;
  box-shadow:0 12px 30px -10px rgba(36,87,255,.5)}
@media(max-width:600px){.sticky-cta{right:14px;bottom:14px}}
.sec-head .lead{font:600 13px var(--ev-mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ev-blue);display:block;margin-bottom:14px}
p.lead{font-size:clamp(18px,1.35vw,21px);line-height:1.62;max-width:64ch;opacity:.86}
.tight{margin-top:0}
.prods{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  border-top:1px solid var(--ev-line);border-left:1px solid var(--ev-line)}
.en{max-width:990px}


.ink{color:var(--ev-ink)}
hr.line,.line{height:1px;background:var(--ev-line);border:0;margin:34px 0}
.add{font-weight:700}
.arrow{display:inline-block;transition:transform .35s var(--ev-ease-sweep)}
a:hover > .arrow{transform:translateX(4px)}



/* =====================================================================
   ICONS + CARD PRIMITIVES - added 2026-08-23 on the director's rule that a page may not be a wall
   of prose. There was no icon system: the only rule was `.icongrid .ic svg`, so any page wanting an
   icon had to invent one. One stroke set, currentColor, sized by the token below, injected into
   every route as a <symbol> sprite by reshell_site.py so no page carries its own copy.
   ===================================================================== */
.ico{width:26px;height:26px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;color:var(--ev-blue)}
.ico-sm{width:19px;height:19px}
.ico-lg{width:38px;height:38px}
.dark .ico,.blue .ico,.sec--blue .ico,.sec--ink .ico{color:#fff}

/* card: an icon, a title, a line. The unit every page is built from. */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0;
  border-top:1px solid var(--ev-line);border-left:1px solid var(--ev-line);margin:26px 0}
.card{padding:28px 26px 26px;border-right:1px solid var(--ev-line);
  border-bottom:1px solid var(--ev-line);background:transparent}
.card .ico{margin-bottom:16px}
.card h3{font-family:var(--ev-sans);font-weight:700;text-transform:uppercase;letter-spacing:-.02em;
  font-size:20px;line-height:1.15;margin:0 0 9px}
.card p{font-size:17px;line-height:1.55;margin:0 0 8px;max-width:46ch}
.card p:last-child{margin-bottom:0}
.card a{text-decoration:underline;text-underline-offset:3px}
.card .eyebrow{display:block;margin-bottom:14px}
.dark .card,.blue .card,.sec--blue .card{border-color:var(--ev-line-light)}

/* keyrow: one icon, one sentence. For the line a reader must not miss. */
.keyrow{display:flex;gap:16px;align-items:flex-start;padding:22px 24px;margin:26px 0;
  background:var(--ev-paper);border-left:3px solid var(--ev-blue);color:var(--ev-ink)}
.keyrow p{margin:0;font-size:18px;line-height:1.55;max-width:70ch;color:inherit}
/* A component that sets its own BACKGROUND must set its own TEXT COLOUR. This one did not, so in
   the blue hero it painted a near-white panel and inherited white type onto it: invisible. Caught
   on oem.html 2026-08-23. The inverted variant now covers every dark surface the site has, and the
   base rule pins ink so an unlisted surface fails readable rather than blank. */
.dark .keyrow,.blue .keyrow,.sec--blue .keyrow,.sec--ink .keyrow,
.page-hero .keyrow,.hero .keyrow,.pagehead .keyrow,.contact .keyrow{
  background:rgba(255,255,255,.10);border-left-color:#fff;color:#fff}

/* iconlist: a checklist that reads as a list of proofs, not a paragraph */
.iconlist{list-style:none;margin:22px 0;padding:0;display:grid;gap:1px;
  background:var(--ev-line);border:1px solid var(--ev-line)}
.iconlist li{display:flex;gap:14px;align-items:flex-start;padding:16px 20px;
  background:var(--ev-white);font-size:17px;line-height:1.5}
.dark .iconlist,.blue .iconlist{background:var(--ev-line-light);border-color:var(--ev-line-light)}
.dark .iconlist li,.blue .iconlist li{background:transparent}


/* =====================================================================
   LONG-FORM VERTICAL RHYTHM - added 2026-08-23
   Measured on 510-cartridges.html: every structural child of .lf computed margin-top:0 and
   margin-bottom:0 - .grid3, .grid4, .certs, .spec-table, .panel, .steps, all of them. Paragraphs
   and headings carried rhythm and components carried none, so a chip row sat welded to the
   sentence above it and a card grid touched the heading below. The director's word was
   "unnatural", and that is exactly what an element with no margin next to one with margin looks
   like. One scale, stated once, for every block the long-form can contain.
   ===================================================================== */
.lf > *{margin-top:0}
.lf > p{margin:0 0 18px}
.lf > ul,.lf > ol{margin:0 0 22px}

/* structural blocks: one gap above, one below, the same everywhere */
.lf > .cards,.lf > .grid2,.lf > .grid3,.lf > .grid4,.lf > .certs,.lf > .chips,
.lf > table,.lf > .spec-table,.lf > .steps,.lf > .iconlist,.lf > .keyrow,
.lf > .panel,.lf > .band,.lf > figure,.lf > dl{margin:30px 0 38px}

/* a heading opens a section, so it needs more air above than a block does */
.lf > h2{margin:72px 0 18px}
.lf > h3{margin:44px 0 14px}
.lf > h2:first-child,.lf > h3:first-child{margin-top:0}
/* a heading directly after a block already has that block's bottom margin under it */
.lf > .cards + h2,.lf > .grid2 + h2,.lf > .grid3 + h2,.lf > .grid4 + h2,.lf > .certs + h2,
.lf > table + h2,.lf > .steps + h2,.lf > .iconlist + h2,.lf > .keyrow + h2,
.lf > .panel + h2,.lf > dl + h2{margin-top:56px}
.lf > .cards + h3,.lf > .grid3 + h3,.lf > .certs + h3,.lf > table + h3,
.lf > .keyrow + h3,.lf > .panel + h3{margin-top:34px}

/* a lead sentence introducing a block belongs WITH it, not floating above a void */
.lf > p + .cards,.lf > p + .grid2,.lf > p + .grid3,.lf > p + .grid4,.lf > p + .certs,
.lf > p + table,.lf > p + .steps,.lf > p + .iconlist{margin-top:18px}
.lf > h2 + .cards,.lf > h2 + .grid3,.lf > h2 + .grid4,.lf > h2 + table,.lf > h2 + .steps,
.lf > h2 + .certs,.lf > h2 + .iconlist,.lf > h3 + .certs,.lf > h3 + .cards,
.lf > h3 + .panel,.lf > h3 + .keyrow{margin-top:20px}

/* a callout inside the text column must not indent past it. .panel pads 44px, which pushed its
   content clear of the left edge every other line sits on. Left-mark it instead, like .keyrow. */
.lf > .panel{padding:26px 30px;border-left:3px solid var(--ev-blue)}
.lf > .panel > *:first-child{margin-top:0}
.lf > .panel > *:last-child{margin-bottom:0}
.lf > .panel p{font-size:19px}
.lf > .panel .certs{margin:18px 0}