/* ==========================================================================
   Krypton Peptides
   --------------------------------------------------------------------------
   Dark site, light datasheet cards.

   Brand greens sampled from the client's own logo PNG (2026-09-23).
   --green #28901C is the "Krypton" wordmark green. It clears WCAG AA against
   the page background at 4.83:1, so it is safe for small text as well as fills.
   --green-deep is the dark facet of the K mark; --green-bright is a lifted
   version for hover states.
   ========================================================================== */

:root {
  /* Required. Without it Chromium auto-dark-mode inverts images and renders
     a white logo as black in Edge while Chrome looks fine. */
  color-scheme: dark;

  /* --- brand ------------------------------------------------------------ */
  --green:        #28901C;   /* from the logo wordmark */
  --green-bright: #3FC42C;   /* lifted, for hover */
  --green-deep:   #145C00;   /* dark facet of the K mark */
  --green-glow:   rgba(40, 144, 28, 0.20);

  /* --- surfaces --------------------------------------------------------- */
  --ink:    #070A08;
  --ink-2:  #0D1210;
  --ink-3:  #151C19;
  --line:   rgba(255, 255, 255, 0.10);
  --line-2: rgba(255, 255, 255, 0.06);

  /* --- text ------------------------------------------------------------- */
  --fg:     #EAF1EC;
  --fg-dim: #97A69E;
  --fg-mut: #66736C;

  /* --- datasheet cards (light on purpose) ------------------------------- */
  --paper:      #F6F8F6;
  --paper-2:    #E9EEEA;
  --paper-ink:  #0C110F;
  --paper-dim:  #59655E;
  --paper-line: #D3DCD6;

  /* --- type ------------------------------------------------------------- */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  /* --- layout ----------------------------------------------------------- */
  --wrap: 1200px;
  --gut: 24px;
  --radius: 14px;
  --radius-sm: 8px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  font-weight: 700;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--green);
  flex: none;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--green);
  color: #04120A;
  padding: 12px 18px;
  z-index: 200;
  font-weight: 600;
}
.skip:focus { left: 8px; top: 8px; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease,
              color .18s ease, transform .18s ease;
  font-family: inherit;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--green);
  color: #04120A;
}
.btn-primary:hover { background: var(--green-bright); }

.btn-ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--line);
}
.btn-ghost:hover {
  border-color: var(--green);
  color: var(--green);
}

/* ==========================================================================
   Compliance bar + header
   ========================================================================== */

.compliance-bar {
  background: var(--ink-2);
  border-bottom: 1px solid var(--line-2);
  text-align: center;
  padding: 9px var(--gut);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.compliance-bar strong { color: var(--green); font-weight: 600; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(7, 10, 8, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-2);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 68px;
}

/* Text logo stands in until the vector arrives. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: none;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 18px;
}
.logo-img {
  height: 30px;
  width: auto;
  display: block;
  flex: none;
}
@media (max-width: 720px) { .logo-img { height: 26px; } }

.nav {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: auto;
}
.nav a {
  text-decoration: none;
  font-size: 14.5px;
  color: var(--fg-dim);
  transition: color .15s ease;
  position: relative;
  padding: 4px 0;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--fg); }
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--green);
  border-radius: 2px;
}

.nav-toggle {
  display: none;
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--fg);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  cursor: pointer;
}

/* ==========================================================================
   Hero, with the moving background
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 11vw, 132px) 0 clamp(56px, 8vw, 96px);
  isolation: isolate;
}

.hero-bg {
  position: absolute;
  inset: -20%;
  z-index: -2;
  pointer-events: none;
}

/* Drifting gradient blooms. This is the "movement" above the fold. */
.bloom {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  will-change: transform;
}
.bloom-1 {
  width: 52vw; height: 52vw; left: -6%; top: 4%;
  background: radial-gradient(circle, var(--green-glow) 0%, transparent 68%);
  animation: drift-a 26s ease-in-out infinite alternate;
}
.bloom-2 {
  width: 44vw; height: 44vw; right: -4%; top: 22%;
  background: radial-gradient(circle, rgba(20,92,0,.34) 0%, transparent 70%);
  animation: drift-b 34s ease-in-out infinite alternate;
}
.bloom-3 {
  width: 34vw; height: 34vw; left: 38%; bottom: -12%;
  background: radial-gradient(circle, rgba(100,196,16,.16) 0%, transparent 70%);
  animation: drift-c 29s ease-in-out infinite alternate;
}

@keyframes drift-a {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(7vw, 5vh, 0) scale(1.14); }
}
@keyframes drift-b {
  from { transform: translate3d(0,0,0) scale(1.1); }
  to   { transform: translate3d(-6vw, 8vh, 0) scale(0.92); }
}
@keyframes drift-c {
  from { transform: translate3d(0,0,0) scale(0.95); }
  to   { transform: translate3d(5vw, -7vh, 0) scale(1.2); }
}

/* Slow-panning hex lattice. */
.hero-lattice {
  position: absolute;
  inset: -50%;
  z-index: -1;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0L56 16v32L28 64 0 48V16z' fill='none' stroke='%2328901C' stroke-opacity='.16' stroke-width='1'/%3E%3Cpath d='M28 64l28 16v32L28 128 0 112V80z' fill='none' stroke='%2328901C' stroke-opacity='.16' stroke-width='1'/%3E%3C/svg%3E");
  animation: lattice 60s linear infinite;
  will-change: transform;
  pointer-events: none;
}
@keyframes lattice {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(56px, 97px, 0); }
}

/* Floating molecule nodes. */
.hero-nodes {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .55;
  pointer-events: none;
}
.node {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 14px 2px var(--green-glow);
  animation: float-node 14s ease-in-out infinite alternate;
}
@keyframes float-node {
  from { transform: translate3d(0,0,0); opacity: .25; }
  to   { transform: translate3d(0,-26px,0); opacity: .85; }
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.hero h1 {
  font-size: clamp(38px, 6.2vw, 68px);
  margin-bottom: 20px;
  max-width: 14ch;
}
.hero h1 .accent { color: var(--green); }

.hero-sub {
  font-size: clamp(16px, 1.6vw, 18.5px);
  color: var(--fg-dim);
  max-width: 52ch;
  margin: 0 0 32px;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-note {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--fg-mut);
  text-transform: uppercase;
}
.pill-21 {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--green);
  color: var(--green);
  font-weight: 700;
  font-size: 11px;
  flex: none;
  letter-spacing: 0;
}

/* ==========================================================================
   Datasheet card - the pattern from peptidesciencesglobal
   ========================================================================== */

.sheet {
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border: 1px solid var(--paper-line);
  box-shadow: 0 1px 0 rgba(255,255,255,.04);
  transition: transform .2s ease, box-shadow .2s ease;
}
a.sheet:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px -18px rgba(0,0,0,.8),
              0 0 0 1px var(--green);
}

.sheet-bar {
  background: var(--paper-ink);
  color: #fff;
  padding: 7px 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sheet-bar .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  flex: none;
}

.sheet-body {
  padding: 15px 16px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  flex: 1;
}

.sheet-ref {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--paper-dim);
  background: var(--paper-2);
  border: 1px solid var(--paper-line);
  border-radius: 4px;
  padding: 2px 7px;
  display: inline-block;
  margin-bottom: 9px;
}

.sheet-name {
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 3px;
  line-height: 1.2;
}
.sheet-size {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--paper-dim);
  margin: 0 0 12px;
}

.spec {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.75;
  color: var(--paper-dim);
}
.spec div { display: flex; gap: 6px; }
.spec dt { flex: none; }
.spec dd { margin: 0; color: var(--paper-ink); }
.spec .tbc { color: #A9B4AE; font-style: italic; }

.sheet-badges {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.badge {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--paper-line);
  background: #fff;
  color: var(--paper-dim);
}
.badge-purity { border-color: var(--green-deep); color: var(--green-deep); font-weight: 600; }
.badge-ruo { background: var(--paper-ink); color: #fff; border-color: var(--paper-ink); }

.sheet-vial-img {
  width: 84px;
  flex: none;
  align-self: center;
  height: auto;
  /* The card is near-white, so the vial needs its own ground to sit on. */
  background: linear-gradient(180deg, #fff 0%, var(--paper-2) 100%);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-sm);
  padding: 8px 6px;
  filter: drop-shadow(0 4px 10px rgba(12,17,15,.16));
}

.sheet-vial {
  width: 74px;
  flex: none;
  align-self: stretch;
  border-radius: var(--radius-sm);
  background:
    linear-gradient(180deg, #fff 0%, var(--paper-2) 100%);
  border: 1px dashed var(--paper-line);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 8.5px;
  text-align: center;
  color: #A9B4AE;
  letter-spacing: .07em;
  padding: 6px;
  line-height: 1.5;
}

.sheet-foot {
  border-top: 1px solid var(--paper-line);
  padding: 9px 16px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  color: var(--paper-dim);
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  background: #fff;
}
.sheet-foot .go { color: var(--green-deep); font-weight: 600; }

/* ==========================================================================
   Sections
   ========================================================================== */

.section { padding: clamp(56px, 8vw, 100px) 0; }
.section-alt { background: var(--ink-2); border-block: 1px solid var(--line-2); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 38px;
  flex-wrap: wrap;
}
.section-head h2 { font-size: clamp(27px, 3.6vw, 40px); margin: 0; }
.section-head p { color: var(--fg-dim); margin: 8px 0 0; max-width: 56ch; }

.grid-sheets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: 18px;
}

/* Trust strip */
.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  overflow: hidden;
}
.strip-item {
  background: var(--ink-2);
  padding: 26px 24px;
}
.strip-item h3 {
  font-size: 14px;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 9px;
  letter-spacing: 0;
}
.strip-item h3 svg { color: var(--green); flex: none; }
.strip-item p { margin: 0; font-size: 13.5px; color: var(--fg-dim); }

/* RUO band */
.ruo-band {
  background:
    linear-gradient(135deg, rgba(40,144,28,.16), transparent 60%),
    var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 44px);
}
.ruo-band h2 { font-size: clamp(22px, 2.8vw, 30px); }
.ruo-band p { color: var(--fg-dim); max-width: 72ch; margin: 0 0 14px; }
.ruo-band p:last-child { margin-bottom: 0; }

/* Page head for interior pages */
.page-head {
  padding: clamp(46px, 7vw, 84px) 0 clamp(26px, 4vw, 44px);
  border-bottom: 1px solid var(--line-2);
  position: relative;
  overflow: hidden;
}
.page-head h1 { font-size: clamp(32px, 5vw, 52px); margin-bottom: 14px; }
.page-head p { color: var(--fg-dim); max-width: 60ch; margin: 0; font-size: 17px; }

/* Prose */
.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(22px, 2.6vw, 28px); margin-top: 1.8em; }
.prose p, .prose li { color: var(--fg-dim); }
.prose strong { color: var(--fg); }
.prose a { color: var(--green); }

/* Forms */
.form { display: grid; gap: 16px; max-width: 560px; }
.field { display: grid; gap: 7px; }
.field label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.field input, .field select, .field textarea {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--fg);
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--green);
  outline-offset: 1px;
  border-color: transparent;
}
.field textarea { min-height: 148px; resize: vertical; }
.check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 13.5px;
  color: var(--fg-dim);
}
.check input { margin-top: 3px; accent-color: var(--green); flex: none; }

/* ==========================================================================
   Pricing
   --------------------------------------------------------------------------
   Prices are facts about the commercial offer, not claims about the product,
   so they carry none of the compliance risk that effect language does.
   Ranges are shown exactly as the client supplied them, never averaged.
   ========================================================================== */

.sheet-price {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--paper-text, var(--paper-ink));
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

.sheet-prices {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  font-family: var(--mono);
  font-size: 13px;
  max-width: 156px;
}
.sheet-prices li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
}
.sheet-prices li + li {
  border-top: 1px solid var(--paper-line, rgba(0, 0, 0, 0.07));
}
.sheet-prices .sz {
  color: var(--paper-dim);
}
.sheet-prices .amt {
  font-weight: 600;
  color: var(--paper-text, var(--paper-ink));
}

.price-table {
  width: 100%;
  max-width: 340px;
  border-collapse: collapse;
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 13.5px;
}
.price-table th {
  text-align: left;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-mut);
  font-weight: 500;
  padding: 0 0 9px;
  border-bottom: 1px solid var(--line);
}
.price-table td {
  padding: 11px 0;
  border-bottom: 1px solid var(--line-2);
  color: var(--fg);
}
.price-table td:last-child { text-align: right; font-weight: 600; }

.bulk-note {
  background: var(--ink-2);
  border-left: 2px solid var(--green);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 18px;
  margin: 0;
  font-size: 14px;
  color: var(--fg-dim);
  max-width: 52ch;
}
.bulk-note strong { color: var(--fg); }

/* ==========================================================================
   Catalogue filter bar
   --------------------------------------------------------------------------
   Chips are research AREAS, never claimed effects. "Metabolic", not "fat loss".
   Benefit wording here would contradict the not-for-human-consumption line in
   the header of every page. See BUILD-NOTES.md before changing these labels.
   ========================================================================== */

.filter-bar {
  display: grid;
  gap: 20px;
  margin-bottom: 38px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line-2);
}
.filter-bar .field { max-width: 380px; }

.chip-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}
.chip-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-mut);
  margin-right: 5px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg-dim);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.chip:hover { border-color: var(--green); color: var(--fg); }
.chip:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.chip.is-on {
  background: var(--green);
  border-color: var(--green);
  color: #04120A;
}
.chip-n {
  font-family: var(--mono);
  font-size: 11px;
  opacity: .65;
}
.chip.is-on .chip-n { opacity: .8; }

.filter-count {
  margin: 0;
  color: var(--fg-dim);
  font-size: 14px;
}

.filter-empty {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 44px 24px;
  text-align: center;
  color: var(--fg-dim);
}
.filter-empty[hidden] { display: none; }

@media (max-width: 720px) {
  .chip-label { width: 100%; margin-bottom: 2px; }
  .chip { font-size: 13px; padding: 7px 13px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--ink-2);
  border-top: 1px solid var(--line-2);
  padding: 56px 0 30px;
  margin-top: auto;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-grid h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-mut);
  margin-bottom: 16px;
  font-weight: 500;
}
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-links a {
  text-decoration: none;
  color: var(--fg-dim);
  font-size: 14.5px;
}
.footer-links a:hover { color: var(--green); }
.footer-blurb { color: var(--fg-dim); font-size: 14.5px; max-width: 42ch; margin: 14px 0 0; }

.footer-legal {
  border-top: 1px solid var(--line-2);
  padding-top: 24px;
  font-size: 12.5px;
  color: var(--fg-mut);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-ruo {
  background: var(--ink-3);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--fg-mut);
  margin-bottom: 28px;
}
.footer-ruo strong { color: var(--fg-dim); }

/* ==========================================================================
   Age gate
   ========================================================================== */

.gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(4, 7, 5, 0.72);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
.gate[hidden] { display: none; }

.gate-card {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  width: min(480px, 100%);
  padding: clamp(28px, 5vw, 44px);
  text-align: center;
  box-shadow: 0 40px 90px -30px #000;
}
.gate-badge {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--green);
  color: #04120A;
  display: grid;
  place-items: center;
  font-size: 23px;
  font-weight: 700;
  margin: 0 auto 22px;
  letter-spacing: -0.02em;
}
.gate-card h2 { font-size: 26px; margin-bottom: 14px; }
.gate-card p { color: var(--fg-dim); font-size: 15px; margin: 0 0 26px; }
.gate-card .btn { width: 100%; padding: 15px 24px; font-size: 15.5px; }
.gate-decline {
  display: inline-block;
  margin-top: 16px;
  color: var(--fg-dim);
  font-size: 14px;
  text-decoration: underline;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.gate-decline:hover { color: var(--fg); }
.gate-terms { font-size: 12px; color: var(--fg-mut); margin: 22px 0 0; }
.gate-terms a { color: var(--fg-dim); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  :root { --gut: 18px; }

  .nav-toggle { display: block; }
  .nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--ink-2);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gut) 18px;
  }
  .nav.open { display: flex; }
  .nav a { padding: 13px 0; border-bottom: 1px solid var(--line-2); }
  .nav a[aria-current="page"]::after { display: none; }
  .nav .btn { margin-top: 14px; }

  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-legal { flex-direction: column; gap: 8px; }
  .grid-sheets { grid-template-columns: 1fr; }
  .compliance-bar { font-size: 10px; letter-spacing: .06em; }
}

/* ==========================================================================
   Motion preferences and print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .bloom, .hero-lattice, .node { animation: none !important; }
}

@media print {
  .gate, .site-header, .compliance-bar, .hero-bg { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   PRODUCT DETAIL HERO
   Large shot on the left, everything a buyer needs on the right. The vial sits
   on a light panel for the same reason the catalogue cards are light: the
   product images are studio shots on a near-white background, and floating one
   on the dark page would leave a visible square.
   ========================================================================== */

.product-hero {
  padding: clamp(28px, 5vw, 56px) 0 clamp(32px, 5vw, 64px);
  border-bottom: 1px solid var(--line-2);
}

.product-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(28px, 4.5vw, 64px);
  align-items: start;
  margin-top: 18px;
}

.product-shot {
  background: linear-gradient(170deg, var(--paper) 0%, var(--paper-2) 100%);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 4vw, 48px);
  min-height: 340px;
}

.product-img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 460px;
  display: block;
}

.product-img-pending {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-dim);
  border: 1px dashed var(--paper-line);
  border-radius: var(--radius-sm);
  padding: 48px 28px;
  text-align: center;
}

.product-info h1 {
  font-size: clamp(32px, 4.6vw, 50px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}

.product-ruo {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-bright);
  background: var(--green-glow);
  border: 1px solid rgba(63, 196, 44, 0.28);
  border-radius: 999px;
  padding: 7px 14px;
  margin: 0 0 22px;
}

.product-desc {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--fg-dim);
  max-width: 62ch;
  margin: 0 0 22px;
}

.product-desc-missing {
  font-style: italic;
  color: var(--fg-mut);
}

.product-marks {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}

.product-marks li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--fg);
}

.product-marks .tick {
  color: var(--green-bright);
  font-size: 14px;
  line-height: 1;
}

/* --- vial size selector --------------------------------------------------
   Every button carries its own price, so the full price list is readable
   with JavaScript off. The script only moves the headline figure.
   ------------------------------------------------------------------------ */

.product-options {
  margin: 0 0 26px;
}

.product-options-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-mut);
  margin: 0 0 10px;
}

.opt-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.opt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 96px;
  padding: 11px 16px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--fg);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.opt:hover {
  border-color: rgba(63, 196, 44, 0.45);
  background: var(--ink-3);
}

.opt:focus-visible {
  outline: 2px solid var(--green-bright);
  outline-offset: 2px;
}

.opt.is-on {
  border-color: var(--green-bright);
  background: var(--green-glow);
}

.opt-size {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
}

.opt-price {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-dim);
}

.opt.is-on .opt-price {
  color: var(--green-bright);
}

/* --- headline price and actions ----------------------------------------- */

.product-buy {
  border-top: 1px solid var(--line-2);
  padding-top: 22px;
}

.product-price {
  font-family: var(--mono);
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0 0 18px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}

.product-unit {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--fg-mut);
}

@media (max-width: 860px) {
  .product-grid { grid-template-columns: 1fr; }
  .product-shot { min-height: 0; }
  .product-img { max-height: 380px; }
}

/* ==========================================================================
   ENTRY ANIMATION
   The age gate clears and a peptide chain draws itself across the hero. Both
   are suppressed under prefers-reduced-motion, where the chain is painted once
   in its finished state and the gate simply disappears.
   ========================================================================== */

.hero-chain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* The gate shrinks back and fades as the hero starts drawing behind it, so
   entering the site reads as one movement instead of two. */
.gate.is-leaving {
  opacity: 0;
  transition: opacity 0.42s ease, backdrop-filter 0.42s ease;
  backdrop-filter: blur(0);
  pointer-events: none;
}

.gate.is-leaving .gate-card {
  transform: scale(0.94) translateY(-6px);
  opacity: 0;
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .gate.is-leaving,
  .gate.is-leaving .gate-card {
    transition: none;
  }
}

/* Legal pages ------------------------------------------------------------
   terms.html and privacy.html are generated from LEGAL-DRAFT.md. Two things
   need styling that no other page uses: the draft banner, and the markers for
   text the advisor has not supplied yet.

   Both are deliberately conspicuous. An incomplete legal document that looks
   finished is worse than one that admits what is missing, so the gaps are
   meant to be impossible to read past. Both disappear from the page by
   themselves once the draft is complete; neither is a flag anyone has to
   remember to switch off. */

.legal-draft-note {
  /* Amber rather than the brand green. This is a caution, not a feature, and
     it should not read as part of the normal design. */
  background:
    linear-gradient(135deg, rgba(190, 130, 20, .18), transparent 60%),
    var(--ink-2);
  border-color: rgba(190, 130, 20, .45);
}
.legal-draft-note .eyebrow { color: #e0a93c; }
.legal-draft-note ul { margin: 0 0 14px; padding-left: 20px; }
.legal-draft-note li {
  color: var(--fg-dim);
  font-family: var(--mono);
  font-size: 13px;
  margin-bottom: 4px;
}

/* An unfilled placeholder, eg [REGISTERED ADDRESS], shown inline in the text
   so a reviewer sees the gap in context rather than only in a list. */
mark.legal-gap {
  background: rgba(190, 130, 20, .22);
  border: 1px dashed rgba(190, 130, 20, .7);
  border-radius: 4px;
  color: #e9b964;
  font-family: var(--mono);
  font-size: .85em;
  letter-spacing: .04em;
  padding: 1px 6px;
  white-space: nowrap;
}

/* The generated legal text is long. Give it room to breathe. */
.prose ol, .prose ul { padding-left: 22px; margin: 0 0 1.1em; }
.prose li { margin-bottom: 7px; }
.prose h3 { font-size: 17px; margin-top: 1.5em; }

/* Tables inside generated legal prose. The privacy policy uses them for what
   is collected and why, which is clearer than prose and is the format a
   reviewer expects. Wrapped so a wide table scrolls on a phone instead of
   forcing the whole page sideways. */
.table-wrap { overflow-x: auto; margin: 0 0 1.4em; }
.prose table {
  border-collapse: collapse;
  width: 100%;
  min-width: 360px;
  font-size: 14px;
}
.prose th, .prose td {
  border: 1px solid var(--line);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}
.prose th {
  background: var(--ink-2);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.prose td { color: var(--fg-dim); }