:root{
 /* Brand palette SAMPLED FROM THE PRINTED LABELS, not the placeholder SVG:
    wordmark navy #01163B (17.8:1), mark navy #0A3573, teal #00C9C3, cyan #01C1FD.
    Teal and cyan are ~2.1:1 on white — marks and large shapes only, never text.
    Interactive elements use #007A76 (5.19:1), the same teal stepped down until it passes. */
 --bg:#ffffff;--panel:#f4f7f9;--panel-2:#e7eef3;--ink:#01163B;--muted:#55677e;--line:#dbe3ea;
 --brand:#00C9C3;--brand-2:#01C1FD;--brand-navy:#0A3573;
 --accent:#007A76;--accent-d:#006B68;--accent-soft:#00C9C31f;--warn:#b45309;--ok:#007A76;
 --radius:12px;--wrap:1180px;
 --fd:"Inter var","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
 --fb:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
 --mono:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,monospace;
 --shadow:0 1px 2px rgba(15,21,24,.05),0 8px 24px rgba(15,21,24,.06);
}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){
 --bg:#020c22;--panel:#01163B;--panel-2:#0A3573;--ink:#e8f1f6;--muted:#92a9c2;--line:#123a68;
 --brand:#00C9C3;--brand-2:#01C1FD;--brand-navy:#0A3573;
 --accent:#00C9C3;--accent-d:#2ee0d9;--accent-soft:#00C9C322;
 --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);
}}
:root[data-theme=dark]{
 --bg:#020c22;--panel:#01163B;--panel-2:#0A3573;--ink:#e8f1f6;--muted:#92a9c2;--line:#123a68;
 --brand:#00C9C3;--brand-2:#01C1FD;--brand-navy:#0A3573;
 --accent:#00C9C3;--accent-d:#2ee0d9;--accent-soft:#00C9C322;
 --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--fb);font-size:16px;line-height:1.6}
a{color:inherit;text-decoration:none}img,svg{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--fd);margin:0;line-height:1.18;letter-spacing:-.018em;text-wrap:balance}
h1{font-size:clamp(26px,3.6vw,38px);font-weight:680}
h2{font-size:21px;font-weight:660}h3{font-size:16px;font-weight:640}
p{margin:0 0 14px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:10px;top:10px;z-index:200;background:var(--accent);color:#fff;padding:9px 14px;border-radius:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);
 color:#fff;border:0;border-radius:10px;padding:12px 20px;font:600 15px var(--fb);cursor:pointer;transition:.15s}
.btn:hover{background:var(--accent-d)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.eyebrow{display:inline-block;font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;
 color:var(--accent);background:var(--accent-soft);padding:5px 10px;border-radius:20px;margin-bottom:12px}
.announce{background:var(--ink);color:var(--bg);text-align:center;font-size:13px;padding:8px 14px}
.hdr{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.hdr-top{display:flex;align-items:center;gap:18px;padding:14px 20px}
.logo{display:inline-flex;align-items:center}
.logo img,.logo svg{height:44px;width:auto;display:block}
.ft .logo img,.ft .logo svg{height:38px}
/* the lockup is cropped from a white label, so invert-free: on dark grounds the navy
   wordmark would vanish, hence a light plate behind it in dark mode */
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .logo img{background:#fff;border-radius:8px;padding:4px 8px}}
:root[data-theme=dark] .logo img{background:#fff;border-radius:8px;padding:4px 8px}
.ham{display:none;background:0;border:0;font-size:21px;color:var(--ink);cursor:pointer}
.search{flex:1;display:flex;max-width:560px;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel)}
.search:focus-within{border-color:var(--accent)}
.search input{flex:1;border:0;background:transparent;padding:11px 14px;font:15px var(--fb);color:var(--ink);outline:0}
.search button{border:0;background:transparent;padding:0 14px;cursor:pointer;color:var(--muted)}
.hdr-act{display:flex;align-items:center;gap:14px;margin-left:auto}
.cart{position:relative;font-size:14px;font-weight:600}
.cart-n{background:var(--accent);color:#fff;border-radius:20px;font:700 11px var(--mono);padding:1px 6px;margin-left:5px}
.nav{border-top:1px solid var(--line);position:relative}
.nav-in{display:flex;gap:4px;padding:0 20px;font-size:14.5px;font-weight:550}
.nav-i{position:relative}
.nav-i>a{display:inline-flex;align-items:center;gap:6px;padding:12px 12px;white-space:nowrap}
.nav-i>a:hover{color:var(--accent)}
.nav-i .cv{width:9px;height:6px;opacity:.55;transition:transform .15s}
.nav-i:hover .cv,.nav-i:focus-within .cv{transform:rotate(180deg);opacity:1}
.sub-t{display:none}
/* desktop: open on hover or keyboard focus */
.sub{position:absolute;top:100%;left:0;min-width:250px;background:var(--bg);border:1px solid var(--line);
 border-radius:0 0 12px 12px;border-top:2px solid var(--brand);box-shadow:var(--shadow);
 opacity:0;visibility:hidden;transform:translateY(-6px);transition:.15s;z-index:60}
.nav-i:hover .sub,.nav-i:focus-within .sub{opacity:1;visibility:visible;transform:none}
.sub-in{display:flex;flex-direction:column;padding:8px}
.sub-in a{padding:9px 12px;border-radius:8px;font-weight:500;font-size:14px;white-space:nowrap}
.sub-in a:hover{background:var(--accent-soft);color:var(--accent)}
.ham{display:none;background:0;border:0;cursor:pointer;padding:8px;flex-direction:column;gap:4px}
.ham span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}
.ham[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.ham[aria-expanded=true] span:nth-child(2){opacity:0}
.ham[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:18px 0;font-size:13px;color:var(--muted)}
.crumb li+li::before{content:"/";margin-right:8px;opacity:.5}
.crumb a:hover{color:var(--accent)}
.hero{border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--panel),transparent)}
.hero-in{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center;padding:46px 20px}
.lede{font-size:17px;color:var(--muted);max-width:60ch}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 0}
.trust{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;padding:0;margin:22px 0 0;font-size:13.5px;color:var(--muted)}
.trust li::before{content:"✓";color:var(--accent);font-weight:700;margin-right:7px}
.sec{padding:34px 20px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:6px}
.sec-h a{font-size:14px;color:var(--accent);font-weight:600}
.sec-lede{color:var(--muted);font-size:14.5px;margin:0 0 16px;max-width:72ch}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.card{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);overflow:hidden;
 display:flex;flex-direction:column;transition:.15s}
.card:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.card-img{background:var(--panel);aspect-ratio:4/5;display:grid;place-items:center;padding:12px;position:relative;overflow:hidden}
/* every product asset is 1024x1536 (2:3 portrait) — contain, never stretch */
.card-img img{width:auto;height:100%;max-width:100%;object-fit:contain}
/* merchandising tags, set in /admin — distinct from .tag, which names the formats */
/* sibling size / related compound lists on a variant page */
.sibs{list-style:none;padding:0;margin:14px 0 22px;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.sibs a{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;
  padding:11px 14px;background:var(--bg);transition:.15s;text-decoration:none}
.sibs a:hover{border-color:var(--brand);box-shadow:var(--shadow);text-decoration:none}
.sibs .sib-n{font-weight:650;color:var(--ink);font-size:14.5px}
.sibs .sib-p{margin-left:auto;font-size:13.5px;color:var(--accent);font-weight:650;white-space:nowrap}
.sibs.alt a{background:var(--panel)}
@media(max-width:560px){.sibs{grid-template-columns:1fr 1fr;gap:7px}
  .sibs a{padding:9px 10px;flex-wrap:wrap;gap:2px}
  .sibs .sib-n{font-size:13px}.sibs .sib-p{font-size:12.5px;margin-left:0;width:100%}}

.mtags{position:absolute;top:9px;left:9px;display:flex;flex-direction:column;gap:4px;
  align-items:flex-start;z-index:2}
.mtag{background:var(--brand-navy);color:#fff;font:700 10px/1 var(--fb);letter-spacing:.055em;
  text-transform:uppercase;padding:4px 8px;border-radius:4px}
.mtag:nth-child(2){background:var(--accent)}
@media(max-width:560px){.mtag{font-size:9px;padding:3px 6px}}
.tag{position:absolute;top:10px;left:10px;font:600 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;
 background:var(--bg);border:1px solid var(--line);color:var(--muted);padding:3px 8px;border-radius:20px}
.card-b{padding:14px;flex:1}
.card-t{font-size:15.5px;margin-bottom:3px}
.card-sub{font-size:12.5px;color:var(--muted)}
.card-foot{padding:0 14px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.price{font:700 16px var(--fd)}
.price-tbd{font-size:13px;color:var(--muted);font-weight:500}
.card-add{border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:8px;
 padding:7px 12px;font:600 13px var(--fb);cursor:pointer}
.card-add:hover{border-color:var(--accent);color:var(--accent)}
.prod{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;margin:8px 0 30px}
.prod-media{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:grid;place-items:center}
.prod-media img{width:auto;height:auto;max-height:520px;max-width:100%;object-fit:contain}
.vopts{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));margin:10px 0 0}
.vopt{display:flex;flex-direction:column;gap:2px;text-align:left;background:var(--panel);border:1.5px solid var(--line);
 border-radius:10px;padding:10px 12px;cursor:pointer;font:inherit;color:inherit;transition:.15s}
.vopt:hover:not([disabled]){border-color:var(--accent)}
.vopt.sel{border-color:var(--accent);background:var(--accent-soft)}
.vopt[disabled]{opacity:.45;cursor:not-allowed}
.vopt b{font:600 13.5px var(--fb)}.vopt span{font-size:12px;color:var(--muted)}
.vopt em{font:700 14px var(--fd);font-style:normal;margin-top:2px}
.buyrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.buyrow .btn{flex:1;min-width:190px}
.attr-l{font:600 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
table.spec{width:100%;border-collapse:collapse;margin:16px 0 24px;font-size:14px}
table.spec caption{text-align:left;font:700 15px var(--fd);padding-bottom:8px}
table.spec th,table.spec td{border-bottom:1px solid var(--line);padding:9px 10px;text-align:left;vertical-align:top}
table.spec th{width:36%;color:var(--muted);font-weight:600}
/* decorative page header; alt="" because the H1 already carries the meaning */
.guidegrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.guidecard{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg);transition:.15s;display:block}
.guidecard:hover{border-color:var(--brand);box-shadow:var(--shadow)}
.gc-img{background:var(--panel-2);aspect-ratio:16/9;overflow:hidden}
.gc-img img{width:100%;height:100%;object-fit:contain;padding:8px}
.gc-b{padding:14px 16px 16px}
.guidecard h3{font-size:15.5px;margin-bottom:4px}
.guidecard p{font-size:13px;color:var(--muted);margin:0}
@media(max-width:700px){.guidegrid{grid-template-columns:1fr 1fr;gap:12px}.guidecard h3{font-size:14px}.guidecard p{font-size:12px}}
.guide-hero{width:100%;height:auto;max-height:420px;aspect-ratio:auto;object-fit:contain;background:var(--panel);border:1px solid var(--line);border-radius:14px;margin:0 0 22px;padding:14px}
@media(max-width:700px){.guide-hero{aspect-ratio:16/9;border-radius:10px;margin-bottom:16px}}
.prose h2{margin:26px 0 10px}.prose h3{margin:18px 0 6px}
.prose ul{margin:0 0 14px;padding-left:20px}.prose li{margin:5px 0}
.faq details{border-bottom:1px solid var(--line);padding:13px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:15px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--accent);font-weight:700;margin-right:10px}
.faq details[open] summary::before{content:"–"}
.faq p{margin:10px 0 0;color:var(--muted);font-size:14.5px}
.linkrow{list-style:none;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));margin:14px 0 0;padding:0}
.linkrow a{display:block;border:1px solid var(--line);border-radius:10px;padding:11px 13px;background:var(--panel)}
.linkrow a:hover{border-color:var(--accent)}
.linkrow b{display:block;font:600 14px var(--fb)}
.linkrow span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.azidx{display:grid;gap:14px 20px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));margin-top:14px}
.az-g h3{font:800 12px var(--mono);letter-spacing:.1em;color:var(--accent);border-bottom:1px solid var(--line);padding-bottom:5px;margin-bottom:6px}
.az-g ul{list-style:none;margin:0;padding:0}.az-g li{font-size:13.5px;margin:4px 0}
.az-g a:hover{color:var(--accent)}
.ft{border-top:1px solid var(--line);margin-top:40px;background:var(--panel)}
.ft-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px;padding:34px 20px}
.ft-col h4{font-size:13px;margin-bottom:10px}
.ft-col a{display:block;font-size:13.5px;color:var(--muted);margin:5px 0}
.ft-col a:hover{color:var(--accent)}
.ft-brand p{font-size:13.5px;color:var(--muted)}
.ft-bot{border-top:1px solid var(--line);padding:16px 20px;font-size:12.5px;color:var(--muted)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid .fg-2{grid-column:span 2}
label{display:block;font-size:13.5px;font-weight:550;margin-bottom:10px}
input,textarea,select{width:100%;margin-top:5px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;
 background:var(--bg);color:var(--ink);font:15px var(--fb)}
input:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.co-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:26px;align-items:start}
.co-card{border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:18px}
.co-card h2{font-size:17px;margin-bottom:12px}
.co-sum{border:1px solid var(--line);border-radius:var(--radius);padding:20px;position:sticky;top:96px;background:var(--panel)}
.sm-row{display:flex;justify-content:space-between;font-size:14px;padding:6px 0}
.sm-total{border-top:1px solid var(--line);margin-top:8px;padding-top:12px;font-size:17px;font-weight:700}
.co-note{font-size:12.5px;color:var(--muted);margin-top:12px}
.co-wa{margin-top:12px}
.co-wa .btn-wa{width:100%;justify-content:center;box-sizing:border-box}
/* ---------------- mobile ---------------- */
@media(max-width:900px){
 .prod,.co-grid{grid-template-columns:1fr}
 .hero-in{grid-template-columns:minmax(0,1fr)}   /* was 62% — squeezed the copy on phones */
 .ft-grid{grid-template-columns:1fr 1fr}
 .nav-in{gap:16px}
 .co-sum{position:static}                        /* sticky summary makes no sense stacked */
}
@media(max-width:700px){
 /* header stacks: logo + basket on one row, search full width beneath */
 .hdr-top{flex-wrap:wrap;gap:10px 14px;padding:12px 18px}
 .logo{order:1}
 .hdr-act{order:2;margin-left:auto;gap:10px}
 .ham{display:flex}
 /* nav collapses; each item's caret opens its own list beneath it */
 .nav-in{display:none;flex-direction:column;gap:0;padding:6px 18px 14px}
 .nav.open .nav-in{display:flex}
 .nav-i{border-bottom:1px solid var(--line)}
 .nav-i:last-child{border-bottom:0}
 .nav-i>a{padding:13px 0;font-size:15.5px;flex:1}
 .nav-i .cv{display:none}
 .sub-t{display:block;position:absolute;right:0;top:4px;width:40px;height:40px;background:0;border:0;
  cursor:pointer}
 .sub-t::after{content:"";position:absolute;inset:0;margin:auto;width:9px;height:9px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);
  transition:transform .18s}
 .sub-t[aria-expanded=true]::after{transform:rotate(-135deg)}
 .sub{position:static;min-width:0;border:0;box-shadow:none;border-radius:0;
  opacity:1;visibility:visible;transform:none;display:none;background:var(--panel);
  border-radius:10px;margin:0 0 12px}
 .sub-t[aria-expanded=true]+.sub{display:block}
 .nav-i:hover .sub,.nav-i:focus-within .sub{display:none}
 .sub-t[aria-expanded=true]+.sub{display:block!important}
 .sub-in{padding:6px}
 .sub-in a{padding:10px 12px;white-space:normal}
 .search{order:3;flex:1 0 100%;max-width:none}
 .logo img,.logo svg{height:38px}
 /* the family shot is 2:1 landscape — at phone width it crops to almost nothing useful,
    so drop it to a soft bottom band and strengthen the overlay so the copy still reads */
 .hero-bg{background-image:linear-gradient(180deg,#01163Bf7 0%,#01163Bee 52%,#01163Bb8 100%),url("/img/peptiq-hero-family.png");
  background-position:center,center bottom}
 .hero-in{padding:40px 18px 38px}
 .hero .lede{font-size:16.5px;max-width:none}
 .hero .trust{gap:6px 16px;font-size:13px}
 .hero-cta .btn{flex:1 1 100%}
 .statrow{grid-template-columns:1fr 1fr;gap:12px;padding:20px 18px}
 .stat b{font-size:22px}
 .stat span{font-size:12.5px}
 .sec{padding:26px 18px}
 .wrap{padding:0 18px}
 h1{font-size:clamp(25px,7vw,32px)}
 h2{font-size:19px}
 /* exactly two across on a phone, not "as many as fit" */
 .grid{grid-template-columns:1fr 1fr;gap:12px}
 .stacks{grid-template-columns:1fr 1fr;gap:12px}
 .fmtgrid{grid-template-columns:1fr 1fr;gap:12px}
 .stackcard .sc-top{min-height:120px}
 .stackcard .sc-top img{height:120px}
 .stackcard .sc-name{padding:12px 2px 12px 12px}
 .stackcard h3{font-size:15px}
 .stackcard .sc-sub{font-size:11.5px}
 .stackcard .sc-body{padding:12px}
 .stackcard .sc-foot{flex-wrap:wrap;gap:8px}
 .stackcard .sc-foot .card-add{flex:1 0 100%;text-align:center}
 .card-t{font-size:14.5px}
 .card-sub{font-size:11.5px}
 .card-foot{flex-wrap:wrap;gap:8px}
 .card-foot .card-add{flex:1 0 100%;text-align:center}
 .prod{gap:22px}
 .prod-media{padding:16px}
 .prod-media img{max-height:340px}
 .reflist li{padding-left:0}
 .reflist li::before{position:static;display:inline-grid;margin:0 0 8px}
 table.spec th{width:42%}
 .proofcard dl{grid-template-columns:1fr;gap:2px 0}
 .proofcard dt{margin-top:8px}
}
@media(max-width:560px){
 .form-grid{grid-template-columns:1fr}
 .form-grid .fg-2{grid-column:auto}
 .ft-grid{grid-template-columns:1fr;gap:20px;padding:26px 18px}
 .statrow{grid-template-columns:1fr}
 .azidx{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- brand colour: navy ground + teal accent, used as real surfaces not just links ---- */
.hero{border-bottom:0;background:var(--ink);color:#fff;position:relative;overflow:hidden;isolation:isolate}
/* the landscape family shot sits behind the copy; a navy gradient keeps the text legible
   over it rather than relying on the photo's own contrast */
.hero-bg{position:absolute;inset:0;z-index:-1;
 background-image:linear-gradient(100deg,#01163Bf2 0%,#01163Bde 38%,#01163B70 62%,#01163B40 100%),url("/img/peptiq-hero-family.png");
 background-size:cover,cover;background-position:center,center right}
.hero::before{content:"";position:absolute;right:-160px;top:-130px;width:480px;height:480px;border-radius:50%;
 border:60px solid var(--brand);opacity:.10;pointer-events:none;z-index:-1}
.hero-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,62%);gap:0;padding:64px 20px 58px}
.hero h1{color:#fff;font-size:clamp(30px,4.6vw,48px)}
.hero .lede{color:#d5e6ee;font-size:18px;max-width:50ch}
.hero .eyebrow{color:var(--brand);background:#00C9C31f}
.hero .trust{color:#b4cddb}
.hero .trust li::before{color:var(--brand)}
.hero .btn.ghost{color:#fff;border-color:#ffffff40;backdrop-filter:blur(3px)}
.hero .btn.ghost:hover{border-color:var(--brand);color:var(--brand)}
.hero-price{display:inline-flex;align-items:baseline;gap:8px;margin-top:8px;font:700 16px var(--fd);color:var(--brand)}
.hero-price span{color:#a9c6d4;font-weight:500}

.band{background:var(--panel)}
.band-ink{background:var(--ink);color:#fff}
.band-ink h2,.band-ink h3{color:#fff}
.band-ink p{color:#bcd6e0}
.band-ink .sec-h a{color:var(--brand)}
/* a ghost button inside the navy band was inheriting color:var(--ink) — navy on navy,
   so the label was invisible. Scope it to the surface it actually sits on. */
.band-ink .btn.ghost{color:#fff;border-color:#ffffff40}
.band-ink .btn.ghost:hover{border-color:var(--brand);color:var(--brand)}

.statrow{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));padding:26px 20px}
.stat{border-left:3px solid var(--brand);padding:2px 0 2px 14px}
.stat b{display:block;font:700 26px/1.1 var(--fd);letter-spacing:-.02em}
.stat span{font-size:13.5px;color:var(--muted)}
.band-ink .stat span{color:#a9c6d4}

.stacks{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.stackcard{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg);display:flex;flex-direction:column;transition:.15s}
.stackcard:hover{border-color:var(--brand);box-shadow:var(--shadow);transform:translateY(-2px)}
.stackcard .sc-top{background:linear-gradient(140deg,var(--ink),#0a2c52);padding:0;color:#fff;position:relative;
 display:grid;grid-template-columns:1fr auto;align-items:end;gap:10px;min-height:150px;overflow:hidden}
.stackcard .sc-top::after{content:"";position:absolute;right:-34px;top:-30px;width:150px;height:150px;
 border-radius:50%;border:24px solid var(--brand);opacity:.20}
.stacks a:nth-child(2) .sc-top::after{border-color:var(--brand-2)}
.stacks a:nth-child(3) .sc-top::after{border-color:#4f8cff}
.stackcard .sc-top img{position:relative;z-index:1;grid-column:2;height:150px;width:auto;
 object-fit:contain;filter:drop-shadow(0 6px 18px rgba(0,0,0,.45))}
.stackcard .sc-name{position:relative;z-index:1;grid-column:1;padding:16px 4px 16px 18px}
.stackcard h3{color:#fff;font-size:18px}
.stackcard .sc-sub{color:#9dc3d3;font-size:13px;margin-top:3px}
.stackcard .sc-body{padding:14px 18px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
.stackcard .sc-fmt{font:600 11px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}
.stackcard .sc-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px}

.fmtgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.fmtcard{border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--bg);transition:.15s;display:block}
.fmtcard:hover{border-color:var(--brand);box-shadow:var(--shadow)}
.fmtcard{padding:0;overflow:hidden}
.fmt-img{background:var(--panel-2);aspect-ratio:4/3;display:grid;place-items:center;padding:10px}
.fmt-img img{width:auto;height:100%;max-width:100%;object-fit:contain}
.fmtcard h3{margin:14px 16px 4px}
.fmtcard p{margin:0 16px 8px}
.fmtcard span{display:block;margin:0 16px 16px}
.fmtcard h3{font-size:16px;margin-bottom:4px}
.fmtcard p{font-size:13px;color:var(--muted);margin:0 0 8px}
.fmtcard span{font:700 12px var(--mono);color:var(--accent)}

.proofgrid{display:grid;gap:18px;grid-template-columns:1.1fr .9fr;align-items:center}
.proofcard{background:#ffffff0f;border:1px solid #ffffff24;border-radius:14px;padding:20px}
.proofcard dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:9px 16px;font-size:14px}
.proofcard dt{color:var(--brand);font-weight:600;white-space:nowrap}
.proofcard dd{margin:0;color:#cfe3ea}
@media(max-width:820px){.proofgrid{grid-template-columns:1fr}}

/* ---- published research ---- */
.research{border-top:1px solid var(--line);margin-top:30px;padding-top:24px}
.research h2{margin-bottom:12px}
.research p{max-width:72ch}
.reflist{list-style:none;counter-reset:r;margin:18px 0 14px;padding:0}
.reflist li{counter-increment:r;position:relative;padding:14px 0 14px 46px;border-bottom:1px solid var(--line)}
.reflist li::before{content:counter(r);position:absolute;left:0;top:14px;width:30px;height:30px;border-radius:50%;
 background:var(--accent-soft);color:var(--accent);font:700 13px var(--mono);display:grid;place-items:center}
.ref-t{display:block;font:600 15px var(--fb);line-height:1.4}
.ref-t a{color:var(--accent)}
.ref-t a:hover{text-decoration:underline}
.ref-m{display:block;font:12.5px var(--mono);color:var(--muted);margin-top:4px}
.ref-n{display:block;font-size:14px;color:var(--muted);margin-top:6px;max-width:72ch}
.ref-comp{font-size:14px;color:var(--muted);background:var(--panel);border-radius:10px;padding:12px 14px;max-width:72ch}
.ref-comp a{color:var(--accent);font-weight:600}
.ref-foot{font-size:13px;color:var(--muted);border-left:3px solid var(--brand);padding-left:14px;margin-top:16px}

.crypto{border-top:1px solid var(--line);margin-top:18px;padding-top:16px}
.crypto h3{font-size:16px;margin:0 0 6px}
.crypto>p{font-size:14px;margin:0 0 12px}
.cnet{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.cn{border:1px solid var(--line);border-radius:10px;padding:11px 12px;background:var(--bg)}
.cn-h{display:flex;align-items:baseline;gap:8px;margin-bottom:7px}
.cn-sym{font:700 14px var(--fd);color:var(--ink)}
.cn-net{font-size:11.5px;color:var(--muted);background:var(--panel-2);padding:2px 7px;border-radius:20px}
.cn-a{display:flex;align-items:center;gap:8px}
.cn-a code{font:600 12px var(--mono);word-break:break-all;flex:1;line-height:1.45}
.crypto-warn{font-size:13px;color:var(--muted);margin:12px 0 0;padding:9px 11px;
  background:var(--panel-2);border-radius:8px}
@media(max-width:560px){.cnet{grid-template-columns:1fr}}

.pay-block{border:1px solid var(--line);border-radius:12px;padding:20px;margin:18px 0;background:var(--panel)}
.pay-block h2{margin:0 0 8px;font-size:19px}
.pay-alt{font-size:13px;color:var(--muted);margin:10px 0 0}
table.bank{width:100%;border-collapse:collapse;margin:14px 0;font-size:14px}
table.bank caption{text-align:left;font:700 14px var(--fd);padding-bottom:8px}
table.bank th,table.bank td{border-bottom:1px solid var(--line);padding:9px 10px;text-align:left}
table.bank th{width:40%;color:var(--muted);font-weight:600}
table.bank code{font:600 14px var(--mono);letter-spacing:.02em}
.copy{margin-left:10px;font:600 11px var(--fb);border:1px solid var(--line);background:transparent;
  color:var(--muted);border-radius:6px;padding:3px 8px;cursor:pointer}
.copy:hover{border-color:var(--accent);color:var(--accent)}
.bank-note{font-size:13px;color:var(--muted)}
.proof{border-top:1px solid var(--line);margin-top:16px;padding-top:16px}
.proof h3{font-size:15px;margin:0 0 4px}
.proof p{font-size:13px;color:var(--muted);margin:0 0 10px}
.proof input[type=file]{font:13px var(--fb)}
.proof-msg{font-size:13px;margin-top:10px;color:var(--accent)}
.pay-notice{border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:16px 0;background:var(--panel)}
.pay-notice h2{font-size:16px;margin:0 0 6px}
.pay-notice p{font-size:14px;margin:0}
/* WhatsApp keeps its own green everywhere it appears — customers scan for the colour, and a
   teal-branded WhatsApp button reads as a generic link. */
.pay-wa{margin:14px 0 0}
.btn-wa{display:inline-flex;align-items:center;gap:9px;background:#25d366;color:#fff;
  font:700 14px/1 var(--fb);padding:12px 20px;border-radius:9px;text-decoration:none;
  border:1px solid #1eb855;transition:background .15s}
.btn-wa:hover{background:#1eb855;color:#fff}
.btn-wa svg{flex:0 0 auto}

/* ---------- floating launchers ---------- */
.fab-stack{position:fixed;right:16px;bottom:16px;z-index:80;display:flex;flex-direction:column;
  gap:10px;align-items:flex-end}
.fab{width:54px;height:54px;border-radius:50%;border:0;cursor:pointer;display:grid;
  place-items:center;box-shadow:0 6px 22px rgba(1,22,59,.28);transition:transform .15s,box-shadow .15s;
  position:relative;padding:0}
.fab:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(1,22,59,.34)}
.fab:focus-visible{outline:3px solid var(--brand-2);outline-offset:3px}
.fab svg{width:27px;height:27px;display:block}
.fab-wa{background:#25D366}
.fab-chat{background:var(--brand-navy)}
.fab-chat .bdg{position:absolute;top:-2px;right:-2px;min-width:19px;height:19px;border-radius:19px;
  background:#e5484d;color:#fff;font:700 11px/19px system-ui;padding:0 5px;display:none}
.fab-chat .bdg.on{display:block}
.fab-lbl{position:absolute;right:64px;top:50%;transform:translateY(-50%) scale(.9);
  background:var(--ink);color:#fff;font:600 12.5px var(--fb);padding:6px 11px;border-radius:7px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:.15s}
.fab:hover .fab-lbl{opacity:1;transform:translateY(-50%) scale(1)}

/* ---------- chat panel ---------- */
.cw{position:fixed;right:16px;bottom:16px;z-index:90;width:min(94vw,368px);height:min(74vh,560px);
  background:var(--bg);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 20px 60px rgba(1,22,59,.3);display:none;flex-direction:column}
.cw.open{display:flex}
.cw-h{background:var(--brand-navy);color:#fff;padding:13px 15px;display:flex;align-items:center;gap:10px}
.cw-h .av{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;
  place-items:center;font:700 13px var(--fd);flex:none}
.cw-h b{font:700 14.5px var(--fd);display:block;line-height:1.25}
.cw-h small{font-size:11.5px;opacity:.72;display:flex;align-items:center;gap:5px}
.cw-h small i{width:6px;height:6px;border-radius:50%;background:#4ade80;display:inline-block;font-style:normal}
.cw-x{margin-left:auto;background:0;border:0;color:#fff;font-size:21px;cursor:pointer;opacity:.75;
  line-height:1;padding:4px 2px}
.cw-x:hover{opacity:1}
.cw-b{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:9px;
  background:var(--panel)}
.msg{max-width:82%;padding:9px 12px;border-radius:14px;font-size:14px;line-height:1.45;
  word-wrap:break-word;white-space:pre-wrap}
/* Named from the VISITOR's point of view, because this widget only ever runs in their browser.
   The chat store's own field is named the other way round (from "us" means the shop), so the
   mapping is inverted where the class is set. Reusing the server's wording here put the
   visitor's own messages grey on the left and the shop's replies navy on the right, which
   reads as though the shop were the one typing.
   NB this whole block is inside a template literal — no backticks in these comments. */
.msg.theirs{background:var(--bg);border:1px solid var(--line);align-self:flex-start;
  border-bottom-left-radius:5px}
.msg.mine{background:var(--brand-navy);color:#fff;align-self:flex-end;border-bottom-right-radius:5px}
.msg .t{display:block;font-size:10.5px;opacity:.6;margin-top:3px}
.cw-i{border-top:1px solid var(--line);background:var(--bg);padding:9px;display:flex;gap:8px;
  align-items:flex-end}
.cw-i textarea{flex:1;border:1px solid var(--line);border-radius:10px;padding:9px 11px;
  font:14px var(--fb);resize:none;max-height:96px;min-height:40px;color:var(--ink);background:var(--bg)}
.cw-i textarea:focus{outline:0;border-color:var(--accent)}
.cw-s{background:var(--accent);color:#fff;border:0;border-radius:10px;width:40px;height:40px;
  cursor:pointer;flex:none;display:grid;place-items:center}
.cw-s:hover{background:var(--accent-d)}
.cw-s svg{width:18px;height:18px}
.cw-id{padding:12px 14px;border-bottom:1px solid var(--line);background:var(--bg)}
.cw-id p{font-size:12.5px;color:var(--muted);margin:0 0 8px}
.cw-id input{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px 10px;
  font:13.5px var(--fb);margin-bottom:7px;color:var(--ink);background:var(--bg)}
.cw-id input:focus{outline:0;border-color:var(--accent)}
.cw-id button{width:100%;background:var(--accent);color:#fff;border:0;border-radius:8px;
  padding:9px;font:600 13.5px var(--fb);cursor:pointer}
@media(max-width:480px){
  .cw{right:8px;left:8px;bottom:8px;width:auto;height:min(80vh,540px)}
  .fab-stack{right:12px;bottom:12px}
  .fab{width:50px;height:50px}
}
@media print{.fab-stack,.cw{display:none!important}}

.guide-note{background:var(--panel);border-left:3px solid var(--brand);border-radius:0 9px 9px 0;
  padding:12px 15px;font-size:13.5px;color:var(--muted);margin:20px 0 0}
.guide-note strong{color:var(--ink)}
.prose table.ptable{width:100%;border-collapse:collapse;margin:14px 0 20px;font-size:14.5px}
.prose table.ptable th,.prose table.ptable td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.prose table.ptable thead th{background:var(--panel);font-weight:700}
.prose table.ptable th[scope=row]{background:var(--panel);font-weight:600;width:32%;color:var(--muted)}
@media(max-width:560px){.prose table.ptable{font-size:13px}
  .prose table.ptable th,.prose table.ptable td{padding:7px 8px}}