/* ==========================================================================
   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 ───────────────────────────────────────────────────── */
/* v1.8.24.36: simplified drastically after the dropdown-based version was
   replaced entirely (see templates/single-database.php's own v1.8.24.36
   comments) — .rddh-share-btn/.rddh-share-btn--icon now style two plain
   in-flow anchors (hero + sticky bar) that just scroll down to the
   dedicated #rddh-share-section, nothing else. The old .rddh-share-wrap
   (absolute positioning), .rddh-share-menu* (dropdown), and their mobile-
   specific override block are gone — there's no menu to position or
   toggle anymore, so there's nothing left in that bug class to reintroduce
   by accident later. */
.rddh-hero-inner { position: relative !important; }
.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 { border-color: var(--rpm); color: var(--rpm) !important; background: var(--rpl); }
/* Icon-only variant — circular, fixed size, no gap/label to lay out. */
.rddh-share-btn--icon {
  width: 38px; height: 38px; padding: 0 !important; justify-content: center !important;
  flex-shrink: 0; /* holds its size even as a flex child of .rddh-hero-badges, which wraps */
}

/* Dedicated "Share this database" section — v1.8.24.37: given its own
   bounded "card" treatment (background tint, padding, radius) instead
   of floating as bare text+icons directly on the page background. This
   was the actual "inconsistent/unprofessional" issue: EVERY other
   module on this page by now (the data panel, pricing card, Methodology
   cards, Related cards) is a bounded card component — this was the one
   exception, which made it read as an unfinished placeholder next to
   the rest rather than a deliberate design choice, especially obvious
   once stacked directly above the equally-boxed Related cards. Light
   brand-tint background (not stark white) so it doesn't just look like
   a plain box, but a distinct "CTA-weight" module — the same visual
   register a "spread the word" ask deserves. */
.rddh-share-section {
  background: linear-gradient(180deg, var(--rpl) 0%, var(--sl) 100%);
  border: 1px solid var(--bdrl); border-radius: 24px;
  padding: 48px 32px 40px !important;
}
.rddh-share-icons-row {
  display: flex !important; flex-wrap: wrap !important; justify-content: center !important;
  gap: 20px 28px !important; padding: 8px 0 4px;
}
.rddh-share-icon-btn {
  display: flex !important; flex-direction: column !important; align-items: center !important;
  gap: 8px !important; min-width: 64px; background: none; border: 0; cursor: pointer;
  text-decoration: none !important; font-family: var(--fu);
}
.rddh-share-icon-circle {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--wh); border: 1px solid var(--bdr); color: var(--mut);
  box-shadow: 0 1px 2px rgba(17,24,39,.05);
  transition: border-color .15s, color .15s, background .15s, transform .15s, box-shadow .15s;
}
.rddh-share-icon-btn:hover .rddh-share-icon-circle {
  border-color: var(--rpm); color: var(--rpm); background: #fff; transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(17,24,39,.10);
}
.rddh-share-icon-label {
  font-size: .76rem; font-weight: 700; color: var(--ink) !important;
}
@media (max-width: 640px) {
  /* v1.8.24.37: tightened card padding on phones so the tint/border
     doesn't read as an oversized gutter around a small icon row —
     everything inside still keeps the same generous tap-target sizing.
     Icon row gap tightened slightly too (row centers/wraps fine from
     its own base rule already) so it doesn't feel sparse with only
     2-3 icons per line at this width. */
  .rddh-share-section { padding: 36px 20px 30px !important; border-radius: 20px; }
  .rddh-share-icons-row { gap: 16px 22px !important; }
  .rddh-share-icon-circle { width: 46px; height: 46px; }
}

/* ── 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%;
}
/* v1.8.24.36: transparent wrapper on desktop (display:contents removes it
   from layout entirely, so .rddh-dict-sample still lands directly in the
   row's 3rd grid column exactly as before) — only becomes a real block,
   with its own mobile-only label above it, inside the mobile breakpoint
   below. Mirrors .rddh-dict-mobile-label's own default-hidden pattern. */
.rddh-dict-sample-wrap { display: contents; }
/* v1.8.24.36: mobile-only column labels — direct fix for "Data
   Dictionary section is not fully optimized." Root cause: the mobile
   breakpoint below stacks each row's 3 columns (Field / Completeness /
   Sample) into a single vertical column AND hides the header row
   entirely (.rddh-dict-head{display:none}), which was the only thing
   naming those columns — so on mobile a row rendered as three unlabeled
   stacked pieces with no way to tell "72%" was a completeness score or
   what the monospace box below it represented. These labels exist ONLY
   to fill that gap: hidden by default (desktop already has the real
   header row), shown only in the same breakpoint that hides it. */
.rddh-dict-mobile-label {
  display: none;
  font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--fnt) !important;
}
.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) {
  /* v1.8.24.36: each row now reads as a proper labeled mobile "card"
     instead of three unlabeled stacked pieces — see
     .rddh-dict-mobile-label's own docblock above for the root cause this
     fixes. Panel/row padding also tightened (24px was noticeably tight
     against a ~375px viewport once everything stacks to full width) and
     rows get a light card treatment (background + radius + their own
     bottom margin) so each field visually separates from the next,
     since the border-bottom-only separator that works fine for slim
     desktop rows reads as far too subtle once each row is this much
     taller. */
  .rddh-dict-panel { border: none !important; border-radius: 0 !important; }
  .rddh-dict-row {
    grid-template-columns: 1fr !important; gap: 10px !important;
    padding: 14px 16px !important; background: var(--sl); border: 1px solid var(--bdrl) !important;
    border-radius: 14px !important; margin-bottom: 10px !important;
  }
  .rddh-dict-row:last-child { margin-bottom: 0 !important; }
  .rddh-dict-head { display: none !important; }
  .rddh-dict-mobile-label { display: block !important; margin-bottom: 4px; }
  .rddh-dict-field { font-size: .96rem; }
  .rddh-dict-fill { flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; }
  .rddh-dict-fill .rddh-dict-bar-track { width: 100%; }
  .rddh-dict-sample-wrap { display: flex !important; flex-direction: column !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. */
/* v1.8.24.37: Methodology section rebuilt as real equal-height cards —
   direct feedback: desktop felt "cramped, inconsistent height," mobile
   read as a completely different (bare, left-border-only) treatment of
   the same content — the two breakpoints not even looking like the same
   component was a big part of why the whole section read as
   unprofessional. Same card component now at every width, just
   reflowed from a row to a stack; flex column + stretch is what
   actually solves "inconsistent height" (the old version's div>divider
   line was cosmetic and never made the CONTENT area even) — each
   card's heading+body sit in a flex-column that fills the full card
   height, so all three bottoms land flush regardless of how much each
   step's body text happens to wrap to. */
.rddh-pipeline { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 22px !important; align-items: stretch !important; }
.rddh-pipeline-step {
  display: flex !important; flex-direction: column !important; gap: 14px !important;
  background: var(--wh); border: 1px solid var(--bdrl); border-radius: 18px;
  padding: 30px 28px !important; box-shadow: 0 1px 3px rgba(17,24,39,.05);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.rddh-pipeline-step:hover { box-shadow: 0 10px 28px rgba(17,24,39,.09); transform: translateY(-3px); border-color: var(--rpm); }
.rddh-pipeline-num {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0 !important;
  background: var(--rpl); color: var(--rpm) !important;
  font-family: var(--fu); font-weight: 800; font-size: .92rem; margin-bottom: 2px !important;
}
.rddh-pipeline-step h4 { font-size: 1.08rem; margin: 0 !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; margin: 0 !important; flex: 1 !important; }
@media (max-width: 900px) {
  /* Same cards, single column — no separate "mobile treatment" for this
     section anymore, which is the actual fix for the two breakpoints
     not visually matching. */
  .rddh-pipeline { grid-template-columns: 1fr !important; gap: 16px !important; }
  .rddh-pipeline-step { padding: 24px 22px !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 icon: v1.8.24.36 — no longer needs a fix here. It's a plain
     flex child of .rddh-hero-badges now (that row already wraps freely
     at any width), not an absolutely-positioned overlay that used to
     need its own mobile-specific repositioning rule. Kept as an empty
     anchor comment rather than deleted outright, so a future reader
     hitting a mobile share-layout bug knows this is exactly the spot
     the old fragile version lived and won't waste time re-discovering
     that history. Card container sizing/padding for this section now
     lives in one place, right after .rddh-share-section's own base
     rule above, instead of split across two media queries. */

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