/* ===========================================================================
   gelaagen.com — the whole design system, hand written.
   CSS Grid, Flexbox and custom properties. No framework of any kind, and no
   JavaScript: the menu and the FAQ are native <details> elements.

   Every selector is namespaced gag-, so this file cannot touch anything else
   running on the same host.

   The palette is read off the Gelagen jar: the bone white of the label, the
   near-black of its printing, the berry red of the gummies behind the glass
   and the gold of the wordmark, used only as a hairline and a micro-label.
   ========================================================================= */

:root {
  --gag-paper: #fff;
  --gag-bone: #faf6ee;
  --gag-bone-2: #f2ebdd;
  --gag-ink: #14110d;
  --gag-ink-2: #2b2620;
  --gag-body: #4a443b;
  --gag-mute: #6b6458;
  --gag-berry: #b2262b;
  --gag-berry-2: #8c1b20;
  --gag-gold: #8a6120;
  --gag-gold-2: #c2933f;
  --gag-line: #e6ddcb;
  --gag-line-2: #cfc3a9;

  --gag-shell: 1160px;
  --gag-pad: clamp(52px, 7vw, 96px);
  --gag-gap: clamp(18px, 3vw, 30px);

  --gag-display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gag-text: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--gag-paper);
  color: var(--gag-body);
  font-family: var(--gag-text);
  font-size: 19px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--gag-gold); }
a:hover { color: var(--gag-berry); }
:focus-visible { outline: 3px solid var(--gag-berry); outline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: var(--gag-display);
  color: var(--gag-ink);
  margin: 0;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
}
p { margin: 0 0 1rem; }

.gag-shell {
  width: 100%;
  max-width: var(--gag-shell);
  margin-inline: auto;
  padding-inline: clamp(18px, 4vw, 32px);
}

.gag-skip {
  position: absolute; left: 12px; top: 12px; z-index: 70;
  width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
  background: var(--gag-ink); color: #fff;
}
.gag-skip:focus {
  width: auto; height: auto; padding: 10px 18px;
  overflow: visible; clip-path: none;
}

/* --- type ---------------------------------------------------------------- */

.gag-xl { font-size: clamp(2.7rem, 7.4vw, 5.6rem); }
.gag-lg { font-size: clamp(1.95rem, 4.2vw, 3.2rem); }
.gag-md { font-size: clamp(1.2rem, 1.8vw, 1.45rem); }

.gag-tag {
  display: inline-block;
  font-family: var(--gag-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gag-gold);
}
.gag-lede { font-size: 1.08rem; color: var(--gag-mute); }

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

.gag-strip {
  background: var(--gag-ink); color: #ded4c0; font-size: 0.8rem;
  letter-spacing: 0.03em;
}
.gag-strip div {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px 26px; padding: 8px 0; text-align: center;
}
.gag-strip b { color: #fff; font-weight: 500; }

.gag-bar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gag-line);
}
.gag-bar > div {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-block: 11px;
}
.gag-word {
  font-family: var(--gag-display); font-weight: 800; font-size: 1.4rem;
  letter-spacing: -0.05em; color: var(--gag-ink); text-decoration: none;
}
.gag-word span { color: var(--gag-berry); }

.gag-links { display: none; gap: 20px; }
.gag-links a {
  font-size: 0.93rem; color: var(--gag-body); text-decoration: none;
  padding-block: 4px; border-bottom: 2px solid transparent;
}
.gag-links a:hover { color: var(--gag-ink); }
.gag-links a[aria-current] {
  color: var(--gag-berry); border-bottom-color: var(--gag-berry);
}

.gag-side { display: flex; align-items: center; gap: 10px; }
.gag-pop { position: relative; }
.gag-pop > summary {
  list-style: none; cursor: pointer;
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid var(--gag-line-2);
}
.gag-pop > summary::-webkit-details-marker { display: none; }
.gag-pop > summary span,
.gag-pop > summary span::before,
.gag-pop > summary span::after {
  display: block; width: 19px; height: 2px; background: var(--gag-ink);
  content: ""; position: relative;
}
.gag-pop > summary span::before { position: absolute; top: -6px; }
.gag-pop > summary span::after { position: absolute; top: 6px; }
.gag-pop:not([open]) .gag-sheet { display: none; }
.gag-sheet {
  position: absolute; right: 0; top: 52px; width: 250px; z-index: 60;
  background: #fff; border: 1px solid var(--gag-line-2); padding: 16px 18px;
  box-shadow: 0 30px 60px -40px rgba(20, 17, 13, .6);
}
.gag-sheet a {
  display: block; padding: 8px 0; font-size: 0.95rem; text-decoration: none;
  color: var(--gag-body); border-bottom: 1px solid var(--gag-line);
}
.gag-sheet a:last-child { border-bottom: 0; }

/* --- buttons ------------------------------------------------------------- */

.gag-go, .gag-ghost, .gag-pale {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--gag-display); font-weight: 700; font-size: 1rem;
  letter-spacing: -0.01em; text-decoration: none; cursor: pointer;
  padding: 16px 34px; border: 2px solid transparent;
}
.gag-go { background: var(--gag-berry); color: #fff; }
.gag-go:hover { background: var(--gag-berry-2); color: #fff; }
.gag-ghost { border-color: var(--gag-ink); color: var(--gag-ink); }
.gag-ghost:hover { background: var(--gag-ink); color: #fff; }
.gag-pale { background: #fff; color: var(--gag-berry); }
.gag-pale:hover { background: var(--gag-bone); color: var(--gag-berry-2); }
.gag-sm { padding: 10px 20px; font-size: 0.9rem; }
.gag-lgb { padding: 19px 44px; font-size: 1.06rem; }
.gag-full { width: 100%; }

/* --- sections ------------------------------------------------------------ */

.gag-sec { padding-block: var(--gag-pad); }
.gag-bone { background: var(--gag-bone); }
.gag-bone2 { background: var(--gag-bone-2); }
.gag-dark { background: var(--gag-ink); }
.gag-dark h2, .gag-dark h3 { color: #fff; }
.gag-dark p, .gag-dark li { color: #cec5b4; }
.gag-dark .gag-tag { color: var(--gag-gold-2); }
.gag-top { border-top: 1px solid var(--gag-line); }
.gag-mid { text-align: center; }
.gag-mid .gag-lede { margin-inline: auto; max-width: 60ch; }

.gag-head { max-width: 64ch; }
.gag-head .gag-tag { margin-bottom: 14px; }
.gag-head .gag-lede { margin-top: 16px; margin-bottom: 0; }

/* --- hero: the jar, centred, with the headline wrapped around it --------- */

.gag-hero {
  background:
    radial-gradient(90% 70% at 50% 0%, var(--gag-bone) 0%, #fff 70%);
  padding-block: clamp(30px, 5vw, 54px) clamp(36px, 5vw, 60px);
  text-align: center;
  border-bottom: 1px solid var(--gag-line);
}
.gag-hero h1 { max-width: 17ch; margin-inline: auto; }
.gag-hero h1 em { font-style: normal; color: var(--gag-berry); }
.gag-hero-sub {
  font-size: clamp(1.04rem, 1.6vw, 1.18rem); color: var(--gag-mute);
  max-width: 52ch; margin: 18px auto 0;
}
.gag-hero-art { width: min(100%, 360px); margin: clamp(18px, 3vw, 28px) auto 0; }
.gag-acts {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin-top: 24px;
}
.gag-note { margin-top: 14px; font-size: 0.93rem; color: var(--gag-mute); }

.gag-tick {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--gag-line); border: 1px solid var(--gag-line);
  max-width: 700px; margin: 28px auto 0;
}
.gag-tick div { background: #fff; padding: 13px 10px; }
.gag-tick b {
  display: block; font-family: var(--gag-display); font-weight: 800;
  font-size: 1.25rem; color: var(--gag-ink); line-height: 1;
}
.gag-tick span { font-size: 0.82rem; color: var(--gag-mute); }

/* --- trust row ----------------------------------------------------------- */

.gag-marks {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 16px 30px; padding-block: 20px;
  border-bottom: 1px solid var(--gag-line); background: var(--gag-bone);
}
.gag-marks img { width: 78px; }

/* --- compact benefit / reason grid --------------------------------------- */

.gag-grid {
  display: grid; gap: var(--gag-gap);
  grid-template-columns: minmax(0, 1fr);
}
.gag-cell { border-top: 2px solid var(--gag-ink); padding-top: 16px; }
.gag-cell h3 { font-size: 1.08rem; margin-bottom: 6px; }
.gag-cell p { margin: 0; font-size: 0.97rem; color: var(--gag-mute); }
.gag-cell-berry { border-top-color: var(--gag-berry); }
.gag-cell-gold { border-top-color: var(--gag-gold-2); }

/* --- split blocks -------------------------------------------------------- */

.gag-split { display: grid; gap: clamp(24px, 4vw, 54px); align-items: center; }
.gag-split img { margin-inline: auto; }

.gag-list { list-style: none; margin: 24px 0 0; padding: 0; }
.gag-list li {
  display: grid; grid-template-columns: 26px 1fr; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--gag-line); font-size: 1rem;
}
.gag-list li::before {
  content: "\2014"; color: var(--gag-berry); line-height: 1.6;
}

/* --- how it works -------------------------------------------------------- */

.gag-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.gag-steps li {
  display: grid; grid-template-columns: 44px 1fr; gap: 16px;
  padding: 18px 0; border-bottom: 1px solid var(--gag-line);
}
.gag-steps li:last-child { border-bottom: 0; }
.gag-steps b {
  font-family: var(--gag-display); font-weight: 800; font-size: 1.35rem;
  color: var(--gag-berry); line-height: 1.1;
}
.gag-steps h3 { font-size: 1.06rem; margin-bottom: 3px; }
.gag-steps p { margin: 0; font-size: 0.97rem; color: var(--gag-mute); }
.gag-shot { border: 1px solid var(--gag-line); padding: 12px; background: #fff; }
.gag-shot figcaption {
  margin-top: 10px; text-align: center; font-size: 0.86rem;
  color: var(--gag-mute);
}

/* --- reviews ------------------------------------------------------------- */

.gag-says { display: grid; gap: var(--gag-gap); }
.gag-say {
  display: flex; flex-direction: column; margin: 0;
  background: #fff; border: 1px solid var(--gag-line); padding: 26px 24px;
}
.gag-say blockquote { margin: 0; font-size: 1rem; color: var(--gag-ink-2); }
.gag-say blockquote p:last-child { margin-bottom: 0; }
.gag-who {
  display: flex; align-items: center; gap: 12px;
  margin-top: auto; padding-top: 20px;
}
.gag-who img { width: 46px; height: 46px; border-radius: 50%; }
.gag-who b {
  display: block; font-family: var(--gag-display); font-size: 0.97rem;
  color: var(--gag-ink);
}
.gag-who small { font-size: 0.84rem; color: var(--gag-mute); }

/* --- pricing: one wide featured tile beside two stacked ------------------ */

.gag-bento { display: grid; gap: var(--gag-gap); margin-top: 40px; }
.gag-deal {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--gag-line-2); padding: 26px 24px;
}
.gag-deal-lead {
  background: var(--gag-ink); border-color: var(--gag-ink); color: #cec5b4;
  padding: clamp(26px, 3vw, 40px);
}
.gag-deal-lead h3, .gag-deal-lead .gag-rate b { color: #fff; }
.gag-deal-lead .gag-deal-sub, .gag-deal-lead li { color: #b8ae9c; }
.gag-deal-lead .gag-rate small { color: #b8ae9c; }
.gag-deal img { margin-inline: auto; }
.gag-deal h3 { font-size: 1.35rem; }
.gag-deal-sub {
  display: block; font-size: 0.8rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gag-mute); margin: 4px 0 14px;
}
.gag-rate { display: flex; align-items: baseline; gap: 8px; }
.gag-rate b {
  font-family: var(--gag-display); font-weight: 800; font-size: 2.7rem;
  color: var(--gag-ink); line-height: 1; letter-spacing: -0.05em;
}
.gag-rate small { font-size: 0.86rem; color: var(--gag-mute); }
.gag-deal ul {
  list-style: none; margin: 16px 0 22px; padding: 0;
  font-size: 0.95rem; color: var(--gag-mute);
}
.gag-deal li { padding: 4px 0 4px 18px; position: relative; }
.gag-deal li::before {
  content: ""; position: absolute; left: 0; top: 0.82em;
  width: 9px; height: 2px; background: var(--gag-gold-2);
}
.gag-deal .gag-go, .gag-deal .gag-pale { margin-top: auto; }
.gag-flag {
  display: inline-block; align-self: flex-start; margin-bottom: 12px;
  font-family: var(--gag-display); font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  background: var(--gag-berry); color: #fff; padding: 5px 12px;
}
.gag-deal-lead .gag-flag { background: var(--gag-gold-2); color: var(--gag-ink); }

.gag-bons { display: grid; gap: 16px; margin-top: 36px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); }
.gag-bons figure { margin: 0; text-align: center; }
.gag-bons img { margin-inline: auto; }
.gag-bons figcaption {
  margin-top: 8px; font-family: var(--gag-display); font-weight: 700;
  font-size: 0.78rem; color: var(--gag-ink); line-height: 1.3;
}

/* --- science: the panel as a plain table --------------------------------- */

.gag-table { width: 100%; border-collapse: collapse; margin-top: 26px; }
.gag-table caption { text-align: left; }
.gag-table th, .gag-table td {
  padding: 9px 0; text-align: right; font-size: 0.95rem;
  border-bottom: 1px solid rgba(255, 255, 255, .14); color: #ded4c0;
}
.gag-table th { text-align: left; font-weight: 400; color: #fff; }
.gag-table thead th {
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gag-gold-2); border-bottom: 2px solid var(--gag-gold-2);
}
.gag-table tbody th small { display: block; font-size: 0.78rem; color: #b8ae9c; }
.gag-note-dark { font-size: 0.86rem; color: #b8ae9c; margin-top: 16px; }

/* --- ingredients: image-led tiles ---------------------------------------- */

.gag-tiles { display: grid; gap: var(--gag-gap); margin-top: 38px; }
.gag-tile { background: #fff; border: 1px solid var(--gag-line); }
.gag-tile-art { background: var(--gag-bone-2); padding: 0; }
.gag-tile-art img { width: 100%; }
.gag-tile-copy { padding: 22px 22px 26px; }
.gag-tile h3 { font-size: 1.2rem; margin-bottom: 2px; }
.gag-tile-dose {
  display: block; font-family: var(--gag-display); font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gag-berry); margin-bottom: 10px;
}
.gag-tile p { margin: 0; font-size: 0.96rem; color: var(--gag-mute); }

/* --- guarantee ----------------------------------------------------------- */

.gag-safe { display: grid; gap: clamp(22px, 4vw, 46px); align-items: center; }
.gag-safe img { margin-inline: auto; }
.gag-safe-row {
  display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 18px;
  padding-top: 16px; border-top: 1px solid var(--gag-line-2);
  font-size: 0.94rem; color: var(--gag-mute);
}

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

.gag-qs { margin-top: 32px; border-top: 1px solid var(--gag-line); }
.gag-q { border-bottom: 1px solid var(--gag-line); }
.gag-q > summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 18px 44px 18px 0;
  font-family: var(--gag-display); font-weight: 700; font-size: 1.04rem;
  color: var(--gag-ink);
}
.gag-q > summary::-webkit-details-marker { display: none; }
.gag-q > summary::after {
  content: "+"; position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%); font-size: 1.5rem; font-weight: 400;
  color: var(--gag-berry); line-height: 1;
}
.gag-q[open] > summary::after { content: "\2013"; }
.gag-q-a { padding: 0 0 20px; max-width: 78ch; }
.gag-q-a p:last-child { margin-bottom: 0; }

/* --- final CTA ----------------------------------------------------------- */

.gag-buy { background: var(--gag-berry); color: #fbe9e9; padding-block: var(--gag-pad); }
.gag-buy h2 { color: #fff; }
.gag-buy p { color: #f6dede; }
.gag-buy-in { display: grid; gap: clamp(26px, 4vw, 56px); align-items: center; }
.gag-buy-art img { margin-inline: auto; }
.gag-buy .gag-ghost { border-color: rgba(255, 255, 255, .6); color: #fff; }
.gag-buy .gag-ghost:hover { background: #fff; color: var(--gag-berry); }
.gag-buy-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; }
.gag-buy-marks img { background: #fff; padding: 6px 9px; }
.gag-buy-marks img.gag-round { border-radius: 50%; padding: 4px; }

/* --- prose pages --------------------------------------------------------- */

.gag-page { padding-block: clamp(36px, 5vw, 62px); }
.gag-crumb { font-size: 0.89rem; color: var(--gag-mute); padding-top: 18px; }
.gag-crumb a { color: var(--gag-mute); }
.gag-cols { display: grid; gap: clamp(26px, 4vw, 52px); margin-top: 36px; }
.gag-prose { min-width: 0; }
.gag-prose h2 { font-size: 1.55rem; margin: 38px 0 12px; }
.gag-prose h3 { font-size: 1.18rem; margin: 26px 0 8px; }
.gag-prose ul, .gag-prose ol { padding-left: 20px; margin: 0 0 16px; }
.gag-prose li { margin-bottom: 8px; }
.gag-prose > :first-child { margin-top: 0; }
.gag-card { background: var(--gag-bone); border: 1px solid var(--gag-line-2); padding: 24px 22px; }
.gag-card h3 { font-size: 1.08rem; margin-bottom: 8px; }
.gag-card p { font-size: 0.95rem; color: var(--gag-mute); }
.gag-post { padding-block: 32px; border-top: 1px solid var(--gag-line); }
.gag-post:first-of-type { border-top: 0; padding-top: 0; }
.gag-post h2 { font-size: 1.45rem; margin: 0 0 6px; }
.gag-post-date {
  display: block; font-size: 0.78rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gag-gold); margin-bottom: 12px;
}

/* --- footer -------------------------------------------------------------- */

.gag-foot { background: var(--gag-ink); color: #a79d8c; padding-block: 56px 26px; }
.gag-foot-top { display: grid; gap: clamp(26px, 4vw, 46px); }
.gag-foot-word {
  font-family: var(--gag-display); font-weight: 800; font-size: 1.4rem;
  letter-spacing: -0.05em; color: #fff; display: block; margin-bottom: 12px;
}
.gag-foot-word span { color: var(--gag-gold-2); }
.gag-foot p { font-size: 0.94rem; color: #a79d8c; }
.gag-foot-links {
  display: grid; gap: 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gag-foot h4 {
  font-family: var(--gag-display); font-size: 0.72rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: #fff; margin-bottom: 12px;
}
.gag-foot ul { list-style: none; margin: 0; padding: 0; color: #a79d8c; }
.gag-foot li { margin-bottom: 8px; }
.gag-foot li a { color: #a79d8c; text-decoration: none; font-size: 0.94rem; }
.gag-foot li a:hover { color: #fff; }
.gag-rule { height: 1px; background: rgba(255, 255, 255, .14); margin: 40px 0 22px; }
.gag-legal p { font-size: 0.85rem; color: #8b8171; margin-bottom: 11px; }
.gag-legal .gag-legal-1 { color: #c2b8a6; font-weight: 500; }

/* --- 404 ----------------------------------------------------------------- */

.gag-lost { text-align: center; padding-block: clamp(60px, 9vw, 120px); }
.gag-lost .gag-acts { margin-top: 26px; }

/* ===========================================================================
   Breakpoints. Single column first; tracks are added as room appears.
   ========================================================================= */

@media (max-width: 559px) {
  .gag-acts .gag-go, .gag-acts .gag-ghost, .gag-acts .gag-pale { width: 100%; }
}

@media (min-width: 560px) {
  .gag-tick { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gag-tile { display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: center; }
  .gag-tile-art img { height: 100%; }
}

@media (min-width: 720px) {
  .gag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gag-says { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gag-foot-links { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .gag-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gag-says { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gag-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gag-split-wide { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .gag-flip > :first-child { order: 2; }
  .gag-safe { grid-template-columns: 200px minmax(0, 1fr); }
  .gag-buy-in { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
  .gag-cols { grid-template-columns: minmax(0, 1.6fr) minmax(0, .85fr); }
  .gag-foot-top { grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); }
  .gag-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* the pricing bento: the six-jar tile runs the full height of the left
     column while the two smaller boxes stack beside it */
  .gag-bento {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    grid-template-rows: auto auto;
  }
  .gag-bento > :first-child { grid-row: 1 / span 2; }
  /* the featured tile is twice as tall as the others, so its contents sit
     centred rather than leaving a void above the button */
  .gag-deal-lead { justify-content: center; }
  .gag-deal-lead img { width: min(100%, 420px); }
  .gag-deal-lead .gag-pale { margin-top: 24px; }
}

@media (min-width: 1100px) {
  .gag-links { display: flex; }
  .gag-pop { display: none; }
}