/* ==========================================================================
   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); }

/* ── 4b. SHARE BUTTON ───────────────────────────────────────────────────── */
/* Absolutely positioned against .rddh-hero-inner (given position:relative
   just below) rather than .rddh-hero itself, so it aligns to the same
   1200px-max-width content column as everything else in the hero instead
   of the section's full-bleed edge. */
.rddh-hero-inner { position: relative !important; }
.rddh-share-wrap { position: absolute !important; top: 0; right: 0; z-index: 20; }
/* v1.8.24.32: the sticky-bar instance of this same widget is a normal
   flex child of .rddh-sticky-actions, not a hero-corner overlay — the
   base rule above (absolute, pinned top-right) would be actively wrong
   here, so this resets it back to participating in that flex row like
   its sibling buttons. */
.rddh-share-wrap--sticky { position: relative !important; top: auto; right: auto; z-index: auto; }
.rddh-share-btn {
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  background: var(--wh); color: var(--mut) !important; border: 1px solid var(--bdr);
  font-family: var(--fu); font-size: .78rem; font-weight: 700;
  padding: 7px 14px !important; border-radius: var(--pill); cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.rddh-share-btn:hover,
.rddh-share-btn[aria-expanded="true"] { border-color: var(--rpm); color: var(--rpm) !important; background: var(--rpl); }
/* v1.8.24.32: icon-only variant — used in the hero on mobile (was a
   text pill; shrunk since the same trigger now also lives in the
   sticky bar, so the hero one doesn't need to carry a label to be
   understood — a lone share glyph at this size is an established
   enough pattern). Circular, fixed size, no gap/label to lay out. */
.rddh-share-btn--icon {
  width: 38px; height: 38px; padding: 0 !important; justify-content: center !important;
}
.rddh-share-menu {
  display: none; position: absolute !important; top: calc(100% + 8px); right: 0;
  min-width: 190px; background: var(--wh); border: 1px solid var(--bdrl);
  border-radius: var(--rl); box-shadow: 0 12px 32px rgba(17,24,39,.12);
  padding: 6px !important; z-index: 30;
}
.rddh-share-menu.rddh-share-menu-open { display: block; }
/* v1.8.24.32: the sticky bar sits at the bottom of the viewport — a
   menu opening downward from a trigger there would render off-screen.
   [data-menu-align="up"] flips it to open upward instead, from the
   same wrapper markup/JS everything else uses. */
[data-menu-align="up"] .rddh-share-menu { top: auto; bottom: calc(100% + 8px); }
/* The sticky-bar trigger sits near the LEFT edge of a narrow mobile
   bar (Share is the first of three icons/buttons there) — the base
   rule's `right: 0` grows the menu LEFTWARD from the trigger, which
   overflows off the left edge of the viewport at that position.
   Growing rightward instead keeps it on-screen. Caught by actually
   rendering this at 375px width, not assumed from the desktop layout
   where right-alignment is correct (trigger sits at the far right
   there). */
[data-menu-align="up"] .rddh-share-menu { left: 0; right: auto; }
.rddh-share-menu-item {
  display: flex !important; align-items: center !important; gap: 10px !important;
  width: 100%; background: none; border: 0; text-align: left; text-decoration: none;
  font-family: var(--fu); font-size: .84rem; font-weight: 600; color: var(--ink) !important;
  padding: 9px 10px !important; border-radius: 8px; cursor: pointer; transition: background .12s;
}
.rddh-share-menu-item:hover { background: var(--sl2); }
.rddh-share-menu-item svg { flex-shrink: 0; color: var(--mut); }

/* ── 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; }

  /* Share button: floating top-right overlaps the badges/title at this
     width, so it drops into normal flow above them instead — same button,
     just no longer absolutely positioned.
     v1.8.24.32 fix: this was `position: static`, which meant the child
     .rddh-share-menu (position: absolute) lost its positioning context
     entirely and fell back to the next positioned ancestor up the tree
     — .rddh-hero-inner, which spans the ENTIRE hero section height — so
     `top: 100%` resolved against that tall container instead of the
     button, stranding the menu far down the page near the pricing card.
     `position: relative` keeps the wrap in normal document flow (still
     stacks above the badges) while remaining a valid containing block
     for the menu, so it anchors right below the button again. Caught
     from an actual screenshot of the live bug, not found in review. */
  .rddh-share-wrap { position: relative !important; display: flex !important; justify-content: flex-end !important; margin-bottom: 14px !important; }
  .rddh-share-menu { right: 0; }

  /* 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; }
}