/* ===========================================================================
   EPG REVIEW SITES — native stylesheet   ·   epg-native.css
   OWN, SELF-CONTAINED entity. Deliberately NOT shared with the LP site's
   lp-native.css (Armin, 2026-07-25): the EPG review sites and the store LP
   pages are separate concerns, on their own class namespace (.epg-*) and their
   own tokens (--epg-*, in the child theme :root). Do not copy rules between the
   two files — a change here must never depend on, or affect, the LP.

   Loaded only on pages whose content contains `.epg-native-page`.
   Light-only editorial pages (no prefers-color-scheme).
   =========================================================================== */

/* ── Typography · Merriweather, self-hosted ─────────────────────────────────
   Why a serif at all: these are review sites, and their whole proposition is
   that they read as an independent publication rather than a brand's own site.
   A serif body is the cheapest strong signal of that. It is NOT a legibility
   claim — controlled reading studies find no reliable serif/sans difference at
   normal sizes; what matters is x-height, spacing and measure. This is register.

   ⛔ The store keeps Montserrat. The review sites must NOT share a face with the
   brand they review — the separation is the point.

   SELF-HOSTED, not fonts.gstatic.com: 14 EU markets, and a third-party font
   request is a GDPR exposure with no upside. Merriweather is SIL OFL, so
   redistribution is permitted. Files in assets/fonts/.

   Static 400/700 rather than the variable file: the variable Merriweather ships
   an optical-size axis we never use and costs 178 KB for latin alone against
   95 KB for the two statics. unicode-range means a market only downloads the
   subset its language needs — UK pulls latin only; CZ/HU/PL/SK/SI also pull
   latin-ext for their diacritics.

   font-display: swap — text renders immediately in the fallback and reflows
   when the face lands. On ad landing pages, visible text beats perfect text. */

@font-face {
  font-family: 'Merriweather'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/mw-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Merriweather'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/mw-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Merriweather'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/mw-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Merriweather'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/mw-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.epg-native-page { color: var(--epg-ink, #000514); --epg-c-serif: 'Merriweather', Georgia, 'Times New Roman', serif; }
.epg-native-page *, .epg-native-page *::before, .epg-native-page *::after { box-sizing: border-box; }

/* THE READING LAYER ONLY. Headings, eyebrows, buttons, badges, stat blocks,
   table cells, card text, the byline and every panel's furniture stay on the
   sans. That split is the technique — serif marks "text to read", sans marks
   "a control or a datum" — and it is what both reference publications do.
   Adding a surface here is a deliberate decision, not housekeeping. */
.epg-top5__lede,
.epg-top5__read > p,
.epg-top5__notes > p,
.epg-note p,
.epg-faq details > div,
.epg-faq details > div p,
.epg-g-faq details > div,
.epg-g-faq details > div p,
.epg-quotes__item q,
.epg-story__stand,
.epg-story__sec > p,
.epg-story__reveal p { font-family: var(--epg-c-serif); }

/* Extended to the guide, article and legal formats 2026-08-06.
   The original list matched only .epg-top5__* and .epg-story__*, which left
   48 of the 62 published items on the framework default — including all 41
   blog posts, which are the site's organic front door — while 13 pages read as
   a publication. Two typographic registers on one review site is worse than
   either choice applied consistently.

   Furniture still stays sans: .epg-post__ctaband and .epg-post__pdesc (CTA and
   product blocks), .epg-g-summary-card (a pick card), and the whole homepage,
   whose paragraphs are all span.epg-card__body — navigation, not reading. */
.epg-g-content p,
.epg-g-lede p,
.epg-g-takeaway p,
.epg-guide blockquote,
.epg-post__body p,
.epg-legal p,
.epg-legal li { font-family: var(--epg-c-serif); }

/* ── Standfirst spacing fix ─────────────────────────────────────────────────
   The standfirst carries an inline `margin:.6rem 0 0` in the post content of
   all 13 pages — top margin only, no bottom — so it butts straight into the
   paragraph below it with a measured gap of ZERO px. That was survivable in the
   old sans; with Merriweather's larger x-height the two blocks read as one
   wall of text, which is what made this section look crowded.

   Its line-height is also 1.42, set for a sans. At 22.4px in a serif that is
   tight, so it is opened to 1.5.

   `!important` is needed only because the offending values are inline. The
   selector is precise: exactly one clamp-styled <p> exists per page and it is
   the only inline-styled paragraph on any of the 13 (verified 2026-08-05).
   The proper fix is to strip the inline margin from the markup and give the
   standfirst a real class — a 13-page content edit, worth doing on next touch. */
.epg-top5__read > p[style*="clamp"] {
  margin-bottom: 1.15rem !important;
  line-height: 1.5 !important;
}

.epg-container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* ── button ─────────────────────────────────────────────────────────────── */
.epg-btn {
  display: inline-block; background: var(--epg-orange, #ff9900); color: var(--epg-ink, #000514);
  font-weight: 800; font-size: 1.05rem; padding: 13px 28px; border-radius: 10px;
  text-transform: uppercase; text-decoration: none; box-shadow: 0 4px 12px rgba(0,0,0,.22);
  transition: transform .15s ease, box-shadow .15s ease;
}
.epg-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.26); }

/* ── sticky CTA base (the --bar modifier lives in the top-5 block below) ──── */
.epg-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; background: transparent;
  text-align: center; padding: 0 20px 18px; opacity: 0; transition: opacity .2s ease-in-out; pointer-events: none; }
.epg-sticky.is-visible { opacity: 1; pointer-events: auto; }
.epg-sticky__inner { display: flex; align-items: center; justify-content: center; }
.epg-sticky .epg-btn { margin: 0; }


/* ═══════════════════════════════════════════════════════════════════════════
   SHARED COMPONENTS  ·  usable from ANY page type
   Added 2026-08-03. These exist because the same component was being built once
   per format: the guide family already had a FAQ (.epg-g-faq) and an inline
   product mention (.epg-g-inline-prod), but they resolve --epg-g-* tokens that
   only exist inside .epg-guide, so a top-5 page could not reuse them. Rather
   than copy them into a third silo — the exact drift this project exists to
   remove — they are re-expressed here against their own --epg-c-* tokens,
   derived from the root brand tokens so every page type inherits them.

   A format may override --epg-c-* in its own scope if it ever needs to.
   The guide's own .epg-g-* copies are left alone; retire them on next touch.
   ═══════════════════════════════════════════════════════════════════════════ */

.epg-native-page {
  --epg-c-ink:   var(--epg-ink, #000514);
  --epg-c-amber: var(--epg-orange, #ff9900);
  --epg-c-body:  #23262c;
  --epg-c-muted: #6e7379;
  --epg-c-line:  #e3e5e8;
  --epg-c-tint:  #f6f7f8;

  /* Emphasis layer (2026-08-03). --epg-c-mark reuses the amber wash already
     established by a.epg-prod-link so the marker stays in-family rather than
     importing the competitor's yellow; --epg-c-warn promotes the top-5-only
     --t5-neg to the shared layer instead of inventing a second red. */
  --epg-c-mark:     rgba(255, 153, 0, .26);
  --epg-c-note-bg:  #fffaf0;
  --epg-c-note-ink: #7a5200;
  --epg-c-warn:     #c62828;
  --epg-c-warn-bg:  #fff6f5;
  --epg-c-warn-ink: #8a1d17;
}

/* ── .epg-mark — tier 3 of the emphasis system ──────────────────────────────
   <strong> gives texture mid-sentence; this carries the spine. Reserved for
   the sentences that actually turn the argument, so reading only the marked
   lines returns the thesis. Cap 2 per page.

   Why a gradient and not background-color: the hard stops at 12% and 90% keep
   the band inside the line box with air above and below, so it reads as a
   marker stroke rather than a filled block. box-decoration-break: clone gives
   each wrapped line its own band instead of one rectangle across the wrap.

   ⚠ It is a typographic device, not a claim amplifier. Never mark a sentence
   to make a weak claim look stronger. */
.epg-mark {
  background: linear-gradient(to bottom,
    transparent       12%,
    var(--epg-c-mark) 12%,
    var(--epg-c-mark) 90%,
    transparent       90%);
  padding: 0 2px;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/* ── Customer quotes ────────────────────────────────────────────────────────
   Real, verified reviews pulled from the store's own WiserReview corpus (650+
   on Watersafe+), quoted VERBATIM — the review platform states reviews are not
   filtered or edited, so trimming them here would undo that.

   ⚠ SELECTION RULE: these advertorials are Google Ads landing pages, so pick
   quotes on product performance (fit, seal, durability) and NOT the ones about
   infections, ENT visits or medical outcomes. The corpus has plenty of the
   latter and they read well, but they are exactly what HEALTH_IN_PERSONALIZED_ADS
   catches, and they contradict the deliberately non-medical framing of the copy. */
.epg-quotes { background: var(--epg-c-tint); border: 1px solid var(--epg-c-line);
  border-radius: 8px; padding: 1.35rem 1.2rem 1.15rem; margin: 1.5rem 0 0; }
.epg-quotes__item + .epg-quotes__item { margin-top: 1.2rem; }
.epg-quotes__who { display: flex; align-items: center; gap: .5rem; margin: 0 0 .35rem;
  flex-wrap: wrap; }
.epg-quotes__who b { font-size: .95rem; font-weight: 800; color: var(--epg-c-ink); }
/* Stars are markup-driven: &#9733; filled, &#9734; empty. Both take this amber,
   so a genuine 4-star review can be used — the previously hardcoded five cost
   us real quotes (a 4-star dog review, and trekking reviews naming a fault). */
.epg-quotes__stars { color: var(--epg-c-amber); font-size: .78rem; letter-spacing: .08em; }
/* "Verified buyer" is a factual claim under the Omnibus Directive, so it is
   PER-ITEM and goes only on a quote traceable to a real review record (ours
   come from WiserReview structured data on the live stores). A blanket claim
   in __foot would go false the moment one untraceable line was added. */
.epg-quotes__src { display: inline-block; margin-left: .5rem;
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--epg-c-muted); }
.epg-quotes__item q { quotes: none; display: block; font-size: .95rem; line-height: 1.55;
  color: var(--epg-c-body); }
.epg-quotes__foot { margin: 1.25rem 0 0; text-align: center; font-size: .8rem;
  color: var(--epg-c-muted); }

/* ── FAQ ────────────────────────────────────────────────────────────────────
   Native <details>/<summary> — no JS, works with the page unstyled, and is
   open-by-default to assistive tech. Collapsed it costs almost no page height,
   which is why it suits a page that already runs to 7 folds. */
.epg-faq h2 { font-size: 1.35rem; font-weight: 900; letter-spacing: -.02em;
  color: var(--epg-c-ink); margin: 0 0 1rem; }
.epg-faq details { border-top: 1px solid var(--epg-c-line); }
.epg-faq details:last-of-type { border-bottom: 1px solid var(--epg-c-line); }
.epg-faq summary { list-style: none; cursor: pointer; padding: 13px 0; display: flex;
  justify-content: space-between; gap: 12px; align-items: flex-start; min-height: 44px;
  font-size: 1rem; font-weight: 700; color: var(--epg-c-ink); line-height: 1.35; }
.epg-faq summary::-webkit-details-marker { display: none; }
.epg-faq summary::after { content: "▾"; color: var(--epg-c-amber); flex: none;
  transition: transform .2s ease; }
.epg-faq details[open] summary::after { transform: rotate(180deg); }
.epg-faq details > div { padding: 0 0 16px; color: var(--epg-c-body);
  font-size: .95rem; line-height: 1.6; }
.epg-faq details > div p { margin: 0 0 .7rem; }
.epg-faq details > div p:last-child { margin-bottom: 0; }
.epg-faq summary:focus-visible { outline: 3px solid var(--epg-c-amber); outline-offset: 2px; }

/* ── FAQ open/close animation ───────────────────────────────────────────────
   A <details> cannot be height-transitioned the usual way: the browser hides
   the content outright while closed, so there is nothing to animate from.
   ::details-content is the one approach that needs NO JavaScript, and
   interpolate-size is what lets `auto` be an animatable value.

   Gated on @supports. Where it is unsupported the accordion opens instantly —
   exactly as it does today — so this is additive and can never leave the FAQ
   broken. Measured browser mix on this site (33 sessions, 2026-08-03): Chromium
   ~66%, Safari-family ~27%, Firefox 3%. Firefox degrades, everyone else gets it.

   Kept short (.26s): this fires on a tap, and anything slower reads as lag
   rather than polish on a page where 85% of sessions are mobile. */
.epg-native-page { interpolate-size: allow-keywords; }

/* Gate on interpolate-size, NOT on ::details-content.
   Measured in real browsers 2026-08-05:
     Chrome 150   ::details-content ✓  interpolate-size ✓  → animates
     Firefox 153  ::details-content ✓  interpolate-size ✗  → cannot animate
   Gating on ::details-content alone is wrong: it passes in Firefox, applies
   block-size:0 and the transition, then cannot interpolate to `auto`, so the
   panel jumps open. Gating on interpolate-size means Firefox gets no styling at
   all here and opens natively — the behaviour it had before this existed.

   ⚠ Do not "fix" Firefox with the grid 0fr→1fr trick. It was tried and measured
   on 2026-08-05: grid-template-rows does NOT animate on ::details-content in
   EITHER engine. The only thing that animates there is a fixed pixel block-size,
   which is unusable when every answer is a different height. Firefox needs
   JavaScript, and at ~3% of sessions here that is not a trade worth making. */
@supports (interpolate-size: allow-keywords) {
  .epg-faq details::details-content,
  .epg-g-faq details::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size .26s ease, content-visibility .26s allow-discrete;
  }
  .epg-faq details[open]::details-content,
  .epg-g-faq details[open]::details-content { block-size: auto; }
}

/* Motion is decoration here — the accordion works identically without it. */
@media (prefers-reduced-motion: reduce) {
  .epg-faq details::details-content,
  .epg-g-faq details::details-content { transition: none; }
  .epg-faq summary::after,
  .epg-g-faq summary::after { transition: none; }
}

/* ── Winner recap ───────────────────────────────────────────────────────────
   Closes a ranked section. Exists for two measured reasons: on the top-5 format
   the pick card sits ABOVE the rankings, so a "compare with the winner" control
   had nowhere forward to point; and after the last in-flow CTA at 4,062px the
   page ran 2,246px — over 2.5 screens — with no call to action at all. Shared,
   so the story format can reuse it. */
.epg-winner { background: var(--epg-c-ink); color: #fff; border-radius: 6px;
  padding: 1.5rem 1.3rem; margin: 1.7rem 0 0; scroll-margin-top: 1.2rem; }
.epg-winner .epg-eyebrow { color: var(--epg-c-amber); display: block; margin-bottom: .5rem; }
.epg-winner h3 { margin: 0 0 .55rem; font-size: 1.4rem; font-weight: 900;
  letter-spacing: -.025em; color: #fff; line-height: 1.1; }
.epg-winner p { margin: 0 0 1.15rem; color: rgba(255, 255, 255, .82);
  font-size: 1rem; line-height: 1.55; }
.epg-winner .epg-btn { margin: 0; }

/* ── Scored comparison ──────────────────────────────────────────────────────
   The payoff for "Compare with our #1 pick" — without it the button promises a
   comparison and delivers a restatement.

   RULE: every cell must trace to a pro/con already published on the page. Never
   invent a claim about a named competitor (UK comparative-ad rules), and where
   the page does not actually say, the cell is "~", not a cross.

   Mobile: five product columns cannot fit 390px without shrinking type past
   legibility, so the criteria column is sticky and the grid scrolls sideways —
   the same solution the reference page uses. */
.epg-compare { margin: .2rem 0 1.3rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.epg-compare table { border-collapse: collapse; min-width: 27rem; width: 100%; font-size: .8rem; }
.epg-compare th, .epg-compare td { padding: .5rem .45rem; text-align: center; }
.epg-compare thead th { font-size: .63rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; white-space: nowrap; }
.epg-compare tbody th { text-align: left; font-weight: 700; white-space: normal;
  min-width: 8.6rem; position: sticky; left: 0; }
.epg-compare tbody tr + tr th, .epg-compare tbody tr + tr td { border-top: 1px solid rgba(255,255,255,.14); }
.epg-compare .is-y { color: #6ee7a0; font-weight: 900; }
.epg-compare .is-p { color: rgba(255,255,255,.55); font-weight: 900; }
.epg-compare .is-n { color: #ff8d84; font-weight: 900; }
.epg-compare__legend { margin: 0 0 1.15rem; font-size: .74rem; color: rgba(255,255,255,.6); }
/* Inside the dark winner card the sticky column needs an opaque backdrop, or the
   scrolling cells show through underneath it. */
.epg-winner .epg-compare { color: #fff; }
.epg-winner .epg-compare tbody th { background: var(--epg-c-ink); }
.epg-winner .epg-compare thead th { color: rgba(255,255,255,.62); }
.epg-winner .epg-compare thead th.is-win { color: var(--epg-c-amber); }

/* ── Inline product mention ─────────────────────────────────────────────────
   A quiet route to the product for readers already sold, who should not have to
   scroll to the next button. Two forms:
     .epg-inline-prod  — a standalone italic line ("Tested here: X")
     a.epg-prod-link   — the same treatment on a product name INSIDE a sentence,
                         which is the higher-value form: it links a mention the
                         copy was already making instead of adding new copy. */
.epg-inline-prod { font-size: .95rem; color: var(--epg-c-muted); font-style: italic;
  margin: 12px 0 16px; }
.epg-inline-prod a,
a.epg-prod-link { color: var(--epg-c-ink); font-weight: 700; text-decoration: none;
  background: rgba(255, 153, 0, .18); padding: 0 4px; border-radius: 2px; }
a.epg-prod-link:focus-visible { outline: 2.5px solid var(--epg-c-amber); outline-offset: 2px; }


/* ═══════════════════════════════════════════════════════════════════════════
   TOP-5 REVIEW FORMAT  ·  .epg-top5
   Added 2026-07-24 for the EPG review sites (uk-consumer-review-company.com et al).

   Palette is derived from the EPG brand tokens (--epg-ink #000514 / --epg-orange
   #ff9900, defined in the child-theme :root). Never hardcode a brand colour here —
   add a token instead.

   Deliberately LIGHT-ONLY: no prefers-color-scheme block. These are white editorial
   pages inside a light site; following the visitor's OS theme would put a dark
   advertorial inside a light shell.
   ═══════════════════════════════════════════════════════════════════════════ */

.epg-top5 {
  --t5-ink:    var(--epg-ink, #000514);
  --t5-accent: var(--epg-orange, #ff9900);
  --t5-paper:  #ffffff;
  --t5-body:   #23262c;
  --t5-grey:   #6e7379;
  --t5-line:   rgba(0, 5, 20, .16);
  --t5-line-soft: rgba(0, 5, 20, .09);
  --t5-pos:    #2e7d32;
  --t5-neg:    #c62828;
  --t5-read:   42rem;
  background: var(--t5-paper);
  color: var(--t5-body);
  font-size: 17px;
  line-height: 1.62;
  padding-bottom: 5.5rem;
}
@media (min-width: 720px) { .epg-top5 { font-size: 18px; } }

.epg-top5 a { color: inherit; }
.epg-top5 a:focus-visible { outline: 2.5px solid var(--t5-accent); outline-offset: 3px; }
.epg-top5__read { max-width: var(--t5-read); margin-inline: auto; }
.epg-top5 section { padding: 2.2rem 0; }

/* ── small shared utilities ─────────────────────────────────────────────── */
.epg-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--t5-grey); }
.epg-kicker { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.15rem; }
/* On this template the eyebrow IS the section title, so it is marked up as <h2>
   and the document outline finally matches what a reader sees. Before this the
   outline ran h1 -> nine h3s -> two h2s, with seven section titles (Editor's
   pick, Why it matters, The review, The rest of the field, The winner, What
   buyers say, Reviewed by) absent entirely because they were <span>s.

   Purely structural: .epg-eyebrow already supplies the size, weight, tracking
   and colour, so only the browser's default h2 margin and font-size need
   neutralising. Rendering is unchanged.

   ⚠ Sections that ALREADY own a real <h2> keep a plain <span> eyebrow —
   Method -> "How we tested", Questions -> "Before you buy" — or they would
   carry two h2s. Same for the hero's category line, which sits under the h1. */
.epg-kicker h2.epg-eyebrow,
.epg-top5__author h2.epg-eyebrow { margin: 0; font-size: 11.5px; font-weight: 700;
  line-height: inherit; }
.epg-winner h2.epg-eyebrow { margin: 0 0 .5rem; font-size: 11.5px; font-weight: 700;
  line-height: inherit; }
.epg-pick__bar h2 { margin: 0; font: inherit; letter-spacing: inherit; }
.epg-kicker::after { content: ""; flex: 1; height: 2px; background: var(--t5-ink); opacity: .85; }

/* ── hero ───────────────────────────────────────────────────────────────── */
.epg-top5__hero { padding: 2.9rem 0 1.6rem; max-width: 44rem; }
.epg-top5__hero h1 { font-size: clamp(2.7rem, 9vw, 5rem); line-height: .94; letter-spacing: -.042em;
  font-weight: 900; color: var(--t5-ink); margin: .55rem 0 0; text-wrap: balance; }
/* The amber marker is reserved for the H1 alone — one loud colour, spent once. */
.epg-top5__hero h1 mark { background: linear-gradient(transparent 58%, var(--t5-accent) 58%,
  var(--t5-accent) 93%, transparent 93%); color: inherit; padding: 0 .04em; border-radius: 0; }
.epg-top5__lede { color: var(--t5-grey); font-size: 1.14rem; max-width: 32rem; margin: 1.1rem 0 0;
  text-wrap: pretty; font-weight: 450; }
.epg-top5__byline { display: flex; align-items: center; gap: .7rem; margin-top: 1.5rem; }
.epg-top5__byline .epg-top5__ava { width: 38px; height: 38px; border-radius: 50%; background: var(--t5-ink);
  color: var(--t5-paper); display: grid; place-items: center; font-weight: 800; font-size: 13px; letter-spacing: -.03em; }
.epg-top5__byline b { font-size: .9rem; font-weight: 800; color: var(--t5-ink); display: block; line-height: 1.2; }
.epg-top5__byline span { font-size: .78rem; color: var(--t5-grey); }
/* Hero CTA — the above-the-fold entry point. Measured 2026-08-03: the first real
   button sat at 1607px on a 390x844 phone (fold #2), so 56% of Clarity sessions
   left having never seen one (median 10s). Full-width on phones because that
   bouncing cohort never scrolls far enough to find anything smaller. */
.epg-top5__hero .epg-btn { margin-top: 1.6rem; }
@media (max-width: 560px) { .epg-top5__hero .epg-btn { display: block; text-align: center; } }

/* ── trust strip ────────────────────────────────────────────────────────── */
.epg-trust { border-top: 1px solid var(--t5-line); border-bottom: 1px solid var(--t5-line); margin-top: 1.9rem; }
.epg-trust ul { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem 1.4rem; padding: 1rem 0; list-style: none; margin: 0; }
.epg-trust li { display: flex; gap: .5rem; align-items: baseline; font-size: .82rem; color: var(--t5-grey); line-height: 1.3; }
.epg-trust b { color: var(--t5-ink); font-weight: 800; }
.epg-trust .epg-trust__tick { color: var(--t5-accent); font-weight: 900; flex: none; }
@media (min-width: 720px) { .epg-trust ul { grid-template-columns: repeat(4, 1fr); } }

/* ── explainer note — two-tone callout ──────────────────────────────────────
   Was a plain 3px left rule, which read as a blockquote and got skimmed past
   while carrying the actual buying decision on most pages. Re-expressed on
   --epg-c-* (was --t5-*) so guides and articles can use it too, consistent
   with how FAQ / compare / quotes were shared out.

   border-radius: 0 8px 8px 0 keeps the left rule reading as one solid bar
   rather than a rounded stripe; `strong` is recoloured per variant so bold
   stays tonally correct against amber vs red. */
.epg-note {
  background: linear-gradient(135deg, var(--epg-c-note-bg), #fff4dd);
  border-left: 5px solid var(--epg-c-amber);
  border-radius: 0 8px 8px 0;
  padding: 1.15rem 1.25rem;
  margin: 1.6rem 0 0;
  box-shadow: 0 2px 12px rgba(0, 5, 20, .06);
}
.epg-note b { display: block; font-size: .95rem; font-weight: 900; letter-spacing: -.01em; color: var(--epg-c-ink); margin-bottom: .4rem; }
.epg-note p { margin: 0 0 .6rem; font-size: .95rem; line-height: 1.6; color: var(--epg-c-body); }
.epg-note p:last-child { margin-bottom: 0; }
.epg-note strong { color: var(--epg-c-note-ink); }

/* Same geometry in red, for the consequence of getting the choice wrong.
   ⚠ NEVER for a health outcome — that is the framing that trips
   HEALTH_IN_PERSONALIZED_ADS and the standing advertorial rule. Use it for
   "buy the wrong thing and this happens", not "this happens to your body".
   This is why the plantar-fasciitis note stays amber. */
.epg-note--warn {
  background: linear-gradient(135deg, var(--epg-c-warn-bg), #ffeae7);
  border-left-color: var(--epg-c-warn);
}
.epg-note--warn strong { color: var(--epg-c-warn-ink); }

/* ── EDITOR'S PICK — the winner card  ·  NEW SHARED COMPONENT ───────────── */
.epg-pick { border: 1.5px solid var(--t5-ink); border-radius: 4px; overflow: hidden; background: var(--t5-paper); }
.epg-pick__bar { background: var(--t5-ink); color: var(--t5-paper); display: flex; justify-content: space-between;
  align-items: center; padding: .6rem .95rem; font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.epg-pick__bar .epg-pick__star,
.epg-pick__bar .epg-pick__rev { color: var(--t5-accent); }
.epg-pick__body { padding: 1.5rem 1.35rem 1.4rem; }
.epg-pick__grid { display: grid; grid-template-columns: 1fr; gap: 1.3rem; }
@media (min-width: 720px) { .epg-pick__grid { grid-template-columns: .82fr 1.18fr; align-items: start; } }
.epg-pick__shot { border: 1px solid var(--t5-line); border-radius: 3px; background: #fff; overflow: hidden; display: block; }
.epg-pick__shot img { display: block; width: 100%; height: auto; }
.epg-pick__name { font-size: 1.75rem; font-weight: 900; letter-spacing: -.03em; color: var(--t5-ink); line-height: 1.02; margin: 0; }
.epg-pick__name small { display: block; font-size: .8rem; font-weight: 700; color: var(--t5-grey);
  letter-spacing: 0; margin-top: .35rem; text-transform: none; }
.epg-pick__spec { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin: .9rem 0 0;
  font-weight: 800; color: var(--t5-ink); font-size: .98rem; }
.epg-pick__spec .epg-pick__sep { width: 4px; height: 4px; border-radius: 50%; background: var(--t5-grey); }
.epg-pick__spec .epg-pick__stars { color: var(--t5-accent); letter-spacing: .05em; }
.epg-pick__spec .epg-pick__rrp { font-weight: 500; color: var(--t5-grey); font-size: .82rem; }
.epg-pick__verdict { margin: 1rem 0 0; color: var(--t5-body); font-size: 1.02rem; }
.epg-pick__ship { text-align: center; font-size: .76rem; color: var(--t5-pos); font-weight: 700; margin: .7rem 0 0; letter-spacing: .02em; }

/* ── pros / cons list  ·  NEW SHARED COMPONENT ──────────────────────────── */
.epg-proscons { list-style: none; display: grid; grid-template-columns: 1fr; gap: .4rem 1.3rem; margin: 1.15rem 0 0; padding: 0; }
@media (min-width: 720px) { .epg-proscons { grid-template-columns: 1fr 1fr; } }
.epg-proscons li { display: flex; gap: .55rem; align-items: flex-start; font-size: .95rem; color: var(--t5-body); }
.epg-proscons svg { flex: none; width: 16px; height: 16px; margin-top: .24rem; }
.epg-proscons .is-pos { color: var(--t5-pos); }
.epg-proscons .is-neg { color: var(--t5-neg); }
/* breathing room between the pros/cons list and the winner-card CTA (not the sticky/chooser buttons) */
.epg-pick .epg-proscons + .epg-btn { margin-top: 1.6rem; }

/* ── RANKED 2-5 cards  ·  NEW SHARED COMPONENT ──────────────────────────── */
.epg-ranks { display: grid; gap: 1rem; }
@media (min-width: 720px) { .epg-ranks { grid-template-columns: 1fr 1fr; } }
.epg-rank { display: grid; grid-template-columns: auto 1fr; border: 1px solid var(--t5-line);
  border-radius: 4px; overflow: hidden; background: var(--t5-paper); }
.epg-rank__tab { background: var(--t5-ink); color: var(--t5-paper); width: 3rem; display: flex;
  align-items: center; justify-content: center; font-weight: 900; font-size: 1.35rem; letter-spacing: -.04em; }
.epg-rank__body { padding: 1.05rem 1.15rem; }
.epg-rank__head { display: flex; align-items: center; gap: .6rem .8rem; flex-wrap: wrap; }
/* Competitor thumbnail. Sourced from each manufacturer's own product photography
   and normalised to a 400x400 white square, deliberately NOT the retail packaging
   shots the old Flatsome block used: those carried the competitors' marketing onto
   our page ("#1 Doctor Recommended", "Helps prevent swimmer's ear"), which argues
   their case and contradicts our own scoring. Product only, no claims. */
.epg-rank__shot { width: 46px; height: 46px; flex: none; object-fit: contain;
  background: #fff; border: 1px solid var(--t5-line); border-radius: 5px; padding: 2px; }
.epg-rank__head h3 { font-size: 1.12rem; font-weight: 900; letter-spacing: -.02em; color: var(--t5-ink); margin: 0; line-height: 1.1; }
.epg-rank__head h3 small { font-weight: 700; color: var(--t5-grey); font-size: .72em; letter-spacing: 0; }
.epg-rank__price { margin-left: auto; font-weight: 900; color: var(--t5-ink); font-size: 1.05rem; white-space: nowrap; }
.epg-rank__stars { color: var(--t5-accent); font-size: .85rem; letter-spacing: .03em; }
.epg-rank .epg-proscons { grid-template-columns: 1fr; margin-top: .8rem; font-size: .88rem; }

/* ── Competitor cards 2–5: collapsible ────────────────────────────────────────
   Clarity 2026-08-03 (swimming, mobile): 23.5% of taps hit the rank badge, the
   product name, the price and the star row — all inert. A competitor cannot be
   linked out and must not point at the Bollsen PDP, so the tap is absorbed here
   and handed back to the #1 pick. Also cuts competitor real estate and ~a screen
   of height. `.is-collapsible` is added by epg-native.js, so with JS off nothing
   is ever hidden. */
.epg-ranks.is-collapsible .epg-rank .epg-proscons,
.epg-ranks.is-collapsible .epg-rank .epg-rank__compare { display: none; }
.epg-ranks.is-collapsible .epg-rank.is-open .epg-proscons { display: grid; }
.epg-ranks.is-collapsible .epg-rank.is-open .epg-rank__compare { display: inline-flex; }

/* The compare button is deliberately a GHOST, not the amber sell button: inside a
   competitor's card an amber CTA reads as an advert in their box. Outlined and
   quiet says "navigation" instead. 44px floor like every other target here. */
.epg-rank__compare { align-items: center; gap: .4rem; margin: 1rem 0 .1rem;
  min-height: 44px; padding: 9px 15px; border: 1.5px solid var(--t5-line);
  border-radius: 8px; background: transparent; color: var(--t5-ink);
  font-weight: 800; font-size: .84rem; text-decoration: none; }
.epg-rank__compare:hover { border-color: var(--t5-ink); }
.epg-rank__compare:focus-visible { outline: 3px solid var(--t5-accent); outline-offset: 2px; }
/* The whole card is the control, so the badge/name/price/stars taps all land. */
.epg-ranks.is-collapsible .epg-rank { cursor: pointer; }
.epg-ranks.is-collapsible .epg-rank .epg-rank__body { position: relative; padding-right: 1.7rem; }
.epg-ranks.is-collapsible .epg-rank .epg-rank__body::after { content: ''; position: absolute;
  right: .5rem; top: 1.15rem; width: .5rem; height: .5rem;
  border-right: 2.5px solid var(--t5-grey); border-bottom: 2.5px solid var(--t5-grey);
  transform: rotate(45deg); transition: transform .18s ease; }
.epg-ranks.is-collapsible .epg-rank.is-open .epg-rank__body::after { transform: rotate(-135deg); }
.epg-ranks.is-collapsible .epg-rank:focus-visible { outline: 3px solid var(--t5-accent); outline-offset: 2px; }

/* ── review prose + pull quote ──────────────────────────────────────────── */
.epg-top5__notes p { margin: 0 0 1.1rem; color: var(--t5-body); }
.epg-top5__notes h3 { font-size: 1.2rem; font-weight: 900; letter-spacing: -.02em; color: var(--t5-ink); margin: 1.9rem 0 .55rem; }
.epg-top5__notes strong { color: var(--t5-ink); font-weight: 800; }
.epg-top5__pullq { font-size: 1.5rem; font-weight: 900; letter-spacing: -.025em; color: var(--t5-ink);
  line-height: 1.2; margin: 1.7rem 0; text-wrap: balance; }

/* ── how we tested (dark panel) ─────────────────────────────────────────── */
.epg-method { background: var(--t5-ink); color: var(--t5-paper); border-radius: 4px; padding: 1.7rem 1.4rem; }
.epg-method .epg-eyebrow { color: var(--t5-accent); }
.epg-method h2 { color: var(--t5-paper); margin: .4rem 0 1.2rem; font-size: clamp(1.55rem, 4.2vw, 2rem);
  font-weight: 900; letter-spacing: -.03em; line-height: 1.05; }
.epg-method__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, .18); padding-top: 1.2rem; }
@media (min-width: 720px) { .epg-method__stats { gap: 1.6rem; } }
.epg-method__stats b { font-size: 2.1rem; font-weight: 900; letter-spacing: -.04em; display: block; line-height: 1; color: var(--t5-paper); }
.epg-method__stats b i { font-style: normal; font-size: .95rem; font-weight: 800; }
.epg-method__stats span { font-size: .79rem; color: rgba(255, 255, 255, .62); display: block; margin-top: .4rem; line-height: 1.4; }
.epg-method p { color: rgba(255, 255, 255, .72); font-size: .9rem; margin: 1.2rem 0 0; }

/* ── author strip ───────────────────────────────────────────────────────── */
.epg-top5__author { border-top: 2px solid var(--t5-ink); border-bottom: 2px solid var(--t5-ink);
  padding: 1.5rem 0; display: flex; gap: 1.1rem; align-items: flex-start; }
.epg-top5__author .epg-top5__ava { width: 56px; height: 56px; border-radius: 50%; flex: none;
  background: var(--t5-accent); color: var(--t5-ink); display: grid; place-items: center;
  font-weight: 900; font-size: 1.15rem; letter-spacing: -.03em; }
.epg-top5__author b { display: block; font-size: 1.05rem; font-weight: 900; letter-spacing: -.02em; color: var(--t5-ink); margin: .15rem 0 .3rem; }
.epg-top5__author p { margin: 0; font-size: .9rem; color: var(--t5-grey); }

/* ── footer: policy links only (the theme renders the site footer) ──────── */
.epg-top5__foot { padding: 1.6rem 0 .4rem; border-top: 1px solid var(--t5-line-soft); }
.epg-top5__foot a { display: inline-block; margin-right: 1.3rem; text-decoration: none; color: var(--t5-grey);
  font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 10.5px; }
.epg-top5__foot a:hover { color: var(--t5-ink); text-decoration: underline; }

/* ── sticky CTA: BAR variant of the shared .epg-sticky ───────────────────── */
/* The base .epg-sticky is a floating centred button. This modifier turns it into a
   bar carrying the product name and price — seeing the price is what converts, not
   the button alone. Same .is-visible toggle and same IntersectionObserver, so the
   library's behaviour is extended, not forked. */
.epg-sticky--bar { background: var(--t5-paper); border-top: 2px solid var(--t5-ink);
  padding: .6rem 1.25rem calc(.6rem + env(safe-area-inset-bottom, 0px));
  opacity: 1; transform: translateY(125%); transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  box-shadow: 0 -8px 26px -16px rgba(0, 5, 20, .5); text-align: left; pointer-events: auto; }
.epg-sticky--bar.is-visible { transform: none; }
.epg-sticky--bar .epg-sticky__inner { justify-content: flex-start; gap: 1rem; max-width: 60rem; margin: 0 auto; }
.epg-sticky--bar b { font-weight: 900; font-size: .9rem; color: var(--t5-ink); letter-spacing: -.02em; line-height: 1.1; }
.epg-sticky--bar b small { display: block; font-weight: 700; font-size: 10px; color: var(--t5-grey);
  letter-spacing: .05em; text-transform: uppercase; margin-top: .15rem; }
.epg-sticky--bar .epg-btn { margin: 0 0 0 auto; flex: none; white-space: nowrap; }

/* Mobile: guarantee the button is on-screen and the label never pushes it off.
   The label flexes and truncates; the small print drops; the button stays put. */
@media (max-width: 560px) {
  .epg-sticky--bar { padding: .5rem .85rem calc(.5rem + env(safe-area-inset-bottom, 0px)); }
  .epg-sticky--bar .epg-sticky__inner { gap: .65rem; max-width: none; }
  .epg-sticky--bar b { font-size: .82rem; flex: 1 1 auto; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
  .epg-sticky--bar b small { display: none; }
  .epg-sticky--bar .epg-btn { flex: none; padding: .62rem 1rem; font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) { .epg-top5 *, .epg-sticky--bar { transition: none !important; } }


/* ═══════════════════════════════════════════════════════════════════════════
   GUIDE FORMAT  ·  .epg-guide / .epg-g-*
   Ported 2026-07-26 from the crc-* "claude design" guide (live page 4517,
   motorcycle-hearing-protection-guide). A step-by-step editorial guide — distinct
   page type from the Top-5. Own component set (.epg-g-*) so it never collides with
   the Top-5's .epg-* / .epg-top5. Brand colours resolve from --epg-* tokens.
   Light-only editorial. Original crc- version stays on the live Flatsome site
   untouched; this is the native GeneratePress port.
   ═══════════════════════════════════════════════════════════════════════════ */
.epg-guide {
  --epg-g-ink: var(--epg-ink, #000514);
  --epg-g-amber: var(--epg-orange, #ff9900);
  --epg-g-gold: #ffbc03;
  --epg-g-body: #212121;
  --epg-g-muted: #5b6470;
  --epg-g-hairline: #e3e5e8;
  --epg-g-bg: #f4f4f4;
  --epg-g-alert: #cf132b;
  --epg-g-success: #1f7a3a;
  --epg-g-col: 760px;
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--epg-g-body);
}
.epg-guide * { box-sizing: border-box; }
.epg-g-col { max-width: var(--epg-g-col); margin: 0 auto; padding: 0 24px; }
.epg-g-band { width: 100%; }
.epg-g-tinted { background: var(--epg-g-bg); }

.epg-g-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--epg-g-muted); }

/* Hero */
.epg-g-hero { background: linear-gradient(180deg, #fff, var(--epg-g-bg)); border-bottom: 1px solid var(--epg-g-hairline); }
.epg-g-hero .epg-g-col { padding: 64px 24px 56px; }
.epg-g-hero h1 { font-size: 96px; line-height: .95; font-weight: 900; letter-spacing: -.04em; color: var(--epg-g-ink); margin: 0 0 8px; text-wrap: balance; }
.epg-g-hero h1 mark { background: linear-gradient(180deg, transparent 65%, var(--epg-g-amber) 65%, var(--epg-g-amber) 92%, transparent 92%); padding: 0 4px; color: inherit; }
.epg-g-hero .epg-g-sub { font-size: 21px; color: var(--epg-g-muted); max-width: 620px; margin: 28px 0; }

/* Byline */
.epg-g-byline { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--epg-g-muted); }
.epg-g-byline .epg-g-avatar { width: 32px; height: 32px; border-radius: 50%; background: #dfe2e6; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: var(--epg-g-ink); font-size: 12px; }
.epg-g-byline strong { color: var(--epg-g-ink); display: block; }

/* Trust strip */
.epg-g-trust { background: #fff; border-bottom: 1px solid var(--epg-g-hairline); padding: 18px 24px; }
.epg-g-trust ul { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; list-style: none; padding: 0; margin: 0 auto; max-width: var(--epg-g-col); font-size: 13px; }
.epg-g-trust li { display: inline-flex; align-items: center; gap: 6px; }
.epg-g-trust .epg-g-check { color: var(--epg-g-amber); font-weight: 900; }
.epg-g-trust strong { color: var(--epg-g-ink); }

/* Summary card */
.epg-g-summary-card { border: 1px solid var(--epg-g-hairline); border-radius: 6px; padding: 22px; position: relative; margin-top: 36px; }
.epg-g-summary-card .epg-g-tab { position: absolute; top: -10px; left: 18px; background: #fff; padding: 0 10px; font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--epg-g-muted); }
.epg-g-summary-card p { margin: 4px 0 18px; font-size: 16px; }
.epg-g-pick-anchor { display: block; text-decoration: none; color: inherit; border: 1px solid var(--epg-g-ink); border-radius: 6px; overflow: hidden; }
.epg-g-pick-anchor .epg-g-pick-head { padding: 8px 14px; background: var(--epg-g-ink); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; }
.epg-g-pick-anchor .epg-g-pick-head em { color: var(--epg-g-amber); font-style: normal; }
.epg-g-pick-anchor .epg-g-pick-body { display: flex; gap: 18px; align-items: center; padding: 18px; }
.epg-g-pick-anchor img { width: 96px; height: 96px; object-fit: cover; background: var(--epg-g-bg); border-radius: 4px; }
.epg-g-pick-anchor .epg-g-pick-name { font-size: 20px; font-weight: 800; color: var(--epg-g-ink); line-height: 1.15; }
.epg-g-pick-anchor .epg-g-pick-desc { font-size: 14px; color: var(--epg-g-muted); margin: 4px 0 10px; }
.epg-g-pick-anchor .epg-g-pick-stats { gap: 8px; font-size: 14px; flex-wrap: wrap; }
.epg-g-pick-anchor .epg-g-pick-stats .epg-g-price { font-weight: 800; color: var(--epg-g-ink); font-size: 17px; }
.epg-g-pick-anchor .epg-g-pick-stats .epg-g-rating { color: var(--epg-g-success); font-weight: 700; }
.epg-g-pick-anchor .epg-g-pick-cta { font-size: 12px; font-weight: 800; color: #fff; background: var(--epg-g-amber); padding: 13px 14px; text-transform: uppercase; letter-spacing: .12em; text-align: center; border-top: 1px solid var(--epg-g-ink); }

/* Lede */
.epg-g-lede { padding: 40px 0 0; }
.epg-g-lede p { font-size: 32px; font-weight: 600; line-height: 1.3; letter-spacing: -.012em; color: var(--epg-g-ink); text-wrap: balance; margin: 0; }
.epg-g-lede mark { background: none; color: var(--epg-g-amber); }

/* TOC */
.epg-g-toc { padding: 32px 0 0; }
.epg-g-toc-card { border: 1px solid var(--epg-g-hairline); border-radius: 6px; overflow: hidden; }
.epg-g-toc-card header { padding: 12px 18px; background: var(--epg-g-bg); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--epg-g-muted); border-bottom: 1px solid var(--epg-g-hairline); }
.epg-g-toc-card ol { list-style: none; padding: 0; margin: 0; font-size: 15px; }
.epg-g-toc-card li { padding: 12px 18px; display: flex; gap: 14px; align-items: flex-start; border-top: 1px solid var(--epg-g-hairline); }
.epg-g-toc-card li:first-child { border-top: none; }
.epg-g-toc-card .epg-g-n { font-size: 12px; font-weight: 800; color: var(--epg-g-amber); width: 22px; font-variant-numeric: tabular-nums; }
.epg-g-toc-card .epg-g-title { color: var(--epg-g-ink); font-weight: 500; flex: 1; }

/* Steps */
.epg-g-step-band { width: 100%; }
.epg-g-step-band.epg-g-tinted { background: var(--epg-g-bg); }
.epg-g-step { max-width: var(--epg-g-col); margin: 0 auto; padding: 56px 24px 48px; position: relative; }
.epg-g-step .epg-g-watermark { position: absolute; top: 8px; right: 24px; font-size: 180px; font-weight: 900; line-height: .85; letter-spacing: -.05em; color: var(--epg-g-bg); pointer-events: none; font-variant-numeric: tabular-nums; }
.epg-g-step-band.epg-g-tinted .epg-g-step .epg-g-watermark { color: #e5e7ea; }
.epg-g-step .epg-g-content { position: relative; }
.epg-g-step .epg-g-kicker { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--epg-g-amber); border-bottom: 2px solid var(--epg-g-amber); padding-bottom: 5px; margin-bottom: 16px; }
.epg-g-step h2 { font-size: 40px; line-height: 1.12; font-weight: 800; letter-spacing: -.02em; color: var(--epg-g-ink); text-wrap: balance; max-width: 85%; margin: 0 0 20px; }
.epg-g-step p { margin: 0 0 16px; font-size: 17px; line-height: 1.6; }

/* Callouts */
.epg-g-callout { padding: 14px 18px; border-left: 3px solid var(--epg-g-amber); font-size: 14px; line-height: 1.55; margin: 6px 0 12px; background: var(--epg-g-bg); }
.epg-g-step-band.epg-g-tinted .epg-g-callout { background: #fff; }
.epg-g-above80 { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 4px; font-size: 14px; margin: 16px 0 4px; background: var(--epg-g-bg); }
.epg-g-step-band.epg-g-tinted .epg-g-above80 { background: #fff; }
.epg-g-above80 a { font-weight: 700; color: var(--epg-g-ink); text-decoration: none; border-bottom: 2px solid var(--epg-g-amber); }
.epg-g-inline-prod { font-size: 15px; color: var(--epg-g-muted); font-style: italic; margin: 12px 0 16px; }
.epg-g-inline-prod a { color: var(--epg-g-ink); font-weight: 700; text-decoration: none; background: rgba(255, 153, 0, .18); padding: 0 4px; border-radius: 2px; }

/* Compare grid */
.epg-g-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.epg-g-compare .epg-g-card { background: #fff; border: 1px solid var(--epg-g-hairline); padding: 16px; }
.epg-g-compare .epg-g-bad { border-top: 3px solid var(--epg-g-alert); }
.epg-g-compare .epg-g-good { border-top: 3px solid var(--epg-g-success); }
.epg-g-compare h4 { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 10px; }
.epg-g-compare .epg-g-bad h4 { color: var(--epg-g-alert); }
.epg-g-compare .epg-g-good h4 { color: var(--epg-g-success); }
.epg-g-compare ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 14px; }
.epg-g-compare li { display: flex; gap: 8px; align-items: flex-start; }

/* Mid-content dark CTA */
.epg-g-mid-cta { background: var(--epg-g-ink); color: #fff; border-radius: 6px; overflow: hidden; display: grid; grid-template-columns: 180px 1fr auto; align-items: center; margin: 24px 0; }
.epg-g-mid-cta .epg-g-mid-img { background: radial-gradient(ellipse at center, rgba(255, 153, 0, .18), transparent 70%); padding: 18px; display: flex; align-items: center; justify-content: center; }
.epg-g-mid-cta .epg-g-mid-img img { width: 100%; }
.epg-g-mid-cta .epg-g-mid-body { padding: 20px 24px; }
.epg-g-mid-cta .epg-g-mid-kicker { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--epg-g-amber); margin-bottom: 6px; }
.epg-g-mid-cta h3 { font-size: 20px; font-weight: 800; line-height: 1.2; color: #fff; margin: 0; }
.epg-g-mid-cta .epg-g-mid-meta { font-size: 14px; color: rgba(255, 255, 255, .7); margin-top: 6px; }
.epg-g-mid-cta .epg-g-mid-meta strong { color: #fff; }
.epg-g-mid-cta .epg-g-mid-action { padding: 20px; }
.epg-g-mid-cta .epg-g-mid-action a { display: block; text-align: center; white-space: nowrap; background: var(--epg-g-amber); color: var(--epg-g-ink); padding: 13px 22px; border-radius: 4px; font-weight: 800; font-size: 15px; text-decoration: none; }

/* Pick reveal */
.epg-g-pick { background: #000; color: #fff; }
.epg-g-pick .epg-g-pick-grid { max-width: 1100px; margin: 0 auto; padding: 64px 24px 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.epg-g-pick .epg-g-pick-img { background: radial-gradient(ellipse at center, rgba(255, 153, 0, .18), transparent 70%); padding: 32px; display: flex; align-items: center; justify-content: center; }
.epg-g-pick .epg-g-pick-img img { width: 85%; max-width: 380px; display: block; }
.epg-g-pick .epg-g-pick-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; background: var(--epg-g-amber); color: var(--epg-g-ink); padding: 6px 12px; border-radius: 999px; }
.epg-g-pick h2 { font-size: 64px; font-weight: 900; line-height: .98; letter-spacing: -.035em; color: #fff; margin: 20px 0 8px; }
.epg-g-pick .epg-g-pick-sub { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .55); font-weight: 700; margin-bottom: 22px; }
.epg-g-pick .epg-g-pick-stats { display: flex; align-items: baseline; gap: 32px; border-top: 1px solid rgba(255, 255, 255, .15); border-bottom: 1px solid rgba(255, 255, 255, .15); padding: 18px 0; margin-bottom: 22px; }
.epg-g-pick .epg-g-pick-stats .epg-g-stat-label { font-size: 11px; color: rgba(255, 255, 255, .55); letter-spacing: .1em; text-transform: uppercase; }
.epg-g-pick .epg-g-pick-stats .epg-g-stat-val { font-size: 32px; font-weight: 800; color: #fff; }
.epg-g-pick .epg-g-pick-stats .epg-g-amber { color: var(--epg-g-amber); font-size: 18px; }
.epg-g-pick ul { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 12px; font-size: 15px; color: rgba(255, 255, 255, .92); }
.epg-g-pick ul li { display: flex; gap: 10px; align-items: flex-start; }
.epg-g-pick ul li::before { content: "✓"; color: var(--epg-g-amber); font-weight: 900; }
.epg-g-pick .epg-g-pick-shop { display: inline-block; background: var(--epg-g-amber); color: var(--epg-g-ink); padding: 16px 32px; border-radius: 4px; font-weight: 800; font-size: 17px; text-decoration: none; }
.epg-g-pick .epg-g-pick-fineprint { font-size: 12px; margin-top: 12px; color: rgba(255, 255, 255, .55); }

/* Takeaway */
.epg-g-takeaway { padding: 40px 0 8px; }
.epg-g-takeaway .epg-g-eyebrow { color: var(--epg-g-amber); margin-bottom: 10px; display: block; }
.epg-g-takeaway p { font-size: 20px; line-height: 1.5; font-weight: 500; color: var(--epg-g-ink); margin: 0; }

/* FAQ */
.epg-g-faq { padding: 36px 0 8px; }
.epg-g-faq h2 { font-size: 32px; font-weight: 800; letter-spacing: -.02em; color: var(--epg-g-ink); margin: 0 0 18px; }
.epg-g-faq details { border-top: 1px solid var(--epg-g-hairline); }
.epg-g-faq details:last-child { border-bottom: 1px solid var(--epg-g-hairline); }
.epg-g-faq summary { list-style: none; cursor: pointer; padding: 14px 0; display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; font-size: 17px; font-weight: 700; color: var(--epg-g-ink); line-height: 1.35; }
.epg-g-faq summary::-webkit-details-marker { display: none; }
.epg-g-faq summary::after { content: "▾"; color: var(--epg-g-amber); transition: transform .2s; flex-shrink: 0; }
.epg-g-faq details[open] summary::after { transform: rotate(180deg); }
.epg-g-faq details > div { padding: 0 0 16px; color: var(--epg-g-body); font-size: 15px; line-height: 1.6; }

/* Related */
.epg-g-related { background: var(--epg-g-bg); border-top: 1px solid var(--epg-g-hairline); }
.epg-g-related .epg-g-col { padding: 32px 24px 40px; }
.epg-g-related h2 { font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--epg-g-muted); margin: 0 0 14px; }
.epg-g-related .epg-g-grid { display: grid; gap: 10px; grid-template-columns: 1fr 1fr 1fr; }
.epg-g-related a { background: #fff; padding: 16px; border-radius: 4px; text-decoration: none; display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 600; color: var(--epg-g-ink); border: 1px solid var(--epg-g-hairline); }
.epg-g-related a span { color: var(--epg-g-amber); font-weight: 800; }

/* Mobile */
@media (max-width: 760px) {
  .epg-g-hero h1 { font-size: 44px; }
  .epg-g-lede p { font-size: 22px; }
  .epg-g-step h2 { font-size: 26px; max-width: 100%; }
  .epg-g-step .epg-g-watermark { font-size: 96px; }
  .epg-g-pick .epg-g-pick-grid { grid-template-columns: 1fr; gap: 24px; padding: 32px 24px; }
  .epg-g-pick h2 { font-size: 36px; }
  .epg-g-mid-cta { grid-template-columns: 1fr; }
  .epg-g-related .epg-g-grid { grid-template-columns: 1fr; }
  .epg-g-faq h2 { font-size: 24px; }
}

/* CRC sticky bottom bar — paste into Appearance → Customise → Additional CSS,
   or save as child-theme/assets/css/crc-sticky.css and enqueue from functions.php */

.epg-g-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000514;
  border-top: 2px solid #ff9900;
  padding: 12px 24px;
  display: none;                 /* JS toggles to flex */
  align-items: center;
  justify-content: center;
  gap: 24px;
  z-index: 50;
  font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  transform: translateY(100%);
  transition: transform .25s ease-out;
}
.epg-g-sticky.is-visible {
  display: flex;
  transform: translateY(0);
}
.epg-g-sticky .epg-g-sticky-prod {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
}
.epg-g-sticky img {
  width: 40px;
  height: 40px;
  background: #0d1422;
  border-radius: 4px;
  padding: 4px;
  object-fit: contain;
}
.epg-g-sticky .epg-g-sticky-name {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}
.epg-g-sticky .epg-g-sticky-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, .7);
}
.epg-g-sticky .epg-g-sticky-meta strong {
  color: #fff;
}
.epg-g-sticky .epg-g-sticky-cta {
  background: #ff9900;
  color: #000514;
  padding: 12px 28px;
  border-radius: 4px;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}
.epg-g-sticky .epg-g-sticky-cta:hover {
  background: #ffbc03;
}

/* Don't push fixed footer content under the bar */
body.epg-g-has-sticky { padding-bottom: 76px; }

@media (max-width: 600px) {
  .epg-g-sticky {
    gap: 12px;
    padding: 10px 14px;
  }
  .epg-g-sticky .epg-g-sticky-meta {
    display: none;
  }
  .epg-g-sticky .epg-g-sticky-cta {
    padding: 10px 16px;
    font-size: 13px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SITE CHROME  ·  .epg-header / .epg-site-footer
   Shared header + footer, rendered by the child-theme template (template-blank.php)
   so every native EPG page carries real nav — not a bare landing page. Kept clean
   and light (not a 1:1 of the old Flatsome header). Brand colours from --epg-*.
   ═══════════════════════════════════════════════════════════════════════════ */

/* header */
.epg-header { background: #fff; border-bottom: 1px solid #e6e8eb; }
.epg-header__inner { max-width: 1180px; margin: 0 auto; padding: 13px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; }
/* Logo-only header (no wordmark, no nav — Armin 2026-07-26). */
.epg-brand { display: inline-flex; align-items: center; text-decoration: none; }
.epg-brand img { width: 44px; height: 44px; display: block; border-radius: 4px; }

/* footer */
.epg-site-footer { background: var(--epg-ink, #000514); color: rgba(255,255,255,.72); }
.epg-site-footer__inner { max-width: 1180px; margin: 0 auto; padding: 40px 24px 34px; }
.epg-site-footer b { color: #fff; font-size: 17px; font-weight: 900; letter-spacing: -.02em; display: block; }
.epg-site-footer .epg-foot-tag { font-size: 13px; line-height: 1.55; margin: 9px 0 22px; max-width: 42ch; }
.epg-site-footer nav { display: flex; gap: 22px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.14); padding-top: 20px; }
.epg-site-footer nav a { color: rgba(255,255,255,.8); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.epg-site-footer nav a:hover { color: var(--epg-orange, #ff9900); }
.epg-site-footer .epg-copy { font-size: 12px; color: rgba(255,255,255,.5); margin-top: 16px; }

/* ═══════════════════════════════════════════════════════════════════════════
   HOMEPAGE  ·  .epg-home
   The front page. Reuses the editorial utilities (.epg-trust, .epg-eyebrow,
   .epg-kicker, .epg-method) — which read --t5-* tokens — so the token block is
   declared here too. Own components: hero, review-card grid.
   ═══════════════════════════════════════════════════════════════════════════ */
.epg-home {
  --t5-ink: var(--epg-ink, #000514); --t5-accent: var(--epg-orange, #ff9900);
  --t5-paper: #fff; --t5-body: #23262c; --t5-grey: #6e7379;
  --t5-line: rgba(0,5,20,.16); --t5-line-soft: rgba(0,5,20,.09);
  --t5-pos: #2e7d32; --t5-neg: #c62828;
  background: #fff; color: var(--t5-body); font-size: 17px; line-height: 1.62; padding-bottom: 3.5rem;
}
@media (min-width: 720px) { .epg-home { font-size: 18px; } }
.epg-home section { padding: 2.2rem 0; }

.epg-home__hero { padding: 3.4rem 0 1.4rem; max-width: 46rem; }
.epg-home__hero h1 { font-size: clamp(2.7rem, 8.5vw, 5.4rem); line-height: .94; letter-spacing: -.042em;
  font-weight: 900; color: var(--t5-ink); margin: .5rem 0 0; text-wrap: balance; }
.epg-home__hero h1 mark { background: linear-gradient(transparent 58%, var(--t5-accent) 58%,
  var(--t5-accent) 93%, transparent 93%); padding: 0 .04em; color: inherit; border-radius: 0; }
.epg-home__lede { font-size: 1.2rem; color: var(--t5-grey); max-width: 40rem; margin: 1.2rem 0 0; line-height: 1.5; }

/* review-card grid */
.epg-cards { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 600px) { .epg-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .epg-cards { grid-template-columns: 1fr 1fr 1fr; } }
.epg-card { display: flex; flex-direction: column; border: 1px solid var(--t5-line); border-radius: 5px;
  overflow: hidden; text-decoration: none; color: inherit; background: #fff;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.epg-card:hover { border-color: var(--t5-ink); transform: translateY(-2px); box-shadow: 0 8px 22px -14px rgba(0,5,20,.4); }
.epg-card__img { display: block; aspect-ratio: 16 / 9; background: #f1f2f4; overflow: hidden; }
.epg-card__img img, .epg-card__img-el { width: 100%; height: 100%; object-fit: cover; display: block; }
.epg-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.15rem 1.3rem 1.3rem; }
.epg-card__cat { font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--t5-accent); }
.epg-card h3 { font-size: 1.12rem; font-weight: 900; letter-spacing: -.02em; color: var(--t5-ink);
  line-height: 1.18; margin: .5rem 0 .5rem; text-wrap: balance; }
.epg-card p { font-size: .88rem; color: var(--t5-grey); margin: 0 0 1rem; flex: 1; line-height: 1.5; }
.epg-card__more { font-size: .8rem; font-weight: 800; letter-spacing: .02em; color: var(--t5-ink); }
.epg-card__more::after { content: " \2192"; }
.epg-card:hover .epg-card__more { color: var(--t5-accent); }

/* ═══════════════════════════════════════════════════════════════════════════
   ARTICLE FORMAT  ·  .epg-post
   The blog/journal article layout — single reading column, editorial. Reuses the
   --t5-* editorial tokens (declared here). Own components: hero, body prose,
   product callout, mid CTA band.
   ═══════════════════════════════════════════════════════════════════════════ */
.epg-post {
  --t5-ink: var(--epg-ink, #000514); --t5-accent: var(--epg-orange, #ff9900);
  --t5-body: #23262c; --t5-grey: #6e7379; --t5-line: rgba(0,5,20,.14); --t5-bg: #f4f5f7;
  background: #fff; color: var(--t5-body); font-size: 18px; line-height: 1.7;
}
.epg-post__wrap { max-width: 46rem; margin: 0 auto; padding: 0 24px; }
.epg-post__hero { padding: 2.6rem 0 0; }
.epg-post__cat { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--t5-accent); }
.epg-post h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.08;
  color: var(--t5-ink); margin: .55rem 0 0; text-wrap: balance; }
.epg-post__byline { display: flex; align-items: center; gap: .6rem; margin: 1.1rem 0 0; font-size: .88rem; color: var(--t5-grey); }
.epg-post__byline .epg-post__ava { width: 34px; height: 34px; border-radius: 50%; background: var(--t5-ink); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 12px; letter-spacing: -.02em; }
.epg-post__byline b { color: var(--t5-ink); font-weight: 800; }
.epg-post__lead { margin: 1.8rem 0 .5rem; border-radius: 6px; overflow: hidden; background: var(--t5-bg); }
.epg-post__lead img { width: 100%; display: block; }

/* body prose */
.epg-post__body { padding: 1.4rem 0 2.4rem; }
.epg-post__body h2 { font-size: 1.55rem; font-weight: 900; letter-spacing: -.02em; color: var(--t5-ink); line-height: 1.15; margin: 2.1rem 0 .7rem; text-wrap: balance; }
.epg-post__body h3 { font-size: 1.18rem; font-weight: 800; color: var(--t5-ink); margin: 1.6rem 0 .4rem; }
.epg-post__body p { margin: 0 0 1.15rem; }
.epg-post__body ul, .epg-post__body ol { margin: 0 0 1.15rem; padding-left: 1.3rem; }
.epg-post__body li { margin: .45rem 0; }
.epg-post__body a { color: var(--t5-ink); text-decoration: underline; text-decoration-color: var(--t5-accent); text-underline-offset: 2px; }
.epg-post__body em { color: var(--t5-grey); }
.epg-post__body strong { color: var(--t5-ink); font-weight: 800; }

/* inline figure */
.epg-post__fig { margin: 1.6rem 0; border-radius: 6px; overflow: hidden; background: var(--t5-bg); }
.epg-post__fig img { width: 100%; display: block; }

/* product callout */
.epg-post__product { border: 1.5px solid var(--t5-ink); border-radius: 6px; padding: 1.3rem; margin: 1.8rem 0;
  display: flex; gap: 1.2rem; align-items: flex-start; flex-wrap: wrap; }
.epg-post__product > img { width: 88px; height: 88px; object-fit: contain; background: #fff; display: block; flex: none; }
.epg-post__pbody { flex: 1; min-width: 220px; }
.epg-post__pname { font-size: 1.15rem; font-weight: 900; letter-spacing: -.02em; color: var(--t5-ink); line-height: 1.15; margin: 0; }
.epg-post__pdesc { font-size: .9rem; color: var(--t5-grey); margin: .4rem 0 .9rem; line-height: 1.5; }
.epg-post__pdesc p { margin: 0 0 .4rem; }
.epg-post__pdesc ul { margin: .4rem 0; padding-left: 1.1rem; }
.epg-post__product .epg-btn { display: inline-block; }

/* mid CTA band */
.epg-post__ctaband { background: var(--t5-ink); color: #fff; text-align: center; padding: 1.7rem 1.4rem; border-radius: 6px; margin: 1.8rem 0; }
.epg-post__ctaband p { margin: 0 0 1rem; font-size: 1.05rem; font-weight: 700; color: #fff; }

/* Flatsome list classes carried over in converted post prose */
.epg-post .bullet-checkmark, .epg-post .bullet-cross { list-style: none; position: relative; padding-left: 1.6rem; }
.epg-post .bullet-checkmark::before { content: "\2713"; position: absolute; left: 0; color: var(--t5-accent); font-weight: 900; }
.epg-post .bullet-cross::before { content: "\2715"; position: absolute; left: 0; color: #c62828; font-weight: 900; }
.epg-post ul:has(.bullet-checkmark), .epg-post ul:has(.bullet-cross) { padding-left: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   COLLECTION / CHOOSER format — reuses the .epg-top5 wrapper (hero, trust,
   note, method, author, sticky) and the .epg-rank cards for the competitor
   comparison. Adds only the 3-card "which variant is right for you" grid.
   ═══════════════════════════════════════════════════════════════════════════ */
.epg-choose { margin-top: 1.9rem; }
.epg-choose__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: stretch; margin-top: 1rem; }
.epg-choose__card { position: relative; display: flex; flex-direction: column; background: var(--t5-paper);
  border: 1.5px solid var(--t5-line); border-radius: 6px; padding: 1.15rem 1.15rem 1.25rem; }
.epg-choose__card--pick { border: 2px solid var(--t5-ink); box-shadow: 0 8px 26px rgba(0,5,20,.10); }
.epg-choose__ribbon { position: absolute; top: 0; right: 0; background: var(--t5-accent); color: var(--t5-ink);
  font-size: .62rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; padding: .34rem .6rem;
  border-bottom-left-radius: 6px; border-top-right-radius: 5px; }
.epg-choose__img { display: block; border: 1px solid var(--t5-line-soft); border-radius: 4px; background: #fff; overflow: hidden; }
.epg-choose__img img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.epg-choose__for { margin: .9rem 0 0; font-size: .69rem; font-weight: 900; letter-spacing: .05em;
  text-transform: uppercase; color: var(--t5-grey); }
.epg-choose__name { margin: .2rem 0 0; font-size: 1.3rem; font-weight: 900; letter-spacing: -.025em; color: var(--t5-ink); line-height: 1.03; }
.epg-choose__price { margin: .42rem 0 0; font-size: 1.15rem; font-weight: 800; color: var(--t5-ink); }
.epg-choose__price small { font-size: .74rem; font-weight: 600; color: var(--t5-grey); }
.epg-choose__specs { list-style: none; margin: .8rem 0 1.1rem; padding: .8rem 0 0; border-top: 1px solid var(--t5-line-soft);
  display: grid; gap: .36rem; }
.epg-choose__specs li { display: flex; justify-content: space-between; gap: .7rem; font-size: .82rem; line-height: 1.3; }
.epg-choose__specs li span { color: var(--t5-grey); flex: none; }
.epg-choose__specs li b { font-weight: 700; color: var(--t5-ink); text-align: right; }
.epg-choose__actions { margin-top: auto; display: grid; gap: .5rem; }
.epg-choose__actions .epg-btn { width: 100%; text-align: center; font-size: .86rem; padding: 11px 14px; }
.epg-choose__type { display: inline-block; font-size: .64rem; font-weight: 900; letter-spacing: .08em;
  text-transform: uppercase; color: var(--t5-ink); background: var(--t5-line-soft); padding: .28rem .5rem;
  border-radius: 3px; }
.epg-choose__btn--ghost { background: transparent; color: var(--t5-ink); box-shadow: none; border: 1.5px solid var(--t5-ink); }
.epg-choose__btn--ghost:hover { background: var(--t5-ink); color: var(--t5-paper); box-shadow: none; }
.epg-choose__compare-intro { max-width: var(--t5-read); color: var(--t5-body); font-size: 1rem; margin: .9rem 0 0; }
@media (max-width: 760px) { .epg-choose__grid { grid-template-columns: 1fr; } }

/* ═══ Legal / policy prose pages (disclosure, privacy) — reuses the tokens ═══ */
.epg-legal { max-width: 46rem; margin: 0 auto; padding: 1.6rem 20px 3rem; color: var(--t5-body); }
.epg-legal h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); font-weight: 900; letter-spacing: -.03em;
  color: var(--t5-ink); line-height: 1.08; margin: .2rem 0 1.3rem; text-wrap: balance; }
.epg-legal h2 { font-size: 1.2rem; font-weight: 800; color: var(--t5-ink); margin: 1.9rem 0 .5rem; letter-spacing: -.01em; }
.epg-legal h3 { font-size: 1.02rem; font-weight: 800; color: var(--t5-ink); margin: 1.3rem 0 .4rem; }
.epg-legal p, .epg-legal li, .epg-legal div { font-size: .96rem; line-height: 1.62; }
.epg-legal p, .epg-legal > div, .epg-legal ul, .epg-legal ol, .epg-legal table { margin: 0 0 .8rem; }
.epg-legal ul, .epg-legal ol { padding-left: 1.25rem; }
.epg-legal li { margin: 0 0 .35rem; }
.epg-legal a { color: var(--t5-ink); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.epg-legal a:hover { color: var(--t5-accent); }
.epg-legal strong, .epg-legal b { color: var(--t5-ink); }
.epg-legal table { width: 100%; border-collapse: collapse; font-size: .86rem; display: block; overflow-x: auto; }
.epg-legal th, .epg-legal td { border: 1px solid var(--t5-line); padding: .5rem .6rem; text-align: left; vertical-align: top; }
.epg-legal hr { border: 0; border-top: 1px solid var(--t5-line); margin: 1.6rem 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   STORY FORMAT  ·  .epg-story
   A story-first advertorial with a ranked field — the second top-5 style, next
   to the editorial .epg-top5. Structure follows the Suha advertorials (mirror
   the reader's night -> audit the room -> single-cause reframe -> teardown of
   the alternatives -> reveal -> ranked field -> proof -> risk reversal), and
   the ranked field with a scored table follows verified-choice.com.

   ⛔ WHAT IS DELIBERATELY NOT PORTED FROM THEM:
   - The health-threat engine. Suha's page runs on "Heart Attack & Stroke",
     "3x higher risk of stroke", "Brain Damage & Fog" and a Year 1->10 decline
     timeline. Strip that and the motor is gone, so this format replaces it with
     a NON-health mechanism: the room is not as dark as you think, and every
     flat mask leaks at the bridge of the nose. That is a claim about ambient
     light and about mask fit, never about the reader's body.
   - No melatonin / pineal gland / cortisol physiology, no menopause framing.
   - The fabricated specialist. Suha attributes 5 of 7 panels to "Dr David
     Reynolds, Sleep & Respiratory Specialist". Ours carries Emma Taylor, the
     real standing byline, and test claims stay institutional ("our testers"),
     never folded into the first-person narrative.
   - Competitor prices, per the standing rule.

   Shared components (.epg-quotes, .epg-faq, .epg-compare, .epg-note, .epg-mark)
   are REUSED here rather than recreated — they already resolve --epg-c-* on
   .epg-native-page, which is exactly why they were shared out.
   ═══════════════════════════════════════════════════════════════════════════ */

.epg-story {
  --st-ink:    var(--epg-ink, #000514);
  --st-accent: var(--epg-orange, #ff9900);
  --st-paper:  #ffffff;
  --st-body:   #23262c;
  --st-grey:   #6e7379;
  --st-line:   rgba(0, 5, 20, .14);
  --st-tint:   #f6f7f8;
  --st-col:    40rem;
  background: var(--st-paper);
  color: var(--st-body);
  font-size: 17px;
  line-height: 1.62;
}
.epg-story__col { max-width: var(--st-col); margin: 0 auto; padding: 0 20px; }

/* trend bar — Suha's geo badge, minus the flag/urgency theatre */
.epg-story__topbar { background: var(--st-ink); color: #fff; text-align: center;
  padding: 8px 16px; font-size: .74rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; }

.epg-story__hero { padding: 2.4rem 0 1.4rem; }
.epg-story__hero h1 { margin: 0; font-size: clamp(1.75rem, 6vw, 2.5rem); font-weight: 900;
  letter-spacing: -.03em; line-height: 1.1; color: var(--st-ink); text-wrap: balance; }
.epg-story__stand { margin: .9rem 0 0; font-size: 1.08rem; line-height: 1.5;
  color: var(--st-body); }
.epg-story__byline { display: flex; align-items: center; gap: 10px; margin: 1.3rem 0 0;
  padding: .8rem 0 0; border-top: 1px solid var(--st-line); font-size: .8rem;
  color: var(--st-grey); }
.epg-story__ava { width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--st-ink); color: #fff; display: flex; align-items: center;
  justify-content: center; font-size: .72rem; font-weight: 800; letter-spacing: .04em; }
.epg-story__byline b { color: var(--st-ink); font-weight: 800; }

/* section headings reuse the left-rule motif of .epg-note so headings and
   callouts read as one family */
.epg-story__sec { padding: 1.9rem 0 0; }
.epg-story__sec > h2 { margin: 0 0 .8rem; font-size: clamp(1.25rem, 4.4vw, 1.6rem);
  font-weight: 900; letter-spacing: -.022em; line-height: 1.22; color: var(--st-ink);
  border-left: 4px solid var(--st-accent); padding-left: 14px; text-wrap: balance; }
.epg-story__sec p { margin: 0 0 .95rem; }
.epg-story__sec p:last-child { margin-bottom: 0; }

/* the light audit — the room, itemised. Deliberately a checklist of things the
   reader can look for tonight, not a physiological claim. */
.epg-story__audit { list-style: none; margin: 1.1rem 0 0; padding: 0;
  border: 1px solid var(--st-line); border-radius: 8px; overflow: hidden; }
.epg-story__audit li { display: flex; gap: 12px; align-items: flex-start;
  padding: .8rem 1rem; font-size: .93rem; line-height: 1.5; }
.epg-story__audit li + li { border-top: 1px solid var(--st-line); }
.epg-story__audit li:nth-child(odd) { background: var(--st-tint); }
.epg-story__audit b { display: block; color: var(--st-ink); font-weight: 800;
  font-size: .9rem; margin-bottom: .1rem; }
.epg-story__audit svg { width: 20px; height: 20px; flex: none; margin-top: 2px;
  stroke: var(--st-accent); fill: none; stroke-width: 2; stroke-linecap: round;
  stroke-linejoin: round; }

/* teardown — each alternative disqualified on MECHANISM, not on quality.
   Named competitors are fine here: comparative claims are lawful when they are
   verifiable, and every line maps to a finding on the editorial top-5. */
.epg-story__tear { margin: 1.1rem 0 0; display: grid; gap: 10px; }
.epg-story__tear div { border: 1px solid var(--st-line); border-left: 4px solid #c62828;
  border-radius: 0 8px 8px 0; padding: .85rem 1rem; background: #fff; }
.epg-story__tear b { display: block; color: var(--st-ink); font-size: .92rem;
  font-weight: 800; margin-bottom: .15rem; }
.epg-story__tear p { margin: 0; font-size: .87rem; line-height: 1.5; color: var(--st-body); }

/* the reveal — the only place the narrative turns to the product */
.epg-story__reveal { background: var(--st-ink); color: #fff; border-radius: 10px;
  padding: 1.6rem 1.35rem; margin: 1.4rem 0 0; }
.epg-story__reveal h3 { margin: 0 0 .6rem; font-size: 1.2rem; font-weight: 900;
  letter-spacing: -.02em; color: #fff; }
.epg-story__reveal p { margin: 0 0 .8rem; font-size: .95rem; line-height: 1.55;
  color: rgba(255,255,255,.88); }
.epg-story__reveal p:last-of-type { margin-bottom: 1.1rem; }
.epg-story__reveal .epg-btn { display: inline-block; }

/* two CTA weights: the mid-article aside, and the full card.
   Suha's rule kept: no ask until after the reveal. */
.epg-story__cta { border: 2px dashed var(--st-line); border-radius: 10px;
  padding: 1.2rem 1rem; text-align: center; margin: 1.5rem 0 0; background: var(--st-tint); }
.epg-story__cta p { margin: 0 0 .8rem; font-size: .95rem; font-weight: 700;
  color: var(--st-ink); line-height: 1.4; }
.epg-story__micro { display: block; margin-top: .7rem; font-size: .72rem; color: var(--st-grey); }

.epg-story__sig { margin: 1.6rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--st-line);
  font-size: .84rem; color: var(--st-grey); font-style: italic; }

@media (min-width: 720px) {
  .epg-story__tear { grid-template-columns: 1fr 1fr; }
}

/* ── PANEL SPINE — the structural unit of the story format ──────────────────
   Suha's page is not prose with a picture. It is a SEQUENCE of self-contained
   panels: section heading -> panel (own title + subtitle) -> content grid ->
   dark statement bar -> attribution. Five panel types repeat across their page
   and all five are rebuilt here, as web elements rather than exported PNGs:

     .epg-panel                cards     — a row of icon/label/body cards
     .epg-panel--stages        timeline  — N stages along an arrow
     .epg-panel--split         compare   — two states side by side
     .epg-panel--teardown      radial    — one cause, N failed alternatives
     .epg-panel--steps         how-to    — numbered sequence

   Why not PNGs: a number baked into an image cannot be localised across 14
   markets or corrected without a re-export, and drifts silently from the copy
   — the defect that left Suha's guarantee image saying 90 days while the copy
   said 30. Everything here stays text.
   ─────────────────────────────────────────────────────────────────────────── */

.epg-panel { background: var(--epg-c-tint); border: 1px solid var(--epg-c-line);
  border-radius: 10px; padding: 1.5rem 1.25rem 1.25rem; margin: 1.2rem 0 0; }
.epg-panel__title { margin: 0; text-align: center; font-size: 1.2rem; font-weight: 900;
  letter-spacing: -.02em; color: var(--epg-c-ink); line-height: 1.22; text-wrap: balance; }
.epg-panel__sub { margin: .45rem 0 0; text-align: center; font-size: .86rem;
  color: var(--epg-c-muted); line-height: 1.45; }
.epg-panel__bar { margin: 1.2rem 0 0; background: var(--epg-c-ink); color: #fff;
  border-radius: 6px; padding: .75rem 1rem; text-align: center; font-size: .87rem;
  font-weight: 700; line-height: 1.4; }
.epg-panel__attr { margin: .55rem 0 0; text-align: center; font-size: .73rem;
  font-style: italic; color: var(--epg-c-muted); }

/* 1 · card row */
.epg-panel__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 1.25rem 0 0; }
.epg-panel .epg-card { background: #fff; border: 1px solid var(--epg-c-line);
  border-top: 4px solid var(--epg-c-amber); border-radius: 8px;
  padding: 1rem .85rem .9rem; text-align: center; }
.epg-card__icon { width: 46px; height: 46px; margin: 0 auto .6rem; border-radius: 50%;
  background: var(--epg-c-mark); display: flex; align-items: center; justify-content: center; }
.epg-card__icon svg { width: 24px; height: 24px; stroke: var(--epg-c-ink); fill: none;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.epg-panel .epg-card h4 { margin: 0 0 .35rem; font-size: .85rem; font-weight: 900;
  letter-spacing: -.01em; color: var(--epg-c-ink); line-height: 1.25; }
.epg-panel .epg-card p { margin: 0; font-size: .76rem; line-height: 1.45; color: var(--epg-c-body); }
.epg-panel .epg-card em { font-style: normal; font-weight: 700; color: var(--epg-c-warn-ink); }

/* 2 · stage timeline. The connecting line runs behind the markers; on mobile it
   turns vertical rather than forcing a horizontal scroll. */
.epg-panel__stages { display: grid; gap: 0; margin: 1.25rem 0 0; position: relative; }
.epg-panel__stage { display: grid; grid-template-columns: 46px 1fr; gap: 12px;
  align-items: start; padding: 0 0 1.1rem; position: relative; }
.epg-panel__stage:last-child { padding-bottom: 0; }
.epg-panel__stage::before { content: ""; position: absolute; left: 22px; top: 42px; bottom: 0;
  width: 2px; background: linear-gradient(180deg, var(--epg-c-amber), var(--epg-c-warn)); }
.epg-panel__stage:last-child::before { display: none; }
.epg-panel__num { width: 44px; height: 44px; border-radius: 50%; background: #fff;
  border: 3px solid var(--epg-c-amber); color: var(--epg-c-ink); display: flex;
  align-items: center; justify-content: center; font-weight: 900; font-size: .82rem; }
.epg-panel__stage:last-child .epg-panel__num { border-color: var(--epg-c-warn); }
.epg-panel__stage b { display: block; font-size: .88rem; font-weight: 900;
  color: var(--epg-c-ink); margin: .55rem 0 .25rem; }
.epg-panel__stage ul { margin: 0; padding-left: 1.05rem; }
.epg-panel__stage li { font-size: .79rem; line-height: 1.5; color: var(--epg-c-body); }

/* 3 · split comparison — the "weak vs strong" pair */
.epg-panel__split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 1.25rem 0 0; }
.epg-panel__side { background: #fff; border: 1px solid var(--epg-c-line); border-radius: 8px;
  padding: .95rem .8rem; text-align: center; }
.epg-panel__side h4 { margin: 0 0 .6rem; font-size: .74rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .08em; }
.epg-panel__side--bad h4 { color: var(--epg-c-warn); }
.epg-panel__side--good h4 { color: #1b7a3d; }
.epg-panel__side figure { margin: 0 0 .6rem; }
.epg-panel__side svg { width: 100%; height: auto; display: block; }
.epg-panel__side p { margin: 0; font-size: .76rem; line-height: 1.45; color: var(--epg-c-body); }

/* 4 · radial teardown — one cause in the middle, the failed alternatives around */
.epg-panel__tear { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 1.25rem 0 0; }
.epg-panel__cause { grid-column: 1 / -1; background: var(--epg-c-warn-bg);
  border: 1px solid var(--epg-c-warn); border-radius: 8px; padding: .85rem 1rem;
  text-align: center; order: 9; }
.epg-panel__cause b { display: block; font-size: .74rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .08em; color: var(--epg-c-warn); margin-bottom: .2rem; }
.epg-panel__cause span { font-size: .92rem; font-weight: 800; color: var(--epg-c-ink); }
.epg-panel__alt { background: #fff; border: 1px solid var(--epg-c-line); border-radius: 8px;
  padding: .85rem .8rem; }
.epg-panel__alt b { display: flex; align-items: center; justify-content: space-between; gap: 6px;
  font-size: .82rem; font-weight: 900; color: var(--epg-c-ink); margin-bottom: .25rem; }
.epg-panel__alt b::after { content: "\2717"; color: var(--epg-c-warn); font-weight: 900; flex: none; }
.epg-panel__alt p { margin: 0; font-size: .75rem; line-height: 1.45; color: var(--epg-c-body); }

/* 5 · numbered steps */
.epg-panel__steps { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 1.25rem 0 0; }
.epg-panel__step { background: #fff; border: 1px solid var(--epg-c-line); border-radius: 8px;
  padding: 1rem .9rem; text-align: center; position: relative; }
.epg-panel__step em { display: block; font-style: normal; font-size: .68rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .1em; color: var(--epg-c-amber); margin-bottom: .4rem; }
.epg-panel__step b { display: block; font-size: .9rem; font-weight: 900; color: var(--epg-c-ink);
  margin-bottom: .25rem; }
.epg-panel__step p { margin: 0; font-size: .78rem; line-height: 1.45; color: var(--epg-c-body); }

@media (min-width: 700px) {
  .epg-panel { padding: 1.75rem 1.5rem 1.4rem; }
  .epg-panel__grid { grid-template-columns: repeat(5, 1fr); }
  .epg-panel__grid--4 { grid-template-columns: repeat(4, 1fr); }
  .epg-panel__tear { grid-template-columns: repeat(4, 1fr); }
  .epg-panel__cause { order: 0; }
  .epg-panel__steps { grid-template-columns: repeat(3, 1fr); }
}

/* 6 · risk reversal — Suha's §7 panel ("You Risk Absolutely Nothing").
   Centred, single statement, three reassurance chips. Deliberately plain:
   the job is to remove the last objection, not to sell again. */
.epg-panel--risk { background: var(--epg-c-ink); border-color: var(--epg-c-ink); }
.epg-panel--risk .epg-panel__title { color: #fff; }
.epg-panel--risk .epg-panel__sub { color: rgba(255,255,255,.72); }
.epg-panel__risk { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin: 1.2rem 0 0; }
.epg-panel__risk span { display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px; padding: .5rem .85rem; font-size: .78rem; font-weight: 700;
  color: #fff; }
.epg-panel__risk span::before { content: "\2713"; color: var(--epg-c-amber); font-weight: 900; }
.epg-panel--risk .epg-panel__bar { background: rgba(255,255,255,.1); }
.epg-panel--risk .epg-panel__attr { color: rgba(255,255,255,.6); }

/* ── IMAGE SLOTS ────────────────────────────────────────────────────────────
   The reference system puts a graphic in EVERY section, and always in the same
   place: heading -> graphic -> body copy. That ordering is the point. The image
   FRAMES the argument you are about to read instead of illustrating something
   already read, which is what lets a skimmer take the whole thesis from
   headings plus graphics alone. It is inverted from normal editorial practice.

   Two slots:
     .epg-story__fig   section-level, sits directly under the <h2>
     .epg-panel__fig   inside a panel, between the subtitle and the content grid

   Ratio is held with aspect-ratio + object-fit so a swapped image can never
   reflow the page — placeholders and finals are interchangeable.
   ─────────────────────────────────────────────────────────────────────────── */

.epg-story__fig { margin: 0 0 1rem; border-radius: 10px; overflow: hidden;
  background: var(--epg-c-tint); border: 1px solid var(--epg-c-line); }
.epg-story__fig img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; }
.epg-story__fig figcaption { padding: .55rem .85rem; font-size: .74rem; line-height: 1.4;
  color: var(--epg-c-muted); background: #fff; border-top: 1px solid var(--epg-c-line); }

.epg-panel__fig { margin: 1rem 0 0; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--epg-c-line); background: #fff; }
.epg-panel__fig img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; }

/* hero image — the reference system opens with a before/after split. Slot is
   here; whether we use that treatment is a content decision, not a structural one. */
.epg-story__hero .epg-story__fig { margin: 1.2rem 0 0; }

/* product shot inside the reveal, on the dark card */
.epg-story__reveal .epg-panel__fig { border-color: rgba(255,255,255,.18); background: #fff; }

/* placeholder state — makes an unfilled slot obvious during layout work so a
   skeleton never ships looking finished */
.is-placeholder { position: relative; }
.is-placeholder::after { content: "PLACEHOLDER"; position: absolute; top: 8px; left: 8px;
  background: var(--epg-c-warn); color: #fff; font-size: .6rem; font-weight: 900;
  letter-spacing: .1em; padding: 3px 7px; border-radius: 3px; }