/* ===========================================================================
   gelasgen.com — custom layer over Bootstrap 5.3.3.
   Bootstrap supplies the grid, the utilities, the navbar collapse and the
   accordion. Everything below is written for this domain and namespaced gls-,
   so nothing here can reach another site's markup.

   The palette is lifted from the Gelagen jar: the ivory of the label, the two
   golds of the wordmark and its frame, the deep bronze of the printing, the
   berry red of the gummies behind the glass, and the near-black of the text.
   ========================================================================= */

:root {
  --gls-ivory: #fbf7ef;
  --gls-ivory-2: #f4ecdc;
  --gls-sand: #e9dcc2;
  --gls-gold: #c2933f;
  --gls-gold-2: #a87a24;
  --gls-bronze: #8a6224;
  --gls-berry: #b2262b;
  --gls-berry-2: #8e1c21;
  --gls-ink: #241c12;
  --gls-ink-2: #3b3125;
  --gls-body: #514738;
  --gls-soft: #6f6553;
  --gls-rule: #e2d7c2;
  --gls-rule-2: #cdbe9f;

  --gls-arch: 50% 50% 10px 10px / 34% 34% 3% 3%;
  --gls-pad: clamp(58px, 7.5vw, 108px);

  --gls-display: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gls-text: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body {
  background: var(--gls-ivory);
  color: var(--gls-body);
  font-family: var(--gls-text);
  font-size: 19px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

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

.gls-wrap {
  max-width: 1200px;
  /* Bootstrap's g-5 rows carry -24px side margins; the shell keeps at least
     that much padding so a row can never reach past the viewport. */
  padding-inline: clamp(26px, 3vw, 34px);
}

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

.gls-d1 { font-size: clamp(2.4rem, 5.4vw, 4rem); }
.gls-d2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.gls-d3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); }

.gls-eyebrow {
  display: inline-block;
  font-family: var(--gls-display);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gls-gold-2);
  margin-bottom: 16px;
}
.gls-eyebrow::after {
  content: ""; display: block; width: 46px; height: 2px;
  background: var(--gls-gold); margin-top: 10px;
}
.gls-mid .gls-eyebrow::after { margin-inline: auto; }

.gls-lede { font-size: 1.08rem; color: var(--gls-soft); }

/* --- ribbon, navbar ------------------------------------------------------ */

.gls-ribbon {
  background: var(--gls-ink);
  color: #e7dcc6;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
}
.gls-ribbon b { color: var(--gls-gold); font-weight: 600; }

.gls-nav {
  background: rgba(251, 247, 239, 0.95);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--gls-rule);
}
.gls-brand {
  font-family: var(--gls-display);
  font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em;
  color: var(--gls-ink);
}
.gls-brand span { color: var(--gls-gold-2); }
.gls-nav .nav-link {
  font-size: 0.95rem; color: var(--gls-body); font-weight: 500;
  padding-inline: 0.7rem;
}
.gls-nav .nav-link:hover { color: var(--gls-ink); }
.gls-nav .nav-link.active { color: var(--gls-gold-2); }
.gls-nav .navbar-toggler { border-color: var(--gls-rule-2); }
.gls-nav .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(194, 147, 63, .35); }

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

.gls-btn, .gls-btn-line, .gls-btn-ivory {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--gls-display); font-weight: 600; font-size: 1rem;
  letter-spacing: 0.01em; text-decoration: none;
  padding: 15px 32px; border: 2px solid transparent; border-radius: 2px;
  transition: background-color .15s, color .15s, border-color .15s;
}
.gls-btn {
  background: var(--gls-berry); color: #fff;
}
.gls-btn:hover { background: var(--gls-berry-2); color: #fff; }
.gls-btn-line { border-color: var(--gls-rule-2); color: var(--gls-ink); }
.gls-btn-line:hover { border-color: var(--gls-ink); color: var(--gls-ink); }
.gls-btn-ivory { background: var(--gls-ivory); color: var(--gls-berry); }
.gls-btn-ivory:hover { background: #fff; color: var(--gls-berry-2); }
.gls-btn-sm { padding: 9px 20px; font-size: 0.92rem; }
.gls-btn-lg { padding: 18px 42px; font-size: 1.08rem; }

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

.gls-sec { padding-block: var(--gls-pad); }
.gls-sec-ivory { background: var(--gls-ivory-2); }
.gls-sec-white { background: #fff; }
.gls-sec-ink { background: var(--gls-ink); }
.gls-sec-ink h2, .gls-sec-ink h3 { color: #fff; }
.gls-sec-ink p, .gls-sec-ink li { color: #d6c9b3; }
.gls-sec-ink .gls-eyebrow { color: var(--gls-gold); }
.gls-rule-top { border-top: 1px solid var(--gls-rule); }

/* the arch: a background panel behind product photography. The picture sits
   on top of it at its own size, so nothing is ever clipped. */
.gls-arch {
  position: relative;
  background: linear-gradient(180deg, var(--gls-ivory-2) 0%, var(--gls-sand) 100%);
  border-radius: var(--gls-arch);
  padding: clamp(22px, 4vw, 46px) clamp(16px, 3vw, 34px);
  display: flex; align-items: flex-end; justify-content: center;
}
.gls-arch-line {
  background: #fff;
  border: 1px solid var(--gls-rule-2);
}
.gls-arch img { position: relative; z-index: 1; }

/* --- hero ---------------------------------------------------------------- */

.gls-hero {
  background:
    linear-gradient(180deg, #fff 0%, var(--gls-ivory) 58%, var(--gls-ivory-2) 100%);
  padding-block: clamp(34px, 5vw, 62px) clamp(40px, 6vw, 76px);
  border-bottom: 1px solid var(--gls-rule);
}
.gls-hero h1 { max-width: 15ch; }
.gls-hero-sub { font-size: 1.1rem; color: var(--gls-soft); max-width: 48ch; }
.gls-hero-art { width: min(100%, 420px); margin-inline: auto; }

.gls-stats { border-top: 1px solid var(--gls-rule-2); }
.gls-stats > div { padding: 16px 4px 0; }
.gls-stats b {
  display: block; font-family: var(--gls-display); font-size: 1.55rem;
  font-weight: 600; color: var(--gls-gold-2); line-height: 1;
}
.gls-stats span { font-size: 0.88rem; color: var(--gls-soft); }

/* --- trust icons --------------------------------------------------------- */

.gls-marks { border-bottom: 1px solid var(--gls-rule); background: #fff; }
.gls-marks figure { margin: 0; text-align: center; }
.gls-marks figcaption {
  margin-top: 8px; font-size: 0.78rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gls-soft);
}

/* --- why choose: gold-ruled cells ---------------------------------------- */

.gls-why { border-top: 2px solid var(--gls-gold); }
.gls-why > div { padding: 28px 0; border-bottom: 1px solid var(--gls-rule); }
.gls-why .gls-num {
  font-size: 0.82rem; letter-spacing: 0.18em; color: var(--gls-gold-2);
  display: block; margin-bottom: 10px;
}
.gls-why h3 { font-size: 1.16rem; margin-bottom: 8px; }
.gls-why p { margin: 0; font-size: 0.99rem; color: var(--gls-soft); }

/* --- spec list ----------------------------------------------------------- */

.gls-spec { list-style: none; margin: 26px 0 0; padding: 0; }
.gls-spec li {
  position: relative; padding: 10px 0 10px 30px;
  border-top: 1px solid var(--gls-rule); font-size: 1rem;
}
.gls-spec li::before {
  content: ""; position: absolute; left: 4px; top: 1.25em;
  width: 12px; height: 1px; background: var(--gls-gold-2);
}

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

.gls-figure { background: #fff; border: 1px solid var(--gls-rule); padding: 14px; }
.gls-figure img { margin-inline: auto; }
.gls-figure figcaption {
  margin-top: 12px; font-size: 0.88rem; color: var(--gls-soft); text-align: center;
}
.gls-steps { counter-reset: glsstep; list-style: none; margin: 0; padding: 0; }
.gls-steps li { counter-increment: glsstep; padding: 20px 0 20px 62px; position: relative; }
.gls-steps li + li { border-top: 1px solid var(--gls-rule); }
.gls-steps li::before {
  content: counter(glsstep);
  position: absolute; left: 0; top: 22px;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--gls-gold); color: var(--gls-gold-2);
  font-family: var(--gls-display); font-weight: 600; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
}
.gls-steps h3 { font-size: 1.1rem; margin-bottom: 4px; }
.gls-steps p { margin: 0; font-size: 0.99rem; color: var(--gls-soft); }

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

.gls-say {
  height: 100%; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--gls-rule); padding: 30px 26px;
  margin: 0;
}
.gls-say-mark {
  font-family: var(--gls-display); font-size: 2.4rem; line-height: 0.6;
  color: var(--gls-bronze); display: block; margin-bottom: 14px;
}
.gls-say blockquote { margin: 0; font-size: 1.01rem; color: var(--gls-ink-2); }
.gls-say blockquote p:last-child { margin-bottom: 0; }
.gls-say figcaption {
  display: flex; align-items: center; gap: 14px;
  margin-top: auto; padding-top: 22px;
}
.gls-say figcaption img {
  width: 54px; height: 54px; border-radius: 50%;
  border: 2px solid var(--gls-sand);
}
.gls-say figcaption b {
  display: block; font-family: var(--gls-display); font-size: 1rem;
  color: var(--gls-ink);
}
.gls-say figcaption small { font-size: 0.85rem; color: var(--gls-soft); }

/* --- pricing shelf ------------------------------------------------------- */

.gls-deal {
  height: 100%; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--gls-rule-2);
  text-align: center; position: relative;
}
.gls-deal-cap {
  background: var(--gls-ivory-2);
  border-bottom: 1px solid var(--gls-rule);
  padding: 26px 20px 20px;
  min-height: 220px;
  display: flex; align-items: center; justify-content: center;
}
/* height-constrained, so the pack shots line up across the three columns
   without any of them being cropped */
.gls-deal-cap img { margin-inline: auto; max-height: 172px; width: auto; }
.gls-deal-body { padding: 26px 22px 30px; display: flex; flex-direction: column; flex: 1; }
.gls-deal h3 { font-size: 1.3rem; margin-bottom: 2px; }
.gls-deal-supply {
  font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gls-soft); margin-bottom: 18px; display: block;
}
.gls-deal-rate {
  font-family: var(--gls-display); font-weight: 600; color: var(--gls-ink);
  font-size: 3.2rem; line-height: 1; display: block;
}
.gls-deal-rate sup { font-size: 1.3rem; top: -1.1em; margin-right: 2px; }
.gls-deal-rate small {
  display: block; font-size: 0.82rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gls-soft); margin-top: 8px;
  font-family: var(--gls-text);
}
.gls-deal-total {
  margin: 16px 0 0; font-size: 0.98rem; color: var(--gls-body);
  padding-top: 14px; border-top: 1px solid var(--gls-rule);
}
.gls-deal ul {
  list-style: none; margin: 14px 0 22px; padding: 0;
  font-size: 0.95rem; color: var(--gls-soft);
}
.gls-deal li { padding: 5px 0; }
.gls-deal .gls-btn, .gls-deal .gls-btn-ivory { margin-top: auto; width: 100%; }
.gls-deal-flag {
  position: absolute; inset-inline: 0; top: 0;
  transform: translateY(-50%);
  font-family: var(--gls-display); font-weight: 600; font-size: 0.74rem;
  letter-spacing: 0.2em; text-transform: uppercase;
}
.gls-deal-flag span {
  background: var(--gls-gold-2); color: #fff; padding: 7px 18px;
  display: inline-block;
}
.gls-deal-pick {
  border-color: var(--gls-gold-2); border-width: 2px;
  box-shadow: 0 24px 60px -46px rgba(36, 28, 18, .8);
}
.gls-deal-pick .gls-deal-cap {
  background: linear-gradient(180deg, var(--gls-ivory-2) 0%, var(--gls-sand) 100%);
}

.gls-gifts img { margin-inline: auto; }
.gls-gifts figcaption {
  margin-top: 10px; font-family: var(--gls-display); font-weight: 600;
  font-size: 0.83rem; color: var(--gls-ink); line-height: 1.3; text-align: center;
}

/* --- supplement facts panel ---------------------------------------------- */

.gls-panel {
  background: #fff; border: 2px solid var(--gls-ink);
  padding: 22px 24px; max-width: 520px;
}
.gls-panel h3 {
  font-size: 1.5rem; margin: 0 0 6px; letter-spacing: -0.03em;
  border-bottom: 8px solid var(--gls-ink); padding-bottom: 6px;
}
.gls-panel-serve { font-size: 0.92rem; color: var(--gls-ink-2); margin: 0; }
.gls-panel table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.gls-panel caption { caption-side: top; }
.gls-panel th, .gls-panel td {
  border-top: 1px solid var(--gls-rule-2); padding: 6px 0;
  font-size: 0.93rem; text-align: right; color: var(--gls-ink-2);
}
.gls-panel th { text-align: left; font-weight: 400; }
.gls-panel thead th {
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gls-soft); border-top: 0; border-bottom: 3px solid var(--gls-ink);
}
.gls-panel tbody tr:first-child th, .gls-panel tbody tr:first-child td { border-top: 0; }
.gls-panel-foot {
  margin: 12px 0 0; font-size: 0.83rem; color: var(--gls-soft);
  border-top: 3px solid var(--gls-ink); padding-top: 10px;
}

/* --- benefits ------------------------------------------------------------ */

.gls-gain {
  height: 100%; padding: 26px 24px;
  background: #fff; border: 1px solid var(--gls-rule);
  border-top: 3px solid var(--gls-gold);
}
.gls-gain h3 { font-size: 1.1rem; margin-bottom: 8px; }
.gls-gain p { margin: 0; font-size: 0.98rem; color: var(--gls-soft); }

/* --- ingredients --------------------------------------------------------- */

.gls-mix { border-top: 1px solid var(--gls-rule-2); }
.gls-mix > div { padding-block: 30px; border-bottom: 1px solid var(--gls-rule); }
.gls-mix-art {
  width: 132px; border-radius: 50% 50% 6px 6px / 40% 40% 3% 3%;
  border: 1px solid var(--gls-rule-2); background: #fff; padding: 6px;
}
.gls-mix h3 { font-size: 1.22rem; margin-bottom: 2px; }
.gls-mix-dose {
  font-family: var(--gls-display); font-size: 0.86rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gls-gold-2); display: block;
  margin-bottom: 10px;
}
.gls-mix p { margin: 0; font-size: 0.99rem; color: var(--gls-soft); }

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

.gls-safe { background: #fff; border: 1px solid var(--gls-rule-2); padding: clamp(26px, 4vw, 48px); }
.gls-safe img { margin-inline: auto; }
.gls-safe-tags {
  display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 20px;
  padding-top: 18px; border-top: 1px solid var(--gls-rule);
  font-size: 0.94rem; color: var(--gls-soft);
}

/* --- FAQ (Bootstrap accordion, restyled) --------------------------------- */

.gls-faq .accordion-item {
  background: transparent; border: 0; border-bottom: 1px solid var(--gls-rule);
}
.gls-faq .accordion-button {
  background: transparent; box-shadow: none;
  font-family: var(--gls-display); font-weight: 600; font-size: 1.06rem;
  color: var(--gls-ink); padding: 22px 44px 22px 0;
}
.gls-faq .accordion-button:not(.collapsed) { color: var(--gls-gold-2); }
.gls-faq .accordion-button::after {
  background-image: none; content: "+"; font-family: var(--gls-display);
  font-size: 1.6rem; font-weight: 400; line-height: 1;
  color: var(--gls-gold-2); width: auto; height: auto; transform: none;
}
.gls-faq .accordion-button:not(.collapsed)::after { content: "\2013"; }
.gls-faq .accordion-button:focus { border-color: transparent; }
.gls-faq .accordion-body {
  padding: 0 0 24px; color: var(--gls-body); max-width: 80ch;
}
.gls-faq .accordion-body p:last-child { margin-bottom: 0; }

/* --- buy band ------------------------------------------------------------ */

.gls-buy {
  background:
    linear-gradient(135deg, var(--gls-gold-2) 0%, var(--gls-bronze) 55%, #6f4d18 100%);
  color: #f7efdf;
  padding-block: var(--gls-pad);
}
.gls-buy h2 { color: #fff; }
.gls-buy p { color: #f0e4cd; }
.gls-buy-art img { margin-inline: auto; }
.gls-buy .gls-btn-line { border-color: rgba(255, 255, 255, .55); color: #fff; }
.gls-buy .gls-btn-line:hover { border-color: #fff; background: rgba(255,255,255,.12); color: #fff; }
.gls-buy-marks img { background: #fff; padding: 6px 10px; }
.gls-buy-marks img.gls-round { border-radius: 50%; padding: 4px; }

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

.gls-page { padding-block: clamp(38px, 5vw, 66px); }
.gls-crumb { font-size: 0.9rem; color: var(--gls-soft); padding-top: 18px; }
.gls-crumb a { color: var(--gls-soft); }
.gls-prose h2 { font-size: 1.6rem; margin: 40px 0 12px; }
.gls-prose h3 { font-size: 1.2rem; margin: 28px 0 8px; }
.gls-prose ul { padding-left: 20px; margin-bottom: 16px; }
.gls-prose li { margin-bottom: 8px; }
.gls-prose > :first-child { margin-top: 0; }
.gls-card {
  background: #fff; border: 1px solid var(--gls-rule-2); padding: 26px 24px;
}
.gls-card h3 { font-size: 1.12rem; margin-bottom: 8px; }
.gls-card p { font-size: 0.95rem; color: var(--gls-soft); }
.gls-card img { margin-inline: auto; }
.gls-post { padding-block: 34px; border-top: 1px solid var(--gls-rule); }
.gls-post:first-of-type { border-top: 0; padding-top: 0; }
.gls-post h2 { font-size: 1.5rem; margin: 0 0 6px; }
.gls-post-date {
  display: block; font-size: 0.8rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gls-soft); margin-bottom: 14px;
}

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

.gls-foot { background: var(--gls-ink); color: #b3a68f; padding-block: 62px 28px; }
.gls-foot h4 {
  font-family: var(--gls-display); font-size: 0.74rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: #fff; margin-bottom: 14px;
}
.gls-foot ul { list-style: none; margin: 0; padding: 0; }
.gls-foot li { margin-bottom: 8px; }
.gls-foot a { color: #b3a68f; text-decoration: none; font-size: 0.95rem; }
.gls-foot a:hover { color: var(--gls-gold); }
.gls-foot p { font-size: 0.95rem; color: #b3a68f; }
.gls-foot-mark {
  font-family: var(--gls-display); font-size: 1.5rem; font-weight: 600;
  color: #fff; display: block; margin-bottom: 14px;
}
.gls-foot-mark span { color: var(--gls-gold); }
.gls-foot-rule { height: 1px; background: rgba(255,255,255,.14); margin: 44px 0 24px; }
.gls-legal p { font-size: 0.86rem; color: #93876f; margin-bottom: 12px; }
.gls-legal .gls-legal-first { color: #c8bca4; font-weight: 700; }

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

.gls-lost { padding-block: clamp(60px, 10vw, 130px); text-align: center; }

/* --- narrow screens ------------------------------------------------------ */

@media (max-width: 575.98px) {
  .gls-hero-acts .gls-btn,
  .gls-hero-acts .gls-btn-line,
  .gls-buy-acts .gls-btn-ivory,
  .gls-buy-acts .gls-btn-line { width: 100%; }
  .gls-deal-flag { position: static; transform: none; margin-bottom: -6px; }
}