/* ==========================================================================
   ridigital DataHub — Page CSS v1.2.3
   Covers: single-database, hub, taxonomy archives, success, download pages.
   ALL rules are scoped to .rddh-page so they never bleed into the WP theme,
   and the theme can never bleed back in.
   ========================================================================== */

/* ── 0. CSS ISOLATION WALL ──────────────────────────────────────────────── */
/* Neutralise every property BeTheme (or any theme) sets globally.           */
/* This block must come before any component rules.                          */
.rddh-page *,
.rddh-page *::before,
.rddh-page *::after { box-sizing: border-box; }

/* Paragraphs — themes add margin-bottom */
.rddh-page p { margin: 0 !important; padding: 0 !important; }

/* ── NUCLEAR INPUT ISOLATION (theme defense layer) ──────────────────────── */
/* BeTheme sets `input:not([type])`, `input[type=text]` etc. with
   border-bottom:1px, box-shadow, custom height. We override that globally.

   CRITICAL: everything inside :where(...) contributes ZERO to specificity.
   That means this whole block resolves to roughly the specificity of a bare
   `input` selector (0,0,0,1) plus !important. Against theme rules (which
   rarely use !important) we still win outright. But against OUR OWN
   component classes — e.g. .rddh-coupon-input, .rddh-text-filter,
   .rddh-price-input — which are single classes at (0,0,1,0), THEIR
   !important rules now correctly outrank this fallback. Without :where(),
   this reset was silently overriding those component styles because
   `.rddh-page input[type="text"]` alone is (0,0,2,1) — higher than many
   of our own targeted rules — flattening custom inputs into a generic box.
   This is a defensive fallback layer, not the final word on any input. */
:where(.rddh-page, .rddh-hdr, .rddh-hub-layout, .rddh-archive-layout) input,
:where(.rddh-page, .rddh-hdr, .rddh-hub-layout, .rddh-archive-layout) input[type],
:where(.rddh-page, .rddh-hdr, .rddh-hub-layout, .rddh-archive-layout) select,
:where(.rddh-page, .rddh-hdr, .rddh-hub-layout, .rddh-archive-layout) textarea {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 7px !important;
  outline: none !important;
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;
  color: #111827 !important;
  background-color: #fff !important;
  height: auto !important;
  line-height: 1.5 !important;
  transition: border-color .15s !important;
}
:where(.rddh-page, .rddh-hdr, .rddh-hub-layout, .rddh-archive-layout) input:focus,
:where(.rddh-page, .rddh-hdr, .rddh-hub-layout, .rddh-archive-layout) select:focus,
:where(.rddh-page, .rddh-hdr, .rddh-hub-layout, .rddh-archive-layout) textarea:focus {
  border-color: #5c1d77 !important;
  box-shadow: 0 0 0 3px rgba(92,29,119,.1) !important;
  outline: none !important;
}

/* Links — themes add underline on :hover and custom colours; we own all of it.
   :where() keeps this at near-zero specificity so component link styles
   (e.g. .rddh-mega-link, .rddh-db-card) always win when both use !important. */
:where(.rddh-page) a {
  color: inherit !important;
  text-decoration: none !important;
}
:where(.rddh-page) a:hover { text-decoration: none !important; }

/* Buttons — BeTheme overrides border-radius, letter-spacing, text-transform.
   :where() again ensures .rddh-btn-cancel, .rddh-coupon-apply etc. always
   win their own border/background declarations over this fallback. */
:where(.rddh-page) button {
  font-family: inherit;
  text-transform: none !important;
  letter-spacing: normal !important;
  cursor: pointer;
  border: none !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
}

/* Images — themes add max-width:100% which breaks logos */
.rddh-page img { max-width: none; height: auto; display: block !important; }

/* ── 1. DESIGN TOKENS ───────────────────────────────────────────────────── */
:root {
  --rp   : #5c1d77;  --rpd  : #451459;  --rpm  : #7b2fa0;
  --rpl  : #f7f2fa;  --rpt  : #ede5f5;  --rpp  : #f4eefa;
  --ink  : #111827;  --mut  : #4b5563;  --fnt  : #6b7280;
  --wh   : #fff;     --sl   : #f9fafb;  --sl2  : #f4f3f8;
  --bdr  : #e5e7eb;  --bdrl : #ede9f7;
  --grn  : #059669;  --grnb : #ecfdf5;  --amb  : #d97706;
  --hero : linear-gradient(160deg,#faf8ff 0%,#f3eefb 40%,#ede5f5 100%);
  --r    : 8px;      --rl   : 12px;     --pill : 100px;
  --ff   : 'DM Serif Display', Georgia, serif;
  --fu   : 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ease : cubic-bezier(.4,0,.2,1);
}

html { scroll-behavior: smooth; }
body.rddh-page {
  font-family: var(--fu);
  color: var(--ink) !important;
  background: var(--sl2);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  font-size: 16px; /* bumped from 15 */
}

/* ── 2. NAV ─────────────────────────────────────────────────────────────── */
.rddh-nav {
  background: var(--rpd);
  border-bottom: 1px solid rgba(255,255,255,.06);
  position: sticky !important; top: 0; z-index: 900 !important;
  padding: 0 6vw !important;
}
.rddh-nav-inner {
  display: flex !important; align-items: center !important; gap: 20px !important;
  height: 60px; max-width: 1200px; margin: 0 auto !important;
}
.rddh-nav-logo img { display: block !important; height: 36px; width: auto; }
.rddh-nav-links { display: flex !important; align-items: center !important; gap: 28px !important; margin-left: auto !important; }
.rddh-nav-link {
  color: rgba(255,255,255,.65) !important;
  font-size: .88rem; font-weight: 600;
  transition: color .15s;
  padding-bottom: 3px !important;
  border-bottom: 2px solid transparent;
}
.rddh-nav-link:hover      { color: #fff !important; }
.rddh-nav-active          { color: #fff !important; border-bottom-color: rgba(255,255,255,.55) !important; }

/* Mobile hamburger */
.rddh-nav-toggle {
  display: none !important; background: none; border: none; color: #fff !important;
  cursor: pointer; padding: 6px !important; margin-left: auto !important; border-radius: 6px;
}
.rddh-nav-toggle:hover { background: rgba(255,255,255,.1); }
.rddh-nav-toggle svg   { display: block !important; }

/* ── 3. BREADCRUMB ──────────────────────────────────────────────────────── */
/* v1.8.24: was a fixed 40px height with zero top/bottom padding, so the
   bar sat directly against the sticky header with no visual breathing
   room — confirmed against the client's own annotated screenshot, which
   pointed directly at that seam. Replaced the fixed height with real
   padding so it gets breathing room on both sides, not just a top-only
   patch that would leave it uneven. */
.rddh-breadcrumb { background: var(--wh); border-bottom: 1px solid var(--bdrl); padding: 0 6vw !important; }
.rddh-breadcrumb-inner {
  display: flex !important; align-items: center !important; gap: 7px !important;
  max-width: 1200px; margin: 0 auto !important;
  padding: 18px 0 14px !important; font-size: .8rem; color: var(--fnt) !important; flex-wrap: wrap !important;
}
.rddh-breadcrumb a { color: var(--rpm) !important; font-weight: 600; }
.rddh-breadcrumb a:hover { text-decoration: underline !important; } /* intentional — breadcrumb links should underline */

/* ── 4. HERO ────────────────────────────────────────────────────────────── */
.rddh-hero { background: var(--hero); padding: 44px 6vw 92px !important; border-bottom: 1px solid var(--bdrl); position: relative !important; }
.rddh-hero-inner { max-width: 1200px; margin: 0 auto !important; }
.rddh-hero-inner-split { display: flex !important; align-items: flex-start !important; gap: 40px !important; margin-top: 24px !important; }
.rddh-hero-main { flex: 1.4 1 auto !important; min-width: 0; }

/* Full Database buy card — ported from the reference prototype's
   .verify-card, including the "floating" negative-margin overlap onto the
   hero's bottom edge. Wired to RDDH_DB::calculate_price() (row_count =
   every row) — the same engine behind the live filter widget and actual
   checkout — so this can't drift out of sync with what a full-database
   purchase is really charged. */
.rddh-hero-buy {
  position: relative !important; flex: 1 0 320px !important; max-width: 360px; width: 100%;
  align-self: flex-start !important; margin-top: -56px !important;
  background: var(--wh); border: 1px solid var(--bdrl); border-radius: 20px;
  box-shadow: 0 8px 40px rgba(92,29,119,.10); padding: 30px 28px !important;
  display: flex !important; flex-direction: column !important;
}
.rddh-hero-buy-badge {
  position: absolute !important; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--rp); color: #fff !important; font-size: .65rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; padding: 6px 14px !important;
  border-radius: 100px; white-space: nowrap; box-shadow: 0 6px 14px -4px rgba(92,29,119,.5);
}
.rddh-hero-buy-eyebrow { display: inline-block !important; font-size: .67rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--rpm) !important; margin-bottom: 14px !important; }
.rddh-hero-buy-price-row { display: flex !important; align-items: baseline !important; gap: 8px !important; }
.rddh-hero-buy-price { font-family: var(--ff); font-weight: 400; font-size: 2.3rem; color: var(--ink) !important; }
.rddh-hero-buy-note { font-size: .82rem; color: var(--fnt) !important; margin: 6px 0 18px !important; }
.rddh-hero-buy-discount-tag {
  display: flex !important; align-items: center !important; gap: 9px !important;
  background: var(--grnb); border: 1px solid #bbedd4; color: var(--grn) !important;
  font-size: .83rem; font-weight: 700; padding: 11px 14px !important; border-radius: 8px; margin-bottom: 18px !important;
}
.rddh-hero-buy-discount-icon {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 20px; height: 20px; border-radius: 50%; background: var(--grn); color: #fff !important; flex-shrink: 0 !important;
}
.rddh-hero-buy-btn {
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
  width: 100% !important; padding: 14px 20px !important; font-family: var(--fu); font-size: .92rem; font-weight: 700;
  border-radius: 8px; border: 2px solid transparent; cursor: pointer; transition: all .22s ease; line-height: 1;
  margin-bottom: 10px !important; text-decoration: none !important; white-space: nowrap;
}
.rddh-hero-buy-btn svg { flex-shrink: 0 !important; }
.rddh-hero-buy-btn-p { background: var(--rp); color: #fff !important; border-color: var(--rp); }
.rddh-hero-buy-btn-p:hover { background: var(--rpd); border-color: var(--rpd); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(92,29,119,.28); }
.rddh-hero-buy-btn-s { background: var(--wh); color: var(--rp) !important; border-color: var(--bdr); }
.rddh-hero-buy-btn-s:hover { border-color: var(--rp); background: var(--rpp); transform: translateY(-2px); }
.rddh-hero-buy-reassure {
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important;
  margin-top: auto !important; padding-top: 18px !important; border-top: 1px solid var(--bdr);
  font-size: .78rem; color: var(--mut) !important; font-weight: 600;
}
.rddh-hero-buy-reassure svg { color: var(--grn) !important; flex-shrink: 0 !important; }
.rddh-hero-buy-pay-badges { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; flex-wrap: wrap !important; margin-top: 14px !important; }
.rddh-pay-badge { display: inline-flex !important; align-items: center !important; gap: 5px !important; height: 26px; padding: 0 11px !important; border-radius: 6px; border: 1px solid var(--bdr); color: var(--mut) !important; font-size: .72rem; font-weight: 700; letter-spacing: .02em; background: #fff; }
.rddh-pay-badge-visa { font-style: italic; letter-spacing: .04em; }
.rddh-mc-dots { display: inline-flex !important; align-items: center !important; }
.rddh-mc-dots span { width: 11px; height: 11px; border-radius: 50%; }
.rddh-mc-dots span:first-child { background: #EB001B; opacity: .9; margin-right: -4px; }
.rddh-mc-dots span:last-child { background: #F79E1B; opacity: .9; }

.rddh-hero-badges { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-bottom: 20px !important; }
.rddh-badge-pill {
  display: inline-flex !important; align-items: center !important;
  font-size: .72rem; font-weight: 700;
  padding: 4px 13px !important; border-radius: var(--pill);
  transition: all .15s;
}
.rddh-badge-industry { background: var(--rpt); color: var(--rpm) !important; border: 1px solid var(--bdrl); }
.rddh-badge-industry:hover { background: var(--rpp); }
.rddh-badge-sector   { background: #fff; color: var(--mut) !important; border: 1px solid var(--bdr); }

.rddh-hero-title {
  font-family: var(--ff);
  font-size: clamp(1.8rem, 3.5vw, 2.7rem);
  color: var(--ink) !important; line-height: 1.13; margin-bottom: 22px !important;
}
.rddh-hero-desc {
  font-size: 1.02rem; color: var(--mut) !important;
  line-height: 1.85; margin-bottom: 0 !important;
}
.rddh-hero-meta {
  display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important;
  padding-top: 22px !important; border-top: 1px solid var(--bdr); margin-bottom: 0 !important;
}
.rddh-updated-badge,
.rddh-location-badge,
.rddh-sales-badge {
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  font-size: .75rem; font-weight: 700;
  padding: 5px 13px !important; border-radius: var(--pill);
}
.rddh-updated-badge  { background: var(--grnb); color: var(--grn) !important; border: 1px solid rgba(5,150,105,.2); }
.rddh-location-badge { background: var(--sl);   color: var(--fnt) !important; border: 1px solid var(--bdr); text-decoration: none; transition: border-color .15s, color .15s; }
.rddh-location-badge:hover { border-color: var(--rpm); color: var(--rpm) !important; }
.rddh-loc-badge-flag { font-size: 12px; line-height: 1; }
.rddh-sales-badge    { background: var(--rpt);  color: var(--rpm) !important; border: 1px solid var(--bdrl); }

/* ── 5. STATS BAR ───────────────────────────────────────────────────────── */
.rddh-stats-bar {
  background: linear-gradient(120deg, var(--rpl) 0%, #fbf9fd 55%, var(--rpp) 100%);
  border-top: 1px solid var(--bdrl); border-bottom: 1px solid var(--bdrl);
  padding: 40px 6vw !important;
}
.rddh-stats-bar-inner { max-width: 1200px; margin: 0 auto !important; display: flex !important; }
.rddh-stat-item { flex: 1 !important; min-width: 130px; text-align: center; padding: 0 20px !important; position: relative !important; }
.rddh-stat-item:not(:last-child)::after {
  content: ''; position: absolute !important; right: 0; top: 50%; transform: translateY(-50%);
  height: 44px; width: 1px; background: var(--rpm); opacity: .18;
}
.rddh-stat-num {
  display: block !important; font-family: var(--ff); font-weight: 400;
  font-size: clamp(1.7rem, 2.6vw, 2.2rem); color: var(--rp) !important; line-height: 1;
}
.rddh-stat-lbl {
  display: block !important; font-size: .78rem; font-weight: 600;
  color: var(--mut) !important; margin-top: 10px !important; line-height: 1.5;
}

/* ── 6. CONTENT WRAP ────────────────────────────────────────────────────── */
.rddh-content-wrap { max-width: 960px; margin: 0 auto !important; padding: 36px 6vw 80px !important; }
/* Matches the prototype's .section (96px) / .section.tight (69px) padding —
   sections live inside one shared wrap here rather than each getting its
   own full-bleed <section>, so this is expressed as margin-bottom between
   stacked blocks instead, tuned to read the same amount of "air" as the
   reference. The previous 40px reads cramped/glued together next to the
   prototype's actual spacing — this was the root cause of that complaint,
   not any single section's own padding. */
.rddh-section       { margin-bottom: 72px !important; }
.rddh-section-tight { margin-bottom: 52px !important; }

.rddh-section-label {
  font-size: .65rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .14em; color: var(--rpm) !important;
  margin-bottom: 16px !important; display: flex !important; align-items: center !important; gap: 8px !important;
}
.rddh-section-label::before {
  content: ''; width: 3px; height: 14px;
  background: var(--rpm); border-radius: 2px; flex-shrink: 0 !important;
}

/* Richer section header — eyebrow + big serif title + optional sub-line,
   ported from the reference prototype's .section-head/.eyebrow/.h2/
   .section-sub. Used for every content-wrap section EXCEPT the live
   preview/filter widget above (out of scope for this pass — that area
   keeps the older, smaller .rddh-section-label styling). */
.rddh-section-head { display: flex !important; align-items: flex-end !important; justify-content: space-between !important; gap: 20px !important; flex-wrap: wrap !important; margin-bottom: 32px !important; }
.rddh-section-head-centered { flex-direction: column !important; align-items: center !important; text-align: center; }
.rddh-eyebrow {
  display: inline-block !important; font-size: .67rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--rpm) !important; margin-bottom: 8px !important;
}
.rddh-section-title {
  font-family: var(--ff); font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.25; color: var(--ink) !important;
}
.rddh-section-sub { color: var(--fnt) !important; font-size: .92rem; max-width: 62ch; margin-top: 10px !important; line-height: 1.7; }

/* ── 6.5. DATA DICTIONARY ───────────────────────────────────────────────────
   rddh_completeness (fill % per column, existing) + rddh_column_samples
   (first non-empty value per column, new in v1.8.3 — see
   RDDH_DB::calculate_column_samples()). Completeness color-codes into 4
   tiers matching the legend exactly: 90-100 green / 70-89 purple / 50-69
   light purple / under 50 blue. */
.rddh-dict-panel { border: 1px solid var(--bdr); border-radius: 20px; overflow: hidden; margin-top: 8px !important; }
.rddh-dict-row {
  display: grid !important; grid-template-columns: 1.3fr 1.5fr 1.8fr !important; align-items: center !important;
  gap: 24px !important; padding: 16px 24px !important; border-bottom: 1px solid var(--bdrl);
  transition: background .15s ease;
}
.rddh-dict-row:last-child { border-bottom: none; }
.rddh-dict-row:not(.rddh-dict-head):hover { background: var(--rpl); }
.rddh-dict-head { padding: 14px 24px !important; background: var(--sl2); border-bottom: 1px solid var(--bdr); }
.rddh-dict-head span { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--fnt) !important; }
.rddh-dict-field { display: flex !important; align-items: center !important; gap: 10px !important; font-weight: 700; color: var(--ink) !important; font-size: .92rem; }
.rddh-dict-field-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0 !important; background: var(--grn); box-shadow: 0 0 0 3px var(--grnb); }
.rddh-dict-fill { display: flex !important; align-items: center !important; gap: 12px !important; }
.rddh-dict-bar-track { flex: 1 !important; height: 8px; background: var(--sl2); border-radius: 100px; overflow: hidden; }
.rddh-dict-bar-fill { height: 100%; border-radius: 100px; background: var(--grn); }
.rddh-dict-pct {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  font-size: .74rem; font-weight: 800; padding: 3px 9px !important; border-radius: 100px;
  min-width: 44px; flex-shrink: 0 !important; color: var(--grn); background: var(--grnb);
}
.rddh-dict-sample {
  font-family: 'SF Mono', ui-monospace, Menlo, monospace; font-size: .78rem; color: var(--mut) !important;
  background: var(--sl); border: 1px solid var(--bdrl); border-radius: 6px; padding: 5px 10px !important;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; max-width: 100%;
}
.rddh-dict-legend { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 18px !important; margin-top: 18px !important; }
.rddh-dict-legend-item { display: inline-flex !important; align-items: center !important; gap: 7px !important; font-size: .78rem; color: var(--mut) !important; font-weight: 600; }
.rddh-dict-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0 !important; }
@media (max-width: 640px) {
  .rddh-dict-row { grid-template-columns: 1fr !important; gap: 8px !important; }
  .rddh-dict-head { display: none !important; }
  .rddh-dict-sample { max-width: 100%; white-space: normal; word-break: break-word; }
}

/* ── 7. FULL-BLEED WIDGET TRAY ──────────────────────────────────────────── */
/* Widget breaks out of the narrow content-wrap so it fills the viewport.   */
.rddh-widget-full-section {
  background: #f6f3fb;
  border-top: 1px solid #e8e0f5;
  border-bottom: 1px solid #e8e0f5;
  padding: 32px 0 48px !important;
  width: 100%;
}
.rddh-widget-full-inner {
  max-width: 1380px;
  margin: 0 auto !important;
  padding: 0 5vw !important;
}
.rddh-widget-full-inner .rddh-section-label { margin-bottom: 20px !important; }

/* ── 7.5. VOLUME PRICING ─────────────────────────────────────────────────
   Admin-controlled tier grid (up to 4 cards) — see rddh_pricing_tiers meta,
   configured per-database in the "Pricing" admin card ("Volume Pricing" =
   the actual bulk discount, not a separate display; see RDDH_DB::
   calculate_price()). Design ported from the client's reference prototype.

   The prototype's own grid is a fixed `repeat(4, 1fr)` — fine for its demo,
   which always shows exactly 4 tiers, but this plugin supports 1–4, and a
   hard 4-column grid with only 1 or 2 real tiers in it leaves obvious empty
   track space and stretches the remaining card(s) too wide. Instead, the
   column count matches however many tiers actually exist (via the
   .rddh-tier-grid-N modifier class rendered server-side), each card capped
   at a sensible max-width, and the whole row centered — so it looks
   intentional whether it's 1 card or all 4, not like 3 are missing. */
.rddh-tier-intro { font-size: .88rem; color: var(--mut) !important; margin: -8px 0 24px !important; max-width: 62ch; }
.rddh-tier-grid { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 18px !important; align-items: stretch !important; }
.rddh-tier-grid > .rddh-tier-card { flex: 1 1 240px !important; max-width: 260px !important; }
/* With 1–3 tiers, let cards grow a bit wider (still capped) rather than
   sitting narrow and orphaned in a mostly-empty row. */
.rddh-tier-grid-1 > .rddh-tier-card,
.rddh-tier-grid-2 > .rddh-tier-card { max-width: 300px !important; }

.rddh-tier-card {
  position: relative !important; background: var(--wh); border: 1px solid var(--bdr);
  border-radius: 16px; padding: 26px 22px 22px !important;
  display: flex !important; flex-direction: column !important;
  transition: transform .22s var(--ease, ease), box-shadow .22s var(--ease, ease), border-color .22s var(--ease, ease);
}
.rddh-tier-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px -12px rgba(20,10,30,.16); border-color: var(--bdrl); }
.rddh-tier-card-featured {
  background: linear-gradient(180deg, var(--rpl), var(--wh) 65%);
  border-color: var(--rp); box-shadow: 0 14px 34px -14px rgba(92,29,119,.28);
  transform: scale(1.045); z-index: 2;
}
.rddh-tier-card-featured:hover { transform: scale(1.045) translateY(-4px); box-shadow: 0 18px 40px -14px rgba(92,29,119,.34); }
.rddh-tier-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: var(--rpl); color: var(--rp) !important; margin-bottom: 16px !important;
}
.rddh-tier-card-featured .rddh-tier-icon { background: var(--rp); color: #fff !important; }
.rddh-tier-badge {
  position: absolute !important; top: -13px; left: 50%; transform: translateX(-50%);
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  background: var(--rp); color: #fff !important; font-size: .65rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; padding: 6px 14px !important;
  border-radius: 100px; white-space: nowrap; box-shadow: 0 6px 14px -4px rgba(92,29,119,.5);
}
.rddh-tier-range { font-size: .82rem; font-weight: 700; color: var(--mut) !important; margin-bottom: 16px !important; }
.rddh-tier-price-row { display: flex !important; align-items: baseline !important; gap: 5px !important; margin-bottom: 16px !important; }
.rddh-tier-price { font-family: var(--ff); font-weight: 400; font-size: 1.95rem; color: var(--ink) !important; line-height: 1; }
.rddh-tier-price-row span:last-child { font-family: var(--fu); font-weight: 600; font-size: .78rem; color: var(--fnt) !important; }
.rddh-tier-divider { height: 1px; background: var(--bdr); margin: 0 0 14px !important; }
.rddh-tier-card-featured .rddh-tier-divider { background: var(--bdrl); }
.rddh-tier-save { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: .8rem; font-weight: 700; color: var(--grn) !important; margin-top: auto !important; }
.rddh-tier-save-muted { color: var(--fnt) !important; font-weight: 600; }
.rddh-tier-note { font-size: .82rem; color: var(--fnt) !important; border-top: 1px solid var(--bdr); text-align: center; }

@media (max-width: 560px) {
  .rddh-tier-grid > .rddh-tier-card { flex: 1 1 100% !important; max-width: 360px !important; }
  .rddh-tier-card-featured { transform: none !important; }
  .rddh-tier-card-featured:hover { transform: translateY(-4px) !important; }
}

/* ── 8. (Data Dictionary CSS, including its mobile rule, lives in section
   6.5 above — this used to be a second, unused duplicate block here with
   its own tier-class naming the template never actually output, which is
   the reason completeness colors always fell back to green regardless of
   the real percentage. Coloring itself has since moved to inline styles
   computed in PHP, for exactly the same reason: more reliable than
   depending on a CSS custom-property class matching.) ── */

/* ── 9. PROSE ───────────────────────────────────────────────────────────── */
.rddh-prose     { font-size: .95rem; color: var(--mut) !important; line-height: 1.85; }
.rddh-prose p   { margin-bottom: 13px !important; }

/* ── 10. FIELDS GRID ────────────────────────────────────────────────────── */
.rddh-fields-grid { display: flex !important; flex-wrap: wrap !important; gap: 9px !important; }
.rddh-field-chip  {
  background: var(--sl); border: 1px solid var(--bdr);
  border-radius: var(--r); padding: 7px 14px !important;
  font-size: .8rem; font-weight: 600; color: var(--ink) !important;
  display: flex !important; align-items: center !important; gap: 5px !important;
}

/* ── 10.5. METHODOLOGY ("How this database is built") ─────────────────────
   3 steps, each either the site-wide default (RDDH_DB::get_methodology())
   or this database's own custom override — see rddh_methodology meta and
   the "Methodology Defaults" card in Settings. A default that's later
   edited in Settings propagates to every database still using it; a
   database with its own custom text is never touched by that. */
.rddh-pipeline { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; }
.rddh-pipeline-step { position: relative !important; padding: 0 28px !important; }
.rddh-pipeline-step:first-child { padding-left: 0 !important; }
.rddh-pipeline-step:last-child { padding-right: 0 !important; }
.rddh-pipeline-step:not(:last-child)::after { content: ''; position: absolute !important; top: 0; right: 0; bottom: 0; width: 1px; background: var(--bdr); }
.rddh-pipeline-num { font-family: var(--ff); font-weight: 400; font-size: 1.1rem; color: var(--rpm) !important; margin-bottom: 14px !important; }
.rddh-pipeline-step h4 { font-size: 1.05rem; margin-bottom: 10px !important; font-family: var(--fu); font-weight: 700; color: var(--ink) !important; }
.rddh-pipeline-step p { font-size: .9rem; color: var(--mut) !important; line-height: 1.75; }
@media (max-width: 900px) {
  .rddh-pipeline { grid-template-columns: 1fr !important; gap: 32px !important; }
  .rddh-pipeline-step { padding: 0 0 0 24px !important; border-left: 1px solid var(--bdr); }
  .rddh-pipeline-step::after { display: none !important; }
}

/* ── 11. UPDATE HISTORY (timeline) ─────────────────────────────────────────
   rddh_changelog meta — entries are either auto-generated on file replace
   or added manually in the admin (see "Update History" card in edit-
   database.php); both render identically here, only "public" ones show. */
.rddh-timeline { max-width: 680px; }
.rddh-tl-entry { display: grid !important; grid-template-columns: 110px 1fr auto !important; align-items: baseline !important; gap: 20px !important; padding: 16px 0 !important; border-bottom: 1px solid var(--sl2); }
.rddh-tl-entry:last-child { border-bottom: none; }
.rddh-tl-date { font-size: .8rem; font-weight: 700; color: var(--rp) !important; }
.rddh-tl-summary { font-size: .9rem; color: var(--mut) !important; }
.rddh-tl-stats { display: flex !important; gap: 10px !important; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.rddh-tl-add { color: var(--grn) !important; } .rddh-tl-rem { color: #dc2626 !important; }
@media (max-width: 600px) { .rddh-tl-entry { grid-template-columns: 1fr !important; gap: 4px !important; } }

/* ── 12. TAGS ───────────────────────────────────────────────────────────── */
.rddh-tags-row   { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 8px !important; }
.rddh-tags-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--fnt) !important; margin-right: 6px !important; }
.rddh-tag-badge  {
  font-size: .8rem; font-weight: 600; padding: 6px 14px !important; border-radius: var(--pill);
  background: var(--rpl); border: 1px solid var(--bdrl); color: var(--rpd) !important; transition: all .15s;
}
.rddh-tag-badge:hover { border-color: var(--rp); background: var(--rpt); }

/* ── 13. FAQ — smooth JS-driven accordion (not native details/summary) ──── */
.rddh-faq { max-width: 720px; margin: 0 auto !important; }
.rddh-faq-item { border-bottom: 1px solid var(--bdr); }
.rddh-faq-q {
  all: unset; box-sizing: border-box; width: 100%;
  display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important;
  padding: 20px 0 !important; cursor: pointer; font-size: .95rem; font-weight: 700; color: var(--ink) !important;
  text-align: left; font-family: inherit; transition: color .22s ease;
  background: transparent !important; -webkit-tap-highlight-color: transparent !important;
}
.rddh-faq-q:hover,
.rddh-faq-q:active,
.rddh-faq-q:visited { background: transparent !important; }
.rddh-faq-q:hover { color: var(--rp) !important; }
.rddh-faq-q:focus { outline: none; background: transparent !important; }
.rddh-faq-q:focus-visible { outline: 2px solid var(--rp); outline-offset: 4px; border-radius: 4px; background: transparent !important; }
.rddh-faq-q svg { flex-shrink: 0 !important; transition: transform .22s ease; color: var(--fnt) !important; }
.rddh-faq-item.rddh-faq-open .rddh-faq-q svg { transform: rotate(45deg); }
/* The answer wrapper animates max-height from 0 -> its natural scrollHeight
   (set inline via JS), the most broadly-compatible way to get a smooth
   expand/collapse — native <details> snaps open/closed with no animation
   in the vast majority of currently-shipping browsers. */
.rddh-faq-a-wrap { max-height: 0; overflow: hidden !important; transition: max-height .25s ease; }
.rddh-faq-a-inner { padding: 0 0 20px !important; font-size: .9rem; color: var(--mut) !important; line-height: 1.8; max-width: 64ch; }

/* ── 14. RESEARCH CTA ───────────────────────────────────────────────────── */
.rddh-research-cta { background: var(--rpd); padding: 40px 6vw !important; }
.rddh-research-cta-inner {
  max-width: 1200px; margin: 0 auto !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 24px !important; flex-wrap: wrap !important;
}
.rddh-research-cta h3 { font-family: var(--ff); font-size: 1.6rem; color: #fff !important; margin-bottom: 6px !important; }
.rddh-research-cta p  { font-size: .92rem; color: rgba(255,255,255,.68) !important; max-width: 500px; }

/* CTA button — fully isolated so theme can't add underline */
.rddh-cta-btn {
  display: inline-block !important;
  background: #fff !important; color: var(--rp) !important;
  padding: 14px 30px !important; border-radius: var(--r) !important;
  font-family: var(--fu) !important; font-weight: 800 !important;
  font-size: .94rem !important; white-space: nowrap !important;
  border: none !important; cursor: pointer !important;
  transition: background .2s, transform .2s var(--ease) !important;
  text-decoration: none !important;
}
.rddh-cta-btn:hover {
  background: var(--rpt) !important;
  transform: translateY(-2px) !important;
  text-decoration: none !important;
  color: var(--rp) !important;
}

/* ── 15. FOOTER ─────────────────────────────────────────────────────────── */
.rddh-footer { background: var(--ink); padding: 28px 6vw !important; border-top: 1px solid rgba(255,255,255,.06); }
.rddh-footer-inner {
  max-width: 1200px; margin: 0 auto !important;
  display: flex !important; align-items: center !important; gap: 20px !important; flex-wrap: wrap !important;
}
.rddh-footer-logo-link { display: inline-block !important; text-decoration: none !important; }
.rddh-footer-logo-link img { display: block !important; }
.rddh-footer-links     { display: flex !important; gap: 20px !important; margin-left: auto !important; }
.rddh-footer-links a   { color: rgba(255,255,255,.45) !important; font-size: .82rem; }
.rddh-footer-links a:hover { color: #fff !important; text-decoration: none !important; }
.rddh-footer-note      { color: rgba(255,255,255,.25) !important; font-size: .76rem; width: 100%; }

/* ── 16. HUB PAGE ───────────────────────────────────────────────────────── */
.rddh-hub-hero { background: var(--rpd); padding: 52px 6vw !important; text-align: center; }
.rddh-hub-hero h1 { font-family: var(--ff); font-size: clamp(2rem,4vw,3rem); color: #fff !important; margin-bottom: 10px !important; }
.rddh-hub-hero p  { color: rgba(255,255,255,.68) !important; font-size: 1rem; max-width: 520px; margin: 0 auto 28px !important; }

/* ── 17. MISC ───────────────────────────────────────────────────────────── */
/* Lives at the top of .rddh-widget-full-inner now, directly above the
   "Live Preview & Purchase" label (previously its own .rddh-content-wrap
   section between the hero stats and this widget — that wrapper's generic
   36px/80px padding, stacked with this section's own 32px top padding,
   left the button floating alone with no visual relationship to anything
   around it). text-align:center is declared here explicitly rather than
   assumed inherited (see handoff §3.5) since .rddh-btn is inline-flex and
   would otherwise sit left-aligned inside this block-level wrapper. */
.rddh-pdf-download { text-align: center !important; margin: 0 0 18px !important; }

/* ── 18. MOBILE ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .rddh-hero-title { font-size: clamp(1.5rem, 5vw, 2rem); }
  .rddh-content-wrap { padding: 28px 5vw 100px !important; } /* extra bottom for sticky bar */
  .rddh-stats-bar-inner { flex-wrap: wrap !important; border: 1px solid var(--bdrl); border-radius: var(--rl); overflow: hidden; }
  .rddh-stat-item   { min-width: calc(50% - 1px); padding: 20px 14px !important; border-right: 1px solid var(--bdrl); border-bottom: 1px solid var(--bdrl); }
  .rddh-stat-item::after { display: none !important; }
  .rddh-stat-item:nth-child(even)  { border-right: none; }
  .rddh-stat-item:nth-last-child(-n+2) { border-bottom: none; }
  .rddh-hero-inner-split { flex-direction: column !important; margin-top: 20px !important; }
  .rddh-hero-buy { flex: 1 1 auto !important; width: 100%; max-width: none; margin-top: 0 !important; }
}

@media (max-width: 560px) {
  .rddh-hero-buy { align-self: center !important; max-width: 460px; margin-left: auto !important; margin-right: auto !important; }
  .rddh-hero-buy-eyebrow, .rddh-hero-buy-note { text-align: center; }
  .rddh-hero-buy-price-row { justify-content: center !important; }
  .rddh-hero-buy-discount-tag { justify-content: center !important; }
}

@media (max-width: 640px) {
  /* Nav */
  .rddh-nav-toggle  { display: flex !important; align-items: center !important; }
  .rddh-nav-links {
    display: none !important; flex-direction: column !important; align-items: flex-start !important;
    position: absolute !important; top: 60px; left: 0; right: 0;
    background: var(--rpd); padding: 16px 6vw !important; gap: 14px !important; z-index: 850 !important;
  }
  .rddh-nav-links.rddh-nav-open { display: flex !important; }
  .rddh-nav-link    { font-size: 1.05rem; }

  /* Hero */
  .rddh-hero        { padding: 28px 5vw 32px !important; }
  .rddh-hero-desc   { font-size: .92rem; }

  /* Breadcrumb */
  .rddh-breadcrumb-inner { font-size: .74rem; }

  /* CTA */
  .rddh-research-cta-inner { flex-direction: column !important; text-align: center; }
  .rddh-cta-btn { width: 100% !important; text-align: center !important; }

  /* Footer */
  .rddh-footer-links { margin-left: 0 !important; flex-wrap: wrap !important; gap: 12px !important; }

  /* Content wrap */
  .rddh-content-wrap { padding: 24px 5vw 110px !important; }

  /* Widget tray */
  .rddh-widget-full-section { padding: 20px 0 36px !important; }
}