/*
 * Modeling Winners — Stadium Green theme refresh
 *
 * Applied via Ghost admin → Settings → Code Injection → Site Header.
 * Source-controlled here so edits are reviewable; pushed to Ghost by
 * scripts/apply-mw-theme.ts.
 *
 * Explicitly PRESERVES (per user direction):
 *   - The current site logo (no logomark replacement)
 *   - The current Subscribe-button color (--color-brand stays intact)
 *   - The custom audio-player strip inserted into posts via audio-player-card.ts
 *     (inline styles on that card already take precedence over anything here)
 *
 * Layer strategy: override Brief theme's Tailwind design tokens at :root so
 * the cascade picks them up everywhere without per-component selectors.
 * Only non-token typography/layout quirks need scoped rules.
 */

/* ── Google Fonts ────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@500..800&family=Source+Serif+4:ital,wght@0,400..700;1,400..600&display=swap');
/* Fraunces + JetBrains Mono are used by the /testimonials/ "Letters"
   layout. Loaded site-wide because any future page assigned the
   custom-template-letters template will also need them. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── Stadium Green tokens + Brief token overrides ────────────────────────── */
:root {
  /* Canonical palette */
  --mw-page-bg:   #F3EFE5;  /* bone cream */
  --mw-card-bg:   #FBF7EC;  /* raised surfaces (TOC, pull quotes, signals) */
  --mw-ink:       #141814;  /* primary body text */
  --mw-muted:     #6B6A5E;  /* meta, dates, captions */
  --mw-hairline:  #D8D0BC;  /* rules, borders */
  --mw-green:     #1A3A2B;  /* primary accent — fairway green */
  --mw-green-soft:#E9EFE2;  /* green-tinted bgs (say-quotes) */
  --mw-gold:      #B8923D;  /* secondary accent — wheat gold */

  /* Typography */
  --mw-font-display: "Archivo Narrow", "Barlow Condensed", Oswald, sans-serif;
  --mw-font-body:    "Source Serif 4", "Source Serif Pro", Georgia, serif;

  /* Brief theme tokens — overridden to Stadium Green.
     --color-brand / --color-accent intentionally NOT touched so the
     Subscribe button keeps its current color.                         */
  --color-background:         var(--mw-page-bg);
  --color-background-tone:    var(--mw-card-bg);
  --color-background-reverse: var(--mw-ink);
  --color-background-opac:    rgba(243, 239, 229, 0.75);
  --color-border:             var(--mw-hairline);
  --color-border-reverse:     var(--mw-green);
  --color-typography:         var(--mw-ink);
  --color-typography-content: var(--mw-ink);
  --color-typography-tone:    var(--mw-muted);
  --color-typography-reverse: #F5F2EA;

  /* Fonts — body (Source Serif 4), headings (Archivo Narrow).
     Brief routes both through these vars. */
  --font-body:     var(--mw-font-body);
  --font-headings: var(--mw-font-display);
  --gh-font-heading: var(--mw-font-display);
}

/* ── Body + page-level ──────────────────────────────────────────────────── */
html, body {
  background: var(--mw-page-bg);
}
body {
  color: var(--mw-ink);
  font-family: var(--mw-font-body);
}

/* ── Article content scope — the part Ghost renders from post body ───────── */
.ghost-content {
  font-family: var(--mw-font-body);
  font-size: 17px;
  line-height: 1.68;
  color: var(--mw-ink);
}
.ghost-content p {
  font-family: var(--mw-font-body);
  font-size: 17px;
  line-height: 1.68;
  color: var(--mw-ink);
}

/* Article title — whichever h1 renders the post title */
h1, .post-title, article h1, .ghost-content h1 {
  font-family: var(--mw-font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--mw-ink);
  line-height: 1.02;
}

/* H2 — uppercase display, bold. Big jump in energy vs Brief default. */
.ghost-content h2,
article h2 {
  font-family: var(--mw-font-display);
  font-weight: 800;
  font-size: 31px;
  line-height: 1.02;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--mw-ink);
  margin-top: 2em;
  margin-bottom: 0.6em;
}

/* H3 — same family, smaller */
.ghost-content h3,
article h3 {
  font-family: var(--mw-font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--mw-ink);
  font-size: 20px;
}

/* H4 / H5 / H6 — display family, no uppercase (preserve per-post semantics) */
.ghost-content h4, .ghost-content h5, .ghost-content h6,
article h4, article h5, article h6 {
  font-family: var(--mw-font-display);
  font-weight: 700;
  color: var(--mw-ink);
}

/* Inline emphasis — green italic (replaces the default italic-only) */
.ghost-content em, .ghost-content i {
  color: var(--mw-green);
  font-style: italic;
  font-weight: 500;
}

/* Inline <strong> — keep ink colour but display font for density contrast */
.ghost-content strong, .ghost-content b {
  color: var(--mw-ink);
  font-weight: 700;
}

/* Inline links inside article body — wheat gold, underlined */
.ghost-content a {
  color: var(--mw-gold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(184, 146, 61, 0.5);
}
.ghost-content a:hover {
  color: var(--mw-green);
  text-decoration-color: var(--mw-green);
}

/* Drop cap on first paragraph of a post. First paragraph inside .ghost-content
   is what Brief renders for the lede. Uses the display font in green so the
   first letter carries brand weight. */
.ghost-content > p:first-of-type::first-letter {
  font-family: var(--mw-font-display);
  font-weight: 800;
  font-size: 62px;
  float: left;
  line-height: 0.9;
  margin: 6px 12px 0 0;
  color: var(--mw-green);
}

/* Blockquote — soft brochure card, thick green left rule (Stadium Green spec).
   Different from the inline pull-quote cards published in post body HTML;
   this catches any <blockquote> Ghost generates from > quotes in Markdown. */
.ghost-content blockquote {
  border-left: 4px solid var(--mw-green);
  background: var(--mw-card-bg);
  padding: 24px 28px;
  margin: 32px 0;
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(26, 58, 43, 0.04), 0 8px 24px -12px rgba(26, 58, 43, 0.14);
  font-family: var(--mw-font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  font-style: normal;
  color: var(--mw-ink);
}
.ghost-content blockquote p { font-size: inherit; line-height: inherit; color: inherit; margin: 0; }

/* HR — ornamental separator in the brand rule style */
.ghost-content hr {
  border: 0;
  height: 1px;
  background: var(--mw-hairline);
  margin: 48px 0;
}

/* Meta / date / read-time — Brief uses <time> + various class names */
time,
.post-meta,
.date,
[class*="meta"],
[class*="date"] {
  font-family: var(--mw-font-display);
  letter-spacing: 0.06em;
  color: var(--mw-muted);
}

/* Nav links — display condensed uppercase, but leave colors to Brief's
   token overrides above (so hover states continue to use --color-brand). */
header nav a,
nav[role="navigation"] a,
.site-nav a {
  font-family: var(--mw-font-display);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 13px;
}

/* Tag pills — small rectangular shapes in Stadium Green.
   Brief has its own tag styling; scope to within post/article to avoid
   fighting the tag INDEX page on /tag/. */
article .post-card-tags a,
article [class*="tag"]:not([class*="tagline"]) {
  font-family: var(--mw-font-display);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Image captions ─────────────────────────────────────────────────────── */
.ghost-content figcaption,
.kg-card figcaption {
  font-family: var(--mw-font-body);
  font-style: italic;
  font-size: 13px;
  color: var(--mw-muted);
  line-height: 1.5;
  margin-top: 8px;
}

body.page-about .ghost-content .kg-image-card img.kg-image {
  width: min(50%, 360px);
  max-width: 100%;
}

@media (max-width: 640px) {
  body.page-about .ghost-content .kg-image-card img.kg-image {
    width: min(72%, 280px);
  }
}

/* ── Code — fall back to Brief defaults; just set the color to match ──── */
.ghost-content code, .ghost-content pre {
  background: var(--mw-card-bg);
  color: var(--mw-ink);
  border: 1px solid var(--mw-hairline);
  border-radius: 4px;
}

/* ── Lists inside article ────────────────────────────────────────────────── */
.ghost-content ul, .ghost-content ol {
  padding-left: 1.4em;
}
.ghost-content ul li::marker { color: var(--mw-gold); }
.ghost-content ol li::marker { color: var(--mw-gold); font-family: var(--mw-font-display); font-weight: 700; }

/* ── Footer / author block area ────────────────────────────────────────── */
footer {
  color: var(--mw-muted);
}
footer a:hover { color: var(--mw-green); }

/* ── Post hero / byline (Brief markup targets) ───────────────────────────
   Brief renders:
     [data-post-hero-info]    → date · read-time · category (small meta row)
     <h1>                     → title
     <p>                      → lede
     [data-post-hero-authors] → author list (ul > li > a)
     <figure>                 → feature image

   Stadium Green wraps the meta row in green top+bottom rules to signal the
   byline zone. H1 becomes the big display uppercase title. Lede italic
   muted serif. Author line display uppercase green.                        */
[data-post-hero-info] {
  border-top: 2px solid var(--mw-green);
  border-bottom: 2px solid var(--mw-green);
  padding: 12px 0 !important;
  margin: 4px 0 20px !important;
  font-family: var(--mw-font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mw-muted);
}

/* ── Feature image: half-size on post pages ──────────────────────────────
   Brief renders the post hero feature image full-width via
   <figure class="max-w-content-wide w-full h-full relative"> with an
   <img class="w-full object-cover rounded-theme aspect-16/9 ...">. At
   default sizing it dominates the screen and dwarfs the headline. Cap
   the figure to ~480px (half of Brief's content-wide ~960px) and keep
   it centered. */
.post-template figure.max-w-content-wide,
.post-template [data-post-hero] figure {
  max-width: 480px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
[data-post-hero-info] time,
[data-post-hero-info] span,
[data-post-hero-info] a {
  font-family: inherit;
  letter-spacing: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}
[data-post-hero-info] [data-post-hero-tag] {
  color: var(--mw-gold);
}

[data-post-hero] h1 {
  font-family: var(--mw-font-display);
  font-weight: 800;
  font-size: clamp(24px, 5.9vw, 62px);
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--mw-ink);
}

[data-post-hero] h1 + p {
  font-family: var(--mw-font-body);
  font-style: italic;
  font-size: 19px;
  line-height: 1.45;
  color: var(--mw-muted);
  max-width: 580px;
}

[data-post-hero-authors] a {
  font-family: var(--mw-font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mw-green);
}
[data-post-hero-authors] a:hover { color: var(--mw-gold); }

/* ── Section markers (inserted by the footer JS enhancer) ────────────────
   Structure produced: <div class="mw-section-marker">
                         <span class="num">01</span>
                         <span class="label">THE CALLIGRAPHER'S SERMON</span>
                         <span class="rule"></span>
                         <span class="dot"></span>
                       </div>
   Lives directly above each body H2 (except Signals to Swipe).            */
.mw-section-marker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 42px 0 -4px;
  font-family: var(--mw-font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mw-green);
}
.mw-section-marker .num {
  font-family: ui-monospace, "SFMono-Regular", monospace;
  color: var(--mw-gold);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.mw-section-marker .label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}
.mw-section-marker .rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--mw-hairline);
}
.mw-section-marker .dot {
  flex: 0 0 auto;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mw-gold);
}

/* ── § ornaments (inserted by the footer JS enhancer) ───────────────────── */
.mw-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  /* Margin-top must match the next section-marker's margin-top (42px) so
     the gap above the § matches the gap below it. Brief's prose-theme
     zeros margin-bottom on most flow elements, so the visible gap below
     the ornament comes entirely from the next section-marker's mt. */
  margin: 42px 0;
}

/* The biography pipeline emits `---` markdown between H2 sections, which
   Ghost renders as <hr>. Tailwind prose-lg gives <hr> ~3em top + bottom
   margins (~48px each), which stacks on top of the ornament's own margin
   and produces a much larger gap above the § than below. The § ornament
   is the canonical section break — kill the redundant <hr> entirely. */
.ghost-content hr { display: none; }

/* ── Homepage value-stack card spacing ──────────────────────────────────
   The home-value-stack page renders inside .mw-list-card via the generic
   .mw-richtext wrapper. Browser default paragraph margins leave items
   stacked tight at the top of a tall card, which looks unbalanced next
   to the testimonials card on the right. Bump font + vertical rhythm so
   8 items distribute across the full card height. */
.mw-list-card .mw-richtext p {
  margin: 22px 0;
  font-size: 18px;
  line-height: 1.45;
}
.mw-list-card .mw-richtext > *:first-child { margin-top: 0; }
.mw-list-card .mw-richtext > *:last-child { margin-bottom: 0; }

.mw-ornament .line {
  width: 80px;
  height: 1px;
  background: var(--mw-green);
  opacity: 0.35;
}
.mw-ornament .mark {
  font-family: var(--mw-font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--mw-gold);
}

/* ── Trivia card polish (renderQuizEmailBlock output lands here) ─────────
   The quiz block emits flat <div>s + <a>s with inline Stadium Green styles
   (no nested <table>s — those produced visible row-gap rendering quirks
   on some macOS browsers that headless Chrome did not reproduce). Here we
   add a gold dashes top accent and neutralize Tailwind Typography defaults
   that would otherwise fight the inline styles inside the green card. */
#daily-quiz {
  position: relative;
  margin: 32px auto !important;
  padding-top: 10px;
  /* DO NOT override background here — the inline style on the wrapper is
     the canonical source for the fairway green card surface. */
}
#daily-quiz::before {
  content: "";
  display: block;
  height: 6px;
  max-width: 560px;
  margin: 0 auto 10px auto;
  background-image: repeating-linear-gradient(
    90deg,
    var(--mw-gold) 0 24px,
    transparent 24px 28px
  );
  opacity: 0.7;
}
/* Kill prose-theme defaults on INNER elements only (not the wrapper).
   The blanket rule below targets descendants of #daily-quiz so it can't
   strip the wrapper's own inline background or shadow. */
#daily-quiz div,
#daily-quiz a,
#daily-quiz p,
#daily-quiz span {
  border: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
/* Re-assert the dark inset look on each answer anchor (the inline style
   sets rgba(0,0,0,0.22) but the descendant rule above zeroes anchor bg —
   this selector is more specific and wins). Also restore the inter-row
   gap that the blanket margin-zero rule above killed. */
#daily-quiz a[href^="http"] {
  background: rgba(0, 0, 0, 0.22) !important;
  margin-bottom: 8px !important;
}
/* Last answer anchor: small breathing room before the "Tap your answer" hint */
#daily-quiz a[href^="http"]:last-of-type {
  margin-bottom: 14px !important;
}

/* ── Header wordmark (to the right of the existing logo image) ───────────
   Injected into [data-brand] by the footer JS enhancer. Kept outside the
   logo image so the image stays untouched — the text is a separate span
   appended as the second child of the brand anchor. */
[data-brand] {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
}
/* Keep the logo sized to the two-line wordmark's height (~60 px total:
   28 px title + 2 px gap + ~16 px italic subtitle + leading). Brief's
   Tailwind utility targets set height via --logo-h-* vars, but inside
   a flex row the rendered image was coming out small because --logo-w-*
   isn't defined in the site's existing code injection. Pin both
   height and width explicitly so the image can't collapse. */
[data-brand] img,
[data-brand] picture {
  height: 64px !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto;
}
@media (max-width: 700px) {
  [data-brand] img,
  [data-brand] picture {
    height: 48px !important;
  }
}
[data-brand] .mw-wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  gap: 2px;
  text-align: left;
}
[data-brand] .mw-wordmark strong {
  font-family: var(--mw-font-display);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--mw-ink);
  white-space: nowrap;
  line-height: 1;
}
[data-brand] .mw-wordmark em {
  font-family: var(--mw-font-body);
  font-style: italic;
  font-size: 13px;
  font-weight: 400;
  color: var(--mw-muted);
  white-space: nowrap;
  line-height: 1.2;
}
/* Hide the wordmark on narrow screens so it doesn't push nav items off-
   screen. Logo alone carries the brand on mobile. */
@media (max-width: 700px) {
  [data-brand] .mw-wordmark { display: none; }
}

/* ── Footer refresh ──────────────────────────────────────────────────────
   Brief theme emits `[data-footer-top]` containing a logo, tagline, email
   signup form, "Sign up" nav link, socials, and a giant faded "They won.
   Here's" watermark. We keep the tagline + subscribe form (so readers can
   still join from the post bottom) and hide everything else that the
   poster makes redundant. The poster itself is a `::before` on `<footer>`
   — pure CSS, no JS reflow flash. The copyright strip (`[data-footer-
   bottom]`) below stays visible. */
[data-footer]::before {
  content: "";
  display: block;
  width: 100%;
  max-width: 1280px;
  margin: 48px auto 24px;
  aspect-ratio: 1672 / 941;
  background-image: url('/content/images/2026/04/modelingwinners-poster-v2.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px;
}
@media (max-width: 700px) {
  [data-footer]::before {
    margin: 24px auto 12px;
    border-radius: 4px;
  }
}
[data-footer] [data-brand] { display: none !important; }
[data-footer] [data-footer-nav="secondary"] { display: none !important; }
[data-footer] [data-socials="footer"] { display: none !important; }
[data-footer] [data-footer-bg] { display: none !important; }
[data-footer] [data-footer-top] > hr { display: none !important; }

/* ─────────────────────────────────────────────────────────────────────────
   Reader Letters page (/testimonials/) — editorial press-clipping layout.

   Pairs with theme/brief-mw/custom-template-letters.hbs. The chrome
   (hero, ticker, CTA) lives in the template; this stylesheet styles the
   editable Ghost body inside .mw-letters__grid as a varied mosaic of
   blockquote cards. Variations come from :nth-of-type so the user can
   add/remove/reorder testimonials in Ghost admin and the layout simply
   re-flows.
   ───────────────────────────────────────────────────────────────────── */

.mw-letters-hero,
.mw-letters,
.mw-letters-cta,
.mw-letters-ticker {
  --letters-cream: #f3ede1;
  --letters-cream-2: #ebe3d2;
  --letters-paper: #f8f3e8;
  --letters-ink: #161712;
  --letters-ink-soft: #3a3b33;
  --letters-ink-mute: #6b6c62;
  --letters-rule: #2a2b24;
  --letters-green: #2c4a2e;
  --letters-green-dk: #1c3520;
  --letters-green-lt: #6b8f5a;
  --letters-gold: #c9a24b;
  --letters-stamp: #7a2e1a;
  --letters-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --letters-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
}

/* Page-level cream background — only on the testimonials page. */
body.page-testimonials {
  background: var(--letters-cream) !important;
}
body.page-testimonials [data-post-hero] { display: none; } /* hide Brief default hero */

/* ── Hero ────────────────────────────────────────────────────────────── */
.mw-letters-hero {
  border-bottom: 1px solid var(--letters-rule);
  background: var(--letters-cream);
  padding: 72px 32px 48px;
  color: var(--letters-ink);
}
.mw-letters-hero__inner {
  max-width: 1300px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end;
}
.mw-letters-hero__eyebrow {
  font-family: var(--letters-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--letters-green); margin-bottom: 24px;
  display: flex; align-items: center; gap: 14px;
}
.mw-letters-hero__eyebrow::before {
  content: ""; width: 38px; height: 1px; background: var(--letters-green);
}
.mw-letters-hero__h1 {
  font-family: var(--letters-serif);
  font-weight: 300;
  font-size: clamp(56px, 9vw, 144px);
  line-height: 0.88; letter-spacing: -0.045em;
  margin: 0; color: var(--letters-ink);
  font-variation-settings: "opsz" 144;
}
.mw-letters-hero__h1 em {
  font-style: italic; font-weight: 300; color: var(--letters-green);
}
.mw-letters-hero__kicker {
  font-family: var(--letters-serif);
  font-size: 22px; line-height: 1.4; max-width: 36ch;
  color: var(--letters-ink-soft); font-weight: 400; letter-spacing: -0.01em;
  margin: 0 0 28px;
}
.mw-letters-hero__kicker::first-letter {
  font-size: 1.4em; font-style: italic; color: var(--letters-green);
}
.mw-letters-hero__stats {
  display: grid; grid-template-columns: repeat(3, auto); gap: 40px;
  font-family: var(--letters-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--letters-ink-mute);
}
.mw-letters-hero__stats .n {
  display: block; font-family: var(--letters-serif);
  font-size: 42px; font-weight: 400; color: var(--letters-ink);
  letter-spacing: -0.02em; line-height: 1; margin-bottom: 6px; text-transform: none;
}
@media (max-width: 900px) {
  .mw-letters-hero__inner { grid-template-columns: 1fr; gap: 28px; }
  .mw-letters-hero { padding: 48px 22px 32px; }
}

/* ── Ticker ──────────────────────────────────────────────────────────── */
.mw-letters-ticker {
  background: var(--letters-ink); color: var(--letters-cream);
  border-bottom: 1px solid var(--letters-rule);
  padding: 14px 0; overflow: hidden;
}
.mw-letters-ticker__track {
  display: flex; gap: 56px; white-space: nowrap;
  font-family: var(--letters-serif);
  font-size: 18px; font-style: italic; font-weight: 300;
  animation: mw-letters-scroll 80s linear infinite;
}
.mw-letters-ticker__track .dot { color: var(--letters-green-lt); font-style: normal; }
@keyframes mw-letters-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Mosaic grid ─────────────────────────────────────────────────────── */
.mw-letters {
  background: var(--letters-cream);
  padding: 60px 32px 80px;
  border-bottom: 1px solid var(--letters-rule);
}
.mw-letters__grid {
  max-width: 1300px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px;
  /* Reset Brief prose styling that would interfere */
  color: var(--letters-ink);
}
@media (max-width: 900px) {
  .mw-letters { padding: 40px 18px 56px; }
  .mw-letters__grid { grid-template-columns: repeat(6, 1fr); gap: 14px; }
}

/* Each blockquote becomes a card. We override Brief's prose blockquote
   styling completely inside .mw-letters__grid. */
.mw-letters__grid blockquote {
  background: var(--letters-paper);
  border: 1px solid var(--letters-rule);
  border-radius: 0;
  padding: 28px 30px 26px;
  margin: 0;
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 240px;
  font-family: var(--letters-serif);
  color: var(--letters-ink);
  font-size: 19px; line-height: 1.3; letter-spacing: -0.01em; font-weight: 400;
  transition: transform 0.25s, box-shadow 0.25s;
}
.mw-letters__grid blockquote:hover {
  transform: translate(-2px, -3px);
  box-shadow: 6px 8px 0 var(--letters-ink);
}
/* The italic byline — second text node after the <br> */
.mw-letters__grid blockquote em {
  display: block; margin-top: 18px;
  font-family: var(--letters-mono);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--letters-ink-mute); font-style: normal; font-weight: 500;
}
/* The em-dash before the byline gets stripped of its weight via the
   above rule — keep it but tone it down. */
.mw-letters__grid blockquote em::before { content: ""; }
/* Decorative corner quotation mark */
.mw-letters__grid blockquote::after {
  content: "“";
  position: absolute; top: 6px; right: 18px;
  font-family: var(--letters-serif);
  font-size: 80px; line-height: 0.7;
  color: var(--letters-green); opacity: 0.18;
  font-style: italic; font-weight: 300; pointer-events: none;
}
.mw-letters__grid blockquote br { display: none; } /* the <em> already block-breaks */

/* Vary card widths — repeating 12-col rhythm so any number of quotes
   distributes well. Pattern: lg, sm, md, sm, lg, md, sm, sm, md, lg, sm, md
   (sums to 48 = 4 rows of 12). Repeats every 12 quotes. */
.mw-letters__grid blockquote:nth-of-type(12n+1)  { grid-column: span 5; }
.mw-letters__grid blockquote:nth-of-type(12n+2)  { grid-column: span 3; }
.mw-letters__grid blockquote:nth-of-type(12n+3)  { grid-column: span 4; }
.mw-letters__grid blockquote:nth-of-type(12n+4)  { grid-column: span 3; }
.mw-letters__grid blockquote:nth-of-type(12n+5)  { grid-column: span 5; }
.mw-letters__grid blockquote:nth-of-type(12n+6)  { grid-column: span 4; }
.mw-letters__grid blockquote:nth-of-type(12n+7)  { grid-column: span 3; }
.mw-letters__grid blockquote:nth-of-type(12n+8)  { grid-column: span 3; }
.mw-letters__grid blockquote:nth-of-type(12n+9)  { grid-column: span 4; }
.mw-letters__grid blockquote:nth-of-type(12n+10) { grid-column: span 5; }
.mw-letters__grid blockquote:nth-of-type(12n+11) { grid-column: span 3; }
.mw-letters__grid blockquote:nth-of-type(12n+12) { grid-column: span 4; }

/* Color variants — every 5th gets the deep ink card, every 7th the green.
   Stays paper otherwise. */
.mw-letters__grid blockquote:nth-of-type(5n+3) {
  background: var(--letters-ink); color: var(--letters-cream); border-color: var(--letters-ink);
}
.mw-letters__grid blockquote:nth-of-type(5n+3) em { color: rgba(243,237,225,0.6); }
.mw-letters__grid blockquote:nth-of-type(5n+3)::after { color: var(--letters-cream); opacity: 0.14; }

.mw-letters__grid blockquote:nth-of-type(7n+5) {
  background: var(--letters-green); color: var(--letters-cream); border-color: var(--letters-green-dk);
}
.mw-letters__grid blockquote:nth-of-type(7n+5) em { color: rgba(243,237,225,0.7); }
.mw-letters__grid blockquote:nth-of-type(7n+5)::after { color: var(--letters-cream); opacity: 0.16; }

/* Cream-2 tint variant. Must reset color + em + corner-quote because
   this can overlap with the 5n+3 (ink) and 7n+5 (green) variants
   above; without the reset, a card that matches both the green
   variant AND this one ends up cream-2 background with white text =
   unreadable (Gregory M. was the canary). */
.mw-letters__grid blockquote:nth-of-type(11n+8) {
  background: var(--letters-cream-2);
  color: var(--letters-ink);
  border-color: var(--letters-rule);
}
.mw-letters__grid blockquote:nth-of-type(11n+8) em { color: var(--letters-ink-mute); }
.mw-letters__grid blockquote:nth-of-type(11n+8)::after {
  color: var(--letters-green); opacity: 0.18;
}

/* Bigger text on bigger cards — readable at glance */
.mw-letters__grid blockquote:nth-of-type(12n+1),
.mw-letters__grid blockquote:nth-of-type(12n+5),
.mw-letters__grid blockquote:nth-of-type(12n+10) {
  font-size: 24px; line-height: 1.25; min-height: 280px;
}

/* Mobile: drop everything to span 6 (full width on the 6-col mobile grid) */
@media (max-width: 900px) {
  .mw-letters__grid blockquote { grid-column: span 6 !important; min-height: 200px !important; font-size: 19px !important; }
}

/* ── CTA ─────────────────────────────────────────────────────────────── */
.mw-letters-cta {
  background: var(--letters-ink); color: var(--letters-cream);
  padding: 80px 32px;
}
.mw-letters-cta__inner { max-width: 720px; margin: 0 auto; text-align: center; }
.mw-letters-cta h2 {
  font-family: var(--letters-serif);
  font-weight: 300; font-size: clamp(40px, 6vw, 96px);
  line-height: 0.95; letter-spacing: -0.035em; margin: 0 0 18px;
  color: var(--letters-cream);
}
.mw-letters-cta h2 em { font-style: italic; color: var(--letters-green-lt); font-weight: 300; }
.mw-letters-cta p {
  font-family: var(--letters-serif);
  font-size: 22px; line-height: 1.4;
  color: rgba(243,237,225,0.7); margin: 0 auto 32px; max-width: 42ch;
}
.mw-letters-cta__btn {
  display: inline-block; padding: 16px 28px;
  background: var(--letters-green-lt); color: var(--letters-ink);
  font-family: var(--letters-mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 600; text-decoration: none;
  transition: background 0.2s;
}
.mw-letters-cta__btn:hover { background: var(--letters-gold); }

/* ─────────────────────────────────────────────────────────────────────────
   Topics index page (/tags/) — editorial press-clipping layout.

   Pairs with theme/brief-mw/custom-template-topics.hbs. Server renders
   the A-Z list (the source of truth); JS reads it and builds the Cloud
   and Cluster sections from the same data so new tags auto-appear when
   posts publish. Uses the same Letters palette tokens — re-imported
   under a topics-* prefix to keep the rules self-contained.
   ───────────────────────────────────────────────────────────────────── */

.mw-tags-hero,
.mw-tags-nav,
.mw-tags-cloud,
.mw-tags-clusters,
.mw-tags-az,
.mw-tags-cta {
  --topics-cream: #f3ede1;
  --topics-cream-2: #ebe3d2;
  --topics-paper: #f8f3e8;
  --topics-ink: #161712;
  --topics-ink-soft: #3a3b33;
  --topics-ink-mute: #6b6c62;
  --topics-rule: #2a2b24;
  --topics-green: #2c4a2e;
  --topics-green-dk: #1c3520;
  --topics-green-lt: #6b8f5a;
  --topics-gold: #c9a24b;
  --topics-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --topics-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
}

body.page-tags { background: var(--topics-cream) !important; }
body.page-tags [data-post-hero] { display: none; }

/* ── Hero ────────────────────────────────────────────────────────────── */
.mw-tags-hero {
  border-bottom: 1px solid var(--topics-rule);
  background: var(--topics-cream);
  padding: 72px 32px 52px;
  color: var(--topics-ink);
}
.mw-tags-hero__inner {
  max-width: 1300px; margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: end;
}
.mw-tags-hero__eyebrow {
  font-family: var(--topics-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--topics-green); margin-bottom: 24px;
  display: flex; align-items: center; gap: 14px;
}
.mw-tags-hero__eyebrow::before {
  content: ""; width: 38px; height: 1px; background: var(--topics-green);
}
.mw-tags-hero__h1 {
  font-family: var(--topics-serif);
  font-weight: 300; font-size: clamp(56px, 9vw, 144px);
  line-height: 0.88; letter-spacing: -0.045em; margin: 0;
  color: var(--topics-ink); font-variation-settings: "opsz" 144;
}
.mw-tags-hero__h1 em { font-style: italic; font-weight: 300; color: var(--topics-green); }
.mw-tags-hero__kicker {
  font-family: var(--topics-serif);
  font-size: 22px; line-height: 1.4; max-width: 36ch;
  color: var(--topics-ink-soft); font-weight: 400; letter-spacing: -0.01em;
  margin: 0 0 28px;
}
.mw-tags-hero__kicker::first-letter {
  font-size: 1.4em; font-style: italic; color: var(--topics-green);
}
.mw-tags-hero__stats {
  display: grid; grid-template-columns: repeat(4, auto); gap: 36px;
  font-family: var(--topics-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--topics-ink-mute);
}
.mw-tags-hero__stats .n {
  display: block; font-family: var(--topics-serif);
  font-size: 40px; font-weight: 400; color: var(--topics-ink);
  letter-spacing: -0.02em; line-height: 1; margin-bottom: 6px; text-transform: none;
}
@media (max-width: 900px) {
  .mw-tags-hero__inner { grid-template-columns: 1fr; gap: 28px; }
  .mw-tags-hero { padding: 48px 22px 32px; }
  .mw-tags-hero__stats { grid-template-columns: repeat(2, auto); gap: 24px; }
}

/* ── View nav ────────────────────────────────────────────────────────── */
.mw-tags-nav {
  background: var(--topics-cream);
  border-bottom: 1px solid var(--topics-rule);
  padding: 18px 32px;
  display: flex; align-items: center; gap: 16px;
  font-family: var(--topics-mono);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
}
.mw-tags-nav .label { color: var(--topics-ink-mute); margin-right: 8px; }
.mw-tags-nav__link {
  border: 1px solid var(--topics-rule);
  padding: 8px 14px; color: var(--topics-ink); text-decoration: none;
  transition: all 0.15s;
}
.mw-tags-nav__link:hover { background: var(--topics-ink); color: var(--topics-cream); }

/* ── Cloud view ──────────────────────────────────────────────────────── */
.mw-tags-cloud {
  background: var(--topics-cream);
  padding: 80px 32px 100px;
  border-bottom: 1px solid var(--topics-rule);
  scroll-margin-top: 40px;
}
.mw-tags-cloud__inner {
  max-width: 1300px; margin: 0 auto;
  display: flex; flex-wrap: wrap;
  gap: 4px 32px; align-items: center;
  font-family: var(--topics-serif);
}
.mw-tags-cloud__tag {
  display: inline-block;
  font-weight: 300; color: var(--topics-ink); letter-spacing: -0.02em;
  text-decoration: none; line-height: 1.1; white-space: nowrap;
  padding: 12px 0;
  font-variation-settings: "opsz" 144;
  transition: color 0.15s, font-style 0.15s;
}
.mw-tags-cloud__tag:hover { color: var(--topics-green); font-style: italic; }
.mw-tags-cloud__tag .sup,
.mw-tags-cloud__tag sup {
  font-family: var(--topics-mono);
  font-size: 11px; letter-spacing: 0.05em; vertical-align: super;
  color: var(--topics-green); margin-left: 4px;
  font-style: normal; font-weight: 500; top: -0.4em; position: relative;
}
.mw-tags-cloud__tag.is-xl { font-size: clamp(48px, 6vw, 96px); }
.mw-tags-cloud__tag.is-lg { font-size: clamp(36px, 4.5vw, 64px); }
.mw-tags-cloud__tag.is-md { font-size: clamp(26px, 3vw, 44px); }
.mw-tags-cloud__tag.is-sm { font-size: clamp(18px, 2vw, 28px); color: var(--topics-ink-soft); }
.mw-tags-cloud__tag.is-featured { color: var(--topics-green); font-style: italic; }

/* ── Clusters view ───────────────────────────────────────────────────── */
.mw-tags-clusters {
  background: var(--topics-cream);
  padding: 60px 32px 80px;
  border-bottom: 1px solid var(--topics-rule);
  scroll-margin-top: 40px;
  max-width: 1300px; margin: 0 auto;
}
.mw-tags-cluster {
  display: grid; grid-template-columns: 340px 1fr;
  gap: 56px; padding: 56px 0;
  border-top: 1px solid var(--topics-rule);
  align-items: start;
}
.mw-tags-cluster:first-child { border-top: none; padding-top: 20px; }

.mw-tags-cluster__head .num {
  font-family: var(--topics-mono);
  font-size: 11px; letter-spacing: 0.15em; color: var(--topics-green);
  margin-bottom: 10px; display: block;
}
.mw-tags-cluster__head h3 {
  font-family: var(--topics-serif);
  font-weight: 300; font-style: italic;
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 0.95; letter-spacing: -0.03em;
  margin: 0 0 18px; color: var(--topics-ink);
}
.mw-tags-cluster__head h3 b {
  font-style: normal; font-weight: 500; color: var(--topics-green);
}
.mw-tags-cluster__head p {
  font-family: var(--topics-serif);
  font-size: 17px; line-height: 1.5;
  color: var(--topics-ink-soft); margin: 0 0 18px; max-width: 34ch;
}
.mw-tags-cluster__head .stat {
  font-family: var(--topics-mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--topics-ink-mute);
  display: flex; gap: 18px; padding-top: 14px;
  border-top: 1px solid var(--topics-rule);
}
.mw-tags-cluster__head .stat b { color: var(--topics-ink); font-weight: 600; }

.mw-tags-cluster__cells {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0;
  border-top: 1px solid var(--topics-rule);
  border-left: 1px solid var(--topics-rule);
}
.mw-tags-cell {
  border-right: 1px solid var(--topics-rule);
  border-bottom: 1px solid var(--topics-rule);
  padding: 18px 20px;
  background: var(--topics-paper);
  color: var(--topics-ink);
  text-decoration: none;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 120px; position: relative; overflow: hidden;
  transition: background 0.2s, color 0.2s;
}
.mw-tags-cell::after {
  content: "→";
  position: absolute; top: 14px; right: 16px;
  font-family: var(--topics-serif); color: var(--topics-ink-mute);
  opacity: 0; transition: opacity 0.2s, right 0.2s;
}
.mw-tags-cell:hover {
  background: var(--topics-green); color: var(--topics-cream);
}
.mw-tags-cell:hover .mw-tags-cell__meta { color: rgba(243,237,225,0.65); }
.mw-tags-cell:hover .mw-tags-cell__meta .c { color: var(--topics-cream); }
.mw-tags-cell:hover::after { opacity: 1; color: var(--topics-cream); right: 12px; }

.mw-tags-cell__meta {
  font-family: var(--topics-mono);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--topics-ink-mute);
  display: flex; gap: 8px; margin-bottom: 12px;
}
.mw-tags-cell__meta .c { color: var(--topics-green); font-weight: 600; }
.mw-tags-cell__name {
  font-family: var(--topics-serif);
  font-size: 22px; font-weight: 400;
  letter-spacing: -0.02em; line-height: 1.1;
  font-variation-settings: "opsz" 72;
}
.mw-tags-cell.is-featured {
  background: var(--topics-ink); color: var(--topics-cream);
  grid-column: span 2; min-height: 160px;
}
.mw-tags-cell.is-featured .mw-tags-cell__meta { color: rgba(243,237,225,0.6); }
.mw-tags-cell.is-featured .mw-tags-cell__meta .c { color: var(--topics-gold); }
.mw-tags-cell.is-featured .mw-tags-cell__name {
  font-size: clamp(26px, 2.6vw, 36px); font-style: italic; font-weight: 300;
}
.mw-tags-cell.is-featured:hover { background: var(--topics-green-dk); }

@media (max-width: 900px) {
  .mw-tags-cluster { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; }
  .mw-tags-cluster__cells { grid-template-columns: 1fr; }
  .mw-tags-cell.is-featured { grid-column: span 1; }
}

/* ── A-Z index ───────────────────────────────────────────────────────── */
.mw-tags-az {
  background: var(--topics-cream);
  padding: 60px 32px 80px;
  scroll-margin-top: 40px;
  max-width: 1300px; margin: 0 auto;
}
.mw-tags-az__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 32px; padding-bottom: 28px;
}
.mw-tags-az__head h2 {
  font-family: var(--topics-serif);
  font-weight: 300; font-size: clamp(40px, 4vw, 56px);
  letter-spacing: -0.03em; line-height: 1; margin: 0;
}
.mw-tags-az__head h2 em { color: var(--topics-green); font-weight: 300; }
.mw-tags-az__head .mw-tags-az__tagline {
  font-family: var(--topics-mono);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--topics-ink-mute); max-width: 30ch; text-align: right;
}

.mw-tags-az__list {
  list-style: none; padding: 0; margin: 0;
  border-top: 1px solid var(--topics-rule);
}
.mw-tags-az__divider {
  display: block; padding: 32px 0 16px;
  font-family: var(--topics-serif);
  font-style: italic; font-weight: 300;
  font-size: clamp(48px, 4vw, 80px);
  line-height: 0.85; letter-spacing: -0.04em;
  color: var(--topics-green);
  border-bottom: 1px dotted var(--topics-rule);
  margin-bottom: 8px;
}
.mw-tags-az__entry {
  display: flex; align-items: baseline; gap: 14px;
  padding: 10px 0;
  font-family: var(--topics-serif);
  font-size: 22px; font-weight: 400; letter-spacing: -0.01em;
  color: var(--topics-ink); text-decoration: none;
  transition: color 0.15s;
}
.mw-tags-az__entry:hover { color: var(--topics-green); font-style: italic; }
.mw-tags-az__name { flex: 0 0 auto; }
.mw-tags-az__dots {
  flex: 1; min-width: 20px;
  border-bottom: 1px dotted var(--topics-ink-mute);
  transform: translateY(-4px); opacity: 0.4;
}
.mw-tags-az__count {
  font-family: var(--topics-mono);
  font-size: 11px; color: var(--topics-green);
  font-weight: 500; letter-spacing: 0.05em;
}

@media (max-width: 900px) {
  .mw-tags-az__head { flex-direction: column; align-items: flex-start; }
  .mw-tags-az__head .mw-tags-az__tagline { text-align: left; }
}

/* ── CTA ─────────────────────────────────────────────────────────────── */
.mw-tags-cta {
  background: var(--topics-ink); color: var(--topics-cream);
  padding: 80px 32px;
}
.mw-tags-cta__inner { max-width: 720px; margin: 0 auto; text-align: center; }
.mw-tags-cta h2 {
  font-family: var(--topics-serif);
  font-weight: 300; font-size: clamp(40px, 6vw, 96px);
  line-height: 0.95; letter-spacing: -0.035em; margin: 0 0 18px;
  color: var(--topics-cream);
}
.mw-tags-cta h2 em { font-style: italic; color: var(--topics-green-lt); font-weight: 300; }
.mw-tags-cta p {
  font-family: var(--topics-serif);
  font-size: 22px; line-height: 1.4;
  color: rgba(243,237,225,0.7); margin: 0 auto 32px; max-width: 42ch;
}
.mw-tags-cta__btn {
  display: inline-block; padding: 16px 28px;
  background: var(--topics-green-lt); color: var(--topics-ink);
  font-family: var(--topics-mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 600; text-decoration: none;
  transition: background 0.2s;
}
.mw-tags-cta__btn:hover { background: var(--topics-gold); }

/* ─────────────────────────────────────────────────────────────────────────
   Pricing page (/pricing/) — full editorial layout in dark green.

   Pairs with theme/brief-mw/custom-template-pricing.hbs. All rules are
   scoped under .mw-pricing-page so the dark theme + generic class names
   (.tier, .price, .compare, .faq, etc.) can't leak into Brief's other
   pages. Only body-level overrides escape the wrapper to push Brief's
   default page-hero out of the way.
   ───────────────────────────────────────────────────────────────────── */

body.page-pricing { background: #0e1410 !important; color: #e9efe9 !important; }
body.page-pricing [data-post-hero],
body.page-pricing [data-newsletters],
body.page-pricing [data-section="recommendations"] { display: none !important; }

.mw-pricing-page {
  --pp-bg: #0e1410;
  --pp-bg-2: #131a15;
  --pp-panel: #1a221c;
  --pp-panel-2: #222b24;
  --pp-line: rgba(255,255,255,0.08);
  --pp-line-2: rgba(255,255,255,0.14);
  --pp-ink: #e9efe9;
  --pp-ink-dim: #a7b3a8;
  --pp-ink-faint: #7a8a7c;
  --pp-green: #3ec27a;
  --pp-green-2: #5fd996;
  --pp-green-deep: #1f7a47;
  --pp-gold: #d6b667;
  --pp-warn: #e9b15c;
  --pp-max: 1180px;
  --pp-r: 14px;
  --pp-r-lg: 22px;
  --pp-serif: 'Fraunces', Georgia, serif;
  --pp-mono: 'JetBrains Mono', ui-monospace, monospace;

  background: var(--pp-bg);
  color: var(--pp-ink);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
  padding-bottom: 24px;
}
.mw-pricing-page * { box-sizing: border-box; }
.mw-pricing-page a { color: inherit; text-decoration: none; }
.mw-pricing-page b { font-weight: 600; }

/* Heading reset — the global h1/h2/h3 rules higher in this file
   force dark ink + uppercase + Archivo Narrow (intended for light
   pages). Inside the dark pricing page we want Fraunces, mixed case,
   and the cream `--pp-ink` color. Section-specific rules below add
   font-size / weight / letter-spacing per heading; this just makes
   sure colors and fonts default to the dark-page palette. */
.mw-pricing-page h1,
.mw-pricing-page h2,
.mw-pricing-page h3,
.mw-pricing-page h4 {
  color: var(--pp-ink);
  font-family: var(--pp-serif);
  text-transform: none;
  letter-spacing: -0.01em;
}
.mw-pricing-page h1 em,
.mw-pricing-page h2 em,
.mw-pricing-page h3 em { color: var(--pp-green-2); font-style: italic; }

/* Hero ──────────────────────────────────────────────────────────────── */
.mw-pricing-page .hero { max-width: var(--pp-max); margin: 0 auto; padding: 64px 24px 28px; text-align: center; }
.mw-pricing-page .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px; border: 1px solid var(--pp-line-2); border-radius: 999px;
  font-size: 12px; color: var(--pp-ink-dim); font-family: var(--pp-mono);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.mw-pricing-page .eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--pp-green);
  box-shadow: 0 0 0 4px rgba(62,194,122,0.18);
}
.mw-pricing-page .hero h1.title {
  font-weight: 500;
  letter-spacing: -0.025em; font-size: clamp(40px, 6.2vw, 76px);
  line-height: 1.02; margin: 18px auto 16px; max-width: 18ch; text-wrap: balance;
}
.mw-pricing-page .hero h1.title em { font-weight: 400; }
.mw-pricing-page .hero .lede {
  max-width: 58ch; margin: 0 auto;
  color: var(--pp-ink-dim); font-size: 18px; line-height: 1.55; text-wrap: pretty;
}

.mw-pricing-page .billing {
  display: inline-flex; margin: 30px auto 0;
  background: var(--pp-panel); border: 1px solid var(--pp-line);
  border-radius: 999px; padding: 5px; font-size: 14px;
}
.mw-pricing-page .billing button {
  appearance: none; background: transparent; border: 0;
  color: var(--pp-ink-dim); font-weight: 600;
  padding: 9px 20px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit; font-size: 14px;
}
.mw-pricing-page .billing button.on { background: var(--pp-ink); color: var(--pp-bg); }
.mw-pricing-page .billing .save {
  font-size: 11px; background: rgba(62,194,122,0.18);
  color: var(--pp-green-2); padding: 2px 7px; border-radius: 999px;
  font-family: var(--pp-mono); letter-spacing: 0.04em;
}
.mw-pricing-page .billing button.on .save { background: rgba(14,20,16,0.18); color: var(--pp-green-deep); }

/* Buttons ─────────────────────────────────────────────────────────────── */
.mw-pricing-page .btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 10px 16px; border-radius: 999px;
  font-weight: 600; font-size: 14px; border: 1px solid transparent;
  cursor: pointer; transition: all .15s ease; white-space: nowrap;
  font-family: inherit;
}
.mw-pricing-page .btn-ghost { color: var(--pp-ink-dim); border-color: var(--pp-line-2); }
.mw-pricing-page .btn-ghost:hover { color: var(--pp-ink); border-color: var(--pp-ink-dim); }
.mw-pricing-page .btn-primary { background: var(--pp-green); color: var(--pp-bg); }
.mw-pricing-page .btn-primary:hover { background: var(--pp-green-2); }
.mw-pricing-page .btn-outline { border-color: var(--pp-line-2); color: var(--pp-ink); }
.mw-pricing-page .btn-outline:hover { border-color: var(--pp-ink); }
.mw-pricing-page .btn-lg { padding: 14px 22px; font-size: 15px; }
.mw-pricing-page .btn-block { width: 100%; }

/* Tiers ──────────────────────────────────────────────────────────────── */
.mw-pricing-page .tiers {
  max-width: var(--pp-max); margin: 36px auto 0;
  padding: 0 24px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; align-items: stretch;
}
.mw-pricing-page .tier {
  position: relative; background: var(--pp-panel);
  border: 1px solid var(--pp-line); border-radius: var(--pp-r-lg);
  padding: 26px 22px 24px;
  display: flex; flex-direction: column; gap: 18px;
  transition: transform .25s ease, border-color .25s ease;
}
.mw-pricing-page .tier:hover { border-color: var(--pp-line-2); }
.mw-pricing-page .tier .tier-name {
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--pp-ink-dim);
}
.mw-pricing-page .tier h3 {
  font-family: var(--pp-serif); font-weight: 500;
  font-size: 22px; margin: 0; letter-spacing: -0.01em;
}
.mw-pricing-page .price { display: flex; align-items: baseline; gap: 6px; }
.mw-pricing-page .price .amt {
  font-family: var(--pp-serif); font-weight: 500;
  font-size: 48px; letter-spacing: -0.03em; line-height: 1;
}
.mw-pricing-page .price .per { color: var(--pp-ink-faint); font-size: 14px; }
.mw-pricing-page .price .strike {
  color: var(--pp-ink-faint); text-decoration: line-through;
  font-size: 14px; margin-left: 6px;
}
.mw-pricing-page .pos { font-size: 14px; color: var(--pp-ink-dim); min-height: 42px; margin: 0; }
.mw-pricing-page .tier ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 9px;
  font-size: 14px; color: var(--pp-ink);
}
/* Inline text flow with an absolutely-positioned icon. Earlier
   attempts:
     • flex + gap:10px → every text node + <b> became a flex item
       with a 10px gap between them, fragmenting words.
     • grid 16px/1fr → each direct child got its own cell, dumping
       non-bold text into column 1 (16px) and wrapping one word per
       line.
   Plain block flow with padding-left + absolute icon lets bold spans
   inline normally and lets the text wrap on word boundaries. */
.mw-pricing-page .tier li {
  position: relative;
  padding-left: 26px;
  line-height: 1.4;
}
.mw-pricing-page .tier li .ck {
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
}
.mw-pricing-page .tier .cta { margin-top: auto; padding-top: 6px; }
.mw-pricing-page .tier .micro {
  font-size: 11.5px; color: var(--pp-ink-faint);
  text-align: center; font-family: var(--pp-mono);
  letter-spacing: 0.03em; margin: 8px 0 0;
}

.mw-pricing-page .tier.featured {
  background: linear-gradient(180deg, #1f3a28 0%, #172a1d 100%);
  border-color: rgba(62,194,122,0.35);
  box-shadow: 0 0 0 1px rgba(62,194,122,0.18), 0 24px 60px -28px rgba(62,194,122,0.35);
  transform: translateY(-8px);
}
.mw-pricing-page .tier.featured .tier-name { color: var(--pp-green-2); }
.mw-pricing-page .tier.featured .ribbon {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--pp-green); color: var(--pp-bg);
  padding: 5px 12px; border-radius: 999px;
  font-size: 11px; font-family: var(--pp-mono);
  letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 700; white-space: nowrap;
}
.mw-pricing-page .tier.founder {
  background: linear-gradient(180deg, #241f15 0%, #1a1611 100%);
  border-color: rgba(214,182,103,0.3);
}
.mw-pricing-page .tier.founder .tier-name { color: var(--pp-gold); }
.mw-pricing-page .tier.founder .ribbon {
  position: absolute; top: 14px; right: 14px;
  font-family: var(--pp-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--pp-gold); border: 1px solid rgba(214,182,103,0.4);
  padding: 3px 8px; border-radius: 999px;
}

/* Trust strip ─────────────────────────────────────────────────────────── */
.mw-pricing-page .trust {
  max-width: var(--pp-max); margin: 48px auto 0; padding: 0 24px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--pp-line);
  border-bottom: 1px solid var(--pp-line);
}
.mw-pricing-page .trust > div {
  padding: 22px 18px; border-right: 1px solid var(--pp-line);
  display: flex; flex-direction: column; gap: 6px;
}
.mw-pricing-page .trust > div:last-child { border-right: 0; }
.mw-pricing-page .trust .num {
  font-family: var(--pp-serif); font-size: 32px;
  letter-spacing: -0.02em; line-height: 1;
}
.mw-pricing-page .trust .num em { color: var(--pp-green-2); font-style: normal; }
.mw-pricing-page .trust .lbl { font-size: 13px; color: var(--pp-ink-dim); line-height: 1.4; }

/* Sections ────────────────────────────────────────────────────────────── */
.mw-pricing-page .section { max-width: var(--pp-max); margin: 0 auto; padding: 80px 24px 0; }
.mw-pricing-page .section-head {
  display: flex; align-items: end; justify-content: space-between;
  gap: 24px; margin-bottom: 28px; flex-wrap: wrap;
}
.mw-pricing-page .section-head h2 {
  font-family: var(--pp-serif); font-weight: 500;
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.02em; margin: 0; color: var(--pp-ink);
}
.mw-pricing-page .section-head p {
  color: var(--pp-ink-dim); max-width: 46ch; margin: 0;
  font-size: 15px; line-height: 1.55;
}

/* Compare table ───────────────────────────────────────────────────────── */
.mw-pricing-page .table-wrap {
  border: 1px solid var(--pp-line); border-radius: var(--pp-r-lg);
  overflow: hidden; background: var(--pp-panel);
}
.mw-pricing-page table.compare {
  width: 100%; border-collapse: collapse; font-size: 14.5px;
  color: var(--pp-ink);
}
.mw-pricing-page table.compare thead th {
  position: sticky; top: 0; z-index: 5; background: var(--pp-panel);
  text-align: left; padding: 18px 18px 14px;
  font-weight: 600; font-size: 13px; color: var(--pp-ink-dim);
  letter-spacing: 0.04em; text-transform: uppercase;
  border-bottom: 1px solid var(--pp-line);
}
.mw-pricing-page table.compare thead th .h-name {
  display: block; font-family: var(--pp-serif);
  text-transform: none; letter-spacing: -0.01em;
  color: var(--pp-ink); font-size: 18px; font-weight: 500; margin-bottom: 2px;
}
.mw-pricing-page table.compare thead th .h-price {
  display: block; color: var(--pp-ink-faint);
  font-size: 12px; font-family: var(--pp-mono);
  letter-spacing: 0.02em; font-weight: 500; text-transform: none;
}
.mw-pricing-page table.compare th.featured-col,
.mw-pricing-page table.compare td.featured-col {
  background: rgba(62,194,122,0.06);
  border-left: 1px solid rgba(62,194,122,0.22);
  border-right: 1px solid rgba(62,194,122,0.22);
}
.mw-pricing-page table.compare thead th.featured-col .h-name { color: var(--pp-green-2); }
.mw-pricing-page table.compare tbody th {
  text-align: left; padding: 14px 18px; font-weight: 500;
  color: var(--pp-ink); background: var(--pp-bg-2);
  border-right: 1px solid var(--pp-line);
  font-size: 14px; width: 30%;
}
.mw-pricing-page table.compare tbody td {
  padding: 14px 18px; color: var(--pp-ink-dim);
  border-bottom: 1px solid var(--pp-line); vertical-align: middle;
}
.mw-pricing-page table.compare tbody tr:last-child td,
.mw-pricing-page table.compare tbody tr:last-child th { border-bottom: 0; }
.mw-pricing-page table.compare tbody td.yes { color: var(--pp-ink); }
.mw-pricing-page table.compare .pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(62,194,122,0.12); color: var(--pp-green-2);
  font-size: 12px; font-family: var(--pp-mono);
  letter-spacing: 0.02em; font-weight: 500;
}
.mw-pricing-page table.compare .no { color: var(--pp-ink-faint); }
.mw-pricing-page table.compare .check { color: var(--pp-green-2); margin-right: 4px; }
.mw-pricing-page table.compare .group-row th {
  background: var(--pp-bg); color: var(--pp-ink-faint);
  font-family: var(--pp-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 14px 18px; font-weight: 500;
}
.mw-pricing-page table.compare .row-foot td { padding: 18px; }
.mw-pricing-page table.compare .row-foot .featured-col { background: rgba(62,194,122,0.1); }

/* Reviews ─────────────────────────────────────────────────────────────── */
.mw-pricing-page .reviews { max-width: var(--pp-max); margin: 0 auto; padding: 80px 24px 0; }
.mw-pricing-page .review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mw-pricing-page .review {
  background: var(--pp-panel); border: 1px solid var(--pp-line);
  border-radius: var(--pp-r-lg); padding: 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.mw-pricing-page .review .stars { color: var(--pp-green-2); letter-spacing: 2px; font-size: 14px; }
.mw-pricing-page .review blockquote {
  font-family: var(--pp-serif); font-size: 18px; line-height: 1.4;
  margin: 0; letter-spacing: -0.005em; color: var(--pp-ink);
  border: 0; padding: 0; background: none;
}
.mw-pricing-page .review .who { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.mw-pricing-page .review .who .av {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--pp-panel-2); display: grid; place-items: center;
  font-size: 13px; color: var(--pp-ink-dim); font-family: var(--pp-mono);
}
.mw-pricing-page .review .who .name { font-size: 14px; font-weight: 500; color: var(--pp-ink); }
.mw-pricing-page .review .who .role { font-size: 12.5px; color: var(--pp-ink-faint); }

/* Donation ────────────────────────────────────────────────────────────── */
.mw-pricing-page .donate { max-width: var(--pp-max); margin: 80px auto 0; padding: 0 24px; }
.mw-pricing-page .donate-card {
  position: relative;
  background: linear-gradient(135deg, #1a221c 0%, #1a221c 55%, #1f3a28 100%);
  border: 1px solid var(--pp-line); border-radius: var(--pp-r-lg);
  padding: 40px;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center;
  overflow: hidden;
}
.mw-pricing-page .donate-card::after {
  content: ""; position: absolute; right: -80px; top: -80px;
  width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(62,194,122,0.18), transparent 70%);
  pointer-events: none;
}
.mw-pricing-page .donate-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--pp-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--pp-green-2); margin-bottom: 14px;
}
.mw-pricing-page .donate-eyebrow::before {
  content: ""; width: 18px; height: 1px; background: var(--pp-green-2);
}
.mw-pricing-page .donate h3 {
  font-family: var(--pp-serif); font-weight: 500;
  font-size: 32px; line-height: 1.1; letter-spacing: -0.02em;
  margin: 0 0 12px; text-wrap: balance; color: var(--pp-ink);
}
.mw-pricing-page .donate h3 em { font-style: italic; color: var(--pp-green-2); }
.mw-pricing-page .donate p.donate-lede {
  color: var(--pp-ink-dim); font-size: 15px; line-height: 1.55;
  margin: 0 0 16px; max-width: 42ch;
}
.mw-pricing-page .donate-meta {
  display: flex; gap: 18px;
  font-family: var(--pp-mono); font-size: 12px;
  color: var(--pp-ink-faint); letter-spacing: 0.02em;
}
.mw-pricing-page .donate-meta b { color: var(--pp-ink); font-weight: 600; }
.mw-pricing-page .donate-form {
  position: relative; background: rgba(14,20,16,0.6);
  border: 1px solid var(--pp-line-2); border-radius: 18px;
  padding: 22px;
  display: flex; flex-direction: column; gap: 14px;
  backdrop-filter: blur(6px);
}
.mw-pricing-page .donate-form-label {
  font-size: 13px; font-weight: 600; color: var(--pp-ink-dim);
  font-family: var(--pp-mono); letter-spacing: 0.04em; text-transform: uppercase;
}
.mw-pricing-page .donate-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mw-pricing-page .donate-amounts button {
  appearance: none; background: transparent;
  border: 1px solid var(--pp-line-2); color: var(--pp-ink);
  padding: 12px 0; border-radius: 10px;
  font-family: var(--pp-serif); font-size: 18px; font-weight: 500;
  letter-spacing: -0.01em; cursor: pointer; transition: all .15s;
}
.mw-pricing-page .donate-amounts button:hover { border-color: var(--pp-ink-dim); }
.mw-pricing-page .donate-amounts button.on { background: var(--pp-green); border-color: var(--pp-green); color: var(--pp-bg); }
.mw-pricing-page .donate-custom {
  display: flex; align-items: center; gap: 10px;
  background: rgba(14,20,16,0.7);
  border: 1px solid var(--pp-line-2); border-radius: 10px; padding: 0 14px;
}
.mw-pricing-page .donate-custom .cur { color: var(--pp-ink-faint); font-family: var(--pp-serif); font-size: 20px; }
.mw-pricing-page .donate-custom input {
  flex: 1; background: transparent; border: 0; outline: 0;
  color: var(--pp-ink);
  font-family: var(--pp-serif); font-size: 22px; letter-spacing: -0.02em;
  padding: 14px 0; font-weight: 500;
}
.mw-pricing-page .donate-custom input::placeholder { color: var(--pp-ink-faint); }
.mw-pricing-page .donate-freq {
  display: flex; gap: 6px;
  background: var(--pp-bg-2); border: 1px solid var(--pp-line);
  border-radius: 999px; padding: 4px;
}
.mw-pricing-page .donate-freq button {
  flex: 1; appearance: none; background: transparent; border: 0;
  color: var(--pp-ink-dim); font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 600; padding: 8px 0;
  border-radius: 999px; cursor: pointer;
}
.mw-pricing-page .donate-freq button.on { background: var(--pp-ink); color: var(--pp-bg); }
.mw-pricing-page .donate-foot {
  font-size: 12px; color: var(--pp-ink-faint);
  font-family: var(--pp-mono); letter-spacing: 0.02em;
  text-align: center; margin-top: 2px;
}

/* Guarantee ───────────────────────────────────────────────────────────── */
.mw-pricing-page .guarantee { max-width: var(--pp-max); margin: 64px auto 0; padding: 0 24px; }
.mw-pricing-page .guarantee-card {
  background: linear-gradient(180deg, #1a221c 0%, #141a16 100%);
  border: 1px solid var(--pp-line); border-radius: var(--pp-r-lg);
  padding: 32px;
  display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center;
}
.mw-pricing-page .seal {
  width: 84px; height: 84px; border-radius: 50%;
  border: 2px dashed rgba(62,194,122,0.45);
  display: grid; place-items: center;
  color: var(--pp-green-2); font-family: var(--pp-serif);
  font-size: 14px; line-height: 1.05; text-align: center;
}
.mw-pricing-page .guarantee h3 {
  font-family: var(--pp-serif); font-weight: 500;
  font-size: 24px; margin: 0 0 6px;
  letter-spacing: -0.01em; color: var(--pp-ink);
}
.mw-pricing-page .guarantee p {
  margin: 0; color: var(--pp-ink-dim);
  font-size: 15px; line-height: 1.5; max-width: 62ch;
}

/* Editable notes (Ghost page body) ────────────────────────────────────── */
.mw-pricing-page .mw-pricing-notes {
  max-width: var(--pp-max); margin: 0 auto; padding: 64px 24px 0;
}
.mw-pricing-page .mw-pricing-notes__inner:empty { display: none; }
.mw-pricing-page .mw-pricing-notes__inner {
  background: var(--pp-panel); border: 1px solid var(--pp-line);
  border-radius: var(--pp-r-lg); padding: 28px;
  font-size: 15px; line-height: 1.6; color: var(--pp-ink-dim);
}
.mw-pricing-page .mw-pricing-notes__inner h2,
.mw-pricing-page .mw-pricing-notes__inner h3 {
  font-family: var(--pp-serif); color: var(--pp-ink); margin-top: 0;
}
.mw-pricing-page .mw-pricing-notes__inner a { color: var(--pp-green-2); }
.mw-pricing-page [data-pricing-copy-source] { display: none !important; }
.mw-pricing-page .mw-pricing-notes:has([data-pricing-copy-source]) { padding: 0; }
.mw-pricing-page .mw-pricing-notes__inner:has([data-pricing-copy-source]) { display: none; }

/* FAQ ─────────────────────────────────────────────────────────────────── */
.mw-pricing-page .faq { max-width: var(--pp-max); margin: 0 auto; padding: 80px 24px 0; }
.mw-pricing-page .faq-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; align-items: start; }
.mw-pricing-page .faq h2.serif {
  font-family: var(--pp-serif); font-weight: 500;
  font-size: 36px; letter-spacing: -0.02em;
  margin: 0 0 14px; color: var(--pp-ink);
}
.mw-pricing-page .faq .faq-lede {
  color: var(--pp-ink-dim); font-size: 15px; line-height: 1.55; margin: 0;
}
.mw-pricing-page .faq .faq-email {
  color: var(--pp-ink-faint); font-size: 13px;
  margin: 18px 0 0; font-family: var(--pp-mono);
}
.mw-pricing-page .faq .faq-email a { color: var(--pp-green-2); }
.mw-pricing-page details.q { border-bottom: 1px solid var(--pp-line); padding: 18px 0; cursor: pointer; }
.mw-pricing-page details.q:first-of-type { border-top: 1px solid var(--pp-line); }
.mw-pricing-page details.q summary {
  list-style: none; display: flex; justify-content: space-between; gap: 24px;
  font-family: var(--pp-serif); font-size: 19px; font-weight: 500;
  letter-spacing: -0.01em; color: var(--pp-ink);
}
.mw-pricing-page details.q summary::-webkit-details-marker { display: none; }
.mw-pricing-page details.q summary::after {
  content: "+"; color: var(--pp-ink-faint);
  font-family: 'Inter', sans-serif; font-weight: 300; font-size: 24px;
  line-height: 1; transition: transform .2s;
}
.mw-pricing-page details.q[open] summary::after { transform: rotate(45deg); }
.mw-pricing-page details.q .ans {
  color: var(--pp-ink-dim); font-size: 15px; line-height: 1.6;
  margin-top: 10px; max-width: 60ch; text-wrap: pretty;
}

/* Final CTA ───────────────────────────────────────────────────────────── */
.mw-pricing-page .final { max-width: var(--pp-max); margin: 0 auto; padding: 88px 24px 80px; }
.mw-pricing-page .final-card {
  position: relative;
  background: linear-gradient(160deg, #1f3a28 0%, #0e1410 70%);
  border: 1px solid rgba(62,194,122,0.3); border-radius: 28px;
  padding: 64px 48px; text-align: center; overflow: hidden;
}
.mw-pricing-page .final-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(900px 280px at 50% -10%, rgba(62,194,122,0.18), transparent 60%);
  pointer-events: none;
}
.mw-pricing-page .final-card h2 {
  position: relative;
  font-family: var(--pp-serif); font-weight: 500;
  font-size: clamp(34px, 4.4vw, 52px); letter-spacing: -0.02em;
  margin: 0 auto 14px; max-width: 18ch; text-wrap: balance;
  color: var(--pp-ink);
}
.mw-pricing-page .final-card h2 em { font-style: italic; color: var(--pp-green-2); }
.mw-pricing-page .final-card p {
  position: relative; color: var(--pp-ink-dim);
  max-width: 48ch; margin: 0 auto 26px;
  font-size: 17px; line-height: 1.5;
}
.mw-pricing-page .final-card .row {
  position: relative;
  display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}
.mw-pricing-page .final-card .final-fine { margin-top: 18px; color: var(--pp-ink-faint); }

/* Sticky bar ──────────────────────────────────────────────────────────── */
.mw-pricing-page .sticky-cta {
  position: fixed; bottom: 18px; left: 50%;
  transform: translateX(-50%) translateY(150%);
  transition: transform .35s ease; z-index: 40;
  background: rgba(20,28,22,0.92); backdrop-filter: blur(14px);
  border: 1px solid var(--pp-line-2); border-radius: 999px;
  padding: 8px 8px 8px 18px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.6);
}
.mw-pricing-page .sticky-cta.show { transform: translateX(-50%) translateY(0); }
.mw-pricing-page .sticky-cta .label { font-size: 14px; color: var(--pp-ink-dim); }
.mw-pricing-page .sticky-cta .label b { color: var(--pp-ink); font-weight: 600; }

/* Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 920px) {
  .mw-pricing-page .tiers { grid-template-columns: 1fr 1fr; }
  .mw-pricing-page .tier.featured { transform: none; }
  .mw-pricing-page .review-grid { grid-template-columns: 1fr; }
  .mw-pricing-page .faq-grid { grid-template-columns: 1fr; gap: 24px; }
  .mw-pricing-page .trust { grid-template-columns: 1fr 1fr; }
  .mw-pricing-page .trust > div:nth-child(2) { border-right: 0; }
  .mw-pricing-page .trust > div:nth-child(-n+2) { border-bottom: 1px solid var(--pp-line); }
  .mw-pricing-page .guarantee-card { grid-template-columns: 1fr; text-align: center; }
  .mw-pricing-page .seal { margin: 0 auto; }
  .mw-pricing-page .donate-card { grid-template-columns: 1fr; gap: 24px; padding: 28px; }
  .mw-pricing-page table.compare { font-size: 13px; }
  .mw-pricing-page table.compare tbody th,
  .mw-pricing-page table.compare tbody td { padding: 12px 10px; }
}
@media (max-width: 560px) {
  .mw-pricing-page .tiers { grid-template-columns: 1fr; }
  .mw-pricing-page .table-wrap { overflow-x: auto; }
  .mw-pricing-page table.compare { min-width: 640px; }
}