/* =========================================================================
   LBS Brand v2 — Art-Directed System
   April 2026

   Strategy:
   - ONE primary (Ink Navy) for every authority signal: links, primary CTAs,
     active states, brand mark, headings.
   - ONE accent (Signal Amber) reserved for trust signals only:
     ratings, Editor's Choice, ACMA-verified marks. Never decorative.
   - Full neutral scale (paper -> ink) does 90% of the visual work.
   - Semantic colors are small, rare, never decorative.

   This file is loaded AFTER style.css. It uses higher-specificity selectors
   (`html[data-theme="light"]`, `[class].selector`) to defeat the inline
   critical CSS in style.css line 1.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&display=swap');

/* ==========================================================================
   1. TOKENS — light
   ========================================================================== */
html[data-theme="light"],
html:root,
[data-theme="light"]{

  /* --- Neutral surface scale (paper -> ink) --- */
  --paper:           #FAF8F4;   /* page background, warm off-white */
  --paper-deep:      #F2EDE3;   /* elevated surface, warm bridge tone */
  --paper-line:      #E5DFD2;   /* low-emphasis dividers */
  --surface:         #FFFFFF;   /* cards */
  --surface-line:    #E8E2D5;   /* card borders */
  --ink:             #0B2A43;   /* headings, primary CTAs */
  --ink-deep:        #061829;   /* hover/active for ink */
  --ink-soft:        #2A3D55;   /* body text */
  --ink-muted:       #5A6677;   /* secondary text */
  --ink-faint:       #8A92A0;   /* meta text */

  /* --- Single primary (= ink) --- */
  --color-primary:          var(--ink);
  --color-primary-hover:    var(--ink-deep);
  --color-primary-deep:     var(--ink-deep);
  --color-primary-surface:  rgba(11,42,67,0.05);
  --color-primary-line:     rgba(11,42,67,0.14);

  /* --- Single accent (Signal Amber, used ONLY for trust marks) --- */
  --amber:           #C8961F;
  --amber-deep:      #9F7510;
  --amber-soft:      #F7EBC8;
  --amber-line:      rgba(200,150,31,0.30);

  /* --- Semantic (rare, small) --- */
  --signal-success:  #1F7A4D;
  --signal-success-soft: #E2EEE7;
  --signal-danger:   #B23A48;
  --signal-danger-soft:  #F6E2E5;

  /* --- System aliases used by existing components --- */
  --color-bg:               var(--paper);
  --color-bg-tinted:        var(--paper-deep);
  --color-surface:          var(--surface);
  --color-surface-alt:      var(--paper-deep);
  --color-border:           var(--surface-line);
  --color-border-light:     var(--paper-line);
  --color-text:             var(--ink);
  --color-text-muted:       var(--ink-muted);
  --color-text-faint:       var(--ink-faint);
  --color-text-inverse:     #FFFFFF;
  --section-alt-bg:         var(--paper-deep);

  /* --- Trust/award token (= amber, semantic name) --- */
  --color-gold:             var(--amber);
  --color-gold-deep:         var(--amber-deep);
  --color-gold-surface:      var(--amber-soft);
  --color-gold-line:         var(--amber-line);

  /* --- Compliance/danger token --- */
  --color-warn:             var(--signal-danger);
  --color-warn-surface:     var(--signal-danger-soft);
  --color-success:          var(--signal-success);
  --color-error:            var(--signal-danger);
  --color-danger:           var(--signal-danger);
  --color-verified:         var(--signal-success);
  --color-verified-surface: var(--signal-success-soft);
  --color-primary-light:    var(--paper-deep);

  /* --- Shadows: paper-quiet --- */
  --shadow-sm:   0 1px 2px rgba(11,42,67,0.05);
  --shadow-md:   0 2px 8px rgba(11,42,67,0.06), 0 1px 2px rgba(11,42,67,0.04);
  --shadow-lg:   0 8px 24px rgba(11,42,67,0.08), 0 2px 6px rgba(11,42,67,0.05);
  --shadow-card: 0 1px 0 rgba(11,42,67,0.03), 0 2px 10px rgba(11,42,67,0.05);

  /* --- Radii (newspaper-tight, not fintech-rounded) --- */
  --radius-sm:   3px;
  --radius-md:   5px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-full: 9999px;

  /* --- Type --- */
  --font-display: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  --font-body:    'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  --content-default: 1100px;

  /* --- Legacy LBS-prefixed aliases (consolidated to the system) --- */
  --lbs-cream:       var(--paper-deep);
  --lbs-cream-deep:  var(--paper-line);
  --lbs-navy:        var(--ink);
  --lbs-navy-soft:   rgba(11,42,67,0.06);
  --lbs-green:       var(--signal-success);
  --lbs-green-deep:  #155A38;
  --lbs-red:         var(--signal-danger);
  --lbs-gold:        var(--amber);
  --lbs-orange:      var(--amber);
  --lbs-warm-bg:     var(--paper-deep);
}

/* ==========================================================================
   2. TOKENS — dark (calm, not neon)
   ========================================================================== */
html[data-theme="dark"],
[data-theme="dark"]{
  --paper:        #0B1622;
  --paper-deep:   #111E2D;
  --paper-line:   #1B2A3D;
  --surface:      #142031;
  --surface-line: #243549;
  --ink:          #F1ECDF;
  --ink-deep:     #FFFFFF;
  --ink-soft:     #D5CFC0;
  --ink-muted:    #9DA6B5;
  --ink-faint:    #6E7888;

  --color-primary:         #E6CB7A;     /* on dark, primary becomes warm light */
  --color-primary-hover:   #F1DC9A;
  --color-primary-deep:    #B89C4A;
  --color-primary-surface: rgba(230,203,122,0.10);
  --color-primary-line:    rgba(230,203,122,0.22);

  --amber:        #E6CB7A;
  --amber-deep:   #B89C4A;
  --amber-soft:   rgba(230,203,122,0.12);
  --amber-line:   rgba(230,203,122,0.30);

  --color-bg:               var(--paper);
  --color-bg-tinted:        var(--paper-deep);
  --color-surface:          var(--surface);
  --color-surface-alt:      var(--paper-deep);
  --color-border:           var(--surface-line);
  --color-border-light:     var(--paper-line);
  --color-text:             var(--ink);
  --color-text-muted:       var(--ink-muted);
  --color-text-faint:       var(--ink-faint);
  --color-text-inverse:     var(--paper);
  --section-alt-bg:         var(--paper-deep);

  --color-gold:             var(--amber);
  --color-gold-deep:        var(--amber-deep);
  --color-gold-surface:     var(--amber-soft);
  --color-gold-line:        var(--amber-line);

  --signal-success: #54C58E;
  --signal-success-soft: rgba(84,197,142,0.12);
  --signal-danger:  #E0566F;
  --signal-danger-soft: rgba(224,86,111,0.14);

  --color-warn:             var(--signal-danger);
  --color-warn-surface:     var(--signal-danger-soft);
  --color-success:          var(--signal-success);
  --color-verified:         var(--signal-success);
  --color-verified-surface: var(--signal-success-soft);

  --shadow-sm:  0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 14px rgba(0,0,0,0.45);
  --shadow-lg:  0 12px 32px rgba(0,0,0,0.55);
  --shadow-card: 0 1px 0 rgba(0,0,0,0.35), 0 6px 22px rgba(0,0,0,0.45);
}

/* ==========================================================================
   3. GLOBAL — typography & paper background
   ========================================================================== */
html[data-theme="light"] body,
html:root body{
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-body);
}
h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
h1{ font-weight: 700; letter-spacing: -0.02em; }

/* ==========================================================================
   4. HEADER — quiet authority, no shadow drama
   ========================================================================== */
.site-header,
header.site-header,
header[class*="header"]{
  background: var(--surface);
  border-bottom: 1px solid var(--surface-line);
  box-shadow: none;
}

/* ==========================================================================
   5. EDITORIAL TRUST STRIP (under header) — calm ink, gold rule
   ========================================================================== */
.editorial-strip{
  background: var(--ink);
  color: rgba(255,255,255,0.92);
  border-top: 1px solid var(--amber);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.01em;
}
.editorial-strip .es-inner{
  max-width: var(--content-default);
  margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  gap: 18px; flex-wrap: wrap;
  padding: 9px 20px;
}
.editorial-strip .es-acma{
  display:inline-flex; align-items:center; gap:6px;
  padding: 3px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-full);
  font-weight: 600;
  color: #fff;
  font-size: 12px;
}
.editorial-strip .es-acma::before{
  content:""; width:14px; height:14px; flex-shrink:0;
  background: var(--amber);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>") center/contain no-repeat;
}
.editorial-strip .es-dot{ opacity:0.4; }
.editorial-strip a{
  color: var(--amber);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   6. NEWS TICKER — calm ink band, single accent
   ========================================================================== */
.lbs-ticker,
[class].lbs-ticker{
  background: var(--ink-deep) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.92);
}
.lbs-ticker .lt-comp{
  background: rgba(255,255,255,0.10) !important;
  color: #fff !important;
  border-radius: var(--radius-sm);
  padding: 2px 8px;
}
.lbs-ticker .lt-line{
  color: var(--amber) !important;
  font-family: var(--font-mono);
}

/* ==========================================================================
   7. TIP-OF-THE-DAY STRIP — same ink band, NOT bright cream
   This was breaking content pages with a loud band. Pulled into the
   masthead family so it reads as continuous chrome, not interruption.
   ========================================================================== */
.lbs-totd,
[class].lbs-totd{
  background: var(--paper-deep);
  border-bottom: 1px solid var(--surface-line);
  color: var(--ink);
}
.lbs-totd-flag{
  background: var(--ink) !important;
  color: #fff !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 11px;
  text-transform: uppercase;
}
.lbs-totd-comp{
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.lbs-totd-pick{ color: var(--ink); font-weight: 700; }
.lbs-totd-line{
  color: var(--amber-deep);
  font-family: var(--font-mono);
  font-weight: 700;
}
.lbs-totd-cta{
  background: var(--ink) !important;
  color: #fff !important;
  border: 1px solid var(--ink) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-body);
  font-weight: 600;
  padding: 8px 14px !important;
}
.lbs-totd-cta:hover{ background: var(--ink-deep) !important; }

/* ==========================================================================
   8. HERO — kill green wordmark highlight, kill red pod button
   These are inline-styled in index.html, so we override with element +
   class selectors strong enough to win the cascade.
   ========================================================================== */
/* Hero h1 — strip inline green color via attribute selector defeat */
.hero h1[style],
section.hero h1[style],
[class*="hero"] h1[style]{
  color: var(--ink) !important;
  font-family: var(--font-display);
  font-weight: 700;
}
/* Hero highlight span — amber underline mark on the key word */
.hero h1 span,
section.hero h1 span,
[class*="hero"] h1 span{
  color: var(--ink) !important;
  background-image: linear-gradient(to bottom, transparent 62%, var(--amber-soft) 62%, var(--amber-soft) 96%, transparent 96%);
  background-repeat: no-repeat;
  padding: 0 2px;
}

/* Hero CTAs — single primary, single secondary outline. NO red. */
.hero-cta,
[class].hero-cta{
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.005em;
  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  box-shadow: none !important;
}
.hero-cta--primary,
[class].hero-cta--primary{
  background: var(--ink) !important;
  color: #fff !important;
  border: 1px solid var(--ink) !important;
}
.hero-cta--primary:hover{
  background: var(--ink-deep) !important;
  transform: translateY(-1px);
}
.hero-cta--secondary,
[class].hero-cta--secondary{
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1.5px solid var(--ink) !important;
}
.hero-cta--secondary:hover{
  background: var(--paper-deep) !important;
}
.hero-cta--ghost,
[class].hero-cta--ghost{
  background: transparent !important;
  color: var(--ink) !important;
  border: 1.5px solid var(--paper-line) !important;
}
.hero-cta--ghost:hover{
  border-color: var(--ink) !important;
  background: transparent !important;
}

/* ==========================================================================
   9. BUTTONS (general) — flatten to one CTA system
   ========================================================================== */
.btn--primary,
[class].btn--primary{
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  border-radius: var(--radius-md);
  font-weight: 600;
  box-shadow: none;
}
.btn--primary:hover{ background: var(--ink-deep); border-color: var(--ink-deep); color:#fff; }
.btn--outline-dark,
.btn--secondary{
  background: var(--surface);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  font-weight: 600;
}
.btn--outline-dark:hover{ background: var(--paper-deep); }

/* ==========================================================================
   10. RATING CHIP — single trust mark using the amber accent
   ========================================================================== */
.rating-chip{
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 4px 10px;
  background: var(--amber-soft);
  color: var(--amber-deep);
  border: 1px solid var(--amber-line);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
}
.rating-chip .rating-chip-out{
  color: var(--amber-deep);
  opacity: 0.65;
  font-size: 12px;
  font-weight: 600;
}

/* ==========================================================================
   11. BADGE PILLS — one neutral family, override inline pastels
   The review pages have inline-styled pills with three different colors.
   Override with [class].badge-pill[style] for higher specificity.
   ========================================================================== */
.badge-pill,
[class].badge-pill[style]{
  background: var(--paper-deep) !important;
  color: var(--ink) !important;
  border: 1px solid var(--surface-line) !important;
  border-radius: var(--radius-full);
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
/* The first/headline pill in a badge group gets the amber treatment */
.badge-pills .badge-pill:first-child,
[class].badge-pills .badge-pill:first-child[style]{
  background: var(--amber-soft) !important;
  color: var(--amber-deep) !important;
  border-color: var(--amber-line) !important;
}

/* ==========================================================================
   12. EDITOR'S CHOICE RIBBON
   ========================================================================== */
.editors-choice{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  position: relative;
}
.editors-choice::before{
  content:""; width: 12px; height: 12px;
  background: var(--amber);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l2.39 4.84L20 7.27l-4 3.9.94 5.5L12 14.77 7.06 16.67 8 11.17 4 7.27l5.61-.43z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l2.39 4.84L20 7.27l-4 3.9.94 5.5L12 14.77 7.06 16.67 8 11.17 4 7.27l5.61-.43z'/></svg>") center/contain no-repeat;
}

/* ==========================================================================
   13. ACMA-VERIFIED BADGE
   ========================================================================== */
.acma-verified{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--signal-success-soft);
  color: var(--signal-success);
  border: 1px solid rgba(31,122,77,0.25);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
}

/* ==========================================================================
   14. BYLINE BLOCK — author credibility
   ========================================================================== */
.byline-block{
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-lg);
  margin: 18px 0 22px;
}
.byline-block img{
  width: 48px !important; height: 48px !important; flex-shrink: 0;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 1px solid var(--surface-line);
}
.byline-block .by-name{ font-weight: 700; color: var(--ink); font-size: 15px; }
.byline-block .by-meta{ color: var(--ink-muted); font-size: 13px; margin-top: 1px; }

/* ==========================================================================
   15. CARDS — true paper, real depth
   ========================================================================== */
.card,
[class].card,
.review-card,
[class].review-card{
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* ==========================================================================
   16. LINKS
   ========================================================================== */
a{ color: var(--ink); text-decoration-color: var(--paper-line); text-underline-offset: 3px; }
a:hover{ color: var(--ink-deep); text-decoration-color: var(--amber); }
.breadcrumb a{ color: var(--ink-muted); }
.breadcrumb a:hover{ color: var(--ink); }

/* ==========================================================================
   17. LICENSE FOOTER — compliance, calm and serious
   ========================================================================== */
.license-footer{
  background: var(--ink-deep);
  color: rgba(255,255,255,0.72);
  border-top: 3px solid var(--amber);
  padding: 32px 0 28px;
  font-size: 13px;
  line-height: 1.6;
}
.license-footer .lf-inner{
  max-width: var(--content-default);
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px 28px;
  align-items: start;
}
.license-footer strong{ color: #fff; }
.license-footer a{ color: var(--amber); }
.license-footer .lf-trustline{
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; color: #fff;
}
.license-footer .lf-trustline svg{ width: 16px; height: 16px; flex-shrink: 0; color: var(--amber); }
@media (max-width: 720px){
  .license-footer .lf-inner{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   18. SECTION RHYTHM
   ========================================================================== */
.section{ padding: 56px 0; }
.section--alt{ background: var(--paper-deep); }
.section + .section{ border-top: 1px solid var(--paper-line); }

/* ==========================================================================
   19. METHODOLOGY BLOCK
   ========================================================================== */
.methodology{
  padding: 22px;
  background: var(--paper-deep);
  border: 1px solid var(--paper-line);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-lg);
}
.methodology h3{
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
}

/* ==========================================================================
   20. FORMS
   ========================================================================== */
input,select,textarea{
  background: var(--surface);
  border: 1px solid var(--surface-line);
  color: var(--ink);
  border-radius: var(--radius-md);
}
input:focus, select:focus, textarea:focus{
  border-color: var(--ink);
  outline: 2px solid rgba(11,42,67,0.18);
  outline-offset: 1px;
}

/* ==========================================================================
   21. PROMO CODE BOX — restrained
   ========================================================================== */
.promo-code-cutout{
  background: var(--paper-deep);
  border: 1px dashed var(--amber);
  border-radius: var(--radius-md);
}

/* ==========================================================================
   22. SCORE BARS — ink primary, amber accent only at high scores
   ========================================================================== */
.score-bar-fill{ background: var(--ink) !important; }
.score-bar-fill[data-width^="9"],
.score-bar-fill[data-width="100"]{ background: var(--amber-deep) !important; }

/* ==========================================================================
   23. FAQ ACCORDION
   ========================================================================== */
.faq-item{
  border-bottom: 1px solid var(--surface-line);
}
.faq-question{ color: var(--ink); font-weight: 600; }

/* ==========================================================================
   24. BUG GUARDS — SVG sizing, mobile spacing
   The global svg{max-width:100%;height:auto} reset in style.css line 1 was
   stretching the inline reading-time clock to full viewport. Pin all small
   inline SVGs that should never grow.
   ========================================================================== */
.lbs-reading-time{ display:inline-flex; align-items:center; gap:6px; }
.lbs-reading-time svg{
  width:14px !important; height:14px !important;
  min-width:14px; min-height:14px; max-width:14px; max-height:14px;
  flex-shrink:0; flex-grow:0; flex-basis:14px;
}
[data-theme-toggle] svg{
  width:20px !important; height:20px !important; flex-shrink:0;
}
.mobile-menu-btn svg{ width:24px !important; height:24px !important; flex-shrink:0; }
.lbs-totd svg, .lbs-ticker svg, .byline svg, .meta svg, .editorial-strip svg{
  flex-shrink:0;
}

/* TOTD spacing safety on mobile */
.lbs-totd-inner{ gap:14px; }
.lbs-totd-flag{ margin-right:6px; padding:4px 10px; border-radius:var(--radius-sm); }
.lbs-totd-comp, .lbs-totd-pick, .lbs-totd-line{ margin-right:6px; }
@media (max-width: 720px){
  .lbs-totd-inner{ gap:8px; row-gap:6px; }
  .lbs-totd-flag, .lbs-totd-comp, .lbs-totd-pick, .lbs-totd-line{
    display:inline-block; margin-right:8px;
  }
  .lbs-totd-cta{ margin-top:6px; }
}
.lbs-ticker-track > *{ margin-right:14px; }
.lbs-ticker-track .lt-comp{ margin-right:6px; }
.lbs-ticker-track .lt-line{ margin-right:6px; }

/* ==========================================================================
   25. PRINT
   ========================================================================== */
@media print{
  .editorial-strip,.lbs-ticker,.lbs-totd,.disclosure-bar,
  .site-header,.site-footer,.license-footer{ display:none; }
  body{ background:#fff; color:#000; }
}

/* ==========================================================================
   26. MOBILE SPACING & RHYTHM (≤720px)
   Tighten dense bars on small screens. Editorial strip becomes a single
   horizontal scroll. Ticker is hidden. TOTD breathes. Badges align.
   ========================================================================== */
@media (max-width: 720px){
  .editorial-strip{
    display:flex; flex-wrap:nowrap; overflow-x:auto;
    gap:14px; padding:10px 14px;
    scrollbar-width:none;
  }
  .editorial-strip::-webkit-scrollbar{ display:none; }
  .editorial-strip > *{ flex:0 0 auto; }

  .lbs-ticker{ display:none !important; }

  .lbs-totd{ padding:10px 14px; }
  .lbs-totd-inner{ flex-wrap:wrap; row-gap:6px; }

  .badge, .badge-pill, .meta-pill{
    padding:3px 8px; font-size:12px; line-height:1.4;
    border-radius:999px;
  }

  /* On This Page nav — quieter on mobile */
  .toc, .on-this-page{ padding:10px 12px; }

  /* Review meta row should stay on one or two lines, not five */
  .review-meta, .meta-row{
    display:flex; flex-wrap:wrap; gap:8px 12px;
    align-items:center;
  }
  .review-meta > *, .meta-row > *{ white-space:nowrap; }
}

/* ==========================================================================
   27. TICKER COLOUR — force amber accent over older orange
   ========================================================================== */
.lbs-ticker .lt-line,
.lt-line{ color: var(--amber, #C8961F) !important; }

/* ==========================================================================
   28. HERO BACKGROUND — paper, not navy gradient
   style.css forces a navy gradient + white text. On the editorial paper
   palette, that produces invisible cream-on-cream dek text on mobile.
   Override with paper background and dark ink. Higher-specificity selectors
   to defeat the cascade.
   ========================================================================== */
html[data-theme="light"] .hero,
html[data-theme="light"] body .hero,
.hero[class]{
  background: var(--paper, #FAF8F4) !important;
  color: var(--ink, #0B2A43) !important;
}
html[data-theme="light"] .hero h1,
html[data-theme="light"] .hero h2,
html[data-theme="light"] .hero p,
html[data-theme="light"] .hero .dek,
.hero h1, .hero h2, .hero p, .hero .dek{
  color: var(--ink, #0B2A43) !important;
}
html[data-theme="light"] .hero .dek,
html[data-theme="light"] .hero p.dek,
.hero .dek, .hero p.dek{
  color: var(--ink-soft, #3A4A5E) !important;
}