/* ============================================================
   WHITE-LABEL STOREFRONT — DESIGN SYSTEM
   Colors are driven by CSS custom properties, which are set
   from config/brand.js at runtime. Defaults below match it.
   ============================================================ */

/* Palette and type are set by the Prove Bio Labs brand kit
   (brand-assets/README.txt). Names in comments are the kit's names. */
:root {
  --brand: #12161a;      /* Ink — type, mark, primary */
  --brand-dark: #0c0e0f; /* Void — hover, deepest surfaces */
  --accent: #d9e021;     /* Lime — ONE accent per screen */
  --accent-ink: #4a5316; /* Olive — secondary type on lime */
  --paper: #ffffff;      /* Paper */
  --bone: #f0eee9;       /* Bone — warm off-white backgrounds */
  --ink: #12161a;        /* Ink */
  --ink-soft: #5b6167;   /* Grey — secondary type on white */
  --line: #ece9e4;       /* Hairline */
  --dark: #0c0e0f;       /* Void — dark hero, footer */
  --card: #ffffff;
  --radius: 6px;
  --shadow: 0 1px 16px rgba(10, 12, 12, 0.06);
  --shadow-lift: 0 10px 34px rgba(10, 12, 12, 0.14);
  --font-display: "Space Grotesk", "IBM Plex Sans", -apple-system, sans-serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* guard: no element may force horizontal page scroll */
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; }

.container {
  width: min(1180px, 92%);
  margin: 0 auto;
}

/* ---------- Typography ---------- */

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.25rem; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 1rem;
}
.eyebrow::before { content: "// "; opacity: 0.55; }

.lead {
  font-size: 1.12rem;
  color: var(--ink-soft);
  max-width: 58ch;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.7rem;
  border-radius: 3px;
  border: 1px solid transparent;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: all 0.22s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--brand);
  color: #fff;
}
.btn-primary:hover {
  background: var(--brand-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lift);
}

.btn-outline {
  background: transparent;
  color: var(--brand);
  border-color: var(--brand);
}
.btn-outline:hover {
  background: var(--brand);
  color: #fff;
}

.btn-light {
  background: #fff;
  color: var(--brand);
}
.btn-light:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }

.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ---------- Announcement bar ---------- */

.announcement {
  background: var(--brand-dark);
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  padding: 0.5rem 1rem;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(250, 249, 246, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 0.9rem 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.15;
}
.logo img { height: 34px; width: auto; }

.nav-links {
  display: flex;
  gap: 1.7rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.nav-links a { transition: color 0.2s; padding: 0.3rem 0; position: relative; }
.nav-links a:hover, .nav-links a.active { color: var(--brand); }
.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--brand);
  border-radius: 2px;
}

.nav-actions { display: flex; align-items: center; gap: 1rem; }

.account-btn {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0.6rem 1rem;
  border: 1px solid var(--ink);
  border-radius: 3px;
  transition: all 0.2s;
  white-space: nowrap;
}
.account-btn:hover { background: var(--ink); color: #fff; }

.cart-btn {
  position: relative;
  background: none;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.6rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  transition: border-color 0.2s;
}
.cart-btn:hover { border-color: var(--brand); }

.cart-count {
  background: var(--brand);
  color: #fff;
  font-size: 0.72rem;
  min-width: 1.3rem;
  height: 1.3rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.3rem;
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--ink);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: 5.5rem 0 6rem;
}

/* graph-paper grid behind the hero — the "lab notebook" ground */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, black 30%, transparent 85%);
  mask-image: radial-gradient(120% 100% at 50% 0%, black 30%, transparent 85%);
  pointer-events: none;
}
.hero > .container { position: relative; }

/* dark laboratory hero */
.hero.dark { background: var(--dark); }
.hero.dark::before {
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  opacity: 1;
}
.hero.dark h1 { color: #fff; }
.hero.dark .lead { color: rgba(255,255,255,0.72); }
.hero.dark .eyebrow { color: var(--accent); }
.hero-dash {
  display: block;
  width: 54px;
  height: 4px;
  background: var(--accent);
  margin: 1.4rem 0 0;
}
.hero.dark .btn-outline {
  color: #fff;
  border-color: rgba(255,255,255,0.45);
}
.hero.dark .btn-outline:hover { background: #fff; color: var(--ink); border-color: #fff; }
.hero.dark .hero-stats { border-top-color: rgba(255,255,255,0.16); }
.hero.dark .hero-stat strong { color: var(--accent); }
.hero.dark .hero-stat span { color: rgba(255,255,255,0.55); }
.hero.dark .coa-card { transform: rotate(0deg); border: none; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 4rem;
  align-items: center;
}

.hero h1 span { color: var(--brand); font-style: italic; }

.hero .lead { margin: 1.4rem 0 2.2rem; }

.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero-stats {
  display: flex;
  gap: 2.5rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.hero-stat strong {
  display: block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--brand);
}
.hero-stat span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- COA report card (hero visual) ---------- */

.coa-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lift);
  padding: 1.8rem 1.9rem 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  transform: rotate(-0.6deg);
}
.coa-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.8rem;
  margin-bottom: 0.4rem;
}
.coa-card-head strong {
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.coa-card-head span { color: var(--ink-soft); font-size: 0.72rem; }
.coa-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.62rem 0;
  border-bottom: 1px dashed var(--line);
}
.coa-row:last-of-type { border-bottom: none; }
.coa-row .k { color: var(--ink-soft); }
.coa-row .v { font-weight: 600; text-align: right; }
.coa-row .v.pass { color: var(--brand); }
.coa-stamp {
  position: absolute;
  right: 8.5rem;
  bottom: 3.1rem;
  background: rgba(255, 255, 255, 0.75);
  border: 2.5px solid var(--brand);
  border-radius: 8px;
  color: var(--brand);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  transform: rotate(-8deg);
  opacity: 0.85;
}
.coa-card-foot {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  color: var(--ink-soft);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

.hero-visual {
  position: relative;
  aspect-ratio: 4 / 4.6;
  border-radius: calc(var(--radius) * 1.6);
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-dark) 100%);
  box-shadow: var(--shadow-lift);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-visual svg { width: 82%; height: auto; opacity: 0.95; }

.hero-visual .float-card {
  position: absolute;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 12px;
  padding: 0.8rem 1.1rem;
  box-shadow: var(--shadow-lift);
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.float-card .dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
}
.float-card.tl { top: 9%; left: -4%; }
.float-card.br { bottom: 9%; right: -4%; }

/* ---------- Trust bar (black strip) ---------- */

.trust-bar {
  background: #000;
  padding: 2.2rem 0;
}
.trust-items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  color: #fff;
  justify-content: center;
}
.trust-item svg { width: 26px; height: 26px; color: #fff; flex-shrink: 0; opacity: 0.9; }
.trust-item strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.trust-item small {
  display: block;
  font-size: 0.76rem;
  color: rgba(255,255,255,0.55);
  margin-top: 0.15rem;
}

/* ---------- Methods strip ---------- */

.methods-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
}
.method-item {
  padding: 1.9rem 1.3rem;
  text-align: center;
  border-right: 1px solid var(--line);
}
.method-item:last-child { border-right: none; }
.method-item svg { width: 30px; height: 30px; color: var(--ink); margin: 0 auto 0.9rem; display: block; }
.method-item strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.method-item small { font-size: 0.78rem; color: var(--ink-soft); line-height: 1.5; display: block; }

/* ---------- Sections ---------- */

.section { padding: 5.5rem 0; }
.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 3rem;
}
.section-head .lead { margin-top: 0.8rem; }

.section-alt { background: var(--bone); border-block: 1px solid var(--line); }

/* ---------- Category chips ---------- */

.chip-row { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.chip {
  padding: 0.55rem 1.3rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-soft);
  transition: all 0.2s;
}
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip.active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---------- Product grid ---------- */

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 1.6rem;
}

.product-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

.product-media {
  position: relative;
  aspect-ratio: 1 / 0.82;
  background: linear-gradient(170deg, #f6f6f3 0%, #e9e9e5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.product-media svg { width: 44%; height: auto; }
.product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-badge {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  background: var(--accent);
  color: #101314;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.32rem 0.7rem;
  border-radius: 3px;
}

.product-body {
  padding: 1.3rem 1.3rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}
.product-cat {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
}
.product-name { font-size: 1.12rem; font-family: var(--font-display); }
.product-size { font-size: 0.82rem; color: var(--ink-soft); }

/* ---------- Ratings & sale pricing ---------- */

.stars {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.stars .star-row {
  color: var(--accent);
  letter-spacing: 0.06em;
  font-size: 0.88rem;
}
.price-was {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: line-through;
  margin-right: 0.4rem;
}
.tested-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand);
}
.tested-chip::before { content: "✓"; }

.product-foot {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}
.product-price { font-weight: 700; font-size: 1.08rem; }
.add-btn {
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 0.6rem 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.2s;
}
.add-btn:hover { background: var(--brand-dark); }
.add-btn.added { background: var(--accent); }
.add-btn:disabled,
.btn-primary:disabled {
  background: #d8d8d3;
  color: #6f6f68;
  cursor: not-allowed;
}
.add-btn:disabled:hover { background: #d8d8d3; }

/* Availability badges */
.product-badge.badge-sold-out { background: #e5222e; color: #fff; }
.product-badge.badge-coming-soon { background: var(--accent); color: #101314; }
.price-tba { color: var(--ink-soft); }
.price-from { font-size: 0.78rem; color: var(--ink-soft); font-weight: 600; }

/* Variant strength toggle (e.g. GLP-RT 10mg / 20mg) */
.variant-toggle { display: flex; gap: 0.4rem; margin: 0.45rem 0 0.1rem; }
.vt-chip {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.32rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-soft);
  cursor: pointer;
}
.vt-chip.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

/* ---------- Quality / science split ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.5rem;
  align-items: center;
}

.quality-list { margin-top: 2rem; display: grid; gap: 1.4rem; }
.quality-item { display: flex; gap: 1.1rem; }
.quality-item .icon {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand) 9%, white);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
}
.quality-item .icon svg { width: 22px; height: 22px; }
.quality-item h3 { margin-bottom: 0.2rem; font-size: 1.05rem; }
.quality-item p { font-size: 0.92rem; color: var(--ink-soft); }

.lab-panel {
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-dark) 100%);
  border-radius: calc(var(--radius) * 1.6);
  padding: 3rem 2.6rem;
  color: #fff;
  box-shadow: var(--shadow-lift);
}
.lab-panel h3 {
  font-size: 1.5rem;
  margin-bottom: 1.6rem;
  color: #fff;
}
.lab-rows { display: grid; gap: 0; }
.lab-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.95rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  font-size: 0.92rem;
}
.lab-row:last-child { border-bottom: none; }
.lab-row .check {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ---------- Steps ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
.step-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.8rem;
}
.step-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: color-mix(in srgb, var(--brand) 30%, white);
  line-height: 1;
  margin-bottom: 1rem;
}
.step-card h3 { margin-bottom: 0.4rem; }
.step-card p { font-size: 0.93rem; color: var(--ink-soft); }

/* ---------- FAQ ---------- */

.faq-list { max-width: 780px; margin: 0 auto; display: grid; gap: 0.9rem; }
.faq-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq-q {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 1.2rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq-q::after {
  content: "+";
  font-size: 1.4rem;
  color: var(--brand);
  transition: transform 0.25s;
  flex-shrink: 0;
}
.faq-item.open .faq-q::after { transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-a p {
  padding: 0 1.5rem 1.3rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.faq-item.open .faq-a { max-height: 300px; }

/* ---------- CTA band ---------- */

.cta-band {
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-dark) 100%);
  border-radius: calc(var(--radius) * 1.6);
  padding: 4rem 3rem;
  text-align: center;
  color: #fff;
  box-shadow: var(--shadow-lift);
}
.cta-band h2 { color: #fff; margin-bottom: 0.8rem; }
.cta-band p { color: rgba(255,255,255,0.85); max-width: 52ch; margin: 0 auto 2rem; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--ink);
  color: rgba(255,255,255,0.78);
  margin-top: 5.5rem;
  padding: 4rem 0 2rem;
  font-size: 0.9rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.site-footer .logo { color: #fff; margin-bottom: 1rem; }
.site-footer .logo img { filter: brightness(0) invert(1); }
.site-footer .logo img.logo-on-dark { filter: none; }
.footer-col h4 {
  color: #fff;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.footer-col ul { display: grid; gap: 0.6rem; }
.footer-col a:hover { color: #fff; }

.footer-disclaimer {
  padding: 1.8rem 0 0.6rem;
  font-size: 0.78rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.5);
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
}

/* ---------- Cart drawer ---------- */

.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(21,32,29,0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 90;
}
.cart-overlay.open { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 94vw);
  background: #fff;
  z-index: 100;
  transform: translateX(105%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -12px 0 40px rgba(0,0,0,0.15);
}
.cart-drawer.open { transform: translateX(0); }

.cart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.4rem 1.6rem;
  border-bottom: 1px solid var(--line);
}
.cart-head h3 { font-size: 1.2rem; }
.cart-close { background: none; border: none; font-size: 1.6rem; color: var(--ink-soft); line-height: 1; }

.cart-items { flex: 1; overflow-y: auto; padding: 1.2rem 1.6rem; display: grid; gap: 1.2rem; align-content: start; }

.cart-item { display: flex; gap: 1rem; align-items: center; }
.cart-item-thumb {
  width: 58px; height: 58px;
  border-radius: 10px;
  background: linear-gradient(165deg, #eef2ee 0%, #dde6e0 100%);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cart-item-thumb svg { width: 45%; }
.cart-item-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-info strong { display: block; font-size: 0.92rem; }
.cart-item-info span { font-size: 0.8rem; color: var(--ink-soft); }
.qty-controls { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.3rem; }
.qty-controls button {
  width: 24px; height: 24px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 6px;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--ink);
}
.qty-controls span { font-size: 0.86rem; min-width: 1.2rem; text-align: center; }
.cart-item-price { font-weight: 700; font-size: 0.92rem; }
.cart-item-remove { background: none; border: none; color: var(--ink-soft); font-size: 1.1rem; }

.cart-empty { text-align: center; color: var(--ink-soft); padding: 3rem 1rem; }

.cart-foot { padding: 1.4rem 1.6rem; border-top: 1px solid var(--line); }
.cart-total-row {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 1rem;
}
.cart-note { font-size: 0.75rem; color: var(--ink-soft); text-align: center; margin-top: 0.7rem; }

/* ---------- Page hero (inner pages) ---------- */

.page-hero {
  padding: 4rem 0 3rem;
  text-align: center;
}
.page-hero .lead { margin: 1rem auto 0; }

/* ---------- Product detail ---------- */

.breadcrumb {
  padding: 1.6rem 0 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.breadcrumb a {
  color: var(--ink-soft);
  text-decoration: none;
}
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb span { color: var(--ink); font-weight: 600; }

.pd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  padding: 3.5rem 0 2rem;
  align-items: start;
}

.pd-media {
  aspect-ratio: 1 / 0.95;
  border-radius: calc(var(--radius) * 1.6);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,0.4), transparent 60%),
    linear-gradient(165deg, #eef2ee 0%, #dde6e0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 110px;
}
.pd-media svg { width: 38%; }
.pd-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-info .product-cat { margin-bottom: 0.6rem; display: block; }
.pd-info h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
.pd-sub { color: var(--ink-soft); font-size: 1.05rem; margin: 0.4rem 0 1.4rem; }

.pd-meta {
  display: flex;
  gap: 1.6rem;
  padding: 1rem 0;
  border-block: 1px solid var(--line);
  margin-bottom: 1.4rem;
  font-size: 0.88rem;
  flex-wrap: wrap;
}
.pd-meta strong { color: var(--brand); }

.pd-price { font-size: 1.9rem; font-weight: 700; margin-bottom: 1.4rem; }
.pd-price small { font-size: 0.9rem; font-weight: 500; color: var(--ink-soft); }

.pd-desc { color: var(--ink-soft); margin-bottom: 1.6rem; }

.pd-benefits { display: grid; gap: 0.6rem; margin-bottom: 2rem; }
.pd-benefits li {
  display: flex;
  gap: 0.7rem;
  align-items: start;
  font-size: 0.95rem;
}
.pd-benefits li::before {
  content: "✓";
  color: var(--brand);
  font-weight: 700;
  flex-shrink: 0;
}

.pd-actions { display: flex; gap: 1rem; align-items: stretch; flex-wrap: wrap; }
.pd-disclaimer {
  margin-top: 1.6rem;
  padding: 1rem 1.2rem;
  background: color-mix(in srgb, var(--accent) 10%, white);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, white);
  border-radius: 10px;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* ---------- Forms ---------- */

.form-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.4rem;
  box-shadow: var(--shadow);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
/* `align-content: start` keeps a short field from stretching to match a
   tall neighbour — the sponsor-code warning would otherwise leave the
   payout select floating in the middle of its cell. */
.form-field { display: grid; gap: 0.4rem; align-content: start; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 0.85rem; font-weight: 600; }
.form-field input,
.form-field textarea,
.form-field select {
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.95rem;
  background: #fff;
  color: var(--ink);
  transition: border-color 0.2s;
  width: 100%;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--brand);
}

/* ---------- Checkout ---------- */

.checkout-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 3rem;
  align-items: start;
  padding-bottom: 3rem;
}
.summary-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem;
  position: sticky;
  top: 110px;
}
.summary-card h3 { margin-bottom: 1.2rem; }
.summary-rows { display: grid; gap: 0.8rem; margin-bottom: 1.2rem; }
.summary-row { display: flex; justify-content: space-between; font-size: 0.92rem; color: var(--ink-soft); }
.summary-row.total {
  border-top: 1px solid var(--line);
  padding-top: 1rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
}

.success-panel {
  max-width: 620px;
  margin: 3rem auto;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 3.5rem 2.5rem;
  box-shadow: var(--shadow);
}
.success-panel .icon-circle {
  width: 74px; height: 74px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 10%, white);
  color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 2rem;
}

/* ---------- COA / batch box (product page) ---------- */

.coa-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: color-mix(in srgb, var(--brand) 6%, white);
  border: 1px solid color-mix(in srgb, var(--brand) 22%, white);
  border-radius: 12px;
  padding: 1rem 1.3rem;
  margin-bottom: 1.6rem;
  font-size: 0.9rem;
}
.coa-box strong { color: var(--brand); }
.coa-box .coa-link {
  color: var(--brand);
  font-weight: 700;
  white-space: nowrap;
}
.coa-box .coa-link:hover { text-decoration: underline; }

/* ---------- Reviews strip ---------- */

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
.review-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.review-card .star-row { color: var(--accent); font-size: 1rem; letter-spacing: 0.08em; }
.review-card p { font-size: 0.95rem; color: var(--ink-soft); flex: 1; }
.review-card .reviewer {
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.review-card .verified {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---------- Lab results table ---------- */

.lab-table-wrap { overflow-x: auto; }
.lab-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 0.92rem;
}
.lab-table th {
  background: var(--brand);
  color: #fff;
  text-align: left;
  padding: 0.9rem 1.2rem;
  font-weight: 600;
  white-space: nowrap;
}
.lab-table td {
  padding: 0.85rem 1.2rem;
  border-top: 1px solid var(--line);
  white-space: nowrap;
}
.lab-table tr:hover td { background: color-mix(in srgb, var(--brand) 4%, white); }
.lab-table .coa-link { color: var(--brand); font-weight: 700; }
.lab-table .coa-link:hover { text-decoration: underline; }

@media (max-width: 960px) {
  .reviews-grid { grid-template-columns: 1fr; }
  .methods-grid { grid-template-columns: 1fr 1fr; }
  .method-item { border-bottom: 1px solid var(--line); }
  .method-item:nth-child(even) { border-right: none; }
}

/* ---------- Legal pages ---------- */

.legal-content {
  max-width: 760px;
}
.legal-content h2 {
  font-size: 1.3rem;
  margin: 2.2rem 0 0.7rem;
}
.legal-content p {
  color: var(--ink-soft);
  font-size: 0.96rem;
}
.legal-updated {
  margin-top: 3rem;
  font-size: 0.82rem;
  font-style: italic;
}

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  bottom: 1.6rem;
  left: 50%;
  transform: translate(-50%, 140%);
  background: var(--ink);
  color: #fff;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  z-index: 120;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: var(--shadow-lift);
}
.toast.show { transform: translate(-50%, 0); }

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 3rem;
  align-items: start;
  padding-bottom: 3rem;
}
.contact-info { display: grid; gap: 1.6rem; align-content: start; }
.contact-line { display: flex; gap: 1rem; align-items: center; }
.contact-line .icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand) 9%, white);
  color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-line .icon svg { width: 20px; height: 20px; }
.contact-line strong { display: block; font-size: 0.92rem; }
.contact-line span { font-size: 0.88rem; color: var(--ink-soft); }

/* ---------- Age / research-use gate ---------- */

.age-gate {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(14, 16, 17, 0.82);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
}
.age-gate-card {
  background: var(--paper);
  border-radius: calc(var(--radius) * 1.4);
  max-width: 520px;
  width: 100%;
  padding: 2.6rem 2.6rem 2.2rem;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45);
  animation: gate-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes gate-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.age-gate-brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.age-gate-mark { height: 40px; display: block; }
.age-gate-name {
  font-family: var(--font-mono);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.age-gate-rule {
  display: block;
  width: 44px;
  height: 4px;
  background: var(--accent);
  border-radius: 2px;
  margin: 1.4rem 0 1.3rem;
}
.age-gate-card .eyebrow { display: block; margin-bottom: 0.5rem; }
.age-gate-card h2 { margin-bottom: 1.1rem; }
.age-gate-terms {
  list-style: none;
  margin-bottom: 1.6rem;
}
.age-gate-terms li {
  position: relative;
  padding-left: 1.7rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-bottom: 0.7rem;
}
.age-gate-terms li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--accent);
  color: #101314;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.age-gate-actions {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.age-gate-actions .btn { width: 100%; text-align: center; justify-content: center; }
.age-gate-fine {
  margin-top: 1.3rem;
  font-size: 0.72rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.age-gate-fine a { text-decoration: underline; }

@media (max-width: 480px) {
  .age-gate-card { padding: 2rem 1.5rem 1.8rem; }
  .age-gate-name { font-size: 0.86rem; }
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .hero-grid, .split, .pd-grid, .checkout-grid, .contact-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .hero-visual { max-width: 480px; margin: 0 auto; }
  .trust-items { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .pd-media, .summary-card { position: static; }
  .section-head { flex-direction: column; align-items: start; }
}

/* Mid width: tighten the wordmark and nav so the full brand name stays
   visible; below 990px the nav collapses into the hamburger menu */
@media (max-width: 1100px) {
  .logo span { font-size: 0.8rem; }
  .nav-links { gap: 1rem; }
}

@media (max-width: 990px) {
  .nav-wrap { gap: 0.6rem; flex-wrap: nowrap; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    padding: 1.2rem 4%;
    gap: 1.1rem;
  }
  .nav-links.open { display: flex; }
  .menu-toggle { display: block; flex-shrink: 0; }
  .nav-actions { gap: 0.5rem; flex-shrink: 0; }
  .cart-btn { padding: 0.5rem 0.65rem; font-size: 0.6rem; letter-spacing: 0.05em; }
  .cart-count { min-width: 1.1rem; height: 1.1rem; font-size: 0.64rem; }
}

@media (max-width: 400px) {
  .logo span { font-size: 0.68rem; letter-spacing: 0.02em; }
  .logo img { height: 28px; }
}

@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr; }
  .trust-items { grid-template-columns: 1fr; gap: 1.4rem; }
  .trust-item { justify-content: flex-start; }
  .cta-band { padding: 3rem 1.6rem; }
  .hero.dark { padding: 3.5rem 0 4rem; }
  .coa-card { padding: 1.4rem 1.2rem 1.2rem; font-size: 0.72rem; }
  .coa-stamp { right: 5.5rem; bottom: 2.6rem; font-size: 0.66rem; }
}

/* ---------- Payments (checkout pay step + pay.html) ---------- */

.pay-layout {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 2.4rem;
  align-items: start;
  padding-bottom: 2rem;
}
.pay-side { display: grid; gap: 1.4rem; position: sticky; top: 110px; }
.pay-side .summary-card { position: static; }

.pay-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.2rem;
}
.pay-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.35rem;
}
.pay-amount { font-size: 2rem; line-height: 1.1; margin: 0; }
.pay-lede { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.6; margin-bottom: 1.6rem; }

.status-pill {
  display: inline-block;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.status-awaiting { background: color-mix(in srgb, var(--accent) 30%, white); color: var(--accent-ink); }
.status-sent { background: #eef3ff; color: #33529c; }
.status-paid { background: #e9f6ee; color: #23724a; }
.status-shipped { background: var(--ink); color: #fff; }

/* Method accordion */
.pay-methods { display: grid; gap: 0.8rem; }
.pay-method {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.pay-method[open] { border-color: var(--brand); }
.pay-method summary {
  cursor: pointer;
  padding: 1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  list-style: none;
  position: relative;
}
.pay-method summary::-webkit-details-marker { display: none; }
.pay-method summary::after {
  content: "+";
  position: absolute;
  right: 1.2rem; top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  color: var(--ink-soft);
  line-height: 1;
}
.pay-method[open] summary::after { content: "–"; }
.pay-method-name { font-weight: 700; font-size: 1rem; padding-right: 2rem; }
.pay-method-blurb { font-size: 0.83rem; color: var(--ink-soft); }
.pay-method-body { padding: 0 1.2rem 1.3rem; }

/* Copyable detail rows */
.pay-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--line);
}
.pay-row-label { font-size: 0.8rem; color: var(--ink-soft); flex: 0 0 38%; }
.pay-row-value { font-weight: 600; font-size: 0.95rem; flex: 1; word-break: break-all; }
.pay-row-value.mono { font-family: var(--font-mono); }
/* .copy-btn itself is defined once, in the affiliate-resources section
   below — one copy button across the site. These are the tweaks it needs
   inside a dense payment row. */
.pay-row .copy-btn,
.ops-actions .copy-btn {
  align-self: center;
  flex: 0 0 auto;
  cursor: pointer;
}

.pay-steps {
  margin: 1.1rem 0 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
.pay-note, .pay-confirm, .pay-warn, .pay-missing {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-top: 0.9rem;
}
.pay-confirm, .pay-warn {
  background: color-mix(in srgb, var(--accent) 16%, white);
  border-left: 3px solid var(--accent);
  padding: 0.75rem 0.9rem;
  border-radius: 0 6px 6px 0;
  color: var(--ink);
}
.pay-missing {
  background: #f7f7f5;
  padding: 0.9rem 1rem;
  border-radius: 8px;
  margin-bottom: 0.9rem;
}

/* Hosted-provider link block */
.pay-provider { margin-bottom: 1.4rem; }
.pay-or {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 1.4rem 0 0.2rem;
  color: var(--ink-soft);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pay-or::before, .pay-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* Confirmation block */
.pay-confirm-block {
  margin-top: 1.8rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.pay-confirm-block h3 { margin-bottom: 0.3rem; }
.pay-ack { display: flex; gap: 1rem; align-items: flex-start; }
.pay-ack .icon-circle {
  width: 44px; height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 10%, white);
  color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
}
.pay-ack h3 { margin-bottom: 0.2rem; }
.pay-ack .pay-note { margin-top: 0.2rem; }

.pay-hold { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.55; }
.pay-timeline {
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.85rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
.pay-timeline strong { color: var(--ink); }

/* Checkout pay step */
.pay-success {
  max-width: 720px;
  margin: 2.5rem auto 1.6rem;
  text-align: center;
}
.pay-success .icon-circle {
  width: 66px; height: 66px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 10%, white);
  color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.2rem;
  font-size: 1.8rem;
}
.pay-success h2 { margin-bottom: 0.6rem; }
.pay-success .pay-lede { margin-bottom: 0; }
.pay-inline { max-width: 720px; margin: 0 auto 3rem; }
.pay-actions {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 1.8rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.pay-actions .btn { flex: 1; min-width: 200px; }

/* Order history rows (account.html) */
.order-row { padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.order-row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.order-row-no { font-family: var(--font-mono); font-weight: 600; font-size: 0.9rem; }
.order-row-meta { font-size: 0.83rem; color: var(--ink-soft); margin-top: 0.35rem; line-height: 1.5; }
.order-row-pay {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--brand);
}

@media (max-width: 900px) {
  .pay-layout { grid-template-columns: 1fr; gap: 1.6rem; }
  .pay-side { position: static; }
  .pay-amount { font-size: 1.7rem; }
  .pay-row { flex-wrap: wrap; gap: 0.4rem 0.8rem; }
  .pay-row-label { flex: 0 0 100%; }
  .pay-actions .btn { min-width: 100%; }
}

/* ============================================================
   AFFILIATE PROGRAM PAGE
   ============================================================ */

/* Accent button — used for the affiliate CTA so it reads as a
   different action from "shop" on dark surfaces. */
.btn-accent {
  background: var(--accent);
  color: #101314;
  border: 1px solid var(--accent);
}
.btn-accent:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lift);
  filter: brightness(1.05);
}

.btn-sm { padding: 0.65rem 1.2rem; font-size: 0.72rem; }

/* Affiliate callout under the home-page hero CTAs */
.hero-affiliate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-top: 1.6rem;
  padding: 0.9rem 1rem 0.9rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
}
.hero-affiliate span {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.78);
}
.hero-affiliate strong { color: #fff; font-weight: 700; }
.hero-affiliate .btn { flex-shrink: 0; }

/* Brand kit: one lime accent per screen. On this hero the accent is the
   CTA button, so the rates in the lead and the stat row stay white.
   The stat rule has to out-specify `.hero.dark .hero-stat strong`. */
.hero-signin {
  margin-top: 1.2rem;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.6);
}
.hero-signin a { color: #fff; font-weight: 600; text-decoration: underline; }

.aff-hero .lead strong { color: #fff; font-weight: 700; }
.hero.dark.aff-hero .hero-stat strong { color: #fff; }
.payout-preview .coa-row:last-of-type { border-top: 1px solid var(--line); padding-top: 0.85rem; }
.payout-preview .coa-row:last-of-type .k,
.payout-preview .coa-row:last-of-type .v { font-weight: 700; color: var(--ink); }
/* No "Paid" stamp on this one — the card is an illustration, and the COA
   card's stamp position was tuned for a taller card anyway. */

/* ---------- Rate cards ---------- */

.rate-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
.rate-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.rate-card:first-child { border-color: var(--brand); box-shadow: var(--shadow); }
.rate-num {
  font-family: var(--font-display);
  font-size: 3.1rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.rate-card:first-child .rate-num { color: var(--brand); }
.rate-card h3 { font-size: 1.05rem; }
.rate-card p { font-size: 0.92rem; color: var(--ink-soft); flex: 1; }
/* Grey, not Olive — the kit reserves Olive for type set on lime. */
.rate-note {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  padding-top: 0.8rem;
}

/* ---------- Structure diagram ---------- */

.tree { margin-top: 3.5rem; text-align: center; }
.tree-node {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.4rem;
  background: var(--card);
  display: grid;
  gap: 0.15rem;
}
.tree-node strong { font-family: var(--font-display); font-size: 1rem; }
.tree-node span { font-size: 0.8rem; color: var(--ink-soft); }
.tree-you {
  max-width: 320px;
  margin: 0 auto;
  background: var(--dark);
  border-color: var(--dark);
}
.tree-you strong { color: #fff; }
.tree-you span { color: var(--accent); }
.tree-connector { height: 34px; display: flex; justify-content: center; }
.tree-connector span { width: 1px; background: var(--line); display: block; }
.tree-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  position: relative;
  padding-top: 1.4rem;
}
.tree-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16.6%;
  right: 16.6%;
  height: 1px;
  background: var(--line);
}
.tree-sub { position: relative; }
.tree-sub::before {
  content: "";
  position: absolute;
  top: -1.4rem;
  left: 50%;
  width: 1px;
  height: 1.4rem;
  background: var(--line);
}
.tree-caption {
  font-size: 0.85rem;
  color: var(--ink-soft);
  max-width: 62ch;
  margin: 1.6rem auto 0;
}

/* ---------- Earnings calculator ---------- */

.calc-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2rem;
  align-items: start;
}
.calc-controls {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem;
  display: grid;
  gap: 1.8rem;
}
.calc-field { display: grid; gap: 0.5rem; }
.calc-field label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.9rem;
  font-weight: 600;
}
.calc-field output {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--brand);
}
.calc-hint { font-size: 0.78rem; color: var(--ink-soft); }

.calc-field input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  outline: none;
}
.calc-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand);
  border: 3px solid #fff;
  box-shadow: 0 1px 6px rgba(10, 12, 12, 0.28);
  cursor: pointer;
}
.calc-field input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand);
  border: 3px solid #fff;
  box-shadow: 0 1px 6px rgba(10, 12, 12, 0.28);
  cursor: pointer;
}
.calc-field input[type="range"]:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }

.calc-out {
  background: var(--dark);
  border-radius: var(--radius);
  padding: 2rem;
  color: #fff;
  position: sticky;
  top: 110px;
}
/* The lime on this panel is spent on the total row, so the eyebrow is muted. */
.calc-out .eyebrow { color: rgba(255, 255, 255, 0.5); display: block; }
.calc-total {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-top: 0.4rem;
}
.calc-annual {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 1.6rem;
}
.calc-rows { display: grid; gap: 0.1rem; }
.calc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.78);
}
.calc-row em { font-style: normal; color: rgba(255, 255, 255, 0.45); }
.calc-row strong { color: #fff; font-size: 1rem; }
.calc-row-total { border-bottom: none; }
.calc-row-total strong { color: var(--accent); font-size: 1.15rem; }
.calc-meta {
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  gap: 0.5rem;
}
.calc-meta-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
}
.calc-meta-row strong { color: rgba(255, 255, 255, 0.9); font-family: var(--font-mono); font-weight: 500; }
.calc-disclaimer {
  margin-top: 1.4rem;
  font-size: 0.72rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.45);
}

/* ---------- Scenario table ---------- */

.scenario-block { margin-top: 3rem; }
.scenario-block h3 { font-size: 1.15rem; margin-bottom: 1.2rem; }
.earn-table td { font-variant-numeric: tabular-nums; }
.earn-table .earn-strong { font-weight: 700; color: var(--brand); }
.scenario-note { font-size: 0.78rem; color: var(--ink-soft); margin-top: 0.9rem; }

/* Program-at-a-glance rows reuse .lab-row, but carry a value rather
   than a checkmark — so they read as data, not as a tick list. */
.lab-row .check.no-tick {
  color: #fff;
  font-weight: 600;
  letter-spacing: 0;
  text-align: right;
}

.steps-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Application form ---------- */

.apply-card { max-width: 860px; margin: 0 auto; }
.field-hint { font-size: 0.78rem; color: var(--ink-soft); }
.label-opt { font-weight: 400; color: var(--ink-soft); }

/* Required marker. Lime on white fails contrast, so the asterisk is ink
   with weight doing the work — it reads as a marker, not as decoration. */
.req { color: var(--ink); font-weight: 700; }
.req-legend {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin: 0 0 1.2rem;
}

/* Sponsor-code warning: missing it can't be fixed after approval, so it
   gets more weight than an ordinary hint. */
.field-hint-warn {
  display: block;
  margin-top: 0.4rem;
  padding: 0.6rem 0.7rem;
  border-left: 3px solid var(--accent);
  background: var(--bone);
  color: var(--ink);
  line-height: 1.5;
}
.code-preview {
  font-family: var(--font-mono);
  color: var(--brand);
  font-weight: 600;
  word-break: break-all;
}
.form-field.prefilled input { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 4%, white); }

.agree-box {
  display: grid;
  gap: 0.9rem;
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.3rem 1.4rem;
}
.agree-line {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ink-soft);
  cursor: pointer;
}
.agree-line input {
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  flex-shrink: 0;
  accent-color: var(--brand);
}
.agree-line a { color: var(--brand); font-weight: 600; text-decoration: underline; }

.apply-card .icon-circle {
  width: 74px; height: 74px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 10%, white);
  color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 2rem;
}

/* ---------- Affiliate responsive ---------- */

@media (max-width: 1100px) {
  .steps-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
  .rate-grid { grid-template-columns: 1fr; }
  .calc-grid { grid-template-columns: 1fr; }
  .calc-out { position: static; }
  .tree-row { grid-template-columns: 1fr; gap: 0.8rem; padding-top: 0; }
  .tree-row::before { content: none; }
  .tree-sub::before { content: none; }
  .tree-connector { height: 22px; }
}

@media (max-width: 720px) {
  .steps-4 { grid-template-columns: 1fr; }
  .calc-controls, .calc-out { padding: 1.5rem; }
  .apply-card { padding: 1.6rem 1.3rem; }
}

/* ============================================================
   AFFILIATE PORTAL (portal.html)
   ============================================================ */

.demo-banner {
  background: var(--accent);
  color: #12161a;
  font-size: 0.85rem;
  padding: 0.75rem 0;
}
.demo-banner code {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  background: rgba(18, 22, 26, 0.1);
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
}

/* ---------- Sign in ---------- */

.login-card {
  max-width: 440px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.6rem;
  box-shadow: var(--shadow);
}
.login-card h1 { font-size: 2rem; margin-bottom: 0.6rem; }
.login-card .lead { font-size: 0.95rem; margin-bottom: 1.8rem; }
.login-card .form-field { margin-bottom: 1.1rem; }
.login-error {
  background: #fdeaea;
  border: 1px solid #f3c2c2;
  color: #8c1d1d;
  font-size: 0.85rem;
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  margin-bottom: 1rem;
}
/* Same shape as .login-error, green — the reset confirmation is not a
   failure and must not read like one. */
.login-ok {
  background: #e8f5ee;
  border: 1px solid #b9dfc9;
  color: #14532b;
  font-size: 0.85rem;
  line-height: 1.55;
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  margin-bottom: 1rem;
}

/* Secondary action under a primary button: a real <button> for
   keyboard and screen-reader behaviour, styled as a plain link so it
   never competes with Sign In. */
.btn-link {
  display: block;
  width: 100%;
  margin-top: 0.9rem;
  padding: 0.4rem;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-decoration: underline;
  cursor: pointer;
}
.btn-link:hover { color: var(--ink); }
.btn-link:disabled { opacity: 0.6; cursor: default; }

.login-foot {
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.8;
}
.login-foot a { color: var(--brand); font-weight: 600; }
.login-foot a:hover { text-decoration: underline; }

/* ---------- Dashboard shell ---------- */

.dash-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.dash-head h1 { font-size: clamp(1.8rem, 3.4vw, 2.4rem); }
.dash-sub { font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.5rem; }
.dash-sub strong { font-family: var(--font-mono); color: var(--ink); }

.link-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
  background: var(--dark);
  border-radius: var(--radius);
  padding: 1.1rem 1.4rem;
  margin-bottom: 2rem;
}
.link-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.3rem;
}
.link-bar code {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: #fff;
  word-break: break-all;
}

/* ---------- Stat tiles ---------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin-bottom: 2rem;
}
.stat-tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  display: grid;
  gap: 0.3rem;
  align-content: start;
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.stat-value {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.stat-note { font-size: 0.78rem; color: var(--ink-soft); }
/* The one lime on this screen: money actually banked. */
.stat-lead { background: var(--dark); border-color: var(--dark); }
.stat-lead .stat-label { color: rgba(255, 255, 255, 0.55); }
.stat-lead .stat-value { color: var(--accent); }
.stat-lead .stat-note { color: rgba(255, 255, 255, 0.55); }
.stat-muted .stat-value { color: var(--ink-soft); }

/* ---------- Panels ---------- */

.dash-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.dash-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.8rem;
  margin-bottom: 1.5rem;
}
.dash-split .dash-panel { margin-bottom: 0; }
.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.panel-head h2 { font-size: 1.15rem; }
.panel-note {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.panel-foot {
  margin-top: 1rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* ---------- Resources panel (portal dashboard) ---------- */

.panel-link {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
  text-decoration: none;
  white-space: nowrap;
}
.panel-link:hover { text-decoration: underline; }

.panel-intro {
  margin: 0 0 1.2rem;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

.res-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
}
.res-card {
  display: block;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.res-card:hover { border-color: var(--brand); background: var(--bone); }
.res-card strong {
  display: block;
  font-size: 0.9rem;
  color: var(--ink);
  margin-bottom: 0.25rem;
}
.res-card span {
  display: block;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

@media (max-width: 900px) { .res-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .res-grid { grid-template-columns: 1fr; } }

.breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.breakdown-row:last-child { border-bottom: none; }
.breakdown-row strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.breakdown-row-strong { color: var(--ink); font-weight: 600; }

.team-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
}
.team-row:last-child { border-bottom: none; }
.team-row strong { display: block; font-size: 0.94rem; }
.team-row span {
  font-size: 0.8rem;
  color: var(--ink-soft);
  font-family: var(--font-mono);
}
.empty-note { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.7; }

/* ---------- Status pills & kind chips ---------- */
/* Semantic colour, deliberately separate from the lime accent. */

.pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
}
.pill-ok   { color: #1c6b3f; background: #e8f5ee; border-color: #b7e0c8; }
.pill-warn { color: #8a5b00; background: #fdf3e0; border-color: #f0d9a8; }
.pill-bad  { color: #8c1d1d; background: #fdeaea; border-color: #f3c2c2; }

.kind {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.15rem 0.45rem;
  border-radius: 3px;
}
.kind-direct   { background: var(--bone); color: var(--ink); }
.kind-override { background: #eef1e0; color: var(--accent-ink); }

/* ---------- Portal responsive ---------- */

@media (max-width: 1100px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .dash-split { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .stat-grid { grid-template-columns: 1fr; }
  .login-card, .dash-panel { padding: 1.5rem 1.3rem; }
  .dash-head { flex-direction: column; }
}

/* Portal placeholder shown when no backend is configured on a public host */
.login-notice {
  background: var(--bone);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.6;
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}
.login-notice strong { color: var(--ink); display: block; margin-bottom: 0.2rem; }

/* ============================================================
   AFFILIATE RESOURCES (affiliate-resources.html)
   ============================================================ */

.res-block {
  padding: 3.5rem 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 90px;
}
.res-block:last-of-type { border-bottom: none; }
.res-block > h2 { margin-bottom: 0.6rem; }
.res-block > .lead { margin-bottom: 2rem; }

/* Do / don't */
.rules-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}
.rules-card {
  border-radius: var(--radius);
  padding: 1.6rem 1.8rem;
  border: 1px solid;
  border-left-width: 3px;
}
.rules-card h3 { font-size: 1rem; margin-bottom: 0.9rem; }
.rules-card ul { display: grid; gap: 0.6rem; }
.rules-card li {
  font-size: 0.92rem;
  line-height: 1.55;
  padding-left: 1.1rem;
  position: relative;
}
.rules-card li::before {
  position: absolute;
  left: 0;
  font-weight: 700;
}
.rules-good { background: #e8f5ee; border-color: #b7e0c8; border-left-color: #1c6b3f; color: #14532b; }
.rules-good h3 { color: #14532b; }
.rules-good li::before { content: "✓"; color: #1c6b3f; }
.rules-bad { background: #fdeaea; border-color: #f3c2c2; border-left-color: #8c1d1d; color: #7a1a1a; }
.rules-bad h3 { color: #7a1a1a; }
.rules-bad li::before { content: "×"; color: #8c1d1d; }

.callout {
  margin-top: 1.6rem;
  background: var(--bone);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
.callout strong { color: var(--ink); }
.callout-warn { background: #fdf3e0; border-color: #f0d9a8; border-left-color: #8a5b00; color: #6b4700; }
.callout-warn strong { color: #6b4700; }

/* Copy-to-clipboard cards */
.copy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.1rem;
}
.copy-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.2rem 1.3rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.copy-card p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink);
  flex: 1;
}
.copy-btn {
  align-self: flex-start;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 0.45rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.2s;
}
.copy-btn:hover { background: var(--brand-dark); }
.copy-btn.copied { background: var(--accent); color: #12161a; }
.copy-label { font-size: 0.75rem; color: var(--ink-soft); }

/* Asset downloads */
.asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.2rem;
}
.asset-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  gap: 0.15rem;
  padding-bottom: 1rem;
  transition: border-color 0.2s, transform 0.2s;
}
.asset-card:hover { border-color: var(--brand); transform: translateY(-2px); }
.asset-thumb {
  aspect-ratio: 4 / 3;
  background: var(--bone);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.8rem;
  overflow: hidden;
}
.asset-thumb img { max-width: 68%; max-height: 78%; object-fit: contain; }
.asset-card strong { font-size: 0.9rem; padding: 0 1rem; }
.asset-card span { font-size: 0.76rem; color: var(--ink-soft); padding: 0 1rem; }

@media (max-width: 760px) {
  .rules-split { grid-template-columns: 1fr; }
  .copy-grid { grid-template-columns: 1fr; }
}

/* ---------- Language guide ---------- */

.swap-table td { white-space: normal; vertical-align: top; width: 50%; }
.swap-table .swap-bad {
  color: #7a1a1a;
  background: #fdeaea;
  text-decoration: line-through;
  text-decoration-color: rgba(140, 29, 29, 0.4);
}
.swap-table .swap-good { color: #14532b; background: #e8f5ee; }
.swap-table .no-sub {
  color: #8c1d1d;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
}

.trigger-cloud { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.trigger {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  background: #fdeaea;
  color: #7a1a1a;
  border: 1px solid #f3c2c2;
  border-radius: 3px;
  padding: 0.28rem 0.6rem;
}

/* ---------- Q&A ---------- */

.qa-list { display: grid; gap: 1rem; }
.qa-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.qa-q {
  background: var(--bone);
  padding: 0.9rem 1.2rem;
  font-weight: 600;
  font-size: 0.95rem;
  border-bottom: 1px solid var(--line);
}
.qa-a { padding: 1.1rem 1.2rem; display: grid; gap: 0.9rem; justify-items: start; }
.qa-a p { font-size: 0.93rem; line-height: 1.65; color: var(--ink-soft); }

/* ---------- Worked examples ---------- */

.example-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.2rem;
}
.example-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.3rem 1.4rem;
  display: grid;
  gap: 0.9rem;
  align-content: start;
}
.example-card h3 { font-size: 0.95rem; }
.example-card pre {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--ink-soft);
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
}
.example-card .copy-btn { justify-self: start; }

/* ---------- Print: hand this to a rep as a PDF ---------- */

@media print {
  .site-header, .site-footer, .announcement, .chip-row,
  .cta-band, .copy-btn, .cart-drawer, .cart-overlay, .toast { display: none !important; }
  .res-block { padding: 1.2rem 0; page-break-inside: avoid; break-inside: avoid; }
  .page-hero { padding: 0 0 1rem; }
  body { font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .rules-split, .example-grid, .copy-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Signature capture ---------- */

.sign-box {
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.2rem 1.3rem;
  display: grid;
  gap: 0.5rem;
}
.sign-box label { font-size: 0.85rem; font-weight: 600; }
.sign-input {
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  width: 100%;
  /* Reads as a signature without pretending to be handwriting */
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.01em;
}
.sign-input:focus { outline: none; border-color: var(--brand); }
.sign-meta { font-size: 0.74rem; color: var(--ink-soft); line-height: 1.55; }

/* Numbered/bulleted clauses inside legal documents */
.legal-content .legal-list { display: grid; gap: 0.8rem; margin: 0 0 1.2rem; }
.legal-content .legal-list li {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--ink-soft);
  padding-left: 1.2rem;
  position: relative;
}
.legal-content .legal-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--ink);
}
.legal-content .legal-list strong { color: var(--ink); }

/* ---------- Manual delivery fallback (no relay configured) ---------- */

.manual-fallback {
  background: #fdf3e0;
  border: 1px solid #f0d9a8;
  border-left: 3px solid #8a5b00;
  border-radius: var(--radius);
  padding: 1.6rem 1.8rem;
  display: grid;
  gap: 1rem;
}
.manual-fallback h3 { font-size: 1.15rem; color: #6b4700; }
.manual-fallback p { font-size: 0.92rem; line-height: 1.65; color: #6b4700; }
.manual-fallback a { color: #6b4700; font-weight: 600; text-decoration: underline; }
.manual-body {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.6;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1rem 1.1rem;
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}
.manual-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; }


/* ---------- Affiliate next steps (post-application) ---------- */

.ns-wrap { max-width: 760px; margin: 0 auto; display: grid; gap: 1.4rem; }

.ns-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem;
}
.ns-card h2 { font-size: 1.15rem; margin: 0 0 1rem; }

.ns-orphan {
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.8rem;
}
.ns-orphan p { margin: 0; color: var(--ink-soft); line-height: 1.7; }
.ns-orphan a { color: var(--brand); font-weight: 600; text-decoration: underline; }

/* Numbered steps: the counter sits in the lime chip so the sequence
   reads at a glance on a phone, where the text wraps hard. */
.ns-steps { list-style: none; counter-reset: ns; margin: 0; padding: 0; display: grid; gap: 1.3rem; }
.ns-steps li { counter-increment: ns; padding-left: 2.6rem; position: relative; }
.ns-steps li::before {
  content: counter(ns);
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 1.8rem;
  height: 1.8rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
}
/* Direct child only — a <strong> inside the step's body text is inline,
   and blocking it strands the following punctuation on its own line. */
.ns-steps > li > strong { display: block; margin-bottom: 0.25rem; }
.ns-steps span { display: block; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.65; }
.ns-steps span strong { color: var(--ink); overflow-wrap: anywhere; }

.ns-list { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.9rem; }
.ns-list li { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.65; }
.ns-list strong { color: var(--ink); }
.ns-list a, .ns-steps a { color: var(--brand); font-weight: 600; text-decoration: underline; }

.ns-link-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
.ns-link {
  display: block;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ns-link:hover { border-color: var(--brand); background: var(--bone); }
.ns-link strong { display: block; font-size: 0.92rem; color: var(--ink); }
.ns-link span { display: block; margin-top: 0.2rem; font-size: 0.8rem; color: var(--ink-soft); }

@media (max-width: 640px) {
  .ns-card { padding: 1.4rem; }
  .ns-link-grid { grid-template-columns: 1fr; }
}

/* ---------- Invoice (pay.html) ----------
   The payment page leads with a real invoice rather than a running
   total in a sidebar: the customer is being asked to push money by
   hand, and an itemised document is what makes that feel like a
   transaction instead of a request. */

.invoice { margin-bottom: 1.4rem; }

.invoice-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.6rem;
  flex-wrap: wrap;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--line);
}

.invoice-issuer { display: flex; align-items: center; gap: 0.8rem; }
.invoice-mark { width: 34px; height: 34px; border-radius: 3px; }
.invoice-issuer-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.95rem;
}
.invoice-issuer-meta { display: block; font-size: 0.8rem; color: var(--ink-soft); }

.invoice-ident { text-align: right; display: grid; gap: 0.3rem; justify-items: end; }
.invoice-label {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* Monospaced and spaced out: this number gets copied into a bank
   memo field, so every digit has to be individually legible. */
.invoice-no {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.invoice-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.2rem;
  margin: 1.6rem 0;
}
.invoice-meta dt {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.35rem;
}
.invoice-meta dd { margin: 0; font-size: 0.92rem; font-weight: 500; }
.invoice-billed span { display: block; }
.invoice-billed span + span { color: var(--ink-soft); font-weight: 400; word-break: break-all; }
.invoice-due { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 600; }

/* Four columns will not fit a narrow phone. Scroll the table inside
   its own box so the page body never scrolls sideways. */
/* A grid child defaults to min-width:auto, so the table's min-width
   below becomes a floor on the whole column and the page — not the
   table — is what ends up scrolling sideways. min-width:0 lets the
   column shrink so this container's overflow-x actually engages. */
.pay-main, .pay-side { min-width: 0; }

.invoice-table-wrap { overflow-x: auto; margin: 0 -0.4rem; padding: 0 0.4rem; }

.invoice-table { width: 100%; border-collapse: collapse; min-width: 420px; }
.invoice-table th {
  text-align: left;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
  padding: 0 0.6rem 0.7rem;
  border-bottom: 1px solid var(--line);
}
.invoice-table td {
  padding: 0.85rem 0.6rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
  vertical-align: top;
}
.invoice-table th:first-child, .invoice-table td:first-child { padding-left: 0; }
.invoice-table th:last-child, .invoice-table td:last-child { padding-right: 0; }
.invoice-desc { font-weight: 500; }
.invoice-num { text-align: right; white-space: nowrap; font-family: var(--font-mono); }
th.invoice-num { font-family: var(--font-body); }
.invoice-amount { font-weight: 600; }

.invoice-totals {
  display: grid;
  gap: 0.6rem;
  margin-left: auto;
  margin-top: 1.2rem;
  max-width: 300px;
}
.invoice-total-row {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.invoice-total-row span:last-child { font-family: var(--font-mono); color: var(--ink); }
.invoice-total-due {
  border-top: 1px solid var(--line);
  padding-top: 0.7rem;
  margin-top: 0.2rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}
.invoice-total-due span:last-child { font-weight: 700; }

.invoice-foot {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.6;
}

@media (max-width: 560px) {
  .invoice-head { flex-direction: column; gap: 1rem; }
  .invoice-ident { text-align: left; justify-items: start; }
  .invoice-totals { max-width: none; }
}

/* ============================================================
   AFFILIATE PROGRAM — its own identity
   ------------------------------------------------------------
   The storefront's signature is Ink: black hero, lime used once
   as a highlight. This page inverts that. Lime carries the hero,
   Olive carries the type on it (the pairing the brand kit calls
   for), and the storefront's dark hero never appears. Someone
   landing here should know within a second that they are not on
   the shop.
   ============================================================ */

.aff-lime-hero {
  background: var(--accent);
  color: var(--accent-ink);
  padding: 4.5rem 0 0;
  border-bottom: 1px solid rgba(74, 83, 22, 0.18);
  position: relative;
  overflow: hidden;
}
/* A faint grid, echoing the storefront's dark hero texture without
   borrowing its colour. */
.aff-lime-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(74,83,22,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,83,22,.06) 1px, transparent 1px);
  background-size: 46px 46px;
  pointer-events: none;
}
.aff-lime-hero > .container { position: relative; }

.aff-lime-hero .eyebrow { color: var(--accent-ink); opacity: .75; }
.aff-lime-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5.2vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: #1a1e08;
  margin: .7rem 0 0;
  max-width: 17ch;
}
.aff-lime-hero .lead {
  color: var(--accent-ink);
  max-width: 52ch;
  margin-top: 1.1rem;
  font-size: 1.02rem;
  line-height: 1.7;
}
.aff-lime-hero .lead strong { color: #1a1e08; font-weight: 700; }

/* The rate pair is the page's hero image — not a product card. */
.aff-rates { display: flex; gap: 2.6rem; margin: 2.4rem 0 0; flex-wrap: wrap; }
.aff-rate-fig strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 4.2rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: #1a1e08;
}
.aff-rate-fig span {
  display: block;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-top: .5rem;
  max-width: 20ch;
}
.aff-rate-div { width: 1px; background: rgba(74,83,22,.22); align-self: stretch; }

.aff-lime-hero .hero-cta { margin-top: 2.4rem; padding-bottom: 3.2rem; }
.aff-lime-hero .btn-primary { background: #1a1e08; border-color: #1a1e08; color: var(--accent); }
.aff-lime-hero .btn-primary:hover { background: #000; border-color: #000; }
.aff-lime-hero .btn-outline { border-color: rgba(26,30,8,.4); color: #1a1e08; }
.aff-lime-hero .btn-outline:hover { background: rgba(26,30,8,.08); border-color: #1a1e08; }

/* ---------- Member hub ----------
   The four places an affiliate actually needs, sitting directly
   under the hero rather than buried in a footer. Existing members
   should not have to scroll a recruiting page to find the login. */
.aff-hub {
  background: var(--dark);
  padding: 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.aff-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.aff-hub-item {
  display: block;
  padding: 1.9rem 1.6rem;
  border-right: 1px solid rgba(255,255,255,.09);
  transition: background .18s;
}
.aff-hub-item:last-child { border-right: none; }
.aff-hub-item:hover { background: rgba(255,255,255,.05); }
.aff-hub-item .k {
  display: block;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .55rem;
}
.aff-hub-item strong {
  display: block;
  color: #fff;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.aff-hub-item small {
  display: block;
  color: rgba(255,255,255,.55);
  font-size: .82rem;
  line-height: 1.5;
  margin-top: .3rem;
}
.aff-hub-item .go { color: var(--accent); font-weight: 700; }

/* ---------- Payout illustration ----------
   Deliberately not .coa-card: reusing the certificate styling made
   this read as a product page. */
.payout-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  max-width: 460px;
}
.payout-card-head {
  background: var(--dark);
  color: #fff;
  padding: .95rem 1.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.payout-card-head span { color: var(--accent); }
.payout-row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .8rem 1.2rem;
  border-bottom: 1px solid var(--line);
  font-size: .9rem;
}
.payout-row .k { color: var(--ink-soft); }
.payout-row .v { font-family: var(--font-mono); font-weight: 600; }
.payout-row.total { background: #fafaf8; }
.payout-row.total .v { color: var(--accent-ink); font-size: 1.05rem; }
.payout-card-foot {
  padding: .8rem 1.2rem;
  font-size: .74rem;
  color: var(--ink-soft);
  display: flex; justify-content: space-between; gap: 1rem;
}

@media (max-width: 820px) {
  .aff-rates { gap: 1.8rem; }
  .aff-rate-div { display: none; }
  .aff-hub-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.09); }
}

/* ---------- Hero with the calculator alongside ----------
   The question every prospective affiliate arrives with is "what would
   this actually pay me", so the calculator sits in the hero rather than
   three screens down. On a white card, because sliders and figures need
   to read against the lime. */
.aff-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 3.4rem;
  align-items: start;
  padding-bottom: 3.4rem;
}
.aff-hero-grid .hero-cta { padding-bottom: 0; }

.aff-calc-card {
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  margin-top: .4rem;
}
.aff-calc-head {
  background: var(--dark);
  color: #fff;
  padding: 1.05rem 1.35rem;
}
.aff-calc-head .eyebrow { color: var(--accent); }
.aff-calc-head p {
  margin: .3rem 0 0;
  font-size: .86rem;
  color: rgba(255,255,255,.6);
}
/* In the hero the calculator is one narrow column, not the wide
   two-column layout it used further down the page. */
.aff-calc-card .calc-grid {
  display: block;
  padding: 1.35rem;
}
.aff-calc-card .calc-controls { display: grid; gap: 1.05rem; }
.aff-calc-card .calc-field label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .82rem; font-weight: 600; margin-bottom: .35rem;
}
.aff-calc-card .calc-field output { font-family: var(--font-mono); color: var(--accent-ink); }
.aff-calc-card .calc-hint { font-size: .72rem; color: var(--ink-soft); display: block; margin-top: .2rem; }
.aff-calc-card .calc-out {
  /* .calc-out is already a dark panel with white type; the card just
     needs it to sit flush inside the white surround. */
  margin: 0;
  border-radius: 0;
  padding: 1.35rem;
  position: static;
}
.aff-calc-card .calc-total {
  font-family: var(--font-display);
  font-size: 2.7rem;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--accent);
}
.aff-calc-card .calc-annual { font-size: .8rem; color: rgba(255,255,255,.6); margin-top: .3rem; }
.aff-calc-card .calc-rows { margin-top: 1.1rem; }
.aff-calc-card .calc-row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .55rem 0; font-size: .86rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.85);
}
.aff-calc-card .calc-row-total { border-bottom: none; font-weight: 700; color: #fff; }
.aff-calc-card .calc-row-total strong { color: var(--accent); }
.aff-calc-card .calc-disclaimer {
  font-size: .67rem; line-height: 1.55; color: rgba(255,255,255,.5);
  margin-top: .9rem;
}
.aff-calc-card .calc-meta { font-size: .73rem; color: rgba(255,255,255,.6); margin-top: .7rem; }

/* Three figures in a narrower column: grid, so they never orphan one
   onto a line of its own. */
.aff-rates { display: grid; grid-template-columns: repeat(3, auto); gap: 1.6rem 2rem; justify-content: start; }
.aff-rate-div { display: none; }
.aff-rate-fig strong { font-size: clamp(2rem, 4.4vw, 3rem); }

@media (max-width: 980px) {
  .aff-hero-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .aff-calc-card { max-width: 520px; }
}

/* ---------- Compact the hero calculator ----------
   At full size the card ran 1084px against 550px of copy — a 500px
   overhang that read as a mistake. Sliders go 2-up, the per-figure
   breakdown moves to the worked-examples section where there is room,
   and the rhythm tightens throughout. */
.aff-lime-hero { padding-top: 3.2rem; }
.aff-hero-grid { gap: 2.8rem; padding-bottom: 2.8rem; }

.aff-calc-head { padding: .8rem 1.15rem; }
.aff-calc-head p { display: none; }

.aff-calc-card .calc-grid { padding: 1.15rem; }
.aff-calc-card .calc-controls {
  grid-template-columns: 1fr 1fr;
  gap: .85rem 1.1rem;
}
.aff-calc-card .calc-field label { font-size: .76rem; margin-bottom: .25rem; }
.aff-calc-card .calc-field input[type="range"] { margin: 0; }
.aff-calc-card .calc-hint { font-size: .66rem; line-height: 1.35; margin-top: .25rem; }

.aff-calc-card .calc-out { padding: 1.15rem; }
.aff-calc-card .calc-total { font-size: 2.1rem; }
.aff-calc-card .calc-annual { font-size: .75rem; }
.aff-calc-card .calc-rows { margin-top: .8rem; }
.aff-calc-card .calc-row { padding: .42rem 0; font-size: .82rem; }
/* The four per-figure rows are detail, not headline — they live with the
   worked examples further down rather than doubling the card's height. */
.aff-calc-card .calc-meta { display: none; }
.aff-calc-card .calc-disclaimer { font-size: .64rem; margin-top: .7rem; }

@media (max-width: 620px) {
  .aff-calc-card .calc-controls { grid-template-columns: 1fr; }
}

/* Final tightening of the hero calculator. The full earnings disclaimer
   moves to the worked-examples section; a one-line qualifier stays on the
   card because the figure above it is an earnings claim and the only other
   disclosure on the page sits inside a collapsed FAQ. */
.aff-calc-card .calc-grid { padding: .95rem; }
.aff-calc-card .calc-controls { gap: .7rem .95rem; }
.aff-calc-card .calc-hint {
  font-size: .62rem; line-height: 1.3; margin-top: .18rem;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
}
.aff-calc-card .calc-out { padding: .95rem 1.15rem 1.1rem; }
.aff-calc-card .calc-total { font-size: 1.9rem; }
.aff-calc-card .calc-annual { font-size: .72rem; margin-top: .2rem; }
.aff-calc-card .calc-rows { margin-top: .65rem; }
.aff-calc-card .calc-row { padding: .36rem 0; font-size: .8rem; }
.aff-calc-card .calc-disclaimer { font-size: .63rem; margin-top: .6rem; line-height: 1.4; }

/* The earnings disclosure, rehomed out of the hero card. Kept visible and
   uncollapsed: the only other one on the page is inside a FAQ accordion,
   and a disclaimer nobody opens is not a disclaimer. */
.earnings-disclosure {
  margin-top: 1rem;
  padding: .85rem 1rem;
  border-left: 3px solid var(--accent);
  background: #fafaf8;
  font-size: .8rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 68ch;
}

/* ---------- Affiliate hero on small screens ----------
   Three figures side by side at 375px gave every label three wrapped
   lines and pushed the calculator 800px down the page. Inline rows read
   in one glance and cost a third of the height. */
@media (max-width: 700px) {
  .aff-lime-hero { padding-top: 2rem; }
  .aff-hero-grid { gap: 1.6rem; padding-bottom: 2rem; }
  .aff-lime-hero h1 { font-size: clamp(1.9rem, 8.5vw, 2.5rem); max-width: none; }
  .aff-lime-hero .lead { font-size: .94rem; line-height: 1.6; margin-top: .85rem; }

  .aff-rates {
    grid-template-columns: 1fr;
    gap: .55rem;
    margin-top: 1.5rem;
    border-top: 1px solid rgba(74,83,22,.22);
    padding-top: 1.1rem;
  }
  .aff-rate-fig {
    display: flex;
    align-items: baseline;
    gap: .8rem;
  }
  .aff-rate-fig strong {
    font-size: 1.9rem;
    min-width: 3.6ch;
  }
  .aff-rate-fig span {
    margin-top: 0;
    max-width: none;
    font-size: .68rem;
    line-height: 1.35;
  }

  .aff-lime-hero .hero-cta { margin-top: 1.5rem; display: grid; gap: .6rem; }
  .aff-lime-hero .hero-cta .btn { width: 100%; text-align: center; }
}