/* ==========================================================================
   RFD Midnight Titanium — Secondary Pages Unified Design System
   Applies the Obsidian & Titanium aesthetic to charts, chartoaci, contact,
   faq, documentation, tips, soutenir, etc.
   ========================================================================== */

:root {
  --mt-bg-base: #070A0F;
  --mt-bg-surface: #0B1017;
  --mt-bg-elevated: #0E1520;
  --mt-border: #1E293B;
  --mt-border-subtle: #161F2E;
  --mt-border-highlight: rgba(255, 255, 255, 0.08);
  --mt-text-primary: #F8FAFC;
  --mt-text-secondary: #94A3B8;
  --mt-text-muted: #64748B;
  --mt-accent-sky: #38BDF8;
  --mt-accent-blue: #2563EB;
  --mt-accent-emerald: #10B981;
  --mt-accent-amber: #F59E0B;
}

html, body {
  background-color: var(--mt-bg-base) !important;
  color: var(--mt-text-primary) !important;
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  min-height: 100vh;
}

/* ── Topbar / Header ────────────────────────────────────────── */
.topbar,
header.topbar,
.page-shell .topbar {
  background: rgba(11, 16, 23, 0.88) !important;
  border-bottom: 1px solid var(--mt-border) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
}

.topbar .nav,
.topbar-nav {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.topbar .nav .btn,
.topbar-nav .btn,
.nav a.btn {
  background: var(--mt-bg-elevated) !important;
  border: 1px solid var(--mt-border) !important;
  color: var(--mt-text-secondary) !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.topbar .nav .btn:hover,
.topbar-nav .btn:hover,
.nav a.btn:hover {
  background: #131B26 !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 10px rgba(56, 189, 248, 0.12) !important;
}

.topbar .nav .btn.active,
.topbar-nav .btn.active,
.nav a.btn.active {
  background: #131B26 !important;
  border-color: rgba(56, 189, 248, 0.5) !important;
  color: var(--mt-accent-sky) !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.2) !important;
}

/* ── Hero / Page Headers ────────────────────────────────────── */
.hero,
.page-head,
.content-head {
  margin-bottom: 2rem !important;
}

.hero h1,
.page-head h1,
h1 {
  color: #FFFFFF !important;
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

.hero p,
.page-head p {
  color: var(--mt-text-secondary) !important;
}

/* ── Panels, Cards & Containers ────────────────────────────── */
.panel,
.card,
.doc-card,
.charts-access-panel,
.oaci-guide,
.oaci-guide-step,
.accordion-item,
.faq-item,
.tips-card,
.doc-section {
  background: var(--mt-bg-surface) !important;
  border: 1px solid var(--mt-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  color: var(--mt-text-primary) !important;
}

/* ── Inputs & Form Controls ─────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
textarea,
select,
.charts-search-input,
.search-input {
  background: var(--mt-bg-base) !important;
  border: 1px solid var(--mt-border) !important;
  border-radius: 10px !important;
  color: #FFFFFF !important;
  outline: none !important;
  transition: all 0.2s ease !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus,
.charts-search-input:focus,
.search-input:focus {
  border-color: rgba(56, 189, 248, 0.7) !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.16) !important;
}

label {
  color: var(--mt-text-secondary) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* ── Buttons ────────────────────────────────────────────────── */
.submit-btn,
.btn-primary,
.charts-access-btn,
button[type="submit"] {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 18px rgba(2, 132, 199, 0.35) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.submit-btn:hover,
.btn-primary:hover,
.charts-access-btn:hover,
button[type="submit"]:hover {
  background: linear-gradient(135deg, #38bdf8 0%, #3b82f6 100%) !important;
  box-shadow: 0 6px 24px rgba(56, 189, 248, 0.45) !important;
  transform: translateY(-1px) !important;
}

/* ── FAQ & Accordions ───────────────────────────────────────── */
.faq-question,
.accordion-header {
  color: var(--mt-text-primary) !important;
  font-weight: 700 !important;
}

.faq-answer,
.accordion-content {
  color: var(--mt-text-secondary) !important;
  line-height: 1.6 !important;
}

/* ── Tables ─────────────────────────────────────────────────── */
table {
  width: 100%;
  border-collapse: collapse;
}

thead th {
  background: var(--mt-bg-base) !important;
  color: var(--mt-text-secondary) !important;
  border-bottom: 1px solid var(--mt-border) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

tbody td {
  border-bottom: 1px solid var(--mt-border-subtle) !important;
  color: var(--mt-text-primary) !important;
}

tbody tr:hover {
  background: rgba(255, 255, 255, 0.02) !important;
}

/* ── Badges & Status Pills ──────────────────────────────────── */
.badge,
.tag,
.pill {
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
}

.badge-sky,
.tag-sky {
  background: rgba(56, 189, 248, 0.12) !important;
  color: #38BDF8 !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
}

.badge-emerald,
.tag-emerald {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #10B981 !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
}

/* ── Footer ─────────────────────────────────────────────────── */
footer,
.page-footer {
  border-top: 1px solid var(--mt-border-subtle) !important;
  color: var(--mt-text-muted) !important;
  padding: 2rem 0 !important;
}

footer a,
.page-footer a {
  color: var(--mt-text-secondary) !important;
  text-decoration: none !important;
}

footer a:hover,
.page-footer a:hover {
  color: var(--mt-accent-sky) !important;
}

/* ── Promo buttons (Boutique / Soutenir) ──────────────────── */
.topbar .nav .btn.btn-shop,
.nav a.btn.btn-shop {
  background: rgba(245, 158, 11, 0.12) !important;
  color: #FBBF24 !important;
  border-color: rgba(245, 158, 11, 0.32) !important;
}
.topbar .nav .btn.btn-shop:hover,
.nav a.btn.btn-shop:hover {
  background: rgba(245, 158, 11, 0.2) !important;
  color: #FDE68A !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
}
.topbar .nav .btn.btn-soutenir,
.nav a.btn.btn-soutenir {
  background: rgba(244, 63, 94, 0.12) !important;
  color: #FDA4AF !important;
  border-color: rgba(244, 63, 94, 0.32) !important;
}
.topbar .nav .btn.btn-soutenir:hover,
.nav a.btn.btn-soutenir:hover {
  background: rgba(244, 63, 94, 0.2) !important;
  color: #FECDD3 !important;
  border-color: rgba(244, 63, 94, 0.45) !important;
}

/* ==========================================================================
   Premium Layer — polish, depth & refinement
   ========================================================================== */

/* ── Aurora page background ─────────────────────────────────── */
body {
  background:
    radial-gradient(1100px 560px at 12% -8%, rgba(56, 189, 248, 0.10), transparent 60%),
    radial-gradient(900px 500px at 88% -6%, rgba(16, 185, 129, 0.07), transparent 55%),
    radial-gradient(1300px 720px at 50% 115%, rgba(37, 99, 235, 0.08), transparent 60%),
    linear-gradient(180deg, #080d14 0%, #060a10 100%) !important;
  background-color: #070a0f !important;
}

/* ── Topbar — premium glass ─────────────────────────────────── */
.topbar,
header.topbar,
.page-shell .topbar {
  background: linear-gradient(180deg, rgba(14, 19, 29, 0.94), rgba(9, 13, 20, 0.88)) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* ── Hero typography ────────────────────────────────────────── */
.hero .kicker,
.kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--mt-accent-sky) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}
.hero h1,
.hero h2,
.page-head h1 {
  font-family: 'Plus Jakarta Sans', 'Space Grotesk', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.08 !important;
  font-size: clamp(1.9rem, 4.6vw, 2.9rem) !important;
  margin: 0.65rem 0 1rem !important;
}
.hero p,
.page-head p {
  font-size: 1rem !important;
  line-height: 1.65 !important;
  max-width: 66ch !important;
}

/* ── Cards & panels — layered depth ─────────────────────────── */
.panel,
.card,
.doc-card,
.charts-access-panel,
.oaci-guide,
.oaci-guide-step,
.accordion-item,
.faq-item,
.tips-card,
.doc-section {
  background: linear-gradient(180deg, #0e1621 0%, #0b121c 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 14px 34px -12px rgba(0, 0, 0, 0.6) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important;
}
.card:hover,
.panel:hover,
.tips-card:hover,
.doc-card:hover {
  border-color: rgba(56, 189, 248, 0.22) !important;
  transform: translateY(-2px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 22px 48px -14px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(56, 189, 248, 0.05) !important;
}

/* ── Buttons — premium CTAs ─────────────────────────────────── */
.submit-btn,
.btn-primary,
.charts-access-btn,
button[type="submit"] {
  background: linear-gradient(135deg, #38bdf8 0%, #2563eb 100%) !important;
  border: 1px solid rgba(125, 211, 252, 0.35) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 26px -6px rgba(37, 99, 235, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  padding: 12px 20px !important;
  font-size: 14px !important;
}
.submit-btn:hover,
.btn-primary:hover,
.charts-access-btn:hover,
button[type="submit"]:hover {
  background: linear-gradient(135deg, #7dd3fc 0%, #3b82f6 100%) !important;
  box-shadow: 0 14px 32px -6px rgba(56, 189, 248, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  transform: translateY(-2px) !important;
}

/* ── Hero CTA buttons ───────────────────────────────────────── */
.hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
.hero-actions .btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #E2E8F0 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  transition: all 0.2s ease !important;
}
.hero-actions .btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  transform: translateY(-1px) !important;
}
.hero-actions .btn-shop {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(245, 158, 11, 0.08)) !important;
  color: #FCD34D !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
}
.hero-actions .btn-shop:hover {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(245, 158, 11, 0.12)) !important;
  color: #FDE68A !important;
}
.hero-actions .btn-donate {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.22), rgba(244, 63, 94, 0.08)) !important;
  color: #FDA4AF !important;
  border-color: rgba(244, 63, 94, 0.4) !important;
}
.hero-actions .btn-donate:hover {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.3), rgba(244, 63, 94, 0.12)) !important;
  color: #FECDD3 !important;
}

/* ── Pills & badges ─────────────────────────────────────────── */
.badge,
.tag,
.pill {
  border-radius: 999px !important;
  padding: 4px 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
.pill {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--mt-text-secondary) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
}

/* ── Accordions (FAQ) ───────────────────────────────────────── */
details {
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  margin-bottom: 10px !important;
  overflow: hidden !important;
  transition: border-color 0.2s ease !important;
}
details:hover {
  border-color: rgba(255, 255, 255, 0.12) !important;
}
details[open] {
  border-color: rgba(56, 189, 248, 0.28) !important;
}
details summary {
  cursor: pointer !important;
  padding: 14px 18px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--mt-text-primary) !important;
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  transition: background 0.2s ease !important;
}
details summary::-webkit-details-marker {
  display: none !important;
}
details summary::after {
  content: "+" !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  color: var(--mt-accent-sky) !important;
  line-height: 1 !important;
  transition: transform 0.2s ease !important;
  flex: 0 0 auto !important;
}
details[open] summary::after {
  transform: rotate(45deg) !important;
}
details summary:hover {
  background: rgba(255, 255, 255, 0.03) !important;
}
details .answer {
  padding: 2px 18px 16px !important;
  color: var(--mt-text-secondary) !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* ── Lists ──────────────────────────────────────────────────── */
.utility-list {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}
.utility-list li {
  position: relative !important;
  padding-left: 22px !important;
  margin-bottom: 10px !important;
  color: var(--mt-text-secondary) !important;
  line-height: 1.6 !important;
}
.utility-list li::before {
  content: "" !important;
  position: absolute !important;
  left: 2px !important;
  top: 8px !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #38bdf8, #2563eb) !important;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.5) !important;
}

/* ── Callout note ───────────────────────────────────────────── */
.note {
  padding: 12px 16px !important;
  border-radius: 12px !important;
  background: rgba(56, 189, 248, 0.08) !important;
  color: #BAE6FD !important;
  border: 1px solid rgba(56, 189, 248, 0.2) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

/* ── Footer cards ───────────────────────────────────────────── */
.footer-card {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #0e1621 0%, #0b121c 100%) !important;
  padding: 1.75rem !important;
}

/* ── Inputs focus polish ────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
textarea,
select,
.charts-search-input,
.search-input {
  padding: 12px 14px !important;
  font-size: 14px !important;
  border-radius: 12px !important;
}

/* ── Focus visibility ───────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(56, 189, 248, 0.7) !important;
  outline-offset: 2px !important;
  border-radius: 8px !important;
}

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: #334155;
  background-clip: padding-box;
}

/* ── Selection & smooth scrolling ───────────────────────────── */
::selection {
  background: rgba(56, 189, 248, 0.3);
  color: #fff;
}
html {
  scroll-behavior: smooth;
}

/* ==========================================================================
   Brand & Global Footer — premium chrome
   ========================================================================== */

/* ── Topbar layout (brand + nav) ───────────────────────────── */
.topbar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  padding: 10px 18px !important;
}
.topbar-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  margin-right: 4px !important;
}
.topbar-brand img {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
}
.topbar-brand span {
  font-weight: 800 !important;
  font-size: 15px !important;
  letter-spacing: 0.02em !important;
  background: linear-gradient(135deg, #F8FAFC 0%, #94A3B8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ── Global site footer ─────────────────────────────────────── */
.site-footer {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin: 2.5rem auto 0 !important;
  max-width: 1180px;
  padding: 1.25rem 1.5rem !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #0e1621 0%, #0b121c 100%) !important;
  color: var(--mt-text-muted) !important;
  font-size: 13px !important;
}
.site-footer .site-footer-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-weight: 700 !important;
  color: var(--mt-text-secondary) !important;
}
.site-footer .site-footer-brand img {
  width: 22px !important;
  height: 22px !important;
  border-radius: 6px !important;
}
.site-footer nav {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}
.site-footer a {
  color: var(--mt-text-secondary) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
.site-footer a:hover {
  color: var(--mt-accent-sky) !important;
}

/* ==========================================================================
   Responsive & anti-overlap — premium layout hardening
   ========================================================================== */

/* ── Global anti-overflow / anti-overlap ────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box !important;
}
html,
body {
  overflow-x: hidden !important;
}
img,
svg,
video {
  max-width: 100% !important;
  height: auto !important;
}
.card,
.panel,
.field,
.doc-card,
.tips-card,
details,
summary,
p,
li,
h1,
h2,
h3 {
  min-width: 0 !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

/* ── Cards grid (soutenir, tips…) — fluid, no overlap ───────── */
.cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)) !important;
  gap: 1.25rem !important;
  align-items: stretch !important;
}

/* ── Card header (title + tag) ──────────────────────────────── */
.card-top {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  flex-wrap: wrap !important;
  margin-bottom: 0.75rem !important;
}
.card-top h3 {
  margin: 0 !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: var(--mt-text-primary) !important;
}

/* ── Meta pills (progress stats) ────────────────────────────── */
.meta-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
  gap: 0.6rem !important;
  margin-top: 1rem !important;
}
.meta-pill {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.meta-pill strong {
  font-size: 10px !important;
  color: var(--mt-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-weight: 700 !important;
}
.meta-pill span {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--mt-text-primary) !important;
}

/* ── Form fields ────────────────────────────────────────────── */
.field {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 0 !important;
}

/* ── Tablet ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr !important;
  }
  .grid > * {
    grid-column: 1 / -1 !important;
  }
  .cards {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  }
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .grid,
  .cards {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .grid > *,
  .field,
  .field-full {
    grid-column: 1 / -1 !important;
  }
  .meta-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .hero h1,
  .hero h2,
  .page-head h1 {
    font-size: 1.7rem !important;
    letter-spacing: -0.02em !important;
  }
  .hero p,
  .page-head p {
    font-size: 0.95rem !important;
  }
  .topbar {
    padding: 10px 12px !important;
    gap: 8px !important;
  }
  .topbar .nav,
  .topbar-nav {
    gap: 6px !important;
  }
  .topbar .nav .btn,
  .nav a.btn {
    padding: 6px 10px !important;
    font-size: 11px !important;
  }
  .site-footer {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .site-footer nav {
    gap: 12px !important;
  }
  .hero-actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }
  details summary {
    font-size: 14px !important;
    padding: 12px 14px !important;
  }
  .wrap {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ── Very small screens ─────────────────────────────────────── */
@media (max-width: 400px) {
  .meta-grid {
    grid-template-columns: 1fr !important;
  }
  .hero h1,
  .hero h2 {
    font-size: 1.5rem !important;
  }
}