/* ==========================================================================
   GUIDE — editorial design system for Flor Bario's educational library
   ==========================================================================

   Loaded ONLY by guide pages, after styles.css. The global header, footer,
   nav and buttons keep coming from styles.css; everything here is namespaced
   under .guide so it can never leak into the rest of the site.

   The palette below is the Instagram campaign's palette (warm mocha, dusty
   rose, cream) rather than the site's berry/ivory. That is deliberate: a
   reader arriving from the carousel should feel they landed in the same
   world. Brand continuity is kept through the shared typefaces (Fraunces /
   Manrope), the shared chrome, and --g-accent, which is the site's berry.

   To add a new guide: reuse these .g-* components. Nothing here is specific
   to the hydration topic.
   ========================================================================== */

.guide {
  /* Surfaces */
  --g-sand: #f7efe7;
  --g-sand-deep: #f1e4d9;
  --g-paper: #fffaf5;
  --g-mocha: #6d5a52;
  --g-mocha-deep: #4e403a;

  /* Accents */
  --g-rose: #f0c9c7;
  --g-rose-soft: #fae4e1;
  --g-rose-line: #e5b3b0;
  /* Deeper rose for rose-coloured *text* (numerals, counters). The pale
     --g-rose-line is fine for rules and borders but only reaches 1.8:1 as
     type; this clears the 3:1 bar for large text. */
  --g-numeral: #bf7b76;
  --g-accent: var(--color-berry);
  --g-gold: #b08a4a;

  /* Ink — chocolate rather than the site's plum-black */
  --g-ink: #3b2f2a;
  --g-ink-70: rgba(59, 47, 42, 0.78);
  --g-ink-55: rgba(59, 47, 42, 0.62);
  --g-line: rgba(59, 47, 42, 0.14);
  --g-line-soft: rgba(59, 47, 42, 0.08);

  /* Semantic */
  --g-warn: #9a3412;
  --g-warn-bg: #fdf0e7;
  --g-ok: #2e6b52;
  --g-ok-bg: #eaf3ee;

  /* Rhythm */
  --g-gap: clamp(3.25rem, 2.5rem + 3.6vw, 6rem);
  --g-radius: 20px;
  --g-radius-lg: 28px;

  background: var(--g-sand);
  color: var(--g-ink);
}

/* --------------------------------------------------------------- primitives */

.g-wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--space-page);
}

.g-wrap--narrow { max-width: 760px; }

.g-section { padding-block: var(--g-gap); }

.g-section--paper { background: var(--g-paper); }
.g-section--deep {
  background: var(--g-mocha);
  color: #f6ece4;
}

/* Readable measure for running text. 66ch keeps mobile lines comfortable
   and stops desktop paragraphs from turning into newspaper columns. */
.g-prose { max-width: 66ch; }
.g-prose > * + * { margin-top: 1.1em; }

.g-prose p,
.g-prose li {
  font-size: var(--type-body);
  line-height: 1.72;
  color: var(--g-ink-70);
}

.g-prose strong { color: var(--g-ink); font-weight: 600; }

.g-eyebrow {
  /* Also used as a <span> inside the hero <h1>, where it must break onto
     its own line instead of running into the headline. */
  display: block;
  font-family: var(--font-body);
  font-size: var(--type-label); /* 12.5px — the site's label token */
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--g-accent);
  margin: 0 0 0.9rem;
}

.g-section--deep .g-eyebrow { color: var(--g-rose); }

.guide h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.85rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--g-ink);
  margin: 0 0 0.75rem;
}

.g-section--deep h2 { color: #fdf6ef; }

.guide h3 {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
  line-height: 1.25;
  font-weight: 600;
  color: var(--g-ink);
  margin: 0 0 0.5rem;
}

.guide h4 {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--g-ink);
  margin: 0 0 0.4rem;
}

.g-lede {
  font-size: var(--type-lead);
  line-height: 1.6;
  color: var(--g-ink-70);
}

.g-section-intro { max-width: 60ch; margin-bottom: 2.5rem; }

/* A hairline flourish used to open major sections. */
.g-rule {
  width: 72px;
  height: 5px;
  border-radius: 3px;
  background: var(--g-rose-line);
  margin: 0 0 1.5rem;
}

/* ------------------------------------------------------- reading progress */

.g-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--g-accent);
  z-index: 1200;
  pointer-events: none;
}

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

.g-hero {
  background:
    radial-gradient(120% 90% at 85% 0%, #f3e2d6 0%, rgba(243, 226, 214, 0) 60%),
    var(--g-sand);
  padding-block: clamp(2.25rem, 1.6rem + 3vw, 4.5rem) var(--g-gap);
  overflow: hidden;
}

.g-hero-grid { display: grid; gap: clamp(1.75rem, 1.2rem + 2.4vw, 3.5rem); }

.g-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 1.5rem + 3.6vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--g-ink);
  margin: 0 0 1rem;
  text-wrap: balance;
}

.g-hero-lede {
  font-size: var(--type-lead);
  line-height: 1.6;
  color: var(--g-ink-70);
  max-width: 44ch;
  margin: 0 0 1.75rem;
}

.g-hero-media {
  position: relative;
  border-radius: var(--g-radius-lg);
  overflow: hidden;
  background: var(--g-sand-deep);
  box-shadow: 0 30px 70px -45px rgba(59, 47, 42, 0.6);
}

.g-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}

/* Byline sits directly under the title block — authorship is part of the
   credibility promise, not a footnote. */
.g-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding-top: 1.5rem;
  margin-top: 1.5rem;
  border-top: 1px solid var(--g-line);
  font-size: 0.875rem;
  color: var(--g-ink-55);
}

.g-byline strong { color: var(--g-ink); font-weight: 600; }
.g-byline .g-dot { color: var(--g-ink-40); }

.g-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.g-hero-actions .cta-button { white-space: nowrap; }

.g-free-note {
  font-size: 0.875rem;
  color: var(--g-ink-55);
  margin: 1rem 0 0;
}

/* A courteous note for visitors whose site language is English. */
.g-lang-note {
  background: var(--g-rose-soft);
  border: 1px solid var(--g-rose-line);
  border-radius: 14px;
  padding: 0.85rem 1.1rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--g-ink-70);
  margin-bottom: 1.75rem;
}

.g-lang-note a { color: var(--g-accent); font-weight: 600; }

/* ------------------------------------------------------------- index card */

.g-toc {
  background: var(--g-paper);
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius);
  padding: clamp(1.35rem, 1rem + 1.4vw, 2rem);
}

.g-toc h2 {
  font-size: 1.05rem;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
}

.g-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
  counter-reset: toc;
}

.g-toc li { counter-increment: toc; }

.g-toc a {
  display: flex;
  gap: 0.85rem;
  align-items: baseline;
  padding: 0.6rem 0.25rem;
  border-radius: 8px;
  color: var(--g-ink-70);
  font-size: 0.975rem;
  line-height: 1.4;
  text-decoration: none;
  min-height: 44px;
  align-content: center;
}

.g-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--g-numeral);
  font-weight: 600;
  flex: none;
}

.g-toc a:hover,
.g-toc a:focus-visible { color: var(--g-accent); background: var(--g-rose-soft); }

/* ---------------------------------------------------------------- habits */

.g-habits { display: grid; gap: clamp(1.25rem, 0.9rem + 1.5vw, 2rem); }

.g-habit {
  background: var(--g-paper);
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius-lg);
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.75rem);
  scroll-margin-top: calc(var(--header-height) + 16px);
}

.g-habit-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.g-habit-num {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 1.6rem + 2.2vw, 3.25rem);
  font-weight: 600;
  line-height: 0.85;
  color: var(--g-numeral);
  flex: none;
  font-variant-numeric: lining-nums;
}

.g-habit-head h3 {
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.85rem);
  margin: 0;
  padding-top: 0.1em;
}

/* Small tagged blocks used inside a habit: mechanism, practice, caution. */
.g-tag-block {
  border-left: 3px solid var(--g-rose-line);
  padding: 0.15rem 0 0.15rem 1.1rem;
  margin-top: 1.5rem;
}

.g-tag-block > h4 {
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--g-accent);
  margin-bottom: 0.45rem;
}

.g-tag-block p { margin: 0; font-size: var(--type-body); line-height: 1.7; color: var(--g-ink-70); }

/* ------------------------------------------------------------- callouts */

.g-callout {
  border-radius: var(--g-radius);
  padding: clamp(1.15rem, 0.9rem + 1vw, 1.65rem);
  margin-top: 1.75rem;
  border: 1px solid var(--g-line);
  background: var(--g-sand);
}

.g-callout > :last-child { margin-bottom: 0; }

.g-callout h4 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.g-callout p {
  margin: 0;
  font-size: 0.975rem;
  line-height: 1.65;
  color: var(--g-ink-70);
}

.g-callout p + p { margin-top: 0.7rem; }

.g-callout--science {
  background: linear-gradient(180deg, #f4edf7 0%, #f7f1f9 100%);
  border-color: #e0d2e8;
}

.g-callout--warning {
  background: var(--g-warn-bg);
  border-color: #f0c9ab;
}

.g-callout--warning h4 { color: var(--g-warn); }

.g-callout--note { background: var(--g-rose-soft); border-color: var(--g-rose-line); }

/* -------------------------------------------------------- do / don't lists */

.g-dual { display: grid; gap: 1rem; margin-top: 1.75rem; }

.g-list-card {
  border-radius: var(--g-radius);
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--g-line);
}

.g-list-card--ok { background: var(--g-ok-bg); border-color: #c5ddd0; }
.g-list-card--no { background: var(--g-warn-bg); border-color: #f0c9ab; }

.g-list-card h4 {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.g-list-card--ok h4 { color: var(--g-ok); }
.g-list-card--no h4 { color: var(--g-warn); }

.g-list-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }

.g-list-card li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--g-ink-70);
}

.g-list-card li::before {
  position: absolute;
  left: 0;
  top: -0.05em;
  font-weight: 700;
  font-size: 0.95rem;
}

.g-list-card--ok li::before { content: "✓"; color: var(--g-ok); }
.g-list-card--no li::before { content: "✕"; color: var(--g-warn); }

/* ------------------------------------------------------------- pull quote */

.g-pullquote {
  margin: 0;
  padding: clamp(1.75rem, 1.3rem + 2vw, 3rem);
  background: var(--g-mocha);
  color: #fdf6ef;
  border-radius: var(--g-radius-lg);
  text-align: center;
}

.g-pullquote p {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.05rem + 1.3vw, 2.1rem);
  line-height: 1.28;
  font-weight: 500;
  margin: 0;
  text-wrap: balance;
}

/* --------------------------------------------------------- inline CTA */

/* A mid-article offer, placed where the content has just earned it. Styled
   as an editorial aside rather than a banner so it reads as the next
   sentence of the argument, not as an ad break. Reusable by any guide. */
.g-inline-cta {
  background: var(--g-rose-soft);
  border: 1px solid var(--g-rose-line);
  border-radius: var(--g-radius-lg);
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
  text-align: center;
}

.g-inline-cta h3 {
  font-size: clamp(1.25rem, 1.08rem + 0.8vw, 1.65rem);
  margin-bottom: 0.65rem;
  text-wrap: balance;
}

.g-inline-cta p {
  font-size: var(--type-body);
  line-height: 1.65;
  color: var(--g-ink-70);
  max-width: 48ch;
  margin: 0 auto 1.5rem;
}

.g-inline-cta .cta-button { margin: 0 auto; }

.g-cta-reassure {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--g-ink-55);
  margin: 0.9rem 0 0;
}

.g-inline-cta .g-cta-reassure { max-width: 42ch; margin-inline: auto; }

/* Quiet second option. The session is the primary ask; the monthly
   programme is application-based, so it never competes as a button. */
.g-cta-alt-wrap {
  margin: 1.25rem 0 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--g-ink-55);
}

/* Inline (not inline-block) so a wrapped link underlines each line rather
   than drawing one full-width rule that reads as a divider. */
.g-cta-alt {
  color: var(--g-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.g-cta-alt:hover,
.g-cta-alt:focus-visible { color: var(--g-ink); }

/* ------------------------------------------------------------ info cards */

.g-cards { display: grid; gap: 1rem; }

.g-card {
  background: var(--g-paper);
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius);
  padding: 1.4rem 1.5rem;
}

.g-card > :last-child { margin-bottom: 0; }

.g-card p { font-size: 0.975rem; line-height: 1.65; color: var(--g-ink-70); margin: 0; }

.g-card-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--g-rose-soft);
  color: var(--g-accent);
  margin-bottom: 0.9rem;
}

.g-card-icon svg { width: 20px; height: 20px; }

/* -------------------------------------------------------------- diagrams */

.g-figure { margin: 2rem 0 0; }

.g-figure svg { display: block; width: 100%; height: auto; }

.g-figure-frame {
  background: var(--g-paper);
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius);
  padding: clamp(1.1rem, 0.85rem + 1.1vw, 1.9rem);
}

/* Diagram labels are authored as HTML, never as <text> inside a scaled
   viewBox — in there a 12px label renders at ~6px on a 375px phone. */
.g-diagram-svg { max-width: 420px; margin-inline: auto; }

.g-diagram-cap {
  text-align: center;
  text-wrap: balance;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--cap, var(--g-ink-70));
  margin: 0 0 0.75rem;
}

.g-diagram-cap--bottom { margin: 0.75rem 0 0; }

/* Inline so the arrow stays glued to the first word when the label wraps. */
.g-diagram-cap span[aria-hidden] { font-size: 1em; }

.g-legend {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--g-line-soft);
  display: grid;
  gap: 0.7rem;
}

.g-legend li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--g-ink-70);
}

.g-legend strong { color: var(--g-ink); font-weight: 600; }

.g-sw {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  margin-top: 0.18em;
  background: var(--sw);
  border: 1px solid rgba(59, 47, 42, 0.12);
}

/* Two-device comparison figure */
.g-duo-figure { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.g-duo-panel { text-align: center; }
.g-duo-panel svg { width: 100%; max-width: 170px; height: auto; margin-inline: auto; }
.g-duo-panel h3 { margin: 0.5rem 0 0.15rem; font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem); }
.g-duo-panel p { margin: 0; font-size: 0.85rem; line-height: 1.45; color: var(--g-ink-55); }

.g-figure figcaption {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--g-ink-55);
  margin-top: 0.9rem;
  text-align: center;
  max-width: 54ch;
  margin-inline: auto;
}

/* --------------------------------------------------------- comparison table */

.g-compare-wrap {
  background: var(--g-paper);
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius-lg);
  overflow: hidden;
}

.g-compare { width: 100%; border-collapse: collapse; }

.g-compare caption {
  caption-side: top;
  padding: 1.25rem 1.35rem 0;
  font-size: 0.85rem;
  color: var(--g-ink-55);
  text-align: left;
}

.g-compare th,
.g-compare td {
  text-align: left;
  vertical-align: top;
  font-size: 0.95rem;
  line-height: 1.6;
}

.g-compare thead th {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--g-ink);
  padding: 1.1rem 1.35rem;
  border-bottom: 1px solid var(--g-line);
}

.g-compare thead th:first-child { color: var(--g-ink-55); font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }

.g-compare tbody th {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--g-ink);
  padding: 1.1rem 1.35rem;
}

.g-compare tbody td { padding: 1.1rem 1.35rem; color: var(--g-ink-70); }

.g-compare tbody tr + tr > * { border-top: 1px solid var(--g-line-soft); }

.g-compare-col { display: none; }

/* Mobile: stack each criterion into a labelled block. The column name is
   real text (not ::before content) so screen readers announce it. */
@media (max-width: 720px) {
  .g-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .g-compare tbody tr { display: block; padding: 1.1rem 1.15rem; }
  .g-compare tbody tr + tr { border-top: 1px solid var(--g-line); }
  .g-compare tbody tr > * { border: 0 !important; padding: 0; }
  /* 0.8rem, not 0.72: at phone sizes this label is the row's only heading
     and 11.5px was below comfortable reading size. */
  .g-compare tbody th { display: block; margin-bottom: 0.75rem; color: var(--g-accent); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; }
  .g-compare tbody td { display: block; }
  .g-compare tbody td + td { margin-top: 0.85rem; }
  .g-compare-col {
    display: block;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--g-ink);
    margin-bottom: 0.2rem;
  }
}

/* ----------------------------------------------------------- references */

.g-refs { display: grid; gap: 0.75rem; }

.g-details {
  background: var(--g-paper);
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius);
  overflow: hidden;
}

.g-details > summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  font-weight: 600;
  color: var(--g-ink);
  min-height: 56px;
}

.g-details > summary::-webkit-details-marker { display: none; }

.g-details > summary::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--g-accent);
  border-bottom: 2px solid var(--g-accent);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur) var(--ease);
}

.g-details[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }

.g-details > summary:hover { background: var(--g-rose-soft); }

.g-details-body { padding: 0 1.4rem 1.4rem; }

.g-ref-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; counter-reset: ref; }

.g-ref-list li {
  counter-increment: ref;
  position: relative;
  padding-left: 2.1rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--g-ink-70);
}

.g-ref-list li::before {
  content: counter(ref) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--g-numeral);
}

.g-ref-list cite { font-style: normal; color: var(--g-ink); font-weight: 600; }
.g-ref-list .g-ref-meta { display: block; color: var(--g-ink-55); font-size: 0.85rem; margin-top: 0.15rem; }
/* inline-block + vertical padding lifts these citation links past the 24px
   WCAG 2.5.8 target minimum without disturbing the reference layout. */
.g-ref-list a {
  display: inline-block;
  padding-block: 0.4rem;
  color: var(--g-accent);
  word-break: break-word;
}

.g-evidence-key { display: grid; gap: 0.6rem; margin-bottom: 1.5rem; }

.g-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--g-ink-70);
}

.g-chip::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}

.g-chip--solid::before { background: var(--g-ok); }
.g-chip--early::before { background: var(--g-gold); }
.g-chip--open::before { background: var(--g-ink-55); }

/* ------------------------------------------------------------- products */

.g-product-grid { display: grid; gap: 1rem; }

.g-product {
  display: flex;
  flex-direction: column;
  background: var(--g-paper);
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius);
  overflow: hidden;
}

.g-product-media {
  aspect-ratio: 4 / 3;
  background: var(--g-sand-deep);
  display: grid;
  place-items: center;
  color: var(--g-ink-55);
  font-size: 0.8rem;
}

.g-product-media img { width: 100%; height: 100%; object-fit: cover; }

.g-product-body { padding: 1.25rem 1.35rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.g-product-body h3 { font-size: 1.1rem; margin: 0; }
.g-product-body p { font-size: 0.925rem; line-height: 1.6; color: var(--g-ink-70); margin: 0; }
.g-product-body .cta-button { margin-top: auto; align-self: flex-start; }

.g-affiliate-note {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--g-ink-55);
  background: var(--g-sand-deep);
  border-radius: 14px;
  padding: 0.9rem 1.1rem;
}

/* ---------------------------------------------------------------- share */

.g-share { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }

.g-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--g-line);
  background: var(--g-paper);
  color: var(--g-ink);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.g-share-btn:hover,
.g-share-btn:focus-visible { background: var(--g-rose-soft); border-color: var(--g-rose-line); }

.g-share-btn svg { width: 17px; height: 17px; }

/* --------------------------------------------------------------- closing */

.g-closing-grid { display: grid; gap: clamp(1.75rem, 1.3rem + 2vw, 3rem); align-items: center; }

.g-closing-media {
  border-radius: var(--g-radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 70px -45px rgba(59, 47, 42, 0.65);
}

.g-closing-media img { display: block; width: 100%; height: auto; }

/* ----------------------------------------------------------- newsletter */

.g-optin {
  background: var(--g-paper);
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius-lg);
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
}

.g-optin .form-group { margin-bottom: 1rem; }

.g-optin-consent {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--g-ink-70);
  margin-bottom: 1.25rem;
  cursor: pointer;
}

.g-optin-consent input {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 0.1rem;
  accent-color: var(--g-accent);
}

/* --------------------------------------------------------------- motion */

.g-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}

.g-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .g-reveal { opacity: 1; transform: none; transition: none; }
  .g-progress { display: none; }
  .g-details > summary::after { transition: none; }
}

/* --------------------------------------------------------------- ≥ 720px */

@media (min-width: 720px) {
  .g-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .g-dual { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .g-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .g-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.15rem 1.5rem; }
  .g-evidence-key { grid-auto-flow: column; justify-content: start; gap: 1.5rem; }
}

/* -------------------------------------------------------------- ≥ 1000px */

@media (min-width: 1000px) {
  .g-hero-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: center;
  }

  .g-hero-media img { aspect-ratio: 5 / 6; }

  .g-closing-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .g-closing-media { order: -1; }

  .g-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .g-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Habits get a touch more air and a hanging numeral at desktop widths. */
  .g-habit-head { gap: 1.5rem; }

  /* An odd last card should not sit alone at half width. */
  .g-cards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .g-cards--3 > :last-child:nth-child(odd) { grid-column: auto; }
}

@media (hover: hover) {
  .g-card,
  .g-product { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
  .g-product:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
}