/* ══════════════════════════════════════════════════════════════════════
   NorthBrightBrew — home.css
   Homepage design system. Colors from the logo: navy #1B2A4A, blue #2F6FB0, amber #E8A33D, white.
   Scoped to index.html only; the rest of the site still uses site.css.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  color-scheme:light;

  /* ── blues: the spine of the system ── */
  --navy-900:#0E1729;
  --navy-850:#142038;
  --navy-800:#1B2A4A;
  --navy-700:#22355B;
  --navy-600:#2B436F;
  --navy-500:#375789;
  --blue:#2F6FB0;
  --blue-2:#3F84C8;
  --blue-bright:#8AB8E8;
  --blue-ghost:#DDE8F5;
  --blue-mist:#EEF3FA;

  /* ── light surfaces ── */
  --paper:#F5F7FB;
  --panel:#FFFFFF;
  --panel-2:#E9EEF6;
  --line:#D9E1EC;
  --line-2:#BCC9DB;

  /* ── ink ── */
  --ink:#141F36;
  --ink-2:#3B4C69;
  --muted:#57698A;

  /* ── on dark ── */
  --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 ── */
  --amber:#E8A33D;
  --amber-2:#9A6510;
  --amber-3:#F3C06F;
  --amber-ghost:#FBF0DC;
  --on-amber:#2A1A05;

  --good:#1B7A5C;

  --shadow-sm:0 1px 2px rgba(20,31,54,.05), 0 6px 18px -12px rgba(20,31,54,.20);
  --shadow:0 2px 4px rgba(20,31,54,.05), 0 18px 44px -24px rgba(20,31,54,.28);
  --shadow-lg:0 4px 8px rgba(20,31,54,.06), 0 40px 80px -40px rgba(20,31,54,.40);

  --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.9rem; --fs-3xl:2.6rem;

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

/* ─── base ─────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:92px}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:var(--fs-base); line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-.026em; text-wrap:balance; line-height:1.1}
p{margin:0}
a{color:var(--blue); text-decoration:none}
a:hover{color:var(--navy-600)}
img,svg{max-width:100%}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--amber); outline-offset:3px; border-radius:4px}

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

/* an italic serif word, the one flourish in the type system */
.em{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.01em}

/* ─── eyebrow pill ─────────────────────────────────────────────────── */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:var(--fs-xs); font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--muted);
}
.pill{
  padding:7px 15px 7px 12px; border-radius:var(--r-pill);
  border:1px solid var(--line-2); background:var(--panel);
  color:var(--navy-600);
}
.pill::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--amber); flex:none;
}
.ondark .pill, .pill.ondark{
  border-color:var(--d-line-2); background:rgba(255,255,255,.05); color:var(--d-ink-2);
}

/* ─── buttons ──────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 22px; border-radius:var(--r-pill);
  font-size:var(--fs-md); font-weight:600; letter-spacing:-.01em;
  border:1px solid transparent; cursor:pointer;
  transition:transform .15s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn svg{width:15px; height:15px; flex:none; transition:transform .18s ease}
.btn:hover svg{transform:translateX(3px)}
.btn.p{background:var(--amber); color:var(--on-amber); border-color:var(--amber)}
.btn.p:hover{background:var(--amber-3); border-color:var(--amber-3); color:var(--on-amber)}
.btn.s{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn.s:hover{background:var(--panel); border-color:var(--navy-500); color:var(--navy-700)}
.btn.b{background:var(--navy-700); color:#fff; border-color:var(--navy-700)}
.btn.b:hover{background:var(--navy-600); border-color:var(--navy-600); color:#fff}
.ondark .btn.s{color:var(--d-ink); border-color:var(--d-line-2)}
.ondark .btn.s:hover{background:rgba(255,255,255,.07); border-color:var(--blue-bright); color:#fff}

/* ─── header ───────────────────────────────────────────────────────── */
.chrome{
  position:sticky; top:0; z-index:80;
  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{display:flex; align-items:center; gap:18px; height:76px}
.brand{display:flex; align-items:center; gap:12px; color:var(--d-ink); font-weight:700; letter-spacing:-.022em}
.brand:hover{color:#fff}
.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:2px; min-width:0}
.brand .nm{font-size:1.24rem; line-height:1.05}
.brand .nm b{font-weight:800; color:var(--amber)}
.brand .nm i{font-style:normal; font-weight:800; color:inherit}
.brand .tagline{
  font-family:var(--sans); font-size:10px; font-weight:600; line-height:1.2;
  letter-spacing:.14em; text-transform:uppercase; color:var(--d-ink-2); white-space:nowrap;
}
@media (max-width:560px){ .brand .tagline{display:none} }

.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(--d-ink-2);
  padding:9px 13px; border-radius:var(--r-pill); transition:background .16s ease, color .16s ease;
}
.nav a:hover{background:rgba(255,255,255,.08); color:#fff}
.nav a.cta{
  background:var(--amber); color:var(--on-amber); font-weight:600; margin-left:8px; padding:10px 18px;
}
.nav a.cta:hover{background:var(--amber-3); color:var(--on-amber)}
.navbtn{
  display:none; margin-left:auto; width:40px; height:40px; place-items:center;
  background:transparent; border:1px solid var(--d-line-2); border-radius:var(--r-pill);
  cursor:pointer; color:var(--d-ink);
}
@media (max-width:1120px){
  .nav{
    display:none; 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{display:flex}
  .nav a{padding:12px 14px; border-radius:var(--r)}
  .nav a.cta{margin-left:0; margin-top:8px; justify-content:center; text-align:center}
  .navbtn{display:grid}
}

/* ─── nameplate: the scrolled header, at full size ─────────────────────
   Same parts in the same order as the compact header — cap, wordmark,
   tagline — so the page opens on the brand and hands it to the header bar. */
.masthead{
  position:relative; background:var(--navy-900); color:var(--d-ink);
  border-bottom:2px solid var(--amber);
  box-shadow:0 1px 0 rgba(0,0,0,.35), inset 0 -18px 30px -24px rgba(0,0,0,.6);
}
.masthead .wrap{padding-block:clamp(38px,5.4vw,72px)}
.nameplate{display:flex; align-items:center; gap:clamp(18px,3vw,44px)}
.np-capimg{
  display:block; flex:none; width:clamp(120px,18vw,240px); height:auto;
  filter:drop-shadow(0 20px 38px rgba(0,0,0,.38)) drop-shadow(0 0 1px rgba(255,255,255,.3));
  animation:np-twist 1s .12s cubic-bezier(.2,.85,.25,1) both;
}
.np-text{min-width:0; display:flex; flex-direction:column; gap:clamp(10px,1.4vw,18px)}
.np-name{
  margin:0; color:#fff; font-weight:700; letter-spacing:-.04em; line-height:.95;
  font-size:clamp(2.2rem,6.6vw,5.9rem);
}
.np-name b{font-weight:800; color:var(--amber)}
.np-name i{font-style:normal; font-weight:800; color:inherit}
.np-tag{
  font-family:var(--sans); font-weight:600; text-transform:uppercase; letter-spacing:.16em;
  font-size:clamp(.8rem,1.35vw,1.15rem); line-height:1.3; color:var(--d-ink-2);
}
.h1.hmsg{font-size:clamp(1.8rem,3.3vw,2.65rem); margin-top:0; max-width:18ch}
@media (max-width:640px){
  .nameplate{flex-direction:column; align-items:flex-start; gap:20px}
  .np-capimg{width:150px}
  .np-name{font-size:clamp(1.9rem,9.6vw,3.2rem)}
  .np-tag{font-size:clamp(.66rem,3.1vw,.8rem); letter-spacing:.1em}
}
/* one moment: the cap twists into place, the way it would onto a bottle */
@keyframes np-twist{from{transform:rotate(-32deg) scale(.88); opacity:0} to{transform:none; opacity:1}}
@media (prefers-reduced-motion:reduce){ .np-capimg{animation:none} }

/* while the nameplate is on screen the header carries navigation only */
.np-js .chrome .brand{transition:opacity .3s ease, transform .3s ease}
.np-js:not(.np-out) .chrome .brand{opacity:0; transform:translateY(-6px); pointer-events:none}

/* ─── dark section shell ───────────────────────────────────────────── */
.ondark{
  position:relative; 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) 55%, var(--navy-900) 100%);
}
.ondark::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%);
}
.ondark .wrap{position:relative; z-index:1}
.ondark h1,.ondark h2,.ondark h3{color:#fff}
.ondark .eyebrow{color:var(--d-muted)}
.ondark .lede{color:var(--d-ink-2)}

/* ─── hero ─────────────────────────────────────────────────────────── */
.hero .wrap{padding-block:clamp(52px,7vw,92px) clamp(56px,7vw,96px)}
.herogrid{display:grid; gap:44px; align-items:start}
.herogrid > *{min-width:0}
@media (min-width:1040px){.herogrid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:60px; align-items:center}}

.h1{
  font-size:clamp(2.5rem,5.4vw,4.15rem); line-height:1.02;
  letter-spacing:-.038em; margin-top:22px; max-width:16ch;
}
.h1 .hl{color:var(--amber-3); white-space:nowrap}
.hsub{
  font-family:var(--serif); font-size:clamp(1.06rem,1.5vw,1.28rem); line-height:1.58;
  color:var(--d-ink-2); max-width:56ch; margin-top:24px;
}
.hcta{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}

.hstats{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0; margin-top:42px; padding-top:26px; border-top:1px solid var(--d-line);
}
.hstats div{padding-right:20px; border-right:1px solid var(--d-line)}
.hstats div:last-child{border-right:0; padding-right:0}
.hstats b{
  display:block; font-family:var(--serif); font-size:clamp(1.6rem,2.6vw,2.15rem);
  font-weight:500; letter-spacing:-.02em; color:#fff; line-height:1.05;
}
.hstats span{
  display:block; font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.11em;
  text-transform:uppercase; color:var(--d-muted); margin-top:8px; line-height:1.4;
}
@media (max-width:520px){
  .hstats{grid-template-columns:1fr; gap:18px}
  .hstats div{border-right:0; border-bottom:1px solid var(--d-line); padding-bottom:16px}
  .hstats div:last-child{border-bottom:0; padding-bottom:0}
}

/* mode switch */
.modesw{
  display:inline-flex; gap:3px; padding:4px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.06); border:1px solid var(--d-line-2);
}
.modesw button{
  border:0; background:transparent; padding:8px 20px; border-radius:var(--r-pill);
  font-family:var(--mono); font-size:var(--fs-xs); font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--d-muted); cursor:pointer;
  transition:background .18s ease, color .18s ease;
}
.modesw button[aria-pressed="true"]{background:var(--blue-bright); color:var(--navy-900)}
.modesw button:hover{color:#fff}
.modesw button[aria-pressed="true"]:hover{color:var(--navy-900)}

/* hero glass panel */
.glass{
  background:var(--d-card); border:1px solid var(--d-line-2); border-radius:var(--r-lg);
  padding:26px 24px 24px; backdrop-filter:blur(8px);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9);
}
.glass .gh{display:flex; align-items:center; gap:10px; margin-bottom:20px}
.glass .gh .t{
  font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.13em;
  text-transform:uppercase; font-weight:600; color:var(--d-ink);
}
.glass .gh .dot{width:7px; height:7px; border-radius:50%; background:var(--amber); flex:none}
.glass .gh .r{margin-left:auto; font-family:var(--mono); font-size:var(--fs-xs); color:var(--d-muted)}

.bandrow .bl{
  display:block; font-family:var(--mono); font-size:var(--fs-xs); font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--d-muted); margin-bottom:32px;
}
.bandtrack{
  position:relative; display:flex; height:13px; border-radius:var(--r-pill); overflow:visible;
  background:rgba(255,255,255,.08); margin-top:4px;
}
.bandtrack .zone{height:100%}
.bandtrack .zone:first-child{border-radius:var(--r-pill) 0 0 var(--r-pill)}
.bandtrack .zone:last-child{border-radius:0 var(--r-pill) var(--r-pill) 0}
.zone.best{background:linear-gradient(90deg,var(--amber-3),var(--amber))}
.zone.mid{background:rgba(138,184,232,.42)}
.zone.high{background:rgba(255,255,255,.14)}
.bandtrack .mark{position:absolute; top:-6px; bottom:-6px; width:2px; background:#fff; border-radius:2px}
.bandtrack .mark::after{
  content:attr(data-l); position:absolute; left:50%; transform:translateX(-50%);
  top:-22px; white-space:nowrap;
  font-family:var(--mono); font-size:var(--fs-xs); color:#fff;
}
.bandzones{
  display:flex; margin-top:12px; font-family:var(--mono); font-size:var(--fs-xs);
  letter-spacing:.07em; text-transform:uppercase; color:var(--d-muted); gap:4px;
}
.bandzones span:nth-child(1){color:var(--amber-3)}
.bandzones span:nth-child(3){flex:1 1 auto; text-align:right}
.bandnote{
  margin-top:20px; padding-top:18px; border-top:1px solid var(--d-line);
  font-size:var(--fs-sm); line-height:1.6; color:var(--d-ink-2);
}
.bandnote b{color:#fff; font-weight:600}

/* ─── light sections ───────────────────────────────────────────────── */
.sec{padding-block:clamp(60px,8vw,104px)}
.sec.alt{background:var(--panel)}
.sec.hair{border-top:1px solid var(--line)}
.sechead{max-width:none; display:flex; flex-direction:column; gap:16px}
.sechead h2{font-size:clamp(1.7rem,2.9vw,2.35rem); letter-spacing:-.032em; line-height:1.1}
.sechead.wide{max-width:none}
.statement h2{max-width:22ch}
.lede{font-family:var(--serif); font-size:var(--fs-lg); line-height:1.6; color:var(--ink-2); max-width:64ch}
.eyebrow + .sechead{margin-top:18px}

.headrow{display:grid; gap:24px; align-items:end}
@media (min-width:940px){.headrow{grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:56px}}
.headrow .lede{margin-bottom:2px}

/* ─── statement band (the practice / slogan) ───────────────────────── */
.statement{
  display:grid; gap:28px; align-items:center;
}
@media (min-width:940px){.statement{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:64px}}
.statement h2{font-size:clamp(1.55rem,2.7vw,2.15rem); letter-spacing:-.03em; line-height:1.14}
.slogan{
  font-family:var(--serif); font-style:italic; font-size:clamp(1.5rem,2.6vw,2.05rem);
  line-height:1.25; color:var(--navy-600); letter-spacing:-.02em;
  padding-left:26px; border-left:3px solid var(--amber);
}

/* ─── metric cards ─────────────────────────────────────────────────── */
.gauges{display:grid; gap:20px; grid-template-columns:minmax(0,1fr); margin-top:44px}
.gauges > *{min-width:0}
@media (min-width:760px){.gauges{grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px}}
.gauge{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px 24px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
}
.sec.alt .gauge{background:var(--paper)}
.gauge h3{font-size:var(--fs-xl); letter-spacing:-.026em}
.gauge .u{
  font-family:var(--mono); font-size:var(--fs-xs); color:var(--muted);
  letter-spacing:.09em; text-transform:uppercase; margin-top:7px;
}
.bars{margin-top:22px; display:flex; flex-direction:column; gap:16px}
.bar .bl{display:flex; justify-content:space-between; align-items:baseline; gap:14px; font-size:var(--fs-sm); margin-bottom:7px}
.bar .bl span{color:var(--ink-2)}
.bar .bl b{font-family:var(--mono); font-weight:600; font-size:var(--fs-md); white-space:nowrap}
.track{height:10px; border-radius:var(--r-pill); background:var(--panel-2); overflow:hidden}
.fill{height:100%; width:0; border-radius:var(--r-pill); transition:width 1s cubic-bezier(.22,.8,.3,1)}
.fill.med{background:linear-gradient(90deg,var(--navy-500),var(--blue-2))}
.fill.best{background:linear-gradient(90deg,var(--amber-2),var(--amber-3))}
.gnote{
  margin-top:20px; padding-top:16px; border-top:1px solid var(--line);
  font-size:var(--fs-sm); color:var(--muted); line-height:1.58;
}
.gnote b{color:var(--ink); font-weight:600}
.rates{margin:20px 0 0; padding:0; display:flex; flex-direction:column}
.rates div{display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:12px 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:2px}

/* ─── method steps ─────────────────────────────────────────────────── */
.steps{display:grid; gap:18px; grid-template-columns:minmax(0,1fr); margin-top:46px}
@media (min-width:640px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1060px){.steps{grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px}}
.step{
  background:var(--d-card); border:1px solid var(--d-line); border-radius:var(--r-lg);
  padding:26px 22px 24px; display:flex; flex-direction:column; gap:11px;
  transition:border-color .2s ease, transform .2s ease, background .2s ease;
}
.step:hover{border-color:var(--d-line-2); transform:translateY(-3px); background:rgba(255,255,255,.07)}
.step .no{
  font-family:var(--serif); font-size:2.3rem; font-weight:400; line-height:1;
  color:var(--amber-3); letter-spacing:-.03em;
}
.step .lb{
  font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.13em;
  text-transform:uppercase; color:var(--d-muted);
}
.step h3{font-size:var(--fs-lg); letter-spacing:-.024em}
.step p{font-size:var(--fs-md); color:var(--d-ink-2); line-height:1.58}
.step .out{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--d-line);
  font-size:var(--fs-sm); color:var(--d-muted); line-height:1.5;
}
.step .out b{color:var(--d-ink); font-weight:600}

/* ─── product / service cards ──────────────────────────────────────── */
.prods{display:grid; gap:20px; grid-template-columns:minmax(0,1fr); margin-top:44px}
.prods > *{min-width:0}
@media (min-width:820px){.prods{grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px}}
.prods.two{grid-template-columns:minmax(0,1fr)}
@media (min-width:820px){.prods.two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.prod{
  position:relative; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:28px 26px; display:flex; flex-direction:column; gap:14px;
  box-shadow:var(--shadow-sm); overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sec.alt .prod{background:var(--paper)}
.prod::after{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--blue-2),var(--amber));
  opacity:0; transition:opacity .2s ease;
}
.prod:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--line-2)}
.prod:hover::after{opacity:1}
.prod .ph{
  display:grid; gap:14px 12px; align-items:center;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"glyph tag" "title title";
}
.prod .ph .glyph{grid-area:glyph}
.prod .ph > div{grid-area:title}
.prod .ph .tag{grid-area:tag; justify-self:end}
.prod .glyph{
  width:46px; height:46px; flex:none; display:grid; place-items:center; border-radius:14px;
  background:var(--navy-800); color:var(--amber);
}
.prod .glyph svg{width:22px; height:22px}
.prod h3{font-size:var(--fs-xl); letter-spacing:-.028em}
.prod .sub{
  font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); margin-top:5px;
}
.tag{
  align-self:flex-start; font-family:var(--mono); font-size:var(--fs-xs); font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; padding:5px 11px; border-radius:var(--r-pill);
  white-space:nowrap;
}
.tag.live{background:color-mix(in srgb, var(--good) 12%, transparent); color:var(--good); border:1px solid color-mix(in srgb, var(--good) 32%, transparent)}
.tag.beta{background:var(--amber-ghost); color:var(--amber-2); border:1px solid color-mix(in srgb, var(--amber) 40%, transparent)}
.tag.req{background:var(--blue-ghost); color:var(--blue); border:1px solid color-mix(in srgb, var(--blue) 30%, transparent)}
.prod p{font-size:var(--fs-md); color:var(--ink-2); line-height:1.6}
.plist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.plist li{position:relative; padding-left:24px; font-size:var(--fs-sm); color:var(--ink-2); line-height:1.55}
.plist li::before{
  content:""; position:absolute; left:0; top:.45em; width:13px; height:13px; border-radius:50%;
  background: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;
}
.prod .pf{margin-top:auto; padding-top:18px; border-top:1px solid var(--line); font-size:var(--fs-sm)}
.prod .pf a{font-weight:600; display:inline-flex; align-items:center; gap:7px}
.prod .pf a svg{width:14px; height:14px; transition:transform .18s ease}
.prod .pf a:hover svg{transform:translateX(3px)}

/* ─── CTA band ─────────────────────────────────────────────────────── */
.cta .wrap{padding-block:clamp(60px,8vw,100px)}
.ctagrid{display:grid; gap:36px; align-items:center}
@media (min-width:940px){.ctagrid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:64px}}
.cta h2{font-size:clamp(1.9rem,3.6vw,2.85rem); letter-spacing:-.034em; max-width:20ch; line-height:1.08}
.cta .lede{color:var(--d-ink-2); margin-top:18px; max-width:52ch}
.reassure{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px}
.reassure li{
  display:flex; align-items:flex-start; gap:12px; font-size:var(--fs-md); color:var(--d-ink-2);
  padding:16px 18px; border:1px solid var(--d-line); border-radius:var(--r); background:var(--d-card);
}
.reassure li svg{width:17px; height:17px; flex:none; color:var(--amber-3); margin-top:2px}
.reassure li b{color:#fff; font-weight:600}

/* ─── sources ──────────────────────────────────────────────────────── */
a.fnref{
  font-family:var(--mono); font-size:.62em; font-weight:600; color:var(--blue);
  vertical-align:super; margin-left:2px; text-decoration:none;
}
a.fnref::before{content:"["}
a.fnref::after{content:"]"}
.ondark a.fnref{color:var(--blue-bright)}
.srcbox{margin-top:34px}
.srcbox summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); padding:11px 18px; border:1px solid var(--line-2); border-radius:var(--r-pill);
  background:var(--panel);
}
.srcbox summary::-webkit-details-marker{display:none}
.srcbox summary:hover{color:var(--ink); border-color:var(--navy-500)}
.srcbox[open] summary{margin-bottom:26px}
.srclist{list-style:none; margin:0; padding:0; display:grid; gap:14px}
@media (min-width:820px){.srclist{grid-template-columns:1fr 1fr; gap:14px 40px}}
.srclist li{
  font-size:var(--fs-sm); color:var(--muted); line-height:1.55; padding-left:18px; position:relative;
}
.srclist li::before{content:"—"; position:absolute; left:0; color:var(--line-2)}
.srclist li:target{color:var(--ink-2)}
.srclist b{color:var(--ink-2); font-weight:600}
.fineprint{margin-top:24px; font-size:var(--fs-sm); color:var(--muted); line-height:1.6; max-width:88ch}

/* ─── footer ───────────────────────────────────────────────────────── */
.foot{background:var(--navy-900); color:var(--d-ink-2); border-top:1px solid var(--d-line)}
.foot .wrap{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(--amber-3); 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-bottom: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}

/* ─── producer-type switching ──────────────────────────────────────── */
.m-dist{display:none}
[data-mode="distillery"] .m-brew{display:none}
[data-mode="distillery"] .m-dist{display:block}
[data-mode="distillery"] .bars.m-dist{display:flex}

/* ─── reveal ───────────────────────────────────────────────────────── */
.rv{opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,.8,.3,1)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1; transform:none; transition:none}
  .fill{transition:none}
  .btn:hover, .prod:hover, .step:hover{transform:none}
}

/* 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)}