.elementor-kit-7{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-bfdc_ink:#0F1B22;--e-global-color-bfdc_body:#3A4851;--e-global-color-bfdc_muted:#5D6A72;--e-global-color-bfdc_accent:#0B7A74;--e-global-color-bfdc_accent_hover:#08605B;--e-global-color-bfdc_coral:#FF8A5B;--e-global-color-bfdc_sunny:#FFC94D;--e-global-color-bfdc_bg:#FBFAF7;--e-global-color-bfdc_surface2:#F2F6F5;--e-global-color-bfdc_border:#E6E8E4;--e-global-typography-primary-font-family:"Fraunces";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Fraunces";--e-global-typography-secondary-font-weight:500;--e-global-typography-text-font-family:"Figtree";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"DM Mono";--e-global-typography-accent-font-weight:500;--e-global-typography-text-font-size:17px;--e-global-typography-text-line-height:1.6em;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --bg-base:#FBFAF7; --surface-1:#FFFFFF; --surface-2:#F2F6F5; --border-subtle:#E6E8E4; --border-strong:#C9CFCB; --text-primary:#0F1B22; --text-secondary:#3A4851; --text-muted:#5D6A72; --accent:#0B7A74; --accent-hover:#08605B; --highlight:#FF8A5B; --highlight-2:#FFC94D; --highlight-soft:#FFE7DC; --accent-soft:#DDF0EC; --status-good:#2E7D4F; --status-warning:#9A5B00; --status-critical:#B3261E; --c1:#008F75; --c2:#E0563A; --c3:#9B4F96; --c4:#4B5BD6; --c5:#B07A00; --c6:#2A84BD; --c7:#C2417A; --c8:#5F8A1E; --seq-1:#BFE6DD; --seq-2:#6FC4B2; --seq-3:#1F9A84; --seq-4:#0B6B5E; --shadow-soft:rgba(15,27,34,0.06); --shadow-deep:rgba(15,27,34,0.12); --font-display:Fraunces; --font-body:Figtree; --font-mono:DM Mono; --fs-hero:76px; --fs-h1:52px; --fs-h2:36px; --fs-h3:24px; --fs-stat:60px; --fs-body:17px; --fs-small:14px; --fs-micro:12px; --fs-hero-m:42px; --fs-h1-m:34px; --fs-h2-m:27px; --fs-h3-m:20px; --fs-stat-m:40px; --fs-body-m:16px; --fs-stat-card:40px; --s4:4px; --s8:8px; --s12:12px; --s16:16px; --s24:24px; --s32:32px; --s48:48px; --s64:64px; --s96:96px; --s128:128px; --content-max:1280px; --gutter:80px; --gutter-sm:20px; --radius-control:10px; --radius-card:18px; }
/* Start custom CSS *//* Bronx Family Dental Care — design system companions.
 *
 * Pushed to the Elementor kit's custom_css. This file is rung 3 of the kit's
 * construction ladder (§3.1): it holds ONLY what Elementor's atomic style
 * schema cannot express. Anything that can be a Global Variable or a Global
 * Class lives in build/globals.py instead — never restate a token here.
 *
 * The :root token block is deliberately absent: Elementor emits all 64 Global
 * Variables into :root itself, under these same names, before this file.
 *
 * Sections
 *   1. Fonts and fallback stacks
 *   2. Atomic companions (schema gaps, keyed to the ui-* class names)
 *   3. Accent phrases inside headings
 *   4. Visible placeholders for facts the practice has not supplied
 *   5. Motion (§1.8) and prefers-reduced-motion
 *   6. Native nested-accordion skin (FAQ)
 *   7. Elementor Pro Form skin (booking)
 *   8. Header, mega menu and footer chrome
 *   9. Charts and table views
 *  10. Focus, selection and print
 */

/* ── 1. Fonts ───────────────────────────────────────────────────────────── */
/* Elementor enqueues the families named by the font variables; this import is
   what covers the chrome and the HTML widgets, which render outside that. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Figtree:wght@400;500;600&family=DM+Mono:wght@400;500&display=swap');

:root {
  --font-display-stack: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
  --font-body-stack: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono-stack: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* The fixed header's height, so in-page anchors don't land underneath it. */
  --header-h: 76px;
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { background: var(--bg-base); color: var(--text-secondary); }

/* Fraunces' soft optical axis, per Site.md §1.5. */
.elementor .ui-hero-title, .elementor .ui-h1, .elementor .ui-h2, .elementor .ui-h3,
.elementor .ui-page-title, .elementor .ui-stat-figure, .elementor .ui-stat-figure-sm,
.elementor .ui-price-figure, .elementor .ui-quote {
  font-variation-settings: 'SOFT' 40, 'WONK' 0;
  font-family: var(--font-display-stack);
}
.elementor .ui-body, .elementor .ui-lede, .elementor .ui-small { font-family: var(--font-body-stack); }
.elementor .ui-eyebrow, .elementor .ui-step-n, .elementor .ui-pill,
.elementor .ui-row-value, .elementor .ui-tbd { font-family: var(--font-mono-stack); }

/* ── 2. Atomic companions — the schema gaps (kit §3.3) ──────────────────── */
/* No font-variant-numeric, text-wrap, white-space, list-style, pseudo-elements
   or descendant .elementor-kit-7s in the atomic style schema, so they live here. */
.elementor .ui-stat-figure, .elementor .ui-stat-figure-sm, .elementor .ui-price-figure,
.elementor .ui-row-value, .elementor .bfdc-table td, .elementor .bfdc-chart text {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.elementor .ui-hero-title, .elementor .ui-h1, .elementor .ui-h2, .elementor .ui-h3,
.elementor .ui-page-title { text-wrap: balance; }
.elementor .ui-lede, .elementor .ui-body { text-wrap: pretty; }

/* Prose lists inside a ui-prose block. */
.elementor .ui-prose ul, .elementor .ui-prose ol { margin: 0 0 0 1.1em; padding: 0; }
.elementor .ui-prose li { margin: 0 0 8px; line-height: 1.6; }
.elementor .ui-prose ul { list-style: disc; }
.elementor .ui-prose ol { list-style: decimal; }

/* A whole service card is one link; the arrow nudges, nothing else moves. */
.elementor a.ui-svc { text-decoration: none; }
.elementor a.ui-svc .ui-svc-link svg { transition: transform 160ms cubic-bezier(.2,0,0,1); }
.elementor a.ui-svc:hover .ui-svc-link svg { transform: translateX(3px); }

/* ui-icon and the chips size their SVG child, which the schema can't reach. */
.elementor .ui-icon svg, .elementor .ui-chip-teal svg,
.elementor .ui-chip-coral svg, .elementor .ui-chip-sunny svg {
  width: 24px; height: 24px; display: block;
}
/* An inline SVG with only a viewBox has no intrinsic size and will stretch to
   fill its flex line, so every inline icon slot states its own box. */
.elementor .ui-svc-link svg, .elementor .ui-link svg, .elementor .ui-tick svg,
.elementor .ui-legend-item svg, .elementor .ui-trust-item svg,
.elementor .ui-row-label svg, .elementor .ui-btn svg, .elementor .ui-btn-ghost svg {
  width: 16px; height: 16px; flex: none;
}

/* ── 3. Accent phrases inside headings ──────────────────────────────────── */
/* html-v3 keeps inline tags but strips their attributes, so an accent phrase is
   marked up as <em> and coloured here rather than with a class (kit §3.3). */
.elementor .ui-hero-title em, .elementor .ui-h1 em, .elementor .ui-h2 em,
.elementor .ui-page-title em {
  font-style: normal;
  color: var(--accent);
}

/* ── 4. Visible placeholders (kit §0.2) ─────────────────────────────────── */
/* A fact the practice has not supplied is shown, not invented, and is obvious
   to anyone reviewing the page. */
.elementor .ui-tbd::before {
  content: 'TBD';
  font-size: 10px;
  letter-spacing: .11em;
  margin-right: 8px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--status-warning);
  color: #fff;
}

/* ── 5. Motion (§1.8) ───────────────────────────────────────────────────── */
/* Hidden states are armed by build/motion.js only while an observer is
   watching, so a page with no JavaScript still renders finished. */
.bfdc-motion [data-rise] { opacity: 0; transform: translateY(14px); }
.bfdc-motion [data-rise].is-in { opacity: 1; transform: none;
  transition: opacity 240ms cubic-bezier(.2,0,0,1), transform 240ms cubic-bezier(.2,0,0,1); }
.bfdc-motion [data-rise][data-delay="1"].is-in { transition-delay: 60ms; }
.bfdc-motion [data-rise][data-delay="2"].is-in { transition-delay: 120ms; }
.bfdc-motion [data-rise][data-delay="3"].is-in { transition-delay: 180ms; }

.bfdc-chart [data-draw] { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.bfdc-chart [data-draw].is-in { stroke-dashoffset: 0; transition: stroke-dashoffset 900ms cubic-bezier(.2,0,0,1); }
.bfdc-chart [data-grow] { transform: scaleY(0); transform-origin: bottom; }
.bfdc-chart [data-grow].is-in { transform: none; transition: transform 700ms cubic-bezier(.2,0,0,1); }

@media (prefers-reduced-motion: reduce) {
  .bfdc-motion [data-rise], .bfdc-chart [data-draw], .bfdc-chart [data-grow] {
    opacity: 1 !important; transform: none !important;
    stroke-dashoffset: 0 !important; transition: none !important;
  }
  .bfdc-hero__video { display: none; }
}

/* ── 6. FAQ: native nested-accordion skin ───────────────────────────────── */
/* Skinned through the widget's own custom properties rather than by fighting
   its stylesheet's specificity (kit §3.3). */
.elementor .ui-faq .e-n-accordion {
  --n-accordion-title-font-size: 17px;
  --n-accordion-title-color: var(--text-primary);
  --n-accordion-title-color-hover: var(--accent);
  --n-accordion-title-color-active: var(--accent);
  --n-accordion-border-width: 0;
  --n-accordion-padding: 0;
  --n-accordion-item-title-space-between: 0;
}
.elementor .ui-faq .e-n-accordion-item {
  border-bottom: 1px solid var(--border-subtle);
}
.elementor .ui-faq .e-n-accordion-item-title {
  font-family: var(--font-display-stack);
  font-weight: 600;
  padding: 20px 0;
  gap: 16px;
}
.elementor .ui-faq .e-n-accordion-item > .e-con {
  padding: 0 0 20px;
  font-family: var(--font-body-stack);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 65ch;
}

/* ── 7. Booking form (Elementor Pro Form) ───────────────────────────────── */
.elementor .ui-form-card .elementor-field-group { margin-bottom: 14px; }
.elementor .ui-form-card .elementor-field-group > label {
  font-family: var(--font-mono-stack);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.elementor .ui-form-card input[type=text],
.elementor .ui-form-card input[type=email],
.elementor .ui-form-card input[type=tel],
.elementor .ui-form-card select,
.elementor .ui-form-card textarea {
  width: 100%;
  font-family: var(--font-body-stack);
  font-size: 16px;            /* 16px stops iOS zooming the page on focus */
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  padding: 11px 14px;
}
.elementor .ui-form-card input::placeholder,
.elementor .ui-form-card textarea::placeholder { color: var(--text-muted); }
.elementor .ui-form-card input:focus, .elementor .ui-form-card select:focus,
.elementor .ui-form-card textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}
.elementor .ui-form-card .elementor-button {
  width: 100%;
  justify-content: center;
  font-family: var(--font-body-stack);
  font-weight: 600;
  font-size: 15px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-control);
  padding: 14px 24px;
  border: 0;
}
.elementor .ui-form-card .elementor-button:hover { background: var(--accent-hover); }
.elementor .ui-form-card .elementor-field-required .elementor-field-label:after {
  content: '*'; color: var(--status-critical); margin-left: 4px;
}

/* ── 8. Chrome: header, mega menu, footer ───────────────────────────────── */
/* position:sticky cannot work per-section on an Elementor page (kit §3.4), so
   the header is fixed and a spacer holds its space. */
#bfdc-head {
  position: fixed; inset: 0 0 auto 0; z-index: 900;
  height: var(--header-h);
  display: flex; align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 200ms ease, border-color 200ms ease;
}
#bfdc-head.is-stuck {
  background: var(--surface-1);
  border-bottom-color: var(--border-subtle);
}
#bfdc-head-spacer { height: var(--header-h); }
/* Elementor containers are flex columns by default and set their own padding,
   so the row, the gutters and the max-width are all stated here. */
.elementor #bfdc-head-in {
  width: 100%; max-width: var(--content-max); margin: 0 auto;
  padding: 0 var(--gutter); display: flex; flex-direction: row;
  flex-wrap: nowrap; align-items: center; gap: 32px;
}
/* The brand takes the slack, so the nav and the CTA sit right. */
.elementor #bfdc-head-in > .e-con:first-child { margin-right: auto; flex: 0 0 auto; }
.elementor #bfdc-head-in > .elementor-widget-button,
.elementor #bfdc-head-in > .e-button { flex: 0 0 auto; }
/* The nav list is laid out here rather than left to the widget: its own
   stylesheet is enqueued per-render and the bar must not collapse into a column
   if that enqueue is missed. The widget's toggle still takes over below 1024. */
#bfdc-head .e-n-menu-wrapper { display: flex; align-items: center; }
#bfdc-head .e-n-menu-heading {
  display: flex; flex-direction: row; align-items: center;
  flex-wrap: nowrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
#bfdc-head .e-n-menu-item { margin: 0; }
#bfdc-head .e-n-menu-title { display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; text-decoration: none; }
#bfdc-head .e-n-menu-title-text { white-space: nowrap;
  font-family: var(--font-body-stack); font-weight: 500; font-size: 15px;
  line-height: 1.4; color: var(--text-primary); text-decoration: none; }
#bfdc-head .e-n-menu-title:hover .e-n-menu-title-text { color: var(--accent); }
.bfdc-head__brand {
  font-family: var(--font-display-stack); font-weight: 600; font-size: 19px;
  letter-spacing: -.01em; color: var(--text-primary); text-decoration: none;
  margin-right: auto;
}
.bfdc-head__brand span { color: var(--accent); }

.bfdc-mega__item a { display: flex; gap: 12px; align-items: flex-start;
  padding: 10px; border-radius: 12px; text-decoration: none; }
.bfdc-mega__item a:hover { background: var(--surface-2); }
.bfdc-mega__ico { display: grid; place-items: center; width: 40px; height: 40px;
  min-width: 40px; border-radius: 12px; }
.bfdc-mega__ico svg { width: 22px; height: 22px; }
.bfdc-tint-teal { background: var(--accent-soft); color: var(--accent); }
.bfdc-tint-coral { background: var(--highlight-soft); color: var(--status-critical); }
.bfdc-tint-sunny { background: var(--highlight-2); color: var(--text-primary); }
.bfdc-mega__title { display: block; font-family: var(--font-body-stack); font-weight: 600;
  font-size: 15px; color: var(--text-primary); }
.bfdc-mega__blurb { display: block; font-family: var(--font-body-stack); font-size: 13px;
  line-height: 1.45; color: var(--text-muted); margin-top: 2px; }

/* The brand wordmark is an atomic heading, which takes only global classes, so
   its accent half is reached through the fixed bar. */
#bfdc-head .ui-h3 span { color: var(--accent); }

#bfdc-foot-host { background: var(--surface-2); border-top: 1px solid var(--border-subtle); }
.bfdc-foot__in { max-width: var(--content-max); margin: 0 auto; padding: 64px var(--gutter) 32px; }
.bfdc-foot__top { display: grid; grid-template-columns: 300px 1fr; gap: 64px; }
.bfdc-foot__name { font-family: var(--font-display-stack); font-weight: 600; font-size: 20px;
  color: var(--text-primary); }
.bfdc-foot__name span { color: var(--accent); }
.bfdc-foot__line { font-family: var(--font-body-stack); font-size: 14px; line-height: 1.6;
  color: var(--text-secondary); margin: 10px 0 18px; max-width: 42ch; }
.bfdc-foot__facts { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.bfdc-foot__facts li { display: flex; gap: 10px; align-items: center; }
.bfdc-foot__facts svg { width: 16px; height: 16px; flex: none; color: var(--text-muted); }
.bfdc-foot__cta { display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body-stack); font-weight: 600; font-size: 14px; text-decoration: none;
  background: var(--accent); color: #fff; padding: 12px 22px;
  border-radius: var(--radius-control); }
.bfdc-foot__cta:hover { background: var(--accent-hover); color: #fff; }
.bfdc-foot__cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px 24px;
  align-content: start; }
.bfdc-foot__col h3 { font-family: var(--font-body-stack); font-weight: 600; font-size: 14px;
  color: var(--text-primary); margin: 0 0 10px; }
.bfdc-foot__col h3 a { color: inherit; text-decoration: none; }
.bfdc-foot__col ul { list-style: none; margin: 0; padding: 0; }
.bfdc-foot__col li { margin: 0 0 6px; }
.bfdc-foot__col a { font-family: var(--font-body-stack); font-size: 13px; line-height: 1.5;
  color: var(--text-muted); text-decoration: none; }
.bfdc-foot__col a:hover { color: var(--accent); }

.bfdc-foot__bottom { margin-top: 48px; padding-top: 20px;
  border-top: 1px solid var(--border-subtle); display: grid; gap: 10px; }
.bfdc-foot__legalname, .bfdc-foot__nd { font-family: var(--font-body-stack); font-size: 12px;
  line-height: 1.5; color: var(--text-muted); margin: 0; }
.bfdc-foot__legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.bfdc-foot__legal a { font-family: var(--font-body-stack); font-size: 12px;
  color: var(--text-muted); text-decoration: none; }
.bfdc-foot__legal a:hover { color: var(--accent); }

/* ── Chrome styling, restated here on purpose ───────────────────────────────
 * Elementor emits Global Class CSS per *rendered page*, from a per-post
 * relations index (Atomic_Global_Styles). A Theme Builder header or footer is
 * not a related post of the page it renders on, so its ui-* classes get no
 * rules and the chrome lands unstyled — an Elementor-blue button on a stacked
 * bar. These rules give the chrome the same styling from the kit stylesheet,
 * which loads on every page. They reference the same Global Variables, so the
 * tokens stay the single source; only the .elementor-kit-7 is duplicated.
 */
#bfdc-head .ui-stack { display: flex; flex-direction: column; padding: 0; }
#bfdc-head .ui-h3 { font-family: var(--font-display-stack); font-weight: 600;
  font-size: 19px; line-height: 1.25; color: var(--text-primary); }
#bfdc-head .ui-small { font-family: var(--font-body-stack); font-size: 13px;
  line-height: 1.5; color: var(--text-muted); }
#bfdc-head .ui-btn, #bfdc-head a.ui-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body-stack); font-weight: 600; font-size: 14px;
  line-height: 1.5; text-decoration: none; white-space: nowrap;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  border-radius: var(--radius-control); padding: 12px 22px; }
#bfdc-head .ui-btn:hover { background: var(--accent-hover);
  border-color: var(--accent-hover); color: #fff; }
#bfdc-head .ui-actions { display: flex; flex-direction: row; align-items: center;
  flex-wrap: nowrap; gap: 24px; padding: 0; margin-left: auto; }
#bfdc-head .ui-nav-link { font-family: var(--font-body-stack); font-weight: 500;
  font-size: 15px; line-height: 1.4; color: var(--text-primary);
  white-space: nowrap; text-decoration: none; }
#bfdc-head a:hover .ui-nav-link { color: var(--accent); }
#bfdc-head .ui-icon svg { width: 24px; height: 24px; }
#bfdc-head .ui-chip-teal, #bfdc-head .ui-chip-coral, #bfdc-head .ui-chip-sunny {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; min-width: 40px; border-radius: 12px; padding: 0; }
#bfdc-head .ui-chip-teal { background: var(--accent-soft); color: var(--accent); }
#bfdc-head .ui-chip-coral { background: var(--highlight-soft); color: var(--status-critical); }
#bfdc-head .ui-chip-sunny { background: var(--highlight-2); color: var(--text-primary); }
#bfdc-head .ui-media-row { display: flex; flex-direction: row; gap: 12px;
  align-items: flex-start; text-decoration: none; }
#bfdc-head .ui-cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
#bfdc-head .ui-split { display: grid; grid-template-columns: 3fr 1fr; gap: 32px;
  align-items: flex-start; max-width: var(--content-max); }

/* The Services mega panel. The widget supplies the dropdown shell; this is the
   surface it sits on. */
.bfdc-mega__panel { background: var(--surface-1); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card); box-shadow: 0 1px 2px var(--shadow-soft),
  0 24px 48px -24px var(--shadow-deep); }
.elementor .bfdc-mega__panel .ui-media-row:hover { background: var(--surface-2); }

@media (max-width: 1024px) {
  #bfdc-head-in { padding: 0 32px; }
  .bfdc-foot__in { padding: 56px 32px 28px; }
  .bfdc-foot__top { grid-template-columns: 1fr; gap: 40px; }
  .bfdc-foot__cols { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  #bfdc-head-in { padding: 0 var(--gutter-sm); }
  .bfdc-foot__in { padding: 48px var(--gutter-sm) 24px; }
  .bfdc-foot__cols { grid-template-columns: repeat(2, 1fr); }
}

/* ── 9. Charts and table views (kit §1.4 rule 9) ────────────────────────── */
.bfdc-chart { display: block; width: 100%; height: auto; }
.bfdc-chart text { font-family: var(--font-mono-stack); font-size: 11px; fill: var(--text-muted); }
.bfdc-chart .axis, .bfdc-chart .grid { stroke: var(--border-subtle); }
.bfdc-table { width: 100%; border-collapse: collapse; font-family: var(--font-body-stack);
  font-size: 13px; }
.bfdc-table caption { text-align: left; font-size: 13px; color: var(--text-muted);
  padding: 0 0 8px; }
.bfdc-table th, .bfdc-table td { text-align: left; padding: 7px 10px 7px 0;
  border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); }
.bfdc-table th { font-family: var(--font-mono-stack); font-size: 11px; text-transform: uppercase;
  letter-spacing: .11em; color: var(--text-muted); font-weight: 500; }
.bfdc-table td:not(:first-child), .bfdc-table th:not(:first-child) { text-align: right; }
/* The table view is open to screen readers and keyboard users, folded for the eye. */
.bfdc-tableview summary { font-family: var(--font-mono-stack); font-size: 11px;
  text-transform: uppercase; letter-spacing: .11em; color: var(--text-muted);
  cursor: pointer; padding: 10px 0 0; }
.bfdc-tableview[open] summary { margin-bottom: 10px; }

/* ── 10. Focus, selection, print ────────────────────────────────────────── */
.elementor a:focus-visible, .elementor button:focus-visible,
.elementor [tabindex]:focus-visible, #bfdc-head a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
::selection { background: var(--accent-soft); color: var(--text-primary); }

@media print {
  #bfdc-head, #bfdc-head-spacer, .ui-cta { display: none; }
  body { background: #fff; }
  .bfdc-tableview[open] summary { display: none; }
  .bfdc-tableview > *:not(summary) { display: block !important; }
}/* End custom CSS */