/* ─── tokens ─────────────────────────────────────────────────────────
   Palette taken from the NorthBrightBrew logo: navy #1B2A4A, blue #2F6FB0, amber #E8A33D and white. Shared with home.css.
   ──────────────────────────────────────────────────────────────────── */
:root{
  color-scheme:light;
  --abyss:#F5F7FB;         /* page ground */
  --panel:#FFFFFF;
  --panel-2:#E9EEF6;
  --ink:#141F36;
  --ink-2:#3B4C69;
  --muted:#57698A;
  --line:#D9E1EC;
  --line-2:#BCC9DB;

  --blue:#2F6FB0;
  --blue-2:#3F84C8;
  --blue-bright:#8AB8E8;
  --blue-ghost:#DDE8F5;
  --blue-mist:#EEF3FA;

  /* dark blues, for chrome, page heroes and the footer */
  --navy-900:#0E1729;
  --navy-850:#142038;
  --navy-800:#1B2A4A;
  --navy-700:#22355B;
  --navy-600:#2B436F;
  --navy-500:#375789;
  --d-ink:#EEF2F9;
  --d-ink-2:#B3C1D9;
  --d-muted:#8597B6;
  --d-line:rgba(170,190,225,.18);
  --d-line-2:rgba(170,190,225,.32);
  --d-card:rgba(255,255,255,.045);

  /* warm amber accent — --ember is text-safe, --ember-bright is for fills */
  --ember:#9A6510;
  --ember-2:#7E520C;
  --ember-bright:#E8A33D;
  --ember-3:#F3C06F;
  --ember-ghost:#FBF0DC;
  --on-ember:#2A1A05;

  --good:#1B7A5C;
  --warn:#8A5A07;
  --shadow:0 1px 2px rgba(20,31,54,.05), 0 8px 24px -14px rgba(20,31,54,.22);
  --shadow-lg:0 2px 4px rgba(20,31,54,.05), 0 24px 56px -28px rgba(20,31,54,.30);

  --sans:'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-xs:.6875rem; --fs-sm:.8125rem; --fs-md:.9375rem;
  --fs-base:1.0625rem; --fs-lg:1.1875rem; --fs-xl:1.4375rem;
  --fs-2xl:1.875rem; --fs-3xl:2.5rem;

  --wrap:1200px; --gut:24px; --spec:168px;
  --r:10px; --r-lg:18px; --r-pill:999px;
}

/* ─── base ───────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
body{
  margin:0; background:var(--abyss); color:var(--ink);
  font-family:var(--sans); font-size:var(--fs-base); line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-.018em; text-wrap:balance; line-height:1.12}
p{margin:0}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
:focus-visible{outline:2px solid var(--ember); outline-offset:3px; border-radius:2px}
img,svg{max-width:100%}
button{font:inherit; color:inherit}
hr{border:0; border-top:1px solid var(--line); margin:0}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.serif{font-family:var(--serif)}
.tnum{font-variant-numeric:tabular-nums}

.eyebrow{
  font-family:var(--mono); font-size:var(--fs-xs); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}

/* ─── chrome ─────────────────────────────────────────────────────────── */
.chrome{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--abyss) 88%, transparent);
  backdrop-filter:blur(12px) saturate(1.4);
  border-bottom:1px solid var(--line);
}
.chrome .wrap{display:flex; align-items:center; gap:20px; height:72px}
.brand{display:flex; align-items:center; gap:12px; color:var(--ink); font-weight:700; letter-spacing:-.02em}
.brand:hover{text-decoration:none}
.brand .mk{width:46px; height:46px; flex:none; display:block; filter:drop-shadow(0 0 1px rgba(255,255,255,.35))}
.brand .btxt{display:flex; flex-direction:column; gap:1px; min-width:0}
.brand .nm{font-size:1.28rem; line-height:1.1}
.brand .tagline{
  font-family:var(--sans); font-size:10px; font-weight:600; line-height:1.2;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); white-space:nowrap;
}
@media (max-width:520px){ .brand .tagline{display:none} }
.brand .nm b{font-weight:800}
.nav{display:flex; gap:2px; margin-left:auto; align-items:center}
.nav a{
  white-space:nowrap;
  font-size:var(--fs-sm); font-weight:500; color:var(--ink-2);
  padding:7px 11px; border-radius:var(--r);
}
.nav a:hover{background:var(--panel-2); color:var(--ink); text-decoration:none}
.tgl{
  margin-left:6px; width:34px; height:34px; display:grid; place-items:center;
  background:transparent; border:1px solid var(--line); border-radius:var(--r);
  cursor:pointer; color:var(--ink-2);
}
.tgl:hover{border-color:var(--line-2); color:var(--ink)}
.navbtn{display:none}
@media (max-width:1180px){
  .nav{display:none}
  .navbtn{display:grid; margin-left:auto}
}

/* ─── section scaffold: spec-sheet split ─────────────────────────────── */
.sec{padding-block:clamp(52px,7vw,86px); border-top:1px solid var(--line)}
.sec:first-of-type{border-top:0}
.split{display:grid; gap:26px; min-width:0}
.split > *{min-width:0}
@media (min-width:900px){
  .split{grid-template-columns:var(--spec) 1fr; gap:44px}
}
.speccol{display:flex; flex-direction:column; gap:8px}
.speccol .rule{height:2px; background:var(--ember); width:26px}
.sechead{max-width:62ch; display:flex; flex-direction:column; gap:14px}
.sechead h2{font-size:var(--fs-2xl)}
.lede{font-family:var(--serif); font-size:var(--fs-lg); line-height:1.55; color:var(--ink-2)}
.prose{font-family:var(--serif); line-height:1.62; color:var(--ink-2); max-width:64ch}
.prose + .prose{margin-top:.85em}
.prose em{font-style:italic}
.prose strong{font-weight:600; color:var(--ink)}

/* ─── hero ───────────────────────────────────────────────────────────── */
.hero{
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(180deg, var(--blue-ghost) 0%, transparent 74%),
    var(--abyss);
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--line) 70%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--line) 70%, transparent) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(120% 80% at 12% 0%, #000 0%, transparent 68%);
          mask-image:radial-gradient(120% 80% at 12% 0%, #000 0%, transparent 68%);
}
.hero .wrap{position:relative; padding-block:clamp(44px,6vw,74px) clamp(48px,6vw,80px)}
.herogrid{display:grid; gap:38px; align-items:start}
.herogrid > *{min-width:0}
@media (min-width:1000px){.herogrid{grid-template-columns:minmax(0,1fr) 452px; gap:56px}}
.h1{font-size:clamp(2.15rem,4.6vw,3.5rem); line-height:1.04; letter-spacing:-.032em; max-width:15ch}
.h1 .hl{
  color:var(--ember);
  background:linear-gradient(transparent 62%, var(--ember-ghost) 62%);
  padding-inline:.05em;
}
.hsub{font-family:var(--serif); font-size:clamp(1.0625rem,1.6vw,1.3rem); line-height:1.5; color:var(--ink-2); max-width:52ch; margin-top:20px}
.hcta{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 18px; border-radius:var(--r); font-size:var(--fs-md); font-weight:600;
  border:1px solid transparent; cursor:pointer; transition:transform .12s ease, background .16s ease, border-color .16s ease;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn.p{background:var(--ember); color:var(--on-ember); border-color:var(--ember)}
.btn.p:hover{background:var(--ember-2); border-color:var(--ember-2); color:var(--on-ember)}
.btn.s{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn.s:hover{background:var(--panel); border-color:var(--blue)}

/* ─── producer-type toggle ───────────────────────────────────────────── */
.modesw{display:inline-flex; gap:2px; padding:3px; border-radius:999px; background:var(--panel-2); border:1px solid var(--line-2)}
.modesw button{border:0; background:transparent; padding:7px 16px; border-radius:999px; font-family:var(--mono); font-size:var(--fs-xs); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); cursor:pointer; transition:background .16s ease, color .16s ease}
.modesw button[aria-pressed="true"]{background:var(--panel); color:var(--ink); box-shadow:var(--shadow)}
.modesw button:hover{color:var(--ink)}
.modesw button:focus-visible{outline:2px solid var(--ember); outline-offset:2px}
.hstat{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 18px; margin-top:36px; border-top:1px solid var(--line)}
.hstat div{padding:14px 18px 0 0; border-right:1px solid var(--line)}
.hstat div:last-child{border-right:0; padding-right:0}
@media (max-width:420px){
  .hstat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hstat div:nth-child(2){border-right:0}
  .hstat div:nth-child(3){border-top:1px solid var(--line); margin-top:12px}
}
.hstat b{display:block; font-family:var(--mono); font-size:var(--fs-xl); font-weight:600; letter-spacing:-.02em}
.hstat span{display:block; font-size:var(--fs-xs); color:var(--muted); font-family:var(--mono); letter-spacing:.09em; text-transform:uppercase; margin-top:3px}

/* ─── instrument panel ───────────────────────────────────────────────── */
.inst{
  background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); overflow:hidden;
}
.inst-hd{
  display:flex; align-items:center; gap:9px; padding:11px 16px;
  background:var(--panel-2); border-bottom:1px solid var(--line);
}
.inst-hd .dot{width:7px; height:7px; border-radius:50%; background:var(--ember); flex:none}
.inst-hd .t{font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.12em; text-transform:uppercase; font-weight:600}
.inst-hd .r{margin-left:auto; font-family:var(--mono); font-size:var(--fs-xs); color:var(--muted)}
.inst-bd{padding:18px 16px 16px}

.ctrl label{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.ctrl .lb{font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.11em; text-transform:uppercase; color:var(--muted)}
.ctrl .vl{font-family:var(--mono); font-size:var(--fs-lg); font-weight:600; letter-spacing:-.01em}
.ctrl .vl small{font-size:var(--fs-sm); font-weight:400; color:var(--muted); margin-left:3px}
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:22px; margin:6px 0 0;
  background:transparent; cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{height:4px; border-radius:2px; background:var(--line-2)}
input[type=range]::-moz-range-track{height:4px; border-radius:2px; background:var(--line-2)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:17px; height:17px; border-radius:50%;
  background:var(--ember); border:2.5px solid var(--panel); margin-top:-6.5px;
  box-shadow:0 0 0 1px var(--ember);
}
input[type=range]::-moz-range-thumb{
  width:12px; height:12px; border-radius:50%;
  background:var(--ember); border:2.5px solid var(--panel); box-shadow:0 0 0 1px var(--ember);
}
.scale{display:flex; justify-content:space-between; font-family:var(--mono); font-size:var(--fs-xs); color:var(--muted); margin-top:2px}

.readout{
  margin-top:16px; padding:15px 16px; border-radius:var(--r);
  background:var(--ember-ghost); border:1px solid color-mix(in srgb, var(--ember) 32%, transparent);
}
.readout .k{font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.11em; text-transform:uppercase; color:var(--ember)}
.readout .v{font-family:var(--mono); font-size:clamp(1.9rem,4.4vw,2.5rem); font-weight:600; letter-spacing:-.028em; line-height:1.05; margin-top:5px; color:var(--ink)}
.readout .n{font-size:var(--fs-sm); color:var(--ink-2); margin-top:6px; line-height:1.42}

.rows{margin-top:14px; display:flex; flex-direction:column}
.row{
  display:grid; grid-template-columns:1fr auto; gap:10px 12px; align-items:baseline;
  padding:10px 0; border-top:1px solid var(--line);
}
.row .rk{font-size:var(--fs-sm); color:var(--ink-2)}
.row .rk b{display:block; font-weight:600; color:var(--ink); font-size:var(--fs-md)}
.row .rv{font-family:var(--mono); font-size:var(--fs-md); font-weight:500; text-align:right; white-space:nowrap}
.row .rv i{display:block; font-style:normal; font-size:var(--fs-xs); color:var(--muted); font-weight:400; margin-top:2px}

.flag{
  display:none; align-items:flex-start; gap:9px; margin-top:12px;
  padding:10px 12px; border-radius:var(--r);
  background:var(--panel-2); border:1px solid var(--line-2); border-left:3px solid var(--warn);
  font-size:var(--fs-sm); color:var(--ink-2); line-height:1.45;
}
.flag[data-on="1"]{display:flex}
.flag b{color:var(--ink)}
.inst-ft{
  padding:11px 16px; border-top:1px solid var(--line); background:var(--panel-2);
  font-family:var(--mono); font-size:var(--fs-xs); color:var(--muted); line-height:1.55;
}

/* ─── gauges ─────────────────────────────────────────────────────────── */
.gauges{display:grid; gap:18px; grid-template-columns:minmax(0,1fr)}
.gauges > *{min-width:0}
@media (min-width:720px){.gauges{grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}}
.gauge{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:18px 18px 16px; box-shadow:var(--shadow);
}
.gauge h3{font-size:var(--fs-lg); margin-bottom:4px}
.gauge .u{font-family:var(--mono); font-size:var(--fs-xs); color:var(--muted); letter-spacing:.09em; text-transform:uppercase}
.bars{margin-top:16px; display:flex; flex-direction:column; gap:11px}
.bar .bl{display:flex; justify-content:space-between; align-items:baseline; font-size:var(--fs-sm); margin-bottom:5px}
.bar .bl span{color:var(--ink-2)}
.bar .bl b{font-family:var(--mono); font-weight:600; font-size:var(--fs-md)}
.track{height:9px; border-radius:2px; background:var(--panel-2); overflow:hidden; border:1px solid var(--line)}
.fill{height:100%; width:0; border-radius:1px; transition:width .9s cubic-bezier(.22,.8,.3,1)}
.fill.med{background:repeating-linear-gradient(135deg, var(--blue) 0 6px, color-mix(in srgb, var(--blue) 74%, transparent) 6px 12px)}
.fill.best{background:var(--ember)}
.rates{margin:16px 0 0; padding:0; display:flex; flex-direction:column}
.rates div{display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:9px 0; border-top:1px solid var(--line)}
.rates div:first-child{border-top:0; padding-top:0}
.rates dt{font-size:var(--fs-sm); color:var(--ink-2)}
.rates dd{margin:0; font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:var(--fs-md); font-weight:600; white-space:nowrap}
.rates dd span{font-weight:400; font-size:var(--fs-xs); color:var(--muted); margin-left:1px}
.gnote{margin-top:14px; padding-top:12px; border-top:1px solid var(--line); font-size:var(--fs-sm); color:var(--muted); line-height:1.45}
.gnote b{color:var(--ink-2); font-weight:600}

/* ─── steps ──────────────────────────────────────────────────────────── */
.steps{display:grid; gap:1px; grid-template-columns:minmax(0,1fr); background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
@media (min-width:620px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1020px){.steps{grid-template-columns:repeat(4,minmax(0,1fr))}}
.step{background:var(--panel); padding:20px 18px; display:flex; flex-direction:column; gap:9px}
.step .no{
  font-family:var(--mono); font-size:var(--fs-xs); font-weight:600; letter-spacing:.1em;
  color:var(--ember); display:flex; align-items:center; gap:8px;
}
.step .no::after{content:""; flex:1; height:1px; background:var(--line)}
.step h3{font-size:var(--fs-lg)}
.step p{font-size:var(--fs-md); color:var(--ink-2); line-height:1.5}
.step .out{
  margin-top:auto; padding-top:11px; font-family:var(--mono); font-size:var(--fs-xs);
  color:var(--muted); letter-spacing:.05em; line-height:1.5;
}
.step .out b{color:var(--ink-2); font-weight:500}

.slogan{
  margin-top:26px; padding-top:18px; border-top:1px solid var(--line);
  font-size:var(--fs-xl); font-weight:700; letter-spacing:-.022em; color:var(--ember);
}
.slogan span{
  background:linear-gradient(transparent 62%, var(--ember-ghost) 62%); padding-inline:.05em;
}

/* ─── footnotes ──────────────────────────────────────────────────────── */
a.fnref{
  font-family:var(--mono); font-size:.66em; font-weight:600; line-height:0;
  vertical-align:super; color:var(--ember); text-decoration:none; padding-inline:1px 2px;
}
a.fnref:hover{text-decoration:underline}
a.fnref::before{content:"["}
a.fnref::after{content:"]"}

ol.notes{list-style:none; counter-reset:note; margin:0; padding:0; display:grid; gap:11px}
@media (min-width:760px){ol.notes{grid-template-columns:1fr 1fr; gap:11px 32px}}
ol.notes li{
  counter-increment:note; position:relative; padding-left:28px;
  font-size:var(--fs-sm); color:var(--muted); line-height:1.45;
}
ol.notes li::before{
  content:"[" counter(note) "]"; position:absolute; left:0; top:1px;
  font-family:var(--mono); font-size:var(--fs-xs); font-weight:600; color:var(--ember);
}
ol.notes li:target::before{color:var(--ink)}
ol.notes b{color:var(--ink-2); font-weight:600}

/* ─── performance band ───────────────────────────────────────────────── */
.bandset{margin-top:34px; padding-top:24px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px}
.bandrow .bl{font-family:var(--mono); font-size:var(--fs-xs); font-weight:500; letter-spacing:.11em; text-transform:uppercase; color:var(--muted)}
.bandtrack{
  position:relative; display:flex; height:14px; margin-top:30px;
  border:1px solid var(--line-2); border-radius:2px; background:var(--panel);
}
.bandtrack .zone{height:100%}
.zone.best{background:var(--ember); flex:0 0 30%}
.zone.mid{background:color-mix(in srgb, var(--blue) 20%, var(--panel)); flex:0 0 34%; border-inline:1px solid var(--line-2)}
.zone.high{
  flex:1 1 auto;
  background:repeating-linear-gradient(135deg, var(--panel-2) 0 5px, var(--panel) 5px 10px);
}
.bandtrack .mark{position:absolute; top:-7px; bottom:-7px; width:2px; background:var(--ink)}
.bandtrack .mark::after{
  content:attr(data-l); position:absolute; bottom:calc(100% + 7px); left:50%;
  transform:translateX(-50%); white-space:nowrap;
  font-family:var(--mono); font-size:var(--fs-xs); font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink);
}
.bandzones{display:flex; margin-top:9px; font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}
.bandzones span:nth-child(1){flex:0 0 30%; color:var(--ember)}
.bandzones span:nth-child(2){flex:0 0 34%}
.bandzones span:nth-child(3){flex:1 1 auto; text-align:right}
.bandnote{margin-top:16px; font-family:var(--serif); font-size:var(--fs-md); line-height:1.55; color:var(--ink-2); max-width:56ch}

/* ─── products ───────────────────────────────────────────────────────── */
.prods{display:grid; gap:18px; grid-template-columns:minmax(0,1fr)}
.prods > *{min-width:0}
@media (min-width:760px){.prods{grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}}
.prod{
  position:relative; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:22px 20px 20px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:12px;
  transition:border-color .16s ease, transform .16s ease;
}
.prod:hover{border-color:var(--line-2); transform:translateY(-2px)}
.prod .ph{display:flex; align-items:flex-start; gap:12px}
.prod .glyph{
  width:36px; height:36px; flex:none; border-radius:var(--r); display:grid; place-items:center;
  background:var(--blue-ghost); border:1px solid color-mix(in srgb, var(--blue) 26%, transparent);
  color:var(--blue);
}
.prod .glyph svg{width:19px; height:19px}
.prod h3{font-size:var(--fs-xl); letter-spacing:-.024em}
.prod .sub{font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:3px}
.tag{
  margin-left:auto; flex:none; font-family:var(--mono); font-size:var(--fs-xs); font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; padding:4px 8px; border-radius:2px; white-space:nowrap;
}
.tag.live{background:color-mix(in srgb, var(--good) 15%, transparent); color:var(--good); border:1px solid color-mix(in srgb, var(--good) 35%, transparent)}
.tag.beta{background:var(--ember-ghost); color:var(--ember); border:1px solid color-mix(in srgb, var(--ember) 34%, transparent)}
.tag.dev{background:var(--panel-2); color:var(--muted); border:1px solid var(--line-2)}
.tag.req{background:var(--blue-ghost); color:var(--blue); border:1px solid color-mix(in srgb, var(--blue) 34%, transparent)}
.prod p{font-size:var(--fs-md); color:var(--ink-2); line-height:1.55}
.plist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.plist li{position:relative; padding-left:17px; font-size:var(--fs-sm); color:var(--ink-2); line-height:1.45}
.plist li::before{
  content:""; position:absolute; left:0; top:.52em; width:7px; height:1px; background:var(--ember);
}
/* let a long status tag drop onto its own line rather than forcing the card
   wider than its column — needed at any width where the card is narrow (phones,
   and the 900-940px band where the spec column and the 2-up grid both apply) */
.prod .ph{flex-wrap:wrap}
@media (max-width:520px){
  .prod .tag{margin-left:0}
}
.prod .pf{margin-top:auto; padding-top:13px; border-top:1px solid var(--line); font-size:var(--fs-sm)}
.prod .pf a{font-weight:600}

/* ─── field note ─────────────────────────────────────────────────────── */
.note{
  background:var(--panel); border:1px solid var(--line-2); border-left:4px solid var(--ember);
  border-radius:var(--r-lg); padding:24px 24px 22px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:14px;
}
.note h3{font-size:var(--fs-xl)}
.note .prose{max-width:none}
.cliff{
  display:grid; gap:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  font-family:var(--mono); font-size:var(--fs-sm);
}
@media (min-width:640px){.cliff{grid-template-columns:repeat(3,1fr)}}
.cliff div{padding:13px 15px; background:var(--panel-2); border-bottom:1px solid var(--line)}
.cliff div:last-child{border-bottom:0}
@media (min-width:640px){
  .cliff div{border-bottom:0; border-right:1px solid var(--line)}
  .cliff div:last-child{border-right:0}
}
.cliff b{display:block; font-size:var(--fs-lg); font-weight:600; letter-spacing:-.02em; color:var(--ink)}
.cliff span{display:block; font-size:var(--fs-xs); letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-top:4px}

/* ─── money / incentives table ───────────────────────────────────────── */
.tblwrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); box-shadow:var(--shadow)}
table{border-collapse:collapse; width:100%; min-width:620px}
thead th{
  text-align:left; font-family:var(--mono); font-size:var(--fs-xs); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  padding:12px 16px; background:var(--panel-2); border-bottom:1px solid var(--line); white-space:nowrap;
}
tbody td{padding:13px 16px; border-bottom:1px solid var(--line); font-size:var(--fs-md); color:var(--ink-2); vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody td:first-child{color:var(--ink); font-weight:600}
tbody td.num{font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--ink)}

/* ─── engage ─────────────────────────────────────────────────────────── */
.eng{display:grid; gap:18px}
@media (min-width:820px){.eng{grid-template-columns:repeat(3,1fr)}}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:20px 18px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--shadow);
}
.card.hi{border-color:var(--ember); box-shadow:var(--shadow-lg)}
.card h3{font-size:var(--fs-lg)}
.card .pr{font-family:var(--mono); font-size:var(--fs-xl); font-weight:600; letter-spacing:-.02em}
.card .pr small{font-size:var(--fs-sm); font-weight:400; color:var(--muted)}
.card p{font-size:var(--fs-md); color:var(--ink-2); line-height:1.5}

/* ─── cta band ───────────────────────────────────────────────────────── */
.band{
  border-top:1px solid var(--line);
  background:
    linear-gradient(180deg, transparent, var(--blue-ghost)),
    var(--abyss);
}
.band .wrap{padding-block:clamp(48px,6vw,72px); display:flex; flex-direction:column; gap:16px; align-items:flex-start}
.band h2{font-size:var(--fs-3xl); max-width:18ch; letter-spacing:-.028em}

/* ─── sources / footer ───────────────────────────────────────────────── */
.srclist{list-style:none; margin:0; padding:0; display:grid; gap:9px}
@media (min-width:760px){.srclist{grid-template-columns:1fr 1fr; gap:9px 32px}}
.srclist li{font-size:var(--fs-sm); color:var(--muted); line-height:1.45; padding-left:15px; position:relative}
.srclist li::before{content:"—"; position:absolute; left:0; color:var(--line-2)}
.srclist b{color:var(--ink-2); font-weight:600}
.foot{border-top:1px solid var(--line); background:var(--panel)}
.foot .wrap{padding-block:26px; display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center}
.foot .fl{font-size:var(--fs-sm); color:var(--muted)}
.foot .fn{margin-left:auto; display:flex; gap:18px; font-size:var(--fs-sm)}

/* ─── reveal ─────────────────────────────────────────────────────────── */
/* ─── late overrides: keep utility classes above component rules ─────── */
.hero + .sec{border-top:0}
p.eyebrow, span.eyebrow, div.eyebrow{
  font-family:var(--mono); font-size:var(--fs-xs); font-weight:500; line-height:1.45;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.card .fine{font-size:var(--fs-sm); color:var(--muted); line-height:1.45; margin-top:auto; padding-top:6px}
.readout .k{color:var(--ember)}
@media (max-width:430px){.inst-hd .r{display:none}}

/* ─── producer-type mode visibility ───────────────────────────────────── */
.m-dist{display:none}
[data-mode="distillery"] .m-brew{display:none}
[data-mode="distillery"] .m-dist{display:revert}
[data-mode="distillery"] .hstat.m-dist{display:grid}
[data-mode="distillery"] .bars.m-dist{display:flex}
[data-mode="distillery"] .bandset.m-dist{display:flex}

/* ─── region visibility (Pennsylvania / Ontario) ───────────────────────── */
.r-ca{display:none}
[data-region="ca"] .r-us{display:none}
[data-region="ca"] .r-ca{display:revert}
.regionsw{display:inline-flex; gap:2px; padding:3px; border-radius:999px; background:var(--panel-2); border:1px solid var(--line-2); margin-left:8px}
.regionsw button{border:0; background:transparent; padding:7px 14px; border-radius:999px; font-family:var(--mono); font-size:var(--fs-xs); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); cursor:pointer; transition:background .16s ease, color .16s ease}
.regionsw button[aria-pressed="true"]{background:var(--panel); color:var(--ink); box-shadow:var(--shadow)}
.regionsw button:hover{color:var(--ink)}
.regionsw button:focus-visible{outline:2px solid var(--ember); outline-offset:2px}
.togglerow{display:flex; flex-wrap:wrap; gap:8px 0; align-items:center}
@media (max-width:480px){.togglerow{flex-direction:column; align-items:flex-start; gap:8px}
  .togglerow .regionsw{margin-left:0}}

.rv{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,.8,.3,1)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1; transform:none; transition:none}
  .fill{transition:none}
  .btn:hover,.prod:hover{transform:none}
  *{scroll-behavior:auto !important}
}
html{scroll-behavior:smooth; scroll-padding-top:88px}

/* ═══════════════════════════════════════════════════════════════════════
   SHARED ADD-ONS — blog, legal, contact, product preview/login pages
   ═══════════════════════════════════════════════════════════════════════ */

/* breadcrumb-ish page intro used on subpages */
.pagehero{padding-block:clamp(40px,6vw,64px) 8px; border-bottom:1px solid var(--line)}
.pagehero .eyebrow{margin-bottom:10px}
.pagehero h1{font-size:clamp(1.9rem,4vw,2.6rem); letter-spacing:-.03em; max-width:22ch}
.pagehero .lede{margin-top:14px}
.crumb{font-family:var(--mono); font-size:var(--fs-xs); color:var(--muted); letter-spacing:.04em}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--blue)}

/* login / auth card, reused on Efficiency Platform + Exchange entry points */
.authcard{
  max-width:420px; background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); padding:26px 24px 24px;
}
.authcard h3{font-size:var(--fs-xl)}
.authcard p.sub{font-family:var(--serif); color:var(--ink-2); margin-top:8px; line-height:1.5}
.authcard form{display:flex; flex-direction:column; gap:12px; margin-top:18px}
.authcard label{font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:5px}
.authcard input, .authcard select{
  width:100%; padding:10px 12px; border-radius:var(--r); border:1px solid var(--line-2);
  background:var(--abyss); color:var(--ink); font:inherit; font-size:var(--fs-md);
}
.authcard input:focus, .authcard select:focus{outline:2px solid var(--blue); outline-offset:1px}
.authcard .tglrow{display:flex; gap:2px; padding:3px; border-radius:999px; background:var(--panel-2); border:1px solid var(--line-2); margin-bottom:4px}
.authcard .tglrow button{flex:1; border:0; background:transparent; padding:8px 10px; border-radius:999px; font-size:var(--fs-sm); font-weight:600; color:var(--muted); cursor:pointer}
.authcard .tglrow button[aria-pressed="true"]{background:var(--panel); color:var(--ink); box-shadow:var(--shadow)}
.authnote{font-size:var(--fs-xs); color:var(--muted); line-height:1.5; margin-top:14px; padding-top:14px; border-top:1px solid var(--line)}
.autherr{display:none; padding:10px 12px; border-radius:var(--r); background:var(--ember-ghost); border:1px solid color-mix(in srgb, var(--ember) 34%, transparent); color:var(--ember-2); font-size:var(--fs-sm)}
.autherr[data-on="1"]{display:block}

/* preview panel — locked / unlocked workspace states */
.workspace{
  background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.workspace .wbar{display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--panel-2); border-bottom:1px solid var(--line)}
.workspace .wbar .dot{width:7px; height:7px; border-radius:50%; background:var(--good); flex:none}
.workspace .wbar b{font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase}
.workspace iframe{display:block; width:100%; border:0; height:min(82vh, 900px); background:var(--abyss)}
.lockwrap{position:relative}
.lockwrap .locked-fade{
  position:absolute; inset:0; backdrop-filter:blur(3px) saturate(.7); background:color-mix(in srgb, var(--abyss) 55%, transparent);
  display:flex; align-items:center; justify-content:center; padding:24px;
}

/* preview mini-tool */
.preview-tool{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:22px 20px}
.preview-tool .pf-grid{display:grid; gap:16px; margin-top:16px}
@media (min-width:640px){.preview-tool .pf-grid{grid-template-columns:repeat(3,1fr)}}
.preview-tool .fld label{display:block; font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.preview-tool .fld input{width:100%; padding:9px 11px; border-radius:var(--r); border:1px solid var(--line-2); background:var(--abyss); color:var(--ink); font:inherit; font-size:var(--fs-md)}
.preview-tool .presult{margin-top:18px; padding:16px; border-radius:var(--r); background:var(--blue-ghost); border:1px solid color-mix(in srgb, var(--blue) 30%, transparent)}
.preview-tool .presult .pv{font-family:var(--mono); font-size:clamp(1.6rem,3.6vw,2.1rem); font-weight:600; letter-spacing:-.02em; color:var(--ink)}
.preview-tool .presult .pl{font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--blue)}
.preview-tool .presult .pn{font-size:var(--fs-sm); color:var(--ink-2); margin-top:6px; line-height:1.45}

/* tier / plan cards, reused for Efficiency Platform pricing */
.tiers{display:grid; gap:18px}
@media (min-width:820px){.tiers{grid-template-columns:repeat(3,1fr)}}

/* blog */
.blogrid{display:grid; gap:20px}
@media (min-width:700px){.blogrid{grid-template-columns:repeat(2,1fr)}}
.postcard{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow);
  padding:22px 20px 20px; display:flex; flex-direction:column; gap:10px; transition:border-color .16s ease, transform .16s ease;
}
.postcard:hover{border-color:var(--line-2); transform:translateY(-2px)}
.postcard .tag{align-self:flex-start; font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.09em; text-transform:uppercase; color:var(--blue); background:var(--blue-ghost); padding:3px 8px; border-radius:2px}
.postcard h3{font-size:var(--fs-xl); letter-spacing:-.02em}
.postcard p{font-size:var(--fs-md); color:var(--ink-2); line-height:1.55}
.postcard .meta{font-family:var(--mono); font-size:var(--fs-xs); color:var(--muted); margin-top:auto; padding-top:10px; border-top:1px solid var(--line)}
.postcard a.stretch{position:absolute; inset:0}
.postcard{position:relative}

.article{max-width:70ch}
.article .lede{font-size:var(--fs-lg)}
.article h2{margin-top:32px; font-size:var(--fs-xl)}
.article h3{margin-top:24px; font-size:var(--fs-lg)}
.article ul, .article ol{font-family:var(--serif); color:var(--ink-2); line-height:1.62; padding-left:1.3em}
.article li + li{margin-top:.4em}

/* legal doc tabs */
.legaltabs{display:flex; flex-wrap:wrap; gap:2px; padding:3px; border-radius:999px; background:var(--panel-2); border:1px solid var(--line-2); width:fit-content}
.legaltabs button{border:0; background:transparent; padding:9px 16px; border-radius:999px; font-family:var(--mono); font-size:var(--fs-xs); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); cursor:pointer}
.legaltabs button[aria-pressed="true"]{background:var(--panel); color:var(--ink); box-shadow:var(--shadow)}
.legaldoc{display:none; margin-top:26px}
.legaldoc.on{display:block}
.legaldoc .docmeta{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:18px}
.doctag{font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.08em; text-transform:uppercase; padding:4px 9px; border-radius:2px; background:var(--ember-ghost); color:var(--ember); border:1px solid color-mix(in srgb, var(--ember) 34%, transparent)}
.dl-btn{margin-left:auto; font-size:var(--fs-sm); font-weight:600}
.legalbody{font-family:var(--serif); color:var(--ink-2); line-height:1.65; max-width:74ch}
.legalbody h4{font-family:var(--sans); color:var(--ink); font-size:var(--fs-lg); margin-top:26px; margin-bottom:6px}
.legalbody h4:first-child{margin-top:0}
.legalbody ul{padding-left:1.2em; margin-top:6px}
.legalbody li + li{margin-top:.5em}
.legalbody .callout{
  margin-top:18px; padding:14px 16px; border-radius:var(--r); background:var(--panel-2);
  border:1px solid var(--line-2); border-left:3px solid var(--warn); font-family:var(--sans); font-size:var(--fs-sm); color:var(--ink-2);
}

/* contact form */
.contactgrid{display:grid; gap:32px}
@media (min-width:900px){.contactgrid{grid-template-columns:1fr 1fr}}
.cform{display:flex; flex-direction:column; gap:14px}
.cform label{font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.cform input, .cform select, .cform textarea{
  width:100%; margin-top:5px; padding:10px 12px; border-radius:var(--r); border:1px solid var(--line-2);
  background:var(--panel); color:var(--ink); font:inherit; font-size:var(--fs-md); resize:vertical;
}
.cform input:focus, .cform select:focus, .cform textarea:focus{outline:2px solid var(--blue); outline-offset:1px}
.cinfo{display:flex; flex-direction:column; gap:16px}
.cinfo .citem{display:flex; gap:12px; padding:14px 0; border-top:1px solid var(--line)}
.cinfo .citem:first-child{border-top:0; padding-top:0}
.cinfo .citem b{display:block; font-size:var(--fs-md)}
.cinfo .citem span{font-size:var(--fs-sm); color:var(--muted)}
.formnote{font-size:var(--fs-sm); color:var(--muted); margin-top:4px}
.toast{display:none; margin-top:14px; padding:12px 14px; border-radius:var(--r); background:color-mix(in srgb, var(--good) 14%, transparent); border:1px solid color-mix(in srgb, var(--good) 34%, transparent); color:var(--good); font-size:var(--fs-sm)}
.toast[data-on="1"]{display:block}

/* mobile nav dropdown for subpages (blog/legal/contact/efficiency wrapper) */
@media (max-width:1180px){
  .nav.mobopen{
    display:flex; flex-direction:column; position:absolute; top:72px; left:0; right:0;
    background:var(--panel); border-bottom:1px solid var(--line); padding:8px; gap:2px; z-index:70;
    box-shadow:var(--shadow-lg);
  }
  .nav.mobopen a{padding:11px 12px}
}

/* ══════════════════════════════════════════════════════════════════════
   SCHEME — blue ground, warm amber accent.
   Appended last so it wins over the older rules above without
   disturbing the existing class contract used by every page.
   ══════════════════════════════════════════════════════════════════════ */

/* ── wordmark: North (light) · Bright (blue) · Brew (amber) ─────────── */
.brand .nm i{font-style:normal; font-weight:800; color:inherit}
.brand .nm b{color:var(--ember-bright)}

/* ── header ────────────────────────────────────────────────────────── */
.chrome{
  background:color-mix(in srgb, var(--navy-900) 86%, transparent);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--d-line);
}
.chrome .wrap{height:76px; gap:18px}
.brand{color:var(--d-ink)}
.brand:hover{color:#fff}
.brand .tagline{color:var(--d-ink-2); letter-spacing:.14em}
.nav a{color:var(--d-ink-2); border-radius:var(--r-pill); padding:9px 13px}
.nav a:hover{background:rgba(255,255,255,.08); color:#fff}
.nav a.cta{background:var(--ember-bright); color:var(--on-ember); font-weight:600; margin-left:8px; padding:10px 18px}
.nav a.cta:hover{background:var(--ember-3); color:var(--on-ember)}
.tgl{border-color:var(--d-line-2); color:var(--d-ink); border-radius:var(--r-pill); width:40px; height:40px}
.tgl:hover{border-color:var(--blue-bright); color:#fff}
@media (max-width:1180px){
  .nav.mobopen{
    display:flex; position:absolute; left:0; right:0; top:76px;
    flex-direction:column; align-items:stretch; gap:2px;
    padding:14px var(--gut) 20px; background:var(--navy-850);
    border-bottom:1px solid var(--d-line);
  }
  .nav.mobopen a{padding:12px 14px; border-radius:var(--r)}
  .nav.mobopen a.cta{margin-left:0; margin-top:8px; text-align:center}
}

/* ── page hero: dark band under the header ─────────────────────────── */
.pagehero{
  position:relative; border-bottom:0; color:var(--d-ink);
  background:
    radial-gradient(120% 90% at 88% 4%, rgba(47,111,176,.22) 0%, transparent 58%),
    radial-gradient(80% 70% at 6% 96%, rgba(232,163,61,.10) 0%, transparent 62%),
    linear-gradient(178deg, var(--navy-850) 0%, var(--navy-800) 60%, var(--navy-900) 100%);
  padding-block:clamp(44px,6vw,72px) clamp(40px,5vw,60px);
}
.pagehero::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:
    linear-gradient(to right, rgba(170,190,225,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(170,190,225,.10) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(115% 90% at 10% 0%, #000 0%, transparent 70%);
          mask-image:radial-gradient(115% 90% at 10% 0%, #000 0%, transparent 70%);
}
.pagehero .wrap{position:relative; z-index:1}
.pagehero h1{color:#fff; font-size:clamp(2rem,4.2vw,3rem); letter-spacing:-.034em; max-width:24ch}
.pagehero .lede{color:var(--d-ink-2); max-width:70ch}
.pagehero .crumb{color:var(--d-muted)}
.pagehero .crumb a{color:var(--d-muted)}
.pagehero .crumb a:hover{color:var(--blue-bright)}
.pagehero .eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 15px 7px 12px; border-radius:var(--r-pill);
  border:1px solid var(--d-line-2); background:rgba(255,255,255,.05);
  color:var(--d-ink-2);
}
.pagehero .eyebrow::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--ember-bright); flex:none}
.pagehero + .sec{border-top:0}

/* ── buttons ───────────────────────────────────────────────────────── */
.btn{padding:12px 20px; border-radius:var(--r-pill); transition:transform .15s ease, background .18s ease, border-color .18s ease, color .18s ease}
.btn.p{background:var(--ember-bright); color:var(--on-ember); border-color:var(--ember-bright)}
.btn.p:hover{background:var(--ember-3); border-color:var(--ember-3); color:var(--on-ember)}
.btn.s{border-color:var(--line-2)}
.btn.s:hover{background:var(--panel); border-color:var(--navy-500); color:var(--navy-700)}
.pagehero .btn.s{color:var(--d-ink); border-color:var(--d-line-2); background:transparent}
.pagehero .btn.s:hover{background:rgba(255,255,255,.07); border-color:var(--blue-bright); color:#fff}

/* ── accent fills ──────────────────────────────────────────────────── */
.speccol .rule{background:var(--ember-bright); width:30px}
.fill.best{background:linear-gradient(90deg,var(--ember-2),var(--ember-3))}
.fill.med{background:linear-gradient(90deg,var(--navy-500),var(--blue-2))}
.track{height:10px; border-radius:var(--r-pill); border:0; background:var(--panel-2)}
.fill{border-radius:var(--r-pill)}
.zone.best{background:linear-gradient(90deg,var(--ember-3),var(--ember-bright))}
.zone.mid{background:rgba(47,111,176,.28)}
.inst-hd .dot{background:var(--ember-bright)}
.card.hi{border-color:var(--ember-bright)}
.slogan span{color:var(--navy-600); background:none}
.h1 .hl{color:var(--ember); background:linear-gradient(transparent 62%, var(--ember-ghost) 62%)}

/* ── surfaces: rounder cards, softer rules ─────────────────────────── */
.prod, .gauge, .card, .postcard, .note, .authcard, .preview-tool, .tblwrap, .workspace{border-radius:var(--r-lg)}
.prod:hover, .postcard:hover{border-color:var(--line-2); box-shadow:var(--shadow-lg)}
.steps{border-radius:var(--r-lg)}
.tag, .doctag, .postcard .tag{border-radius:var(--r-pill); padding:5px 11px}
.tag.beta{background:var(--ember-ghost); color:var(--ember); border-color:color-mix(in srgb, var(--ember) 38%, transparent)}
.doctag{background:var(--ember-ghost); color:var(--ember); border-color:color-mix(in srgb, var(--ember) 38%, transparent)}
.plist li::before{
  content:""; position:absolute; left:0; top:.42em; width:13px; height:13px; border-radius:50%;
  background-color:var(--blue-ghost);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%231C6FA8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:contain;
}
.plist li{padding-left:24px}
.prod .glyph{
  width:46px; height:46px; border-radius:14px;
  background:var(--navy-800); color:var(--ember-bright); border:0;
}
.prod .glyph svg{width:22px; height:22px}
.legalbody .callout{border-left-color:var(--ember-bright)}
.modesw, .regionsw, .legaltabs, .authcard .tglrow{border-color:var(--line-2); background:var(--panel-2)}
.modesw button[aria-pressed="true"], .regionsw button[aria-pressed="true"],
.legaltabs button[aria-pressed="true"], .authcard .tglrow button[aria-pressed="true"]{
  background:var(--navy-700); color:#fff; box-shadow:none;
}
:focus-visible{outline:2px solid var(--ember-bright)}

/* ── CTA band ──────────────────────────────────────────────────────── */
.band{
  position:relative; color:var(--d-ink); border:0;
  background:
    radial-gradient(120% 90% at 85% 6%, rgba(47,111,176,.22) 0%, transparent 58%),
    linear-gradient(178deg, var(--navy-850) 0%, var(--navy-800) 60%, var(--navy-900) 100%);
}
.band h2{color:#fff}
.band .prose, .band .lede{color:var(--d-ink-2)}
.band .eyebrow{color:var(--d-muted)}
.band .btn.s{color:var(--d-ink); border-color:var(--d-line-2)}
.band .btn.s:hover{background:rgba(255,255,255,.07); border-color:var(--blue-bright); color:#fff}

/* ── footer ────────────────────────────────────────────────────────── */
.foot{background:var(--navy-900); border-top:1px solid var(--d-line); color:var(--d-ink-2)}
.foot .wrap{padding-block:34px}
.foot .fl{color:var(--d-muted)}
.foot .fn a{color:var(--d-ink-2)}
.foot .fn a:hover{color:#fff}

/* ── expanded footer (shared with the homepage) ────────────────────── */
.foot .wrap{display:block; padding-block:56px 34px}
.footgrid{display:grid; gap:34px}
@media (min-width:760px){.footgrid{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:44px}}
.foot .fbrand .fmk{display:block; width:128px; height:128px; margin-bottom:6px; filter:drop-shadow(0 0 1px rgba(255,255,255,.3))}
.foot .fbrand .nm{display:none}
.foot .fbrand .nm{font-size:1.2rem; font-weight:700; color:#fff; letter-spacing:-.022em}
.foot .fbrand .nm b{color:var(--blue-bright); font-weight:800}
.foot .fbrand .nm i{font-style:normal; color:var(--ember-bright); font-weight:800}
.foot .fbrand p{margin-top:14px; font-size:var(--fs-sm); line-height:1.65; max-width:42ch; color:var(--d-muted)}
.foot h4{
  font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.13em; text-transform:uppercase;
  color:var(--d-ink); font-weight:600; margin:0 0 16px;
}
.foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
.foot a{color:var(--d-ink-2); font-size:var(--fs-sm)}
.foot a:hover{color:#fff}
.footbar{
  margin-top:44px; padding-top:24px; border-top:1px solid var(--d-line);
  display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center;
  font-size:var(--fs-sm); color:var(--d-muted);
}
.footbar .fn{margin-left:auto; display:flex; gap:22px; flex-wrap:wrap}

/* keep the long product nav inside the page at mid widths */
@media (max-width:1340px){
  .chrome .wrap{gap:12px}
  .nav a{padding:8px 10px}
  .nav a.cta{padding:9px 15px; margin-left:4px}
}

/* things that exist but are not open yet: named, never linked */
.soon{color:var(--muted); font-weight:500}
.soon em{font-style:normal; color:var(--muted); opacity:.85}
.soon a{font-weight:600}
.foot .soon{font-size:var(--fs-sm); color:var(--d-muted)}
.foot .soon em{color:var(--d-muted)}