/* ============================================================
   MERIDIAN shared stylesheet
   [placeholder brand: replace name, colors, and type before launch]
   ============================================================ */

:root{
  --bg:#08090c; --bg2:#0e1015; --panel:#12151b; --line:#1f242d;
  --ink:#eef2f6; --dim:#9aa4b1; --dimmer:#6b7482;
  --accent:#5eead4; --accent2:#34d399; --gold:#e8c17a; --bad:#f85149;
  --r:14px; --max:1140px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);
  font:16px/1.65 ui-sans-serif,-apple-system,"Segoe UI",Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.wrap.narrow{max-width:820px}
h1,h2,h3,h4{letter-spacing:-.025em;line-height:1.15;font-weight:640}
a{color:inherit}
section{padding:96px 0;border-top:1px solid var(--line)}
section.tight{padding:64px 0}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:var(--accent);
  font-weight:600;margin-bottom:14px}
.lede{color:var(--dim);font-size:17.5px;max-width:640px}
.h-sec{font-size:36px;margin-bottom:14px}
@media(max-width:640px){.h-sec{font-size:28px}}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:50;background:rgba(8,9,12,0.82);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:66px}
.logo{font-weight:680;letter-spacing:-.03em;font-size:19px;display:flex;align-items:center;
  gap:9px;text-decoration:none}
.logo i{width:9px;height:9px;border-radius:50%;background:var(--accent);display:block}
.navlinks{display:flex;gap:30px;font-size:14.5px;color:var(--dim)}
.navlinks a{text-decoration:none}
.navlinks a:hover{color:var(--ink)}
.navlinks a.on{color:var(--ink)}
.nav-cart{display:inline-flex;align-items:center;gap:8px;color:var(--ink);
  padding:10px 14px;border-radius:999px;background:rgba(94,234,212,.12);
  border:1px solid rgba(94,234,212,.25);text-decoration:none;font-size:13px;white-space:nowrap}
.nav-cart:hover{background:rgba(94,234,212,.18)}
.nav-cart .cart-icon{font-size:16px;line-height:1}
.nav-cart .cart-count{display:inline-flex;align-items:center;justify-content:center;
  min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:var(--accent);
  color:#05201c;font-weight:700;font-size:13px}
/* Desktop already has "Shop" in the nav links, so the button would be a
   second route to the same page. It exists for mobile.

   Scoped to nav rather than written as .nav-shop, because .btn further
   down sets display:inline-block at the same specificity and, being
   later in the file, would win. */
nav .nav-shop{display:none}

@media(max-width:900px){
  /* .navlinks used to be display:none here, which also hid the cart and
     the account link, because app.js injects both into that container.
     The effect was a phone with no navigation at all: someone could add
     to the cart and then have no way to reach checkout.

     Hide the text links, keep the cart, and put Shop compounds in the
     top right so there is always one obvious way back to the products. */
  .navlinks{display:flex;gap:10px;align-items:center}
  .navlinks a{display:none}
  .navlinks .nav-cart{display:inline-flex}
  nav .nav-shop{display:inline-block;padding:9px 14px;font-size:13.5px;white-space:nowrap}
  nav .wrap{gap:10px}
  .logo{font-size:17px}
}
@media(max-width:380px){
  /* Very narrow phones: the logo mark alone still gets you home. */
  nav .nav-shop{padding:8px 12px;font-size:13px}
  .logo{font-size:0;gap:0}
  .logo i{width:11px;height:11px}
}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:var(--accent);color:#05201c;text-decoration:none;
  font-weight:640;font-size:14.5px;padding:11px 22px;border-radius:9px;border:none;cursor:pointer;
  font-family:inherit;transition:transform .12s ease,filter .12s ease}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.lg{padding:15px 32px;font-size:16px}

/* ---------- hero ---------- */
.hero{padding:104px 0 88px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:-340px;left:50%;transform:translateX(-50%);
  width:1000px;height:700px;
  background:radial-gradient(circle,rgba(94,234,212,0.10),transparent 66%);
  pointer-events:none}
.hero h1{font-size:clamp(38px,5.6vw,66px);max-width:16ch;margin-bottom:22px}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .lede{font-size:19px;max-width:560px;margin-bottom:34px}
.cta-row{display:flex;gap:13px;flex-wrap:wrap;align-items:center}
.microcopy{color:var(--dimmer);font-size:13.5px;margin-top:16px}
.pagehead{padding:72px 0 44px}
.pagehead h1{font-size:clamp(32px,4.6vw,52px);margin-bottom:16px;max-width:20ch}

.trustbar{display:flex;gap:34px;flex-wrap:wrap;margin-top:56px;padding-top:30px;
  border-top:1px solid var(--line)}
.trustbar div{font-size:13.5px;color:var(--dim);display:flex;gap:9px;align-items:flex-start;max-width:230px}
.trustbar b{color:var(--ink);font-weight:600}
.chk{color:var(--accent2);flex-shrink:0}

/* ---------- cards ---------- */
.g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:44px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.card h3{font-size:18px;margin-bottom:10px}
.card p{color:var(--dim);font-size:14.8px}
.num{font-size:12px;font-weight:660;color:var(--accent);letter-spacing:.1em;margin-bottom:12px}

/* ---------- quiz ---------- */
#finder{background:var(--bg2)}
.quiz{background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:36px;max-width:660px;margin:40px auto 0}
@media(max-width:640px){.quiz{padding:24px}}
.qprogress{height:3px;background:var(--line);border-radius:2px;margin-bottom:28px;overflow:hidden}
.qprogress i{display:block;height:100%;background:var(--accent);width:0;
  transition:width .35s cubic-bezier(0.4,0,0.2,1)}
.qstep{font-size:12px;color:var(--dimmer);letter-spacing:.09em;text-transform:uppercase;margin-bottom:12px}
.qtitle{font-size:23px;margin-bottom:22px;letter-spacing:-.02em;font-weight:620}
.opts{display:grid;gap:10px}
.opt{background:#0a0d12;border:1px solid var(--line);border-radius:10px;padding:15px 18px;
  cursor:pointer;font:inherit;font-size:15.5px;color:var(--ink);text-align:left;
  transition:all .14s ease;display:flex;justify-content:space-between;align-items:center;gap:12px}
.opt:hover{border-color:var(--accent);background:#0d1218}
.opt small{color:var(--dimmer);font-size:13px}
.insight{margin-top:18px;padding:13px 16px;background:rgba(94,234,212,0.06);
  border-left:2px solid var(--accent);border-radius:0 8px 8px 0;font-size:14px;
  color:var(--dim);display:none}
.insight.show{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.qback{background:none;border:none;color:var(--dimmer);font:inherit;font-size:13.5px;
  cursor:pointer;margin-top:20px;padding:0}
.qback:hover{color:var(--ink)}
.result{display:none}
.result.show{display:block;animation:fade .4s ease}
.rprotocol{background:linear-gradient(180deg,rgba(94,234,212,0.09),transparent);
  border:1px solid rgba(94,234,212,0.22);border-radius:12px;padding:24px;margin-bottom:22px}
.rprotocol .l{font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent);margin-bottom:8px}
.rprotocol h3{font-size:26px;margin-bottom:8px}
.rsec{margin-bottom:22px}
.rsec h4{font-size:13px;text-transform:uppercase;letter-spacing:.09em;color:var(--dim);
  margin-bottom:10px;font-weight:640}
.rsec p{color:var(--dim);font-size:14.8px}
.rsec li{color:var(--dim);font-size:14.8px;margin-bottom:5px}
.rsec ul{padding-left:19px}
.pending{background:rgba(232,193,122,0.07);border:1px solid rgba(232,193,122,0.24);
  border-radius:10px;padding:15px 17px;font-size:14px;color:var(--gold);margin:22px 0}
.gate{background:#0a0d12;border:1px solid var(--line);border-radius:12px;padding:24px;margin-top:8px}
.gate input{width:100%;background:#06080b;border:1px solid var(--line);border-radius:9px;
  padding:13px 15px;color:var(--ink);font:inherit;font-size:15px;margin-bottom:11px}
.gate input:focus{outline:none;border-color:var(--accent)}
.gate .btn{width:100%}
.consent{font-size:12px;color:var(--dimmer);margin-top:13px;line-height:1.55}

.auth-page, .account-page, .cart-page { max-width:760px; margin:40px auto; }
.auth-panel, .account-panel, .cart-panel-page { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:28px; }
.auth-tabs { display:flex; gap:10px; margin-bottom:20px; }
.auth-tab { flex:1; padding:12px 16px; border-radius:10px; border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer; font:inherit; }
.auth-tab.on, .auth-tab:hover { border-color:var(--accent); color:var(--accent); }
.auth-form label { display:block; margin-bottom:14px; font-size:14px; color:var(--dim); }
.auth-form input, .auth-form textarea { width:100%; background:#06080b; border:1px solid var(--line); border-radius:9px; padding:12px 14px; color:var(--ink); font:inherit; margin-top:6px; }
.auth-form textarea { min-height:100px; resize:vertical; }
.auth-message { color:var(--gold); margin-top:18px; font-size:14px; line-height:1.5; }
.account-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.account-box { background:#0a0d12; border:1px solid var(--line); border-radius:12px; padding:18px; }
.account-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }
.account-info p, .cart-page p { color:var(--dim); line-height:1.7; }
.cart-page table { width:100%; border-collapse:collapse; margin-top:18px; }
.cart-page th, .cart-page td { padding:12px 10px; border-bottom:1px solid var(--line); text-align:left; }
.cart-page .cart-empty { color:var(--dimmer); padding:24px 0; text-align:center; }
.navlinks .auth-link { margin-left:6px; }

/* ---------- library ---------- */
.lib{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:40px}
.libcard{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:20px;
  text-decoration:none;display:block;transition:border-color .15s}
.libcard:hover{border-color:var(--accent)}
.libcard .cat{font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);margin-bottom:8px}
.libcard h4{font-size:16.5px;margin-bottom:6px;font-weight:600}
.libcard p{font-size:13.5px;color:var(--dimmer);line-height:1.55}

/* evidence + status badges */
.badges{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:22px}
.badge{font-size:11.5px;font-weight:640;letter-spacing:.05em;text-transform:uppercase;
  padding:5px 11px;border-radius:20px;border:1px solid}
.badge.a{color:var(--accent2);border-color:rgba(52,211,153,0.35);background:rgba(52,211,153,0.08)}
.badge.b{color:var(--accent);border-color:rgba(94,234,212,0.35);background:rgba(94,234,212,0.08)}
.badge.c{color:var(--gold);border-color:rgba(232,193,122,0.35);background:rgba(232,193,122,0.08)}
.badge.d{color:var(--dim);border-color:var(--line);background:#0a0d12}
.badge.stop{color:#ff9a92;border-color:rgba(248,81,73,0.35);background:rgba(248,81,73,0.08)}

/* ---------- article ---------- */
.article{max-width:760px}
.article h2{font-size:27px;margin:44px 0 14px}
.article h3{font-size:19px;margin:30px 0 10px}
.article p{color:var(--dim);margin-bottom:15px;font-size:16px}
.article ul{color:var(--dim);padding-left:22px;margin-bottom:16px}
.article ol{color:var(--dim);padding-left:22px;margin-bottom:16px}
.article li{margin-bottom:7px}
.article a{color:var(--accent)}
.article strong{color:var(--ink);font-weight:620}
.tldr{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:0 12px 12px 0;padding:22px 24px;margin:28px 0}
.tldr h4{font-size:12px;text-transform:uppercase;letter-spacing:.11em;
  color:var(--accent);margin-bottom:12px}
.tldr ul{margin:0;padding-left:19px}
.tldr li{color:var(--dim);font-size:15px;margin-bottom:7px}
.warn{background:rgba(248,81,73,0.06);border:1px solid rgba(248,81,73,0.22);
  border-radius:12px;padding:20px 22px;margin:26px 0}
.warn h3{color:#ff9a92;margin:0 0 10px;font-size:17px}
.warn p{color:#e0b5b1;font-size:15px}
.warn li{color:#e0b5b1;font-size:15px}
.note{background:rgba(232,193,122,0.06);border:1px solid rgba(232,193,122,0.22);
  border-radius:12px;padding:20px 22px;margin:26px 0}
.note h3{color:var(--gold);margin:0 0 10px;font-size:17px}
.note p{color:#d9c19a;font-size:15px}
.note li{color:#d9c19a;font-size:15px}
table{width:100%;border-collapse:collapse;margin:22px 0;font-size:14.5px}
th{text-align:left;padding:11px 13px;border-bottom:1px solid var(--line);
  color:var(--dim);font-size:12px;text-transform:uppercase;letter-spacing:.07em;font-weight:640}
td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--line);color:var(--dim)}
.tablewrap{overflow-x:auto}
.refs{margin-top:44px;padding-top:26px;border-top:1px solid var(--line)}
.refs ol{font-size:14px;color:var(--dimmer)}
.refs li{margin-bottom:9px}
.crumb{font-size:13.5px;color:var(--dimmer);margin-bottom:20px}
.crumb a{color:var(--dim);text-decoration:none}
.crumb a:hover{color:var(--ink)}

/* ---------- product catalog ---------- */
/* A grid of tiles rather than a wrapping row of pills. A pill row reads
   as decoration and gets skipped; an even grid of labelled tiles reads
   as the thing you are supposed to choose from, which is what it is. */
.cat-tabs{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:10px;margin:32px 0 10px}
.cat-tab{background:#0a0d12;border:1px solid var(--line);color:var(--dim);border-radius:11px;
  padding:14px 16px;font:inherit;font-size:14px;cursor:pointer;
  transition:border-color .14s,background .14s,color .14s,transform .14s;
  display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left}
.cat-tab:hover{border-color:var(--accent);color:var(--ink);background:#0d1218;
  transform:translateY(-1px)}
.cat-tab.on{background:var(--accent);border-color:var(--accent);color:#05201c;font-weight:660}
/* Count badge. With a dozen research areas on screen, the number is what
   tells someone whether a tile is worth opening before they open it. */
.cat-tab-n{font-size:11.5px;font-weight:660;line-height:1;padding:4px 8px;border-radius:9px;
  background:rgba(255,255,255,.06);color:var(--dimmer);font-variant-numeric:tabular-nums;
  flex:none}
.cat-tab:hover .cat-tab-n{color:var(--ink)}
.cat-tab.on .cat-tab-n{background:rgba(0,0,0,.18);color:#05201c}
@media(max-width:640px){
  .cat-tabs{grid-template-columns:repeat(2,1fr);gap:8px}
  .cat-tab{padding:12px 13px;font-size:13.5px}
}
.cat-count{font-size:13px;color:var(--dimmer);margin:14px 0 22px}

.catalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:20px}
.prod{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px;
  display:flex;flex-direction:column;transition:border-color .15s,transform .15s}
.prod:hover{border-color:rgba(94,234,212,.45);transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(0,0,0,.45)}
.prod.soon{border-style:solid}
.prod.no{opacity:.72}
/* Padding lives on the body, not the card, so the photo tile can run to
   the card edges instead of floating in a margin. */
.prod-body{display:flex;flex-direction:column;flex:1;padding:16px 8px 6px}
.prod-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.prod-cat{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent);font-weight:640}
.prod h3{font-size:18px;margin-bottom:5px;letter-spacing:-.02em;line-height:1.25}
.prod .sub{font-size:12.5px;color:var(--dimmer);margin-bottom:12px;line-height:1.45}
/* Clamp the blurb so cards in a row stay the same height and the price
   line does not drift halfway down the grid. */
.prod p{font-size:13.5px;color:var(--dim);line-height:1.55;margin-bottom:14px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.prod-meta{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 12px}
.pill{font-size:10.5px;font-weight:660;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 9px;border-radius:14px;border:1px solid;white-space:nowrap}
.pill.ok{color:var(--accent2);border-color:rgba(52,211,153,0.35);background:rgba(52,211,153,0.09)}
.pill.pend{color:var(--gold);border-color:rgba(232,193,122,0.35);background:rgba(232,193,122,0.09)}
.pill.no{color:#ff9a92;border-color:rgba(248,81,73,0.32);background:rgba(248,81,73,0.07)}
.pill.gr{color:var(--dim);border-color:var(--line);background:#0a0d12}
.prod-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding-top:14px;border-top:1px solid var(--line);margin-top:auto}
.prod-price{font-size:16px;font-weight:680;letter-spacing:-.02em}
.prod-price small{display:block;font-size:11px;color:var(--dimmer);font-weight:400;letter-spacing:0}
.prod-cta{font-size:13px;font-weight:660;white-space:nowrap;border:none;cursor:pointer;
  font-family:inherit;background:var(--accent);color:#05201c;padding:9px 16px;border-radius:8px;
  text-decoration:none;transition:filter .12s}
.prod-cta:hover{filter:brightness(1.08);text-decoration:none}
.prod-cta.muted{background:transparent;color:var(--dimmer);border:1px solid var(--line);padding:8px 14px}
.prod-cta.muted:hover{color:var(--ink);border-color:var(--dimmer)}
.cat-note{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:0 12px 12px 0;padding:20px 22px;margin-top:26px}
.cat-note h4{font-size:15px;margin-bottom:8px;color:var(--gold)}
.cat-note p{font-size:14px;color:var(--dim);margin:0}

/* ---------- pricing ---------- */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:18px;margin-top:44px}
.tier{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:28px;
  display:flex;flex-direction:column}
.tier.feat{border-color:var(--accent);position:relative}
.tier.feat::after{content:"Most chosen";position:absolute;top:-10px;left:28px;
  background:var(--accent);color:#05201c;font-size:11px;font-weight:680;
  padding:3px 11px;border-radius:20px;letter-spacing:.04em}
.tier h3{font-size:17px;margin-bottom:6px}
.price{font-size:38px;font-weight:660;letter-spacing:-.03em;margin:12px 0 4px}
.price span{font-size:15px;color:var(--dim);font-weight:400}
.tier ul{list-style:none;margin:20px 0;flex:1}
.tier li{font-size:14.5px;color:var(--dim);padding:7px 0;display:flex;gap:10px;align-items:flex-start}

/* ---------- faq ---------- */
details{border-bottom:1px solid var(--line);padding:19px 0}
summary{cursor:pointer;font-weight:600;font-size:16.5px;list-style:none;
  display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--accent);font-weight:400;font-size:21px;line-height:1}
details[open] summary::after{content:"\2212"}
details p{color:var(--dim);font-size:15px;margin-top:12px;max-width:75ch}

/* ---------- concierge ---------- */
.ai-launch{position:fixed;bottom:22px;right:22px;z-index:60;background:var(--accent);
  color:#05201c;border:none;border-radius:30px;padding:13px 20px;font:inherit;
  font-weight:640;font-size:14.5px;cursor:pointer;box-shadow:0 8px 28px rgba(0,0,0,0.5)}
.ai-panel{position:fixed;bottom:80px;right:22px;width:378px;max-width:calc(100vw - 44px);
  height:520px;max-height:calc(100vh - 120px);background:var(--panel);
  border:1px solid var(--line);border-radius:16px;z-index:60;display:none;
  flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.6)}
.ai-panel.show{display:flex}
.ai-head{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;
  justify-content:space-between;align-items:center}
.ai-head b{font-size:15px}
.ai-head span{font-size:12px;color:var(--dimmer);display:block;margin-top:2px}
.ai-close{background:none;border:none;color:var(--dimmer);font-size:20px;cursor:pointer;line-height:1}
.ai-body{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.msg{font-size:14.3px;line-height:1.55;padding:11px 14px;border-radius:11px;max-width:88%;
  white-space:pre-line}
.msg.bot{background:#0a0d12;border:1px solid var(--line);color:var(--dim);align-self:flex-start}
.msg.you{background:rgba(94,234,212,0.1);border:1px solid rgba(94,234,212,0.24);
  color:var(--ink);align-self:flex-end}
.msg.esc{background:rgba(232,193,122,0.08);border:1px solid rgba(232,193,122,0.28);color:var(--gold)}
.msg cite{display:block;margin-top:7px;font-size:12px;color:var(--dimmer);font-style:normal}
.ai-foot{padding:12px 14px;border-top:1px solid var(--line);display:flex;gap:8px}
.ai-foot input{flex:1;background:#06080b;border:1px solid var(--line);border-radius:9px;
  padding:10px 13px;color:var(--ink);font:inherit;font-size:14px}
.ai-foot input:focus{outline:none;border-color:var(--accent)}
.ai-foot button{background:var(--accent);color:#05201c;border:none;border-radius:9px;
  padding:0 15px;font:inherit;font-weight:640;cursor:pointer}
.ai-disc{font-size:11px;color:var(--dimmer);padding:0 14px 11px;line-height:1.45}

/* ---------- entry disclaimer modal ---------- */
.dm-overlay{position:fixed;inset:0;background:rgba(4,5,7,0.88);backdrop-filter:blur(6px);
  z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.dm-box{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  max-width:620px;width:100%;padding:34px;margin:auto;
  box-shadow:0 30px 90px rgba(0,0,0,0.7)}
@media(max-width:600px){.dm-box{padding:24px}}
.dm-box h2{font-size:24px;margin-bottom:8px}
.dm-box .dm-sub{color:var(--dimmer);font-size:13.5px;margin-bottom:20px}
.dm-list{list-style:none;margin:0 0 22px}
.dm-list li{display:flex;gap:11px;align-items:flex-start;padding:10px 0;
  border-bottom:1px solid var(--line);font-size:14.5px;color:var(--dim);line-height:1.55}
.dm-list li:last-child{border-bottom:none}
.dm-list b{color:var(--ink);font-weight:620}
.dm-ico{color:var(--gold);flex-shrink:0;font-size:15px;line-height:1.5}
.dm-box .dm-fine{font-size:12.5px;color:var(--dimmer);line-height:1.6;margin-bottom:20px}
.dm-actions{display:flex;gap:11px;flex-wrap:wrap}
.dm-actions .btn{flex:1;text-align:center;min-width:150px}

/* ---------- persistent disclaimer bar ---------- */
.dbar{position:fixed;bottom:0;left:0;right:0;z-index:55;
  background:rgba(14,16,21,0.97);border-top:1px solid var(--line);
  padding:9px 20px;font-size:12px;color:var(--dimmer);line-height:1.5;
  display:flex;gap:14px;align-items:center;justify-content:center;text-align:center}
.dbar b{color:var(--gold);font-weight:640}
.dbar a{color:var(--dim)}
.dbar button{background:none;border:none;color:var(--dimmer);cursor:pointer;
  font:inherit;font-size:16px;line-height:1;padding:0 2px;flex-shrink:0}
.dbar button:hover{color:var(--ink)}
body.has-dbar{padding-bottom:46px}
body.has-dbar .ai-launch{bottom:60px}
body.has-dbar .ai-panel{bottom:118px}
@media(max-width:640px){.dbar{font-size:11px;padding:8px 14px}body.has-dbar{padding-bottom:58px}}

/* ---------- page-top disclaimer strip ---------- */
.dstrip{background:rgba(232,193,122,0.07);border-bottom:1px solid rgba(232,193,122,0.2);
  padding:11px 20px;font-size:12.5px;color:var(--gold);text-align:center;line-height:1.5}
.dstrip a{color:var(--gold);text-decoration:underline}

/* ============================================================
   CHECKOUT
   ============================================================ */
.co-page{padding-top:36px}
.co-head{margin-bottom:30px}
.co-head h1{font-size:clamp(30px,4.2vw,44px);margin-bottom:12px}

.co-setup{background:rgba(232,193,122,0.08);border:1px solid rgba(232,193,122,0.32);
  border-radius:12px;padding:20px 22px;margin-bottom:28px}
.co-setup h3{color:var(--gold);font-size:16px;margin-bottom:8px}
.co-setup p{color:#d9c19a;font-size:14.5px}
.co-setup-fine{margin-top:8px;font-size:13px;color:var(--dimmer)}
.co-setup code{background:#06080b;padding:1px 6px;border-radius:4px;font-size:.92em}

/* ---------- progress ---------- */
.co-steps{list-style:none;display:flex;gap:8px;margin:0 0 32px;padding:0;flex-wrap:wrap}
.co-steps li{display:flex;align-items:center;gap:9px;flex:1;min-width:132px;
  padding:11px 14px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel);font-size:13.5px;color:var(--dimmer);transition:all .16s}
.co-steps li b{font-weight:600}
.co-dot{width:23px;height:23px;border-radius:50%;background:#06080b;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:660;
  flex-shrink:0}
.co-steps li.on{border-color:var(--accent);color:var(--ink)}
.co-steps li.on .co-dot{background:var(--accent);color:#05201c;border-color:var(--accent)}
.co-steps li.done{color:var(--dim)}
/* font-size:0 hides the step number so the tick can replace it in place */
.co-steps li.done .co-dot{background:rgba(94,234,212,.16);color:var(--accent);
  border-color:rgba(94,234,212,.4);font-size:0}
.co-steps li.done .co-dot::after{content:"\2713";font-size:12px}

/* ---------- layout ---------- */
.co-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:26px;align-items:start}
@media(max-width:900px){.co-grid{grid-template-columns:1fr}}
.co-panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:28px}
@media(max-width:600px){.co-panel{padding:20px}}
.co-h{font-size:21px;margin-bottom:20px}
.co-actions{display:flex;gap:11px;flex-wrap:wrap;align-items:center;margin-top:24px}
.co-actions-center{justify-content:center}
.co-fineprint{margin-top:14px;font-size:12.5px;color:var(--dimmer);line-height:1.6}

/* ---------- cart lines ---------- */
.co-line{display:grid;grid-template-columns:1fr auto auto auto;gap:16px;align-items:center;
  padding:16px 0;border-top:1px solid var(--line)}
.co-line:first-child{border-top:none;padding-top:0}
.co-line-info{min-width:0}
.co-line-info strong{display:block;font-size:15.5px;font-weight:620}
.co-line-info span{display:block;font-size:12.5px;color:var(--dimmer);
  font-family:ui-monospace,Menlo,Consolas,monospace;margin-top:3px}
.co-qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:9px;
  overflow:hidden;background:#06080b}
.co-qty button{background:none;border:none;color:var(--dim);font:inherit;font-size:17px;
  width:32px;height:36px;cursor:pointer;line-height:1}
.co-qty button:hover{color:var(--accent);background:rgba(94,234,212,.08)}
.co-qty input{width:42px;height:36px;background:none;border:none;border-left:1px solid var(--line);
  border-right:1px solid var(--line);color:var(--ink);font:inherit;font-size:14px;
  text-align:center;-moz-appearance:textfield}
.co-qty input::-webkit-outer-spin-button,.co-qty input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.co-line-price{font-size:15px;font-weight:620;text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.co-line-price small{display:block;font-size:11.5px;color:var(--dimmer);font-weight:400}
.co-remove{background:none;border:none;color:var(--dimmer);font:inherit;font-size:13px;
  cursor:pointer;padding:0;text-decoration:underline}
.co-remove:hover{color:var(--bad)}
@media(max-width:600px){
  .co-line{grid-template-columns:1fr auto;grid-template-areas:"info price" "qty remove";
    row-gap:12px}
  .co-line-info{grid-area:info}.co-line-price{grid-area:price}
  .co-qty{grid-area:qty}.co-remove{grid-area:remove;justify-self:end}
}
.co-empty{text-align:center;padding:40px 0}
.co-empty h3{font-size:19px;margin-bottom:8px}
.co-empty p{color:var(--dim);margin-bottom:20px}

/* ---------- account choice ---------- */
.co-choices{display:grid;gap:11px;margin-bottom:26px}
.co-choice{text-align:left;background:#06080b;border:1px solid var(--line);border-radius:11px;
  padding:16px 18px;cursor:pointer;font:inherit;color:var(--ink);transition:all .14s;display:block}
.co-choice:hover{border-color:var(--accent)}
.co-choice.on{border-color:var(--accent);background:rgba(94,234,212,.07)}
.co-choice b{display:block;font-size:15.5px;font-weight:620;margin-bottom:4px}
.co-choice span{display:block;font-size:13.5px;color:var(--dim);line-height:1.55}
.co-signedin{background:rgba(94,234,212,.06);border:1px solid rgba(94,234,212,.24);
  border-radius:11px;padding:18px 20px;margin-bottom:22px}
.co-signedin p{color:var(--dim);font-size:14.5px}
.co-signedin strong{color:var(--ink)}
.co-forgot{margin-top:4px}
.co-link{background:none;border:none;color:var(--accent);font:inherit;font-size:13.5px;
  cursor:pointer;padding:0;text-decoration:underline;margin-left:auto;font-weight:400}

/* ---------- forms ---------- */
.co-form{display:block}
.co-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.co-row-3{grid-template-columns:1fr 1fr 1fr}
@media(max-width:640px){.co-row,.co-row-3{grid-template-columns:1fr}}
.co-field{margin-bottom:16px}
.co-field label{display:block;font-size:13.5px;color:var(--dim);margin-bottom:7px;font-weight:600}
.co-field label em{font-style:normal;color:var(--dimmer);font-weight:400}
.co-field input,.co-field textarea{width:100%;background:#06080b;border:1px solid var(--line);
  border-radius:9px;padding:12px 14px;color:var(--ink);font:inherit;font-size:15px}
.co-field input:focus,.co-field textarea:focus{outline:none;border-color:var(--accent)}
.co-field input.bad,.co-field textarea.bad{border-color:var(--bad)}
.co-field textarea{resize:vertical;min-height:72px}
.co-field small{display:block;margin-top:6px;font-size:12.5px;color:var(--dimmer);line-height:1.5}
.co-msg{margin-top:6px;font-size:14px;color:var(--dim);line-height:1.55}
.co-msg-bad{color:#ff9a92}
.co-msg-ok{color:var(--accent2)}

/* ---------- review ---------- */
.co-review{display:grid;gap:2px}
.co-review-block{padding:16px 0;border-top:1px solid var(--line)}
.co-review-block:first-child{border-top:none;padding-top:0}
.co-review-block h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--dimmer);font-weight:660;margin-bottom:9px;display:flex;align-items:baseline;gap:12px}
.co-review-block p{font-size:14.8px;color:var(--dim);line-height:1.6}

.co-howpay{background:#06080b;border:1px solid var(--line);border-radius:12px;
  padding:20px 22px;margin:24px 0}
.co-howpay h3{font-size:15px;margin-bottom:12px}
.co-howpay ol{padding-left:20px;margin:0}
.co-howpay li{font-size:14px;color:var(--dim);margin-bottom:7px;line-height:1.6}

/* ---------- consent ---------- */
.co-consent{background:rgba(232,193,122,0.05);border:1px solid rgba(232,193,122,0.26);
  border-radius:12px;padding:22px;margin-bottom:8px}
.co-consent h3{font-size:15px;color:var(--gold);margin-bottom:6px}
.co-consent-intro{font-size:13px;color:var(--dimmer);margin-bottom:16px}
.co-check{display:flex;gap:12px;align-items:flex-start;padding:11px 0;
  border-top:1px solid rgba(232,193,122,0.14);cursor:pointer}
.co-check:first-of-type{border-top:none}
.co-check input{width:19px;height:19px;flex-shrink:0;margin-top:2px;accent-color:var(--accent);
  cursor:pointer}
.co-check span{font-size:13.8px;color:var(--dim);line-height:1.62}
.co-check b{color:var(--ink);font-weight:620}
.co-check a{color:var(--gold)}
.co-check-plain{border:none;padding:4px 0 0}
.co-check-plain span{color:var(--dim)}

/* ---------- done ---------- */
.co-done{text-align:center;padding:20px 0}
.co-tick{width:58px;height:58px;border-radius:50%;background:rgba(52,211,153,.14);
  border:1px solid rgba(52,211,153,.4);color:var(--accent2);font-size:27px;
  display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.co-done h2{font-size:27px;margin-bottom:10px}
.co-ref{font-size:15px;color:var(--dim);margin-bottom:10px}
.co-ref strong{color:var(--accent);font-family:ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:.04em}
.co-done p{color:var(--dim);max-width:52ch;margin:0 auto 8px;font-size:15px;line-height:1.65}
.co-copyfallback{max-width:560px;margin:26px auto 0;text-align:left;border:none;
  border-top:1px solid var(--line);padding-top:16px}
.co-copyfallback summary{font-size:14px;color:var(--dim);font-weight:400}
.co-copyfallback summary::after{font-size:18px}
.co-copyfallback textarea{width:100%;background:#06080b;border:1px solid var(--line);
  border-radius:9px;padding:12px 14px;color:var(--dim);font:inherit;font-size:12.5px;
  font-family:ui-monospace,Menlo,Consolas,monospace;margin:12px 0;resize:vertical}
.co-saved{margin-top:22px;font-size:13px}
.co-saved.ok{color:var(--dimmer)}
.co-saved.warn{color:var(--gold)}

/* ---------- summary rail ---------- */
.co-side{position:sticky;top:86px;display:grid;gap:14px}
@media(max-width:900px){.co-side{position:static}}
.co-summary{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px}
.co-summary h3{font-size:15px;margin-bottom:16px}
.co-sum-line{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;
  color:var(--dim);padding:7px 0;line-height:1.5}
.co-sum-line b{color:var(--ink);font-weight:600;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.co-sum-empty{font-size:13.5px;color:var(--dimmer);padding:6px 0}
.co-totals{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.co-totals div{display:flex;justify-content:space-between;font-size:13.5px;
  color:var(--dim);padding:5px 0}
.co-totals b{color:var(--ink);font-variant-numeric:tabular-nums}
.co-grand{margin-top:8px;padding-top:11px;border-top:1px solid var(--line);font-size:15px}
.co-grand b{font-size:19px;font-weight:660}
.co-summary-fine{margin-top:14px;font-size:12px;color:var(--dimmer);line-height:1.55}
.co-ruo{background:rgba(232,193,122,0.06);border:1px solid rgba(232,193,122,0.22);
  border-radius:12px;padding:16px 18px;font-size:12.5px;color:#d9c19a;line-height:1.6}
.co-ruo b{color:var(--gold)}

/* ============================================================
   VIDEO HERO
   ============================================================ */
.vhero{border-top:none;padding:56px 0 72px;position:relative;overflow:hidden}
.vhero::before{content:"";position:absolute;top:-300px;left:50%;transform:translateX(-50%);
  width:1000px;height:660px;
  background:radial-gradient(circle,rgba(94,234,212,0.10),transparent 66%);pointer-events:none}
.vhero .wrap{position:relative}
.vhero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:44px;
  align-items:center}
/* On phones she leads. The copy is still first in the markup so screen
   readers and search engines get the heading before the video. */
@media(max-width:900px){
  .vhero-grid{grid-template-columns:1fr;gap:32px}
  .vhero-grid > div:last-child{order:-1}
  .vplayer{max-width:340px}
}
.vhero-copy h1{font-size:clamp(32px,4.8vw,52px);margin-bottom:18px;max-width:15ch}
.vhero-copy h1 em{font-style:normal;color:var(--accent)}
.vhero-copy .lede{font-size:18px;margin-bottom:26px}

/* max-width rather than max-height, so aspect-ratio alone decides the box.
   The old rule set aspect-ratio 9/16 AND max-height 640px, and on a wide
   column the height clamp won: the box ended up about 415x640, which is
   0.65 rather than 0.5625. object-fit:cover then filled that wider box by
   cropping the top and bottom off the frame, which reads as the video
   being zoomed in. 380x676 is exactly 9:16, so nothing is cropped. */
.vplayer{position:relative;border-radius:18px;overflow:hidden;background:#06080b;
  border:1px solid var(--line);aspect-ratio:9/16;max-width:380px;margin:0 auto;width:100%;
  box-shadow:0 26px 70px rgba(0,0,0,.55)}
.vplayer.landscape{aspect-ratio:16/9;max-width:none}
/* contain, not cover: if a future video is not exactly 9:16 it gets
   letterboxed rather than silently cropped through the presenter's face. */
.vplayer video{width:100%;height:100%;object-fit:contain;display:block;background:#06080b}
.vplayer-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;text-align:center;padding:32px;
  background:linear-gradient(160deg,#101720,#06080b)}
.vplayer-ph b{font-size:15px;color:var(--ink)}
.vplayer-ph span{font-size:13px;color:var(--dimmer);max-width:30ch;line-height:1.6}
.vplayer-ph code{background:#06080b;border:1px solid var(--line);padding:3px 8px;
  border-radius:5px;font-size:12px;color:var(--accent)}
/* display:flex below beats the [hidden] attribute on its own, which left the
   buttons visible over the "no video yet" placeholder. */
.vplayer-controls[hidden]{display:none}
.vplayer-controls{display:flex;gap:8px;align-items:center;justify-content:center;
  flex-wrap:wrap;margin-top:14px}
.vbtn{background:#0d1218;border:1px solid var(--line);
  color:var(--ink);border-radius:999px;padding:9px 16px;font:inherit;font-size:13px;
  cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  transition:background .14s,border-color .14s;min-width:104px;justify-content:center}
.vbtn:hover{background:#141c26;border-color:var(--dimmer)}
.vbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.vbtn.primary{background:var(--accent);color:#05201c;border-color:var(--accent);font-weight:640}
.vbtn.primary:hover{background:var(--accent);border-color:var(--accent);filter:brightness(1.06)}
/* Covers the whole video, because on a phone the natural way to ask for
   sound is to tap the video rather than to find a small button. */
.vplayer-tap{position:absolute;inset:0;border:none;background:transparent;cursor:pointer;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:22px;font:inherit}
.vplayer-tap[hidden]{display:none}
.vplayer-tap span{background:rgba(8,9,12,.82);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:999px;
  padding:10px 20px;font-size:14px;font-weight:640;
  animation:tapPulse 2.2s ease-in-out infinite}
@keyframes tapPulse{0%,100%{transform:scale(1);opacity:.94}50%{transform:scale(1.05);opacity:1}}
@media(prefers-reduced-motion:reduce){.vplayer-tap span{animation:none}}
.vplayer-badge{position:absolute;top:12px;left:12px;background:rgba(8,9,12,.72);
  backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);border-radius:999px;
  padding:6px 13px;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--dim);font-weight:640}
.vhero-note{margin-top:16px;font-size:12.5px;color:var(--dimmer);line-height:1.6;text-align:center}

/* ---------- footer ---------- */
.safety-bg{background:var(--bg2)}
footer{padding:60px 0 44px;border-top:1px solid var(--line);color:var(--dimmer);font-size:13.5px}
.foot-top{display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap}
.foot-top a{text-decoration:none}
.foot-top a:hover{color:var(--ink)}
.legal{margin-top:28px;padding-top:24px;border-top:1px solid var(--line);line-height:1.75}
.legal p{margin-bottom:13px;font-size:12.5px;color:var(--dimmer)}
.legal strong{color:var(--dim)}
.ph{background:rgba(232,193,122,0.13);color:var(--gold);padding:1px 6px;border-radius:4px;font-size:.9em}

/* ============================================================
   SHOP GRID, CALCULATOR AND RESEARCH APPLICATION
   ------------------------------------------------------------
   These rules used to live in inline <style> blocks on their own
   pages. vercel.json sets style-src 'self', which blocks inline
   <style> exactly the way script-src blocks inline <script>, so
   on the deployed site none of it applied: the shop rendered
   600px vial graphics and the calculator lost its whole layout.
   Moved here because an external stylesheet is 'self'.
   ============================================================ */

/* ---------- shop grid (catalog/single.html) ---------- */
/* ---------- product photo tile ----------
   The product shot is on a white background, so the tile is light on
   purpose: floating a white cut-out on a dark card looks like a bug.
   A fixed square keeps every card the same height regardless of how the
   photo is cropped. */
.vial{width:100%;aspect-ratio:1/1;border-radius:12px;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#ffffff,#e8edf3);display:flex;align-items:center;
  justify-content:center;flex:none}
.vial img{width:100%;height:100%;object-fit:contain;display:block;padding:10%;
  transition:transform .25s ease}
.prod:hover .vial img{transform:scale(1.04)}
.vial .abbr{position:absolute;bottom:9px;right:9px;font-size:9.5px;letter-spacing:.12em;
  color:#0d1218;font-weight:700;background:rgba(255,255,255,.86);
  border:1px solid rgba(0,0,0,.12);border-left-width:3px;border-radius:5px;padding:3px 7px;
  backdrop-filter:blur(4px)}
.prod.no .vial,.prod.soon .vial{filter:grayscale(.55) opacity(.72)}
/* ---------- size / SKU rows ---------- */
.skus{margin:0 0 16px;border-top:1px solid var(--line);padding-top:4px}
.sku{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;
  padding:7px 0;font-size:12.5px;border-bottom:1px solid var(--line)}
.sku:last-child{border-bottom:none}
.sku .code{display:none}
.sku .size{color:var(--ink);font-weight:600;font-size:13.5px}
.sku .cost{color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:13.5px}
.sku-add{background:rgba(94,234,212,.12);border:1px solid rgba(94,234,212,.3);
  color:var(--accent);border-radius:7px;padding:5px 12px;font:inherit;font-size:12px;
  font-weight:640;cursor:pointer;transition:background .14s,color .14s}
.sku-add:hover{background:var(--accent);color:#05201c}
.sku-add.added{background:var(--accent2);border-color:var(--accent2);color:#04231a}
/* The footer button carries both classes. Without this it inherits the
   small translucent pill style from .sku-add and stops reading as the
   primary action on the card. */
.prod-foot .prod-cta.sku-add{background:var(--accent);color:#05201c;border:none;
  padding:9px 16px;border-radius:8px;font-size:13px;font-weight:660}
.prod-foot .prod-cta.sku-add:hover{background:var(--accent);filter:brightness(1.08)}
.prod-foot .prod-cta.sku-add.added{background:var(--accent2);color:#04231a}
.sku-h{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dimmer);
  padding:9px 0 4px;font-weight:640}
.srch{width:100%;background:#06080b;border:1px solid var(--line);color:var(--ink);
  border-radius:9px;padding:12px 15px;font:inherit;font-size:15px;margin-top:18px}
.srch:focus{outline:none;border-color:var(--accent)}
.empty{color:var(--dimmer);padding:40px 0;text-align:center;display:none}
.shop-section{margin-top:36px}
.section-title{font-size:22px;color:var(--accent);margin-bottom:18px}
.cart-panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;margin-top:20px}
.cart-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.cart-header h3{font-size:17px;margin:0}
.cart-meta{color:var(--dimmer);font-size:13px}
.cart-empty{color:var(--dim);padding:20px 0;text-align:center}
.cart-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.cart-item:first-child{border-top:none}
.cart-item-info{min-width:0}
.cart-item-info strong{display:block}
.cart-item-info span{font-size:13px;color:var(--dimmer);display:block}
.cart-item-actions{display:flex;gap:10px;align-items:center}
.cart-remove{border:none;background:none;color:var(--accent);cursor:pointer;font:inherit;padding:0}
.cart-remove:hover{text-decoration:underline}
.cart-checkout{margin-top:16px}
/* The old .prod-cta rules that used to live here were a duplicate of the
   card rules further up, and being later in the file they silently won,
   flattening the Add to cart button back into a plain text link. */

/* ---------- reconstitution calculator ---------- */
.calc{display:grid;grid-template-columns:minmax(300px,1fr) minmax(300px,1.1fr);gap:20px;margin-top:36px}
@media(max-width:860px){.calc{grid-template-columns:1fr}}
.cbox{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.cbox h2{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);
  margin:0 0 18px;font-weight:640}
.fld{margin-bottom:16px}
.fld label{display:block;font-size:13.5px;color:var(--dim);margin-bottom:6px}
.fld .hint{font-size:12px;color:var(--dimmer);margin-top:5px;line-height:1.5}
.inrow{display:flex;gap:8px}
.inrow input{flex:1;min-width:0}
input[type=number],select{background:#06080b;border:1px solid var(--line);color:var(--ink);
  border-radius:9px;padding:11px 13px;font:inherit;font-size:15px;width:100%}
input[type=number]:focus,select:focus{outline:none;border-color:var(--accent)}
.seg{display:flex;gap:6px}
.seg button{flex:1;background:#06080b;border:1px solid var(--line);color:var(--dim);
  border-radius:9px;padding:10px;font:inherit;font-size:14px;cursor:pointer}
.seg button.on{background:var(--accent);border-color:var(--accent);color:#05201c;font-weight:640}
.big-out{background:linear-gradient(180deg,rgba(94,234,212,0.10),transparent);
  border:1px solid rgba(94,234,212,0.24);border-radius:12px;padding:22px;margin-bottom:18px;text-align:center}
.big-out .l{font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.big-out .v{font-size:40px;font-weight:660;letter-spacing:-.03em;line-height:1.1}
.big-out .s{font-size:14px;color:var(--dim);margin-top:8px}
.orow{display:flex;justify-content:space-between;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--line);font-size:14.5px}
.orow:last-child{border-bottom:none}
.orow span:first-child{color:var(--dim)}
.orow span:last-child{font-variant-numeric:tabular-nums;font-weight:600}
.syr{margin-top:20px;padding:18px;background:#06080b;border:1px solid var(--line);border-radius:11px}
.syr .t{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--dim);margin-bottom:14px}
.barrel{position:relative;height:34px;background:#0d1218;border:1px solid var(--line);
  border-radius:5px;overflow:hidden}
.fill{position:absolute;left:0;top:0;bottom:0;background:var(--accent);opacity:.85;
  transition:width .25s ease}
.ticks{display:flex;justify-content:space-between;font-size:10.5px;color:var(--dimmer);margin-top:6px}
.err{color:var(--bad);font-size:13.5px;margin-top:12px;display:none}
.err.show{display:block}

/* ---------- research supply application ---------- */
body{background:#0a0b0d}
.rnav{border-bottom:1px solid var(--line);background:#0a0b0d}
.rnav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.rlogo{font-weight:660;letter-spacing:.02em;font-size:16px;text-decoration:none;
  display:flex;align-items:center;gap:10px}
.rlogo span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer);
  border-left:1px solid var(--line);padding-left:10px}
.ruo{background:#1a1206;border-bottom:1px solid rgba(232,193,122,0.3);color:var(--gold);
  padding:10px 20px;text-align:center;font-size:12.5px;letter-spacing:.02em;font-weight:600}
.gate-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:32px;max-width:560px}
.gate-box h2{font-size:20px;margin-bottom:8px}
.fld{margin-bottom:15px}
.fld label{display:block;font-size:13px;color:var(--dim);margin-bottom:6px}
.fld input,.fld select,.fld textarea{width:100%;background:#06080b;border:1px solid var(--line);
  color:var(--ink);border-radius:8px;padding:11px 13px;font:inherit;font-size:14.5px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--accent)}
.fld .hint{font-size:11.5px;color:var(--dimmer);margin-top:5px;line-height:1.5}
.chk-row{display:flex;gap:10px;align-items:flex-start;margin-bottom:13px;font-size:13px;color:var(--dim);line-height:1.55}
.chk-row input{width:16px;height:16px;margin-top:2px;flex-shrink:0;accent-color:var(--accent)}
.steps{counter-reset:s}
.step{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:none}
.step-n{width:30px;height:30px;border-radius:50%;background:#0d1218;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:660;
  color:var(--accent);flex-shrink:0}
.step h4{font-size:16px;margin-bottom:5px}
.step p{color:var(--dim);font-size:14.5px;margin:0}