/* ============================================================
   Jay Sauces Peptides — shared styles
   Flat, matte, single brand blue. No gradients, no gloss.
   Type: Clash Display (headings) + General Sans (body), self-hosted.
   Radius: one deliberate scale — the left nav is the ONLY full pill.
   ============================================================ */
@font-face{font-family:'Clash Display';src:url('fonts/clash-display-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Clash Display';src:url('fonts/clash-display-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('fonts/general-sans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('fonts/general-sans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('fonts/general-sans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
:root{
  --bg:#0b0d12;
  --surface:#12151d;
  --surface-2:#171b25;
  --border:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.14);
  --text:#e8eaef;
  --muted:#8b93a4;
  --faint:#5a6274;
  --accent:#22b8ea;          /* electric cyan-blue, sampled from the logo's "SAUCES" */
  --accent-hover:#42c8f4;
  --accent-soft:rgba(34,184,234,.13);
  --accent-line:rgba(34,184,234,.34);
  --on-accent:#04141f;       /* dark ink on accent fills — more distinctive than white-on-blue */
  /* SECOND colour role, from the logo's crown. Gold = trust / verified only.
     Blue does CTA + links; gold does COA-verified + lab-tested. Never mixed jobs. */
  --gold:#e6b23a;
  --gold-hover:#f2c658;
  --gold-soft:rgba(230,178,58,.13);
  --gold-line:rgba(230,178,58,.36);
  --good:#4a9d6a;
  /* Radius as a signal, not decoration. Sharp/clinical everywhere (lab-report
     feel, reinforcing the COA/verified story). The ONLY pills are the shapes
     that should stand apart: the primary CTA (the one action) and status
     badges. Nothing else rounds — so shape, not just colour, marks "click this". */
  --r-control:2px;   /* secondary buttons, inputs, search, chips, filters, dose tags — near-square, clinical */
  --r-card:3px;      /* cards & content containers */
  --r-panel:8px;     /* large hero-level surfaces only */
  --r-pill:9999px;   /* primary CTA + status badge — the ONLY rounded shapes */
  /* legacy aliases retargeted onto the new scale */
  --r-lg:var(--r-card); --r-md:var(--r-control); --r-sm:var(--r-control);
  --radius:var(--r-card); --radius-sm:var(--r-control);
  --nav-w:262px;
  --font-display:'Clash Display','Helvetica Neue',Arial,sans-serif;
  --font-body:'General Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{min-height:100%}
body{
  font-family:var(--font-body);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.5;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* ============ LEFT PILL NAV ============ */
.nav{
  position:fixed;
  left:1.25rem; top:1.25rem; bottom:1.25rem;
  width:224px;
  display:flex; flex-direction:column;
  padding:1.5rem 1rem 1.2rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:22px;
  z-index:60;
}
.nav__logo{ display:block; margin:.2rem auto 1.4rem; width:150px; height:auto; }
.nav__tag{
  text-align:center; font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); font-weight:600; margin-bottom:1.6rem;
}
.nav__section{
  font-size:.58rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--faint); font-weight:600; margin:.2rem .55rem .55rem;
}
.nav__links{display:flex;flex-direction:column;gap:.1rem}
.nav__link{
  display:flex; align-items:center; gap:.7rem;
  padding:.55rem .7rem; border-radius:var(--r-control);
  color:var(--muted); font-weight:500; font-size:.9rem;
  transition:background .15s,color .15s;
}
.nav__link svg{width:18px;height:18px;flex:none;stroke-width:1.6;opacity:.85}
.nav__link:hover{ background:rgba(255,255,255,.04); color:var(--text); }
.nav__link--on{ color:var(--text); background:rgba(255,255,255,.06); }
.nav__link--on svg{color:var(--accent);opacity:1}
.nav__spacer{flex:1;min-height:1rem}
.nav__ship{
  display:flex;gap:.6rem;align-items:flex-start;
  margin:.4rem .05rem .75rem; padding:.7rem .75rem;
  border-radius:var(--r-control); background:var(--surface-2); border:1px solid var(--border);
}
.nav__ship svg{width:17px;height:17px;color:var(--accent);flex:none;margin-top:2px;stroke-width:1.6}
.nav__ship b{display:block;font-weight:600;font-size:.76rem;color:var(--text)}
.nav__ship span{font-size:.68rem;color:var(--muted);line-height:1.35;display:block;margin-top:2px}
.nav__cta{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.7rem; border-radius:var(--r-pill);
  font-weight:600; font-size:.85rem; color:var(--on-accent); background:var(--gold);
  transition:background .15s;
}
.nav__cta:hover{background:var(--gold-hover)}
.nav__cta svg{width:16px;height:16px}

/* mobile nav bar (shown < 720px) */
.navbar{
  display:none;
  position:fixed;top:.8rem;left:.8rem;right:.8rem;z-index:60;
  align-items:center;justify-content:space-between;
  padding:.6rem .9rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);
}
.navbar img{width:104px}
.navbar__toggle{
  width:40px;height:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-control);cursor:pointer;
}
.navbar__toggle span{width:16px;height:1.6px;background:var(--text);border-radius:2px}

/* ============ MAIN ============ */
.main{ margin-left:var(--nav-w); padding:1.9rem 3rem 4rem; max-width:1720px; }

.topbar{ display:flex;align-items:center;gap:1rem;justify-content:space-between;margin-bottom:3rem; }
.search{ position:relative; flex:1; max-width:440px; }
.search svg{position:absolute;left:.95rem;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--faint);stroke-width:1.6}
.search input{
  width:100%; padding:.72rem .9rem .72rem 2.5rem;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-control); color:var(--text); font-family:var(--font-body); font-size:.92rem;
  outline:none; transition:border-color .15s;
}
.search input::placeholder{color:var(--faint)}
.search input:focus{border-color:var(--border-strong)}
.topbar__actions{display:flex;gap:.5rem;align-items:center}
.chip-mini{
  display:flex;align-items:center;gap:.4rem;padding:.55rem .8rem;border-radius:var(--r-control);
  background:var(--surface);border:1px solid var(--border);color:var(--muted);font-size:.82rem;font-weight:500;
  transition:border-color .15s,color .15s;white-space:nowrap;
}
.chip-mini:hover{border-color:var(--border-strong);color:var(--text)}
.chip-mini svg{width:15px;height:15px;stroke-width:1.6}

/* page header (interior pages) */
.page-head{margin-bottom:2.4rem}
.page-head h1{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;font-size:clamp(1.8rem,3.4vw,2.5rem);line-height:1.1;margin-bottom:.7rem}
.page-head p{color:var(--muted);max-width:58ch;font-size:1rem;line-height:1.6}

/* ============ HERO (home) — asymmetric split: text left, oversized vial graphic right ============ */
.hero{ display:grid; grid-template-columns:1.08fr .92fr; gap:1.5rem; align-items:center; margin-bottom:3.6rem; }
.hero h1{
  font-family:var(--font-display); font-weight:600; letter-spacing:-.03em;
  font-size:clamp(2.3rem,4.6vw,3.8rem); line-height:1.0; margin-bottom:1.2rem;
  max-width:13ch; text-wrap:balance;
}
.hero h1 .accent{ color:var(--accent); }
.hero p.lede{ font-size:1.02rem; color:var(--muted); max-width:44ch; line-height:1.6; margin-bottom:1.9rem; }
/* right column: a filled, labelled product mock (gold cap + blue liquid + overlapping
   label) — real depth, two colours, NOT a scaled-up single-hue outline icon */
/* pull the vial back toward the middle on wide screens instead of stranding it at the far edge */
.hero__art{ position:relative; display:flex; justify-content:center; align-self:stretch; align-items:center; min-height:360px; padding-right:clamp(0px,11vw,230px); }
/* transparent-background product render — grounded with a soft drop shadow */
.hero-vial{ width:min(74%,236px); height:auto; filter:drop-shadow(0 26px 34px rgba(0,0,0,.55)); }
.cta-row{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.btn{
  display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.9rem;
  padding:.72rem 1.25rem;border-radius:var(--r-control);cursor:pointer;border:1px solid transparent;
  transition:background .15s,border-color .15s;
}
/* Primary CTA carries the GOLD now — gold's high-weight moment (co-equal with blue),
   and it's the only pill, so it pops through both colour AND shape. */
.btn--primary{ color:var(--on-accent); background:var(--gold); border-radius:var(--r-pill); padding-left:1.6rem; padding-right:1.6rem; }
.btn--primary:hover{background:var(--gold-hover)}
.btn--ghost{ color:var(--text); background:transparent; border-color:var(--border-strong); }
.btn--ghost:hover{border-color:var(--muted)}
.btn svg{width:17px;height:17px;stroke-width:1.6}

.stats{ display:flex; gap:2.6rem; margin-top:2.4rem; flex-wrap:wrap; }
.stat b{font-family:var(--font-display);font-weight:600;font-size:1.35rem;display:block;line-height:1;letter-spacing:-.01em}
.stat span{font-size:.76rem;color:var(--faint);letter-spacing:.04em;text-transform:uppercase;font-weight:500;margin-top:.4rem;display:block}
.stat--trust b{color:var(--gold)}  /* trust metric carries the gold role */

/* section heading */
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:3.4rem 0 1.3rem}
.section-head h2{font-family:var(--font-display);font-weight:600;font-size:1.25rem;letter-spacing:-.01em}
.section-head span{font-size:.8rem;color:var(--faint)}

/* Horizontal shipping timeline — the differentiated component that replaces the
   "four claim cards". The next-day claim itself is the visual; last step is the
   gold payoff. No card boxes at all. */
.htimeline{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:.5rem}
.htstep{position:relative;padding-right:1.4rem}
.htstep__num{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--border-strong);font-family:var(--font-display);font-weight:600;font-size:.95rem;color:var(--accent);margin-bottom:1.1rem}
.htstep:not(:last-child)::after{content:"";position:absolute;top:18.5px;left:38px;right:1.4rem;height:1.5px;background:var(--border)}
.htstep h3{font-family:var(--font-display);font-weight:600;font-size:1.02rem;margin-bottom:.35rem;letter-spacing:-.01em}
.htstep p{font-size:.85rem;color:var(--muted);line-height:1.5;max-width:22ch}
.htstep--end .htstep__num{background:var(--gold-soft);border-color:var(--gold-line);color:var(--gold)}
.htstep--end .htstep__num svg{width:18px;height:18px;stroke-width:2.6}

/* Gold trust strip — verified signals in a row, not repeated cards */
.trust-strip{list-style:none;display:flex;flex-wrap:wrap;gap:1.7rem;margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid var(--border)}
.trust-strip li{display:flex;align-items:center;gap:.55rem;font-size:.9rem;color:var(--text);font-weight:500}
.trust-strip svg{width:18px;height:18px;color:var(--gold);stroke-width:2.4;flex:none}

/* payment chips */
.pay{ margin-top:3rem; }
.pay__label{font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--faint);font-weight:600;margin-bottom:.85rem}
.pay__chips{display:flex;gap:.5rem;flex-wrap:wrap}
.pchip{display:flex;align-items:center;gap:.55rem;padding:.5rem .8rem .5rem .55rem;border-radius:var(--r-control);background:var(--surface);border:1px solid var(--border);font-size:.82rem;font-weight:500;color:var(--text)}

/* svgl brand marks — self-hosted, shown on a light badge so brand colours read on the dark UI */
.brand-badge{width:24px;height:24px;border-radius:var(--r-control);background:#fff;display:inline-flex;align-items:center;justify-content:center;flex:none}
.brand-badge img{width:16px;height:16px;display:block}
.brand-badge--neutral{background:var(--surface-2);border:1px solid var(--border)}
.brand-badge--neutral svg{width:15px;height:15px;color:var(--accent);stroke-width:1.7}
.brand-inline{width:15px;height:15px;flex:none;display:block}

/* ============ PRODUCT GRID ============ */
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.6rem}
.filter{padding:.45rem .85rem;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border);color:var(--muted);font-size:.82rem;font-weight:500;cursor:pointer;transition:border-color .15s,color .15s}
.filter:hover{border-color:var(--border-strong);color:var(--text)}
.filter--on{background:var(--accent-soft);border-color:rgba(63,127,212,.35);color:#7fe0f7}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}
/* home "featured" is intentionally non-uniform: first card double-width */
.grid--spotlight{grid-template-columns:repeat(4,1fr)}
.grid--spotlight>:nth-child(1){grid-column:span 2}
.card{padding:1.25rem;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);transition:border-color .15s}
a.card:hover{border-color:var(--border-strong)}
.card__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.4rem}
/* trust badge = gold + pill (a status pill, functionally distinct from a card) */
.card__coa{display:inline-flex;align-items:center;gap:.35rem;font-size:.68rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;padding:.28rem .6rem;border-radius:var(--r-pill);background:var(--gold-soft);color:var(--gold);border:1px solid var(--gold-line)}
.card__coa svg{width:12px;height:12px;stroke-width:2}
.card__coa--pending{background:rgba(255,255,255,.05);color:var(--faint)}
.card__price{font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--text)}
.card h3{font-family:var(--font-display);font-weight:600;font-size:1.05rem;margin-bottom:.2rem;letter-spacing:-.01em}
.card .sub{font-size:.8rem;color:var(--faint)}
.card__foot{display:flex;align-items:center;gap:.5rem;margin-top:1.1rem;padding-top:.95rem;border-top:1px solid var(--border)}
.card__doses{display:flex;gap:.35rem;flex-wrap:wrap}
.dose{font-size:.72rem;font-weight:500;padding:.22rem .5rem;border-radius:var(--r-control);background:rgba(255,255,255,.05);color:var(--muted)}
.card--soon{display:flex;align-items:center;justify-content:center;text-align:center;border-style:dashed;min-height:180px;color:var(--faint)}
.card--soon b{display:block;color:var(--muted);font-weight:600;margin-bottom:.3rem;font-family:var(--font-display)}
.empty{display:none;padding:2.5rem;text-align:center;color:var(--faint);border:1px dashed var(--border);border-radius:var(--radius)}

/* ============ COA LIST ============ */
.coa-list{display:flex;flex-direction:column;gap:.6rem}
.coa-row{display:flex;align-items:center;gap:1rem;padding:1rem 1.2rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);flex-wrap:wrap}
.coa-row__name{font-family:var(--font-display);font-weight:600;font-size:.98rem;min-width:150px}
.coa-row__meta{display:flex;gap:1.4rem;flex-wrap:wrap;color:var(--muted);font-size:.82rem;flex:1}
.coa-row__meta b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.coa-row__verify{margin-left:auto;display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:600;color:var(--gold);padding:.5rem .85rem;border:1px solid var(--gold-line);border-radius:var(--r-control);transition:background .15s}
.coa-row__verify:hover{background:var(--gold-soft)}
.coa-row__verify:hover{background:var(--accent-soft)}
.coa-row__verify svg{width:14px;height:14px;stroke-width:2}

/* ============ PAYMENT PAGE ============ */
.pay-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem}
.pay-card{padding:1.4rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.pay-card__head{display:flex;align-items:center;gap:.7rem;margin-bottom:.8rem}
.pay-card__badge{width:40px;height:40px;border-radius:var(--r-control);background:var(--surface-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex:none}
.pay-card__badge--brand{background:#fff;border-color:transparent}
.pay-card__badge--brand img{width:24px;height:24px;display:block}
.pay-card__badge--neutral svg{width:20px;height:20px;color:var(--accent);stroke-width:1.6}
.pay-card h3{font-family:var(--font-display);font-weight:600;font-size:1.05rem}
.pay-card .tag{font-size:.72rem;color:var(--faint)}
.pay-card p{color:var(--muted);font-size:.88rem;line-height:1.6}

/* ============ SHIPPING TIMELINE ============ */
.promise{padding:1.6rem 1.8rem;border:1px solid rgba(63,127,212,.28);background:var(--accent-soft);border-radius:var(--radius);margin-bottom:2.4rem;display:flex;gap:1rem;align-items:flex-start}
.promise svg{width:24px;height:24px;color:var(--accent);flex:none;stroke-width:1.6;margin-top:2px}
.promise b{font-family:var(--font-display);font-weight:600;font-size:1.05rem;display:block;margin-bottom:.3rem}
.promise p{color:var(--muted);font-size:.92rem;line-height:1.6}
.timeline{display:flex;flex-direction:column;gap:0;margin-top:1rem}
.tl{display:flex;gap:1.1rem;padding-bottom:1.6rem;position:relative}
.tl:not(:last-child)::before{content:"";position:absolute;left:15px;top:34px;bottom:0;width:1.5px;background:var(--border)}
.tl__dot{width:32px;height:32px;flex:none;border-radius:50%;background:var(--surface);border:1px solid var(--border-strong);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:600;font-size:.85rem;color:var(--accent);z-index:1}
.tl__body h3{font-family:var(--font-display);font-weight:600;font-size:1rem;margin-bottom:.25rem}
.tl__body p{color:var(--muted);font-size:.88rem;line-height:1.55;max-width:52ch}

/* ============ CONTACT ============ */
.contact-card{padding:2rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);max-width:520px}
.contact-row{display:flex;align-items:center;gap:.9rem;padding:.9rem 0;border-bottom:1px solid var(--border)}
.contact-row:last-of-type{border-bottom:none}
.contact-row svg{width:20px;height:20px;color:var(--accent);flex:none;stroke-width:1.6}
.contact-row img{width:20px;height:20px;flex:none}
.contact-row .k{font-size:.72rem;color:var(--faint);text-transform:uppercase;letter-spacing:.08em}
.contact-row .v{font-weight:600}
.contact-card .btn{margin-top:1.4rem;width:100%;justify-content:center}

/* ============ FOOTER ============ */
.foot{margin-top:4rem;padding-top:1.6rem;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--faint);font-size:.8rem}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--text)}

.note{font-size:.82rem;color:var(--faint);margin-top:1.4rem;line-height:1.6;max-width:62ch}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){ .grid{grid-template-columns:repeat(2,1fr)} .grid--spotlight{grid-template-columns:repeat(2,1fr)} .grid--spotlight>:nth-child(1){grid-column:span 2} .pay-grid{grid-template-columns:1fr} }
@media (max-width:860px){ .hero{grid-template-columns:1fr;gap:.5rem} .hero__art{min-height:auto;margin-top:.6rem;justify-content:center;padding-right:0} .hero-vial{width:min(58%,200px)} .section-head{flex-direction:column;align-items:flex-start;gap:.25rem} }
@media (max-width:820px){ .htimeline{grid-template-columns:repeat(2,1fr);gap:1.6rem 1rem} .htstep{padding-right:0} .htstep:not(:last-child)::after{display:none} }
@media (max-width:720px){
  :root{--nav-w:0px}
  .nav{display:none}
  .navbar{display:flex}
  .main{margin-left:0;padding:5rem 1.1rem 3rem}
  .topbar{flex-direction:column;align-items:stretch}
  .search{max-width:none}
  .grid,.grid--spotlight{grid-template-columns:1fr}
  .grid--spotlight>:nth-child(1){grid-column:auto}
  .htimeline{grid-template-columns:1fr;gap:1.5rem}
  .stats{gap:1.6rem}
  .coa-row__verify{margin-left:0}
  .nav.open .nav__cta{border-radius:var(--r-pill)}
  /* mobile drawer */
  .nav.open{display:flex;left:.8rem;right:.8rem;top:4.6rem;bottom:auto;width:auto;border-radius:var(--r-card)}
  .nav.open .nav__logo,.nav.open .nav__tag{display:none}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}