/* ExpatEnergy content modernization layer.
   Loaded after the legacy and page-specific styles so every historic article
   receives the same accessible, mobile-first component system. */

:root {
  --content-bg: #071322;
  --content-panel: rgba(11, 29, 52, .88);
  --content-panel-strong: #0d2039;
  --content-panel-soft: rgba(15, 43, 73, .62);
  --content-border: rgba(126, 205, 246, .2);
  --content-border-strong: rgba(94, 223, 255, .48);
  --content-text: #d8e7f4;
  --content-muted: #9fb4c8;
  --content-bright: #f4f9ff;
  --content-cyan: #5edfff;
  --content-indigo: #8e7cff;
  --content-gold: #f4c95d;
  --content-success: #72e0ad;
  --content-warning: #ffcb6b;
  --content-danger: #ff8f9d;
  --content-radius-sm: .8rem;
  --content-radius: 1.05rem;
  --content-radius-lg: 1.35rem;
  --content-shadow: 0 1.25rem 3.5rem rgba(0, 5, 18, .24), inset 0 1px rgba(255, 255, 255, .035);
}

html.ee-modern { scroll-padding-top: calc(var(--brand-header-height, 72px) + 1rem); }

/* Runtime variants emitted by the shared hero and monetization libraries. */
.central-hero--nl { --hero-accent: #5edfff; --hero-accent-2: #8e7cff; }
.central-hero--energy { --hero-accent: #f4d35e; --hero-accent-2: #5edfff; }
.journey-entry--education,
.journey-conversion--education { --journey-accent: #f4c95d; --journey-accent-2: #5aaeff; }
.journey-entry--work,
.journey-conversion--work { --journey-accent: #72b7ff; --journey-accent-2: #9a7cff; }
.journey-entry--general,
.journey-conversion--general { --journey-accent: #6fe5ff; --journey-accent-2: #8178ff; }
.journey-entry--product,
.journey-conversion--product { --journey-accent: #6fe5ff; --journey-accent-2: #f4c95d; }

body {
  background:
    radial-gradient(circle at 8% 18%, rgba(57, 73, 171, .08), transparent 30rem),
    var(--content-bg);
}

main { overflow: clip; }

.blog-article {
  padding-top: calc(var(--brand-header-height, 72px) + clamp(2.4rem, 6vw, 5.5rem));
  background:
    radial-gradient(circle at 78% 3%, rgba(94, 223, 255, .08), transparent 28rem),
    linear-gradient(180deg, #071322 0%, #081728 55%, #071322 100%);
}

.article-header {
  position: relative;
  max-width: 58rem;
  margin-bottom: clamp(2.5rem, 6vw, 4.75rem);
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--content-border);
  border-radius: var(--content-radius-lg);
  background: linear-gradient(145deg, rgba(15, 40, 68, .68), rgba(6, 19, 37, .82));
  box-shadow: var(--content-shadow);
  animation: none;
  overflow: hidden;
}

.article-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--content-cyan), var(--content-indigo), transparent);
}

.article-header h1 {
  max-width: 18ch;
  margin-inline: auto;
  font-size: clamp(2.15rem, 5.8vw, 4.25rem);
  letter-spacing: -.045em;
  line-height: 1.02;
  text-wrap: balance;
}

.article-category {
  border: 1px solid rgba(94, 223, 255, .32);
  color: #061322;
  background: linear-gradient(135deg, #8feaff, #65a9ff);
  box-shadow: 0 .7rem 1.8rem rgba(53, 169, 255, .18);
}

.article-meta {
  display: flex;
  justify-content: center;
  gap: .55rem;
  margin: 1.35rem 0 1.15rem;
}

.article-date,
.article-reading-time,
.article-audience {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  margin: 0;
  padding: .35rem .68rem;
  border: 1px solid rgba(126, 205, 246, .18);
  border-radius: 999px;
  color: #bed2e5;
  background: rgba(7, 25, 47, .72);
  font-size: .74rem;
  font-weight: 750;
  letter-spacing: .01em;
  line-height: 1.2;
}

.article-date::before,
.article-reading-time::before,
.article-audience::before {
  width: .42rem;
  height: .42rem;
  margin-right: .42rem;
  border-radius: 50%;
  background: var(--content-cyan);
  box-shadow: 0 0 .65rem rgba(94, 223, 255, .6);
  content: "";
}

.article-reading-time::before { background: var(--content-indigo); }
.article-audience::before { background: var(--content-gold); }

.article-intro {
  max-width: 47rem;
  color: #cad9e7;
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  font-style: normal;
  line-height: 1.75;
}

.article-content { max-width: 56rem; }
.article-content > :first-child { margin-top: 0; }
.article-content p { max-width: none; color: var(--content-text); line-height: 1.78; }
.article-content h2,
.article-content h3,
.article-content h4 { scroll-margin-top: calc(var(--brand-header-height, 72px) + 1.25rem); text-wrap: balance; }
.article-content a { text-decoration-thickness: 1px; text-underline-offset: .2em; }

.content-section {
  position: relative;
  padding: clamp(1.25rem, 3.4vw, 2.25rem);
  border: 1px solid var(--content-border);
  border-left: 1px solid var(--content-border);
  border-radius: var(--content-radius-lg);
  background:
    radial-gradient(circle at 100% 0, rgba(94, 223, 255, .055), transparent 17rem),
    linear-gradient(150deg, rgba(14, 38, 65, .92), rgba(8, 23, 43, .94));
  box-shadow: var(--content-shadow);
  animation: none;
}

.content-section::before {
  content: "";
  position: absolute;
  inset: 1.2rem auto 1.2rem 0;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(var(--content-cyan), var(--content-indigo));
  opacity: .75;
}

.content-section h2 { color: #dff7ff; letter-spacing: -.025em; }
.content-section h3 { color: var(--content-bright); }

/* Modern callouts and decision blocks. */
.callout,
.alert-box,
.support-box,
.gov-support,
.regional-note,
.decision-guide,
.problem-solution,
.troubleshooting,
.special-cases,
.emergency-services,
.code-box,
.math-formula,
.language-box,
.region-box,
.case-info,
.appointment-guide,
.post-deregistration,
.postal-deregistration,
.tax-deadlines {
  position: relative;
  margin: 1.35rem 0;
  padding: 1.1rem 1.15rem 1.1rem 1.35rem;
  border: 1px solid rgba(94, 223, 255, .22);
  border-left: 3px solid var(--content-cyan);
  border-radius: var(--content-radius);
  color: var(--content-text);
  background: linear-gradient(145deg, rgba(17, 52, 83, .58), rgba(8, 25, 46, .82));
  box-shadow: inset 0 1px rgba(255, 255, 255, .035);
}

.alert-box,
.troubleshooting,
.special-cases { border-left-color: var(--content-warning); }
.emergency-services { border-left-color: var(--content-danger); }
.support-box,
.gov-support { border-left-color: var(--content-success); }
.callout > :last-child,
.alert-box > :last-child,
.support-box > :last-child,
.gov-support > :last-child,
.regional-note > :last-child,
.decision-guide > :last-child,
.problem-solution > :last-child,
.troubleshooting > :last-child,
.special-cases > :last-child,
.emergency-services > :last-child,
.code-box > :last-child,
.math-formula > :last-child { margin-bottom: 0; }

.code-box,
.math-formula { overflow-x: auto; font-family: var(--font-mono); }

/* Responsive data tables; JavaScript wraps historic bare tables with
   .modern-table-scroll while existing wrappers remain supported. */
.modern-table-scroll,
.table-responsive,
.table-container,
.comparison-table-container,
.cost-comparison {
  width: 100%;
  margin: 1.35rem 0;
  overflow-x: auto;
  border: 1px solid var(--content-border);
  border-radius: var(--content-radius);
  background: rgba(5, 18, 35, .68);
  box-shadow: var(--content-shadow);
  -webkit-overflow-scrolling: touch;
}

.article-content table,
.table,
.comparison-table,
.language-table,
.tax-table,
.info-table,
.faq-table,
.epc-table,
.data-table,
.reference-table {
  width: 100%;
  min-width: 38rem;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  color: var(--content-text);
  background: transparent;
}

.article-content th,
.article-content td,
.table th,
.table td,
.comparison-table th,
.comparison-table td,
.language-table th,
.language-table td,
.tax-table th,
.tax-table td,
.info-table th,
.info-table td,
.faq-table th,
.faq-table td,
.epc-table th,
.epc-table td,
.data-table th,
.data-table td,
.reference-table th,
.reference-table td {
  padding: .85rem 1rem;
  border: 0;
  border-bottom: 1px solid rgba(126, 205, 246, .13);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}

.article-content th,
.table th,
.comparison-table th,
.language-table th,
.tax-table th,
.info-table th,
.faq-table th,
.epc-table th,
.data-table th,
.reference-table th {
  color: #eaf9ff;
  background: rgba(36, 91, 136, .42);
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.table-striped tr:nth-child(even) td,
.article-content tbody tr:nth-child(even) td { background: rgba(104, 168, 211, .035); }
.article-content tbody tr:hover td { background: rgba(94, 223, 255, .055); }

/* FAQ systems, including old h3 + p markup and newer question/answer pairs. */
.faq-article,
.faq-section,
.faq-list,
.faq-group,
.faq-content { min-width: 0; }

.faq-grid,
.faq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.faq-item,
.faq-card {
  min-width: 0;
  padding: 1.15rem;
  border: 1px solid var(--content-border);
  border-radius: var(--content-radius);
  background: linear-gradient(145deg, rgba(14, 40, 68, .82), rgba(7, 22, 42, .94));
  box-shadow: inset 0 1px rgba(255, 255, 255, .035);
  transition: border-color .16s ease, transform .16s ease, background .16s ease;
}

.faq-item:hover,
.faq-item:focus-within,
.faq-card:hover { border-color: var(--content-border-strong); background: rgba(12, 38, 66, .94); }
.faq-item h3,
.faq-item h4,
.faq-question { margin: 0; color: var(--content-bright); font-size: 1rem; line-height: 1.45; }
.faq-item > p,
.faq-answer { margin: .7rem 0 0; color: var(--content-muted); line-height: 1.65; }
.faq-item.is-faq-enhanced { padding: 0; overflow: hidden; }
.faq-item.is-faq-enhanced .faq-question {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 3.5rem;
  align-items: center;
  margin: 0;
  padding: .95rem 3.25rem .95rem 1.05rem;
  cursor: pointer;
  user-select: none;
}
.faq-item.is-faq-enhanced .faq-question::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 1rem;
  display: grid;
  width: 1.7rem;
  height: 1.7rem;
  place-items: center;
  border: 1px solid rgba(94, 223, 255, .26);
  border-radius: .55rem;
  color: var(--content-cyan);
  background: rgba(94, 223, 255, .07);
  transform: translateY(-50%);
}
.faq-item.is-faq-enhanced.is-open .faq-question::after { content: "−"; }
.faq-item.is-faq-enhanced .faq-answer { margin: 0; padding: 0 1.05rem 1.05rem; }
.faq-item.is-faq-enhanced .faq-question:focus-visible { outline: 3px solid var(--content-cyan); outline-offset: -3px; }

/* Reusable grids and cards found in historic Belgium editorial pages. */
.language-grid,
.resource-grid,
.app-grid,
.document-grid,
.permit-grid,
.quick-nav-grid,
.waste-types-grid,
.city-transport-grid,
.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.25rem 0;
}

.language-card,
.resource-card,
.app-card,
.document-card,
.permit-card,
.waste-type-card,
.city-card,
.blog-card,
.region-card,
.advisor-profile,
.platform-card,
.service-provider,
.commune-contact,
.cost-item {
  min-width: 0;
  padding: 1.15rem;
  border: 1px solid var(--content-border);
  border-radius: var(--content-radius);
  background: linear-gradient(145deg, rgba(16, 43, 72, .86), rgba(7, 22, 42, .94));
  box-shadow: inset 0 1px rgba(255, 255, 255, .035);
}

.language-card h3,
.resource-card h3,
.app-card h3,
.document-card h3,
.permit-card h3,
.waste-type-card h3,
.city-card h3,
.blog-card h3,
.region-card h3,
.advisor-profile h3,
.platform-card h3,
.service-provider h3 { color: var(--content-bright); }

.blog-card { transition: transform .16s ease, border-color .16s ease; }
.blog-card:hover { border-color: var(--content-border-strong); transform: translateY(-2px); }
.blog-content { padding-top: .65rem; }
.blog-meta { display: flex; flex-wrap: wrap; gap: .45rem; color: var(--content-muted); font-size: .75rem; }
.blog-category { color: var(--content-cyan); font-size: .7rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.blog-date,
.blog-time { display: inline-flex; align-items: center; }
.section-header { margin-bottom: 1.4rem; }

/* Phrasebook layouts. */
.language-comparison,
.region-comparison,
.regional-differences,
.platform-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.25rem 0; }
.language-column,
.region-info { min-width: 0; }
.phrase-item {
  display: grid;
  grid-template-columns: minmax(8rem, .85fr) minmax(8rem, 1fr);
  gap: .25rem .8rem;
  padding: .75rem 0;
  border-bottom: 1px solid rgba(126, 205, 246, .13);
}
.phrase-dutch,
.phrase-french { color: #f2fbff; font-weight: 800; }
.phrase-english { color: #b8d6ea; }
.phrase-usage { grid-column: 1 / -1; color: #7f9db6; font-size: .78rem; line-height: 1.45; }

/* Checklists, quick navigation and timeline patterns. */
.checklist-group,
.document-checklist,
.step-list,
.styled-list,
.article-list {
  display: grid;
  gap: .65rem;
  margin: 1rem 0;
  padding: 0;
  list-style: none;
}
.checklist-column { min-width: 0; }
.checklist-group li,
.document-checklist li,
.step-list li,
.styled-list li,
.article-list li {
  position: relative;
  margin: 0;
  padding: .75rem .85rem .75rem 2.25rem;
  border: 1px solid rgba(126, 205, 246, .14);
  border-radius: .75rem;
  background: rgba(7, 25, 46, .55);
}
.checklist-group li::before,
.document-checklist li::before,
.step-list li::before,
.styled-list li::before,
.article-list li::before {
  content: "✓";
  position: absolute;
  left: .8rem;
  color: var(--content-cyan);
  font-weight: 900;
}
.quick-nav-section { margin: 1.25rem 0; }
.timeline,
.commune-contacts { display: grid; gap: .85rem; margin: 1.25rem 0; }
.timeline-item {
  position: relative;
  padding: 1rem 1rem 1rem 1.35rem;
  border-left: 3px solid var(--content-indigo);
  border-radius: 0 var(--content-radius-sm) var(--content-radius-sm) 0;
  background: rgba(10, 30, 54, .72);
}

/* Data visualizations used by energy and water explainers. */
.chart-container,
.energy-consumption-breakdown,
.bar-chart {
  margin: 1.35rem 0;
  padding: 1.15rem;
  border: 1px solid var(--content-border);
  border-radius: var(--content-radius);
  background: rgba(5, 19, 37, .72);
  box-shadow: inset 0 1px rgba(255, 255, 255, .035);
}
.chart-container {
  display: grid;
  grid-template-columns: repeat(12, minmax(1.4rem, 1fr));
  gap: .45rem;
  align-items: end;
}
.chart-container > h3,
.chart-legend { grid-column: 1 / -1; }
.chart-placeholder {
  display: grid;
  grid-template-rows: 10rem auto;
  gap: .4rem;
  align-items: end;
  min-width: 0;
}
.chart-bar {
  grid-row: 1;
  align-self: end;
  width: 100%;
  min-height: .4rem;
  border-radius: .45rem .45rem .2rem .2rem;
  background: linear-gradient(180deg, var(--content-cyan), #4a73ee);
  box-shadow: 0 0 1rem rgba(94, 223, 255, .18);
}
.chart-label { grid-row: 2; color: var(--content-muted); font-size: .68rem; font-weight: 750; text-align: center; }
.chart-legend { margin-top: .35rem; color: var(--content-muted); font-size: .75rem; text-align: center; }
.breakdown-item {
  display: grid;
  grid-template-columns: minmax(6.5rem, .8fr) minmax(7rem, 2fr) auto;
  gap: .75rem;
  align-items: center;
  padding: .7rem 0;
  border-bottom: 1px solid rgba(126, 205, 246, .12);
}
.breakdown-label { color: var(--content-text); font-size: .86rem; font-weight: 700; }
.breakdown-bar { height: .7rem; border-radius: 999px; background: linear-gradient(90deg, var(--content-cyan), var(--content-indigo)); }
.breakdown-value { min-width: 3rem; color: var(--content-gold); font-weight: 850; text-align: right; }

/* Image, waste and small utility components. */
.image-container { margin: 1.35rem 0; overflow: hidden; border: 1px solid var(--content-border); border-radius: var(--content-radius); }
.image-container img { display: block; width: 100%; height: auto; }
.image-caption { margin: 0; padding: .7rem .9rem; color: var(--content-muted); background: rgba(5, 18, 35, .85); font-size: .76rem; }
.waste-color { display: inline-flex; width: .85rem; height: .85rem; margin-right: .45rem; border-radius: 50%; vertical-align: middle; }
.waste-color.blue,
.blue { --waste-color: #65b7ff; }
.waste-color.green,
.green { --waste-color: #72d8a5; }
.waste-color.orange,
.orange { --waste-color: #ffad66; }
.waste-color.white,
.white { --waste-color: #f4f7fb; }
.waste-color.yellow,
.yellow { --waste-color: #ffe269; }
.waste-color { background: var(--waste-color, #94b4d7); box-shadow: 0 0 0 3px rgba(255, 255, 255, .06); }
.price { color: var(--content-gold); font-weight: 900; }
.badge { display: inline-flex; align-items: center; min-height: 1.75rem; padding: .25rem .55rem; border-radius: 999px; color: #082033; background: var(--content-cyan); font-size: .68rem; font-weight: 850; }

/* Legal pages, PWA tools and the rebuilt 404 shell. */
.legal-page { padding-block: calc(var(--brand-header-height, 72px) + 3rem) 4rem; }
.legal-page .container { max-width: 56rem; }
.table-of-contents {
  margin: 1.25rem 0 2rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--content-border);
  border-radius: var(--content-radius);
  background: rgba(10, 31, 55, .72);
}
.sim-only-tool-container,
.dc-sim-only-tool { min-width: 0; width: 100%; overflow: hidden; border-radius: var(--content-radius); }
.dynamic-stripe-offer { --journey-accent: #6fe5ff; }
.setup-kit-faq { scroll-margin-top: calc(var(--brand-header-height, 72px) + 1rem); }

/* Quiet, crawlable creator credit beneath the legal footer copy. */
.footer .footer-bottom { flex-wrap: wrap; }
.footer .footer-site-credit {
  display: flex;
  flex: 0 0 100%;
  align-items: center;
  justify-content: flex-end;
  gap: .32rem;
  color: rgba(199, 215, 234, .62);
  font-size: .68rem;
  line-height: 1.45;
  letter-spacing: .015em;
}
.footer .footer-site-credit a {
  color: inherit;
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
.footer .footer-site-credit a:hover,
.footer .footer-site-credit a:focus-visible {
  color: #dff7ff;
  text-decoration: underline;
}

.error-404-main {
  display: grid;
  min-height: 100svh;
  place-items: center;
  padding: calc(var(--brand-header-height, 72px) + clamp(2rem, 6vw, 4rem)) 1rem clamp(3rem, 7vw, 5rem);
  background:
    radial-gradient(circle at 50% 20%, rgba(94, 223, 255, .12), transparent 26rem),
    linear-gradient(180deg, #071322, #09192b);
}
.error-404-card {
  position: relative;
  width: min(100%, 46rem);
  padding: clamp(1.5rem, 5vw, 3.5rem);
  overflow: hidden;
  border: 1px solid var(--content-border);
  border-radius: 1.5rem;
  text-align: center;
  background: linear-gradient(145deg, rgba(15, 42, 71, .94), rgba(6, 19, 37, .97));
  box-shadow: 0 2rem 6rem rgba(0, 5, 18, .4), inset 0 1px rgba(255, 255, 255, .05);
}
.error-404-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, transparent, var(--content-cyan), var(--content-indigo), transparent); }
.error-404-code { margin: 0; color: var(--content-cyan); font-size: clamp(4rem, 16vw, 8.5rem); font-weight: 900; letter-spacing: -.08em; line-height: .9; text-shadow: 0 0 2.25rem rgba(94, 223, 255, .22); }
.error-404-title { margin: 1rem 0; color: var(--content-bright); font-size: clamp(1.4rem, 4vw, 2.15rem); }
.error-404-copy { max-width: 38rem; margin: 0 auto 1.6rem; color: var(--content-muted); line-height: 1.7; }
.cta-group { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.cta-button.secondary { color: #dff7ff; border: 1px solid var(--content-border-strong); background: rgba(94, 223, 255, .07); box-shadow: none; }
.cta-button.secondary:hover,
.cta-button.secondary:focus-visible { color: #fff; background: rgba(94, 223, 255, .14); }

/* Classes applied by the shared JavaScript now have explicit visual states. */
[data-brand-lockup].is-mark-ready .brand-mark { opacity: 1; }
.brand-navbar.scrolled { background: rgba(13, 20, 33, .97); }
.scroll-to-top { opacity: 0; visibility: hidden; transform: translateY(.5rem); }
.scroll-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
[data-animate].animated { opacity: 1; transform: none; }
img.lazy { opacity: .72; filter: saturate(.8); }
.touch-active,
.touched { transform: translateY(1px) scale(.99); }
.mouse-focus { outline: none; }
html.slow-connection *,
body.touch-device .feature-card { animation-duration: .01ms; }
html.has-monetization-journey .journey-entry { contain: layout style; }
body.js-loaded .content-section { content-visibility: auto; contain-intrinsic-size: auto 36rem; }

@media (max-width: 760px) {
  .footer .footer-site-credit { justify-content: flex-start; }
  .article-header { padding: 1.15rem; }
  .article-header h1 { font-size: clamp(2rem, 10.5vw, 3.2rem); }
  .article-meta { justify-content: flex-start; }
  .article-date,
  .article-reading-time,
  .article-audience { font-size: .68rem; }
  .content-section { padding: 1.15rem; border-radius: 1rem; }
  .faq-grid,
  .faq-list,
  .language-grid,
  .resource-grid,
  .app-grid,
  .document-grid,
  .permit-grid,
  .quick-nav-grid,
  .waste-types-grid,
  .city-transport-grid,
  .blog-grid,
  .language-comparison,
  .region-comparison,
  .regional-differences,
  .platform-comparison { grid-template-columns: minmax(0, 1fr); }
  .phrase-item { grid-template-columns: minmax(0, 1fr); }
  .phrase-usage { grid-column: auto; }
  .chart-container { grid-template-columns: repeat(6, minmax(1.7rem, 1fr)); row-gap: 1rem; overflow-x: auto; }
  .chart-container > h3,
  .chart-legend { grid-column: 1 / -1; }
  .breakdown-item { grid-template-columns: minmax(5.5rem, .8fr) minmax(5rem, 1.5fr) auto; gap: .5rem; }
  .error-404-main { min-height: 82svh; }
  .cta-group { display: grid; grid-template-columns: minmax(0, 1fr); }
  .cta-group .cta-button { width: 100%; }
}

@media (max-width: 420px) {
  .article-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-audience { grid-column: 1 / -1; }
  .article-date,
  .article-reading-time,
  .article-audience { justify-content: center; }
  .chart-container { grid-template-columns: repeat(4, minmax(2rem, 1fr)); }
  .breakdown-item { grid-template-columns: 1fr auto; }
  .breakdown-bar { grid-column: 1 / -1; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item,
  .blog-card,
  .scroll-to-top { transition: none; }
}

@media print {
  .article-header,
  .content-section,
  .faq-item,
  .modern-table-scroll { color: #111; border-color: #bbb; background: #fff; box-shadow: none; }
  .faq-answer[hidden] { display: block !important; }
}