/* Elixser gate options: full-bleed, single-screen pages (brand matched to elixserpeptides.com) */
:root {
  --ink: #0a0a0a;
  --paper: #ffffff;
  --stone: #f5f5f2;
  --stone-2: #ecebe6;
  --blue: #0066ff;
  --blue-2: #5c9dff;
  --green: #1f9d5c;
  --f-head: "Space Grotesk", system-ui, sans-serif;
  --f-body: "Inter", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --wrap: 1180px;
  /* vertical rhythm scales with screen height so every page fits one screen */
  --vy: clamp(14px, 2.6vh, 32px);
}

/* themes */
.t-dark  { --bg: #0a0a0a; --fg: #f5f5f2; --muted: rgba(245,245,242,.62); --faint: rgba(245,245,242,.42); --line: rgba(245,245,242,.12); --panel: rgba(255,255,255,.03); --accent: var(--blue-2); }
.t-light { --bg: #ffffff; --fg: #0a0a0a; --muted: #666; --faint: #8a8a8a; --line: rgba(10,10,10,.1); --panel: #fff; --accent: var(--blue); }
.t-stone { --bg: #f5f5f2; --fg: #0a0a0a; --muted: #666; --faint: #8a8a8a; --line: rgba(10,10,10,.1); --panel: #fff; --accent: var(--blue); }

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--f-body); background: var(--bg); color: var(--fg); -webkit-font-smoothing: antialiased; line-height: 1.5; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { text-wrap: balance; margin: 0; font-family: var(--f-head); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; }

.wrap { width: min(100% - 48px, var(--wrap)); margin-inline: auto; }

/* ---------- screen skeleton ---------- */
.screen { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; position: relative; overflow: hidden; }
.top { border-bottom: 1px solid var(--line); position: relative; z-index: 2; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: clamp(56px, 8vh, 72px); }
.top img { height: 24px; width: auto; }
.top .note { font: 500 11px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); text-align: right; }
.stage { display: flex; align-items: center; padding: calc(var(--vy) * 1.5) 0; position: relative; z-index: 1; }
.stage > .wrap { width: min(100% - 48px, var(--wrap)); }
.legal { border-top: 1px solid var(--line); position: relative; z-index: 2; }
.legal .wrap { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; font: 500 10.5px/1.5 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }

/* ---------- type ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 600 11.5px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.h-xl { font-size: clamp(38px, min(6vw, 8.4vh), 84px); }
.h-lg { font-size: clamp(34px, min(5vw, 7vh), 68px); }
.accent { color: var(--accent); }
.lede { color: var(--muted); font-size: clamp(15px, 2vh, 18px); max-width: 34rem; }
.fine { color: var(--faint); font-size: 12.5px; }
.mt-1 { margin-top: calc(var(--vy) * .6); }
.mt-2 { margin-top: var(--vy); }
.mt-3 { margin-top: calc(var(--vy) * 1.4); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: clamp(46px, 6.4vh, 54px); padding: 0 28px; border-radius: 999px;
  border: 1px solid var(--fg); background: var(--fg); color: var(--bg);
  font: 600 15px/1 var(--f-body); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,0,0,.18); }
.btn.blue { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.blue:hover { box-shadow: 0 10px 26px rgba(0,102,255,.3); }
.btn.ghost { background: transparent; color: var(--fg); border-color: var(--line); }
.btn.ghost:hover { background: var(--panel); box-shadow: none; border-color: var(--fg); }
.btn .arrow { font-family: var(--f-mono); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- accordion ---------- */
.acc { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-trigger { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: calc(var(--vy) * .75) 0; background: none; border: 0; cursor: pointer; text-align: left; color: var(--fg); font: 600 clamp(15px, 2.1vh, 18px)/1.35 var(--f-body); }
.acc-trigger .q { display: flex; gap: 16px; align-items: baseline; }
.acc-trigger .n { font: 500 12px/1 var(--f-mono); color: var(--accent); }
.acc-trigger .plus { flex: none; color: var(--accent); font: 400 24px/1 var(--f-mono); transition: transform 200ms ease; }
.acc-item.open .plus { transform: rotate(45deg); }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 240ms ease; }
.acc-panel > div { overflow: hidden; }
.acc-item.open .acc-panel { grid-template-rows: 1fr; }
.acc-panel p { padding: 0 0 calc(var(--vy) * .75) 34px; color: var(--muted); font-size: 15px; max-width: 42rem; }

/* ---------- preview chrome (test site only) ---------- */
.pv-bar {
  position: fixed; right: 16px; bottom: 16px; z-index: 50;
  display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: 999px;
  background: rgba(255,255,255,.95); color: #0a0a0a; border: 1px solid rgba(10,10,10,.12);
  box-shadow: 0 10px 30px rgba(0,0,0,.25); font: 500 11.5px/1 var(--f-mono); white-space: nowrap;
}
.pv-bar a { color: #0a0a0a; text-decoration: none; padding: 8px 10px; border-radius: 999px; }
.pv-bar a:hover { background: rgba(10,10,10,.07); }
.pv-bar .pv-label { padding: 8px 6px; color: rgba(10,10,10,.5); letter-spacing: .06em; text-transform: uppercase; }
.pv-bar .pv-label b { color: #0a0a0a; }
.pv-toast {
  position: fixed; right: 16px; bottom: 66px; z-index: 60; max-width: min(360px, calc(100% - 32px));
  padding: 12px 16px; border-radius: 10px; background: #fff; color: #0a0a0a; font-size: 13.5px;
  box-shadow: 0 14px 40px rgba(0,0,0,.3); opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}
.pv-toast.show { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .top .note { display: none; }
  .legal .wrap { flex-direction: column; gap: 4px; padding-bottom: 64px; }
  .pv-bar { right: 50%; transform: translateX(50%); }
  .pv-bar .pv-label span { display: none; }
  .acc-panel p { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- 50% off offer (variants 5A/5B/7A/7B) ---------- */
.offer-strip { background: var(--blue); color: #fff; text-align: center; padding: 8px 16px; font: 500 11px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.offer-strip b { font-weight: 700; }
.offer-chip {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px;
  background: var(--blue); color: #fff; font: 600 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 8px 24px rgba(0,102,255,.3);
}
.offer-chip::before { content: "%"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: var(--blue); font-size: 11px; letter-spacing: 0; }