/* ============================================================
   DISRUPTION BANKING — DESIGN SYSTEM (non-Elementor-Pro layer)
   Ported verbatim from the approved index.html design system.
   Elementor's Global Colors/Fonts (Kit #17730) already hold the
   token values below — this file exists only for the handful of
   patterns Elementor's Style Kit cannot express natively.
   ============================================================ */
/* ---- Elementor Kit tokens --------------------------------------------------------------------------------
 * On staging these were saved INTO the site's Elementor Kit (Site Settings). Production's Kit still has the old
 * brand values (blue/Montserrat), and editing it would restyle every legacy page the moment we deploy — so the
 * October'26 tokens are defined here instead, scoped to the pages that load this stylesheet. Elementor's own
 * widgets/templates read them through --e-global-* variables, so no template data has to change. */
body[class*="elementor-kit-"] {
  --e-global-color-primary: #08141C; --e-global-color-secondary: #0A8CBC; --e-global-color-text: #35434A; --e-global-color-accent: #F5D23A;
  --e-global-color-db-blue: #0BA6DC; --e-global-color-db-deep-blue: #062B3A; --e-global-color-db-light-blue: #EAF8FC;
  --e-global-color-db-warm-white: #FAFAF6; --e-global-color-db-light-grey: #EEF1F2; --e-global-color-db-mid-grey: #87939A; --e-global-color-db-white: #FFFFFF;
  --e-global-typography-primary-font-family: "Space Grotesk"; --e-global-typography-primary-font-weight: 700;
  --e-global-typography-secondary-font-family: "Space Grotesk"; --e-global-typography-secondary-font-weight: 500;
  --e-global-typography-text-font-family: "Inter"; --e-global-typography-text-font-weight: 400;
  --e-global-typography-accent-font-family: "IBM Plex Mono"; --e-global-typography-accent-font-weight: 700;
  --e-global-typography-db-display-font-family: "Space Grotesk"; --e-global-typography-db-display-font-weight: 700;
  --e-global-typography-db-body-font-family: "Inter"; --e-global-typography-db-body-font-weight: 400;
  --e-global-typography-db-mono-font-family: "IBM Plex Mono"; --e-global-typography-db-mono-font-weight: 600;
  --container-max-width: 1360px;
}

:root {
  --db-blue: #0BA6DC;
  --db-blue-dim: #0a8cbc;
  --db-yellow: #F5D23A;
  --db-ink: #08141C;
  --db-deep-blue: #062B3A;
  --db-light-blue: #EAF8FC;
  --db-warm-white: #FAFAF6;
  --db-light-grey: #EEF1F2;
  --db-mid-grey: #87939A;
  --db-dark-grey: #35434A;
  --db-white: #FFFFFF;

  --db-font-display: 'Space Grotesk', -apple-system, sans-serif;
  --db-font-body: 'Inter', -apple-system, sans-serif;
  --db-font-mono: 'IBM Plex Mono', monospace;

  --db-fast: 180ms cubic-bezier(.16,.8,.24,1);
  --db-mid: 420ms cubic-bezier(.16,.8,.24,1);
  --db-slow: 760ms cubic-bezier(.16,.8,.24,1);
}

/* Visually hidden but still readable by search engines/screen readers — used
   where a real, page-describing H1 is needed for SEO/accessibility but a
   giant visible heading doesn't fit the design (e.g. a magazine-style
   homepage whose visual lead is really an article teaser, not the page's H1). */
.db-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---- Eyebrow / meta utilities (Section 2 — Utility components) ---- */
.db-eyebrow {
  font-family: var(--db-font-mono); font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 700;
}
.db-dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--db-mid-grey); margin: 0 8px; vertical-align: middle; }

.db-cat-tag {
  font-family: var(--db-font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
  color: var(--db-blue-dim); position: relative; padding-left: 12px; display: inline-block;
}
.db-cat-tag::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; background: var(--db-yellow); }

.db-meta-row { display: flex; align-items: center; gap: 0; font-family: var(--db-font-mono); font-size: 11.5px; color: var(--db-dark-grey); flex-wrap: wrap; }

.db-tag {
  display: inline-flex; align-items: center; font-family: var(--db-font-mono); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase;
  border: 1px solid var(--db-dark-grey); padding: 5px 12px; color: var(--db-dark-grey); background: transparent; transition: all var(--db-fast); font-weight: 600;
}
.db-tag:hover { border-color: var(--db-blue); color: var(--db-blue-dim); }
.db-tag.db-active { background: var(--db-ink); border-color: var(--db-ink); color: var(--db-warm-white); }

/* ---- Buttons (Section 3 — Global Widgets deferred until Pro is back;
       ship as classes any native Button/Text widget can carry now) ---- */
.db-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--db-font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
  padding: 12px 22px; border: 1.5px solid var(--db-ink) !important; background: transparent; color: var(--db-ink) !important;
  transition: background var(--db-fast), color var(--db-fast), border-color var(--db-fast);
}
/* Base state needs !important too, not just :hover below — a real
   <button type="button"> (e.g. "Load more results") ties on specificity
   with the legacy `[type=button]{color:#ED3F41;border:1px solid #ED3F41}`
   at REST, not just on hover, and loses the tie since that CSS loads later. */
/* !important throughout this block: real <button> elements (form submits,
   the search/burger icons) are hit by the site's own legacy Additional CSS
   (`button:hover{background:#ED3F41!important}`, written for the old design)
   — harmless to keep the !important here even on the <a>-based buttons it
   doesn't actually reach. */
/* Element-qualified (a.db-btn / button.db-btn), not just `.db-btn`: the
   legacy Elementor page CSS's hover rule is
   `[type="button"]:hover, [type="submit"]:hover, button:hover { background:#ED3F41 !important }`
   — for a plain <button class="db-btn"> (no .db-primary/.db-yellow/.db-on-dark
   modifier, e.g. "Load more articles/results") that's `[type="button"]:hover`,
   specificity (0,2,0), exactly tying our unqualified `.db-btn:hover` — and the
   legacy rule loads later (inline, near the end of <head>), so it won the tie
   and the button showed the old red on hover. Adding the element type here
   bumps us to (0,2,1), a clean win regardless of load order. Every modifier
   variant below (.db-primary/.db-on-dark/.db-yellow) was already safe — two
   classes plus the pseudo-class is (0,3,0), already ahead of the tie. */
a.db-btn:hover, button.db-btn:hover { background: var(--db-ink) !important; color: var(--db-warm-white) !important; }
/* !important on every modifier's color/border-color below too — the base
   .db-btn rule above now carries !important (needed to beat the legacy
   [type=button] rule at rest, not just on :hover), and !important always
   wins over a plain declaration regardless of specificity. Without matching
   !important here, .db-primary/.db-on-dark/.db-yellow's own color got
   silently overridden back to the base ink color (found as a real bug:
   the header Subscribe button rendered ink-on-ink, invisible). */
.db-btn.db-primary { background: var(--db-ink); color: var(--db-warm-white) !important; border-color: var(--db-ink) !important; }
.db-btn.db-primary:hover { background: var(--db-blue) !important; border-color: var(--db-blue) !important; color: var(--db-ink) !important; }
.db-btn.db-on-dark { border-color: rgba(255,255,255,.5) !important; color: var(--db-white) !important; }
.db-btn.db-on-dark:hover { background: var(--db-yellow) !important; border-color: var(--db-yellow) !important; color: var(--db-ink) !important; }
.db-btn.db-yellow { background: var(--db-yellow); border-color: var(--db-yellow) !important; color: var(--db-ink) !important; }
.db-btn.db-yellow:hover { background: var(--db-ink) !important; border-color: var(--db-ink) !important; color: var(--db-yellow) !important; }

/* ---- Ghost-number rank list (Section 3 — Loop Item + CSS) ---- */
.db-rank-num {
  font-family: var(--db-font-display); font-size: 36px; font-weight: 800; color: transparent;
  -webkit-text-stroke: 1.5px var(--db-ink); line-height: 1; transition: color var(--db-fast);
}
.db-rank-item:hover .db-rank-num { color: var(--db-yellow); }

/* ---- Key Takeaways box (Section 9 — ships now, Theme Builder condition wired later) ---- */
.db-takeaways { background: var(--db-ink); color: var(--db-white); padding: 24px; border-top: 3px solid var(--db-yellow); max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; }
.db-takeaways .db-eyebrow { color: var(--db-yellow); margin-bottom: 12px; display: block; }
.db-takeaways ul { display: flex; flex-direction: column; gap: 14px; list-style: none; margin: 0; padding: 0; }
/* Guardrail: the dash used to be a flex sibling of the text, so a takeaway
   long enough to wrap lost its hanging indent — wrapped lines drifted left
   under the dash instead of lining up with the first line. A fixed-width
   indent + absolutely-positioned dash keeps every line aligned regardless
   of how long the sentence is. */
.db-takeaways li {
  position: relative;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(250,250,246,.9);
  max-width: 60ch;
  overflow-wrap: break-word;
  hyphens: auto;
}
.db-takeaways li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--db-yellow);
  font-weight: 700;
}

/* ---- Glued ticker stack (Section 3 — the one component with no native
       Elementor equivalent: a pausable dual infinite marquee) ---- */
.db-ticker-stack { background: var(--db-ink); display: flex; flex-direction: column; }
.db-ticker-row { display: flex; align-items: center; overflow: hidden; position: relative; height: 32px; }
.db-ticker-row.db-news { border-bottom: 1px solid rgba(255,255,255,.1); }
.db-ticker-flag {
  flex: 0 0 130px; display: flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--db-font-mono); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; height: 100%;
}
.db-ticker-flag.db-flag-news { background: var(--db-yellow); color: var(--db-ink); }
.db-ticker-flag.db-flag-markets { background: var(--db-deep-blue); color: var(--db-blue); }
.db-ticker-flag .db-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--db-ink); animation: db-pulse 1.6s infinite; }
@keyframes db-pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.db-ticker-track-wrap { flex: 1; overflow: hidden; white-space: nowrap; display: flex; align-items: center; }
.db-ticker-track { display: inline-flex; gap: 36px; white-space: nowrap; width: max-content; font-family: var(--db-font-mono); font-size: 11.5px; color: var(--db-warm-white); }
.db-ticker-track.db-play { animation: db-tickerscroll 38s linear infinite; }
@keyframes db-tickerscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.db-ticker-row:hover .db-ticker-track { animation-play-state: paused; }

/* TradingView ticker tape: the widget dictates its own internal layout, so
   give its row real height instead of forcing the 32px news-row height on it. */
.db-ticker-row.db-markets { height: auto; min-height: 46px; overflow: visible; align-items: stretch; background: var(--db-deep-blue); }
/* .db-ticker-flag's own `height:100%` (needed by the fixed-height news row)
   resolves to `auto` here because this row's height is itself content-driven
   — an indefinite percentage basis defeats align-items:stretch, so the flag
   just wraps its text instead of matching the taller TradingView widget.
   align-self:stretch + height:auto bypasses that and centers it properly. */
.db-ticker-row.db-markets .db-ticker-flag { height: auto; align-self: stretch; }
/* .db-ticker-track-wrap is display:flex for the news marquee, but TradingView's
   widget appends its own required attribution bar as a sibling div — inside a
   flex row that sibling splits 50/50 with the real ticker instead of stacking
   underneath it. Cancel the inherited flex here so it stacks normally, full width. */
.db-tv-wrap { display: block; flex: 1 1 0%; min-width: 0; overflow: hidden; white-space: normal; }
.db-tv-wrap, .tradingview-widget-container, .tradingview-widget-container__widget { width: 100%; }
/* TradingView's embed script doesn't actually fill .tradingview-widget-container__widget
   — it inserts the real ticker (an iframe with the ticker row + its mandatory
   attribution baked into the same frame, ~72px tall) as a NEW sibling element
   after .tradingview-widget-container, leaving that container permanently
   empty. Reserving a fixed 46px on it was pure dead space stacked above the
   real widget, which is why there was a gap and the ticker sat low. Let it
   collapse to its natural (empty) height instead. */
.db-tv-wrap .tradingview-widget-container { height: auto; }
.db-tv-wrap .tradingview-widget-container__widget:empty { display: none; }
/* Phones: TradingView stacks symbol / price / change into ~84px — a fixed 44px row cropped it to name + price, hiding the up/down change. Let the row take the widget's real height. */
@media (max-width: 480px) { .db-ticker-row.db-markets { height: auto; min-height: 84px; } }

/* ---- Hero hover-preview module (Section 3 — Loop Grid + JS) ---- */
.db-hover-frame { width: 100%; height: 180px; background: var(--db-ink); overflow: hidden; position: relative; margin-bottom: 16px; border: 1px solid var(--db-ink); }
.db-hover-frame img { width: 100%; height: 100%; object-fit: cover; transition: opacity 250ms ease, transform 400ms ease; }
.db-hover-badge { position: absolute; top: 12px; left: 12px; background: var(--db-yellow); color: var(--db-ink); font-family: var(--db-font-mono); font-size: 10px; font-weight: 800; padding: 4px 8px; text-transform: uppercase; }
.db-hover-item { padding: 10px 8px; border-bottom: 1px solid var(--db-light-grey); transition: all var(--db-fast); cursor: pointer; }
.db-hover-item:hover, .db-hover-item.db-active { background: var(--db-light-blue); padding-left: 14px; }

/* ---- Reveal-on-scroll (Section 1 — motion system) ---- */
.db-reveal { opacity: 0; transform: translateY(24px); transition: opacity 800ms cubic-bezier(.16,.8,.24,1), transform 800ms cubic-bezier(.16,.8,.24,1); }
.db-reveal.db-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .db-reveal { opacity: 1; transform: none; transition: none; }
  .db-ticker-track.db-play { animation: none; }
}

/* ---- Glossary card hover (Section 2 — distinct "notecard" hover language) ---- */
.db-glossary-card { background: var(--db-white); border: 1px solid var(--db-ink); padding: 20px; transition: all var(--db-fast); text-decoration: none; display: block; color: inherit; }
.db-glossary-card:hover { border-color: var(--db-blue); box-shadow: 4px 4px 0px var(--db-blue); }

/* ============================================================
   PHASE 7 — GLOSSARY INDEX / TERM
   ============================================================ */
.db-glossary-search-bar { background: var(--db-white); border: 2px solid var(--db-ink); padding: 14px 20px; margin: 24px 0; display: flex; gap: 14px; align-items: center; }
.db-glossary-input { width: 100%; border: none; font-family: var(--db-font-display); font-size: 1.15rem; outline: none; background: transparent; }
.db-az-nav { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 32px; }
.db-az-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--db-light-grey); font-family: var(--db-font-mono); font-weight: 700; font-size: .85rem; cursor: pointer; background: var(--db-white); }
.db-az-btn:hover, .db-az-btn.db-active { background: var(--db-ink) !important; color: var(--db-yellow) !important; border-color: var(--db-ink) !important; }
.db-glossary-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }

.db-term-hero { padding: 44px 0 32px; border-bottom: 1.5px solid var(--db-ink); }
.db-term-hero h1 { font-family: var(--db-font-display); font-size: clamp(32px,5.5vw,76px); font-weight: 800; letter-spacing: -.02em; margin-top: 10px; line-height: 1; }
.db-term-hero .db-def { margin-top: 18px; font-size: 18px; color: var(--db-dark-grey); max-width: 60ch; line-height: 1.6; }
.db-term-body { display: grid; grid-template-columns: 1fr 300px; gap: 48px; padding: 48px 0; }
.db-term-body.db-term-body--full { grid-template-columns: 1fr; max-width: 74ch; }
.db-term-main section { margin-bottom: 44px; }
.db-term-main h2 { font-family: var(--db-font-display); font-size: 24px; font-weight: 700; margin-bottom: 14px; }
.db-diagram-box { border: 1px solid rgba(8,20,28,.12); padding: 24px; margin-top: 20px; background: var(--db-light-grey); }
.db-flow-row { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.db-flow-step { flex: 1; min-width: 110px; background: var(--db-warm-white); border: 1.5px solid var(--db-ink); padding: 14px 10px; text-align: center; }
.db-flow-arrow { flex: 0 0 auto; padding: 0 6px; font-family: var(--db-font-mono); color: var(--db-blue-dim); font-size: 16px; font-weight: 700; }
.db-related-terms-web { display: flex; flex-direction: column; border: 1.5px solid var(--db-ink); }
.db-rt-item { padding: 14px 18px; border-bottom: 1px solid var(--db-ink); display: flex; justify-content: space-between; align-items: center; font-family: var(--db-font-display); font-size: 14.5px; font-weight: 700; background: var(--db-warm-white); transition: all var(--db-fast); text-decoration: none; color: var(--db-ink); }
.db-rt-item:last-child { border-bottom: none; }
.db-rt-item:hover { background: var(--db-yellow); color: var(--db-ink); padding-left: 22px; }
.db-rt-item .db-rt-arrow { transition: transform var(--db-fast); font-family: var(--db-font-mono); }
.db-rt-item:hover .db-rt-arrow { transform: translateX(4px); }
@media (max-width: 900px) { .db-term-body { grid-template-columns: 1fr; } }

/* ============================================================
   RESPONSIVE LAYOUT CLASSES
   These replace inline grid-template-columns in the shortcodes —
   an inline style can never be overridden by a media query, so the
   grids below MUST be classes, not style="" attributes.
   ============================================================ */
.db-hero-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 28px; }
.db-hero-grid > .db-lead { grid-column: 1 / 7; }
.db-hero-grid > .db-side { grid-column: 7 / 13; }
@media (max-width: 1100px) {
  .db-hero-grid { grid-template-columns: 1fr; }
  .db-hero-grid > .db-lead, .db-hero-grid > .db-side { grid-column: 1 / -1; }
}

.db-rich-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 1024px) { .db-rich-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .db-rich-grid { grid-template-columns: 1fr; } }
/* Wider "N-per-row" listings — category older-articles grid, and the
   recent-stories modules on 404/search/thank you. */
.db-rich-grid--5col { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1200px) { .db-rich-grid--5col { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1024px) { .db-rich-grid--5col { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .db-rich-grid--5col { grid-template-columns: 1fr; } }

.db-story-row { display: grid; grid-template-columns: 80px 140px 1fr; gap: 20px; align-items: start; padding: 18px 0; border-bottom: 1px solid rgba(8,20,28,.12); text-decoration: none; color: inherit; }
.db-story-row:hover { background: var(--db-light-blue); }
@media (max-width: 640px) { .db-story-row { grid-template-columns: 1fr; gap: 6px; } }

.db-desks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; border-top: 1.5px solid var(--db-ink); padding-top: 32px; }
@media (max-width: 900px) { .db-desks-grid { grid-template-columns: 1fr; gap: 28px; } }

.db-analysis-grid { display: grid; grid-template-columns: 1fr 1.1fr; min-height: 420px; }
@media (max-width: 860px) { .db-analysis-grid { grid-template-columns: 1fr; } .db-analysis-grid > div:first-child { min-height: 260px; } }

.db-nl-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
@media (max-width: 860px) { .db-nl-grid { grid-template-columns: 1fr; gap: 32px; } }

.db-rank-grid { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid rgba(8,20,28,.12); align-items: center; text-decoration: none; color: inherit; }

/* align-items:start is required for the sticky sidebar (see the aside's
   position:sticky below) to actually stick — CSS Grid's default
   align-items:stretch makes a grid item as tall as its row, leaving the
   sticky element no room to move within its own box, which reads as "it
   disappears under the header" once you scroll. */
.db-article-body { display: grid; grid-template-columns: 1fr 340px; gap: 48px; padding-top: 32px; align-items: start; }
@media (max-width: 900px) { .db-article-body { grid-template-columns: 1fr; } .db-article-body aside { position: static !important; } }

/* Single post: was inline style="..." on the shortcode's own markup, moved
   to real classes when the page was rebuilt as Elementor widgets — same
   values, just reusable/targetable now instead of baked into PHP strings. */
.db-post-h1 { font-family: var(--db-font-display); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; font-size: clamp(28px,4.2vw,50px); max-width: 22ch; margin: 0; }
.db-post-hero-image { margin-top: 24px; aspect-ratio: 16/8; overflow: hidden; background: var(--db-light-grey); }
.db-post-hero-image img { width: 100%; height: 100%; object-fit: cover; }
.db-prose { font-size: 17.5px; line-height: 1.7; color: var(--db-ink); }

.db-author-card-grid { display: grid; grid-template-columns: 90px 1fr; gap: 20px; }
@media (max-width: 900px) { .db-author-card-grid { grid-template-columns: 1fr; } }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.db-about-numbers { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1.5px solid var(--db-ink); border-bottom: 1.5px solid var(--db-ink); }
.db-about-numbers > div { padding: 28px 20px; border-left: 1px solid rgba(8,20,28,.12); }
.db-about-numbers > div:first-child { border-left: none; }
.db-about-numbers .db-num { font-family: var(--db-font-display); font-size: clamp(28px,3.5vw,44px); font-weight: 700; color: var(--db-blue-dim); }
.db-about-numbers .db-numlabel { font-family: var(--db-font-mono); font-size: 11px; text-transform: uppercase; color: var(--db-mid-grey); margin-top: 8px; }
@media (max-width: 860px) { .db-about-numbers { grid-template-columns: repeat(2, 1fr); } .db-about-numbers > div:nth-child(2n+1) { border-left: none; } }

/* Grid hairlines are drawn as real borders on the container (top/left) and
   each card (right/bottom) rather than a background peeking through a grid
   gap — that background-fill trick paints the WHOLE row's remaining cells
   solid ink when a row isn't full (e.g. 6 people = a 4 + 2 split), which is
   the "black box" on an incomplete last row. Borders only ever draw where a
   card actually exists, so a short last row just ends cleanly. */
.db-people-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--db-ink); border-left: 1px solid var(--db-ink); }
.db-person-card { background: var(--db-warm-white); padding: 24px 20px; border-right: 1px solid var(--db-ink); border-bottom: 1px solid var(--db-ink); transition: background var(--db-fast); text-decoration: none; color: inherit; display: block; }
.db-person-card:hover { background: var(--db-light-blue); }
.db-person-card .db-portrait { width: 100%; aspect-ratio: 1/1.1; overflow: hidden; background: var(--db-light-grey); filter: grayscale(1); transition: filter var(--db-fast); }
.db-person-card:hover .db-portrait { filter: grayscale(0); }
.db-person-card .db-portrait img { width: 100%; height: 100%; object-fit: cover; }
.db-person-card h3 { font-family: var(--db-font-display); font-size: 16px; font-weight: 700; margin-top: 14px; }
.db-person-card .db-role { font-family: var(--db-font-mono); font-size: 11px; color: var(--db-mid-grey); text-transform: uppercase; margin-top: 4px; display: block; }
@media (max-width: 980px) { .db-people-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .db-people-strip { grid-template-columns: 1fr; } }

/* "See more" contributors — height-animated reveal (see db-design-system.js
   for the scrollHeight measuring, the same approach used by the newsletter
   GDPR panel) rather than a hard show/hide, per the "nice and smooth" ask. */
.db-people-more-wrap { max-height: 0; overflow: hidden; transition: max-height .5s cubic-bezier(.4,0,.2,1); }
.db-people-more-wrap .db-people-strip { margin-top: 24px; }
#db-people-see-more { margin-top: 28px; }

.db-about-cta { background: var(--db-ink); color: var(--db-white); padding: 64px clamp(24px,4vw,56px); margin-top: 40px; }

/* ============================================================
   AUTHOR PROFILE
   ============================================================ */
.db-author-hero { display: grid; grid-template-columns: 300px 1fr; gap: 48px; padding: 48px 0 40px; border-bottom: 1.5px solid var(--db-ink); align-items: start; }
.db-author-photo-stack { position: relative; width: 100%; height: 340px; }
.db-author-photo-stack .db-photo-box { width: 100%; height: 100%; border: 2px solid var(--db-ink); overflow: hidden; position: relative; z-index: 2; background: var(--db-light-grey); }
.db-author-photo-stack .db-photo-box img { width: 100%; height: 100%; object-fit: cover; }
.db-author-photo-stack .db-yellow-accent { position: absolute; bottom: -10px; right: -10px; width: 100%; height: 100%; background: var(--db-yellow); border: 2px solid var(--db-ink); z-index: 1; }
.db-author-contact { background: var(--db-yellow); color: var(--db-ink); border: 1.5px solid var(--db-ink); padding: 14px 20px; margin-top: 20px; display: inline-flex; align-items: center; gap: 16px; font-family: var(--db-font-mono); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; text-decoration: none; }
.db-a-quick { margin-top: 24px; display: flex; gap: 28px; flex-wrap: wrap; }
.db-a-quick b { display: block; font-family: var(--db-font-display); font-size: 22px; color: var(--db-ink); font-weight: 700; }
.db-coverage-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 32px 0; border-bottom: 1px solid rgba(8,20,28,.12); }
@media (max-width: 800px) { .db-author-hero { grid-template-columns: 1fr; } .db-author-photo-stack { max-width: 240px; height: 280px; } }

/* ============================================================
   CONTACT US
   ============================================================ */
.db-contact-layout { display: grid; grid-template-columns: 1fr; gap: 48px; padding: 56px 0; }
@media (min-width: 992px) { .db-contact-layout { grid-template-columns: 5fr 7fr; } }
.db-contact-form { display: flex; flex-direction: column; gap: 18px; background: var(--db-white); padding: 32px; border: 1px solid var(--db-ink); }
.db-form-group { display: flex; flex-direction: column; gap: 6px; }
.db-form-label { font-family: var(--db-font-mono); font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.db-form-control { padding: 12px; border: 1px solid var(--db-ink); font-family: var(--db-font-body); font-size: .95rem; background: var(--db-warm-white); outline: none; }
.db-form-control:focus { border-color: var(--db-blue); background: var(--db-white); }

/* GDPR consent checkbox — one shared pattern for all three newsletter
   placements. On dark modules it inherits light text via .db-on-dark. */
.db-gdpr-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; line-height: 1.5; color: var(--db-dark-grey); cursor: pointer; max-width: 46ch; }
.db-gdpr-consent input[type="checkbox"] { flex: 0 0 auto; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--db-yellow); cursor: pointer; }
.db-gdpr-consent a { color: inherit; text-decoration: underline; }
.db-gdpr-consent.db-on-dark { color: rgba(250,250,246,.75); }
.db-gdpr-consent.db-on-dark a { color: var(--db-yellow); }

/* Collapsed until the visitor starts typing an email — then unfolds. See
   db-design-system.js: db-nl-wrapper forms reveal this on the email field's
   first input event, and disable their own submit button until checked. */
.db-gdpr-wrap { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 320ms ease, opacity 240ms ease; }
.db-gdpr-wrap.db-show { max-height: 120px; opacity: 1; margin: 4px 0 16px; }
.db-nl-submit:disabled { opacity: .45; cursor: not-allowed; }

/* Article/term body copy: the site's own legacy Additional CSS sets a blanket
   `a{color:#ED3F41}` (red) left over from the old design — this class-level
   rule (0,1,1 specificity) beats that bare element selector (0,0,1) without
   needing !important, so it's enough to just declare the color we want. */
.db-prose a { color: var(--db-blue-dim); text-decoration: underline; text-underline-offset: 2px; }
.db-prose a:hover { color: var(--db-blue); }

/* Enhanced Tooltip Glossary popup — real structure (confirmed by inspecting
   the live DOM): #tt.cmtt is the positioned wrapper, #ttcont is the content
   box the plugin's own JS fills in with an INLINE style (grey background,
   6px radius) — only !important in a stylesheet can beat that, plain
   specificity can't. #tttop/#ttbot are the plugin's decorative arrow parts.
   The plugin ALSO ships its own admin-configured overrides for the title/body
   text color as an inline <style> block with selectors like
   "#tt #ttcont div.glossaryItemTitle" (2 IDs + 1 class + 1 element) — when
   both sides use !important, raw specificity decides, so "#tt#tt" below
   repeats the same ID on purpose to out-rank it regardless of load order. */
#tt#tt.cmtt #ttcont#ttcont {
  background: var(--db-ink) !important;
  color: var(--db-warm-white) !important;
  border-radius: 0 !important;
  border-top: 3px solid var(--db-yellow) !important;
  font-family: var(--db-font-body) !important;
  box-shadow: 0 8px 24px rgba(8,20,28,.35) !important;
  padding: 16px !important;
}
#tt#tt.cmtt #ttcont#ttcont .glossaryItemTitle {
  font-family: var(--db-font-display) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--db-yellow) !important;
  margin-bottom: 8px !important;
}
#tt#tt.cmtt #ttcont#ttcont .glossaryItemBody, #tt#tt.cmtt #ttcont#ttcont .glossaryItemBody p {
  font-family: var(--db-font-body) !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  color: rgba(250,250,246,.9) !important;
  margin: 0 !important;
}
#tt.cmtt #tttop, #tt.cmtt #ttbot { display: none; } /* the plugin's default arrow doesn't match our square, bordered visual language */

/* The plugin's own admin-configured link color ships as an inline <style>
   block that loads AFTER ours and is also !important — with both sides
   !important, the tie-breaker is specificity, so this needs to out-specify
   "a.glossaryLink", not just match it. html/body scoping is the cheap way. */
html body a.glossaryLink, html body span.glossaryLink { color: var(--db-blue-dim) !important; border-bottom: 1px dotted var(--db-blue-dim) !important; text-decoration: none !important; cursor: help; }
html body a.glossaryLink:hover, html body span.glossaryLink:hover { color: var(--db-blue) !important; border-bottom-color: var(--db-blue) !important; }

/* Social Warfare's floating share bar is deliberately position:fixed to the
   viewport bottom (a real, working feature — just not what we want here):
   hide it on our templates and use our own static, inline share row instead
   (see .db-share-row), which lives after the article content like the
   approved design expects, not pinned across the whole page. */
.swp_floating_horizontal_wrapper { display: none !important; }
.db-share-row { display: flex; gap: 10px; margin: 32px 0; }
.db-share-row a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: 1.5px solid var(--db-ink);
  color: var(--db-ink); transition: all var(--db-fast);
}
.db-share-row a:hover { background: var(--db-ink); color: var(--db-warm-white); }
.db-share-row svg { width: 16px; height: 16px; }

/* Research Archive pagination (core paginate_links() output) */
.page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; margin-right: 4px; font-family: var(--db-font-mono); font-size: 12px; font-weight: 700; border: 1px solid var(--db-ink); color: var(--db-ink); text-decoration: none; }
a.page-numbers:hover { background: var(--db-ink); color: var(--db-warm-white); }
.page-numbers.current { background: var(--db-yellow) !important; }
.page-numbers.current { background: var(--db-yellow); border-color: var(--db-yellow); }
.page-numbers.dots { border: none; }

/* ============================================================
   STAGING TOOLBAR — mirrors the approved prototype's own #devbar,
   but every button is a real link to a real WordPress URL.
   ============================================================ */
.db-staging-bar {
  position: sticky; top: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--db-ink); color: #fff;
  font-family: var(--db-font-mono); font-size: 11px;
  padding: 8px clamp(16px,4vw,32px);
  border-bottom: 2px solid var(--db-yellow);
  flex-wrap: wrap; gap: 8px;
}
.db-staging-bar .db-devlabel { letter-spacing: .12em; text-transform: uppercase; color: var(--db-yellow); font-weight: 700; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.db-staging-bar .db-devlabel::before { content: ''; display: inline-block; width: 7px; height: 7px; background: var(--db-yellow); border-radius: 50%; animation: db-pulse 1.6s infinite; }
.db-staging-bar .db-devbtns { display: flex; flex-wrap: wrap; gap: 4px; }
.db-staging-bar a {
  background: rgba(255,255,255,.1); color: #ccc; border: 1px solid rgba(255,255,255,.2);
  padding: 4px 10px; font-family: var(--db-font-mono); font-size: 10.5px; text-transform: uppercase;
  text-decoration: none; transition: all var(--db-fast); display: inline-block;
}
.db-staging-bar a:hover { background: var(--db-blue); color: #fff; border-color: var(--db-blue); }
.db-staging-bar a.db-current { background: var(--db-yellow); color: var(--db-ink); border-color: var(--db-yellow); font-weight: 700; }
.db-staging-bar a.db-notbuilt { opacity: .5; border-style: dashed; }
.db-staging-bar a.db-notbuilt:hover { opacity: 1; }
.db-staging-hero { background: var(--db-warm-white); padding: 48px clamp(20px,4vw,48px); border-bottom: 1.5px solid var(--db-ink); }
.db-staging-hero h1 { font-family: var(--db-font-display); font-size: clamp(24px,3.5vw,36px); font-weight: 800; }
.db-staging-hero p { color: var(--db-dark-grey); font-size: 15px; margin-top: 10px; max-width: 70ch; }
.db-staging-legend { display: flex; gap: 20px; margin-top: 16px; font-family: var(--db-font-mono); font-size: 11px; color: var(--db-mid-grey); flex-wrap: wrap; }
.db-staging-legend span { display: inline-flex; align-items: center; gap: 6px; }
.db-staging-legend i { width: 10px; height: 10px; display: inline-block; border: 1px solid var(--db-ink); }

/* Ticker flags stay legible on very small screens */
@media (max-width: 480px) {
  .db-ticker-flag { flex-basis: 100px; font-size: 9.5px; }
}

/* ============================================================
   PHASE 2 WORKAROUND — HEADER / FOOTER LAYOUT
   Plain child-theme template output (no Theme Builder yet).
   Same classes a future Theme Builder header/footer would reuse.
   ============================================================ */
/* !important: the theme's own reset.css sets its own body{background-color}
   later in the cascade — equal specificity, later load order wins, so the
   plain (non-!important) version of this rule was losing (visible as a
   stark white sliver anywhere our warm-white/dark section backgrounds don't
   perfectly meet, e.g. right after the footer). */
/* padding-bottom:0 !important also needed on article pages specifically:
   the legacy Social Warfare plugin's floating bottom share bar sets an
   inline `padding-bottom:50px` on <body> via its own JS to reserve room for
   itself — leaving a persistent blank 50px bar at the very bottom of every
   article even where the bar itself is hidden (see the .nc_wrapper rule
   below). CSS !important beats an inline style set by JS the same way it
   beats any other inline declaration, so this reclaims the space regardless
   of what that script decides to do. */
body { margin: 0; font-family: var(--db-font-body); color: var(--db-ink); background: var(--db-warm-white) !important; padding-bottom: 0 !important; -webkit-font-smoothing: antialiased; }
.db-container { max-width: 1360px; margin: 0 auto; padding: 0 clamp(20px,4vw,48px); }
/* Social Warfare's floating share bar is redundant (we have our own
   .db-share-row in the article template) and has a real bug: it force-sets
   `display:block` via inline style even outside its own configured
   min-width breakpoint, so the CSS-only responsive hide never actually
   applied. !important is required to beat that inline style. */
.nc_wrapper.swp_floating_horizontal_wrapper { display: none !important; }

/* Only the logo/nav/actions row is sticky — the breaking-news ticker and
   markets bar above it scroll away normally, per Piotr (they'd eat too much
   permanent header height if pinned along with the nav). */
.db-header-main { border-bottom: 1px solid rgba(8,20,28,.12); position: sticky; top: 0; z-index: 1000; background: var(--db-warm-white); }
.db-header-main .db-container { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }
.db-logo { display: flex; align-items: center; }
.db-logo a { display: flex; color: var(--db-ink); }
/* Real brand mark (DB-logo_black.png, attachment 17744, natural size 500x211)
   — same file the live production header uses. It's a taller lockup than the
   old placeholder (includes the "DIGITAL SERVICES" badge). Width is given
   explicitly (not "auto") because this <img> sits inside nested flex
   containers (.db-logo > a) — same flex/replaced-element sizing bug as the
   search icon (db-icon-btn svg): "auto" collapses to 0 instead of scaling by
   the image's intrinsic ratio, so both dimensions must be pinned. */
.db-logo-img { height: 56px; width: 133px; flex: 0 0 auto; display: block; }
/* No white variant of this asset exists — invert is the standard trick for a
   solid black-on-transparent mark used on a dark background. */
.db-logo-img--on-dark { height: 34px; width: 81px; filter: invert(1); }

.db-primary-nav { display: flex; align-items: center; gap: clamp(12px,2vw,26px); list-style: none; margin: 0; padding: 0; }
.db-primary-nav li { display: block; }
.db-primary-nav a {
  font-family: var(--db-font-display); font-weight: 700; font-size: 13.5px; letter-spacing: .02em;
  position: relative; padding: 6px 0; color: var(--db-ink); text-transform: uppercase; text-decoration: none; display: inline-block;
}
.db-primary-nav { flex-wrap: nowrap; }
.db-primary-nav a { white-space: nowrap; }
/* Seven links (6 menu items + the appended Contact Us) don't fit beside the logo + actions below ~1280px at full size:
   tighten rather than let the labels wrap onto two lines. The nav widget must not be squeezed by its flex siblings either. */
.db-header-main .elementor-widget-db-nav-menu { flex: 0 0 auto; min-width: 0; }
@media (max-width: 1280px) { .db-primary-nav { gap: 14px; } .db-primary-nav a { font-size: 12.5px; letter-spacing: 0; } }
@media (max-width: 1100px) { .db-primary-nav { gap: 11px; } .db-primary-nav a { font-size: 12px; } }
.db-primary-nav a::before { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--db-yellow); transition: width var(--db-fast); }
.db-primary-nav a:hover::before, .db-primary-nav .current-menu-item a::before { width: 100%; }

.db-header-actions { display: flex; align-items: center; gap: 12px; }
/* Sized to match .db-btn (Subscribe) exactly, and !important on hover because
   the site's own legacy Customizer CSS (Additional CSS, written for the old
   design) carries a blanket `button:hover{background:#ED3F41!important}` —
   real, still-needed elsewhere, but not something to fight without !important here.
   The same legacy CSS also sets a plain (non-hover) `button{color:#ED3F41}`,
   which this button was missing an explicit override for — that's what made
   the search icon (stroke="currentColor") render red even at rest. */
.db-icon-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--db-ink); background: transparent; color: var(--db-ink); transition: all var(--db-fast); flex: 0 0 auto; }
.db-icon-btn svg { width: 20px; height: 20px; flex: 0 0 20px; }
.db-icon-btn:hover { background: var(--db-ink) !important; color: var(--db-warm-white); }

.db-burger { display: none; flex-direction: column; gap: 4px; justify-content: center; align-items: center; width: 38px; height: 38px; border: 1.5px solid var(--db-ink); background: transparent; }
.db-burger span { display: block; width: 16px; height: 1.5px; background: var(--db-ink); }

@media (max-width: 980px) {
  .db-primary-nav { display: none; }
  .db-burger { display: flex; }
}

.db-search-overlay {
  position: fixed; inset: 0; z-index: 2000; background: rgba(8,20,28,.85); backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 14vh;
  opacity: 0; pointer-events: none; transition: opacity var(--db-mid);
}
.db-search-overlay.db-open { opacity: 1; pointer-events: auto; }
.db-search-overlay form { display: flex; align-items: flex-end; border-bottom: 2px solid var(--db-yellow); gap: 16px; padding-bottom: 14px; width: min(720px,88vw); }
.db-search-overlay input { flex: 1; background: transparent; border: none; color: var(--db-white); font-family: var(--db-font-display); font-size: clamp(24px,4vw,36px); font-weight: 600; outline: none; }
.db-search-overlay .db-close { color: var(--db-white); font-family: var(--db-font-mono); font-size: 12px; border: 1px solid rgba(255,255,255,.4); padding: 8px 14px; background: none; cursor: pointer; }
.db-search-overlay .db-close:hover { background: rgba(255,255,255,.15) !important; }

.db-mobile-nav {
  position: fixed; inset: 0; z-index: 1500; background: var(--db-warm-white);
  transform: translateX(100%); transition: transform var(--db-mid);
  padding: 24px clamp(20px,4vw,48px) 40px; overflow-y: auto;
}
.db-mobile-nav.db-open { transform: translateX(0); }
.db-mobile-nav-top { display: flex; justify-content: space-between; align-items: center; height: 60px; }
.db-mobile-nav ul { margin-top: 24px; list-style: none; padding: 0; }
.db-mobile-nav li { border-bottom: 1px solid rgba(8,20,28,.12); }
.db-mobile-nav a { display: block; padding: 16px 0; font-family: var(--db-font-display); font-size: 22px; font-weight: 600; color: var(--db-ink); text-decoration: none; }

#db-site-footer { background: var(--db-ink); color: var(--db-warm-white); border-top: 4px solid var(--db-yellow); }
.db-footer-statement { padding: 94px clamp(20px,4vw,48px) 22px; border-bottom: 1px solid rgba(255,255,255,.16); }
/* p, not h2/h3 — this is sitewide boilerplate CTA copy repeated identically
   on every page via the shared footer. A real heading tag here would give
   every single page an identical H2 in its document outline, which is
   meaningless for SEO/accessibility (a page's headings should describe that
   page's own unique content) — see docs/redesign-inventory.md SEO audit. */
/* !important on max-width: this now sits on an Elementor Text Editor widget
   inside a column-flex container, and Elementor's own --container-widget-width
   default (100%) sets an actual `width` on the widget wrapper — a plain
   max-width here was silently losing to that (computed max-width came back
   100%, not 16ch). Matches this file's established pattern of !important
   wherever a real Elementor default wins the cascade otherwise. */
.db-footer-statement-line { font-family: var(--db-font-display); font-weight: 700; font-size: clamp(28px,4.8vw,60px); line-height: 1.05; max-width: 16ch !important; margin: 0; color: var(--db-white); }
.db-footer-statement-line em { font-style: normal; color: var(--db-yellow); }

/* Homepage's real, page-describing H1 — was visually hidden before (the
   visual "hero" is really an article teaser, not the page's own subject),
   now a proper masthead line above it instead, per Piotr. */
.db-home-intro { padding: 36px 0 20px; border-bottom: 1px solid rgba(8,20,28,.1); margin-bottom: 4px; }
.db-home-h1 { font-family: var(--db-font-display); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; font-size: clamp(24px,3.6vw,40px); max-width: 36ch; color: var(--db-ink); margin-top: 12px; }
.db-home-h1 em { font-style: normal; color: var(--db-blue-dim); }
.db-home-intro-copy { font-size: 15.5px; color: var(--db-dark-grey); max-width: 62ch; line-height: 1.6; margin-top: 12px; }
.db-footer-statement .db-row { margin-top: 24px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.db-footer-statement p { color: rgba(250,250,246,.7); max-width: 44ch; font-size: 15px; line-height: 1.6; margin: 0; }

.db-footer-cols { padding: 48px clamp(20px,4vw,48px); display: grid; grid-template-columns: 1.5fr repeat(3,1fr); gap: 32px; border-bottom: 1px solid rgba(255,255,255,.16); }
.db-footer-brand p { margin-top: 14px; color: rgba(250,250,246,.65); font-size: 13.5px; line-height: 1.6; max-width: 32ch; }
.db-footer-col ul { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }
.db-footer-col a { font-size: 14px; color: rgba(250,250,246,.8); text-decoration: none; }
.db-footer-col a:hover { color: var(--db-yellow); }
@media (max-width: 980px) { .db-footer-cols { grid-template-columns: 1fr 1fr; } .db-footer-brand { grid-column: 1/-1; } }

.db-footer-newsletter { padding: 44px clamp(20px,4vw,48px); display: flex; gap: 32px; justify-content: space-between; align-items: center; flex-wrap: wrap; border-bottom: 1px solid rgba(255,255,255,.16); }
.db-fn-form { display: flex; gap: 0; border-bottom: 1.5px solid rgba(255,255,255,.4); min-width: 280px; flex: 1; max-width: 400px; }
.db-fn-form input { flex: 1; background: transparent; border: none; color: var(--db-white); padding: 10px 4px; font-size: 14px; outline: none; }
.db-fn-form button { background: transparent; border: none; color: var(--db-yellow); font-family: var(--db-font-mono); font-size: 12px; font-weight: 700; cursor: pointer; }
/* No .db-btn class on this one, so it was missing an override for the site's
   legacy Additional CSS (`button:hover{background:#ED3F41!important}`),
   which is why the footer Subscribe button flashed red on hover. */
.db-fn-form button:hover { background: transparent !important; color: var(--db-white) !important; }

.db-footer-legal { padding: 20px clamp(20px,4vw,48px); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-family: var(--db-font-mono); font-size: 11px; color: rgba(250,250,246,.5); }
.db-footer-legal p { margin: 0; }
.db-legal-links { display: flex; gap: 16px; }
.db-legal-links a { color: inherit; text-decoration: none; }
.db-legal-links a:hover { color: var(--db-yellow); }

/* Author names that link to the author page: look like text, underline on hover. */
.db-author-link { color: inherit; text-decoration: none; }
.db-author-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------
 * Real Elementor Pro forms (newsletter + contact) inside our own wrappers — see db_form().
 * Elementor ships its own skin; this restyles it to the design system. Scoped under .db-elform so
 * nothing leaks onto the legacy forms elsewhere on the site.
 * ---------------------------------------------------------------- */
.db-elform { width: 100%; }
.db-elform .elementor-widget-container, .db-elform .elementor-form { margin: 0; }
.db-elform .elementor-form-fields-wrapper { gap: 14px 0; margin: 0; }
.db-elform .elementor-field-group { margin: 0; padding: 0; }
.db-elform .elementor-field-label { font-family: var(--db-font-mono); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--db-ink); margin-bottom: 6px; display: block; }
.db-elform .elementor-field-textual,
.db-elform .elementor-field-group .elementor-field-textual {
	width: 100%; box-sizing: border-box; padding: 12px 14px; min-height: 0; border-radius: 0;
	border: 1px solid var(--db-ink); background: var(--db-warm-white); color: var(--db-ink);
	font-family: var(--db-font-body); font-size: .95rem; line-height: 1.4; outline: none; box-shadow: none;
}
.db-elform .elementor-field-textual:focus { border-color: var(--db-blue); background: var(--db-white); }
.db-elform .elementor-field-subgroup { gap: 0; }
.db-elform .elementor-field-option { display: flex; align-items: flex-start; gap: 10px; }
.db-elform .elementor-field-option label { font-size: 12.5px; line-height: 1.5; cursor: pointer; }
.db-elform .elementor-field-option label a { color: inherit; text-decoration: underline; }
.db-elform .elementor-field-option input[type="checkbox"] { flex: 0 0 auto; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--db-yellow); cursor: pointer; }
.db-elform .elementor-field-type-submit { margin-top: 4px; }
.db-elform .elementor-button {
	display: inline-flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box;
	padding: 14px 22px; border: 1.5px solid var(--db-yellow); border-radius: 0; background: var(--db-yellow); color: var(--db-ink);
	font-family: var(--db-font-mono); font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
	transition: all var(--db-fast);
}
.db-elform .elementor-button:hover, .db-elform .elementor-button:focus { background: var(--db-ink) !important; border-color: var(--db-ink) !important; color: var(--db-yellow) !important; }
.db-elform .elementor-message { font-family: var(--db-font-body); font-size: 14px; margin: 6px 0 0; }
.db-elform .elementor-message-success { color: #0a7a3a; }
.db-elform .elementor-message-danger, .db-elform .elementor-message.elementor-help-inline { color: #c0392b; }
.db-elform .grecaptcha-badge { visibility: hidden; } /* v3 badge — Google's notice is covered by the privacy policy link */

/* surface: dark (footer, newsletter boxes, subscribe page) */
.db-elform--dark .elementor-field-textual { background: var(--db-deep-blue); border-color: var(--db-dark-grey); color: var(--db-white); }
.db-elform--dark .elementor-field-textual::placeholder { color: rgba(250,250,246,.5); }
.db-elform--dark .elementor-field-textual:focus { border-color: var(--db-yellow); background: var(--db-ink); }
.db-elform--dark .elementor-field-label { color: rgba(250,250,246,.8); }
.db-elform--dark .elementor-field-option label { color: rgba(250,250,246,.75); }
.db-elform--dark .elementor-field-option label a { color: var(--db-yellow); }
.db-elform--dark .elementor-message-success { color: #6fe3a0; }
.db-elform--dark .elementor-message-danger { color: #ff8f84; }

/* the contact form sits on the white card of .db-contact-layout */
.db-elform--contact { background: var(--db-white); padding: 32px; border: 1px solid var(--db-ink); box-sizing: border-box; }

/* per-placement surfaces (these used to be inline styles on the static <form>) */
.db-elform--at-cta  { background: var(--db-deep-blue); border: 1px solid rgba(11,166,220,.3); padding: 32px; box-sizing: border-box; }
.db-elform--at-page { background: var(--db-ink); border: 1px solid var(--db-dark-grey); padding: 32px; box-sizing: border-box; max-width: 520px; margin: 0 auto; }
.db-elform--at-box .elementor-field-textual { background: var(--db-ink); border-color: var(--db-dark-grey); }
/* footer strip: heading left, compact underlined email field right, text-style button */
.db-elform--at-footer { min-width: 280px; flex: 1; max-width: 420px; }
.db-elform--at-footer .elementor-field-textual { background: transparent; border: 0; border-bottom: 1.5px solid rgba(255,255,255,.4); padding: 10px 4px; font-size: 14px; }
.db-elform--at-footer .elementor-field-textual:focus { background: transparent; border-bottom-color: var(--db-yellow); }
.db-elform--at-footer .elementor-button { width: auto; background: transparent; border: 0; color: var(--db-yellow); padding: 6px 0; }
.db-elform--at-footer .elementor-button:hover, .db-elform--at-footer .elementor-button:focus { background: transparent !important; border: 0 !important; color: var(--db-white) !important; }
.db-elform--at-footer .elementor-field-type-submit { margin-top: 0; }

/* The Elementor Kit / legacy Customizer CSS skin inputs and buttons with higher specificity than the rules above
   (blue buttons, white fields) — same situation as .db-btn above, so the same !important tie-break. */
.db-elform .elementor-form .elementor-field-textual { background-color: var(--db-warm-white) !important; color: var(--db-ink) !important; border: 1px solid var(--db-ink) !important; border-radius: 0 !important; }
.db-elform .elementor-form .elementor-field-textual:focus { background-color: var(--db-white) !important; border-color: var(--db-blue) !important; }
.db-elform .elementor-form .elementor-button { background-color: var(--db-yellow) !important; color: var(--db-ink) !important; border: 1.5px solid var(--db-yellow) !important; border-radius: 0 !important; }
.db-elform .elementor-form .elementor-button:hover, .db-elform .elementor-form .elementor-button:focus { background-color: var(--db-ink) !important; color: var(--db-yellow) !important; border-color: var(--db-ink) !important; }
.db-elform--dark .elementor-form .elementor-field-textual { background-color: var(--db-deep-blue) !important; color: var(--db-white) !important; border-color: var(--db-dark-grey) !important; }
.db-elform--dark .elementor-form .elementor-field-textual:focus { background-color: var(--db-ink) !important; border-color: var(--db-yellow) !important; }
.db-elform--at-box .elementor-form .elementor-field-textual { background-color: var(--db-ink) !important; }
.db-elform--at-footer .elementor-form .elementor-field-textual { background-color: transparent !important; border: 0 !important; border-bottom: 1.5px solid rgba(255,255,255,.4) !important; }
.db-elform--at-footer .elementor-form .elementor-field-textual:focus { background-color: transparent !important; border-bottom-color: var(--db-yellow) !important; }
.db-elform--at-footer .elementor-form .elementor-button, .db-elform--at-footer .elementor-form .elementor-button:hover, .db-elform--at-footer .elementor-form .elementor-button:focus { background-color: transparent !important; border: 0 !important; color: var(--db-yellow) !important; }
.db-elform--at-footer .elementor-form .elementor-button:hover { color: var(--db-white) !important; }
.db-elform .elementor-form .elementor-field-textual, .db-elform .elementor-form .elementor-field-option label { font-family: var(--db-font-body) !important; }
.db-elform .elementor-form .elementor-button { font-family: var(--db-font-mono) !important; }
.db-elform .elementor-form .elementor-field-label { font-family: var(--db-font-mono) !important; }

/* Legacy article embeds carry fixed width="500"-style attributes (found on a 2018 post: a 500px iframe pushed the
   page 72px wider than a phone). Keep any embedded media inside the column. */
.db-prose iframe, .db-prose embed, .db-prose object, .db-prose video, .db-prose img { max-width: 100%; }
.db-prose img, .db-prose video { height: auto; }
.db-prose table { display: block; max-width: 100%; overflow-x: auto; }

/* Elementor grid containers (single-post body + footer columns) set their column template through the inner
   grid element, which beat the older responsive rules above: on phones the article body was squeezed into a ~70px
   column next to a fixed 340px sidebar track. Collapse them explicitly (Elementor 4.3 specificity). */
@media (max-width: 900px) {
	.db-article-body, .db-article-body > .e-con-inner { grid-template-columns: minmax(0, 1fr) !important; }
	.db-article-body { --e-con-grid-template-columns: minmax(0, 1fr); }
	.db-article-body .db-post-aside { position: static !important; }
}
@media (max-width: 980px) {
	.db-footer-cols, .db-footer-cols > .e-con-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
}
@media (max-width: 560px) {
	.db-footer-cols, .db-footer-cols > .e-con-inner { grid-template-columns: minmax(0, 1fr) !important; }
}
/* long unbreakable strings (wallet addresses, URLs) must wrap inside the column on phones */
.db-prose { overflow-wrap: anywhere; }

/* Many widget sections set their own inline `padding: Npx 0 …` on a .db-container, which wipes the horizontal gutter
   (shorthand). Above 1360 + gutters the page is centred by max-width/margin so nobody noticed; on laptops and phones the
   text then touched the screen edge. Restore the gutter wherever the viewport is narrower than container + gutters. */
@media (max-width: 1455px) {
	.db-container { padding-left: clamp(20px, 4vw, 48px) !important; padding-right: clamp(20px, 4vw, 48px) !important; }
}

/* Elementor boxed containers: Elementor Pro resets --container-max-width on every .e-con (the Kit's 1360px is
   not inherited the way it was in the shortcode build), and they carry only a 10px side padding. Align header,
   post body and the rest with .db-container: 1360px max, same fluid gutter. */
body[class*="elementor-kit-"] .e-con { --container-max-width: 1360px; }
@media (max-width: 1455px) {
	.e-con-boxed.e-parent { padding-left: clamp(20px, 4vw, 48px) !important; padding-right: clamp(20px, 4vw, 48px) !important; }
}

/* Phone header: logo | search | subscribe | burger on ONE row (it wrapped onto two once the nav widget was hidden). */
@media (max-width: 980px) {
	.db-header-main .e-con-inner { flex-wrap: nowrap; gap: 12px; }
	.db-header-main .db-header-actions { margin-left: auto; }
}
@media (max-width: 480px) {
	.db-header-main .db-logo-img { width: 105px; height: 44px; }
	.db-header-main .db-header-actions { gap: 8px; }
	.db-header-main .db-header-actions .db-btn { padding-left: 14px; padding-right: 14px; font-size: 11px; }
}

/* 981–1100px: seven nav links + logo + actions need every pixel — slimmer header gutter there. */
@media (min-width: 981px) and (max-width: 1100px) {
	.db-header-main .e-con-boxed, .db-header-main.e-con-boxed { padding-left: 14px !important; padding-right: 14px !important; }
}

/* Seven nav links never fit beside the logo + actions below ~1180px once the page gutter is added (measured overflow at
   985–1101px): switch to the burger menu from 1180px down instead of squeezing. */
@media (max-width: 1180px) {
	.db-primary-nav { display: none; }
	.db-burger { display: flex; }
	.db-header-main .e-con-inner { flex-wrap: nowrap; gap: 12px; }
	.db-header-main .db-header-actions { margin-left: auto; }
}

/* Footer social icons + enquiries line (restored from the old footer) */
.db-footer-social { margin-top: 22px; }
.db-footer-social .db-social-icons { display: flex; gap: 10px; }
.db-footer-social .db-social-icons a { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.35); color: var(--db-white); transition: all var(--db-fast); }
.db-footer-social .db-social-icons a:hover { background: var(--db-yellow); border-color: var(--db-yellow); color: var(--db-ink); }
.db-footer-social .db-enquiry { margin: 16px 0 0; font-size: 13px; line-height: 1.55; color: rgba(250,250,246,.7); max-width: 34ch; }
.db-footer-social .db-enquiry a { color: var(--db-yellow); text-decoration: underline; text-underline-offset: 2px; }

/* Comments (Elementor Pro "Post Comments" widget → WordPress comments template) in the article column */
.db-article-body .elementor-widget-post-comments { margin-top: 48px; padding-top: 28px; border-top: 1.5px solid var(--db-ink); font-family: var(--db-font-body); }
.db-article-body .elementor-widget-post-comments #comments, .db-article-body .elementor-widget-post-comments #respond { margin: 0; }
.db-article-body .elementor-widget-post-comments h2, .db-article-body .elementor-widget-post-comments h3 { font-family: var(--db-font-display); font-weight: 700; font-size: 22px; letter-spacing: -.01em; margin: 0 0 18px; color: var(--db-ink); }
.db-article-body .elementor-widget-post-comments .comment-list { list-style: none; margin: 0 0 32px; padding: 0; }
.db-article-body .elementor-widget-post-comments .comment-list .children { list-style: none; margin: 0 0 0 28px; padding: 0; }
.db-article-body .elementor-widget-post-comments .comment-body { padding: 16px 0; border-bottom: 1px solid rgba(8,20,28,.12); font-size: 15px; line-height: 1.6; color: var(--db-dark-grey); }
.db-article-body .elementor-widget-post-comments .comment-author { font-weight: 700; color: var(--db-ink); display: flex; align-items: center; gap: 10px; }
.db-article-body .elementor-widget-post-comments .comment-author img { border-radius: 50%; }
.db-article-body .elementor-widget-post-comments .comment-metadata { font-family: var(--db-font-mono); font-size: 11px; text-transform: uppercase; color: var(--db-mid-grey); margin: 2px 0 8px; }
.db-article-body .elementor-widget-post-comments .comment-metadata a { color: inherit; text-decoration: none; }
.db-article-body .elementor-widget-post-comments .comment-respond label { display: block; font-family: var(--db-font-mono); font-size: .75rem; font-weight: 700; text-transform: uppercase; margin-bottom: 6px; }
.db-article-body .elementor-widget-post-comments .comment-respond input[type="text"], .db-article-body .elementor-widget-post-comments .comment-respond input[type="email"], .db-article-body .elementor-widget-post-comments .comment-respond input[type="url"], .db-article-body .elementor-widget-post-comments .comment-respond textarea {
	width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--db-ink); border-radius: 0; background: var(--db-warm-white); font-family: var(--db-font-body); font-size: .95rem; }
.db-article-body .elementor-widget-post-comments .comment-respond input:focus, .db-article-body .elementor-widget-post-comments .comment-respond textarea:focus { border-color: var(--db-blue); background: var(--db-white); outline: none; }
.db-article-body .elementor-widget-post-comments .form-submit input[type="submit"] { padding: 14px 22px; border: 1.5px solid var(--db-ink) !important; border-radius: 0; background: var(--db-ink) !important; color: var(--db-warm-white) !important; font-family: var(--db-font-mono); font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.db-article-body .elementor-widget-post-comments .form-submit input[type="submit"]:hover { background: var(--db-blue) !important; border-color: var(--db-blue) !important; color: var(--db-ink) !important; }
.db-article-body .elementor-widget-post-comments .comment-reply-link { color: var(--db-blue-dim); font-family: var(--db-font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; }
.db-article-body .elementor-widget-post-comments .comment-reply-link:hover { color: var(--db-blue); text-decoration: underline; }
.db-article-body .elementor-widget-post-comments .comment-form-cookies-consent label { text-transform: none; font-family: var(--db-font-body); font-weight: 400; font-size: 13px; display: inline; margin-left: 6px; }

/* Related stories under the article */
.db-related { max-width: 1360px; margin: 0 auto; padding: 8px 0 72px; }
.db-related-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .db-related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .db-related-grid { grid-template-columns: 1fr; } }

/* Key takeaways sit in a ~220px sidebar: automatic hyphenation chopped words ("pay-ment-account", "li-censed"). Wrap on spaces instead. */
.db-takeaways, .db-takeaways * { hyphens: manual !important; -webkit-hyphens: manual !important; overflow-wrap: break-word; }

/* Phone ticker flags: the yellow BREAKING INTEL block sat flush against the screen edge (the pulsing dot touched it).
   Give both flags a proper left/right padding and left-align their content. */
@media (max-width: 480px) {
  .db-ticker-flag { flex: 0 0 112px; padding: 0 12px; justify-content: flex-start; gap: 8px; line-height: 1.3; box-sizing: border-box; }
  .db-ticker-flag .db-pulse { flex: 0 0 6px; }
}