/* ==========================================================================
   DACH TECH DATA ENGINE - PRISTINE 3X2 GRID & NO WRAP MAP HEADER
   ========================================================================== */

@import url('fonts.css');

:root {
  --bg-dark: #080c14;
  --bg-card: rgba(15, 23, 42, 0.85);
  --bg-card-hover: rgba(24, 34, 58, 0.95);
  --bg-glass-pill: rgba(255, 255, 255, 0.04);

  --accent-blue: #38bdf8;
  --accent-indigo: #6366f1;
  --accent-emerald: #10b981;
  --accent-amber: #f59e0b;
  --accent-rose: #f43f5e;
  --accent-purple: #a855f7;

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-active: rgba(56, 189, 248, 0.4);

  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-dim: #64748b;

  --svg-stroke: #ffffff;
  --svg-mid: #38bdf8;
  --svg-bot: #059669;
  --svg-grad1: #0284c7;
  --svg-grad2: #059669;

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Fira Code', monospace;

  --shadow-card: 0 10px 30px -5px rgba(0, 0, 0, 0.5);
  --tr-fast: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --tr-smooth: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Anchor jumps land below the sticky navbar. --nav-offset is the navbar's
   measured height plus a gap, kept current by js/app.js; 80px is the fallback. */
html { scroll-behavior: smooth; color-scheme: dark; scroll-padding-top: var(--nav-offset, 80px); }
body { background-color: var(--bg-dark); color: var(--text-main); font-family: var(--font-body); line-height: 1.6; min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
button, .btn { font-family: inherit; }
#particle-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; opacity: 0.15; }
.app-container { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; padding: 0 2rem 4rem 2rem; }

/* NAVBAR (SEAMLESS TOP-DOCKED BAR WITH ROUNDED BOTTOM & REFINED PADDING) */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.4rem;
  margin-top: 0;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0 0 14px 14px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(8, 12, 20, 0.92);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  gap: 1.5rem;
}
.brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; flex-shrink: 0; margin-left: 0.25rem; }
.brand-group { display: flex; align-items: center; gap: 0.75rem; }
.brand-signal-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 10px #34d399, 0 0 20px rgba(52, 211, 153, 0.5);
  display: inline-block;
  flex-shrink: 0;
  animation: signalPulse 2.4s infinite ease-in-out;
}

@keyframes signalPulse {
  0%, 100% {
    box-shadow: 0 0 8px #34d399, 0 0 16px rgba(52, 211, 153, 0.4);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 14px #34d399, 0 0 26px rgba(52, 211, 153, 0.7);
    transform: scale(1.2);
  }
}

/* All-caps needs POSITIVE tracking. At -0.02em the glyphs of DACH SIGNALS
   touched each other -- negative tracking suits lowercase display type, not
   a capitalised wordmark. */
.brand-title { font-size: 1.15rem; font-weight: 800; color: #fff; letter-spacing: 0.045em; white-space: nowrap; }
.brand-badge {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.03);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}

/* DACH Region Map Labels & Text */
.dach-label, .dach-map-svg text, text.dach-label {
  fill: #ffffff !important;
  color: #ffffff !important;
  font-family: var(--font-body), system-ui, -apple-system, sans-serif;
  font-weight: 900 !important;
  letter-spacing: 1px;
  text-anchor: middle;
  pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.95)) !important;
}
.dach-label-ch {
  font-size: 56px !important;
}

.nav-actions { display: flex; align-items: center; gap: 1.25rem; flex-shrink: 0; }
.nav-link { color: #cbd5e1; text-decoration: none; font-weight: 500; font-size: 0.88rem; white-space: nowrap; }
.nav-link:hover { color: #fff; }

/* FLOATING EXPORT: a small tab on the right edge, vertically centred: icon
   on top, "Export" below. Hidden (slid off the edge) until the configurator's
   own export button has been scrolled past; visibility keeps it out of the tab
   order meanwhile. Qualified with .btn to beat the shared .btn rules below. */
.btn.floating-export {
  position: fixed; top: 50%; right: 0; z-index: 900;
  flex-direction: column; gap: 0.3rem;
  padding: 0.65rem 0.5rem 0.55rem 0.55rem;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1; white-space: nowrap;
  border-radius: 10px 0 0 10px; border-right: none;
  visibility: hidden; transform: translate(100%, -50%);
  transition: transform 0.25s ease, visibility 0s linear 0.25s;
}
.btn.floating-export svg { flex-shrink: 0; width: 20px; height: 20px; }
.btn.floating-export.is-visible {
  visibility: visible; transform: translate(0, -50%);
  transition: transform 0.25s ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) { .btn.floating-export, .btn.floating-export.is-visible { transition: none; } }

/* HERO CTA: small, quiet entry point to the configurator */
.hero-cta {
  justify-self: end; width: 100%; max-width: 290px;
  display: flex; flex-direction: column; gap: 0.6rem;
  padding: 1rem 1.1rem; border: 1px solid var(--border-subtle); border-radius: 12px;
  background: rgba(15, 23, 42, 0.45);
}
.hero-cta-stat {
  display: flex; align-items: center; gap: 0.5rem; margin: 0;
  font-size: 0.78rem; color: var(--text-muted); line-height: 1.35;
}
.hero-cta-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: #34d399; box-shadow: 0 0 6px rgba(52, 211, 153, 0.6);
  animation: signalPulse 2.4s infinite ease-in-out;
}
/* Scoped so it beats the shared .btn / .btn-buy-emerald rules defined later. */
.hero-cta .hero-cta-btn {
  gap: 0.4rem; padding: 0.5rem 1rem; border-radius: 8px;
  font-size: 0.84rem; font-weight: 600;
}
.hero-cta-note { margin: 0; font-size: 0.72rem; color: var(--text-dim); text-align: center; }
@media (prefers-reduced-motion: reduce) { .hero-cta-dot { animation: none; } }

/* HERO SPLIT GRID */
.hero-split-grid {
  display: grid;
  grid-template-columns: 2.5fr 1fr;
  gap: 1.5rem;
  align-items: center;
  text-align: left;
}
@media (max-width: 900px) {
  /* Fix Horizontal Overflow Issues on Mobile */
  /* Fix Chart overflows */
  .fancy-plot-card { max-width: 100% !important; padding: 1rem !important; overflow-x: auto; }
  canvas { max-width: 100% !important; height: auto !important; }
  
  /* Pricing Grid Mobile */
  .pricing-grid { grid-template-columns: 1fr !important; }
  div[style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; gap: 0.5rem !important; }
  div[style*="grid-template-columns: repeat(3, 1fr)"] > div { padding: 0.5rem !important; }
  
  /* Export Button Text Wrap */
  .btn-buy-emerald { white-space: normal !important; height: auto !important; line-height: 1.3 !important; text-align: center; }
  
  /* Live Directory Table Fonts */
  /* Stretch table full width of container */
  .table-scroll-wrapper { margin-left: -1rem; margin-right: -1rem; width: calc(100% + 2rem); }
  /* Make company name smaller */
  .org-name { font-size: 0.85rem !important; line-height: 1.2; }
  /* Make domain name smaller */
  .data-table td > div[style*="font-size: 0.76rem;"] { font-size: 0.7rem !important; }

  .data-table th { font-size: 0.6rem !important; padding: 0.5rem 0.3rem !important; }
  .data-table td { font-size: 0.65rem !important; padding: 0.5rem 0.3rem !important; }

  .brand { flex-wrap: wrap; gap: 0.25rem; }
  .brand-group { flex-wrap: wrap; }
  .brand-title { font-size: 1rem; white-space: normal; letter-spacing: 0.04em; }
  .brand-badge { display: none; /* Hide enterprise badge on small screens to save space */ }
  .advantage-title { white-space: normal !important; }
  .app-container { padding: 0 1rem 3rem 1rem; }
  body, html { max-width: 100vw; overflow-x: hidden; }

  .hero-split-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

/* BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.75rem 1.6rem;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
  letter-spacing: -0.01em;
  transition: var(--tr-fast);
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: linear-gradient(135deg, #0284c7 0%, #6366f1 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 20px rgba(2, 132, 199, 0.4);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #0369a1 0%, #4f46e5 100%);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 10px 28px rgba(99, 102, 241, 0.6);
  color: #ffffff;
}

.btn-glass {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  backdrop-filter: blur(10px);
}

.btn-glass:hover {
  background: rgba(30, 41, 59, 0.9);
  border-color: var(--accent-blue);
  color: #fff;
  box-shadow: 0 4px 15px rgba(56, 189, 248, 0.15);
}

/* Hero */
.hero { padding: 3rem 0 2rem 0; text-align: center; }
.hero-title { font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.03em; margin-bottom: 1rem; color: #fff; }
.hero-subtitle { font-size: 1.05rem; color: var(--text-muted); max-width: 820px; margin: 0 auto 2rem auto; }

/* ADVANTAGE SECTION: SIX SHORT CARDS, DETAILS BEHIND A TOGGLE */
.advantage-section { margin-bottom: 3.5rem; }
.advantage-header { text-align: center; margin-bottom: 1.5rem; }
.advantage-header .brand-badge { display: inline-block; margin-bottom: 0.45rem; }
.advantage-header h2 { font-size: 1.55rem; font-weight: 800; color: var(--text-main); margin: 0; }
.advantage-header p { color: var(--text-muted); font-size: 0.92rem; margin: 0.35rem auto 0 auto; }
.advantage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 1024px) { .advantage-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .advantage-grid { grid-template-columns: 1fr !important; } }

.advantage-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  transition: var(--tr-smooth);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: auto;
}

.advantage-card:hover { border-color: var(--accent-blue); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(56, 189, 248, 0.12); }
.advantage-icon { width: 34px; height: 34px; background: rgba(56, 189, 248, 0.1); border: 1px solid rgba(56, 189, 248, 0.2); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; margin-bottom: 0.4rem; flex-shrink: 0; }
.advantage-title { font-size: 1rem; font-weight: 800; color: #fff; margin: 0.15rem 0 0.3rem 0; line-height: 1.3; }
.advantage-body { font-size: 0.86rem; color: var(--text-muted); line-height: 1.5; margin: 0; }
.advantage-highlight { color: var(--accent-emerald); font-weight: 600; }
.advantage-card { padding: 1.1rem 1.2rem; }
/* "What you get" cards expand in place. They used to flip, and a flipping card
   must be as tall as its back face, so every front stood half empty. Now only
   the short front shows; "How it works" swaps it for the detail and the card
   grows (height animated in js/app.js). */
/* Rows stretch, so a row's cards always end level and their links line up;
   opening one card grows its whole row by the extra lines. */
.advantage-grid { align-items: stretch; }
.flip-card, .flip-inner { height: 100%; }
.flip-face { height: 100%; box-sizing: border-box; }
.flip-front .flip-toggle { margin-top: auto; }
.flip-inner { overflow: hidden; transition: height 0.25s ease; }
.flip-back { display: none; }
.flip-card.is-flipped .flip-front { display: none; }
.flip-card.is-flipped .flip-back { display: flex; }
.flip-card.is-flipped .advantage-card { border-color: rgba(56, 189, 248, 0.45); }
.flip-card .advantage-card:hover { transform: none; }
.flip-back .advantage-title { font-size: 1.02rem; }
.flip-back .advantage-body { font-size: 0.84rem; }
.flip-front .advantage-title { font-size: 1.05rem; margin-bottom: 0.2rem; }
.flip-front .advantage-body { font-size: 0.88rem; }
.flip-toggle {
  margin-top: 0.15rem; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.55rem 0 0 0; background: none; border: none; cursor: pointer;
  font: inherit; font-size: 0.78rem; font-weight: 600; color: var(--accent-blue);
}
.flip-toggle:hover { text-decoration: underline; }
.flip-arrow { transition: transform 0.2s ease; }
.flip-front .flip-toggle:hover .flip-arrow { transform: translateY(2px); }
.flip-back .flip-toggle:hover .flip-arrow { transform: translateY(-2px); }
.flip-toggle:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) {
  .flip-inner { transition: none; }
}

/* MAP & DASHBOARD GRID - EXACT 50/50 HALF-SCREEN SPLIT */
.map-dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.25rem; margin-bottom: 3.5rem; align-items: start; }
@media (max-width: 1024px) { .map-dashboard-grid { grid-template-columns: 1fr; } }

/* Two-column desktop layout: the right column (15 sector cards + the custom
   request card) is intrinsically a little taller than the left, so with
   align-items:start the two columns ended on different lines. Stretch the left
   column to the row height and let its last card ("What Happened") take up the
   slack, so its bottom edge lines up with the Custom Data Request card. The
   card's button grid absorbs the extra height rather than leaving dead space. */
@media (min-width: 1025px) {
  .map-dashboard-grid { align-items: stretch; }
  .map-column-container { height: 100%; }
  /* The slack is shared: the "What Happened" card grows first (its button grid
     takes the height), capped so the buttons cannot turn into slabs on narrow
     desktops where the sector descriptions wrap and the gap reaches ~400px;
     whatever is left goes to the map card, where the SVG is already centred. */
  .map-column-container > :last-child { flex: 1 1 auto; max-height: 270px; display: flex; flex-direction: column; }
  .map-column-container > :last-child .role-toggle-grid { flex: 1 1 auto; align-content: stretch; }
  .map-column-container > .map-card { flex: 1 1 auto; display: flex; flex-direction: column; }
  .map-column-container > .map-card > #dach-map-container { flex: 1 1 auto; }
}

.map-card { background: rgba(15, 23, 42, 0.15); border: 1px solid var(--border-subtle); border-radius: 20px; padding: 1.75rem; backdrop-filter: blur(2px); }

/* MAP HEADER FIX: CLEAN 1-LINE FLEX NO WRAPPING */
.map-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; flex-wrap: nowrap; gap: 0.75rem; }
.map-title { font-size: 1.05rem; font-weight: 700; color: #fff; white-space: nowrap; flex-shrink: 0; }

.dach-map-svg { width: 100%; height: auto; max-height: 480px; }
.map-country-path {
  fill: rgba(15, 23, 42, 0.7);
  stroke: rgba(148, 163, 184, 0.35);
  stroke-width: 1.5;
  cursor: pointer;
  transition: all 0.3s ease;
}
.map-country-path:hover {
  fill: var(--svg-fill-active);
  stroke: var(--svg-stroke-active);
  filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.4));
}
.map-country-path.active {
  fill: var(--svg-fill-active);
  stroke: var(--svg-stroke-active);
  stroke-width: 2.2;
  filter: drop-shadow(0 0 16px rgba(56, 189, 248, 0.55));
}

.map-country-toggle { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.75rem; }
.country-toggle-btn { font-size: 0.72rem; padding: 0.28rem 0.6rem; background: #0f172a; border: 1px solid var(--border-subtle); border-radius: 6px; color: var(--text-muted); cursor: pointer; transition: var(--tr-fast); display: flex; align-items: center; gap: 0.35rem; }
.country-toggle-btn.active { background: rgba(56, 189, 248, 0.18); border-color: var(--accent-blue); color: #fff; box-shadow: 0 0 10px rgba(56, 189, 248, 0.25); }

/* EXPANDING CATEGORY CARDS DASHBOARD */
.dashboard-cards-container { display: flex; flex-direction: column; gap: 1rem; }
/* js/app.js renders every sector card into #sector-cards-mount. As a plain block
   child, the mount was ONE flex item, so the container's 1rem gap fell only
   below the whole list and the 15 sector cards stacked border-to-border with no
   separation at all. display:contents promotes each card to a flex item of the
   container so the gap applies between them. The header padding below is trimmed
   to pay for the 15 new gaps, keeping this column close to its previous height. */
#sector-cards-mount { display: contents; }
.category-expand-card { background: rgba(15, 23, 42, 0.85); border: 1px solid var(--border-subtle); border-radius: 14px; overflow: hidden; transition: var(--tr-smooth); }
.category-expand-card.active { border-color: var(--accent-blue); box-shadow: 0 0 25px rgba(56, 189, 248, 0.12); }
.category-card-header { padding: 0.7rem 1.4rem; display: flex; justify-content: space-between; align-items: center; cursor: pointer; background: #0f172a; transition: var(--tr-fast); }
.category-card-header:hover { background: #141e33; }

.cat-title-group { display: flex; align-items: center; gap: 0.85rem; }
/* flex-shrink:0 is load-bearing. This is a flex item next to a long title, so
   with the default flex-shrink:1 the browser compressed its WIDTH while the
   height stayed 38px -- a squeezed rectangle with the icon touching the sides.
   aspect-ratio keeps it square if the width is ever set elsewhere. */
.cat-icon-badge { width: 38px; height: 38px; min-width: 38px; flex-shrink: 0; aspect-ratio: 1 / 1; box-sizing: border-box; background: rgba(56, 189, 248, 0.1); border: 1px solid rgba(56, 189, 248, 0.2); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.cat-name { font-size: 0.95rem; font-weight: 700; color: #fff; }
.cat-desc { font-size: 0.78rem; color: var(--text-muted); }
.cat-chevron { width: 18px; height: 18px; color: var(--text-muted); transition: transform 0.3s ease; }
.category-expand-card.active .cat-chevron { transform: rotate(180deg); color: var(--accent-blue); }

.category-subpanel { display: none; padding: 1.1rem 1.4rem 1.4rem 1.4rem; background: rgba(15, 23, 42, 0.6); border-top: 1px solid var(--border-subtle); }
.category-expand-card.active .category-subpanel { display: block !important; }
.subfilter-chips-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.65rem; margin-top: 0.65rem; }
.subfilter-chip {
  padding: 0.55rem 0.85rem;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.subfilter-chip:hover:not(.active) {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(56, 189, 248, 0.4);
  color: #e2e8f0;
}
.subfilter-chip.active {
  background: rgba(14, 165, 233, 0.18) !important;
  border: 1.5px solid #38bdf8 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.25), inset 0 0 8px rgba(56, 189, 248, 0.1) !important;
}
.subfilter-chip.active::before {
  content: '✓';
  color: #38bdf8;
  font-weight: 800;
  font-size: 0.85rem;
}

/* EXECUTIVE DATA BRIEFING INDEPENDENT FEATURE CARDS */
.blurred-intelligence-preview { background: #0f172a; border: 1px solid var(--border-subtle); border-radius: 18px; padding: 1.75rem; margin-top: 2rem; }

.briefing-feature-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 1.25rem 1.4rem;
}

.briefing-card-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 1rem;
}
@media (max-width: 900px) { .briefing-card-grid-2col { grid-template-columns: 1fr; } }




.playbook-lead-list { margin-top: 0.85rem; display: flex; flex-direction: column; gap: 0.65rem; }
.playbook-lead-item { background: rgba(8, 12, 20, 0.6); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 0.75rem 1rem; font-size: 0.85rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.playbook-lead-item.blur-3rd { filter: blur(5px); opacity: 0.4; user-select: none; pointer-events: none; }

/* Progressive blur down the dossier list, the same idea as .row-blur-* in the
   live directory: the top card is legible, each one below it less so, and the
   tail is shape without content.

   This is presentation, NOT protection. Blurred text is still in the DOM and
   readable in devtools in seconds. Everything here has already been masked
   server-side by maskLeadForPreview(), and the blur is what makes the teaser
   look like a teaser rather than a broken page full of asterisks. Never rely on
   it to hide something that would matter if it were read. */
.playbook-lead-item.dossier-blur-1 { filter: blur(1.4px); opacity: 0.92; }
.playbook-lead-item.dossier-blur-2 { filter: blur(2.9px); opacity: 0.72; }
.playbook-lead-item.dossier-blur-3 {
  filter: blur(4.6px); opacity: 0.5;
  user-select: none; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  /* Blur is decoration here; a reader who has asked for less visual noise keeps
     the dimming, which still reads as "locked", without the smear. */
  .playbook-lead-item[class*="dossier-blur-"] { filter: none; }
}

.recency-filter-box {
  margin-top: 1.15rem;
  padding: 0.95rem 1.1rem;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.recency-filter-box:hover {
  border-color: rgba(56, 189, 248, 0.4);
}
.role-toggle-btn,
.btn-time-filter {
  background: rgba(30, 41, 59, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94a3b8;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.55rem 0.5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.role-toggle-btn:hover,
.btn-time-filter:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  transform: translateY(-1px);
}
.role-toggle-btn.active,
.btn-time-filter.active {
  background: rgba(16, 185, 129, 0.22) !important;
  border-color: #10b981 !important;
  color: #34d399 !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.3);
}



/* BESPOKE CUSTOM DATA REQUEST EXPANDABLE CARD (DISTINCT INDIGO-VIOLET COLOR SHADE) */
.cat-icon-badge.custom-request-badge {
  background: rgba(168, 85, 247, 0.15) !important;
  border-color: rgba(168, 85, 247, 0.4) !important;
  color: #c084fc !important;
}
.custom-request-expand-card {
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.95), rgba(15, 23, 42, 0.95)) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.5) !important;
  margin-top: 0.85rem;
  box-shadow: 0 0 22px rgba(168, 85, 247, 0.2);
}
.custom-request-expand-card .category-card-header {
  background: linear-gradient(135deg, rgba(88, 28, 135, 0.75), rgba(15, 23, 42, 0.9)) !important;
}
.custom-request-expand-card:hover {
  border-color: #d8b4fe !important;
  box-shadow: 0 0 28px rgba(168, 85, 247, 0.35) !important;
}
.custom-request-expand-card.active {
  border-color: #d8b4fe !important;
  box-shadow: 0 0 32px rgba(168, 85, 247, 0.4) !important;
}
.custom-request-expand-card.active .cat-chevron {
  color: #d8b4fe;
}

[data-theme="light"] .cat-icon-badge.custom-request-badge {
  background: rgba(168, 85, 247, 0.15) !important;
  border-color: rgba(168, 85, 247, 0.4) !important;
  color: #9333ea !important;
}
[data-theme="light"] .custom-request-expand-card {
  background: linear-gradient(135deg, #faf5ff, #f3e8ff) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.3) !important;
  box-shadow: 0 4px 15px rgba(168, 85, 247, 0.08) !important;
}
[data-theme="light"] .custom-request-expand-card .category-card-header {
  background: transparent !important;
}
[data-theme="light"] .custom-request-expand-card:hover {
  border-color: rgba(168, 85, 247, 0.6) !important;
  box-shadow: 0 4px 20px rgba(168, 85, 247, 0.12) !important;
}
[data-theme="light"] .custom-request-expand-card.active {
  border-color: rgba(147, 51, 234, 0.8) !important;
  background: linear-gradient(135deg, #f3e8ff, #e9d5ff) !important;
}
[data-theme="light"] .custom-request-expand-card.active .cat-chevron {
  color: #9333ea;
}

.btn-indigo {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  padding: 0.5rem 1.1rem;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
  transition: var(--tr-fast);
  white-space: nowrap;
}
.btn-indigo:hover {
  background: linear-gradient(135deg, #818cf8, #6366f1);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.35);
  transform: translateY(-2px);
}

.btn-light-purple {
  background: linear-gradient(135deg, #7e22ce, #6b21a8);
  color: #fff;
  border: 1px solid rgba(168, 85, 247, 0.5);
  box-shadow: 0 4px 15px rgba(126, 34, 206, 0.3);
}
.btn-light-purple:hover {
  background: linear-gradient(135deg, #9333ea, #7e22ce);
  box-shadow: 0 6px 20px rgba(126, 34, 206, 0.5);
  transform: translateY(-2px);
  color: #fff;
}

/* MODERNIZED ULTRA-SLEEK UNLOCK BUTTONS (GLOWING GRADIENT PILLS) */
.btn-unlock, .btn-plot-unlock {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(99, 102, 241, 0.25));
  border: 1px solid rgba(56, 189, 248, 0.45);
  border-radius: 20px;
  color: #7dd3fc;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.3rem 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.2);
  transition: var(--tr-fast);
  letter-spacing: 0.02em;
}
.btn-unlock:hover, .btn-plot-unlock:hover {
  background: linear-gradient(135deg, #38bdf8, #6366f1);
  color: #fff;
  border-color: #fff;
  transform: scale(1.04);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.5);
}

/* SLEEK SEARCH INPUT BOX */
.search-box {
  width: 320px;
  max-width: 100%;
}
.search-box input {
  width: 100%;
  padding: 0.6rem 1rem;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  color: #fff;
  font-size: 0.85rem;
  font-family: var(--font-body);
  outline: none;
  transition: var(--tr-fast);
}
.search-box input:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.2);
}

/* EXECUTIVE DOSSIER TEASER CARDS (INTELLIGENT BRIEFING SHOWCASE - SCROLLABLE CONTAINER) */
.playbook-lead-list {
  max-height: 485px;
  overflow-y: auto;
  padding-right: 0.4rem;
}
.playbook-lead-list::-webkit-scrollbar {
  width: 6px;
}
.playbook-lead-list::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.4);
  border-radius: 4px;
}
.playbook-lead-list::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}
.playbook-lead-list::-webkit-scrollbar-thumb:hover {
  background: #38bdf8;
}

.playbook-lead-item {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-bottom: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  transition: all 0.2s ease;
}
.playbook-lead-item:hover {
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
}
.playbook-lead-item:last-child {
  margin-bottom: 0;
}
.playbook-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.playbook-badge-rank {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.playbook-badge-emerald {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
}
.playbook-badge-sky {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
}
.playbook-badge-indigo {
  background: rgba(129, 140, 248, 0.15);
  border: 1px solid rgba(129, 140, 248, 0.4);
  color: #818cf8;
}
.playbook-company-title {
  font-size: 0.96rem;
  font-weight: 800;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.playbook-strategy-box {
  background: rgba(8, 12, 20, 0.7);
  border-left: 3.5px solid #38bdf8;
  border-radius: 0 8px 8px 0;
  padding: 0.75rem 1rem;
  font-size: 0.84rem;
  line-height: 1.55;
  color: #cbd5e1;
}
.playbook-strategy-box strong {
  color: #38bdf8;
  font-weight: 700;
}
.playbook-contact-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: 0.8rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.search-box input::placeholder { color: var(--text-dim); }

/* DISTINCT PURCHASING ACTION CTA BANNER - 1 PURE SLEEK LINE */
.dynamic-calc-banner {
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.85), rgba(15, 23, 42, 0.95) 75%);
  border: 1.5px solid #10b981;
  border-radius: 14px;
  padding: 1.25rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 1.5rem;
  margin-top: 1.75rem;
  margin-bottom: 2rem;
  box-shadow: 0 0 25px rgba(16, 185, 129, 0.22);
}
@media (max-width: 960px) {
  .dynamic-calc-banner {
    flex-wrap: wrap;
    gap: 1.25rem;
  }
}
.calc-banner-label { color: #a7f3d0; }
.calc-stat-val { font-size: 1.8rem; font-weight: 800; color: var(--text-main); }
.calc-price-tag { font-size: 2.1rem; font-weight: 800; color: var(--accent-emerald); text-shadow: 0 0 10px rgba(52, 211, 153, 0.4); }
[data-theme="light"] .calc-price-tag { text-shadow: none; }

.btn-buy-emerald {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-weight: 800;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4);
}
.btn-buy-emerald:hover {
  background: linear-gradient(135deg, #059669, #047857);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.6);
}

/* ANALYTICS PLOTS GRID (2x3 GRID ON DESKTOP, HORIZONTAL SWIPE CAROUSEL ON MOBILE) */
.briefing-charts-grid-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1rem;
  align-items: stretch;
}

.mobile-carousel-nav {
  display: none !important;
}

@media (max-width: 1024px) {
  .mobile-carousel-nav {
    display: flex !important;
    align-items: center;
    gap: 0.4rem;
  }
  .briefing-charts-grid-3col {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 1.15rem;
    padding-bottom: 0.85rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  .briefing-charts-grid-3col > div {
    flex: 0 0 88%;
    min-width: 290px;
    max-width: 380px;
    scroll-snap-align: start;
  }
}

.briefing-charts-grid-3col::-webkit-scrollbar {
  height: 6px;
}
.briefing-charts-grid-3col::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.4);
  border-radius: 4px;
}
.briefing-charts-grid-3col::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}
.briefing-charts-grid-3col::-webkit-scrollbar-thumb:hover {
  background: #38bdf8;
}

.recency-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 1.15rem 1.35rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.recency-card:hover {
  border-color: rgba(56, 189, 248, 0.4);
}

.fancy-plot-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  min-height: 165px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.fancy-plot-canvas-wrapper {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 125px;
  margin-top: 0.35rem;
}



.plot-lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(8, 12, 20, 0.45);
  border-radius: 8px;
  padding: 0.75rem;
  text-align: center;
  pointer-events: auto;
  z-index: 10;
}

.plot-lock-overlay div {
  font-size: 0.78rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 0.25rem;
}

.plot-lock-overlay p {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin: 0 0 0.5rem 0;
  line-height: 1.3;
}

/* Locked PDF chart cards (renderLockedPdfCards in js/charts.js). The server
   sends counts only, so the chart is drawn with grey placeholder bars where its
   labels would be; there is no text under the blur to recover. The blur is
   decoration, not protection. */
.pdf-locked-card { cursor: pointer; }
.pdf-locked-card .fancy-plot-canvas-wrapper { min-height: 210px; }
.pdf-locked-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: blur(3px);
  opacity: 0.8;
}
.pdf-locked-badge {
  font-size: 0.68rem;
  color: #a78bfa;
  font-weight: 700;
  background: rgba(167, 139, 250, 0.12);
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  white-space: nowrap;
}

/* BIG SCROLLABLE DIRECTORY CONTAINER (MAX 10 ROWS) */
.explorer-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 1.75rem; margin-top: 3.5rem; position: relative; }
.table-scroll-wrapper { max-height: 480px; overflow-y: auto; overflow-x: auto; border-radius: 8px; border: 1px solid var(--border-subtle); position: relative; -webkit-overflow-scrolling: touch; }

/* IN-LIST TABLE CTA ROW AT THE BOTTOM OF THE SCROLLABLE LIST */
.data-table tr.table-cta-row td,
.data-table td.table-cta-td,
.table-cta-row td {
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.96), rgba(15, 23, 42, 0.98)) !important;
  border-top: 2px solid #10b981 !important;
  padding: 1.15rem 1.6rem !important;
  filter: none !important;
  opacity: 1 !important;
}
.table-cta-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
}
.table-cta-count-lbl {
  font-size: 0.72rem;
  color: #a7f3d0 !important;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.table-cta-count-val {
  font-size: 1.45rem;
  font-weight: 800;
  color: #ffffff !important;
}
.table-cta-price-lbl {
  font-size: 0.72rem;
  color: #cbd5e1 !important;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.table-cta-price-val {
  font-size: 1.65rem;
  font-weight: 800;
  color: #34d399 !important;
}

.table-scroll-wrapper::-webkit-scrollbar { width: 8px; }
.table-scroll-wrapper::-webkit-scrollbar-track { background: #0f172a; }
.table-scroll-wrapper::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
.table-scroll-wrapper::-webkit-scrollbar-thumb:hover { background: #38bdf8; }

.data-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.88rem; }
.data-table th { background: #0f172a; padding: 0.85rem 1rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; font-size: 0.72rem; border-bottom: 1px solid var(--border-subtle); position: sticky; top: 0; z-index: 10; }
.data-table td { padding: 0.95rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.03); vertical-align: middle; background: rgba(15, 23, 42, 0.4); }

.row-crisp td { filter: none; }
.row-blur-light td { filter: blur(1.5px); opacity: 0.88; }
.row-blur-medium td { filter: blur(2.8px); opacity: 0.65; }
.row-blur-heavy td { filter: blur(4.2px); opacity: 0.45; }
.row-blur-full td { filter: blur(5.5px); opacity: 0.25; user-select: none; pointer-events: none; }

.badge-category {
  font-size: 0.72rem;
  padding: 0.2rem 0.5rem;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.25);
  color: #38bdf8;
  border-radius: 4px;
  font-weight: 700;
  white-space: nowrap;
  display: inline-block;
}
.tbl-location-text, .tbl-pi-text {
  font-size: 0.85rem;
  font-weight: 600;
  color: #ffffff;
}
.tbl-domain {
  font-size: 0.76rem;
  color: var(--accent-blue);
}
.tbl-grant-code {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent-blue);
}
.tbl-email {
  font-size: 0.76rem;
  color: var(--accent-blue);
}
.tbl-pitch-text {
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.blur-inline {
  filter: blur(2.8px);
  user-select: none;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  padding: 0 0.35rem;
  color: #ffffff;
  display: inline-block;
}

.row-10-cta-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  background: rgba(8, 12, 20, 0.95);
  border: 1px solid var(--border-active);
  border-radius: 12px;
  padding: 1rem 1.5rem;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(16px);
  z-index: 15;
}

.org-name { font-weight: 700; color: #fff; font-size: 0.95rem; }
.org-location { font-size: 0.78rem; color: var(--text-dim); }
.badge-tech { font-family: var(--font-mono); font-size: 0.72rem; padding: 0.15rem 0.45rem; border-radius: 4px; background: rgba(56, 189, 248, 0.15); color: #7dd3fc; border: 1px solid rgba(56, 189, 248, 0.25); display: inline-block; margin: 0.1rem; }
.badge-funding { font-family: var(--font-heading); font-weight: 800; font-size: 0.9rem; color: var(--accent-emerald); }

/* INSTANT FLOATING SCIENTIFIC TOOLTIPS */
.has-tooltip {
  position: relative;
  cursor: pointer;
}

.has-tooltip:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 108%;
  left: 50%;
  transform: translateX(-50%);
  background: #080c14;
  color: #38bdf8;
  border: 1px solid #38bdf8;
  border-radius: 8px;
  padding: 0.55rem 0.85rem;
  font-size: 0.74rem;
  font-family: monospace;
  white-space: pre-wrap;
  width: 260px;
  z-index: 999;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  font-weight: 600;
  line-height: 1.35;
}

/* MODAL OVERLAY - STRICT DISPLAY NONE WHEN INACTIVE TO PREVENT CLICK INTERCEPTION */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(3, 5, 10, 0.85); backdrop-filter: blur(12px); z-index: 1000; display: none !important; align-items: center; justify-content: center; padding: 1.5rem; opacity: 0; pointer-events: none; transition: var(--tr-smooth); }
.modal-overlay.active { display: flex !important; opacity: 1; pointer-events: auto; }
.modal-container { background: #0f172a; border: 1px solid var(--border-subtle); border-radius: 20px; width: 100%; max-width: 900px; padding: 2.25rem; position: relative; max-height: 90vh; overflow-y: auto; }
.modal-close { position: absolute; top: 1.25rem; right: 1.25rem; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-subtle); color: var(--text-muted); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }

.checkout-cart-card, .checkout-sub-card {
  transition: all 0.2s ease;
}
.checkout-cart-card:hover, .checkout-sub-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  transform: translateY(-2px);
}

.cart-manifest-box {
  background: rgba(8, 12, 20, 0.75);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.95rem;
  font-size: 0.78rem;
  line-height: 1.5;
}
.cart-manifest-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.45rem;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #7dd3fc;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}
.cart-tag-geo {
  background: rgba(129, 140, 248, 0.12);
  border-color: rgba(129, 140, 248, 0.3);
  color: #a5b4fc;
}

footer { margin-top: 4rem; padding-top: 1.75rem; border-top: 1px solid var(--border-subtle); display: flex; justify-content: space-between; align-items: center; color: var(--text-dim); font-size: 0.82rem; }


/* ==========================================================================
   LIGHT THEME — CSS Variable & Component Overrides
   Toggle via: <html data-theme="light">
   ========================================================================== */

[data-theme="light"] {
  --bg-dark: #f1f5f9;
  --bg-card: #ffffff;
  --bg-card-hover: #f8fafc;
  --bg-glass-pill: rgba(0, 0, 0, 0.04);

  --accent-blue: #0d9488;
  --accent-indigo: #4f46e5;
  --accent-emerald: #059669;
  --accent-amber: #d97706;
  --accent-rose: #e11d48;
  --accent-purple: #7c3aed;

  --border-subtle: rgba(0, 0, 0, 0.08);
  --border-active: rgba(2, 132, 199, 0.4);

  --text-main: #0f172a;
  --text-muted: #334155;
  --text-dim: #64748b;

  --svg-stroke: #064e3b;
  --svg-mid: #0284c7;
  --svg-bot: #047857;
  --svg-grad1: #0ea5e9;
  --svg-grad2: #10b981;

  --shadow-card: 0 4px 20px -4px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] html,
[data-theme="light"] body {
  color-scheme: light;
}

[data-theme="light"] body {
  background-color: var(--bg-dark);
  color: var(--text-main);
}

[data-theme="light"] .brand-icon {
  background: transparent;
  border: none;
  box-shadow: none;
}
[data-theme="light"] #particle-canvas {
  opacity: 0.15;
  filter: brightness(0);
}

/* NAVBAR & BRAND LOGO */
[data-theme="light"] .navbar {
  background: rgba(241, 245, 249, 0.95);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .brand-title {
  color: #0f172a !important;
}

[data-theme="light"] .brand-badge {
  background: rgba(5, 150, 105, 0.1) !important;
  border-color: rgba(5, 150, 105, 0.25) !important;
  color: #059669 !important;
}

/* BUTTONS */
[data-theme="light"] .btn-glass {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: #1e293b !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .btn-glass:hover {
  background: #f8fafc !important;
  border-color: var(--accent-blue) !important;
  color: var(--accent-blue) !important;
}

[data-theme="light"] .btn-buy-emerald,
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-indigo {
  color: #ffffff !important;
}
[data-theme="light"] .btn-light-purple {
  background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
  color: #581c87 !important;
  border: 1px solid rgba(216, 180, 254, 0.6);
  box-shadow: 0 4px 15px rgba(216, 180, 254, 0.3);
}
[data-theme="light"] .btn-light-purple:hover {
  background: linear-gradient(135deg, #e9d5ff, #d8b4fe);
  box-shadow: 0 6px 20px rgba(216, 180, 254, 0.4);
  color: #4c1d95 !important;
}
[data-theme="light"] .btn-unlock,
[data-theme="light"] .btn-plot-unlock {
  color: var(--accent-blue) !important;
  border-color: rgba(2, 132, 199, 0.6) !important;
}

/* CARDS & PANELS */
[data-theme="light"] .advantage-card,
[data-theme="light"] .briefing-feature-card,
[data-theme="light"] .fancy-plot-card,
[data-theme="light"] .map-card,
[data-theme="light"] .category-expand-card {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: var(--shadow-card) !important;
  color: #0f172a !important;
}

[data-theme="light"] .category-expand-card.active {
  border-color: rgba(2, 132, 199, 0.3) !important;
  background: #ffffff !important;
}

/* OVERRIDE INLINE DARK TEXT COLORS IN LIGHT MODE */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] .advantage-title,
[data-theme="light"] .cat-name,
[data-theme="light"] [style*="color: #fff"],
[data-theme="light"] [style*="color: #ffffff"] {
  color: #0f172a !important;
}

/* SUBFILTER CHIPS & TOGGLES */
[data-theme="light"] .subfilter-chip {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .subfilter-chip:hover:not(.active) {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

[data-theme="light"] .subfilter-chip.active {
  background: #e0f2fe !important;
  border: 1.5px solid #0284c7 !important;
  color: #0369a1 !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.15) !important;
}

[data-theme="light"] .subfilter-chip.active::before {
  content: '✓';
  color: #0284c7;
  font-weight: 800;
  font-size: 0.85rem;
}

[data-theme="light"] .country-toggle-btn {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: #334155 !important;
}

[data-theme="light"] .country-toggle-btn.active {
  background: rgba(2, 132, 199, 0.1) !important;
  border-color: var(--accent-blue) !important;
  color: var(--accent-blue) !important;
}

/* DYNAMIC CALC BANNER */
[data-theme="light"] .dynamic-calc-banner {
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.08), rgba(2, 132, 199, 0.08)) !important;
  border-color: rgba(5, 150, 105, 0.25) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
}
[data-theme="light"] .calc-banner-label {
  color: #000000 !important;
}

/* Inline styles are now using CSS variables natively */

/* PLAYBOOK & TARGET ACCOUNTS */
[data-theme="light"] .playbook-lead-item {
  background: #f8fafc !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #0f172a !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] .playbook-lead-item .card-text-highlight,
[data-theme="light"] .playbook-lead-item strong {
  color: #0f172a !important;
}

[data-theme="light"] #custom-request-text {
  background: #f8fafc !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: #0f172a !important;
}

/* METRIC & STAT CARDS */
[data-theme="light"] div[style*="background: rgba(8, 12, 20"] {
  background: #f8fafc !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .stat-card {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* MODAL OVERLAY & CONTAINER */
[data-theme="light"] .modal-overlay {
  background: rgba(15, 23, 42, 0.4) !important;
}

[data-theme="light"] .modal-container {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15) !important;
  color: #0f172a !important;
}

[data-theme="light"] .modal-container input[type="password"] {
  background: #f8fafc !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: #0f172a !important;
}

/* TABLE STYLING */
[data-theme="light"] table { border-color: rgba(0, 0, 0, 0.08) !important; }
[data-theme="light"] th { background: #f1f5f9 !important; color: #1e293b !important; border-color: rgba(0, 0, 0, 0.08) !important; }
[data-theme="light"] td { border-color: rgba(0, 0, 0, 0.06) !important; color: #1e293b !important; }
[data-theme="light"] tr:hover td { background: rgba(2, 132, 199, 0.04) !important; }

[data-theme="light"] .org-name { color: #0f172a !important; }
[data-theme="light"] .tbl-location-text { color: #334155 !important; }

/* DACH MAP CONTAINER */
[data-theme="light"] #dach-map-container {
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.06));
}

[data-theme="light"] .country-label {
  fill: rgba(0, 0, 0, 0.25) !important;
}

[data-theme="light"] .dach-label {
  fill: #0f172a !important;
  filter: drop-shadow(0 1px 2px rgba(255,255,255,0.9)) !important;
}

/* THEME TOGGLE BUTTON STYLING */
.btn-theme-toggle {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
  font-weight: 800 !important;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  transition: var(--tr-fast);
}
.btn-theme-toggle:hover {
  background: #f1f5f9 !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.5) !important;
  transform: translateY(-1px);
}

[data-theme="light"] .btn-theme-toggle {
  background: #0b1120 !important;
  color: #ffffff !important;
  border: 1.5px solid #38bdf8 !important;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.25) !important;
}

[data-theme="light"] .btn-theme-toggle:hover {
  background: #0f172a !important;
  border-color: #7dd3fc !important;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.4) !important;
  transform: translateY(-1px);
}

/* FREE SAMPLE BUTTON STYLING */
.btn-free-sample {
  background: rgba(56, 189, 248, 0.12) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  color: #38bdf8 !important;
  font-weight: 700 !important;
}

[data-theme="light"] .btn-free-sample {
  background: rgba(2, 132, 199, 0.1) !important;
  border: 1px solid rgba(2, 132, 199, 0.35) !important;
  color: #0284c7 !important;
  font-weight: 700 !important;
}

/* LIGHT THEME EXHAUSTIVE CONTRAST & BACKGROUND OVERRIDES */
[data-theme="light"] select,
[data-theme="light"] option,
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="search"],
[data-theme="light"] textarea {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(0, 0, 0, 0.18) !important;
}

[data-theme="light"] .data-table td,
[data-theme="light"] .data-table tr td {
  background: #ffffff !important;
  color: #0f172a !important;
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .data-table tr:hover td {
  background: #f1f5f9 !important;
}

[data-theme="light"] .blur-inline {
  background: rgba(0, 0, 0, 0.06) !important;
  color: #475569 !important;
}

[data-theme="light"] .has-tooltip:hover::after {
  background: #ffffff !important;
  color: #0284c7 !important;
  border: 1px solid #0284c7 !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;
}

/* ACCORDION CATEGORY CARDS IN LIGHT MODE */
[data-theme="light"] .category-expand-card {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .category-card-header {
  background: #ffffff !important;
  color: #0f172a !important;
}

[data-theme="light"] .category-card-header:hover {
  background: #f8fafc !important;
}

[data-theme="light"] .cat-name {
  color: #0f172a !important;
}

[data-theme="light"] .cat-desc {
  color: #475569 !important;
}

[data-theme="light"] .cat-icon-badge {
  background: rgba(2, 132, 199, 0.08) !important;
  border-color: rgba(2, 132, 199, 0.2) !important;
  color: #0284c7 !important;
}

[data-theme="light"] .cat-chevron {
  color: #64748b !important;
}

[data-theme="light"] .category-subpanel {
  background: #f8fafc !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}


/* PROOF MATRIX, BRIEFING & DARK CONTAINERS IN LIGHT MODE */
[data-theme="light"] .blurred-intelligence-preview,
[data-theme="light"] .proof-matrix-box,
[data-theme="light"] div[style*="background: rgba(15, 23, 42"],
[data-theme="light"] div[style*="background: #0f172a"],
[data-theme="light"] div[style*="background: #1e293b"],
[data-theme="light"] div[style*="background: #080c14"],
[data-theme="light"] div[style*="background: #283248"],
[data-theme="light"] section[style*="background: #0f172a"],
[data-theme="light"] section[style*="background: #1e293b"] {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .proof-matrix-box div[style*="background: rgba(8, 12, 20"],
[data-theme="light"] .proof-matrix-box div[style*="background: #0f172a"],
[data-theme="light"] .proof-matrix-box div[style*="background: #1e293b"] {
  background: #f8fafc !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #0f172a !important;
}

[data-theme="light"] .proof-matrix-box h3,
[data-theme="light"] .proof-matrix-box div[style*="color: #ffffff"],
[data-theme="light"] .proof-matrix-box strong[style*="color: #ffffff"] {
  color: #0f172a !important;
}

[data-theme="light"] div[style*="background: #1e293b"] select,
[data-theme="light"] div[style*="background: #1e293b"] input {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}

/* EXECUTIVE ULTRA-HIGH Z-INDEX FLOATING TOOLTIP ENGINE */
.has-tooltip {
  position: relative !important;
}

.has-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 130%;
  right: 0;
  background: #0b1120;
  color: #e2e8f0;
  border: 1px solid #38bdf8;
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  font-size: 0.74rem;
  font-family: var(--font-mono);
  line-height: 1.45;
  white-space: pre-wrap;
  width: max-content;
  max-width: 290px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(56, 189, 248, 0.3);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateY(4px);
  z-index: 999999 !important;
}

.has-tooltip:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

[data-theme="light"] .has-tooltip::after {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #0284c7 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 0 15px rgba(2, 132, 199, 0.2) !important;
}

/* Ensure containers don't clip tooltips */
.fancy-plot-card,
.briefing-feature-card,
div[style*="grid-template-columns: repeat(3, 1fr)"] {
  overflow: visible;
}


/* Light Mode Aesthetics for Dynamic Calc Banner */
[data-theme="light"] .dynamic-calc-banner {
  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%) !important;
  border-color: #10b981 !important;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.1) !important;
}

[data-theme="light"] .calc-banner-label {
  color: #047857 !important; /* Dark Emerald */
}

[data-theme="light"] .dynamic-calc-banner div[style*="color: var(--text-dim)"] {
  color: #475569 !important; /* Dark Slate */
}

/* Ensure the main numbers are very clear */
[data-theme="light"] .calc-stat-val {
  color: #064e3b !important;
}
[data-theme="light"] .calc-price-tag {
  color: #059669 !important;
}

/* Transparent Map Card in Light Mode */
[data-theme="light"] .map-card {
  background: rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(2px) !important;
}

/* Light Mode Nav Link Readability */
[data-theme="light"] .nav-link {
  color: #475569 !important; /* Dark Slate Gray */
}
[data-theme="light"] .nav-link:hover {
  color: #0f172a !important; /* Almost Black on hover */
}

/* Inject more of the DDI gradient into light mode */
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-indigo {
  background: linear-gradient(135deg, #14b8a6 0%, #0ea5e9 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 15px rgba(20, 184, 166, 0.3) !important;
}

[data-theme="light"] .btn-primary:hover,
[data-theme="light"] .btn-indigo:hover {
  background: linear-gradient(135deg, #0f766e 0%, #0284c7 100%) !important;
  box-shadow: 0 6px 20px rgba(20, 184, 166, 0.4) !important;
}

/* Update any specific blue text highlights that might not use variables */
[data-theme="light"] .brand-title {
  background: linear-gradient(135deg, #0d9488, #0369a1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Fix Map Title Text Color in Light Mode */
[data-theme="light"] .map-title {
  color: #0f172a !important; /* Dark slate for readability */
}

/* Update icon colors in light mode to match teal accents */
[data-theme="light"] .cat-icon-badge {
  background: rgba(13, 148, 136, 0.1) !important;
  border-color: rgba(13, 148, 136, 0.25) !important;
  color: #0d9488 !important;
}
[data-theme="light"] .cat-icon-badge svg {
  stroke: #0d9488 !important;
  fill: none !important;
}

/* Restore purple color to custom request badge in light mode */
[data-theme="light"] .cat-icon-badge.custom-request-badge {
  background: rgba(168, 85, 247, 0.15) !important;
  border-color: rgba(168, 85, 247, 0.4) !important;
  color: #a855f7 !important;
}
[data-theme="light"] .cat-icon-badge.custom-request-badge svg {
  stroke: #9333ea !important; /* Slightly darker purple for contrast in light mode */
}

/* =========================================
   MOBILE RESPONSIVENESS
========================================= */
@media (max-width: 900px) {
  /* Navbar */
  .navbar { flex-wrap: wrap; padding: 1rem; }
  .mobile-menu-toggle { display: block !important; margin-left: auto; }
  .nav-actions { 
    display: none; 
    flex-direction: column; 
    width: 100%; 
    gap: 0.75rem; 
    margin-top: 1rem; 
    align-items: stretch;
    background: rgba(15, 23, 42, 0.95);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
  }
  .nav-actions.open { display: flex; }
  .nav-actions a, .nav-actions button { justify-content: center; width: 100%; text-align: center; }

  /* Hero Section */
  .hero { flex-direction: column; text-align: center; padding: 3rem 1rem 1rem 1rem; gap: 2.5rem; }
  .hero-content { align-items: center; max-width: 100%; }
  .hero-title { font-size: 2.2rem; }
  .hero-subtitle { font-size: 1rem; margin-left: auto; margin-right: auto; }
  .hero-action-group { justify-content: center; flex-wrap: wrap; }
  .hero-cta { justify-self: stretch; max-width: none; }

  /* Map Dashboard Layout */
  .map-dashboard-grid { grid-template-columns: 1fr !important; gap: 1.5rem; }
  .map-card { padding: 1rem; }
  
  /* Advantages Grid */
  .advantage-grid { grid-template-columns: repeat(2, 1fr); }
  
  /* Footer */
  footer { flex-direction: column; text-align: center; gap: 1.5rem; padding: 1.5rem 1rem !important; }
  
  /* Modals */
  .modal-container { padding: 1.5rem !important; margin: 1rem; width: 90%; }
  .modal-container > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  
  /* Utility Overrides */
  [data-theme="light"] .mobile-menu-toggle { color: #0f172a !important; }
}

/* Explicit rule for map region labels in ALL themes */
[data-theme="light"] .dach-label,
[data-theme="light"] .dach-map-svg text,
[data-theme="light"] text.dach-label,
.dach-label,
.dach-map-svg text,
text.dach-label {
  fill: #ffffff !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.95)) !important;
}


/* The official CPV division moved off the card face into a tooltip. It is the
   claim that separates this from keyword-matched competitors -- classification
   comes from the code on the notice -- but "CPV division 38:" as the first words
   a visitor reads is procurement-desk language, not a sector name. */
.cat-cpv-note { border-bottom: 1px dotted var(--text-dim); cursor: help; }


/* Selected sector cards.
   Selection used to be signalled only by a 1px border tint, which is invisible
   next to seven other cards -- and the same `.active` class also opened a
   subpanel, so one click did two things and neither state was legible. The
   subpanels are gone; `.active` now means "in the selection" and nothing else,
   so it gets a checkbox that reads at a glance. */
/* NO SECTOR SELECTED: body.no-sector is set by js/app.js. The data-driven
   blocks give way to a one-line prompt, and nothing can be exported. */
.no-sector-note { display: none; margin: 0; padding: 1.5rem 1rem; text-align: center; font-size: 0.9rem; color: var(--text-muted); }
.no-sector-note a { color: var(--accent-blue); }
.no-sector .no-sector-note { display: block; }
.no-sector #analytics-carousel-wrapper,
.no-sector .no-sector-note ~ * { display: none !important; }
.no-sector .btn.floating-export { visibility: hidden; transform: translate(100%, -50%); }
.btn-buy-emerald:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none !important; transform: none; }

/* Select / unselect all sectors: a quiet row above the cards. Right padding
   matches .category-card-header (1.4rem) plus the card border, so the circle
   sits in the same column as the cards' check circles. */
.sector-select-all-row { display: flex; justify-content: flex-end; margin: 0 0 0.5rem 0; padding-right: calc(1.4rem + 1px); }
.sector-select-all {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: none; border: none; padding: 0.2rem 0; cursor: pointer;
  font: inherit; font-size: 0.78rem; color: var(--text-dim);
}
.sector-select-all:hover { color: var(--text-muted); }
.sector-select-all:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: 4px; }
.sector-select-all-check {
  width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%;
  border: 1.5px solid rgba(148, 163, 184, 0.32);
  display: flex; align-items: center; justify-content: center;
  color: transparent; transition: var(--tr-fast);
}
.sector-select-all-check svg { width: 11px; height: 11px; }
.sector-select-all:hover .sector-select-all-check { border-color: rgba(56, 189, 248, 0.7); }
.sector-select-all.is-all .sector-select-all-check { background: var(--accent-blue); border-color: var(--accent-blue); color: #05192b; }
[data-theme="light"] .sector-select-all.is-all .sector-select-all-check { color: #fff; }

.category-expand-card .cat-check {
  width: 20px; height: 20px; min-width: 20px; flex-shrink: 0;
  border: 1.5px solid rgba(148, 163, 184, 0.32); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: transparent; background: transparent;
  transition: var(--tr-fast);
}
.category-expand-card .cat-check svg { width: 11px; height: 11px; stroke-width: 3; }
.category-card-header:hover .cat-check { border-color: rgba(56, 189, 248, 0.7); }
.category-expand-card.active .cat-check {
  background: var(--accent-blue); border-color: var(--accent-blue); color: #05192b;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.16);
}
.category-expand-card.active {
  background: rgba(56, 189, 248, 0.06);
  border-color: var(--accent-blue);
  box-shadow: 0 0 25px rgba(56, 189, 248, 0.12);
}
.category-expand-card.active .category-card-header { background: rgba(56, 189, 248, 0.055); }
.category-expand-card.active .cat-name { color: #bae6fd; }
.category-expand-card.active .cat-icon-badge {
  background: rgba(56, 189, 248, 0.22); border-color: rgba(56, 189, 248, 0.5);
}
[data-theme="light"] .category-expand-card.active { background: rgba(2, 132, 199, 0.07); }
[data-theme="light"] .category-expand-card.active .cat-name { color: #0369a1; }
[data-theme="light"] .category-expand-card.active .cat-check { color: #fff; }

/* ---------------------------------------------------------------------------
   The checkout window on a phone.
   
   It was built as two columns at a fixed 900px and simply did not fit: the
   page scrolled sideways, the panel was narrower than its own contents, and
   the close button sat on top of the heading. A buyer deciding whether to
   spend four figures was being asked to drag the page left and right to read
   the price.
   
   Four things cause that, and all four are fixed here rather than by shrinking
   the type until it fits.
--------------------------------------------------------------------------- */
@media (max-width: 820px) {
  /* A smaller gutter, and anchored to the top: a tall panel centred vertically
     puts its first line above the viewport, so the reader opens it already
     scrolled past the title. */
  .modal-overlay {
    padding: 0.5rem;
    align-items: flex-start;
  }

  .checkout-modal-container {
    /* width and margin as well as max-width. The generic .modal-container rule
       in the 900px block sets width: 90% and margin: 1rem, which on a 390px
       screen throws away ~70px to empty gutters on the one surface where every
       pixel is holding a price. Setting only max-width left both in force. */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 1.1rem 0.85rem 1.2rem !important;
    max-height: calc(100vh - 1rem) !important;
    border-radius: 14px;
  }

  /* One column. The two cards are alternatives to read in order, not a
     comparison to scan across, which is the only thing side-by-side buys. */
  .checkout-grid {
    grid-template-columns: 1fr !important;
    gap: 0.9rem !important;
  }
  /* A grid child defaults to min-width:auto, so a long sector name inside it
     refuses to shrink and pushes the whole page wider. This is the actual
     cause of the sideways scroll. */
  .checkout-grid > * {
    min-width: 0;
  }

  /* Keep the heading out from under the close button. The title is centred and
     full width, so at this size it ran straight beneath it. */
  .checkout-modal-header {
    padding-right: 2.5rem;
    text-align: left !important;
  }

  /* Manifest rows: a no-wrap label on the left and a wrapping list of tags
     pushed right needs horizontal room that does not exist here. Stacked, each
     row reads as a label with its values underneath. */
  .cart-manifest-box > div {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.25rem !important;
  }
  .cart-manifest-box > div > div {
    justify-content: flex-start !important;
    max-height: none !important;
    width: 100%;
  }

  /* Long values -- a sector name, an address -- break rather than overflow. */
  .checkout-modal-container {
    overflow-wrap: anywhere;
  }
}

/* The checkout window should not scroll on a laptop.
   It was 875px of content in a 790px panel at 1440x900, so a buyer had to
   scroll to reach the button they were being asked to press. Tightened here
   rather than in the markup so the phone layout above is unaffected. */
@media (min-width: 821px) {
  .checkout-modal-container { max-height: 95vh !important; padding: 1rem 1.3rem 1.1rem !important; }
  .checkout-grid { gap: 0.9rem !important; }
  .checkout-modal-container h2 { font-size: 1.3rem !important; margin-bottom: 0.15rem !important; }
  .checkout-modal-header { margin-bottom: 0.7rem !important; }
  .cart-manifest-box { padding: 0.6rem 0.8rem !important; margin-bottom: 0.7rem !important; }
  .checkout-grid ul { line-height: 1.45 !important; }
}

/* Short laptops (1280x800 and the like). Same window, 50px less room: tighten
   the type and the row spacing rather than letting the button fall below the
   fold on the one screen size that is still extremely common. */
@media (min-width: 821px) and (max-height: 860px) {
  .checkout-modal-container { max-height: 97vh !important; padding: 0.8rem 1.1rem 0.9rem !important; }
  .checkout-modal-header { margin-bottom: 0.5rem !important; }
  .checkout-grid ul { font-size: 0.73rem !important; }
  .checkout-grid li { margin-bottom: 0.15rem !important; }
  .cart-manifest-box { font-size: 0.74rem !important; padding: 0.5rem 0.75rem !important; }
}

/* ---------------------------------------------------------------------------
   The commitment selector, and the subscribe button.
--------------------------------------------------------------------------- */
.sub-term-btn {
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0.3rem;
  border-radius: 7px;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-muted);
}
.sub-term-btn.is-selected {
  border-color: rgba(99, 102, 241, 0.9);
  background: rgba(99, 102, 241, 0.18);
  color: #fff;
}
/* The selected term used to be hardcoded white, which on the light theme is
   white on a pale lilac wash -- the buyer could not read which term they had
   picked, on the control that changes the price. */
[data-theme="light"] .sub-term-btn { color: #475569; }
[data-theme="light"] .sub-term-btn.is-selected {
  background: rgba(99, 102, 241, 0.14);
  border-color: rgba(79, 70, 229, 0.85);
  color: #312e81;
}

/* The label is now "Subscribe — €6,217 today, then €622/mo", which does not fit
   one line in a 300px column. Wrapping beats truncating a price. */
#sub-cta {
  white-space: normal !important;
  line-height: 1.3;
  font-size: 0.8rem !important;
  text-align: center;
  padding: 0.65rem 0.8rem !important;
}

/* Phone: the badge row carried a wide pill and a status label on one line and
   they overlapped. It wraps now, and the pill no longer tries to hold its
   width against it. */
@media (max-width: 820px) {
  .cart-badge-row { row-gap: 0.35rem; }
  .cart-tag-pill { white-space: normal; line-height: 1.35; }
  .sub-term-btn { font-size: 0.68rem; padding: 0.4rem 0.2rem; }
  #sub-cta { font-size: 0.78rem !important; }
}

/* ---------------------------------------------------------------------------
   The checkout window on the light theme.

   The modal was built dark-first and the light theme only ever restyled its
   outer container, so inside it the manifest box kept a near-black background
   with muted grey labels on it, and both bullet lists kept near-white text --
   on white. A buyer on the light theme could not read what they were buying.
--------------------------------------------------------------------------- */
[data-theme="light"] .cart-manifest-box {
  background: #f1f5f9 !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #334155 !important;
}
[data-theme="light"] .cart-manifest-box span,
[data-theme="light"] .cart-manifest-box div {
  color: #475569 !important;
}
/* The values stay emphatic: they are the numbers being decided on. */
[data-theme="light"] .cart-manifest-box .cart-manifest-tag {
  background: rgba(14, 116, 144, 0.1) !important;
  border-color: rgba(14, 116, 144, 0.35) !important;
  color: #0e7490 !important;
}
[data-theme="light"] #cart-recency-horizon,
[data-theme="light"] #cart-leads-count {
  color: #047857 !important;
}
[data-theme="light"] .checkout-grid ul li,
[data-theme="light"] .checkout-grid ul li span {
  color: #334155 !important;
}
[data-theme="light"] .checkout-grid ul li strong {
  color: #0f172a !important;
}
[data-theme="light"] #sub-today {
  color: #0f172a !important;
  border-top-color: rgba(0, 0, 0, 0.1) !important;
}

/* ---------------------------------------------------------------------------
   Mobile, light theme: the open navigation menu.

   .nav-actions becomes a dropdown panel below 900px with a hardcoded dark
   background, and the light theme never overrode it. The links inside take
   their colour from the theme, so on light they were dark text on a dark
   panel -- the whole menu was effectively invisible.
--------------------------------------------------------------------------- */
@media (max-width: 900px) {
  [data-theme="light"] .nav-actions {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  }
  /* Not the theme toggle: it is deliberately inverted (a dark pill with a white
     label) so it reads as the switch rather than as another nav item. Forcing
     dark text on it put dark on dark and hid the word. */
  [data-theme="light"] .nav-actions > a,
  [data-theme="light"] .nav-actions > button:not(.btn-theme-toggle) {
    color: #0f172a !important;
  }
}

/* ---------------------------------------------------------------------------
   The floating export tab on a phone.

   It is a fixed side tab anchored to the right edge at mid-height, which works
   on a wide screen and on a phone sits on top of whatever is being read -- in
   the directory it covered the table it was offering to export, half off the
   screen. Moved to the bottom corner, out of the reading column.
--------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .btn.floating-export {
    top: auto;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    right: 0.75rem;
    flex-direction: row;
    gap: 0.4rem;
    border-radius: 999px;
    border-right: 1px solid currentColor;
    padding: 0.6rem 0.95rem;
    transform: translate(0, 200%);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  }
  .btn.floating-export.is-visible { transform: translate(0, 0); }
  .btn.floating-export svg { width: 16px; height: 16px; }
}