/* Theme contrast repairs.
 *
 * Loads after unified-v7.css, which is the only way to win: that sheet sets
 * most of these with !important, so a fix placed earlier in the cascade has no
 * effect regardless of specificity.
 *
 * Every rule here exists because an automated pass measured the pair in a real
 * browser, in both themes, and found it under the WCAG floor. The recurring
 * cause is a component whose text colour is fixed while its background follows
 * the theme, so it reads correctly in one mode and disappears in the other.
 */

/* Table headers. In light mode a dark-green header kept dark ink; in dark mode
   a pale header kept pale ink. Bind both to the surface they sit on. */
html[data-theme="light"] body.site-v3 :is(thead th, thead) {
  background: #e7f0e9 !important;
  color: #0e2a1f !important;
}
html[data-theme="dark"] body.site-v3 :is(thead th, thead) {
  background: #172e25 !important;
  color: #e8f2ec !important;
}

/* Text sitting on a dark band while the page is in light mode. These blocks
   paint their own dark background, so their contents have to be light in both
   themes rather than inheriting the page ink. */
body.site-v3 :is(.method-band, .trust-box, .compact-calc, .modern-footer,
  .lane-label, .path-card.featured, .gm6-dark, .u-dark, [class*="-dark"])
  :is(p, li, small, h2, h3, h4, strong, b, span, td, a:not(.btn)) {
  color: #dceae2 !important;
}
body.site-v3 :is(.method-band, .trust-box, .compact-calc, .lane-label,
  .path-card.featured) :is(h2, h3, h4, strong, b) {
  color: #ffffff !important;
}

/* Muted small print.
 *
 * An earlier version of this block assumed cards stay white in dark mode and
 * painted their captions #3f5348. They do not: unified-v7.css repaints every
 * card dark under the dark theme, so that rule was putting dark grey on a dark
 * card -- the 1.84:1 captions on calculators.html and the 2.06:1 ranking notes
 * on healthy-fast-food.html were both this one rule. State the pair per theme
 * instead, so neither side can be inferred wrongly. */
html[data-theme="light"] body.site-v3 :is(.meal-index-foot, .metric-note, .cite-org) {
  color: #43574c !important;
}
html[data-theme="dark"] body.site-v3 :is(.meal-index-foot, .metric-note, .cite-org) {
  color: #b9cec3 !important;
}

/* A lime link on white is unreadable; lime is only ever a colour for dark
   grounds. */
body.site-v3 a.text-link,
html[data-theme="light"] body.site-v3 a.text-link { color: #1a6344 !important; }
html[data-theme="dark"] body.site-v3 a.text-link { color: #9ee6bb !important; }
body.site-v3 :is([class*="-dark"], .method-band, .trust-box) a.text-link { color: #dfff69 !important; }

/* Buttons whose label sat at 3.64:1 on the mid-green fill. */
body.site-v3 :is(button, .btn, .chip, .tab).active,
body.site-v3 :is(button, .btn).is-active { color: #ffffff !important; }

/* Row headers. `table.data-table th` in style.css paints them dark green and
   white; a later rule reset the colour to page ink while leaving the dark
   background, giving 1.49:1 on 82 pages. My first attempt here only covered
   `thead th` and missed these entirely, because they are `th[scope="row"]`
   inside tbody. */
body.site-v3 table th[scope="row"],
body.site-v3 table tbody th {
  background: transparent !important;
  color: var(--u-ink, #0e2a1f) !important;
  font-weight: 750;
}
html[data-theme="dark"] body.site-v3 table :is(th[scope="row"], tbody th) {
  color: #e8f2ec !important;
}
/* Column headers, both themes, stated as one pair so neither can drift. */
html[data-theme="light"] body.site-v3 table thead th { color: #0e2a1f !important; }
html[data-theme="dark"]  body.site-v3 table thead th { color: #e8f2ec !important; }

/* The gm6 components paint their own dark panels, so their text must be light
   in both themes rather than following the page ink. */
/* a.gm6-tool is deliberately excluded: it is dark only in certain states, and
   colouring it light unconditionally put pale text on a cream card at 1.22:1. */
body.site-v3 :is(.gm6-finder-copy, .gm6-compare-head, .gm6-choice.is-selected),
body.site-v3 :is(.gm6-finder-copy, .gm6-compare-head, .gm6-choice.is-selected)
  :is(p, li, small, span, b, strong, h2, h3, h4, .gm6-tool-num, .eyebrow) {
  color: #dceae2 !important;
}
body.site-v3 :is(.gm6-finder-copy, .gm6-compare-head, .gm6-choice.is-selected)
  :is(h2, h3, h4, b, strong) { color: #ffffff !important; }
body.site-v3 :is(.gm6-finder-copy, .gm6-compare-head) .eyebrow { color: #c7ef7a !important; }

/* Captions follow the panel they sit in, not the section around them.
 *
 * `main > section[class*="hero"] figcaption` in unified-v7.css assumes a hero
 * is dark. On articles.html the caption is inside a white .editorial-figure
 * that happens to sit in the hero, so it inherited hero ink and measured
 * 1.48:1 on white. Card captions are stated separately from banner captions. */
html[data-theme="light"] body.site-v3 figcaption { color: #43574c !important; }
html[data-theme="dark"] body.site-v3 figcaption { color: #b9cec3 !important; }
html[data-theme] body.site-v3 main :is(section[class*="hero"], header[class*="hero"], .page-hero, .gm6-hero, .policy-hero)
  :is(.editorial-figure, .article-illustration, .blog-hero-art) :is(figcaption, figcaption *) {
  color: #43574c !important;
}
html[data-theme="dark"] body.site-v3
  :is(.editorial-figure, .article-illustration, .blog-hero-art) figcaption {
  color: #b9cec3 !important;
}
/* This one paints its own dark scrim, so it is light in both themes. */
body.site-v3 .calc-photo-card figcaption { color: #eef6f1 !important; }

/* Text inside the gm6 dark panels.
 *
 * Removing this block regressed the audit from 8 failing pairs to 45, so it is
 * doing real work: without it the muted-grey rule above claims these elements
 * and paints them dark on a dark panel. Selected by component class only --
 * an earlier version also matched inline background styles, which caught the
 * lime chip and put pale text on it. */
body.site-v3 :is(.gm6-finder-copy, .gm6-compare-head, .gm6-choice.is-selected,
  .gm6-hero, .gm6-band, .gm6-panel-dark) :is(p, li, small, span, figcaption,
  .gm6-tool-num, .eyebrow, .metric-note, .cite-org):not(:where(.btn, .btn *)) {
  /* Button labels excluded: this rule reaches four classes deep, so it was
     beating the rule that gives a button's contents the button's own colour,
     and the arrow on "Find my meal" came out pale mint on a lime fill. */
  color: #dff0e7 !important;
}
html[data-theme="dark"] body.site-v3 :is(.gm6-hero, .gm6-band, .gm6-finder-copy,
  .gm6-compare-head) :is(p, li, small, figcaption, .eyebrow):not(:where(.btn, .btn *)) {
  color: #dff0e7 !important;
}
html[data-theme="light"] body.site-v3 main > section:not([class*="hero"]) figcaption { color: #43574c !important; }
html[data-theme="dark"]  body.site-v3 main > section:not([class*="hero"]) figcaption { color: #b9cec3 !important; }

/* Desktop dropdown positioning.
 *
 * Only atelier-v5.css made .nav-popover absolute, and that sheet is not on
 * every page. Pages without it fell back to the mobile drawer's static
 * positioning, so two open panels sat inside the header and measured it at
 * 572px against 80px elsewhere. This belongs in the shared cascade, not in an
 * optional legacy sheet.
 *
 * Scoped above the 900px breakpoint so the mobile drawer, which is meant to be
 * static and collapsed by max-height, is untouched. */
@media (min-width: 901px) {
  body.site-v3 .nav-group { position: relative; }
  body.site-v3 .nav-popover {
    position: absolute !important;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    width: min(330px, calc(100vw - 32px));
    max-height: none !important;
    overflow: visible !important;
    visibility: hidden;
    opacity: 0;
    z-index: 60;
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
  }
  body.site-v3 .nav-group.is-open .nav-popover {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0);
  }
}

/* No scroll lock on the mobile menu.
 *
 * `.nav-open{overflow:hidden}` elsewhere in the cascade reset the page to the
 * top whenever you opened the menu part-way down an article, which is exactly
 * the "I have to scroll back up" problem. The header is sticky, so the drawer
 * opens under it wherever you are; locking the body buys nothing and costs
 * your place on the page. */
body.nav-open {
  position: static !important;
  overflow: visible !important;
}

/* ======================================================================
 * Dark mode: remap the surface and ink tokens.
 *
 * This is the cause of "the colours glitch out when switching". Four design
 * systems each define their own paper, card and ink tokens, and none of them
 * declared dark values. Switching to dark changed the text to light but left
 * those panels light, so light text landed on light panels: the header at
 * 1.73:1 on all 57 pages, headings at 1.06:1, table cells at 1.00:1.
 *
 * Fixing it at the token level rather than per element is the difference
 * between one rule and several hundred, and it means any component built on
 * these tokens is correct in both themes from now on without another patch.
 * ====================================================================== */
html[data-theme="dark"] {
  /* studio-v6 */
  --gm6-paper: #0b1712;
  --gm6-paper-warm: #101f19;
  --gm6-mint: #16302a;
  --gm6-ink: #f4f8f5;
  --gm6-ink-soft: #b7c8bf;
  /* NOT inverted. `forest` names a dark accent panel that carries white text
     in both themes -- the hero, the finder copy column, the compare header.
     An earlier version of this file flipped it to a pale mint, which turned
     every one of those panels light while their text stayed light: that is
     the single biggest cause of "the colours glitch when I switch theme".
     Dark mode only lifts them slightly so they still separate from the darker
     page behind them. */
  --gm6-forest: #12563f;
  --gm6-forest-deep: #0f4433;

  /* atelier-v5 */
  --gm-paper: #0b1712;
  --gm-card: #101f19;
  --gm-line: rgba(214,244,226,.16);
  --gm-ink: #f4f8f5;
  --gm-ink-soft: #b7c8bf;
  --gm-forest: #12563f;
  --gm-forest-dark: #0f4433;

  /* premium-v4 */
  --premium-paper: #0b1712;
  --premium-paper-warm: #101f19;
  --premium-line: rgba(214,244,226,.16);
  --premium-ink: #f4f8f5;
  --premium-muted: #b7c8bf;
  --premium-forest: #12563f;
  --premium-forest-deep: #0f4433;
  --premium-mint: #16302a;

  /* site-v3 */
  --v3-paper: #0b1712;
  --v3-card: #101f19;
  --v3-mint: #16302a;
  --v3-line: rgba(214,244,226,.16);
  --v3-ink: #f4f8f5;
  --v3-muted: #b7c8bf;
  --v3-forest: #12563f;

  /* style.css base */
  --color-bg: #07110d;
  --color-surface: #101f19;
  --color-text: #f4f8f5;
  --color-text-muted: #b7c8bf;
  --color-border: rgba(214,244,226,.16);
  --cream: #0b1712;
  --ink: #f4f8f5;
  --muted: #b7c8bf;
}

/* The same values again, declared on <body>.
 *
 * A custom property set on an element beats one inherited from an ancestor, no
 * matter how specific the ancestor's selector is. site-v3.css declares the
 * whole --v3-* set on `.site-v3`, which is the body itself, and modern.css,
 * meal-finder-v2.css and atelier-v5.css do the same on their own body classes.
 * Every one of those shadowed the block above, so the remap silently did
 * nothing on the components that use them -- the pale key column on the meal
 * table was this, not a missing rule. */
html[data-theme="dark"] body.site-v3,
html[data-theme="dark"] body.modern-site,
html[data-theme="dark"] body.finder-v2,
html[data-theme="dark"] body.legacy-unified,
html[data-theme="dark"] body.tools-page,
html[data-theme="dark"] body.calculator-suite {
  --v3-paper: #0b1712;
  --v3-card: #101f19;
  --v3-mint: #16302a;
  --v3-line: rgba(214,244,226,.16);
  --v3-ink: #f4f8f5;
  --v3-muted: #b7c8bf;
  --v3-forest: #12563f;

  --gm-paper: #0b1712;
  --gm-card: #101f19;
  --gm-line: rgba(214,244,226,.16);
  --gm-ink: #f4f8f5;
  --gm-ink-soft: #b7c8bf;
  --gm-forest: #12563f;

  --cream: #0b1712;
  --ink: #f4f8f5;
  --muted: #b7c8bf;
  --mint: #16302a;
  --green: #9ee6bb;
  --forest: #12563f;
}

/* Surfaces written as literal hex rather than through a token. Each was found
   by measuring light-on-light in dark mode; the replacement is the dark
   equivalent of the same role. */
html[data-theme="dark"] body.site-v3 [style*="#fff"],
html[data-theme="dark"] body.site-v3 :is(.gm6-card, .gm-card, .u-card, .sample-card,
  .meal-card, .pick-card, .advice-card, .tool-card, .goal-card, .guide-card,
  .chain-card, .ranking-card, .dash-meal, .mini-result, .home-calc-form,
  .quiz-card, .mm-form, .table-wrap, .source-box, .nav-popover) {
  background-color: #101f19 !important;
  border-color: rgba(214,244,226,.16) !important;
}
html[data-theme="dark"] body.site-v3 :is(thead, thead th) {
  background-color: #16302a !important;
}

/* Translucent light surfaces in dark mode.
 *
 * The header bar is rgba(255,254,248,.76) -- 76% opaque white. Over a light
 * page that is a soft frosted bar; over the dark page it is still a near-white
 * bar, and the dark theme's light text sits on it at 1.73:1. This is the
 * "text on the top is impossible to read" case, and it was invisible to a
 * token remap because the colour is written inline as rgba, not as a token.
 *
 * Anything frosted needs its own dark value, not a lighter alpha. */
html[data-theme="dark"] body.site-v3 :is(.site-header, .modern-header, .full-nav,
  .nav-utility, .section-tabs, .stats-ribbon > .container) {
  background: rgba(11, 23, 18, .88) !important;
  border-color: rgba(214, 244, 226, .16) !important;
}
html[data-theme="dark"] body.site-v3 :is(.nav-group-trigger, .nav-direct,
  .theme-toggle, .nav-toggle, .modern-brand) {
  color: #eaf6ef !important;
  background: transparent !important;
}
html[data-theme="dark"] body.site-v3 .nav-popover {
  background: #13241d !important;
  border-color: rgba(214, 244, 226, .18) !important;
}
html[data-theme="dark"] body.site-v3 .nav-popover :is(a, strong, small, span) {
  color: #e6f2ea !important;
}
html[data-theme="dark"] body.site-v3 .nav-popover a:hover { background: rgba(214,244,226,.09) !important; }

/* A lime button carries dark ink in both themes: the fill does not change. */
body.site-v3 a.btn[class*="primary"],
html[data-theme="dark"] body.site-v3 :is(a.btn, button.btn)[class*="primary"] {
  color: #0b1712 !important;
}

/* Remaining light panels written as literal colours rather than tokens, so the
   dark-mode token remap could not reach them. Found by sampling every element
   whose computed background was still near-white while the theme was dark. */
html[data-theme="dark"] body.site-v3 :is(.data-section, .fast-section.alt,
  .goal-section, .method-section, .final-cta, .tool-library, .gm6-band-soft) {
  background: rgba(16, 31, 25, .92) !important;
}
html[data-theme="dark"] body.site-v3 :is(.macro-row span, .macro-grid span,
  .pick-metrics span, .meal-metric, .sample-macros span, .dash-macros span,
  .stat-row span, .goal-chips a, .chain-links a, .tool-links a, .filter-pills button) {
  background: rgba(214, 244, 226, .08) !important;
  color: #e6f2ea !important;
}
html[data-theme="dark"] body.site-v3 :is(.brand-mark, .brand-bubble, .meal-brand,
  .goal-icon, .tool-group-icon, .card-icon, .round-link) {
  background: rgba(214, 244, 226, .12) !important;
  color: #eaf6ef !important;
}
/* A mint button on a mint panel: give the fill contrast rather than the text. */
html[data-theme="dark"] body.site-v3 .data-section a.btn:not([class*="primary"]) {
  background: rgba(214, 244, 226, .10) !important;
  color: #eaf6ef !important;
  border-color: rgba(214, 244, 226, .28) !important;
}

/* ======================================================================
 * Components whose surface does NOT follow the theme.
 *
 * studio-v6.css writes several panels as literal colours: a forest card, a
 * lime chip, a white shell. Those keep their colour in both themes, so their
 * text has to be stated once rather than left to follow the page ink -- which
 * is what made the homepage read correctly in light mode and dissolve in dark.
 * ====================================================================== */

/* The lead tool card is a forest panel in both themes. */
body.site-v3 a.gm6-tool:first-child :is(p, span, small, li) { color: #dfeee6 !important; }
body.site-v3 a.gm6-tool:first-child :is(h3, h4, strong, b) { color: #ffffff !important; }
body.site-v3 a.gm6-tool:first-child .gm6-tool-num { color: #b7dcc6 !important; }
/* The rest are pale in light mode and dark in dark mode, so they do follow it. */
html[data-theme="light"] body.site-v3 a.gm6-tool:not(:first-child) .gm6-tool-num { color: #43574c !important; }
html[data-theme="dark"]  body.site-v3 a.gm6-tool:not(:first-child) .gm6-tool-num { color: #b9cec3 !important; }
html[data-theme="dark"]  body.site-v3 a.gm6-tool:not(:first-child) :is(h3, h4, strong, b) { color: #f4f8f5 !important; }
html[data-theme="dark"]  body.site-v3 a.gm6-tool:not(:first-child) p { color: #b7c8bf !important; }
html[data-theme="dark"]  body.site-v3 .gm6-tool:nth-child(3) { background: #12231c !important; }

/* Lime fills are identical in both themes, so their ink is dark in both. Stated
   at a higher specificity than the dark-panel rule above, which would otherwise
   claim these spans and paint pale text on a lime chip. */
/* The calories chip is no longer part of this: it is a mid jade now, stated
   further down with white ink. Only the lime preview banner remains. */
body.site-v3 .gm6-preview-result,
body.site-v3 .gm6-preview-result :is(b, strong, span, small) {
  color: #14301f !important;
}

/* White shells that studio-v6 hard-codes, given their dark-mode equivalents. */
html[data-theme="dark"] body.site-v3 :is(.gm6-finder-shell, .gm6-compare-shell) {
  background: #101f19 !important;
}
html[data-theme="dark"] body.site-v3 .gm6-finder-preview {
  background: linear-gradient(145deg, #13251e, #0e1e18) !important;
}
html[data-theme="dark"] body.site-v3 .gm6-choice:not(.is-selected) {
  background: rgba(214, 244, 226, .06) !important;
}
html[data-theme="dark"] body.site-v3 .gm6-choice:not(.is-selected) :is(b, small) { color: #e4f0ea !important; }
html[data-theme="dark"] body.site-v3 .gm6-finder-preview :is(h3, .eyebrow) { color: #f4f8f5 !important; }
html[data-theme="dark"] body.site-v3 .gm6-method { background: #0d1a15 !important; }
html[data-theme="dark"] body.site-v3 .gm6-method-points div { background: #101f19 !important; }
html[data-theme="dark"] body.site-v3 .gm6-compare-row :is(strong, span) { color: #eaf4ee !important; }
html[data-theme="dark"] body.site-v3 .gm6-compare-meal small { color: #a8bcb1 !important; }
html[data-theme="dark"] body.site-v3 .gm6-compare-value.is-protein { color: #9ee6bb !important; }
html[data-theme="dark"] body.site-v3 .home-calc-results :is(small, span) { color: #b7c8bf !important; }

/* Calculator selection pills.
 *
 * The checked state fills with --u-mint, which is #247a54 under the light
 * theme. Dark ink on that fill measures 3.64:1 -- readable-ish, but under the
 * 4.5:1 floor for the 14px labels it carries. White on the same fill is
 * 5.28:1, so the fill can stay exactly as designed. */
html[data-theme="light"] body:is(.calculator-suite, .tools-page)
  :is(.radio-row label:has(input:checked), .sex-choice-row label:has(input:checked),
      .units-toggle button.active),
html[data-theme="light"] body:is(.calculator-suite, .tools-page)
  :is(.radio-row label:has(input:checked), .sex-choice-row label:has(input:checked),
      .units-toggle button.active) :is(span, small, b) {
  color: #ffffff !important;
}

/* ======================================================================
 * The last pale panels in dark mode.
 *
 * Found by sweeping every page in the dark theme for elements whose computed
 * background was still light. Saturated accents (the lime buttons, the pastel
 * macro badges) are deliberately left alone -- they are the same fill in both
 * themes by design -- but their ink is pinned dark below so it cannot follow
 * the theme off them.
 * ====================================================================== */
html[data-theme="dark"] body.site-v3 :is(.formula, .calc-nav, .units-toggle,
  .order-preview-progress, .meal-index, .meal-index .container,
  .home-calc-results, .result-macros span, .wg-headline > div,
  .calc-nav a) {
  background: #101f19 !important;
  border-color: rgba(214, 244, 226, .16) !important;
}
html[data-theme="dark"] body.site-v3 :is(.formula, .order-preview-progress,
  .meal-index, .home-calc-results, .wg-headline)
  :is(p, li, span, small, strong, b, td, th) {
  color: #e6f2ea !important;
}
html[data-theme="dark"] body.site-v3 .calc-nav a { color: #e6f2ea !important; }
html[data-theme="dark"] body.site-v3 .calc-nav a:hover { background: rgba(214,244,226,.1) !important; }
html[data-theme="dark"] body.site-v3 .meal-index-foot {
  color: #b9cec3 !important;
  background: #101f19 !important;
}
html[data-theme="dark"] body.site-v3 .meal-index-foot a { color: #9ee6bb !important; }
html[data-theme="dark"] body.site-v3 .units-toggle button:not(.active) { color: #cfe0d7 !important; }
html[data-theme="dark"] body.site-v3 :is(input, textarea, select):not([type="checkbox"]):not([type="radio"]) {
  background-color: #0e1c16 !important;
  color: #f4f8f5 !important;
  border-color: rgba(214, 244, 226, .18) !important;
}
html[data-theme="dark"] body.site-v3 :is(input, textarea)::placeholder { color: #8ba396 !important; }
html[data-theme="dark"] body.site-v3 select option { color: #f4f8f5; background: #0e1c16; }

/* Key columns were half-converted: the header cell went dark while the body
   cell stayed pale, so one of the two always had ink the wrong way round. */
html[data-theme="dark"] .site-v3 .meal-index .meal-table th.is-key,
html[data-theme="dark"] .site-v3 .meal-index .meal-table td.is-key { color: #eaf4ee !important; }

/* Pastel accent chips keep their fill in both themes, so they keep dark ink. */
body.site-v3 :is(.icon-badge, .pill, .gm6-chain-mark),
body.site-v3 :is(.icon-badge, .pill, .gm6-chain-mark) :is(b, strong, span, small) {
  color: #14301f !important;
}

/* Lime, stated at a specificity that clears the dark-panel rule above. That
   rule matches four classes deep; anything shorter loses to it even with
   !important, which is why an earlier attempt at this left "1,050 calories"
   pale on lime. */
html[data-theme] body.site-v3 .gm6-finder-preview .gm6-preview-result,
html[data-theme] body.site-v3 .gm6-finder-preview .gm6-preview-result :is(strong, span) {
  color: #14301f !important;
}

/* ======================================================================
 * Layout repairs. Same reason this file loads last: these correct earlier
 * sheets, and stating them anywhere else loses the cascade.
 * ====================================================================== */

/* Breadcrumbs: let the current page wrap instead of being sliced.
 *
 * site-v3.css sets the trail to white-space:nowrap inside an overflow-x:auto
 * container with the scrollbar hidden, so on a phone a long article title is
 * simply cut mid-word with nothing to say it continues -- "Serving size vs.
 * portion size: the difference tha". Five articles lost between 16px and 130px
 * of their title this way. A breadcrumb running to two lines is normal; a
 * truncated one is a dead end. */
@media (max-width: 720px) {
  body.site-v3 .breadcrumb,
  body.site-v3 .breadcrumb > .container,
  body.site-v3 .breadcrumb > .container > span {
    overflow: visible !important;
    white-space: normal !important;
  }
  body.site-v3 .breadcrumb > .container {
    flex-wrap: wrap;
    row-gap: 2px;
    line-height: 1.5;
  }
}

/* Action rows: two buttons that share an edge.
 *
 * recovery.css lays .focus-actions out as flex with a 12px gap, but on the
 * blog hero something later resets it to display:block. The markup has no
 * whitespace between the two <a>s, so they rendered edge to edge with no seam
 * -- "Read the latestBrowse all guides" as one bar. Stated here so every
 * action row keeps its gap regardless of what claimed display first. */
body.site-v3 :is(.focus-actions, .hero-actions, .gm6-hero-actions, .calc-hero-actions) {
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px !important;
}

/* Micro-labels below 12px.
 *
 * Kickers, meta lines and the theme-toggle label had drifted to 11.2-11.8px,
 * which is under the size at which small caps-and-tracking text stays legible
 * on a phone. Raised to a 12.5px floor; none of them are in a fixed-width box,
 * so nothing reflows. */
body.site-v3 :is(.theme-label, .blog-kicker, .story-index, .pill,
  .blog-meta span, .order-preview-options em, .wg-headline span,
  .meal-index-foot, .gm6-tool-num) {
  font-size: max(.78rem, 12.5px) !important;
}
body.site-v3 small,
body.site-v3 .modern-footer small { font-size: max(.79rem, 12.5px); }

/* A three-digit statistic set in a two-digit box.
 *
 * .gm6-story-number strong scales to 6.4vw, which is 82px at desktop width,
 * inside a flex item that had been allowed to shrink to 103px -- so "112"
 * wrapped after the second digit. It keeps its size and stops wrapping. */
body.site-v3 .gm6-story-number strong {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: clamp(3.2rem, 5.4vw, 5rem) !important;
  line-height: 1;
}
body.site-v3 .gm6-story-number { flex-wrap: wrap; }

/* A submit button narrower than its own label.
 *
 * The calculator buttons are inline-flex inside a grid, so they were free to
 * shrink to the column width: "Calculate" needed 95px and got 70px, with the
 * tail simply cut. A control never shrinks below its label. */
body.site-v3 :is(.btn, .calc-submit, button[type="submit"], .link-btn) {
  min-width: fit-content;
  flex-shrink: 0;
}

/* A figure that clipped its own caption.
 *
 * .editorial-figure carries overflow:hidden for its rounded corners. As a grid
 * item it was being stretched to the row rather than to its contents, so on
 * articles.html the caption started 10px below the bottom of the box and was
 * never visible at all. Sizing to content puts it back. */
body.site-v3 :is(.editorial-figure, .article-illustration, .blog-hero-art) {
  height: auto !important;
  align-self: start;
}

/* Menu descriptions were the last text under 12px. */
body.site-v3 .nav-popover small { font-size: max(.79rem, 12.5px) !important; }

/* ======================================================================
 * Hero banners.
 *
 * Every hero on the site is a dark green gradient in both themes, so its text
 * is light in both themes. It could not be left to follow --u-ink: that token
 * is dark under the light theme, which put near-black headings on a dark green
 * banner. Stated once here for every hero variant the site uses.
 * ====================================================================== */
html[data-theme] body.site-v3 main :is(section[class*="hero"], header[class*="hero"], .hero, .page-hero, .gm6-hero, .policy-hero)
  :is(h1, h2, h3, h4, strong, b) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
}
html[data-theme] body.site-v3 main :is(section[class*="hero"], header[class*="hero"], .hero, .page-hero, .gm6-hero, .policy-hero)
  :is(p, li, small, dd, span, figcaption):not(:where(.btn, .btn *)) {
  /* The previous #cfe3d8 measured 4.30:1 against the light end of the hero
     gradient, just under the floor. Text inside a button is excluded: a button
     carries its own colour, and painting its label with the section's ink left
     the arrow on "Find my meal" pale mint on a lime fill. */
  color: #dff0e7 !important;
}
html[data-theme] body.site-v3 main :is(section[class*="hero"], header[class*="hero"], .hero, .page-hero, .gm6-hero, .policy-hero)
  :is(.eyebrow, p.eyebrow) {
  /* #a8f0bd measured 4.37:1 against the light end of the hero gradient;
     the eyebrow is 12px uppercase, so it needs the 4.5:1 body-text floor. */
  color: #c9f7d8 !important;
}

/* Panels that sit inside a hero keep their own ground, so they keep their own
   ink. A caption on a white figure card and a value on a lime chip are both
   inside the banner but not on it. */
html[data-theme] body.site-v3 main :is(section[class*="hero"], header[class*="hero"], .page-hero, .gm6-hero, .policy-hero)
  :is(.editorial-figure, .article-illustration, .blog-hero-art) figcaption {
  color: #43574c !important;
}
html[data-theme="dark"] body.site-v3 main :is(section[class*="hero"], header[class*="hero"], .page-hero, .gm6-hero, .policy-hero)
  :is(.editorial-figure, .article-illustration, .blog-hero-art) figcaption {
  color: #b9cec3 !important;
}
html[data-theme] body.site-v3 main :is(section[class*="hero"], header[class*="hero"], .page-hero, .gm6-hero, .policy-hero)
  .calc-photo-card figcaption {
  color: #eef6f1 !important;
}

/* Outline and ghost buttons on a hero.
 *
 * unified-v7's light-theme rule gives them --u-ink on a 5% dark wash, which is
 * correct on a light page and unreadable on the dark banner they actually sit
 * on -- "Find a meal for my goal" was near-black on dark green. */
html[data-theme] body.site-v3 main :is(section[class*="hero"], header[class*="hero"], .hero, .page-hero, .gm6-hero, .policy-hero)
  :is(.btn-outline, .btn-ghost, button.btn-ghost, button[type="reset"]) {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, .42) !important;
  background: rgba(255, 255, 255, .1) !important;
}

/* The method band is a dark panel by design (recovery.css paints it #10231b)
   and its text is light to match. Something later repaints it near-white on
   the blog, which left an entire eight-item panel of light text on light. */
body.site-v3 .method-band {
  background: #10231b !important;
  border-color: rgba(214, 244, 226, .14) !important;
}

/* An inline "editorial note" callout kept its light paper in dark mode. */
html[data-theme="dark"] body.site-v3 :is(.editorial-note, .answer-box, .callout, .note-box) {
  background: #101f19 !important;
  border-color: rgba(214, 244, 226, .16) !important;
}
html[data-theme="dark"] body.site-v3 :is(.editorial-note, .answer-box, .callout, .note-box)
  :is(p, li, strong, b, span, small) { color: #e6f2ea !important; }

/* The "see everything" link is a mid-green that only works on paper. */
html[data-theme="dark"] body.site-v3 :is(.explore-all, a.explore-all, .meal-index-link a) {
  color: #9ee6bb !important;
}

/* Light-theme secondary muted text.
 *
 * --u-muted-2 is #647a70, which is 4.27:1 on the page paper -- just under the
 * floor, and it is used for breadcrumbs, card meta and menu descriptions, so
 * it was the single most widely read colour that failed. Darkened to 4.77:1. */
html[data-theme="light"] body.site-v3 { --u-muted-2: #5d7269; }

/* The primary button's fill runs lime to mint. Dark ink is fine on the lime
   end and 3.48:1 on the mint end, so the mint end is lifted rather than the
   ink lightened -- white would fail on the lime half instead. */
html[data-theme="light"] body.site-v3 :is(.btn-primary, .calc-submit, button[type="submit"]) {
  background: linear-gradient(135deg, #cdf05f, #63b98a) !important;
  color: #07110d !important;
}

/* The editorial cards in the learning grid are dark panels on a pale band. */
body.site-v3 a.gm6-editorial :is(h3, h4, strong, b) { color: #ffffff !important; }
body.site-v3 a.gm6-editorial :is(p, small, span) { color: #d2dfd9 !important; }

/* Panels inside a hero that carry their own ground.
 *
 * The order-match preview is a white card sitting on the dark banner, so the
 * hero's light text rule turned every label on it white-on-white. A panel
 * whose surface follows the theme takes the theme's ink, not the banner's. */
html[data-theme="light"] body.site-v3 main :is(section[class*="hero"], header[class*="hero"], .page-hero, .gm6-hero)
  :is(.order-match-preview, .eatout-match, .quiz-card, .quiz-results, .home-calc-form)
  :is(h1, h2, h3, h4, strong, b) { color: #10251b !important; }
html[data-theme="light"] body.site-v3 main :is(section[class*="hero"], header[class*="hero"], .page-hero, .gm6-hero)
  :is(.order-match-preview, .eatout-match, .quiz-card, .quiz-results, .home-calc-form)
  :is(p, li, small, span, em) { color: #43574c !important; }
html[data-theme="dark"] body.site-v3 main :is(section[class*="hero"], header[class*="hero"], .page-hero, .gm6-hero)
  :is(.order-match-preview, .eatout-match, .quiz-card, .quiz-results, .home-calc-form)
  :is(h1, h2, h3, h4, strong, b) { color: #f4f8f5 !important; }
html[data-theme="dark"] body.site-v3 main :is(section[class*="hero"], header[class*="hero"], .page-hero, .gm6-hero)
  :is(.order-match-preview, .eatout-match, .quiz-card, .quiz-results, .home-calc-form)
  :is(p, li, small, span, em) { color: #b7c8bf !important; }

/* The finder's breadcrumb was styled white for a dark bar that no longer has
   a background of its own, so it read as white on the page paper. */
html[data-theme="light"] body.site-v3 .breadcrumb :is(a, span) { color: #3a5145 !important; }
html[data-theme="light"] body.site-v3 .breadcrumb a { color: #176c48 !important; }
html[data-theme="dark"] body.site-v3 .breadcrumb :is(a, span) { color: #b7c8bf !important; }
html[data-theme="dark"] body.site-v3 .breadcrumb a { color: #9ee6bb !important; }

/* Callout boxes carry text directly, not only in child elements. */
html[data-theme="dark"] body.site-v3 :is(.editorial-note, .answer-box, .callout, .note-box) {
  color: #e6f2ea !important;
}

/* Buttons on the dark method band. */
body.site-v3 .method-band :is(a.btn, button.btn) {
  color: #0b1712 !important;
}
body.site-v3 .method-band :is(a.btn-outline, a.btn-ghost, button.btn-ghost) {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, .42) !important;
  background: rgba(255, 255, 255, .1) !important;
}

/* Outline buttons on the dark method band. The earlier pair here was written
   as `.method-band a.btn-outline`, which is one class short of the light-theme
   rule in unified-v7 that gives every ghost button dark ink; on the dark band
   that read at 1.02:1. */
html[data-theme] body.site-v3 .method-band :is(a.btn-outline, a.btn-ghost, button.btn-ghost, button[type="reset"]) {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, .42) !important;
  background: rgba(255, 255, 255, .1) !important;
}

/* A stage heading styled white for a dark band that the section flattening
   removed. It sits on the page paper now, so it takes the page ink. */
html[data-theme="light"] body.site-v3 :is(.mm-stage-h, .order-macro-intro h2) { color: #10251b !important; }
html[data-theme="dark"]  body.site-v3 :is(.mm-stage-h, .order-macro-intro h2) { color: #f4f8f5 !important; }

/* Calculator field labels kept the light-theme ink inside the dark form card
   that unified-v7 paints in both themes. */
html[data-theme="dark"] body:is(.calculator-suite, .tools-page) :is(.field-label, .field > label, .height-pair label span, legend) {
  color: #cfe0d7 !important;
}

/* The finder preview's question label is a mid-grey chosen for the pale panel
   it sits on in light mode; the panel is dark in dark mode. */
html[data-theme="dark"] body.site-v3 .gm6-question { color: #b7c8bf !important; }

/* The article eyebrow was the last text under 12px. */
body.site-v3 :is(.eyebrow, p.eyebrow) { font-size: max(.78rem, 12.5px) !important; }

/* ======================================================================
 * The mobile menu drawer in dark mode.
 *
 * The drawer is painted #f4f6f4 with #173326 labels in both themes, so under
 * the dark theme the theme-aware nav colours elsewhere in this file claimed
 * the triggers and put near-white text on that pale panel: "Eat Out", "Tools",
 * "Learn", "About" and the search row were all invisible with the menu open.
 * The closed bar measured fine, which is why an audit of the default state
 * never saw it. Light keeps the palette it has; dark gets its own.
 * ====================================================================== */
@media (max-width: 900px) {
  html[data-theme="dark"] body.site-v3 .full-nav-links {
    color: #eaf6ef !important;
    background: #0f1d17 !important;
    border: 1px solid rgba(214, 244, 226, .16) !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .55) !important;
  }
  html[data-theme="dark"] body.site-v3 .full-nav-links :is(.nav-group-trigger, .nav-direct) {
    color: #eaf6ef !important;
    background: transparent !important;
  }
  html[data-theme="dark"] body.site-v3 .full-nav-links :is(.nav-group-trigger:hover, .nav-direct:hover),
  html[data-theme="dark"] body.site-v3 .full-nav-links .nav-group.is-open .nav-group-trigger,
  html[data-theme="dark"] body.site-v3 .full-nav-links .nav-direct[aria-current="page"] {
    color: #ffffff !important;
    background: rgba(214, 244, 226, .12) !important;
  }
  html[data-theme="dark"] body.site-v3 .full-nav-links .nav-group {
    border-color: rgba(214, 244, 226, .14) !important;
  }
  /* Inside the drawer the popover is part of the same panel, so it does not
     paint a second surface on top of it. */
  html[data-theme="dark"] body.site-v3 .full-nav-links .nav-popover {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  html[data-theme="dark"] body.site-v3 .full-nav-links .nav-popover :is(a, strong, small, span) {
    color: #e6f2ea !important;
  }
  html[data-theme="dark"] body.site-v3 .full-nav-links .nav-popover a:hover {
    background: rgba(214, 244, 226, .1) !important;
  }
}

/* Theme toggle icon.
 *
 * Both the moon and the sun are in the markup; this reveals the one that
 * matches the current theme. They replace the ☾ and ☀ text characters, which
 * every platform draws at a different weight and baseline -- thin outline on
 * one, filled emoji on another -- and which the toggle script used to write
 * into the button on each switch. */
body.site-v3 .theme-icon {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
}
body.site-v3 .theme-icon svg { width: 100%; height: 100%; display: none; }
:root:not([data-theme="dark"]) body.site-v3 .theme-icon .theme-moon { display: block; }
html[data-theme="dark"] body.site-v3 .theme-icon .theme-sun { display: block; }
html[data-theme="dark"] body.site-v3 .theme-icon .theme-moon { display: none; }

/* Male and female marks on the macro calculator.
 *
 * calculators-polish.css already set an M and an F on these badges, but a
 * later rule hid the pseudo-element and cleared the badge's background, so
 * both options rendered as a bare label with an empty 42px gap where the mark
 * should be. The two options were also given the same person icon, which told
 * you nothing about which was which. */
body:is(.calculator-suite, .tools-page) .sex-choice-icon {
  display: grid !important;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  border: 1px solid rgba(214, 244, 226, .18) !important;
  background: rgba(214, 244, 226, .1) !important;
  color: inherit !important;
  font-weight: 900;
}
body:is(.calculator-suite, .tools-page) .sex-choice-icon::before {
  display: block !important;
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: .01em;
}
body:is(.calculator-suite, .tools-page) .sex-choice-row label:first-child .sex-choice-icon::before { content: "M"; }
body:is(.calculator-suite, .tools-page) .sex-choice-row label:last-child .sex-choice-icon::before { content: "F"; }
/* Selected: the badge inverts so the mark stays the clearest thing in the row. */
body:is(.calculator-suite, .tools-page) .sex-choice-row label:has(input:checked) .sex-choice-icon {
  border-color: transparent !important;
  background: #07110d !important;
  color: #bce94f !important;
}
html[data-theme="light"] body:is(.calculator-suite, .tools-page) .sex-choice-icon {
  border-color: rgba(19, 73, 48, .2) !important;
  background: rgba(19, 73, 48, .08) !important;
}

/* The search row at the bottom of the mobile drawer.
 *
 * Four sheets each gave it a different treatment -- dark green with white ink,
 * lime with dark ink, and a muted translucent row -- and on search.html itself
 * a fifth rule for the current page painted it dark green on dark green at
 * 1.10:1. It is the same call to action as the Search button in the top bar,
 * so it gets the same lime fill and dark ink in both themes, current page
 * included, and a size that clears the 12px floor. */
@media (max-width: 900px) {
  body.site-v3 .full-nav-links a.nav-mobile-search,
  body.site-v3 .full-nav-links a.nav-mobile-search[aria-current="page"],
  body.site-v3 .full-nav-links a.nav-mobile-search:hover {
    color: #07110d !important;
    background: #bce94f !important;
    font-size: max(.83rem, 13px) !important;
    font-weight: 850;
  }
}

/* ======================================================================
 * Spacing repairs.
 * ====================================================================== */

/* Fieldsets that are cards, not just groups.
 *
 * unified-v7 flattens every fieldset to transparent with `padding: 18px 0`,
 * which is right for the macro calculator, where a fieldset is only a grouping.
 * On the protein-value tool the fieldset IS the card: with no horizontal
 * padding its labels sat flush against the panel's own border while the inputs
 * inside them were inset, and the legend straddled the border line rather than
 * sitting in the panel. Laying the fieldset out as a grid also pulls the legend
 * into normal flow, so the border draws unbroken behind it. */
body:is(.calculator-suite, .tools-page) fieldset.panel {
  display: flow-root;
  padding: clamp(20px, 2.6vw, 30px) !important;
  border: 1px solid var(--u-line) !important;
  border-radius: 22px !important;
}
/* Floating the legend is what actually takes it out of its special role, so
   the panel's border draws as one unbroken rounded rectangle instead of
   opening a notch around the word. display:grid alone does not: the browser
   still renders a legend as a legend. */
body:is(.calculator-suite, .tools-page) fieldset.panel > legend {
  float: left;
  width: 100%;
  margin: 0 0 16px;
  padding: 0 !important;
}
body:is(.calculator-suite, .tools-page) fieldset.panel > legend + * { clear: both; }

/* Checkbox rows in the meal builder.
 *
 * A 10px gap between a 20px box and a label that often wraps to two lines read
 * as one clump; the box also centred against the whole two-line block instead
 * of sitting beside the first line. */
body:is(.calculator-suite, .tools-page) .builder fieldset > label {
  grid-template-columns: 22px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: start !important;
  padding: 11px 12px !important;
  line-height: 1.4;
}
body:is(.calculator-suite, .tools-page) .builder fieldset > label > input[type="checkbox"] {
  margin-top: 2px;
}

/* "See 3 more" was a full-width bar 1px of padding tall, so the label floated
   in a strip rather than sitting in a button. */
body.site-v3 button.ranking-more {
  min-height: 48px;
  padding: 12px 20px !important;
  border-radius: 14px !important;
  font-size: max(.86rem, 13.5px);
  font-weight: 820;
}

/* Checkboxes and radios are controls, not text fields.
 *
 * Four sheets styled them through a bare `input` selector, so every checkbox
 * carried a 46-54px white bordered field with an inset shadow behind it: in
 * the meal builder each ingredient showed a tall phantom box around its 20px
 * box, and the rows stretched to fit it. Each of those rules now excludes
 * them; this is the backstop so a future one cannot reintroduce it. */
body.site-v3 input:is([type="checkbox"], [type="radio"]) {
  width: 20px !important;
  height: 20px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-color: initial !important;
  appearance: auto;
  accent-color: #176c48;
}
html[data-theme="dark"] body.site-v3 input:is([type="checkbox"], [type="radio"]) {
  accent-color: #7fe0a4;
}

/* ======================================================================
 * Search page.
 *
 * Built to the same pattern as the homepage tool bento: a numbered kicker, a
 * plain title and one line of copy, with the lead tile on forest. The old page
 * set every result's headline at hero scale, so fifty-six of them stacked into
 * a wall of underlined text with no way to tell one group from another.
 * ====================================================================== */
body.search-page .search-start { padding-block: clamp(46px, 6vw, 76px) !important; }
body.search-page :is(.search-start-head, .search-library-head) { max-width: 720px; margin-bottom: clamp(24px, 3vw, 38px); }
body.search-page :is(.search-start-head, .search-library-head) h2 {
  margin: .35rem 0 0;
  font-size: clamp(1.75rem, 3.2vw, 2.7rem) !important;
  letter-spacing: -.035em;
}

body.search-page .search-start-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
body.search-page .search-start-tile {
  display: flex;
  flex-direction: column;
  grid-column: span 2;
  gap: 6px;
  min-height: 168px;
  padding: 22px;
  border: 1px solid var(--u-line);
  border-radius: 20px;
  background: var(--u-surface);
  color: inherit !important;
  text-decoration: none !important;
  transition: transform .34s var(--u-ease, ease), box-shadow .34s ease, border-color .2s ease;
}
body.search-page .search-start-tile:nth-child(1) { grid-column: span 3; }
body.search-page .search-start-tile:nth-child(2) { grid-column: span 3; }
body.search-page .search-start-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(36, 122, 84, .34);
  box-shadow: var(--u-shadow-sm);
}
body.search-page .search-start-num {
  font-size: max(.76rem, 12px);
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}
body.search-page .search-start-name {
  margin-top: auto;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  font-weight: 850;
  letter-spacing: -.03em;
  line-height: 1.15;
}
body.search-page .search-start-copy { font-size: .92rem; line-height: 1.5; }

/* The lead tile is a forest panel in both themes, like the bento it echoes. */
body.search-page .search-start-tile:nth-child(1) {
  border-color: transparent;
  background: linear-gradient(150deg, #0b3b2c, #10513c) !important;
}
body.search-page .search-start-tile:nth-child(1) .search-start-name { color: #ffffff !important; }
body.search-page .search-start-tile:nth-child(1) .search-start-copy { color: #c6dbd0 !important; }
body.search-page .search-start-tile:nth-child(1) .search-start-num { color: #dff36a !important; }

html[data-theme="light"] body.search-page .search-start-tile:not(:nth-child(1)) .search-start-num { color: #176c48 !important; }
html[data-theme="dark"] body.search-page .search-start-tile:not(:nth-child(1)) .search-start-num { color: #9ee6bb !important; }
html[data-theme="light"] body.search-page .search-start-tile:not(:nth-child(1)) .search-start-copy { color: #43574c !important; }
html[data-theme="dark"] body.search-page .search-start-tile:not(:nth-child(1)) .search-start-copy { color: #b7c8bf !important; }

/* The library: one block per section, so the bottom of the page is labelled. */
body.search-page .search-library { padding-block: clamp(40px, 5vw, 70px) !important; }
body.search-page .search-group { padding: 0 !important; margin-bottom: clamp(30px, 4vw, 48px); background: none !important; }
body.search-page .search-group-head { display: flex; align-items: center; gap: 12px; }
body.search-page .search-group-head h2 {
  margin: 0;
  font-size: clamp(1.2rem, 2vw, 1.6rem) !important;
  letter-spacing: -.03em;
}
body.search-page .search-group-count {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: max(.74rem, 12px);
  font-weight: 850;
}
html[data-theme="light"] body.search-page .search-group-count { color: #0d3b2a !important; background: rgba(19,73,48,.1) !important; }
html[data-theme="dark"] body.search-page .search-group-count { color: #d9f0e3 !important; background: rgba(214,244,226,.12) !important; }
body.search-page .search-group-note { margin: .35rem 0 1rem; font-size: .93rem; }
body.search-page .search-hits { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 12px; }
body.search-page .search-hit {
  display: grid;
  gap: 5px;
  align-content: start;
  padding: 16px 18px;
  border: 1px solid var(--u-line);
  border-radius: 16px;
  background: var(--u-surface);
  color: inherit !important;
  text-decoration: none !important;
  transition: transform .28s ease, border-color .2s ease, background .2s ease;
}
body.search-page .search-hit:hover { transform: translateY(-3px); border-color: rgba(36, 122, 84, .34); }
body.search-page .search-hit-name {
  font-size: max(1rem, 15.5px);
  font-weight: 830;
  letter-spacing: -.02em;
  line-height: 1.3;
  text-decoration: none !important;
}
body.search-page .search-hit-copy { font-size: .89rem; line-height: 1.5; }
html[data-theme="light"] body.search-page :is(.search-hit-copy, .search-group-note) { color: #43574c !important; }
html[data-theme="dark"] body.search-page :is(.search-hit-copy, .search-group-note) { color: #b7c8bf !important; }
body.search-page .search-results-actions { display: flex; justify-content: center; margin-top: 8px; }

@media (max-width: 900px) {
  body.search-page .search-start-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.search-page .search-start-tile,
  body.search-page .search-start-tile:nth-child(1),
  body.search-page .search-start-tile:nth-child(2) { grid-column: span 2; min-height: 0; }
}
body.search-page .search-group-more {
  margin: 12px 0 0;
  font-size: .86rem;
  font-weight: 750;
}
html[data-theme="light"] body.search-page .search-group-more { color: #43574c !important; }
html[data-theme="dark"] body.search-page .search-group-more { color: #b7c8bf !important; }

/* ======================================================================
 * Homepage hero details.
 * ====================================================================== */

/* The arrow on "Find my meal" is a <span>, and the hero's rule for spans
   painted it the same pale mint as the hero's body copy -- on a lime button
   that is almost invisible. Anything inside a button takes the button's own
   colour, not the section's. */
html[data-theme] body.site-v3 :is(.btn, button.btn, a.btn) :is(span, b, strong, small) {
  color: inherit !important;
}
body.site-v3 .gm6-arrow { font-weight: 700; }

/* The calories chip.
 *
 * It was filled with the neon lime used for buttons, which made the number on
 * it hard to read and gave the panel two competing accents. A mid jade reads
 * clearly with white on it, still marks the chip as the headline figure, and
 * is plainly distinct from the near-black forest of the other two. */
body.site-v3 .gm6-macro-score span:first-child {
  background: #1f7a52 !important;
  border-color: rgba(255, 255, 255, .18) !important;
}
html[data-theme] body.site-v3 main .gm6-hero .gm6-macro-score span:first-child,
html[data-theme] body.site-v3 main .gm6-hero .gm6-macro-score span:first-child :is(b, small) {
  color: #ffffff !important;
}
/* The other two chips are translucent over the hero gradient, so their labels
   are measured against its lightest stop: #cfe0d7 came to 4.21:1 there. */
html[data-theme] body.site-v3 main .gm6-hero .gm6-macro-score span:not(:first-child),
html[data-theme] body.site-v3 main .gm6-hero .gm6-macro-score span:not(:first-child) small {
  color: #dff0e7 !important;
}

/* "104 g" was breaking after the number because the chip is narrower than the
   figure at full size. The value stays on one line and the columns share the
   row evenly. */
body.site-v3 .gm6-macro-score { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
body.site-v3 .gm6-macro-score b {
  white-space: nowrap;
  font-size: clamp(1.3rem, 2.1vw, 1.85rem) !important;
}

/* ======================================================================
 * Mobile.
 *
 * The homepage ran 12,300px on a 390px screen, and roughly a tenth of that was
 * section padding alone: ten sections at 58px top and bottom. Everything here
 * buys back vertical space without shrinking anything below its readable size
 * -- body copy, headings and controls keep their sizes; the air between them
 * is what tightens.
 * ====================================================================== */
@media (max-width: 760px) {
  body.site-v3 main > section,
  body.site-v3 main > div > section { padding-block: 46px !important; }
  body.site-v3 main > section[class*="hero"],
  body.site-v3 main > .hero,
  body.site-v3 .page-hero { padding-block: 56px 52px !important; }

  /* The hero lede was four lines at 1.7 leading before the buttons appeared. */
  body.site-v3 :is(.gm6-hero-lede, .eatout-lede, .hero-lede) {
    font-size: 1.02rem !important;
    line-height: 1.55 !important;
  }
  body.site-v3 main > section[class*="hero"] p { line-height: 1.55; }

  /* Proof figures read as a compact pair of rows rather than four blocks. */
  body.site-v3 .gm6-proof { gap: 1rem 1.6rem; margin-top: 2rem; }
  body.site-v3 .gm6-proof strong { font-size: 1.1rem; }
  body.site-v3 .gm6-proof span { font-size: .82rem; line-height: 1.3; }

  /* Section intros and grids: the gaps were tuned for a 1280px canvas. */
  body.site-v3 .gm6-section-intro { margin-bottom: 1.8rem !important; gap: 1rem !important; }
  body.site-v3 :is(.gm6-tool-bento, .gm6-learning-grid, .guide-grid, .explore-grid,
    .tool-grid, .goal-grid, .chain-grid, .card-grid, .blog-grid, .search-hits) { gap: 12px !important; }
  body.site-v3 .gm6-tool { min-height: 0 !important; padding: 20px !important; }
  body.site-v3 .gm6-tool:first-child { min-height: 0 !important; }
  body.site-v3 .gm6-tool h3,
  body.site-v3 .gm6-tool:first-child h3 { margin: .8rem 0 .4rem; font-size: clamp(1.3rem, 5.6vw, 1.7rem) !important; }

  /* Stacked call-to-action buttons keep a comfortable height without becoming
     a column of slabs. */
  body.site-v3 :is(.gm6-hero-actions, .focus-actions, .hero-actions) .btn {
    width: 100%;
    min-height: 52px;
    justify-content: center;
  }
}

@media (max-width: 560px) {
  body.site-v3 main > section,
  body.site-v3 main > div > section { padding-block: 40px !important; }
  body.site-v3 .container { padding-inline: 16px !important; }
}

/* Hero steps: what the tool does, in three lines, above the button that does
   it. On a phone the headline and one line of copy were the whole first
   screen, and neither said this is a meal finder. */
body.site-v3 .gm6-hero-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
body.site-v3 .gm6-hero-steps li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: max(.92rem, 14px);
  line-height: 1.3;
  color: #dff0e7 !important;
}
body.site-v3 .gm6-hero-steps b {
  display: grid;
  place-items: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(216, 255, 134, .16);
  color: #dff36a !important;
  font-size: .8rem;
  font-weight: 850;
}

/* Clearance under the sticky header.
 *
 * The header is 73px tall and the hero slides under it, so a 56px top padding
 * put the kicker directly behind the bar -- on a phone the first line of the
 * page was unreadable. Heroes clear the header plus breathing room. */
@media (max-width: 760px) {
  body.site-v3 main > section[class*="hero"],
  body.site-v3 main > .hero,
  body.site-v3 .page-hero,
  body.site-v3 main > article > header[class*="hero"],
  body.site-v3 main > header[class*="hero"] { padding-block: 108px 48px !important; }
  body.site-v3 .gm6-hero-steps { gap: 9px 16px; margin-top: 1.3rem; }
  body.site-v3 .gm6-hero-steps li { width: 100%; }
}

/* The hero headline was sized for the three short words of the old slogan --
   84px at desktop, capped at a 10ch measure. The headline states the offer now,
   which is a sentence, so at that size it ran to four lines and its last line
   crowded the lede. A slightly smaller face on a wider measure sets it in three
   with room underneath. Scoped above the mobile breakpoint so the phone keeps
   its own scale. */
@media (min-width: 761px) {
  body.site-v3 .gm6-hero h1 {
    max-width: 15ch !important;
    font-size: clamp(2.9rem, 5.1vw, 4.6rem) !important;
    margin-bottom: 1.9rem;
  }
}

/* Three steps read as three steps: an even row on a wide screen, one per line
   on a narrow one. Left to wrap they broke two-then-one, which looked like a
   mistake rather than a sequence. */
body.site-v3 .gm6-hero-steps {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  align-items: start;
  gap: 12px 18px;
}

/* Three proof points sit as three columns rather than two-then-one, which read
   as an item that had fallen off the row. */
@media (min-width: 761px) {
  body.site-v3 .gm6-proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.4rem 2rem;
  }
}

/* ======================================================================
 * Quiz options.
 * ====================================================================== */

/* The selection effect was doing too much: a 4px lift on hover, a second lift
   when checked, a 34px shadow, and the icon rotating and morphing from a
   rounded square to a circle -- all over half a second. Choosing an answer
   should feel like a switch closing, not like the card taking off. The state
   is still unmistakable, it just arrives quickly and stays put. */
body.site-v3 .quiz-option {
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease !important;
}
body.site-v3 .quiz-option:hover {
  transform: none !important;
  box-shadow: 0 4px 14px rgba(6, 39, 30, .06) !important;
}
body.site-v3 .quiz-option:has(input:checked) {
  transform: none !important;
  box-shadow: none !important;
}
body.site-v3 .quiz-option:hover .option-icon {
  transform: none !important;
  border-radius: 16px !important;
}
body.site-v3 .option-icon { transition: background .16s ease, color .16s ease !important; }
body.site-v3 .quiz-option:active { transform: scale(.994) !important; transition-duration: .06s !important; }

/* A tapped option is a control, not a paragraph.
 *
 * Tapping quickly, or tapping and holding, made the browser treat the label as
 * text and draw its own selection box around the words -- a blue rectangle on
 * the platforms whose selection colour is not styled by the page. Controls do
 * not need to be selectable, and the highlight is cleared on the children too,
 * since the rule elsewhere only covers the label itself. */
body.site-v3 :is(.quiz-option, .quiz-chip, .mm-chip, .sex-choice-row label, .units-toggle button),
body.site-v3 :is(.quiz-option, .quiz-chip, .mm-chip, .sex-choice-row label, .units-toggle button) * {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

/* Keyboard focus stays clearly visible, in the site's own colour rather than
   whatever ring the browser would draw. */
body.site-v3 .quiz-option:has(input:focus-visible) {
  outline: 3px solid #2f8f63 !important;
  outline-offset: 3px !important;
}
html[data-theme="dark"] body.site-v3 .quiz-option:has(input:focus-visible) {
  outline-color: #9ee6bb !important;
}

/* Text is never dimmed with opacity.
 *
 * .eyebrow carried opacity .92 and .gm6-choice small carried .78, which cost
 * them 0.5 and 2.7 points of contrast respectively while leaving the declared
 * colour looking fine -- the reason a palette review kept passing text that
 * measured under the floor once it was actually painted. Where those elements
 * need to read quieter than their neighbours, the colour says so. */
body.site-v3 :is(.eyebrow, .gm6-choice small, .gm6-arrow) { opacity: 1 !important; }
html[data-theme="light"] body.site-v3 .gm6-choice:not(.is-selected) small { color: #43574c !important; }
html[data-theme="dark"] body.site-v3 .gm6-choice:not(.is-selected) small { color: #b7c8bf !important; }

/* ======================================================================
 * The purpose line.
 *
 * Someone arriving on a restaurant guide or an article from a search result
 * had no way to tell what GetMacros is for without going to the homepage. One
 * quiet line under the header says it and offers the tool in the same breath.
 * It sits outside the sticky bar so it scrolls away and never costs height
 * twice, and it is hidden where it would be redundant: the homepage hero says
 * all of this at length, and on the finder you are already using the thing.
 * ====================================================================== */
body.site-v3 .site-purpose {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 14px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 9px 18px 0;
  font-size: max(.82rem, 13px);
  line-height: 1.45;
  text-align: center;
}
body.site-v3 .site-purpose a {
  font-weight: 820;
  text-decoration: none !important;
  white-space: nowrap;
}
html[data-theme="light"] body.site-v3 .site-purpose { color: #3f5c4e; }
html[data-theme="light"] body.site-v3 .site-purpose a { color: #14683f !important; }
html[data-theme="dark"] body.site-v3 .site-purpose { color: #b7c8bf; }
html[data-theme="dark"] body.site-v3 .site-purpose a { color: #9ee6bb !important; }
body.home-studio .site-purpose,
body.order-match-page .site-purpose { display: none !important; }
@media (max-width: 560px) {
  body.site-v3 .site-purpose { padding: 8px 14px 0; font-size: max(.79rem, 12.5px); }
}

/* The blue box around the quiz question.
 *
 * Each step moves focus to its <h2 tabindex="-1"> so a screen reader announces
 * the new question. That is right, but the heading is an announcement target,
 * not a control, and the browser drew a focus ring around it: unified-v7 sets
 * `:focus-visible { outline: 3px solid var(--u-aqua) }` with !important, and
 * --u-aqua is #8de6da -- a pale cyan. site-v3.css does try to clear it, but at
 * two classes against two classes plus !important it never won.
 *
 * Rings stay everywhere they mean something. A heading that was focused by
 * script, rather than by the person navigating, is not one of those places. */
body.site-v3 :is(h1, h2, h3, h4)[tabindex="-1"]:focus,
body.site-v3 :is(h1, h2, h3, h4)[tabindex="-1"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* And when a ring does show, it is the site's green rather than a cyan that
   belongs to no other part of the page. Both values clear 3:1 against the
   surfaces they are drawn on. */
html[data-theme="light"] body.site-v3 :focus-visible { outline-color: #1c7a52 !important; }
html[data-theme="dark"] body.site-v3 :focus-visible { outline-color: #9ee6bb !important; }

/* ======================================================================
 * One opening: the hero and the tools it promises.
 *
 * The tools bento used to be its own section under the heading "Less clutter.
 * Better decisions." -- a design principle, not a thing anyone was looking
 * for, sitting between the offer and the tools that deliver it. The heading is
 * gone and the two run together on one ground, so opening the site shows what
 * it does and every tool that does it without a scroll or a seam.
 * ====================================================================== */
html body.site-v3.home-studio main > section.gm6-hero {
  border-radius: 0 !important;
  padding-bottom: clamp(34px, 4vw, 54px) !important;
}
html[data-theme] body.site-v3.home-studio main > section.gm6-tools.gm6-tools-joined:nth-of-type(n) {
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: clamp(64px, 8vw, 104px) !important;
  border-radius: 0 0 clamp(30px, 5vw, 62px) clamp(30px, 5vw, 62px) !important;
  background:
    radial-gradient(circle at 82% 6%, rgba(141, 230, 218, .12), transparent 24rem),
    linear-gradient(180deg, #154a35 0%, #10412f 55%, #0b3324 100%) !important;
}
html body.site-v3.home-studio .gm6-tools-lead {
  max-width: 56ch;
  margin: 0 0 clamp(22px, 3vw, 34px);
  font-size: max(1rem, 15.5px);
  color: #dff0e7 !important;
}

/* The cards read as glass on the dark ground rather than paper cut-outs. */
html body.site-v3.home-studio .gm6-tools-joined .gm6-tool {
  border-color: rgba(214, 244, 226, .17) !important;
  background: rgba(255, 255, 255, .055) !important;
  backdrop-filter: blur(9px);
  color: #eaf6ef !important;
}
html body.site-v3.home-studio .gm6-tools-joined .gm6-tool:first-child {
  background: rgba(216, 255, 134, .1) !important;
  border-color: rgba(216, 255, 134, .3) !important;
}
html body.site-v3.home-studio .gm6-tools-joined .gm6-tool :is(h3, h4, strong, b) { color: #ffffff !important; }
html body.site-v3.home-studio .gm6-tools-joined .gm6-tool p { color: #cfe3d8 !important; }
html[data-theme] body.site-v3.home-studio .gm6-tools-joined a.gm6-tool .gm6-tool-num { color: #d8ff86 !important; }
html body.site-v3.home-studio .gm6-tools-joined .gm6-tool-icon {
  background: rgba(216, 255, 134, .16) !important;
  color: #eaf6ef !important;
}
html body.site-v3.home-studio .gm6-tools-joined .gm6-tool:hover {
  border-color: rgba(216, 255, 134, .42) !important;
  background: rgba(255, 255, 255, .085) !important;
}

/* Chain tiles on the restaurant step.
 *
 * Initials in the chain's signature colour rather than its logo: we hold no
 * licence to redistribute another company's mark, and third-party media
 * republished without rights is exactly what an ad review flags. The initials
 * plus the colour still let you find a chain at a glance, which is the job. */
body.site-v3 .option-chain-mark {
  display: grid !important;
  place-items: center;
  font-size: max(.86rem, 13.5px);
  font-weight: 900;
  letter-spacing: .01em;
  color: #14301f !important;
  background: var(--chain-tone, #e3efe8) !important;
  border-radius: 14px;
}
html[data-theme="dark"] body.site-v3 .option-chain-mark {
  color: #14301f !important;
  filter: saturate(.95);
}

/* ======================================================================
 * Motion.
 *
 * The site had grown twelve transition durations and six easing curves, so
 * every component moved at its own speed and nothing felt like one product:
 * a card lifted over .48s next to a button that changed colour in .12s. Three
 * tiers, one curve, applied last so it settles the whole cascade.
 *
 *   state  170ms  colour, background, border, selection -- feedback
 *   move   320ms  lifts, panels, anything that changes position
 *   enter  560ms  scroll reveals, which are longer because they are further
 *
 * Distances are capped too. A 4-5px hover lift on one card and 2px on another
 * reads as inconsistency rather than depth.
 * ====================================================================== */
:root {
  --gm-ease: cubic-bezier(.22, 1, .36, 1);
  --gm-state: .17s;
  --gm-move: .32s;
  --gm-enter: .56s;
}

body.site-v3 :is(a, button, .btn, .chip, .tab, .quiz-option, .search-hit,
  .search-start-tile, .gm6-tool, .guide-card, .blog-card, .tool-card, .goal-card,
  .chain-card, .result-card, .explore-card, .pick-card, .meal-card, .tool-group,
  .nav-group-trigger, .nav-direct, .theme-toggle, .nav-toggle, .option-icon,
  .calc-nav a, .tool-links a, .ranking-more, input, select, textarea) {
  transition-duration: var(--gm-state) !important;
  transition-timing-function: var(--gm-ease) !important;
}

/* Anything that moves gets the slower tier, so a lift never snaps. */
body.site-v3 :is(.search-hit, .search-start-tile, .gm6-tool, .guide-card,
  .blog-card, .tool-card, .goal-card, .chain-card, .result-card, .explore-card,
  .pick-card, .meal-card, .tool-group, .gm6-finder-shell, .gm6-compare-shell):hover {
  transition-duration: var(--gm-move) !important;
}

/* One lift distance, everywhere. */
body.site-v3 :is(.search-hit, .search-start-tile, .gm6-tool, .guide-card,
  .blog-card, .tool-card, .goal-card, .chain-card, .result-card, .explore-card,
  .pick-card, .meal-card, .tool-group):hover {
  transform: translate3d(0, -3px, 0) !important;
}
body.site-v3 :is(.btn, button.btn, a.btn):hover { transform: translate3d(0, -2px, 0) !important; }
body.site-v3 :is(.btn, button.btn, a.btn):active { transform: translate3d(0, 0, 0) scale(.985) !important; transition-duration: .07s !important; }

/* Reveals: one duration and one curve, so a page enters as a piece rather than
   as a dozen elements arriving on their own schedules. */
body.site-v3 :is(.u-reveal, .calc-reveal, .studio-reveal) {
  transition-duration: var(--gm-enter) !important;
  transition-timing-function: var(--gm-ease) !important;
}

/* The hero's ambient blobs are deliberately left alone. A rule here tried to
   normalise them to one 26s duration, which was wrong twice: pseudo-elements
   are not valid inside :is(), so it never applied, and had it applied it would
   have locked 21s and 27s into lockstep. Two blobs drifting on coprime
   durations never repeat the same frame; two on the same duration pulse
   together, which is the one thing background texture must not do. */

@media (prefers-reduced-motion: reduce) {
  body.site-v3 :is(.search-hit, .search-start-tile, .gm6-tool, .guide-card,
    .blog-card, .tool-card, .goal-card, .chain-card, .result-card, .explore-card,
    .pick-card, .meal-card, .tool-group, .btn, button.btn, a.btn):hover {
    transform: none !important;
  }
}

/* ---------------------------------------------------------------------------
   Cross-links between the calculators.
   .tool-grid and .tool-card are defined in recovery.css, which only the
   restaurant and focus pages load -- so on a tool page the band rendered as a
   bare stack of headings. Rather than pull a whole page-level stylesheet onto
   pages that were never built for it, the band carries its own styles here, in
   the sheet every page already loads last, and reads its colours from the
   unified tokens so both themes come out right without a second block.
--------------------------------------------------------------------------- */
body .gm-sibling-tools {
  padding: clamp(48px, 7vw, 84px) 0;
  border-top: 1px solid var(--u-line, rgba(19, 73, 48, .14));
}
body .gm-sibling-tools .section-head {
  max-width: 60ch;
  margin: 0 0 clamp(20px, 3vw, 30px);
}
body .gm-sibling-tools .section-head h2 {
  margin: .3rem 0 .6rem;
  font-size: clamp(1.5rem, 3.2vw, 2.05rem);
  color: var(--u-ink, #10251b);
}
body .gm-sibling-tools .section-head p {
  margin: 0;
  color: var(--u-muted, #486157);
  font-size: 1rem;
  line-height: 1.6;
}
body .gm-sibling-tools .tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 16px;
  align-items: stretch;
}
body .gm-sibling-tools a.tool-card {
  display: block;
  padding: 22px 22px 20px;
  border: 1px solid var(--u-line, rgba(19, 73, 48, .14));
  border-radius: 20px;
  background: var(--u-surface, #fff);
  box-shadow: var(--u-shadow-sm, 0 10px 28px rgba(20, 57, 39, .08));
  text-decoration: none;
  transition: transform var(--gm-move, .32s) var(--gm-ease, ease),
              border-color var(--gm-state, .17s) var(--gm-ease, ease),
              box-shadow var(--gm-move, .32s) var(--gm-ease, ease);
}
body .gm-sibling-tools a.tool-card:hover,
body .gm-sibling-tools a.tool-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--u-mint, #247a54);
  box-shadow: var(--u-shadow, 0 22px 60px rgba(20, 57, 39, .12));
}
body .gm-sibling-tools a.tool-card h3 {
  margin: 0 0 .4rem;
  font-size: 1.06rem;
  line-height: 1.3;
  color: var(--u-ink, #10251b);
}
body .gm-sibling-tools a.tool-card p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--u-muted, #486157);
}
body .gm-sibling-tools .metric-note {
  margin: clamp(18px, 2.6vw, 26px) 0 0;
  font-size: .95rem;
}
@media (prefers-reduced-motion: reduce) {
  body .gm-sibling-tools a.tool-card:hover,
  body .gm-sibling-tools a.tool-card:focus-visible { transform: none; }
}

/* ---------------------------------------------------------------------------
   The three-meal comparison, on a phone.
   The shell is overflow-x:auto over 690px-wide rows, so at 390px it shows
   "Meal" and "Calories" and hides Protein and Fiber off the right edge with
   nothing to say they are there. The table is not broken -- it scrolls, and
   keyboard users get it through role="region" and tabindex -- but a column
   that silently disappears reads as a column that does not exist. A fade at
   the edge shows the content continues; the line underneath says how to reach
   it. Both are mobile-only: on desktop all four columns already fit.
--------------------------------------------------------------------------- */
body.site-v3 .gm6-compare-hint { display: none; }
@media (max-width: 900px) {
  body.site-v3 .gm6-compare-shell {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
  }
  body.site-v3 .gm6-compare-hint {
    display: block;
    margin: 12px 2px 0;
    font-size: .88rem;
    color: var(--u-muted, #486157);
  }
}

/* ---------------------------------------------------------------------------
   Links inside the joined tools band.
   The band is a dark forest gradient in BOTH themes, but only the dark theme
   lightens link colour -- so a link added to the lead paragraph inherited the
   light theme's `main a` green and drew #176c48 on #154a35, which is 1.59:1.
   The band's own text is already light; its links have to be too, regardless
   of which theme is active. #a8f0bd is what the dark theme resolves to here
   and is 7.69:1 on the band, so both themes now agree on it.
--------------------------------------------------------------------------- */
body.site-v3 .gm6-tools :is(.gm6-tools-lead, .gm6-section-intro) a {
  color: #a8f0bd !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
body.site-v3 .gm6-tools :is(.gm6-tools-lead, .gm6-section-intro) a:hover,
body.site-v3 .gm6-tools :is(.gm6-tools-lead, .gm6-section-intro) a:focus-visible {
  color: #dff0e7 !important;
}