/* ============================================================
   GLOW — DESIGN SYSTEM (2026)
   The single source of truth for the GLOW look & feel.
   Loaded LAST on every page so it unifies the site; it is the
   ONLY design stylesheet on rebuilt pages (homepage + hubs).

   Contents
     1. Tokens
     2. Base & typography
     3. Layout
     4. Chrome: header / nav / footer  (overrides legacy dark chrome)
     5. Buttons, links, chips, breadcrumb
     6. GLOW Score badge (one badge, everywhere)
     7. Cards
     8. Hero & section components (g- prefix, for rebuilt pages)
     9. Prose (guides / editorial)
    10. Utilities & motion
   ============================================================ */

/* ---------- 1. TOKENS ---------------------------------------- */
:root {
  /* Ink / neutrals */
  --ink:        #17120E;   /* primary text, near-black warm charcoal */
  --ink-2:      #463E37;   /* secondary text */
  --muted:      #786F66;   /* meta / muted */
  --paper:      #FFFFFF;
  --porcelain:  #f6f6f7;   /* warm off-white section background */
  --sand:       #ececee;   /* slightly deeper neutral panel */
  --line:       rgba(23,18,14,0.10);
  --line-2:     rgba(23,18,14,0.16);

  /* Single warm accent — used sparingly; imagery carries the colour */
  --accent:      #9A6A4B;  /* warm bronze */
  --accent-deep: #7B5236;
  --accent-soft: #f0eff1;  /* accent tint background */
  --accent-ring: rgba(154,106,75,0.30);

  /* Neutralise the legacy coral system → one warm accent (overrides
     coral-accent.css :root tokens, which load earlier). */
  --glow-coral:      #9A6A4B;
  --glow-coral-deep: #7B5236;
  --glow-coral-soft: #f0eff1;
  --glow-coral-tint: #F6EFE7;

  /* Score cue (kept quiet) */
  --score-ink:  #17120E;

  /* Radii */
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --pill: 999px;

  /* Elevation (subtle) */
  --sh-sm: 0 1px 2px rgba(23,18,14,0.05);
  --sh:    0 8px 30px rgba(23,18,14,0.08);
  --sh-lg: 0 18px 50px rgba(23,18,14,0.12);

  /* Type scale */
  --fs-hero:    clamp(2.6rem, 6vw, 4.5rem);
  --fs-h1:      clamp(2.05rem, 4.4vw, 3.3rem);
  --fs-h2:      clamp(1.65rem, 3.1vw, 2.5rem);
  --fs-h3:      clamp(1.25rem, 2vw, 1.6rem);
  --fs-lead:    clamp(1.05rem, 1.5vw, 1.25rem);
  --fs-body:    1.0625rem;
  --fs-sm:      0.9rem;
  --fs-xs:      0.78rem;
  --fs-eyebrow: 0.72rem;

  /* Layout */
  --maxw: 1240px;
  --gutter: clamp(1rem, 4vw, 2.25rem);
  --nav-h: 60px;
}

/* ---------- 2. BASE & TYPOGRAPHY ----------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

html body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

html body h1, html body h2, html body h3, html body h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}
html body h1 { font-size: var(--fs-h1); }
html body h2 { font-size: var(--fs-h2); }
html body h3 { font-size: var(--fs-h3); line-height: 1.18; }
html body p { margin: 0 0 1rem; }

/* Force the editorial display face on every heading, beating legacy
   per-template classes (e.g. .agv7-hero__h1) that pin Lexend Deca/sans. */
html body h1, html body h2, html body h3, html body h4,
html body [class*="hero__h1"], html body [class*="-hero__h"] {
  font-family: var(--font-display) !important;
}

html body em, html body i { font-style: italic; }

html body a { color: inherit; text-decoration: none; }
html body img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--accent-soft); color: var(--ink); }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---------- 3. LAYOUT ---------------------------------------- */
.wrap, .g-container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.g-narrow { max-width: 760px; margin-inline: auto; }

.g-section { padding-block: clamp(2.75rem, 7vw, 5.5rem); }
.g-section--alt { background: var(--porcelain); }
.g-section--sand { background: var(--sand); }
.g-section--ink { background: var(--ink); color: #f4f4f5; }
.g-section--ink h2, .g-section--ink h3 { color: #fff; }

.g-section__head { max-width: 720px; margin: 0 auto clamp(1.75rem, 4vw, 2.75rem); text-align: center; }
.g-section__head--left { text-align: left; margin-inline: 0; }

.g-eyebrow, .g-section-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.85rem;
}
.g-h2 { font-size: var(--fs-h2); margin: 0; }
.g-sub { font-size: var(--fs-lead); color: var(--ink-2); margin: 0.9rem 0 0; line-height: 1.55; }
.g-rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- 4. CHROME (overrides legacy dark chrome) --------- */
/* Utility bar */
html body .utility-bar {
  background: var(--ink) !important;
  color: rgba(255,255,255,0.72) !important;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
  border: 0 !important;
}
html body .utility-bar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 0.5rem; flex-wrap: wrap;
}
html body .utility-bar .util-trust { letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.66rem; color: rgba(255,255,255,0.6) !important; }
html body .utility-bar .util-right { display: inline-flex; gap: 1.25rem; }
html body .utility-bar a { color: rgba(255,255,255,0.78) !important; padding: 0 !important; }
html body .utility-bar a:hover { color: #fff !important; }

/* Masthead — light, airy, charcoal wordmark */
html body .masthead {
  background: var(--paper) !important;
  color: var(--ink) !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--line);
}
html body .masthead .wrap { padding-block: 0; }
html body .masthead-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 76px;
  gap: 1rem;
}
html body .masthead-burger {
  grid-column: 1; justify-self: start;
  display: inline-flex; flex-direction: column; gap: 4px;
  background: none; border: 0; cursor: pointer; padding: 8px;
}
html body .masthead-burger span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; display: block; }
html body .glow-wordmark-link, html body .brand-lockup { grid-column: 2; justify-self: center; }
/* Masthead wordmark uses the black SVG (swapped in by the chrome sweep) */
html body .masthead .glow-wordmark-img { height: 30px !important; width: auto !important; }
html body .masthead-search-btn {
  grid-column: 3; justify-self: end;
  background: none; border: 0; cursor: pointer; color: var(--ink); padding: 8px;
  display: inline-flex; align-items: center;
}

/* Sticky header wrapper behaviour for masthead+nav (best effort) */
html body .masthead, html body .review-nav { position: relative; z-index: 40; }

/* Primary nav */
html body .review-nav {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--line);
  padding: 0 !important;
  display: block !important;   /* beat legacy rules that hide it on some templates */
}
html body .review-nav .wrap { padding-block: 0; }
html body .review-nav .nav-links {
  display: flex !important;    /* beat legacy max-width display:none on agv7 pages */
  justify-content: center; align-items: stretch;
  gap: clamp(1rem, 3vw, 2.25rem);
  flex-wrap: nowrap;
  overflow-x: auto;
  -ms-overflow-style: none; scrollbar-width: none;
}
html body .review-nav .nav-links::-webkit-scrollbar { display: none; }
html body .review-nav .nav-links a {
  font-family: var(--font-body) !important;
  color: var(--ink) !important;
  text-transform: uppercase;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  white-space: nowrap;
  padding: 1.05rem 0;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
html body .review-nav .nav-links a:hover,
html body .review-nav .nav-links a[aria-current="page"] {
  color: var(--accent) !important;
  border-bottom-color: var(--accent);
}

/* Secondary discovery strip — slim, quiet, scrollable */
html body .glow-subnav {
  background: var(--porcelain) !important;
  border-bottom: 1px solid var(--line);
}
html body .glow-subnav__links {
  display: flex; gap: 1.4rem; align-items: center;
  overflow-x: auto; scrollbar-width: none; padding-block: 0.6rem;
}
html body .glow-subnav__links::-webkit-scrollbar { display: none; }
html body .glow-subnav__links a {
  font-family: var(--font-body) !important;
  font-size: 0.82rem; color: var(--muted) !important; white-space: nowrap;
}
html body .glow-subnav__links a:hover { color: var(--ink) !important; }
html body .glow-subnav__lead { color: var(--accent) !important; font-weight: 600 !important; }

/* Footer — dark, grounding */
html body .footer {
  background: var(--ink) !important;
  color: rgba(255,255,255,0.66);
  padding: clamp(2.75rem, 6vw, 4.5rem) 0 2.5rem !important;
  font-family: var(--font-body);
}
html body .footer .wrap { max-width: var(--maxw); }
html body .footer-mast { display: flex; flex-direction: column; gap: 1rem; max-width: 620px; }
html body .footer .footer-wordmark-link img { height: 30px !important; width: auto !important; }
html body .footer-rule { height: 1px; background: rgba(255,255,255,0.14); width: 100%; }
html body .footer-dek { color: rgba(255,255,255,0.72); font-size: var(--fs-sm); max-width: 46ch; }
html body .footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.75rem 1.5rem;
  margin-top: clamp(2rem, 5vw, 3.25rem);
}
html body .footer-grid h5 {
  font-family: var(--font-body); color: #fff; font-size: 0.7rem;
  letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
  margin: 0 0 1rem;
}
html body .footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
html body .footer-grid a { color: rgba(255,255,255,0.66); font-size: 0.9rem; }
html body .footer-grid a:hover { color: #fff; }
html body .footer .colophon { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.5rem; font-size: 0.8rem; color: rgba(255,255,255,0.5); }
html body .footer .colophon a { color: inherit; }
html body .footer .colophon a:hover { color: #fff; }

.gl-skip, .skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 0.75rem 1.25rem; border-radius: 0 0 var(--r-sm) 0;
}
.gl-skip:focus, .skip-link:focus { left: 0; }

/* ---------- 5. BUTTONS / LINKS / CHIPS / BREADCRUMB ---------- */
.g-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-body); font-size: 0.84rem; font-weight: 600;
  letter-spacing: 0.04em; line-height: 1;
  padding: 0.95rem 1.6rem; border-radius: var(--pill);
  border: 1px solid transparent; cursor: pointer; text-align: center;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.g-btn:hover { transform: translateY(-1px); }
.g-btn--primary { background: var(--ink); color: #fff; }
.g-btn--primary:hover { background: var(--accent-deep); }
.g-btn--secondary { background: transparent; color: var(--ink); border-color: var(--line-2); }
.g-btn--secondary:hover { border-color: var(--ink); }
.g-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.g-btn--ghost:hover { background: #fff; color: var(--ink); }
.g-btn--sm { padding: 0.6rem 1.1rem; font-size: 0.78rem; }
.g-btn--lg { padding: 1.05rem 2rem; font-size: 0.9rem; }

.g-link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  color: var(--accent); font-weight: 600; font-size: 0.9rem;
  border-bottom: 1px solid transparent; transition: border-color .15s ease;
}
.g-link:hover { border-bottom-color: var(--accent); }
.g-link .arrow { transition: transform .18s ease; }
.g-link:hover .arrow { transform: translateX(3px); }

.g-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.g-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 500;
  color: var(--ink-2); background: var(--paper);
  border: 1px solid var(--line-2); border-radius: var(--pill);
  padding: 0.5rem 1rem; transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.g-chip:hover { border-color: var(--ink); color: var(--ink); }
.g-chip--active { background: var(--ink); color: #fff; border-color: var(--ink); }

.g-breadcrumb { font-size: 0.8rem; color: var(--muted); padding-block: 1rem; }
.g-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; }
.g-breadcrumb li { display: inline-flex; gap: 0.45rem; align-items: center; }
.g-breadcrumb li:not(:last-child)::after { content: "/"; color: var(--line-2); }
.g-breadcrumb a { color: var(--muted); }
.g-breadcrumb a:hover { color: var(--accent); }
.g-breadcrumb [aria-current="page"] { color: var(--ink); }

/* ---------- 6. GLOW SCORE BADGE (one badge everywhere) ------- */
.g-score {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--paper); color: var(--score-ink);
  border: 1.5px solid var(--accent-ring);
  box-shadow: var(--sh-sm); text-align: center; flex: none;
}
.g-score__num { font-family: var(--font-display); font-size: 1.45rem; line-height: 1; font-weight: 500; }
.g-score__label {
  font-family: var(--font-body); font-size: 0.5rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-top: 2px;
}
.g-score--lg { width: 92px; height: 92px; }
.g-score--lg .g-score__num { font-size: 2.1rem; }
.g-score--lg .g-score__label { font-size: 0.58rem; }
.g-score--sm { width: 50px; height: 50px; }
.g-score--sm .g-score__num { font-size: 1.15rem; }
.g-score--sm .g-score__label { font-size: 0.44rem; }

/* Horizontal lockup variant: "9.2 / GLOW Score" */
.g-score-row { display: inline-flex; align-items: center; gap: 0.6rem; }
.g-score-row__num {
  font-family: var(--font-display); font-size: 2.2rem; line-height: 1; color: var(--ink);
}
.g-score-row__meta { display: flex; flex-direction: column; line-height: 1.1; }
.g-score-row__label { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.g-score-row__out { font-size: 0.72rem; color: var(--muted); }

/* --- Legacy score elements re-skinned to match --- */
html body .glow-score-chip {
  display: inline-flex; align-items: baseline; gap: 0.3rem;
  font-family: var(--font-display) !important; color: var(--ink) !important;
  background: var(--accent-soft) !important; border: 1px solid var(--accent-ring);
  border-radius: var(--pill); padding: 0.3rem 0.8rem; font-size: 1.1rem; font-weight: 500;
}
html body .glow-score-chip__small { font-family: var(--font-body) !important; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent) !important; }
html body .lv-card__score {
  background: var(--paper) !important; color: var(--ink) !important;
  border: 1.5px solid var(--accent-ring); box-shadow: var(--sh-sm);
  font-family: var(--font-display) !important; font-weight: 500;
  border-radius: 50%; min-width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- 7. CARDS ----------------------------------------- */
.g-grid { display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); }
.g-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.g-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.g-grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.g-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.g-card:hover { transform: translateY(-3px); box-shadow: var(--sh); border-color: var(--line-2); }
.g-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand); }
.g-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.g-card:hover .g-card__media img { transform: scale(1.04); }
.g-card__media--portrait { aspect-ratio: 4 / 5; }
.g-card__media--square { aspect-ratio: 1 / 1; }
.g-card__score { position: absolute; top: 0.85rem; right: 0.85rem; }
.g-card__body { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.g-card__eyebrow { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.g-card__title { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.2; color: var(--ink); margin: 0; }
.g-card__meta { font-size: var(--fs-sm); color: var(--muted); }
.g-card__verdict { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; }
.g-card__foot { margin-top: auto; padding-top: 0.4rem; }
.g-card__rank {
  position: absolute; top: 0.85rem; left: 0.85rem; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.05rem;
}

/* Category discovery card (image + label overlay) */
.g-cat {
  position: relative; display: block; border-radius: var(--r); overflow: hidden;
  aspect-ratio: 3 / 4; background: var(--sand);
  transition: transform .2s ease, box-shadow .2s ease;
}
.g-cat:hover { transform: translateY(-3px); box-shadow: var(--sh); }
.g-cat img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.g-cat:hover img { transform: scale(1.05); }
.g-cat__label {
  position: absolute; inset: auto 0 0 0; padding: 1.1rem 1rem;
  background: linear-gradient(to top, rgba(18,14,11,0.78), rgba(18,14,11,0));
  color: #fff; font-family: var(--font-display); font-size: 1.25rem; letter-spacing: 0.01em;
}
.g-cat--text {
  aspect-ratio: auto; display: flex; align-items: center; justify-content: center;
  padding: 1.5rem 1rem; background: var(--porcelain); border: 1px solid var(--line);
  text-align: center; font-family: var(--font-display); font-size: 1.2rem; color: var(--ink);
}
.g-cat--text:hover { background: var(--paper); border-color: var(--ink); }

/* Brand card — quieter, logo/name forward */
.g-card--brand .g-card__media { aspect-ratio: 16 / 10; background: var(--porcelain); }
.g-card--brand .g-card__media img { object-fit: cover; }

/* Related links block */
.g-related { border-top: 1px solid var(--line); padding-top: 1.5rem; margin-top: 2.5rem; }
.g-related__list { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.g-related a { display: flex; gap: 0.5rem; align-items: center; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); font-size: 0.92rem; transition: border-color .15s ease, background .15s ease; }
.g-related a:hover { border-color: var(--ink); background: var(--porcelain); }

/* ---------- 8. HERO & SECTION COMPONENTS --------------------- */
.g-hero { position: relative; overflow: hidden; background: var(--porcelain); }
.g-hero--image { color: #fff; }
.g-hero__bg { position: absolute; inset: 0; z-index: 0; }
.g-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.g-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,14,11,0.30), rgba(18,14,11,0.62)); }
.g-hero__inner { position: relative; z-index: 1; max-width: 760px; padding-block: clamp(3.5rem, 11vw, 8rem); }
.g-hero--center .g-hero__inner { margin-inline: auto; text-align: center; }
.g-hero__eyebrow { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin: 0 0 1.1rem; }
.g-hero--image .g-hero__eyebrow { color: #F0DCC8; }
.g-hero__title { font-family: var(--font-display); font-size: var(--fs-hero); line-height: 1.02; letter-spacing: -0.015em; margin: 0; color: inherit; }
.g-hero--image .g-hero__title { color: #fff; }
.g-hero__sub { font-size: var(--fs-lead); color: var(--ink-2); margin: 1.25rem 0 0; line-height: 1.5; }
.g-hero--image .g-hero__sub { color: rgba(255,255,255,0.88); }
.g-hero__cta { display: flex; gap: 0.85rem; flex-wrap: wrap; margin-top: 2rem; }
.g-hero--center .g-hero__cta { justify-content: center; }

/* ---------- 9. PROSE (guides / editorial) -------------------- */
.g-prose { max-width: 720px; margin-inline: auto; font-size: 1.1rem; line-height: 1.75; color: var(--ink-2); }
.g-prose > * + * { margin-top: 1.2rem; }
.g-prose h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 2.4rem; color: var(--ink); }
.g-prose h3 { font-size: 1.3rem; margin-top: 1.8rem; color: var(--ink); }
.g-prose a { color: var(--accent); border-bottom: 1px solid var(--accent-ring); }
.g-prose a:hover { border-bottom-color: var(--accent); }
.g-prose ul, .g-prose ol { padding-left: 1.25rem; }
.g-prose li { margin: 0.4rem 0; }
.g-prose blockquote {
  border-left: 3px solid var(--accent); padding-left: 1.25rem; margin-left: 0;
  font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); font-style: italic;
}
.g-prose img { border-radius: var(--r); margin-block: 1.75rem; }
.g-toc { background: var(--porcelain); border: 1px solid var(--line); border-radius: var(--r); padding: 1.25rem 1.5rem; font-size: 0.95rem; }
.g-toc h4 { font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.75rem; }
.g-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.g-toc a { color: var(--ink-2); }
.g-toc a:hover { color: var(--accent); }

/* FAQ */
.g-faq { display: grid; gap: 0; }
.g-faq details { border-bottom: 1px solid var(--line); padding: 1.1rem 0; }
.g-faq summary { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.g-faq summary::-webkit-details-marker { display: none; }
.g-faq summary::after { content: "+"; color: var(--accent); font-family: var(--font-body); }
.g-faq details[open] summary::after { content: "–"; }
.g-faq p { margin-top: 0.75rem; color: var(--ink-2); }

/* ---------- 10. UTILITIES & MOTION --------------------------- */
.g-center { text-align: center; }
.g-mt-0 { margin-top: 0; }
.g-stack { display: flex; flex-direction: column; gap: 1rem; }
.g-cta-row { display: flex; gap: 0.85rem; flex-wrap: wrap; }
.g-eyebrow-line { display: inline-flex; align-items: center; gap: 0.75rem; }

.g-reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.g-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .g-reveal { opacity: 1; transform: none; transition: none; }
}

/* --- Interactive megamenu (site.js .gnav) re-skinned to GLOW --- */
html body .review-nav .gnav {
  display: flex; justify-content: center; align-items: stretch;
  gap: clamp(1rem, 3vw, 2.25rem);
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
html body .review-nav .gnav::-webkit-scrollbar { display: none; }
html body .gnav__item { position: relative; }
html body .gnav__link {
  display: inline-flex; align-items: center;
  font-family: var(--font-body) !important;
  color: var(--ink) !important; text-transform: uppercase;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em;
  padding: 1.05rem 0; border-bottom: 2px solid transparent;
  background: none !important; transition: color .15s ease, border-color .15s ease;
}
/* Row affordance: hover, open state (is-open / aria-expanded), current */
html body .gnav__link:hover,
html body .gnav__item:hover .gnav__link,
html body .gnav__item.is-open > .gnav__link,
html body .gnav__link[aria-expanded="true"],
html body .gnav__link[aria-current="page"] {
  color: var(--accent) !important; border-bottom-color: var(--accent);
}
html body .gnav__link:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px;
}
/* Megapanel: assert positioning + visibility in the cascade-winning file so
   the design system no longer depends on legacy site-chrome-2026.css. */
html body .gnav__megapanel {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--paper); color: var(--ink);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--sh);
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s ease-out, transform .2s ease-out, visibility 0s linear .2s;
  z-index: 50;
}
html body .gnav__megapanel.is-open {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity .2s ease-out 60ms, transform .22s cubic-bezier(.22,.61,.36,1) 60ms, visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
  html body .gnav__megapanel,
  html body .gnav__megapanel.is-open { transition: opacity .12s linear; transform: none; }
}
html body .gnav__megapanel-inner { max-width: var(--maxw); margin-inline: auto; padding: clamp(1.5rem, 3vw, 2.5rem) var(--gutter); }
html body .gnav__cols { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3.5rem); }
html body .gnav__col-label, html body .gnav__pm-eyebrow, html body .gnav__edit-eyebrow, html body .gnav__brands-featured-label {
  font-family: var(--font-body); font-size: 0.66rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 0.85rem;
}
/* Dropdown link rows: padded, with a porcelain hover plate + focus ring */
html body .gnav__sub-list, html body .gnav__pm-list, html body .gnav__edit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
html body .gnav__sub-list a, html body .gnav__pm-list a, html body .gnav__edit-link, html body .gnav__megapanel a {
  color: var(--ink-2); font-size: 0.94rem; font-family: var(--font-body);
  display: block; padding: 0.45rem 0.55rem; margin-inline: -0.55rem;
  border-radius: 8px; transition: color .12s ease, background-color .12s ease;
}
html body .gnav__sub-list a:hover, html body .gnav__pm-list a:hover, html body .gnav__edit-link:hover,
html body .gnav__megapanel a:hover, html body .gnav__megapanel a:focus-visible {
  color: var(--accent); background: var(--porcelain);
}
html body .gnav__megapanel a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Inline nav search affordance (end of the .gnav row) */
html body .gnav__item--search { margin-left: auto; padding-left: clamp(1rem, 3vw, 2.25rem); }
html body .gnav__search {
  display: inline-flex; align-items: center; gap: .5rem;
  background: none; border: 0; cursor: pointer; color: var(--ink);
  font-family: var(--font-body); text-transform: uppercase;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em;
  padding: 0.55rem 0.75rem; border-radius: var(--pill);
  min-height: 44px; transition: color .15s ease, background-color .15s ease;
}
html body .gnav__search:hover { color: var(--accent); background: var(--porcelain); }
html body .gnav__search:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 900px) { html body .gnav__search-label { display: none; } }

/* --- Legacy hub CTA buttons — guarantee contrast under GLOW palette --- */
html body .rev-hero__pill--primary,
html body .rev-cta--primary,
html body .agv7-cta--primary,
html body a.btn-primary, html body .btn--primary {
  background: var(--ink) !important; color: #fff !important;
  border-color: var(--ink) !important;
}
html body .rev-hero__pill, html body .agv7-cta {
  border-radius: var(--pill);
}

/* --- Mobile drawer (site.js .gdrawer) re-skinned --- */
html body .gdrawer { background: var(--paper) !important; color: var(--ink) !important; }
html body .gdrawer a { color: var(--ink) !important; }
html body .gdrawer a:hover { color: var(--accent) !important; }
html body .gdrawer__panel, html body .gdrawer__inner { background: var(--paper) !important; }

/* ============================================================
   MOBILE DRAWER (CSS-only, no-JS fallback) .glow-mnav
   Driven by a hidden checkbox toggled by the burger <label>.
   Active <=900px only; desktop keeps .gnav / .nav-links row.
   Fixes the dead burger on the homepage and the 34 sweep-only
   pages, and gives every page a working menu without site.js.
   ============================================================ */
@media (max-width: 900px) {
  /* stop the horizontal-scroll nav trap: hide the inline row on mobile */
  html body .review-nav { display: none !important; }

  /* burger is the toggle; make it a real 44px target */
  html body .masthead-burger {
    display: inline-flex !important; width: 44px; height: 44px;
    align-items: center; justify-content: center; padding: 10px;
  }

  /* the checkbox + backdrop + panel injected after the burger */
  html body #glow-mnav-toggle { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
  html body .glow-mnav__backdrop {
    position: fixed; inset: 0; background: rgba(23,18,14,.5);
    opacity: 0; visibility: hidden; z-index: 9998;
    transition: opacity .24s ease, visibility 0s linear .24s;
  }
  html body .glow-mnav {
    position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh;
    width: 100vw; max-width: 360px; background: var(--paper); color: var(--ink);
    z-index: 9999; transform: translateX(100%);
    transition: transform .28s cubic-bezier(.22,.61,.36,1);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    display: flex; flex-direction: column;
    box-shadow: -12px 0 40px rgba(23,18,14,.18);
  }
  html body #glow-mnav-toggle:checked ~ .glow-mnav { transform: translateX(0); }
  html body #glow-mnav-toggle:checked ~ .glow-mnav__backdrop { opacity: 1; visibility: visible; transition: opacity .24s ease; }
  /* lock body scroll while open (no JS needed) */
  html body:has(#glow-mnav-toggle:checked) { overflow: hidden; }

  html body .glow-mnav__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; background: var(--ink); color: var(--paper);
    position: sticky; top: 0; z-index: 2; min-height: 60px;
  }
  html body .glow-mnav__head img { height: 26px; width: auto; display: block; }
  html body .glow-mnav__close {
    width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; color: var(--paper); cursor: pointer; font-size: 1.6rem; line-height: 1;
  }
  html body .glow-mnav__list { list-style: none; margin: 0; padding: 8px 0 24px; }
  html body .glow-mnav__list a {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 56px; padding: 0 22px;
    font-family: var(--font-body); font-size: 1.05rem; font-weight: 600;
    letter-spacing: .01em; color: var(--ink) !important; text-decoration: none;
    border-bottom: 1px solid var(--line);
  }
  html body .glow-mnav__list a:hover,
  html body .glow-mnav__list a[aria-current="page"] { color: var(--accent) !important; }
  html body .glow-mnav__list a::after { content: "\203A"; color: var(--muted); font-size: 1.2rem; }
  html body .glow-mnav__eyebrow {
    font-family: var(--font-body); font-size: .62rem; font-weight: 600; letter-spacing: .16em;
    text-transform: uppercase; color: var(--muted); padding: 20px 22px 8px; margin: 0;
  }
  html body .glow-mnav__util { list-style: none; margin: 0; padding: 0 22px 32px; display: grid; gap: 14px; }
  html body .glow-mnav__util a { color: var(--ink-2) !important; font-size: .92rem; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
  html body .glow-mnav__util a:hover { color: var(--accent) !important; }

  /* The CSS-only .glow-mnav is now the single mobile menu on EVERY page
     (site.js's legacy drawer is disabled). It must stay visible even on
     body.has-gdrawer pages, so no suppression here. */
}
@media (prefers-reduced-motion: reduce) {
  html body .glow-mnav { transition: none !important; }
  html body .glow-mnav__backdrop { transition: opacity 0s !important; }
}
/* never show the CSS drawer on desktop even if the markup is present */
@media (min-width: 901px) {
  html body .glow-mnav, html body .glow-mnav__backdrop, html body #glow-mnav-toggle { display: none !important; }
}

@media (max-width: 640px) {
  html body .review-nav .nav-links { justify-content: flex-start; }
  html body .utility-bar .util-trust { display: none; }
  .g-hero__inner { padding-block: clamp(2.75rem, 14vw, 4rem); }
}
/* keep desktop/tablet nav-links row tap targets >=44px between 901px and full */
html body .review-nav .nav-links a { min-height: 44px; display: inline-flex; align-items: center; }

/* ============================================================
   CHROME OVERRIDES — one identical GLOW header on every page.
   Long-tail templates (clinics / salons / brands / editorial) still
   load legacy site-chrome-2026.css, which hides the utility bar,
   burger and search and recolours the header with !important. glow.css
   loads last, so these !important rules win and restore the single
   GLOW chrome everywhere (matching the homepage).
   ============================================================ */
html body .utility-bar { display: block !important; background: var(--ink) !important; }
html body .masthead {
  background: var(--paper) !important; color: var(--ink) !important;
  padding: 0 !important; position: relative !important; min-height: 0 !important;
  border-bottom: 1px solid var(--line) !important; box-shadow: none !important;
}
html body .masthead .masthead-grid {
  display: grid !important; grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important; min-height: 72px !important;
  padding: 0 !important; gap: 1rem !important;
}
html body .masthead-burger { display: inline-flex !important; }
html body .masthead-burger span { display: block !important; background: var(--ink) !important; }

/* Pin the burger to the LEFT of the masthead on EVERY page (some legacy
   templates set direction:rtl / reorder the grid, which floated it right and
   made placement inconsistent vs the homepage). Force LTR + grid-column 1. */
html body .masthead .masthead-grid,
html body .masthead-grid { direction: ltr !important; }
html body .masthead-burger {
  grid-column: 1 / 2 !important; justify-self: start !important;
  order: -1 !important; position: static !important; margin: 0 !important;
}
html body .glow-wordmark-link, html body .masthead .brand-lockup,
html body .masthead .wordmark { grid-column: 2 / 3 !important; justify-self: center !important; }
html body .masthead-search-btn { grid-column: 3 / 4 !important; justify-self: end !important; }
/* Burger is the MOBILE menu trigger only — on desktop the full .review-nav
   row is visible and the .glow-mnav drawer is hidden, so a desktop burger
   would be a dead button. Hide it >=901px (matches the drawer breakpoint). */
@media (min-width: 901px) { html body .masthead-burger { display: none !important; } }

/* Legacy site.js mobile drawer is disabled — hide any residue at all widths
   so the burger only ever drives the CSS-only .glow-mnav. */
html body .gl-burger,
html body .gl-drawer,
html body .gl-drawer-backdrop,
html body .gdrawer,
html body .gdrawer__backdrop { display: none !important; }

/* ============================================================
   BACK TO TOP — appears after scrolling, on every page (mobile + desktop).
   Injected as <button class="glow-totop"> by the chrome sweep; a tiny
   self-contained script toggles .is-on and smooth-scrolls to the top.
   ============================================================ */
html body .glow-totop {
  position: fixed; right: clamp(14px, 4vw, 24px); bottom: clamp(14px, 4vw, 24px);
  z-index: 95; width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: #fff; border: 0; cursor: pointer;
  box-shadow: var(--sh); font-size: 1.3rem; line-height: 1;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s, background .18s ease;
  -webkit-tap-highlight-color: transparent;
}
html body .glow-totop.is-on { opacity: 1; visibility: visible; transform: none; }
html body .glow-totop:hover { background: var(--accent-deep); }
html body .glow-totop:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html body .glow-totop { transition: opacity .15s ease, visibility .15s; transform: none; } }
@media print { html body .glow-totop { display: none !important; } }
html body .masthead-search-btn { display: inline-flex !important; color: var(--ink) !important; }
html body .masthead .glow-wordmark-img,
html body .masthead .glow-wordmark-link img {
  height: 30px !important; width: auto !important; filter: none !important;
}
html body .review-nav {
  background: var(--paper) !important; color: var(--ink) !important;
  position: relative !important; top: auto !important; padding: 0 !important;
  border-bottom: 1px solid var(--line) !important; box-shadow: none !important;
}
html body .review-nav .nav-links { display: flex !important; }
html body .review-nav .nav-links a {
  color: var(--ink) !important; font-size: 0.74rem !important;
  letter-spacing: 0.14em !important; font-weight: 600 !important;
}
html body .review-nav .nav-links a:hover,
html body .review-nav .nav-links a[aria-current="page"] { color: var(--accent) !important; }

/* ============================================================
   RANKING PAGES (Best LED Masks, Best Self-Tan, etc. — agv7 template)
   Premium horizontal editorial cards with rank numbers + a prominent
   GLOW Score. Overrides legacy reviews.css. Lifts every ranking page.
   ============================================================ */
html body .agv7-ranking { padding-block: clamp(2.5rem, 6vw, 4.5rem) !important; background: var(--paper) !important; }
html body .agv7-ranking__inner { max-width: 1080px !important; margin-inline: auto !important; padding-inline: var(--gutter) !important; }
html body .agv7-ranking__head { max-width: 720px; margin: 0 auto clamp(1.75rem, 4vw, 2.5rem); text-align: center; }
html body .agv7-ranking__grid { display: flex !important; flex-direction: column !important; gap: 1.5rem !important; counter-reset: grank; max-width: 1080px; margin-inline: auto; }

html body .agv7-card {
  position: relative !important; display: grid !important;
  grid-template-columns: 320px 1fr !important; gap: 0 !important;
  background: var(--paper) !important; border: 1px solid var(--line) !important;
  border-radius: var(--r) !important; overflow: hidden !important;
  counter-increment: grank; box-shadow: none !important;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease !important;
}
html body .agv7-card:hover { box-shadow: var(--sh) !important; transform: translateY(-2px); border-color: var(--line-2) !important; }
/* Rank circle only on brand-style ranking cards (LED masks etc.); the
   makeup/devices cards carry their own .agv7-card__rank line, so skip them. */
html body .agv7-card:has(.agv7-card__brand)::before {
  content: counter(grank, decimal-leading-zero); position: absolute; top: 0.9rem; left: 0.9rem; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: #fff;
  font-family: var(--font-display); font-size: 1.05rem; display: flex; align-items: center; justify-content: center;
}
/* Rank-line variant (category/ranked cards on makeup, devices, etc.) */
html body .agv7-card__rank {
  font-family: var(--font-body) !important; font-size: var(--fs-xs) !important; font-weight: 600 !important;
  letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--accent) !important;
  margin: 0 0 0.2rem !important;
}
html body .agv7-card__rank a { color: var(--muted) !important; border: 0 !important; }
html body .agv7-card__rank a:hover { color: var(--accent) !important; }
html body .agv7-card__copy { font-size: 0.98rem !important; line-height: 1.6 !important; color: var(--ink-2) !important; margin: 0.45rem 0 0 !important; }

/* Related rankings list (category pages) */
html body .agv7-related__num { font-family: var(--font-display) !important; color: var(--accent) !important; }
html body .agv7-related__t { font-family: var(--font-display) !important; color: var(--ink) !important; }
html body .agv7-related__sub { color: var(--muted) !important; }

/* Editorial image strips on category pages — soften corners */
html body .agv7-strip__tile { border-radius: var(--r-sm); overflow: hidden; }
html body .agv7-strip__tile img { width: 100%; height: 100%; object-fit: cover; }
html body .gbp-hero__strip-cell { border-radius: var(--r-sm); overflow: hidden; }
html body .agv7-card__img { margin: 0 !important; aspect-ratio: 4 / 5; background: var(--sand); overflow: hidden; }
html body .agv7-card__img img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; }
html body .agv7-card__body { padding: 1.85rem !important; display: flex; flex-direction: column; gap: 0.35rem; }
html body .agv7-card__brand { font-size: var(--fs-xs) !important; font-weight: 600 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--accent) !important; margin: 0 !important; }
html body .agv7-card__title { font-family: var(--font-display) !important; font-size: clamp(1.5rem, 2.4vw, 2rem) !important; line-height: 1.1 !important; color: var(--ink) !important; margin: 0.15rem 0 0.4rem !important; }
html body .agv7-card__verdict { font-size: 0.98rem !important; line-height: 1.6 !important; color: var(--ink-2) !important; margin: 0 !important; }
html body .agv7-card__meta { display: flex !important; flex-wrap: wrap; align-items: center; gap: 1.1rem !important; margin: 1.1rem 0 1.25rem !important; font-size: 0.85rem !important; color: var(--muted) !important; }
html body .agv7-card__meta span { display: inline-flex; align-items: center; }
html body .agv7-card__meta span:first-child {
  flex-direction: column; align-items: flex-start;
  font-family: var(--font-display); font-size: 1.95rem; line-height: 1; color: var(--ink);
  padding-right: 1.1rem; border-right: 1px solid var(--line); margin-right: 0.2rem;
}
html body .agv7-card__meta span:first-child strong {
  display: block; font-family: var(--font-body); font-size: 0.56rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px;
}
html body .agv7-card__link {
  align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--ink) !important; color: #fff !important; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.03em;
  padding: 0.72rem 1.35rem !important; border-radius: var(--pill) !important; border: 0 !important; transition: background .18s ease;
}
html body .agv7-card__link:hover { background: var(--accent-deep) !important; }
@media (max-width: 720px) {
  html body .agv7-card { grid-template-columns: 1fr !important; }
  html body .agv7-card__img { aspect-ratio: 16 / 10; }
  html body .agv7-card__body { padding: 1.5rem !important; }
}

/* "If you only buy one" — premium top-pick band */
html body .agv7-quick { background: var(--porcelain) !important; border-block: 1px solid var(--line) !important; padding-block: clamp(2.5rem, 5vw, 3.5rem) !important; }
html body .agv7-quick__inner { max-width: 760px !important; margin-inline: auto !important; padding-inline: var(--gutter) !important; }
html body .agv7-quick .agv7-eyebrow { color: var(--accent) !important; }
html body .agv7-quick__body { font-size: 1.1rem !important; line-height: 1.7 !important; color: var(--ink-2) !important; }
html body .agv7-quick__body a { color: var(--accent) !important; border-bottom: 1px solid var(--accent-ring); }

/* Method + field-notes sections */
html body .agv7-method__inner, html body .agv7-field__inner { max-width: 760px !important; margin-inline: auto !important; padding-inline: var(--gutter) !important; }
html body .agv7-method, html body .agv7-field { padding-block: clamp(2.5rem, 5vw, 3.5rem) !important; }

/* ============================================================
   REVIEWS HUB — sticky "browse by area" jump-nav
   ============================================================ */
html body .rev-areanav { position: sticky; top: 0; z-index: 35; background: rgba(255,255,255,0.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
html body .rev-areanav .wrap { display: flex; align-items: center; gap: 1.1rem; padding-block: 0.7rem; }
html body .rev-areanav__label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; flex: none; }
html body .rev-areanav__links { display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: none; }
html body .rev-areanav__links::-webkit-scrollbar { display: none; }
html body .rev-areanav__links a {
  white-space: nowrap; font-size: 0.84rem; font-weight: 500; color: var(--ink-2);
  background: var(--porcelain); border: 1px solid var(--line); border-radius: var(--pill);
  padding: 0.45rem 0.95rem; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
html body .rev-areanav__links a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
html body .rev-section { scroll-margin-top: 84px; }
@media (max-width: 640px) { html body .rev-areanav__label { display: none; } }

/* ============================================================
   GUIDES HUB — premium text-forward guide cards
   ============================================================ */
html body .pick-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; gap: 1.25rem !important; }
html body .pick-card {
  position: relative; display: flex !important; flex-direction: column; gap: 0.5rem;
  background: var(--paper) !important; border: 1px solid var(--line) !important; border-radius: var(--r) !important;
  padding: 1.6rem !important; min-height: 0 !important; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
html body .pick-card:hover { transform: translateY(-3px); box-shadow: var(--sh); border-color: var(--line-2); }
html body .pick-image { display: none !important; }
html body .pick-tag {
  align-self: flex-start; font-family: var(--font-body) !important; font-size: var(--fs-xs) !important; font-weight: 600 !important;
  letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--accent) !important;
  background: var(--accent-soft) !important; border-radius: var(--pill) !important; padding: 0.32rem 0.8rem !important; margin: 0 0 0.35rem !important;
}
html body .pick-card h3 { font-family: var(--font-display) !important; font-size: 1.28rem !important; line-height: 1.18 !important; color: var(--ink) !important; margin: 0 !important; }
html body .pick-sub { font-size: 0.93rem !important; line-height: 1.55 !important; color: var(--ink-2) !important; margin: 0 !important; }
html body .pick-card::after { content: "Read guide →"; margin-top: auto; padding-top: 0.9rem; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; color: var(--accent); }

/* ============================================================
   AGV7 ranking pages: sticky in-page "On this page" jump nav
   Injected by _scripts/agv7_onpage_nav_inject.py just after the
   bc-ticker, before the first content section.
   ============================================================ */
html body .agv7-onpage {
  position: sticky;
  top: 0;
  z-index: 30;                 /* below masthead/review-nav (z 40) */
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
html body .agv7-onpage__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
html body .agv7-onpage__label {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
@media (max-width: 640px) { html body .agv7-onpage__label { display: none; } }
html body .agv7-onpage__list {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
html body .agv7-onpage__list::-webkit-scrollbar { display: none; }
html body .agv7-onpage__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;            /* >=44px tap target */
  padding: 0 0.85rem;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 180ms ease, border-color 180ms ease;
}
html body .agv7-onpage__list a:hover { color: var(--accent); }
html body .agv7-onpage__list a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
html body .agv7-onpage__list a[aria-current="true"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
/* land the scroll below the sticky bar, not flush to the viewport */
html body .agv7-hero,
html body .agv7-ranking,
html body .agv7-table,
html body .agv7-method,
html body .agv7-quick,
html body .agv7-faq,
html body .agv7-field { scroll-margin-top: 60px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ================================================================
   UGLY-PAGE CLEANUP PASS (2026-06-19)
   Brings the remaining legacy templates (brand detail + hub,
   clinics/salons hubs + profiles, guide articles, editorial indexes,
   institutional/compare) onto the single GLOW design system.
   Consolidated from a 5-way template audit. glow.css loads LAST, so
   `html body` + `!important` win the cascade — even over inline
   <style> blocks placed AFTER the glow.css <link> (e.g. #ag-v7-pass).
   ================================================================ */

/* ---- 0. LEGACY TOKEN BACK-FILL --------------------------------
   The legacy templates reference dozens of custom properties that
   are either defined off-brand inline (--rose burgundy) or not
   defined at all on the page (--canvas/--ink-body → invalid →
   transparent panels + black text). Re-point every one of them at a
   real GLOW token. !important so it beats inline :root blocks that
   load after glow.css. */
html body {
  /* every rose / copper / coral / purple / bordeaux accent → one bronze */
  --rose:             var(--accent)       !important;  /* was #5B2634 burgundy / #A04E5E */
  --rose-deep:        var(--accent-deep)  !important;
  --rose-soft:        var(--accent-soft)  !important;
  --copper:           var(--accent)       !important;
  --copper-deep:      var(--accent-deep)  !important;
  --copper-soft:      var(--accent-soft)  !important;
  --bordeaux:         var(--accent-deep)  !important;
  --ag-coral:         var(--accent)       !important;
  --ag-coral-soft:    var(--accent-soft)  !important;
  --agv7-rose:        var(--accent)       !important;  /* was #FF6B35 coral */
  --agv7-purple:      var(--accent-deep)  !important;  /* was #5B36DC */
  --agv7-purple-deep: var(--ink)          !important;  /* was #3D1FA8 */
  --ag-purple:        var(--ink)          !important;
  --ag-purple-deep:   var(--ink)          !important;
  --ag-purple-soft:   var(--porcelain)    !important;
  --gb-plum:          var(--accent-deep)  !important;
  --gb-blush:         var(--accent-soft)  !important;
  --gl-rose:          var(--accent)       !important;
  /* surfaces: cream / undefined → paper + cool porcelain */
  --canvas:           var(--paper)        !important;
  --canvas-1:         var(--paper)        !important;
  --canvas-2:         var(--porcelain)    !important;  /* was cream #F4ECE3 / undefined */
  --canvas-3:         var(--sand)         !important;
  --agv7-canvas:      var(--paper)        !important;
  --agv7-canvas-2:    var(--porcelain)    !important;
  --agv7-ink:         var(--ink)          !important;
  --agv7-body:        var(--ink-2)        !important;
  --gl-ink:           var(--ink)          !important;
  --gl-ink-body:      var(--ink-2)        !important;
  --gl-line:          var(--line)         !important;
  --gl-line-soft:     var(--line)         !important;
  --gb-divider:       var(--line-2)       !important;
  /* text greys */
  --ink-body:         var(--ink-2)        !important;
  --ink-muted:        var(--muted)        !important;
  /* dark "panel" band (about-numbers, verdict bands) — was #000/undefined */
  --panel:            var(--ink)          !important;
  --panel-ink:        #ffffff             !important;
  --panel-dim:        rgba(255,255,255,0.58) !important;
  --copper-soft:      var(--accent)       !important;  /* readable bronze on light or dark */
  /* type: Lexend display + Inter body, never Canela/Playfair/Georgia */
  --ff-serif:         var(--font-display) !important;
  --ff-sans:          var(--font-body)    !important;
  --agv7-ff-serif:    var(--font-display) !important;
  --agv7-ff-sans:     var(--font-body)    !important;
  --fs-lede:          var(--fs-lead)      !important;
  /* gradient thumbnail tones (confessions .ccc-img) → neutral */
  --tone-1:           var(--sand)         !important;
  --tone-3:           var(--porcelain)    !important;
}
/* belt-and-braces: every heading on the display face (covers h5 + a
   slow glow.css load flashing the #fallback-base Georgia serif). */
html body h1, html body h2, html body h3,
html body h4, html body h5 { font-family: var(--font-display) !important; }

/* ================= BRAND DETAIL (gbp-* template, ~77 pages) ===== */
html body .gbp-hero__h1,
html body .gbp-hero__h1--strip,
html body .gbp-hero__positioning,
html body .gbp-hero__positioning--strip,
html body .gbp-about__h2,
html body .gbp-feature__h2,
html body .gbp-section__h2,
html body .gbp-faq__h2,
html body .gbp-verdict__text,
html body .gbp-related__h2,
html body .gbp-alt__name,
html body .gbp-score__num {
  font-family: var(--font-display) !important;
  font-style: normal !important;
  color: var(--ink) !important;
  letter-spacing: -0.02em !important;
}
html body .gbp-hero__category,
html body .gbp-hero__category::before,
html body .gbp-about__eyebrow,
html body .gbp-feature__eyebrow,
html body .gbp-section__eyebrow,
html body .gbp-faq__eyebrow,
html body .gbp-verdict__eyebrow,
html body .gbp-score__eyebrow,
html body .gbp-alts__eyebrow,
html body .gbp-ai__label,
html body .gbp-aianswer__label,
html body .gbp-why__num,
html body .gbp-bestfor__label,
html body .gbp-hero__take-label,
html body .gbp-section__h2 em,
html body .gbp-about__h2 em,
html body .gbp-feature__h2 em,
html body .gbp-faq__h2 em,
html body .gbp-verdict__text strong,
html body .gbp-related__col a:hover,
html body .gbp-alt:hover,
html body .gbp-alt:hover .gbp-alt__name,
html body .gbp-faq__item summary:hover,
html body .gbp-faq__item summary::after { color: var(--accent) !important; }
html body .gbp-about__body p:first-of-type::first-letter,
html body .gbp-ticker__track span::after,
html body .gbp-verdict__mark { color: var(--accent) !important; }
html body .gbp-hero__take::before,
html body .gbp-about__visual-rule,
html body .gbp-ai { border-left-color: var(--accent) !important; }
html body .gbp-product--pick { outline-color: var(--accent) !important; }
html body .gbp-hero,
html body .gbp-hero--strip,
html body .gbp-hero__strip-body,
html body .gbp-about,
html body .gbp-feature,
html body .gbp-faq,
html body .gbp-related,
html body .gbp-campaign,
html body .gbp-product { background: var(--paper) !important; }
html body .gbp-why,
html body .gbp-products,
html body .gbp-about__visual,
html body .gbp-feature__image,
html body .gbp-campaign__main,
html body .gbp-hero__strip-cell { background: var(--porcelain) !important; }
html body .gbp-product__photo { background: var(--paper) !important; }
html body .gbp-about__visual::before { background: none !important; }
html body .gbp-about__body,
html body .gbp-feature__text,
html body .gbp-product__why,
html body .gbp-section__sub,
html body .gbp-bestfor__desc,
html body .gbp-faq__body,
html body .gbp-why__body { color: var(--ink-2) !important; }
html body .gbp-product__cat,
html body .gbp-product__suits,
html body .gbp-hero__crumb,
html body .gbp-hero__crumb a,
html body .gbp-related__col h3 { color: var(--muted) !important; }
html body .gbp-verdict,
html body .gbp-stats,
html body .gbp-ticker,
html body .gbp-ai { background: var(--ink) !important; }
html body .gbp-product,
html body .gbp-scent__card {
  border: 1px solid var(--line) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: var(--sh-sm) !important;
}

/* ================= BRANDS HUB (bdir / idx / brand-card / table) = */
html body.reviews-skin .idx-h2,
html body.reviews-skin .idx-h2 em,
html body.reviews-skin .results-meta .count,
html body.reviews-skin .results-meta .count em,
html body.reviews-skin .brand-name,
html body.reviews-skin .brand-name em,
html body.reviews-skin .brand-score,
html body.reviews-skin .bdir__group-letter,
html body.reviews-skin .bdir__brand,
html body.reviews-skin .empty h3,
html body.reviews-skin .az-letters a,
html body.reviews-skin .tcol-name,
html body.reviews-skin .tcol-score,
html body.reviews-skin .brands-colophon__line {
  font-family: var(--font-display) !important;
  font-style: normal !important;
}
html body.reviews-skin .brand-score,
html body.reviews-skin .brand-name em,
html body.reviews-skin .idx-h2 em,
html body.reviews-skin .results-meta .count em,
html body.reviews-skin .tcol-score,
html body.reviews-skin .bdir__group-letter,
html body.reviews-skin .bdir__brand:hover,
html body.reviews-skin .brand-table tbody td a:hover,
html body.reviews-skin .brands-colophon__links a,
html body.reviews-skin .brands-colophon__links a:hover { color: var(--accent) !important; }
html body.reviews-skin .brands-colophon__links a { border-bottom-color: var(--accent) !important; }
html body.reviews-skin .bdir__brand:hover .bdir__brand-tag { background: var(--accent) !important; color: #fff !important; }
html body.reviews-skin .brand-card,
html body.reviews-skin .idx-card__body { background: var(--paper) !important; }
html body.reviews-skin .az-strip,
html body.reviews-skin .brand-table tbody tr:hover { background: var(--porcelain) !important; }
html body.reviews-skin .brand-card {
  border: 1px solid var(--line) !important;
  border-radius: var(--r-sm) !important;
}
html body.reviews-skin .brand-card:hover {
  border-color: var(--line-2) !important;
  box-shadow: var(--sh) !important;
}
html body.reviews-skin .brand-cat,
html body.reviews-skin .bdir__brand-tag,
html body.reviews-skin .bdir__letter,
html body.reviews-skin .results-meta .applied,
html body.reviews-skin .az-strip h3,
html body.reviews-skin .brand-table thead th { color: var(--muted) !important; }
html body.reviews-skin .brand-desc,
html body.reviews-skin .brand-table tbody td { color: var(--ink-2) !important; }
html body.reviews-skin .tcol-gfi[data-grade="D"] { color: var(--ink-2) !important; }

/* ================= CLINICS + SALONS (cl-* inline system) ======== */
html body.clinics-hub-page,
html body.salons-hub-page,
html body.cl-profile,
html body .cl-page {
  --cl-canvas:    #FFFFFF !important;
  --cl-canvas-2:  #f6f6f7 !important;
  --cl-canvas-3:  #ececee !important;
  --cl-ink:       #17120E !important;
  --cl-body:      #463E37 !important;
  --cl-muted:     #786F66 !important;
  --cl-line:      rgba(23,18,14,0.10) !important;
  --cl-line-2:    rgba(23,18,14,0.16) !important;
  --cl-rose:      #9A6A4B !important;
  --cl-blush:     #f0eff1 !important;
  --cl-blush-tint:#f0eff1 !important;
  --cl-mint:      #ececee !important;
  --cl-gold:      #f0eff1 !important;
  --cl-radius:    14px !important;
  --cl-radius-lg: 20px !important;
  --cl-radius-sm: 12px !important;
  --cl-ff-serif:  var(--font-display) !important;
  --cl-ff-sans:   var(--font-body) !important;
  --cl-shadow-card: 0 8px 30px rgba(23,18,14,0.08) !important;
  --cl-shadow-soft: 0 1px 2px rgba(23,18,14,0.05) !important;
}
html body.clinics-hub-page,
html body.salons-hub-page,
html body.cl-profile,
html body .cl-page { background: var(--paper) !important; color: var(--ink-2) !important; }
html body .cl-hero,
html body .cl-loc,
html body .cl-concern,
html body .cl-section--canvas { background: var(--porcelain) !important; }
html body .cl-featured,
html body .cl-section--canvas-2 { background: var(--paper) !important; }
html body .cl-tx,
html body .cld,
html body .cl-filterbar,
html body .cl-disclaimer,
html body .cl-section--white { background: var(--paper) !important; }
html body .cl-section--ink,
html body .cl-cta { background: var(--ink) !important; }
html body .cl-hero__h1,  html body .cl-hero__title,
html body .cl-featured__h2, html body .cld__h2,
html body .cl-loc__h2,   html body .cl-tx__h2,
html body .cl-concern__h2, html body .cl-cta__h2,
html body .cl-snapshot__title, html body .cl-why__title,
html body .cl-treatments__title, html body .cl-faqs__title,
html body .cl-related__title, html body .cld__name,
html body .cl-treatment-card__name, html body .cl-faq__q,
html body .cl-list-hero__h1 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  color: var(--ink) !important;
}
html body .cl-page .cl-hero__dek,
html body .cl-page .cld__loc,
html body .cl-page .cld__google,
html body .cl-page .cl-filter__btn,
html body .cl-page .cl-quickpill,
html body .cl-page .cl-loc__pill,
html body .cl-page .cl-tx__pill { font-family: var(--font-body) !important; }
html body .cl-hero__eyebrow,
html body .cl-featured__eyebrow,
html body .cld__eyebrow,
html body .cl-concern__eyebrow,
html body .cl-cta__eyebrow { color: var(--accent) !important; }
html body .cld__card,
html body .cl-list-card {
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  background: var(--paper) !important;
}
html body .cld__card:hover,
html body .cl-list-card:hover {
  border-color: var(--line-2) !important;
  box-shadow: var(--sh) !important;
  transform: translateY(-3px) !important;
}
html body .cld__media,
html body .cl-list-card__media { background: var(--sand) !important; border-radius: 0 !important; }
html body .cl-hero__media { background: var(--sand) !important; border-radius: var(--r) !important; }
html body .cld__cta,
html body .cld__distance,
html body .cld__google-star { color: var(--accent) !important; }
html body .cld__badge {
  background: var(--accent-soft) !important;
  color: var(--ink) !important;
  border: 1px solid var(--accent-ring) !important;
  box-shadow: none !important;
  font-family: var(--font-body) !important;
  letter-spacing: 0.1em !important;
}
html body .cld__badge--doctor { background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important; }
html body .cl-filter__btn {
  border: 1px solid var(--line-2) !important;
  border-radius: var(--pill) !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
}
html body .cl-filter__btn:hover { border-color: var(--ink) !important; }
html body .cl-filter__btn[aria-expanded="true"],
html body .cl-filter__btn.is-active {
  background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important;
}
html body .cl-filter__panel {
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--sh) !important;
}
html body .cl-filter__opt input { accent-color: var(--accent) !important; }
html body .cl-filter__clear { color: var(--accent) !important; }
html body .cl-filter__active { background: var(--accent) !important; color: #fff !important; }
html body .cl-quickpill,
html body .cl-loc__pill,
html body .cl-tx__pill {
  border: 1px solid var(--line-2) !important;
  border-radius: var(--pill) !important;
  background: var(--paper) !important;
  color: var(--ink-2) !important;
}
html body .cl-quickpill:hover,
html body .cl-loc__pill:hover,
html body .cl-tx__pill:hover { border-color: var(--ink) !important; color: var(--ink) !important; background: var(--porcelain) !important; }
html body .cl-quickpill::before { background: var(--accent) !important; }
html body .cl-search { border-radius: var(--r) !important; border-color: var(--line-2) !important; }
html body .cl-search__submit,
html body .cld__more { background: var(--ink) !important; border-radius: var(--pill) !important; }
html body .cl-search__submit:hover,
html body .cld__more:hover { background: var(--accent-deep) !important; }
html body .cld__reset { color: var(--accent) !important; }
html body .cl-treatment-card,
html body .cl-quick__pill {
  border: 1px solid var(--line) !important;
  border-radius: var(--r-sm) !important;
  background: var(--paper) !important;
}
html body .cl-quick { background: var(--porcelain) !important; }
html body .cl-treatments { background: var(--porcelain) !important; }
html body .cl-btn {
  border-radius: var(--pill) !important;
  text-transform: none !important;
  letter-spacing: 0.04em !important;
  font-weight: 600 !important;
  font-family: var(--font-body) !important;
}
html body .cl-btn--primary { background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important; }
html body .cl-btn--primary:hover { background: var(--accent-deep) !important; border-color: var(--accent-deep) !important; }
html body .cl-btn--ghost:hover { background: var(--ink) !important; color: #fff !important; }
html body .cl-rating-stars { color: var(--accent) !important; }
html body .cl-snapshot,
html body .cl-why,
html body .cl-faqs,
html body .cl-related { background: var(--paper) !important; }

/* ================= GUIDE ARTICLE (gv3-* template, ~31 pages) ==== */
html body .gv3-hero h1 em,
html body .guide-hero h1 em { font-style: italic !important; color: var(--accent) !important; }
html body .gv3-eyebrow,
html body .gv3-section-eyebrow,
html body .guide-hero .breadcrumb { color: var(--accent) !important; }
html body .gv3-lede,
html body .guide-hero .lede {
  color: var(--ink-2) !important;
  font-size: var(--fs-lead) !important;
  line-height: 1.55 !important;
  max-width: 46ch;
}
html body .gv3-trust-sec,
html body .gv3-ranked-sec,
html body .gv3-faq-sec,
html body .gv3-seo-block {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
}
html body .gv3-trust-sec { background: var(--porcelain); }
html body .gv3-faq-sec   { background: var(--porcelain); }
html body .gv3-seo-block { background: var(--ink); }
html body .gv3-trust-sec > .wrap,
html body .gv3-ranked-sec > .wrap,
html body .gv3-faq-sec > .wrap,
html body .gv3-seo-block > .wrap { max-width: 760px !important; }
html body .gv3-section-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent) !important;
  margin: 0 0 0.85rem;
}
html body .gv3-section-h2,
html body .gv3-trust-h2,
html body .gv3-seo-h2 {
  font-family: var(--font-display) !important;
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 1.1rem;
}
html body .gv3-section-h2 em,
html body .gv3-trust-h2 em { font-style: italic; color: var(--accent); }
html body .gv3-trust-sec p,
html body .gv3-ranked-sec p {
  font-size: 1.075rem;
  line-height: 1.75;
  color: var(--ink-2);
  margin: 0 0 1.2rem;
}
html body .gv3-trust-sec a,
html body .gv3-ranked-sec a,
html body .gv3-faq-sec a { color: var(--accent); border-bottom: 1px solid var(--accent-ring); }
html body .gv3-trust-sec a:hover,
html body .gv3-ranked-sec a:hover { border-bottom-color: var(--accent); }
html body .gv3-ranked-sec ol {
  list-style: none;
  counter-reset: gv3step;
  margin: 1.5rem 0 0;
  padding: 0;
}
html body .gv3-ranked-sec ol > li {
  counter-increment: gv3step;
  position: relative;
  padding: 1.25rem 0 1.25rem 3.25rem;
  border-top: 1px solid var(--line);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink-2);
}
html body .gv3-ranked-sec ol > li:first-child { border-top: 0; }
html body .gv3-ranked-sec ol > li::before {
  content: counter(gv3step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.25rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--accent);
  line-height: 1;
}
html body .gv3-ranked-sec ol > li strong { color: var(--ink); font-weight: 600; }
html body .gv3-checklist { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.65rem; }
html body .gv3-checklist li {
  position: relative;
  padding-left: 1.85rem;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink-2);
}
html body .gv3-checklist li::before {
  content: "\00d7";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--accent);
}
html body .gv3-faq details { border-bottom: 1px solid var(--line); padding: 1.1rem 0; }
html body .gv3-faq summary {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
html body .gv3-faq summary::-webkit-details-marker { display: none; }
html body .gv3-faq summary::after {
  content: "+";
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 1.4rem;
  line-height: 1;
}
html body .gv3-faq details[open] summary::after { content: "\2013"; }
html body .gv3-faq p { margin: 0.75rem 0 0; color: var(--ink-2); line-height: 1.65; max-width: 62ch; }
html body .gv3-seo-block .gv3-seo-h2 { color: #fff !important; margin-bottom: 1rem; }
html body .gv3-seo-block p { display: flex; flex-wrap: wrap; gap: 0.6rem 1.25rem; font-size: 1.05rem; line-height: 1.6; }
html body .gv3-seo-block a { color: #F0DCC8; border-bottom: 1px solid rgba(240,220,200,0.4); }
html body .gv3-seo-block a:hover { color: #fff; border-bottom-color: #fff; }
html body .glow-guide-v3 .g-toc {
  background: var(--porcelain);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem auto;
  max-width: 760px;
}
/* older guide-hero/steps-section template (what-is-dha): kill burgundy */
html body .guide-hero h1 em,
html body .steps-section h2 em,
html body .faq-section h2 em,
html body .related-section h3,
html body .steps-section .step-num,
html body .faq-section summary::after { color: var(--accent) !important; }
html body .related-card:hover { border-color: var(--accent) !important; color: var(--accent-deep) !important; }
html body .steps-section { background: var(--porcelain) !important; }
html body .steps-section .step h3,
html body .faq-section summary { font-family: var(--font-display) !important; }

/* ============ EDITORIAL INDEXES (confessions / glow-100 / press / nl) = */
html body .agv7-h2,
html body .agv7-card__title,
html body .agv7-card__tease,
html body .agv7-related__t,
html body .agv7-related__num,
html body .agv7-field__h,
html body .agv7-faq__item dt,
html body .g100-hero__h1,
html body .g100-hero__dek,
html body .g100-explore__label,
html body .g100-explore__num,
html body .g100c__name,
html body .g100c__rank,
html body .conf-wordmark,
html body .conf-submit__h2,
html body .conf-hero-position,
html body .svc-hero__h1,
html body .svc-why__num,
html body .svc-why__title,
html body .nl-hero h1,
html body .nl-issue h3,
html body .nl-issue .nl-meta,
html body .conf-hero h1 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  font-style: normal !important;
}
html body .agv7-eyebrow,
html body .agv7-card__rank,
html body .g100-hero__eyebrow,
html body .conf-hero-eyebrow,
html body .conf-submit__eyebrow,
html body .svc-hero__eyebrow,
html body .svc-faq .agv7-eyebrow,
html body .nl-hero .eyebrow,
html body .conf-hero .eyebrow,
html body .conf-card .ccc-eyebrow,
html body .agv7-h2 em,
html body .nl-hero h1 em,
html body .nl-issue h3 em,
html body .nl-issue .nl-meta strong,
html body .conf-hero h1 em,
html body .conf-card h3 em,
html body .conf-wordmark .dot,
html body .conf-cost strong,
html body .conf-body p:first-of-type::first-letter { color: var(--accent) !important; }
html body .conf-related__col a:hover,
html body .conf-hero-cta--primary:hover,
html body .conf-submit__cta:hover,
html body .svc-cta__btn:hover,
html body .agv7-card__cta:hover { color: var(--accent) !important; }
html body .conf-related__col a:hover { border-bottom-color: var(--accent) !important; }
html body .conf-submit,
html body .agv7-verdict,
html body .svc-cta { background: var(--ink) !important; color: #fff !important; }
html body .agv7-verdict__quote em,
html body .conf-submit__cta,
html body .svc-cta__btn { color: var(--accent) !important; }
html body .ag-hero-strip .gbp-hero__cta--primary { background: var(--ink) !important; color: #fff !important; }
html body .ag-hero-strip .gbp-hero__cta--primary:hover { background: var(--accent-deep) !important; }
html body .ag-hero-strip .gbp-hero__cta--ghost { color: var(--ink) !important; border-color: var(--line-2) !important; }
html body .ag-hero-strip .gbp-hero__cta--ghost:hover { background: var(--ink) !important; color: #fff !important; }
html body .ag-hero-strip .gbp-hero__take-text--strip { border-left-color: var(--accent) !important; font-family: var(--font-display) !important; }
html body .nl-signup { background: var(--porcelain) !important; }
html body .nl-signup button { background: var(--ink) !important; color: #fff !important; }
html body .conf-cost,
html body .conf-instead { background: var(--porcelain) !important; }
html body .conf-cost { border-left: 3px solid var(--accent) !important; }

/* ============ INSTITUTIONAL / COMPARE (about/standard/authors/compare) = */
html body .contact-elite__lede a { border-bottom-color: var(--accent-ring) !important; }
html body .st26-h1, html body .st26-h2, html body .st26-h3,
html body .st26-card h3, html body .st26-axis h3,
html body .st26-fw__col h3, html body .st26-note h2,
html body .st26-num, html body .st26-log .d, html body .st26-voice,
html body .st26-plate__v, html body .st26-bands .b,
html body .st26-lede, html body .st26-quick__body { font-family: var(--font-display) !important; }
html body .st26-note__label,
html body .st26-note h2 em,
html body .st26-fw__col--ink li::before { color: var(--accent) !important; }
html body .st26-table .hl td { background: var(--accent-soft) !important; }
html body .st26-toc { background: var(--porcelain) !important; }
html body .st26-quick__body { max-width: 62ch !important; }
html body .hwr-lux .hwr-section a,
html body .hwr-lux .hwr-section code,
html body .hwr-lux .hwr-toc-num,
html body .hwr-lux .weight { color: var(--accent) !important; }
html body .hwr-lux .hwr-section a { border-bottom-color: var(--accent-ring) !important; }
html body .hwr-lux .hwr-quote-wrap { background: var(--ink) !important; }
html body .hwr-lux .hwr-quote-wrap::before { color: rgba(255,255,255,0.06) !important; }
html body .hwr-lux .hwr-hero::before { color: var(--accent-soft) !important; }
html body .hwr-lux [data-lux-reveal] { opacity: 1 !important; transform: none !important; }
html body .policy-body ul, html body .policy-body ol {
  font-family: var(--font-body); color: var(--ink-2);
  max-width: 70ch; padding-left: 1.25rem; line-height: 1.7;
}
html body .policy-body li { margin: 0.4rem 0; }
html body .a-eic__portrait,
html body .author-portrait {
  background: linear-gradient(160deg, var(--porcelain) 0%, var(--sand) 100%) !important;
  border: 1px solid var(--line);
}
html body .a-eic__portrait span,
html body .author-initials { color: var(--accent) !important; font-family: var(--font-display) !important; }
html body .a-card__initials { color: var(--accent) !important; }
html body .author-body p, html body .author-body ul { max-width: 68ch; }
html body .ph2-tldr { background: var(--porcelain) !important; }
html body table.ph2-table tr:hover { background: var(--porcelain) !important; }
html body .ph2-tldr .label,
html body .ph2-hero h1 em,
html body .ph2-section h2 em,
html body .ph2-rank-card .pos,
html body .ph2-rank-card .score,
html body .ph2-faq h2 em { color: var(--accent) !important; }
html body .ph2-pros, html body .ph2-cons,
html body .ph2-internal, html body .ph2-faq { background: var(--porcelain) !important; }
html body .cmp-card:hover { background: var(--porcelain) !important; }
html body .cmp-cluster__title, html body .cmp-card__h3 { font-family: var(--font-display) !important; }
html body .ph2-section ul, html body .ph2-section ol {
  font-family: var(--font-body); color: var(--ink-2);
  max-width: 56rem; padding-left: 1.25rem; line-height: 1.7;
}

/* ---- FOOTER: neutralise the legacy peachy-cream (#FBE5DC /
   rgba(251,229,220)) skin from coral-accent.css to clean white-alpha
   on the dark footer. High specificity (html body footer.footer …)
   beats coral-accent.css's !important rules. Applies site-wide. */
html body .footer-rule,
html body footer.footer .footer-mast .footer-rule {
  background: rgba(255,255,255,0.14) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
html body footer.footer .footer-mast .footer-dek,
html body footer.footer .footer-grid h5 { color: rgba(255,255,255,0.55) !important; }
html body footer.footer .footer-grid a,
html body footer.footer .footer-grid li a,
html body footer.footer a:not(.footer-wordmark-link):not(.glow-wordmark-link) {
  color: rgba(255,255,255,0.82) !important;
}
html body footer.footer .footer-grid a:hover,
html body footer.footer .footer-grid li a:hover,
html body footer.footer a:not(.footer-wordmark-link):not(.glow-wordmark-link):hover {
  color: #fff !important; border-bottom-color: rgba(255,255,255,0.5) !important;
}
html body footer.footer .colophon { border-top-color: rgba(255,255,255,0.14) !important; color: rgba(255,255,255,0.55) !important; }
html body footer.footer .colophon a { color: rgba(255,255,255,0.82) !important; border-bottom-color: rgba(255,255,255,0.25) !important; }
html body footer.footer input[type="email"],
html body footer.footer input[type="text"] { border-color: rgba(255,255,255,0.3) !important; color: #fff !important; }
html body footer.footer input::placeholder { color: rgba(255,255,255,0.5) !important; }

/* ================================================================
   REVIEW TEMPLATE DE-CLUTTER (2026-06-19) — FAQ / AI-answer /
   Field-note / Cross-links.  Scoped to html body.reviewed-page so
   it can never touch ranking, category, confession or glow-100
   pages that share the agv7-* / glow-crosslinks classes.  glow.css
   loads LAST, so `html body.reviewed-page` + !important beats the
   inline #agv7-review-pass <style> and the element inline styles in
   the cross-links block.  Goal: kill the 6-11rem section padding,
   tighten Q/A rhythm, retire the stray Georgia serif + off-token
   greys in the cross-links, land a calmer, ~30-40% shorter page.
   ================================================================ */

/* ---- 9. FAQ : was the tallest text section (1549px) -----------
   Section padding clamp(6rem,10vw,11rem) -> matches the already
   compressed method/field band; head + per-item padding tightened
   so eight Q/A rows read as a calm list, not a stack of blocks. */
html body.reviewed-page .agv7-faq {
  padding-block: clamp(2.5rem, 5vw, 3.5rem) !important;
  background: var(--porcelain) !important;
}
html body.reviewed-page .agv7-faq__inner { max-width: 880px !important; margin-inline: auto !important; }
html body.reviewed-page .agv7-faq__head { margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem) !important; }
html body.reviewed-page .agv7-faq__item {
  padding-block: clamp(1.1rem, 2vw, 1.5rem) !important;
  gap: 0.5rem !important;
  border-top-color: var(--line) !important;
  align-items: baseline !important;
}
html body.reviewed-page .agv7-faq__item:last-child { border-bottom-color: var(--line) !important; }
@media (min-width: 760px) {
  html body.reviewed-page .agv7-faq__item { grid-template-columns: 0.8fr 1.2fr !important; column-gap: clamp(2rem, 4vw, 3rem) !important; }
}
html body.reviewed-page .agv7-faq__item dt {
  font-family: var(--font-display) !important; font-style: normal !important; font-weight: 500 !important;
  font-size: clamp(1.02rem, 1.25vw, 1.16rem) !important; line-height: 1.28 !important; color: var(--ink) !important;
  letter-spacing: -0.01em !important;
}
html body.reviewed-page .agv7-faq__item dd { color: var(--ink-2) !important; line-height: 1.6 !important; }

/* ---- AI ANSWER (743px) ----------------------------------------
   Same padding cut; pull the 2-col verdict / score-card together so
   the bronze GLOW Score sits beside the copy, not adrift below it. */
html body.reviewed-page .agv7-aianswer {
  padding-block: clamp(2.5rem, 5vw, 3.5rem) !important;
  background: var(--porcelain) !important;
}
html body.reviewed-page .agv7-aianswer__inner {
  max-width: 1080px !important; margin-inline: auto !important;
  gap: clamp(1.75rem, 4vw, 3rem) !important; align-items: start !important;
}
@media (min-width: 900px) {
  html body.reviewed-page .agv7-aianswer__inner { grid-template-columns: 1.5fr 1fr !important; }
}
html body.reviewed-page .agv7-aianswer__body { color: var(--ink-2) !important; margin: 0 0 1.1rem !important; }
html body.reviewed-page .agv7-aianswer__body strong { color: var(--ink) !important; }
html body.reviewed-page .agv7-aianswer__note { padding-top: 1.1rem !important; border-top-color: var(--line) !important; color: var(--muted) !important; }
html body.reviewed-page .agv7-aianswer__note a { color: var(--accent) !important; }
/* score card: align to GLOW card language (token surface + radius + hairline) */
html body.reviewed-page .agv7-score {
  background: var(--paper) !important; border: 1px solid var(--line) !important;
  border-radius: var(--r) !important; box-shadow: var(--sh-sm) !important;
  padding: clamp(1.5rem, 2.6vw, 2rem) !important;
}
html body.reviewed-page .agv7-score__label { color: var(--accent) !important; }
html body.reviewed-page .agv7-score__num { font-family: var(--font-display) !important; color: var(--ink) !important; margin: 0 0 1.1rem !important; }
html body.reviewed-page .agv7-score__nap { padding-top: 1rem !important; border-top-color: var(--line) !important; }
html body.reviewed-page .agv7-score__nap dd a { color: var(--accent) !important; border-bottom-color: var(--accent-ring) !important; }

/* ---- FIELD NOTE (738px) ---------------------------------------
   Section padding already compressed at L825; tighten the heading
   gap + cap the read-more rule width so the editorial close reads
   as one calm column. (display face is enforced via the token
   remap; restated here for the weight-300 inline rules.) */
html body.reviewed-page .agv7-field__h {
  font-family: var(--font-display) !important; font-style: normal !important; font-weight: 600 !important;
  color: var(--ink) !important; margin: 0 0 1.25rem !important; letter-spacing: -0.02em !important;
}
html body.reviewed-page .agv7-field__h em { font-style: normal !important; color: var(--accent) !important; }
html body.reviewed-page .agv7-field__body p {
  font-family: var(--font-body) !important; font-weight: 400 !important;
  color: var(--ink-2) !important; line-height: 1.65 !important; margin: 0 0 1.1rem !important;
}
html body.reviewed-page .agv7-field__body a { color: var(--ink) !important; }
html body.reviewed-page .agv7-field__body a:hover { color: var(--accent) !important; }
html body.reviewed-page .agv7-field__readmore {
  margin-top: 1.75rem !important; padding-top: 1.1rem !important;
  border-top-color: var(--line) !important; color: var(--muted) !important;
}
html body.reviewed-page .agv7-field__readmore a { color: var(--ink-2) !important; }

/* ---- CROSS-LINKS (356px) --------------------------------------
   Retire the inline Georgia serif + off-token greys (#4A4641 /
   #0D0D0D) that leak through from the element style attrs; bring
   the "More from GLOW" footer onto the Inter + bronze system.
   !important is required to override the element inline styles. */
html body.reviewed-page .glow-crosslinks { background: var(--paper) !important; }
html body.reviewed-page .glow-crosslinks > div {
  max-width: 1080px !important;
  padding-block: clamp(2rem, 3.5vw, 2.75rem) !important;
  border-top-color: var(--line) !important;
}
html body.reviewed-page .glow-crosslinks > div > p,
html body.reviewed-page .glow-crosslinks li:first-child {
  font-family: var(--font-body) !important; color: var(--muted) !important;
  letter-spacing: 0.18em !important;
}
html body.reviewed-page .glow-crosslinks > div > div { font-family: var(--font-body) !important; }
html body.reviewed-page .glow-crosslinks a {
  font-family: var(--font-body) !important; color: var(--ink) !important;
  border-bottom-color: var(--line) !important; transition: color .15s ease, border-color .15s ease;
}
html body.reviewed-page .glow-crosslinks a:hover { color: var(--accent) !important; border-bottom-color: var(--accent-ring) !important; }

/* ============================================================================
   REVIEW TEMPLATE DE-CLUTTER -- CONSOLIDATED PASS (2026-06-19)
   Single-brand review template only (body.reviewed-page). Synthesises the
   hero/ticker/scorebox, heroproduct/range/disclosure, verdict/method and
   whole-page rhythm audits into one block. The FAQ / AI-answer / field /
   cross-links block already appended above this comment is the fifth audit:
   it is NOT repeated here; faq + aianswer are intentionally OMITTED from the
   padding scale below because that block already sets them tighter.

   SCOPING: every selector is prefixed 'html body.reviewed-page ...' OR keyed
   off a review-only container (.agv7-range__grid, .agv7-scorebox, .agv7-quick,
   .agv7-heroproduct, .agv7-disclosure, .agv7-method). glow.css loads AFTER the
   inline #agv7-review-pass style (and after element inline styles for the
   quick block), so body.reviewed-page + !important wins WITHOUT touching
   ranking / category / confessions / the-glow-100 pages that reuse the same
   .agv7-* classes. No coral/cream, no serif, no em-dashes.
   ============================================================================ */

/* ---- 1. UNIFIED SECTION PADDING SCALE -------------------------------------
   Heavy sections were clamp(6rem,10vw,11rem) top AND bottom (up to ~352px of
   dead space each). Cut ~45-55%. faq + aianswer excluded (handled above). */
html body.reviewed-page .agv7-scorebox,
html body.reviewed-page .agv7-heroproduct,
html body.reviewed-page .agv7-range,
html body.reviewed-page .agv7-method,
html body.reviewed-page .agv7-field {
  padding-top: clamp(3rem, 5.5vw, 5rem) !important;
  padding-bottom: clamp(3rem, 5.5vw, 5rem) !important;
}
/* Thin connective sections get a smaller rhythm step. */
html body.reviewed-page .agv7-disclosure {
  padding-top: clamp(2.25rem, 4vw, 3.25rem) !important;
  padding-bottom: clamp(2.25rem, 4vw, 3.25rem) !important;
}
html body.reviewed-page .agv7-quick {
  padding-top: clamp(2.5rem, 4.5vw, 3.75rem) !important;
  padding-bottom: clamp(2.5rem, 4.5vw, 3.75rem) !important;
}
/* Open the page tighter. */
html body.reviewed-page .agv7-hero {
  padding-top: clamp(2rem, 4vw, 3rem) !important;
  padding-bottom: clamp(2.5rem, 5vw, 4rem) !important;
}
/* Calmer internal gaps now the outer padding is smaller. */
html body.reviewed-page .agv7-scorebox__inner,
html body.reviewed-page .agv7-heroproduct__inner {
  gap: clamp(2rem, 3.5vw, 3rem) !important;
}
/* Anchored jumps land below a future sticky jump-nav (existing rule at
   glow.css:939 covers only ranking-page classes, not these). */
html body.reviewed-page .agv7-scorebox,
html body.reviewed-page .agv7-heroproduct,
html body.reviewed-page .agv7-range,
html body.reviewed-page .agv7-quick,
html body.reviewed-page .agv7-method,
html body.reviewed-page .agv7-faq,
html body.reviewed-page .agv7-aianswer,
html body.reviewed-page .agv7-field {
  scroll-margin-top: 72px;
}

/* ---- 2. HERO --------------------------------------------------------------
   Fonts/H1-size/colour already remapped to Lexend + grey upstream. Trim the
   breadcrumb void, align copy to image, cap the portrait + graceful 404. */
html body.reviewed-page .agv7-hero__crumb {
  margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem) !important;
}
html body.reviewed-page .agv7-hero__grid {
  align-items: center !important;
  gap: clamp(2rem, 4vw, 3.5rem) !important;
}
html body.reviewed-page .agv7-hero__h1 { margin-bottom: 1.1rem !important; }
html body.reviewed-page .agv7-hero__dek { margin-bottom: 1.5rem !important; }
html body.reviewed-page .agv7-hero__image {
  aspect-ratio: 4 / 5 !important;
  max-height: clamp(360px, 46vw, 520px) !important;
  border-radius: var(--r) !important;
  background: var(--porcelain) !important;
  box-shadow: inset 0 0 0 1px var(--line) !important;
  overflow: hidden !important;
}
html body.reviewed-page .agv7-hero__image img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; border-radius: inherit !important;
}

/* ---- 3. TICKER ------------------------------------------------------------
   Already on-brand (dark ink divider). Light trim + balance the line. */
html body.reviewed-page .agv7-ticker {
  padding-top: clamp(0.85rem, 1.4vw, 1.05rem) !important;
  padding-bottom: clamp(0.85rem, 1.4vw, 1.05rem) !important;
}
html body.reviewed-page .agv7-ticker__inner {
  max-width: 980px !important;
  text-wrap: balance !important;
  line-height: 1.5 !important;
}

/* ---- 4. SCOREBOX ----------------------------------------------------------
   Centre the two columns, shrink the 176px score, tighten the rubric. */
html body.reviewed-page .agv7-scorebox__inner {
  align-items: center !important;
}
html body.reviewed-page .agv7-scorebox__big {
  font-size: clamp(4.5rem, 9vw, 7rem) !important;
  margin-bottom: 0.4rem !important;
}
html body.reviewed-page .agv7-scorebox__rank { margin-bottom: 0 !important; }
html body.reviewed-page .agv7-scorebox .agv7-axes div {
  padding-top: 0.85rem !important;
  padding-bottom: 0.85rem !important;
}
html body.reviewed-page .agv7-scorebox .agv7-axes dt { font-size: 1.02rem !important; }
html body.reviewed-page .agv7-scorebox .agv7-axes .axis-num { font-size: 1.25rem !important; }

/* ---- 5. HERO PRODUCT ------------------------------------------------------
   Calmer 4/5 portrait (was force-cropped square), anchor copy to top, kill
   the forbidden Canela serif on price + verdict, swap rose -> bronze. */
html body.reviewed-page .agv7-heroproduct__inner {
  align-items: start !important;
}
html body.reviewed-page .agv7-heroproduct__image {
  aspect-ratio: 4 / 5 !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
  background: var(--porcelain) !important;
}
html body.reviewed-page .agv7-heroproduct__price {
  font-family: var(--font-display) !important;
  font-style: normal !important;
  margin: 0 0 1rem !important;
}
html body.reviewed-page .agv7-heroproduct__price em {
  font-style: normal !important;
  color: var(--accent) !important;
}
html body.reviewed-page .agv7-heroproduct__verdict {
  font-family: var(--font-display) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: clamp(1.1rem, 1.4vw, 1.25rem) !important;
  line-height: 1.45 !important;
  border-left-color: var(--accent) !important;
  margin: 0 0 1.75rem !important;
}

/* ---- 6. THE RANGE: RESTORE VERTICAL 3-UP CARDS (the core bug fix) ---------
   Undoes glow.css' GLOBAL horizontal 320px|1fr grid ONLY inside the review
   page's range grid. Double-scoped (body.reviewed-page + .agv7-range__grid)
   so ranking/category/confession/glow-100 cards keep their layout intact. */
html body.reviewed-page .agv7-range__head {
  margin: 0 0 clamp(2rem, 4vw, 2.75rem) !important;
}
html body.reviewed-page .agv7-range__grid .agv7-card {
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  border-radius: var(--r) !important;
  overflow: hidden !important;
}
html body.reviewed-page .agv7-range__grid .agv7-card::before {
  content: none !important; /* suppress ranking rank-circle pseudo if ever matched */
}
html body.reviewed-page .agv7-range__grid .agv7-card__img {
  aspect-ratio: 4 / 5 !important;
  width: 100% !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  background: var(--porcelain) !important;
}
html body.reviewed-page .agv7-range__grid .agv7-card__img img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; display: block !important;
}
html body.reviewed-page .agv7-range__grid .agv7-card__body {
  padding: clamp(1.25rem, 2vw, 1.6rem) !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  gap: 0 !important;
}
html body.reviewed-page .agv7-range__grid .agv7-card__rank {
  color: var(--accent) !important;
  margin: 0 0 0.65rem !important;
}
html body.reviewed-page .agv7-range__grid .agv7-card__title {
  font-family: var(--font-display) !important;
  font-size: clamp(1.15rem, 1.5vw, 1.3rem) !important;
  line-height: 1.15 !important;
  margin: 0 0 0.6rem !important;
}
html body.reviewed-page .agv7-range__grid .agv7-card__copy {
  font-family: var(--font-body) !important;
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
  color: var(--ink-2) !important;
  margin: 0 0 1rem !important;
  flex: 1 1 auto !important; /* pins price to the card bottom for equal heights */
}
html body.reviewed-page .agv7-range__grid .agv7-card__price {
  margin: 0 !important;
  padding-top: 1rem !important;
  border-top: 1px solid var(--line) !important;
}
html body.reviewed-page .agv7-range__grid .agv7-card__score {
  color: var(--accent) !important;
  font-style: normal !important;
}

/* ---- 7. DISCLOSURE: kill serif italic, settle as a calm lead -------------- */
html body.reviewed-page .agv7-disclosure__inner { border-left-color: var(--accent) !important; }
html body.reviewed-page .agv7-disclosure__label { color: var(--accent) !important; }
html body.reviewed-page .agv7-disclosure__body {
  font-family: var(--font-body) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: clamp(1rem, 1.2vw, 1.1rem) !important;
  line-height: 1.6 !important;
  color: var(--ink-2) !important;
}
html body.reviewed-page .agv7-disclosure__body strong {
  font-style: normal !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}

/* ---- 8. THE VERDICT (agv7-quick) ------------------------------------------
   The real inner wrapper is an UNCLASSED div carrying an inline style
   "max-width:1320px;padding:clamp(5rem,9vw,9rem) ..." (~260px void). Override
   it directly (only direct-child div of .agv7-quick) and restore hierarchy. */
html body.reviewed-page .agv7-quick > div {
  max-width: 760px !important;
  padding-block: 0 !important;
  padding-inline: var(--gutter, clamp(1.25rem, 4vw, 2.5rem)) !important;
  margin-inline: auto !important;
}
html body.reviewed-page .agv7-quick__eyebrow {
  font-family: var(--font-body) !important;
  font-size: var(--fs-eyebrow, 0.72rem) !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  margin: 0 0 0.9rem !important;
}
html body.reviewed-page .agv7-quick__body {
  font-family: var(--font-body) !important;
  font-size: clamp(1.18rem, 1.6vw, 1.4rem) !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
  max-width: 40ch !important;
  margin: 0 0 1.1rem !important;
}
html body.reviewed-page .agv7-quick__body a {
  color: var(--accent) !important;
  border-bottom: 1px solid var(--accent-ring) !important;
}
html body.reviewed-page .agv7-quick__rating {
  font-family: var(--font-body) !important;
  font-size: 0.86rem !important;
  line-height: 1.55 !important;
  color: var(--muted) !important;
  margin: 0 !important;
}
html body.reviewed-page .agv7-quick__rating strong {
  font-weight: 600 !important;
  color: var(--ink-2) !important;
}

/* ---- 9. THE METHOD --------------------------------------------------------
   Section padding handled above; tighten per-item rhythm, head gap, measure. */
html body.reviewed-page .agv7-method__head {
  margin: 0 0 clamp(1.5rem, 3vw, 2rem) !important;
}
html body.reviewed-page .agv7-method__list .agv7-method__item {
  padding-block: clamp(1.15rem, 1.8vw, 1.4rem) !important;
}
@media (min-width: 760px) {
  html body.reviewed-page .agv7-method__list .agv7-method__item {
    column-gap: clamp(1.75rem, 3vw, 2.25rem) !important;
  }
}
html body.reviewed-page .agv7-method__item dd {
  max-width: 62ch !important;
}
/* ================================================================
   SITE-WIDE ATTRACTIVENESS PASS (2026-06-19) — recovered from the
   12-family audit. Each block is scoped to its family body/section
   classes. Appended after all prior rules; glow.css loads last.
   ================================================================ */
/* ============================================================
   FAMILY: best-of-ranking  (body.reviews-skin, agv7-ranking template)
   Scoped to html body.reviews-skin so it only touches this family.
   These are appended after glow.css and only BACK-FILL agv7 tokens
   that glow.css left unmapped, plus 2 off-brand inline SVG fills.
   The bronze remaps are no-ops on the 16 pages that already define
   --agv7-accent: #9A6A4B, and only correct the burgundy (#6E2C2C)
   and olive (#2A3A2F) pages. No effect on the agv7 ranking-card
   geometry, which glow.css already styles well.
   ============================================================ */

/* 1. Off-brand accent back-fill: burgundy #6E2C2C (tan) and olive
      #2A3A2F (wellness/cleanser/best) -> single warm bronze. Custom
      property on `html body.reviews-skin` (specificity 0,0,2 + later
      cascade) overrides the inline :root definition, so every inline
      rule that reads var(--agv7-accent) (heading em accents, verdict
      ticker, card-title em, quick/method link underlines, readmore
      hover) recolours to bronze in one place. */
html body.reviews-skin {
  --agv7-accent: var(--accent) !important;        /* was #6E2C2C / #2A3A2F / #6B4A2B */
  /* Cream surface back-fill: --agv7-canvas-3 #F3EEE5 (banned cream)
     is used as a background on image placeholders + section bands
     (.agv7-device__img, .agv7-feat__media, .agv7-email, etc.). Map
     to the cool neutral panel, matching glow.css's --canvas-3 -> sand. */
  --agv7-canvas-3: var(--sand) !important;         /* was #F3EEE5 cream / #f4f4f5 */
  /* Warm-grey body text -> system muted for tonal cohesion with the
     cool-neutral palette (hair/eye-cream/devices/tan-gradual). */
  --agv7-body-soft: var(--muted) !important;       /* was #5C554B */
}

/* 2. Inline SVG scorecard graphic: one bar is hard-coded
      fill="#2A3A2F" (off-brand olive) on best-supplements-for-sleep
      and skincare/best-cleanser. The CSS `fill` property overrides
      the SVG presentation attribute. Scoped to this family only. */
html body.reviews-skin svg rect[fill="#2A3A2F"],
html body.reviews-skin svg rect[fill="#2a3a2f"] {
  fill: var(--accent) !important;
}
/* =====================================================================
   GLOW — brand-landing family fixes  (APPEND to assets/glow.css)
   Bespoke brand pages each carry a per-page inline <style> on their own
   *-page body class. Several ship banned colour (burgundy/plum/rose,
   teal/mint, gold, cream) and serif font vars ('Canela', Georgia, serif).
   'Canela' is aliased to Lexend in fonts.css, so the serif vars render
   Lexend TODAY; we still pin them to --font-display as a safety net in
   case the remote Canela/Lexend @font-face CDN fails and falls back to
   Georgia (banned). Every rule below is scoped to a brand body class or
   to the brand-only gbp template, so nothing leaks to other families
   (the wellness family also uses .bc-page + .gbp-hero, so it is
   explicitly excluded with :not([class*="wellness"])).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. gbp "Glow Brand Voice" template  (~70 brand pages incl. omnilux)
      Remap plum/putty accent + gold + cream + coral residue to bronze.
      Scope: brand pages only (exclude wellness-*), that carry .gbp-hero.
   --------------------------------------------------------------------- */
html body.bc-page:not([class*="wellness"]):has(.gbp-hero) {
  --rose:        #9A6A4B !important;   /* was deep plum / putty */
  --gb-plum:     #9A6A4B !important;
  --gb-blush:    var(--accent-soft) !important;
  --canvas-3:    var(--line-2) !important;   /* taupe divider -> neutral */
  --ag-coral:      #9A6A4B !important;
  --ag-coral-soft: var(--accent-soft) !important;
  --ag-pink:       var(--accent-soft) !important;
  --ag-pink-soft:  var(--porcelain) !important;
}
/* defensive serif -> Lexend on this template */
html body.bc-page:not([class*="wellness"]):has(.gbp-hero) {
  --ff-serif: var(--font-display) !important;
  --agv7-ff-serif: var(--font-display) !important;
}
/* hardcoded off-brand gold on the image-hero -> bronze */
html body.bc-page:not([class*="wellness"]) .gbp-hero--image .gbp-hero__category,
html body.bc-page:not([class*="wellness"]) .gbp-hero--image .gbp-hero__category::before,
html body.bc-page:not([class*="wellness"]) .gbp-hero--image .gbp-hero__h1 em,
html body.bc-page:not([class*="wellness"]) .gbp-hero--image .gbp-hero__take-label {
  color: #E8C9A8 !important;          /* warm bronze-tint, legible on the dark scrim */
}
html body.bc-page:not([class*="wellness"]) .gbp-hero--image .gbp-hero__take::before {
  background: #E8C9A8 !important;
}
/* cream product-photo backplate -> cool porcelain */
html body.bc-page:not([class*="wellness"]) .gbp-product__photo {
  background: var(--porcelain) !important;
}
/* neutralise the leftover coral radial wash in the about background */
html body.bc-page:not([class*="wellness"]) .gbp-about {
  background-image:
    radial-gradient(ellipse at 30% 35%, rgba(154,106,75,0.07) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 75%, rgba(23,18,14,0.05) 0%, transparent 50%) !important;
}

/* ---------------------------------------------------------------------
   2. Charlotte Tilbury (.ctv-page) — burgundy/rose -> bronze
   --------------------------------------------------------------------- */
html body.ctv-page {
  --ctv-rose:      #9A6A4B !important;   /* was #872C44 */
  --ctv-rose-deep: #7B5236 !important;   /* was #6B1F35 */
  --ctv-rose-soft: var(--accent-soft) !important;   /* was pink #F4E8EC */
  --ctv-canvas-2:  var(--porcelain) !important;      /* was rose-tinted #FAF5F2 */
  --ctv-ff-serif:  var(--font-display) !important;   /* defensive: no Georgia fallback */
}
/* soften the heavy saturated card border to the system hairline */
html body.ctv-page .ctv-card {
  border-color: var(--line) !important;
}
html body.ctv-page .ctv-card__img {
  border-bottom-color: var(--line) !important;
}

/* ---------------------------------------------------------------------
   3. Drunk Elephant (.de-page) — mint/teal -> bronze
   --------------------------------------------------------------------- */
html body.de-page {
  --de-mint:      #9A6A4B !important;    /* was teal #4FB8A6 */
  --de-ff-serif:  var(--font-display) !important;
}

/* ---------------------------------------------------------------------
   4. Loving Tan (.lt-page) — palette already bronze; serif safety net
   --------------------------------------------------------------------- */
html body.lt-page {
  --ltv-ff-serif: var(--font-display) !important;
}

/* ---------------------------------------------------------------------
   5. Coco & Eve (.ce-page) — palette already bronze; serif safety net
   --------------------------------------------------------------------- */
html body.ce-page {
  --agv7-ff-serif: var(--font-display) !important;
}/* =====================================================================
   CAT-LUX FAMILY — final premium polish (APPEND to assets/glow.css)
   Scope: every selector is prefixed with body.cat-lux so nothing leaks
   onto other templates that reuse .agv7-* / .gbp-* / .rlt-* classes.
   Fixes residual issues the inline #cat-lux-premium block left behind
   (coral box-shadows / tints, duplicate rank numerals, empty tile badge).
   ===================================================================== */

/* 1. HERO PRIMARY CTA — kill the banned coral hover glow ---------------
   Inline rule: .cat-lux .gbp-hero__cta--primary:hover{box-shadow:..rgba(209,79,92,.35)}.
   glow.css overrides the background but not the shadow. Swap to a calm
   neutral ink lift; also tidy the resting CTA shadow. */
html body.cat-lux .gbp-hero__cta--primary {
  box-shadow: 0 2px 10px rgba(23, 18, 14, 0.12) !important;
}
html body.cat-lux .gbp-hero__cta--primary:hover {
  box-shadow: 0 8px 22px rgba(23, 18, 14, 0.22) !important;
}

/* 2. COMPARISON TABLE — winning row coral tint -> bronze-soft ----------
   Inline rules paint tr:first-child with rgba(209,79,92,.06/.04) (coral).
   Re-tint with the design-system bronze (accent-soft) so the #1 row still
   reads as highlighted, on-brand. Double-scoped to the table only. */
html body.cat-lux .agv7-compare__table tbody tr:first-child th,
html body.cat-lux .agv7-compare__table tbody tr:first-child td {
  background: var(--accent-soft) !important;
}

/* 3. RANKED CARDS — remove the DUPLICATE rank numeral -----------------
   The card text already begins "01, Best concealer ...". The decorative
   ::before injects a second giant "01"-"05", so the rank reads twice.
   Neutralise the pseudo numeral; the clean bronze text rank (styled by
   glow.css) remains, with its hairline underline intact. */
html body.cat-lux .agv7-products__grid .agv7-card__rank::before {
  content: none !important;
}
/* Restore a calm rank line now that the big numeral is gone: drop the
   pseudo-driven baseline flex gap so the single text rank sits clean. */
html body.cat-lux .agv7-products__grid .agv7-card__rank {
  display: block !important;
  gap: 0 !important;
}

/* 4. PROOF TILES — remove the empty floating circle badge -------------
   .agv7-proof__tile::before is a 34px blank white disc with no icon; it
   reads as an unfinished overlay. Hide it for a clean editorial tile. */
html body.cat-lux .agv7-proof__tile::before {
  content: none !important;
  display: none !important;
}

/* 5. RED-LIGHT-THERAPY HERO — coral radial glow -> bronze --------------
   .rlt-hero is a private namespace glow.css never touches, so its dark
   hero keeps a banned coral radial glow. Re-tint with the bronze accent
   so the warm wash stays but the colour is on-brand. */
html body.cat-lux .rlt-hero::before {
  background: radial-gradient(
    ellipse 80% 60% at 70% 50%,
    rgba(154, 106, 75, 0.16) 0%,
    transparent 70%
  ) !important;
}/* ============================================================
   COMPARE-VS FAMILY — final premium pass (append-only)
   Scope: .vs-* section classes. VERIFIED EXCLUSIVE to X-vs-Y
   comparison pages (all users of vs-split/vs-verdict/vs-side are
   *-vs-* pages across skincare/makeup/tan/hair/devices; zero
   guide/hub/review pages use them). Safe to address globally via
   .vs-* without a body hook. Uses only GLOW tokens.
   Does NOT touch ph2-* (shared w/ best+guides), gv3-compare-table
   / gv3-trust-grid (shared w/ guide city pages), or ai-answer /
   author-byline (shared 100+ pages) — those are in needsMarkup.
   ============================================================ */

/* ---- 1. VERDICT BAND — fix the white-on-white invisible text.
   --panel/--panel-ink are undefined here (reviews.css not loaded),
   so define a real dark editorial band on the ink token and make
   every child legible. */
html body section.vs-verdict {
  background: var(--ink) !important;
  color: rgba(255,255,255,0.92) !important;
  border-block: 1px solid var(--line) !important;
}
html body section.vs-verdict .tag {
  color: var(--accent-soft) !important;
  opacity: 0.92;
}
html body section.vs-verdict h2,
html body section.vs-verdict h2 em {
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-style: normal !important;
  letter-spacing: -0.01em !important;
}
html body section.vs-verdict h2 em { color: var(--accent-soft) !important; }
html body section.vs-verdict p {
  color: rgba(255,255,255,0.80) !important;
}

/* ---- 2. SIDE-BY-SIDE CARDS — proper card treatment (radius,
   hairline, subtle shadow, hover) instead of a flat 1px box. */
html body section.vs-split .vs-side {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-sm) !important;
  padding: clamp(1.5rem, 3vw, 2.25rem) !important;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
html body section.vs-split .vs-side:hover {
  box-shadow: var(--sh) !important;
  border-color: var(--line-2) !important;
  transform: translateY(-2px);
}
html body section.vs-split .vs-side.winner {
  border-color: var(--accent-ring) !important;
  box-shadow: 0 0 0 1px var(--accent-ring), var(--sh) !important;
}
html body section.vs-split .vs-side.winner::before {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: var(--pill) !important;
  letter-spacing: 0.18em !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  padding: 0.4rem 1rem !important;
}
html body section.vs-split .vs-side .vs-brand {
  color: var(--accent) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
}
html body section.vs-split .vs-side h2 {
  font-family: var(--font-display) !important;
  font-style: normal !important;
  color: var(--ink) !important;
  letter-spacing: -0.01em !important;
}
html body section.vs-split .vs-side .vs-price {
  font-family: var(--font-display) !important;
  font-style: normal !important;
  color: var(--accent-deep) !important;
  font-weight: 500 !important;
}
html body section.vs-split .vs-side .vs-pitch { color: var(--ink-2) !important; }

/* ---- 3. IMAGE VOIDS — kill the broken centred dark bar; turn the
   empty .vs-img into a clean branded placeholder tile. Override the
   inline gradient (which referenced undefined --tone-2) too. */
html body section.vs-split .vs-side .vs-img {
  background: linear-gradient(160deg, var(--porcelain) 0%, var(--sand) 100%) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  aspect-ratio: 4 / 3 !important;
  max-width: 240px !important;
}
html body section.vs-split .vs-side .vs-img::before {
  content: "GLOW" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  font-family: var(--font-display) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.32em !important;
  color: var(--muted) !important;
  opacity: 0.55 !important;
}

/* ---- 4. DIVIDER — bronze, Lexend, quieter scale. */
html body section.vs-split .vs-divider {
  color: var(--accent) !important;
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
  align-self: center;
}

/* ---- 5. HERO — Lexend headline, em in bronze, calm meta. */
html body section.vs-hero h1,
html body section.vs-hero h1 em {
  font-family: var(--font-display) !important;
  font-style: normal !important;
  color: var(--ink) !important;
  letter-spacing: -0.02em !important;
}
html body section.vs-hero h1 em { color: var(--accent) !important; }
html body section.vs-hero .lede { color: var(--ink-2) !important; }
html body section.vs-hero .breadcrumb,
html body section.vs-hero .meta { color: var(--muted) !important; }

/* ---- 6. SIDE-BY-SIDE TABLE — editorial polish: hairline rows,
   Lexend column heads, bronze label accents, comfortable padding. */
html body section.vs-table-section .vs-table {
  border-top: 1px solid var(--line-2) !important;
}
html body section.vs-table-section .vs-table thead th {
  font-family: var(--font-display) !important;
  font-style: normal !important;
  color: var(--ink) !important;
  font-weight: 500 !important;
  border-bottom: 1px solid var(--ink) !important;
  padding: 0.9rem 1rem !important;
}
html body section.vs-table-section .vs-table th[scope="row"] {
  color: var(--accent) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
}
html body section.vs-table-section .vs-table td,
html body section.vs-table-section .vs-table th[scope="row"] {
  padding: 0.9rem 1rem !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--ink-2);
}
html body section.vs-table-section .vs-table tbody tr:hover {
  background: var(--porcelain) !important;
}
html body section.vs-table-section .sec-head h2,
html body section.vs-table-section .sec-head h2 em {
  font-family: var(--font-display) !important;
  font-style: normal !important;
  color: var(--ink) !important;
}
html body section.vs-table-section .sec-head h2 em { color: var(--accent) !important; }
html body section.vs-table-section .aff-note { color: var(--muted) !important; }/* =================================================================
   FAMILY: concern  (body.bc-page.concern-page)
   Scope: every selector prefixed with html body.concern-page so it
   cannot leak onto other templates that reuse .cld__* / generic names.
   Fixes banned cream/beige surfaces + banned Canela serif headings
   carried by the inline <style id="concern-page-2026"> block.
   ================================================================= */

/* 1. Page canvas: banned cream #FBF8F3 -> cool porcelain brand surface.
   The inline rule is body.concern-page (class specificity), so we match
   the same specificity + !important and win via load order. */
html body.concern-page {
  background: var(--porcelain) !important;
  color: var(--ink-2) !important;
}

/* 2. Hero H1: kill banned Canela/Georgia serif -> Lexend Deca display. */
html body.concern-page .cn-hero__h1 {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
}

/* Hero eyebrow stays bronze; pin to token so it can't drift. */
html body.concern-page .cn-hero__eyebrow { color: var(--accent) !important; }

/* Hero copy + grid head + disclaimer: lock to brand body font/ink tokens. */
html body.concern-page .cn-hero__dek,
html body.concern-page .cn-hero__intro {
  font-family: var(--font-body) !important;
  color: var(--ink-2) !important;
}
html body.concern-page .cn-grid-head__label,
html body.concern-page .cn-grid-head__count,
html body.concern-page .cn-cross__label,
html body.concern-page .cn-disclaimer { color: var(--muted) !important; }

/* 3. Search field: token hairline + bronze focus ring (was hard ink border). */
html body.concern-page .cn-search__input {
  border: 1px solid var(--line-2) !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-radius: var(--pill) !important;
}
html body.concern-page .cn-search__input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-ring) !important;
}

/* 4. Treatment/skill tag chips: banned beige #F4ECE3 -> porcelain hairline pill. */
html body.concern-page .cld__tag {
  background: var(--porcelain) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink-2) !important;
  font-family: var(--font-body) !important;
}

/* 5. Clinic card placeholder initials: banned Canela serif -> Lexend.
   (Shown when a clinic hero image is missing on these pages.) */
html body.concern-page .cld__placeholder__initials {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
}
html body.concern-page .cld__placeholder__suburb { color: var(--muted) !important; }

/* 6. Cross-link pills: token hairline + porcelain hover (was banned beige). */
html body.concern-page .cn-cross__pill {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  border-radius: var(--pill) !important;
}
html body.concern-page .cn-cross__pill:hover {
  background: var(--porcelain) !important;
  border-color: var(--line-2) !important;
}

/* 7. Section dividers: align inline rgba lines to the brand hairline token. */
html body.concern-page .cn-hero,
html body.concern-page .cn-cross { border-color: var(--line) !important; }

/* 8. Empty-state box, if rendered: keep on-brand. */
html body.concern-page .cn-empty {
  border: 1px dashed var(--line-2) !important;
  border-radius: var(--r-lg) !important;
  color: var(--muted) !important;
}
html body.concern-page .cn-empty a { color: var(--accent) !important; }/* =====================================================================
   FAMILY: essays-editorial  (essays/*.html + field-notes/*.html)
   Real pages all carry <body class="reviews-skin"> (shared with the
   whole reviews family) so NOTHING here is scoped to reviews-skin.
   Every selector is scoped to the family-UNIQUE section wrappers:
     .ei-*  essays index      .es-*  essay article
     .fn-*  field-notes index + field-notes article
   These prefixes appear ONLY on essays/field-notes pages, so these
   rules cannot leak onto any other template.
   glow.css loads last, so html body .x + !important wins the page's
   own inline <style>.
   ===================================================================== */

/* ---- 1. KILL FAUX-ITALIC ON THE LEXEND DISPLAY FACE -----------------
   Lexend Deca ships only a normal face (fonts.css imports wght@..;
   font-style:normal only). The pages set font-style:italic on heading
   <em>, standfirsts, italic sub-heads, blockquotes, avatar initials and
   drop-caps - all of which resolve to --ff-serif = Lexend and therefore
   render as a cheap synthetic oblique. Force upright; emphasis is still
   carried by the bronze accent colour already applied to these <em>s.
   (Inter body <em> in .es-body / .fn-body is a TRUE italic and is left
   untouched on purpose - we only target the display-face elements.) */
html body .ei-hero h1 em,
html body .ei-essay h2 em,
html body .es-hero h1 em,
html body .es-hero .standfirst,
html body .es-byline-avatar,
html body .es-body h2 em,
html body .es-body h3,
html body .es-body blockquote,
html body .es-body td.num,
html body .es-related h2 em,
html body .es-related-card h3 em,
html body .fn-hero h1 em,
html body .fn-card h3 em,
html body .fn-post-hero h1 em,
html body .fn-avatar {
  font-style: normal !important;
}
/* Give the now-upright heading emphasis a touch more presence so the
   bronze <em> still reads as deliberate emphasis, not an accident. */
html body .ei-hero h1 em,
html body .ei-essay h2 em,
html body .es-hero h1 em,
html body .es-body h2 em,
html body .es-related h2 em,
html body .es-related-card h3 em,
html body .fn-hero h1 em,
html body .fn-card h3 em,
html body .fn-post-hero h1 em {
  font-weight: 500 !important;
  color: var(--accent-deep) !important;
}

/* Standfirst: was an italic serif; now an upright Lexend lead line.
   Keep it clearly distinct from body copy - lighter weight, generous
   line-height, secondary ink. */
html body .es-hero .standfirst {
  font-weight: 300 !important;
  color: var(--ink-2) !important;
  letter-spacing: -0.005em !important;
}

/* Italic sub-heads (.es-body h3 / .fn-body h3) -> upright small caps-y
   section label feel, still bronze-adjacent but clean. */
html body .es-body h3 {
  letter-spacing: -0.01em !important;
  color: var(--ink) !important;
}

/* ---- 2. DROP-CAP: upright Lexend, cleanly aligned -------------------
   The floated ::first-letter was italic Lexend at 4-4.5rem and slanted
   awkwardly over the first line. Make it upright, heavier, optically
   aligned, in bronze. */
html body .es-body p:first-of-type::first-letter,
html body .fn-body p:first-of-type::first-letter {
  font-style: normal !important;
  font-weight: 600 !important;
  color: var(--accent-deep) !important;
  line-height: 0.8 !important;
  padding-right: 0.55rem !important;
  padding-top: 0.32rem !important;
  -webkit-font-smoothing: antialiased;
}

/* ---- 3. AVATAR INITIALS: upright, bronze on porcelain ---------------*/
html body .es-byline-avatar,
html body .fn-avatar {
  font-weight: 600 !important;
  color: var(--accent-deep) !important;
  background: var(--accent-soft) !important;
  letter-spacing: 0.02em !important;
}

/* ---- 4. PULL-QUOTE: rebuild as a real editorial blockquote ----------
   Italic is gone, so reinforce the quote with size, weight and the
   bronze rule (the inline rule already sets border-left bronze; we make
   it premium and unmistakably a pull-quote). Scoped to essay bodies. */
html body .es-body blockquote {
  font-weight: 400 !important;
  font-size: clamp(1.3rem, 2vw, 1.55rem) !important;
  line-height: 1.4 !important;
  color: var(--ink) !important;
  border-left: 3px solid var(--accent) !important;
  padding: 0.1rem 0 0.1rem 1.6rem !important;
  margin: 2.75rem 0 !important;
  letter-spacing: -0.01em !important;
}

/* ---- 5. PRICING TABLE REPAIR (the essay's centrepiece) --------------
   The page's inline rule  .es-body th.es-body td {...}  is a broken
   compound selector, so <td> cells inherited none of the intended
   padding / border / alignment. Rebuild the table cleanly: hairline
   row borders, comfortable padding, a porcelain header row, right-
   aligned numeric columns, and emphasised total rows. Scoped to
   .es-body table so it can only affect essay articles. */
html body .es-body table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 2.25rem 0 !important;
  font-size: 0.95rem !important;
}
html body .es-body table th,
html body .es-body table td {
  text-align: left !important;
  padding: 0.7rem 0.9rem !important;
  border-bottom: 1px solid var(--line) !important;
  vertical-align: top !important;
  line-height: 1.4 !important;
}
html body .es-body table thead th {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  background: var(--porcelain) !important;
  border-bottom: 1px solid var(--line-2) !important;
  vertical-align: bottom !important;
  white-space: nowrap !important;
}
/* numeric columns: 2nd and 3rd cells right-aligned, tabular, upright */
html body .es-body table td + td,
html body .es-body table th + th {
  text-align: right !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}
html body .es-body table td.num {
  font-family: var(--font-body) !important;
  color: var(--ink-2) !important;
  font-variant-numeric: tabular-nums !important;
}
/* total / summary rows (cells whose text is wrapped in <strong>) read
   as the anchor lines of the cost stack */
html body .es-body table td strong,
html body .es-body table td.num strong {
  color: var(--ink) !important;
  font-weight: 600 !important;
}
html body .es-body table tbody tr:last-child td {
  border-bottom: 2px solid var(--ink) !important;
  border-top: 1px solid var(--line-2) !important;
}
/* keep wide tables from overflowing the 38rem measure on small screens */
@media (max-width: 600px) {
  html body .es-body table { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
}

/* ---- 6. RELATED-READING CARDS: premium hairline + lift -------------
   Inline rule already gives a 1px border that turns bronze on hover.
   Add radius, soft shadow on hover and a gentle raise so the trio reads
   as polished cards rather than flat boxes. Scoped to .es-related. */
html body .es-related-card {
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  background: var(--paper) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}
html body .es-related-card:hover {
  border-color: var(--accent) !important;
  box-shadow: var(--sh) !important;
  transform: translateY(-2px) !important;
}

/* ---- 7. ESSAY-INDEX & FIELD-NOTE LIST: tidy hover affordance --------
   .ei-essay shifts padding-left on hover (fine) but reads flat; give the
   bronze tag + a subtle baseline so the long list has rhythm. Purely
   cosmetic, scoped to the unique list-item classes. */
html body .ei-essay .ei-tag,
html body .fn-card .fn-meta,
html body .es-related-card .es-rt {
  font-weight: 600 !important;
  color: var(--accent-deep) !important;
}
html body .ei-essay:hover h2,
html body .fn-card:hover h3 {
  color: var(--accent-deep) !important;
}
html body .fn-card:hover h3 { transition: color 0.2s ease; }/* =========================================================================
   GUIDE-ARTICLES family polish — gv3 template (body.glow-guide-v3, ~31 pages)
   Scoped strictly to html body.glow-guide-v3 so nothing leaks onto other
   families that share .gv3-* / generic classes. Appended after glow.css; the
   site-chrome "EDITORIAL HERO RESKIN" uses !important on .gv3-hero, so the
   hero rules below also use !important to win on later source order.
   ========================================================================= */

/* 1. Unify the article spine: cap the hero copy to the same 760px column the
      body sections use, so H1/lede/breadcrumb share one centred editorial
      axis with the "short answer", method, FAQ and related blocks below.
      (Fixes the full-width hero vs narrow-body left-edge misalignment.) */
html body.glow-guide-v3 .gv3-hero > .wrap {
  max-width: 760px !important;
  margin-inline: auto !important;
}

/* Give the hero a touch more breathing room above the first body section
   and a consistent internal rhythm. */
html body.glow-guide-v3 .gv3-hero {
  padding-top: clamp(2.25rem, 4vw, 3.5rem) !important;
  padding-bottom: clamp(2rem, 3.5vw, 3rem) !important;
}

/* 2. Breadcrumb: editorial micro-label — tracked-out uppercase, muted,
      with clear separation from the eyebrow below it. */
html body.glow-guide-v3 .gv3-hero .breadcrumb {
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  margin: 0 0 1.6rem !important;
  line-height: 1.5 !important;
}
html body.glow-guide-v3 .gv3-hero .breadcrumb a {
  color: var(--muted) !important;
  border: 0 !important;
  transition: color 0.18s ease;
}
html body.glow-guide-v3 .gv3-hero .breadcrumb a:hover {
  color: var(--accent) !important;
}
html body.glow-guide-v3 .gv3-hero .breadcrumb span {
  color: var(--ink-2) !important;
}

/* 3. Hero eyebrow: proper block editorial eyebrow (it lost its pill/spacing
      when reviews.css stopped loading). Bronze, tracked, with rhythm to H1. */
html body.glow-guide-v3 .gv3-eyebrow {
  display: inline-block !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-eyebrow) !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  margin: 0 0 1rem !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

/* 4. Hero H1: cap the measure for a strong editorial line length and tighten
      the gap down to the lede. Font-family/size already handled upstream. */
html body.glow-guide-v3 .gv3-hero h1 {
  max-width: 20ch !important;
  margin: 0 0 1.25rem !important;
  text-wrap: balance;
}

/* 5. Hero lede: comfortable reading measure + spacing, on-brand muted ink. */
html body.glow-guide-v3 .gv3-lede {
  color: var(--ink-2) !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-lead) !important;
  line-height: 1.55 !important;
  max-width: 54ch !important;
  margin: 0 !important;
}

/* 6. Section eyebrow ↔ H2 rhythm: keep a consistent, slightly tighter gap so
      the repeated "eyebrow + heading" pattern reads as one tidy unit. */
html body.glow-guide-v3 .gv3-section-eyebrow {
  margin: 0 0 0.7rem !important;
}
html body.glow-guide-v3 .gv3-section-h2,
html body.glow-guide-v3 .gv3-trust-h2 {
  margin: 0 0 1rem !important;
}

/* 7. Related strip (dark .gv3-seo-block): replace the cream/peach #F0DCC8 link
      colour (off-brand, reads as banned cream) with an on-brand light-bronze
      tint so the dark closing block matches the single-accent system. */
html body.glow-guide-v3 .gv3-seo-block a {
  color: #D9B79C !important;
  border-bottom: 1px solid rgba(217,183,156,0.40) !important;
}
html body.glow-guide-v3 .gv3-seo-block a:hover {
  color: #fff !important;
  border-bottom-color: #fff !important;
}

/* 8. Polish: lift the FAQ +/- affordance and ensure the numbered method list
      counters/strong text stay crisp at all widths (defensive, scoped). */
html body.glow-guide-v3 .gv3-faq summary {
  padding-block: 0.1rem;
}
html body.glow-guide-v3 .gv3-ranked-sec ol > li {
  padding-left: 3.25rem;
}/* =====================================================================
   GUIDE-DIRECTORY FAMILY — final premium pass
   Scope: html body.reviews-skin .gg-*  (the .gg-* section classes are
   used ONLY by guide/ topic + city hubs; the gv3 best-of articles, the
   brands index and every other template use different classes, so these
   rules cannot leak. glow.css loads last, so html body.reviews-skin +
   !important wins over reviews.css / inline style attributes.)

   What this fixes (everything else in the family is already on-brand via
   glow.css's global legacy-token remap: --ff-serif->font-display Lexend,
   --rose-deep/--copper-deep/--bordeaux->accent bronze):
     1. guide/index.html category-card title words use inline
        color:#f7c2b8 (banned soft-pink) over dark image cards.
     2. wellness hub renders an EMPTY .gg-featured-grid -> broken void.
     3. skin / brows / injectables hubs: a single .gg-place card stretches
        and leaves ~66% dead space in the 3-col featured grid.
     4. hair hub: 2 cards leave an empty 3rd cell at desktop.
     5. a 4-card featured grid (e.g. sydney) orphans 1 card on row 2.
   ===================================================================== */

/* 1. Category-card emphasis: replace inline banned pink (#f7c2b8) with a
      light warm-bronze that reads against the dark photographic cards.
      Derived from the bronze accent token; !important beats the inline. */
html body.reviews-skin .gg-cat .body h3 em,
html body.reviews-skin .gg-cat h3 em {
  color: color-mix(in srgb, var(--accent) 32%, #ffffff) !important;
  font-style: italic !important;
}

/* 2. Collapse an empty featured grid so it never reads as a broken void
      (wellness hub: heading + copy promise content, grid is empty). */
html body.reviews-skin .gg-featured-grid:empty {
  display: none !important;
  margin: 0 !important;
}

/* 3-5. Right-size the featured grid by card count so a sparse grid never
   leaves a lone card stranded beside a wall of whitespace. Mobile (single
   column) is already correct; these only refine the >=1100px 3-col track. */
@media (min-width: 1100px) {
  /* exactly ONE card -> centred, comfortably capped */
  html body.reviews-skin .gg-featured-grid:has(> .gg-place:only-child) {
    grid-template-columns: minmax(0, 480px) !important;
    justify-content: center !important;
  }
  /* exactly TWO cards -> balanced 2-up, centred (no empty 3rd cell) */
  html body.reviews-skin .gg-featured-grid:has(> .gg-place:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 860px !important;
    margin-inline: auto !important;
  }
  /* exactly FOUR cards -> tidy 2x2 (no orphan card on row 2) */
  html body.reviews-skin .gg-featured-grid:has(> .gg-place:nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 880px !important;
    margin-inline: auto !important;
  }
}/* ============================================================
   HAIR CITY HUBS  (body.mel-hair-hub)  — final brand pass
   Covers: melbourne (full ranked list, old burgundy/cream/Canela
   inline style) + sydney + adelaide/brisbane/byron-bay/canberra/
   gold-coast/perth (newer coming-soon template).
   glow.css loads AFTER each page's inline <style>, so re-pointing
   the --mh-* tokens here + forcing Lexend on headings wins the
   cascade and removes ALL banned burgundy / cream / Canela serif
   without touching layout. Every selector scoped to .mel-hair-hub.
   ============================================================ */

/* 1) Re-point the family token system to GLOW design tokens.
      This single block fixes burgundy plum, cream surfaces and
      the serif font stack wherever they are consumed via var(). */
html body.mel-hair-hub {
  --mh-canvas:    var(--paper) !important;
  --mh-canvas-2:  var(--porcelain) !important;
  --mh-cream:     var(--porcelain) !important;   /* was #EFEAE0 cream */
  --mh-divider:   var(--sand) !important;
  --mh-ink:       var(--ink) !important;
  --mh-ink-soft:  var(--ink-2) !important;
  --mh-ink-body:  var(--ink-2) !important;
  --mh-ink-muted: var(--muted) !important;
  --mh-plum:      var(--accent) !important;       /* was #5B2634 burgundy */
  --mh-line:      var(--line) !important;
  --mh-line-2:    var(--line-2) !important;
  --mh-ff-serif:  var(--font-display) !important; /* was Canela/Georgia */
  --mh-ff-sans:   var(--font-body) !important;
}

/* 2) Force Lexend Deca on EVERY hub heading + remove the italic /
      light-serif treatment so hierarchy matches the rest of GLOW.
      Eyebrows/labels keep their tracked-uppercase look. */
html body.mel-hair-hub .mh-hero__h1,
html body.mel-hair-hub .mh-hero__dek,
html body.mel-hair-hub .mh-h2,
html body.mel-hair-hub .mh-h2 em,
html body.mel-hair-hub .mh-subhead__h3,
html body.mel-hair-hub .mh-subhead__h3 em,
html body.mel-hair-hub .mh-quickanswer,
html body.mel-hair-hub .mh-field__h,
html body.mel-hair-hub .mh-field__h em,
html body.mel-hair-hub .mh-field__body p,
html body.mel-hair-hub .mh-body__h2,
html body.mel-hair-hub .gcd-clinic-card__name,
html body.mel-hair-hub .gcd-clinic-card__name em,
html body.mel-hair-hub .gcd-clinic-card__pos,
html body.mel-hair-hub .gcd-clinic-card__facts dd,
html body.mel-hair-hub .gcd-clinic-card__score,
html body.mel-hair-hub .gcd-clinic-card__noimg-num,
html body.mel-hair-hub .mh-emptystate__h,
html body.mel-hair-hub .mh-salon-card__name {
  font-family: var(--font-display) !important;
  font-style: normal !important;
}

/* Headline weights: confident, not hairline-light */
html body.mel-hair-hub .mh-hero__h1,
html body.mel-hair-hub .mh-h2,
html body.mel-hair-hub .mh-field__h,
html body.mel-hair-hub .mh-body__h2,
html body.mel-hair-hub .mh-subhead__h3,
html body.mel-hair-hub .gcd-clinic-card__name,
html body.mel-hair-hub .mh-salon-card__name {
  font-weight: 600 !important;
  letter-spacing: -0.012em !important;
  color: var(--ink) !important;
}

/* em accents inside headings -> bronze, upright (was burgundy italic) */
html body.mel-hair-hub .mh-hero__h1 em,
html body.mel-hair-hub .mh-h2 em,
html body.mel-hair-hub .mh-subhead__h3 em,
html body.mel-hair-hub .mh-field__h em {
  color: var(--accent) !important;
  font-weight: 600 !important;
}

/* Body copy that was italic-serif -> Inter, readable */
html body.mel-hair-hub .mh-hero__dek,
html body.mel-hair-hub .mh-field__body p,
html body.mel-hair-hub .gcd-clinic-card__pos {
  font-family: var(--font-body) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  color: var(--ink-2) !important;
}

/* 3) Quick-answer block: bronze-tinted card, not cream + burgundy bar */
html body.mel-hair-hub .mh-quickanswer {
  font-family: var(--font-body) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  background: var(--accent-soft) !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: var(--r-sm) !important;
  color: var(--ink-2) !important;
}
html body.mel-hair-hub .mh-quickanswer strong,
html body.mel-hair-hub .mh-field__body p strong { color: var(--ink) !important; }

/* 4) Card score chip + big no-image number -> bronze on clean surface */
html body.mel-hair-hub .gcd-clinic-card__score {
  background: rgba(255,255,255,0.94) !important;
  color: var(--accent-deep) !important;
  font-weight: 600 !important;
  box-shadow: var(--sh-sm, 0 1px 4px rgba(23,18,14,.10)) !important;
}
html body.mel-hair-hub .gcd-clinic-card__facts > div:nth-child(3) dd,
html body.mel-hair-hub .gcd-clinic-card__noimg-num { color: var(--accent) !important; }
html body.mel-hair-hub .gcd-clinic-card__noimg {
  background: linear-gradient(180deg, var(--porcelain) 0%, var(--sand) 100%) !important;
}

/* 5) Card + media radius/border to GLOW system, softer shadow */
html body.mel-hair-hub .gcd-clinic-card,
html body.mel-hair-hub .mh-salon-card {
  border-radius: var(--r) !important;
  border-color: var(--line) !important;
}
html body.mel-hair-hub .gcd-clinic-card:hover,
html body.mel-hair-hub .mh-salon-card:hover {
  box-shadow: var(--sh) !important;
  border-color: var(--line-2) !important;
}
html body.mel-hair-hub .gcd-clinic-card__media,
html body.mel-hair-hub .mh-salon-card__img {
  background: var(--porcelain) !important;   /* was cream placeholder */
}

/* 6) Primary buttons / CTAs: ink base, bronze hover (kills #6f3543) */
html body.mel-hair-hub .mh-btn--primary {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: #fff !important;
}
html body.mel-hair-hub .mh-btn--primary:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}
html body.mel-hair-hub .mh-cta--solid {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
html body.mel-hair-hub .mh-cta--solid:hover {
  background: var(--accent-deep) !important;   /* was burgundy #6f3543 */
  border-color: var(--accent-deep) !important;
}
html body.mel-hair-hub .mh-cta--ghost:hover {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: #fff !important;
}

/* 7) "First listings live" status pill: bronze tint, not burgundy */
html body.mel-hair-hub .mh-note {
  background: var(--accent-soft) !important;   /* was rgba(90,42,53,.08) */
  color: var(--accent-deep) !important;
}
html body.mel-hair-hub .mh-note__dot { background: var(--accent) !important; }

/* 8) Eyebrows / accent labels -> bronze (token already redirected,
      pinned here so any literal burgundy in inline rules is beaten) */
html body.mel-hair-hub .mh-hero__eyebrow,
html body.mel-hair-hub .mh-eyebrow,
html body.mel-hair-hub .mh-quickanswer__label,
html body.mel-hair-hub .mh-salons__eyebrow,
html body.mel-hair-hub .mh-salon-card__score {
  color: var(--accent) !important;
}

/* 9) Active sticky-nav chip + pressed filter chip -> ink (clean) */
html body.mel-hair-hub .mh-secnav__chip.is-active,
html body.mel-hair-hub .mh-chip[aria-pressed="true"] {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: #fff !important;
}/* =====================================================================
   FAMILY: tan-misc-hubs  (tan hub, svc partner/service pages,
   clinics-apply, brands hub)
   Appended to assets/glow.css (loads LAST). Fixes ONLY the residual
   editorial-italic / thin display headings that escaped glow.css's
   existing per-template normalisation. Tokens already remap to brand,
   so this block is typography + one stray-colour neutralisation only.
   Every selector is scoped to a class/body unique to this family.
   ===================================================================== */

/* ---- 1. TAN HUB (body.tan-hub-page) ------------------------------
   The #tan-hub-pass inline block loads after glow.css and carries
   italic / weight-300 display type that glow.css never targets. */
html body.tan-hub-page .tan-hero__h1,
html body.tan-hub-page .tan-about__lede,
html body.tan-hub-page .tan-verdict__title,
html body.tan-hub-page .tan-rel__num,
html body.tan-hub-page .tan-rel__name,
html body.tan-hub-page .tan-related__cols a {
  font-family: var(--font-display) !important;
  font-style: normal !important;
}
html body.tan-hub-page .tan-hero__h1 {
  font-weight: 600 !important;
  color: var(--ink) !important;
  letter-spacing: -0.022em !important;
}
html body.tan-hub-page .tan-about__lede {
  font-weight: 500 !important;
  color: var(--ink) !important;
}
html body.tan-hub-page .tan-verdict__title {
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}
html body.tan-hub-page .tan-rel__name {
  font-weight: 500 !important;
  color: var(--ink) !important;
}
html body.tan-hub-page .tan-rel__num {
  font-weight: 600 !important;
  color: var(--accent) !important;
}
html body.tan-hub-page .tan-related__cols a {
  font-weight: 500 !important;
  color: var(--ink) !important;
}
html body.tan-hub-page .tan-related__cols a:hover {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
}
/* keep eyebrow + winner callout accent on bronze (token already maps,
   belt-and-braces in case --rose fallback ever resolves) */
html body.tan-hub-page .tan-hero__eyebrow,
html body.tan-hub-page .tan-related__h { color: var(--accent) !important; }
html body.tan-hub-page .tan-rank__winner { border-left-color: var(--accent) !important; }

/* ---- 2. SVC SERVICE/PARTNER PAGES --------------------------------
   svc-* template (salons/for-partners, press, brand-consulting).
   glow.css already fixes svc-hero__h1 / svc-why__*; these three
   selectors are the only italic stragglers. svc-* is unique to this
   family, so the section-class scope cannot leak elsewhere. */
html body .svc-hero__h1 em,
html body .svc-apply__lede,
html body .svc-salon__score span {
  font-family: var(--font-display) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}
html body .svc-hero__h1 em { color: var(--accent) !important; }
html body .svc-apply__lede { color: var(--ink) !important; }
html body .svc-salon__score span { color: var(--ink) !important; }

/* ---- 3. CLINICS APPLY (body.clinics-apply-page) ------------------
   Heading classes not enumerated in glow.css's salons-hub block; they
   keep weight 300 / italic. Tokens already map to Lexend + brand. */
html body.clinics-apply-page .cl-h2,
html body.clinics-apply-page .cl-h2 em,
html body.clinics-apply-page .cl-hero__h1,
html body.clinics-apply-page .cl-hero__h1 em,
html body.clinics-apply-page .cl-point__h,
html body.clinics-apply-page .cl-point__h em,
html body.clinics-apply-page .cl-process__n {
  font-family: var(--font-display) !important;
  font-style: normal !important;
}
html body.clinics-apply-page .cl-hero__h1,
html body.clinics-apply-page .cl-hero__h1 em {
  font-weight: 600 !important;
  color: var(--ink) !important;
  letter-spacing: -0.022em !important;
}
html body.clinics-apply-page .cl-h2,
html body.clinics-apply-page .cl-h2 em {
  font-weight: 500 !important;
  color: var(--ink) !important;
}
html body.clinics-apply-page .cl-point__h,
html body.clinics-apply-page .cl-point__h em {
  font-weight: 500 !important;
  color: var(--ink) !important;
}
html body.clinics-apply-page .cl-process__n {
  font-weight: 600 !important;
  color: var(--accent) !important;
}

/* ---- 4. BRANDS HUB (body.reviews-skin, brands-hub-only classes) --
   brands-hero / pick-tile / top-picks exist ONLY on brands/index.html
   among the 317 reviews-skin pages, so these scoped rules cannot leak
   to sibling reviews-skin templates. */
html body.reviews-skin .brands-hero h1,
html body.reviews-skin .brands-hero h1 em,
html body.reviews-skin .pick-tile .pick-score,
html body.reviews-skin .pick-tile .pick-name,
html body.reviews-skin .top-picks .head .sub {
  font-family: var(--font-display) !important;
  font-style: normal !important;
}
html body.reviews-skin .brands-hero h1 {
  font-weight: 600 !important;
  color: var(--ink) !important;
  letter-spacing: -0.022em !important;
}
html body.reviews-skin .brands-hero h1 em { color: var(--accent) !important; }
html body.reviews-skin .pick-tile .pick-score { font-weight: 600 !important; }
html body.reviews-skin .pick-tile .pick-name { font-weight: 500 !important; }
html body.reviews-skin .top-picks .head .sub { color: var(--ink-2) !important; }
/* neutralise the un-remapped --bordeaux-deep (#3d1c25 burgundy) fallback
   used in the pick-tile placeholder gradient */
html body.reviews-skin .pick-tile .gradient {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep)) !important;
}/* =====================================================================
   FAMILY: tools-legal  (scoped fixes appended to assets/glow.css)
   Pages: compare-tool.html (.ce-*), skin-quiz.html (.rb-*),
          newsletter/index.html (.nl-*), about-us (.about-*/.team-*),
          affiliate-disclosure (.legal-*), terms.html, privacy.html.
   Every selector below is scoped to a class that is UNIQUE to a single
   tools-legal page (verified: ce-* only in compare-tool.html), so nothing
   leaks onto other templates that also use body.reviews-skin.
   ===================================================================== */

/* --- compare-tool.html: centre the product pickers ----------------------
   The page CSS sets `.ce-pickers { margin-inline: auto 2.5rem; }` which is a
   bug: margin-inline-start:auto + margin-inline-end:2.5rem shoves the 720px
   grid hard to the RIGHT, leaving a large dead void on the left, and also
   loses the intended 2.5rem block-end gap. Restore a true centred block with
   bottom spacing. (Verified: marginLeft 408px vs marginRight 40px at 1280px
   before; equal 224px each after.) The page's own media query only changes
   columns/gap, never margin, so one override is correct at every width. */
html body.reviews-skin .ce-pickers{
  margin:0 auto 2.5rem !important;
}

/* --- compare-tool.html: tame the oversized select chevron ----------------
   `.ce-picker select` paints an inline data-URI SVG arrow with
   background-size:auto, so the chevron renders large and heavy. Constrain it
   to a tasteful indicator and keep it pinned to the right edge. */
html body.reviews-skin .ce-picker select{
  background-size:13px auto !important;
  background-position:right 1rem center !important;
}/* ============================================================
   WELLNESS FAMILY - final premium pass (appended; scoped)
   Scopes: wellness-hub-page (index + sexual-wellness),
   wellness-supplements/sleep/recovery/mental/womens-health-page
   ============================================================ */

/* 1. HUB DESK CARDS - restore vertical editorial card.
   glow.css forces html body .agv7-card{display:grid;grid-template-columns:320px 1fr}
   which crushes the 3-up "desks readers open first" cards on the two
   wellness-hub-page templates into an unreadable 320px image + sliver of text.
   Re-stack them: image on top, body below, inside their 3-col grid. */
html body.wellness-hub-page .agv7-products__grid .agv7-card {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--sh-sm) !important;
  overflow: hidden !important;
}
html body.wellness-hub-page .agv7-products__grid .agv7-card:hover {
  box-shadow: var(--sh) !important;
  border-color: var(--line-2) !important;
}
html body.wellness-hub-page .agv7-products__grid .agv7-card__img {
  aspect-ratio: 3 / 2 !important;
  border-bottom: 1px solid var(--line) !important;
  background: var(--porcelain) !important;
}
html body.wellness-hub-page .agv7-products__grid .agv7-card__body {
  padding: clamp(1.5rem, 2.4vw, 2rem) !important;
}

/* 2. MEDICAL DISCLAIMER - kill banned cream (#f0ebe1); use accent tint.
   Inline style attribute, so each scope needs its own !important rule. */
html body.wellness-hub-page [role="note"],
html body.wellness-supplements-page [role="note"],
html body.wellness-sleep-page [role="note"],
html body.wellness-recovery-page [role="note"],
html body.wellness-mental-page [role="note"],
html body.wellness-womens-health-page [role="note"] {
  background: var(--accent-soft) !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: var(--r-sm) !important;
  color: var(--ink-2) !important;
}

/* 3. HERO SUB-LINE - drop the italic for clean editorial calm,
   keep it near-ink on white. Two hub-page templates. */
html body.wellness-hub-page .ag-hero-strip .gbp-hero__take-text--strip {
  font-style: normal !important;
  color: var(--ink-2) !important;
}

/* 4. SECTION RHYTHM - tame the 8-14rem block padding that leaves the
   hub pages full of dead air; calmer, premium-but-not-wasteful. */
html body.wellness-hub-page .agv7-products,
html body.wellness-hub-page .agv7-proof,
html body.wellness-hub-page .agv7-aianswer,
html body.wellness-supplements-page .agv7-feature,
html body.wellness-supplements-page .agv7-aianswer,
html body.wellness-sleep-page .agv7-feature,
html body.wellness-sleep-page .agv7-aianswer,
html body.wellness-recovery-page .agv7-feature,
html body.wellness-recovery-page .agv7-aianswer,
html body.wellness-mental-page .agv7-feature,
html body.wellness-mental-page .agv7-aianswer,
html body.wellness-womens-health-page .agv7-feature,
html body.wellness-womens-health-page .agv7-aianswer {
  padding-block: clamp(3.5rem, 7vw, 6rem) !important;
}