/* tonicgreen.us — tgx- design system
   CSS Grid, Flexbox and custom properties. No Bootstrap, no Tailwind, no
   framework, and no JavaScript: the menu and the FAQ are native <details>.

   Palette: the greens family the Tonic Greens brand works in — a deep forest
   base, the bright leaf green of the wordmark, a soft pistachio wash and a
   warm cream ground, with turmeric amber as the single warm accent (the
   curcumin group is the one non-green thing in the formula). No packaging
   artwork was supplied with this job, so these values should be checked
   against the real tub when it arrives; every colour lives in one block
   below, so a correction is a five-line edit. */

:root {
  --tgx-forest: #0F3323;
  --tgx-forest-2: #17472F;
  --tgx-moss: #2C6E4A;
  --tgx-leaf: #5AA64B;
  --tgx-leaf-2: #78C465;
  --tgx-amber: #C98A1E;
  --tgx-amber-2: #8A5D0F;
  --tgx-pistachio: #E8F1E4;
  --tgx-wash: #F3F8F1;
  --tgx-cream: #FBF9F3;
  --tgx-hair: #DCE7D8;
  --tgx-hair-2: #C4D5BF;
  --tgx-body: #465247;
  --tgx-quiet: #627263;
  --tgx-white: #FFFFFF;

  --tgx-pad: clamp(4rem, 8vw, 7.5rem);
  --tgx-gap: clamp(1.4rem, 3vw, 2.6rem);
  --tgx-shell: 1260px;

  --tgx-disp: "Archivo", "Segoe UI", system-ui, sans-serif;
  --tgx-text: "Manrope", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--tgx-text);
  font-size: 19px;
  line-height: 1.7;
  color: var(--tgx-body);
  background: var(--tgx-white);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--tgx-disp); font-weight: 700; letter-spacing: -.035em;
  line-height: 1.04; color: var(--tgx-forest); margin: 0;
}
p { margin: 0 0 1.05rem; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--tgx-moss); }
ul, ol { margin: 0; padding: 0; }

.tgx-skip {
  position: absolute; left: -9999px; top: 0; z-index: 90;
  background: var(--tgx-forest); color: #fff; padding: .7rem 1.2rem;
  text-decoration: none;
}
.tgx-skip:focus { left: 12px; top: 12px; }
:focus-visible { outline: 3px solid var(--tgx-leaf); outline-offset: 3px; }
.tgx-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.tgx-shell {
  width: 100%; max-width: var(--tgx-shell); margin: 0 auto;
  padding-inline: clamp(1.1rem, 4vw, 2.6rem);
}

/* ---------- buttons ---------- */
.tgx-go, .tgx-out {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--tgx-disp); font-weight: 700; font-size: 1rem;
  letter-spacing: -.01em; text-decoration: none;
  padding: 1.05rem 2.2rem; border-radius: 999px;
  transition: background .16s, color .16s, border-color .16s;
}
.tgx-go {
  background: var(--tgx-leaf); color: #08240F;
  border: 2px solid var(--tgx-leaf);
}
.tgx-go:hover {
  background: var(--tgx-leaf-2); border-color: var(--tgx-leaf-2); color: #08240F;
}
.tgx-out {
  background: transparent; color: var(--tgx-forest);
  border: 2px solid var(--tgx-hair-2);
}
.tgx-out:hover { border-color: var(--tgx-forest); color: var(--tgx-forest); }
.tgx-go.wide, .tgx-out.wide { width: 100%; }
.tgx-go.big { padding: 1.2rem 2.9rem; font-size: 1.08rem; }
.tgx-go.sm { padding: .6rem 1.3rem; font-size: .92rem; }
.tgx-dark .tgx-out { color: #fff; border-color: rgba(255,255,255,.45); }
.tgx-dark .tgx-out:hover { background: #fff; color: var(--tgx-forest); border-color: #fff; }

/* ---------- header ---------- */
.tgx-strip {
  background: var(--tgx-forest); color: #BFD9C6;
  font-size: .82rem; padding: .55rem 0;
}
.tgx-strip .tgx-shell {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.9rem;
}
.tgx-strip b { color: #fff; font-weight: 700; }
.tgx-bar { background: #fff; border-bottom: 1px solid var(--tgx-hair); }
.tgx-bar .tgx-shell {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .75rem;
}
.tgx-logo {
  font-family: var(--tgx-disp); font-weight: 800; font-size: 1.42rem;
  letter-spacing: -.05em; color: var(--tgx-forest); text-decoration: none;
}
.tgx-logo span { color: var(--tgx-moss); }
.tgx-nav { display: flex; align-items: center; gap: .05rem; list-style: none; }
.tgx-nav a {
  display: block; padding: .45rem .58rem; font-size: .95rem;
  color: var(--tgx-quiet); text-decoration: none;
}
.tgx-nav a:hover { color: var(--tgx-forest); }
.tgx-nav a.on { color: var(--tgx-forest); font-weight: 700; }
.tgx-burger { display: none; }
@media (max-width: 1120px) {
  .tgx-nav { display: none; }
  .tgx-burger { display: block; }
  .tgx-burger > summary {
    list-style: none; cursor: pointer; width: 46px; height: 42px;
    border: 2px solid var(--tgx-hair-2); border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--tgx-disp); font-weight: 700; font-size: .76rem;
    letter-spacing: .08em; text-transform: uppercase; color: var(--tgx-forest);
  }
  .tgx-burger > summary::-webkit-details-marker { display: none; }
  .tgx-burger:not([open]) .tgx-sheet { display: none; }
  .tgx-sheet {
    position: absolute; left: 0; right: 0; background: #fff; z-index: 39;
    border-bottom: 1px solid var(--tgx-hair); padding: .6rem 0 1.3rem;
  }
  .tgx-sheet .tgx-shell { display: grid; gap: .05rem; }
  .tgx-sheet a {
    padding: .55rem 0; font-size: 1.04rem; color: var(--tgx-body);
    text-decoration: none; border-bottom: 1px solid var(--tgx-hair);
  }
  .tgx-sheet .tgx-go { margin-top: 1rem; }
}

/* ---------- section shells ---------- */
.tgx-sec { padding-block: var(--tgx-pad); }
.tgx-sec.slim { padding-block: clamp(2.4rem, 5vw, 3.6rem); }
.tgx-wash { background: var(--tgx-wash); }
.tgx-pist { background: var(--tgx-pistachio); }
.tgx-creamy { background: var(--tgx-cream); }
.tgx-dark { background: var(--tgx-forest); color: #C3D9C9; }
.tgx-dark h2, .tgx-dark h3 { color: #fff; }

.tgx-tag {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--tgx-disp); font-weight: 700; font-size: .74rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--tgx-moss);
  margin-bottom: 1rem;
}
.tgx-tag::before {
  content: ""; width: 22px; height: 2px; background: var(--tgx-leaf);
}
.tgx-dark .tgx-tag { color: var(--tgx-leaf-2); }
.tgx-h2 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
.tgx-sub {
  margin: 1.2rem 0 0; font-size: 1.12rem; color: var(--tgx-quiet);
  max-width: 56ch;
}
.tgx-dark .tgx-sub { color: #A9C4B1; }
.tgx-head { max-width: 720px; margin-bottom: 3rem; }
.tgx-head.mid { margin-inline: auto; text-align: center; }
.tgx-head.mid .tgx-tag { justify-content: center; }
.tgx-head.mid .tgx-sub { margin-inline: auto; }

/* ---------- hero: product at the centre, type wrapped around it ------- */
.tgx-hero {
  background:
    radial-gradient(70% 60% at 50% 0%, var(--tgx-pistachio) 0%, rgba(232,241,228,0) 72%),
    var(--tgx-white);
  padding-block: clamp(2.6rem, 5vw, 4.2rem) 0;
  text-align: center;
}
.tgx-hero-flag {
  display: inline-flex; align-items: center; gap: .55rem;
  border: 2px solid var(--tgx-hair-2); border-radius: 999px;
  padding: .4rem 1.15rem; font-family: var(--tgx-disp); font-weight: 700;
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tgx-moss); margin-bottom: 1.8rem;
}
.tgx-hero h1 {
  font-size: clamp(2.8rem, 8vw, 6.4rem); letter-spacing: -.05em;
  max-width: 16ch; margin-inline: auto;
}
.tgx-hero h1 em { font-style: normal; color: var(--tgx-leaf); }
.tgx-hero-lede {
  margin: 1.6rem auto 0; font-size: 1.2rem; max-width: 52ch;
  color: var(--tgx-quiet);
}
.tgx-hero-acts {
  display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center;
  margin-top: 2rem;
}
.tgx-hero-fine { margin: 1.3rem 0 0; font-size: .95rem; color: var(--tgx-quiet); }
.tgx-hero-shot { margin-top: 2.6rem; position: relative; }
.tgx-hero-shot img {
  width: min(100%, 400px); margin-inline: auto; position: relative; z-index: 1;
}
.tgx-hero-disc {
  position: absolute; left: 50%; bottom: 8%; width: min(76vw, 520px);
  aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(90,166,75,.22) 0%, rgba(90,166,75,0) 70%);
}
.tgx-counts {
  background: var(--tgx-forest); color: #fff;
}
.tgx-counts .tgx-shell {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.4rem; padding-block: 2.2rem; text-align: center;
}
.tgx-counts b {
  display: block; font-family: var(--tgx-disp); font-weight: 800;
  font-size: 2rem; line-height: 1.05;
}
.tgx-counts span { font-size: .94rem; color: #A9C4B1; }
@media (max-width: 760px) {
  .tgx-counts .tgx-shell { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- why: offset cards ---------- */
.tgx-reasons {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
}
.tgx-reason {
  background: #fff; border: 1px solid var(--tgx-hair); border-radius: 18px;
  padding: 1.9rem 1.7rem; height: 100%;
}
.tgx-reason .n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--tgx-pistachio); color: var(--tgx-moss);
  font-family: var(--tgx-disp); font-weight: 800; font-size: .9rem;
  margin-bottom: 1.1rem;
}
.tgx-reason h3 { font-size: 1.16rem; margin-bottom: .5rem; }
.tgx-reason p { margin: 0; font-size: 1rem; }
@media (max-width: 1000px) { .tgx-reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tgx-reasons { grid-template-columns: 1fr; } }

/* ---------- asymmetric split rows ---------- */
.tgx-split { display: grid; gap: var(--tgx-gap); align-items: center; }
.tgx-split.wide-left { grid-template-columns: 1.25fr .75fr; }
.tgx-split.wide-right { grid-template-columns: .75fr 1.25fr; }
.tgx-split.even { grid-template-columns: 1fr 1fr; }
@media (max-width: 920px) {
  .tgx-split.wide-left, .tgx-split.wide-right, .tgx-split.even {
    grid-template-columns: 1fr;
  }
  .tgx-split .flip { order: -1; }
}
.tgx-frame {
  background: var(--tgx-pistachio); border-radius: 22px;
  padding: clamp(1.4rem, 3vw, 2.4rem);
}
.tgx-frame.plain { background: var(--tgx-wash); }
.tgx-frame img { border-radius: 14px; margin-inline: auto; }
.tgx-dark .tgx-frame { background: rgba(255, 255, 255, .06); }
.tgx-ticks { list-style: none; margin-top: 1.5rem; }
.tgx-ticks li {
  position: relative; padding-left: 1.9rem; margin-bottom: .7rem;
  font-size: 1.02rem;
}
.tgx-ticks li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 11px; height: 11px; border-radius: 3px; background: var(--tgx-leaf);
}
.tgx-dark .tgx-ticks li { color: #C3D9C9; }

/* ---------- how it works: numbered rail ---------- */
.tgx-flow { list-style: none; counter-reset: tgxflow; display: grid; gap: 1.3rem; }
.tgx-flow li {
  display: grid; grid-template-columns: 3rem 1fr; gap: 1.3rem;
  background: #fff; border: 1px solid var(--tgx-hair); border-radius: 16px;
  padding: 1.4rem 1.5rem; align-items: start;
}
.tgx-flow li::before {
  counter-increment: tgxflow; content: counter(tgxflow);
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--tgx-forest); color: #fff;
  font-family: var(--tgx-disp); font-weight: 800; font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center;
}
.tgx-flow h3 { font-size: 1.14rem; margin-bottom: .35rem; }
.tgx-flow p { margin: 0; font-size: 1.01rem; }

/* ---------- reviews ---------- */
.tgx-voices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.tgx-voice {
  background: #fff; border: 1px solid var(--tgx-hair); border-radius: 20px;
  padding: 2rem 1.8rem; display: flex; flex-direction: column; height: 100%;
}
.tgx-voice blockquote {
  margin: 0; font-family: var(--tgx-disp); font-weight: 600; font-size: 1.1rem;
  line-height: 1.48; color: var(--tgx-forest); letter-spacing: -.02em;
}
.tgx-voice p { margin: 1rem 0 0; font-size: .99rem; }
.tgx-voice-who {
  display: flex; align-items: center; gap: .85rem; margin-top: auto;
  padding-top: 1.6rem;
}
.tgx-voice-who img { width: 48px; border-radius: 50%; }
.tgx-voice-who b {
  display: block; font-family: var(--tgx-disp); font-weight: 700;
  font-size: .99rem; color: var(--tgx-forest);
}
.tgx-voice-who small { font-size: .89rem; color: var(--tgx-quiet); }
.tgx-voice-note {
  margin: 2.2rem auto 0; max-width: 68ch; text-align: center;
  font-size: .97rem; color: var(--tgx-quiet);
}
@media (max-width: 980px) { .tgx-voices { grid-template-columns: 1fr; } }

/* ---------- packages: one feature panel + two compact rows ---------- */
.tgx-deals { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1.6rem; }
@media (max-width: 980px) { .tgx-deals { grid-template-columns: 1fr; } }
.tgx-star {
  background: var(--tgx-forest); color: #C3D9C9; border-radius: 24px;
  padding: clamp(1.8rem, 3.5vw, 2.8rem); display: flex; flex-direction: column;
}
.tgx-star-flag {
  align-self: flex-start; background: var(--tgx-amber); color: #2A1E02;
  font-family: var(--tgx-disp); font-weight: 800; font-size: .7rem;
  letter-spacing: .16em; text-transform: uppercase;
  padding: .3rem .85rem; border-radius: 999px;
}
.tgx-star img { margin: 1.6rem auto; width: min(100%, 320px); }
.tgx-star h3 { font-size: 1.9rem; color: #fff; margin-bottom: .3rem; }
.tgx-star .supply { margin: 0 0 1.4rem; color: #A9C4B1; font-size: 1rem; }
.tgx-star .rate {
  display: flex; align-items: baseline; gap: .6rem; margin-bottom: .4rem;
}
.tgx-star .rate b {
  font-family: var(--tgx-disp); font-weight: 800; font-size: 3.2rem;
  color: #fff; line-height: 1;
}
.tgx-star .rate span { color: #A9C4B1; }
.tgx-star .total { margin: 0 0 1.4rem; color: #fff; font-weight: 700; }
.tgx-star ul { list-style: none; margin-bottom: 1.8rem; }
.tgx-star li {
  position: relative; padding-left: 1.6rem; margin-bottom: .5rem;
  font-size: .99rem; color: #C3D9C9;
}
.tgx-star li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 9px;
  border-radius: 2px; background: var(--tgx-leaf-2);
}
.tgx-star .tgx-go { margin-top: auto; }

.tgx-minor { display: grid; gap: 1.6rem; align-content: start; }
.tgx-row {
  background: #fff; border: 1px solid var(--tgx-hair); border-radius: 20px;
  padding: 1.6rem; display: grid;
  grid-template-columns: 118px 1fr auto; gap: 1.4rem; align-items: center;
}
.tgx-row img { max-height: 108px; width: auto; margin-inline: auto; }
.tgx-row h3 { font-size: 1.24rem; margin-bottom: .2rem; }
.tgx-row p { margin: 0; font-size: .96rem; }
.tgx-row .rate {
  font-family: var(--tgx-disp); font-weight: 800; font-size: 1.7rem;
  color: var(--tgx-forest); display: block; line-height: 1.1;
}
.tgx-row .tgx-out { padding: .8rem 1.4rem; white-space: nowrap; }
@media (max-width: 560px) {
  .tgx-row { grid-template-columns: 1fr; text-align: center; }
  .tgx-row img { max-height: 130px; }
}
.tgx-deal-note {
  margin: 2rem auto 0; max-width: 74ch; text-align: center;
  font-size: .96rem; color: var(--tgx-quiet);
}

/* ---------- science ---------- */
.tgx-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem; }
.tgx-notes > div { border-top: 3px solid var(--tgx-leaf); padding-top: 1.2rem; }
.tgx-notes h3 { font-size: 1.14rem; margin-bottom: .5rem; }
.tgx-notes p { margin: 0; font-size: 1.01rem; }
@media (max-width: 900px) { .tgx-notes { grid-template-columns: 1fr; gap: 1.8rem; } }

/* ---------- benefits: asymmetric pairs ---------- */
.tgx-gains { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.3rem; }
.tgx-gain {
  background: #fff; border: 1px solid var(--tgx-hair); border-radius: 18px;
  padding: 1.7rem 1.6rem;
}
.tgx-gain.big { grid-column: span 4; }
.tgx-gain.small { grid-column: span 2; }
.tgx-gain h3 { font-size: 1.14rem; margin-bottom: .45rem; }
.tgx-gain p { margin: 0; font-size: 1rem; }
@media (max-width: 980px) {
  .tgx-gains { grid-template-columns: 1fr; }
  .tgx-gain.big, .tgx-gain.small { grid-column: auto; }
}

/* ---------- ingredients: layered groups ---------- */
.tgx-layers { display: grid; gap: 1.2rem; }
.tgx-layer {
  background: #fff; border: 1px solid var(--tgx-hair); border-radius: 20px;
  padding: 1.7rem 1.8rem;
  display: grid; grid-template-columns: 190px 1fr; gap: 1.6rem;
  align-items: start;
}
.tgx-layer .lead { }
.tgx-layer .idx {
  display: block; font-family: var(--tgx-disp); font-weight: 800;
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--tgx-amber-2); margin-bottom: .4rem;
}
.tgx-layer h3 { font-size: 1.2rem; }
.tgx-layer p { margin: .45rem 0 0; font-size: .98rem; }
.tgx-chips { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; }
.tgx-chips li {
  background: var(--tgx-wash); border: 1px solid var(--tgx-hair);
  border-radius: 999px; padding: .3rem .85rem; font-size: .93rem;
  color: var(--tgx-body);
}
.tgx-layer a { color: var(--tgx-moss); }
@media (max-width: 820px) { .tgx-layer { grid-template-columns: 1fr; gap: 1rem; } }

/* ---------- guarantee ---------- */
.tgx-vow {
  background: var(--tgx-cream); border-radius: 26px;
  padding: clamp(1.8rem, 4vw, 3.2rem);
  display: grid; grid-template-columns: 230px 1fr; gap: clamp(1.6rem, 4vw, 3rem);
  align-items: center;
}
.tgx-vow img { width: 200px; margin-inline: auto; }
@media (max-width: 760px) { .tgx-vow { grid-template-columns: 1fr; text-align: center; } }

/* ---------- FAQ ---------- */
.tgx-faq { max-width: 880px; margin-inline: auto; display: grid; gap: .7rem; }
.tgx-ask {
  background: #fff; border: 1px solid var(--tgx-hair); border-radius: 16px;
}
.tgx-ask > summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 1.2rem 3.2rem 1.2rem 1.5rem;
  font-family: var(--tgx-disp); font-weight: 700; font-size: 1.08rem;
  color: var(--tgx-forest);
}
.tgx-ask > summary::-webkit-details-marker { display: none; }
.tgx-ask > summary::after {
  content: ""; position: absolute; right: 1.5rem; top: 50%;
  width: 11px; height: 11px; margin-top: -8px;
  border-right: 2px solid var(--tgx-leaf); border-bottom: 2px solid var(--tgx-leaf);
  transform: rotate(45deg); transition: transform .16s;
}
.tgx-ask[open] > summary::after { transform: rotate(-135deg); margin-top: -3px; }
.tgx-ask[open] { border-color: var(--tgx-leaf); }
.tgx-ans { padding: 0 1.5rem 1.4rem; }
.tgx-ans p { margin: 0; font-size: 1.02rem; }

/* ---------- closing CTA ---------- */
.tgx-last {
  background:
    radial-gradient(60% 90% at 85% 30%, #1D5B39 0%, rgba(29,91,57,0) 66%),
    var(--tgx-forest);
  color: #C3D9C9;
}
.tgx-last h2 { font-size: clamp(2.2rem, 4.6vw, 3.5rem); color: #fff; }
.tgx-last p { color: #A9C4B1; font-size: 1.12rem; }
.tgx-last-shot { position: relative; display: flex; justify-content: center; }
.tgx-last-shot img { width: min(100%, 380px); position: relative; z-index: 1; }
.tgx-last-halo {
  position: absolute; left: 50%; top: 50%;
  width: min(80vw, 420px); aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(120,196,101,.30) 0%, rgba(120,196,101,0) 70%);
}
.tgx-last-acts { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.9rem; }
.tgx-last-seals {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  margin-top: 2.2rem;
}
.tgx-last-seals img {
  width: 92px; background: #fff; border-radius: 10px; padding: 7px;
}
.tgx-last-seals img.round { width: 70px; border-radius: 50%; }

/* ---------- trust strip ---------- */
.tgx-trust {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(1.4rem, 4vw, 2.8rem);
}
.tgx-trust img { width: 110px; }
.tgx-trust p {
  width: 100%; text-align: center; margin: 0; font-size: .94rem;
  color: var(--tgx-quiet);
}

/* ---------- inner pages ---------- */
.tgx-crumb {
  background: var(--tgx-wash); border-bottom: 1px solid var(--tgx-hair);
  padding-block: .85rem; font-size: .93rem; color: var(--tgx-quiet);
}
.tgx-crumb a { color: var(--tgx-quiet); text-decoration: none; }
.tgx-crumb a:hover { color: var(--tgx-forest); }
.tgx-crumb i { font-style: normal; padding-inline: .5rem; color: var(--tgx-quiet); }
.tgx-mast { background: var(--tgx-forest); padding-block: clamp(2.8rem, 6vw, 4rem); }
.tgx-mast h1 { font-size: clamp(2.1rem, 4.6vw, 3.2rem); color: #fff; max-width: 20ch; }
.tgx-mast p { margin: 1.1rem 0 0; color: #A9C4B1; max-width: 62ch; font-size: 1.1rem; }
.tgx-read { max-width: 750px; min-width: 0; }
.tgx-read h2 { font-size: 1.8rem; margin: 2.6rem 0 .85rem; }
.tgx-read h3 { font-size: 1.28rem; margin: 2rem 0 .6rem; }
.tgx-read ul { padding-left: 1.2rem; list-style: disc; margin-bottom: 1.05rem; }
.tgx-read li { margin-bottom: .45rem; }
.tgx-entry { border-top: 1px solid var(--tgx-hair); padding-top: 2.4rem; margin-top: 2.8rem; }
.tgx-entry:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.tgx-entry-tag {
  display: block; font-family: var(--tgx-disp); font-weight: 800;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--tgx-amber-2); margin-bottom: .5rem;
}
.tgx-side {
  background: var(--tgx-pistachio); border-radius: 20px; padding: 1.9rem 1.7rem;
  position: sticky; top: 20px;
}
.tgx-side img { width: 118px; margin-inline: auto; margin-bottom: 1.1rem; }
.tgx-side h3 { font-size: 1.14rem; margin-bottom: .55rem; }
.tgx-side p { font-size: .97rem; }
.tgx-card {
  background: #fff; border: 1px solid var(--tgx-hair); border-radius: 16px;
  padding: 1.5rem; height: 100%;
}
.tgx-card h3 { font-size: 1.12rem; margin-bottom: .4rem; }
.tgx-card p { margin: 0; font-size: .98rem; }
.tgx-fine { font-size: .95rem; color: var(--tgx-quiet); }
.tgx-cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
@media (max-width: 800px) { .tgx-cols3 { grid-template-columns: 1fr; } }
.tgx-aside-grid { display: grid; grid-template-columns: 1.7fr .9fr; gap: clamp(1.6rem, 4vw, 3rem); }
@media (max-width: 920px) {
  .tgx-aside-grid { grid-template-columns: 1fr; }
  .tgx-side { position: static; margin-top: 2.4rem; }
}

/* ---------- footer ---------- */
.tgx-foot { background: var(--tgx-forest); color: #A9C4B1; padding-block: 4rem 2.2rem; }
.tgx-foot-grid { display: grid; grid-template-columns: 1.4fr 2fr; gap: 2.6rem; }
.tgx-foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.8rem; }
@media (max-width: 900px) {
  .tgx-foot-grid { grid-template-columns: 1fr; }
  .tgx-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tgx-foot-logo {
  font-family: var(--tgx-disp); font-weight: 800; font-size: 1.5rem;
  color: #fff; letter-spacing: -.05em; display: block; margin-bottom: .9rem;
}
.tgx-foot-logo span { color: var(--tgx-leaf-2); }
.tgx-foot p { font-size: .96rem; color: #A9C4B1; max-width: 40ch; }
.tgx-foot h4 {
  font-family: var(--tgx-disp); font-size: .74rem; letter-spacing: .2em;
  text-transform: uppercase; color: #fff; margin-bottom: .9rem; font-weight: 800;
}
.tgx-foot ul { list-style: none; }
.tgx-foot ul li { margin-bottom: .45rem; }
.tgx-foot ul a { color: #A9C4B1; text-decoration: none; font-size: .96rem; }
.tgx-foot ul a:hover { color: #fff; }
.tgx-foot-hr { height: 1px; background: rgba(255,255,255,.14); margin: 2.6rem 0 1.8rem; }
.tgx-legal p { font-size: .89rem; color: #9CB6A4; margin-bottom: .75rem; }
.tgx-legal b { color: #CFE3D4; }
.tgx-foot-pay img { width: 175px; margin-top: 1.4rem; }