/* ═══════════════════════════════════════════════════════════════════════════════
   SaaS AI Citation Index — DataDab-Inspired Report Styles
   Design system aligned with datadab.com:warm editorial, serif display, bronze accents
   ═══════════════════════════════════════════════════════════════════════════════ */

:root {
  /* Control Room tokens (legacy names preserved so report rules need no edits) */
  
  
  
  
  
  
  
  
  
  

  /* Functional aliases */
  --blue:var(--color-bronze);
  --green:var(--color-sage);
  --yellow:var(--color-bronze);
  --red:var(--color-rust);
  --gray-50: #0C0E10;
  --gray-100: #101317;
  --gray-200: #22262B;
  --gray-400: #7d848c;
  --gray-600: #9aa1a9;
  --gray-800: #E8EAED;
  --white:#101317;

  /* Typography */
  
  
  
  --font-mono:'JetBrains Mono',monospace;

  --space-xs:0.5rem; --space-sm:1rem; --space-md:2rem;
  --space-lg:4rem; --space-xl:6rem; --space-2xl:8rem;
  --transition-smooth:cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce:cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  font-family:var(--font-body);
  background:#101317;
  color:var(--cr-text);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Subtle noise texture overlay — matches DataDab */
body::before {
  content:'';
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  opacity:0.03;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='4' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  z-index:9999;
}

.container { max-width:1200px; margin:0 auto; padding:0 3rem; }

/* ─── Header ─── */
.header {
  background:linear-gradient(145deg, #16191d 0%, #16191d 100%);
  color:var(--cr-text);
  padding:6rem 0 5rem;
  position:relative;
  overflow:hidden;
}
.header::before {
  content:'';
  position:absolute;
  top:-50%; right:-20%;
  width:80%; height:150%;
  background:radial-gradient(circle, rgba(255,176,0,0.1) 0%, transparent 70%);
  animation:headerFloat 20s ease-in-out infinite;
}
@keyframes headerFloat {
  0%, 100% { transform:translate(0, 0) rotate(0deg); }
  33% { transform:translate(30px, -30px) rotate(2deg); }
  66% { transform:translate(-20px, 20px) rotate(-2deg); }
}
.header::after {
  content:'';
  position:absolute;
  bottom:0; left:0;
  width:100%; height:1px;
  background:linear-gradient(to right, transparent, rgba(255,176,0,0.3), transparent);
}

.pre-head {
  font-size:0.8rem;
  font-weight:600;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--color-sage);
  margin-bottom:1.5rem;
  
  position:relative;
  z-index:1;
}

.header h1 {
  font-family:var(--font-display);
  font-size:3.5rem;
  font-weight:500;
  line-height:1.1;
  margin-bottom:1rem;
  letter-spacing:-0.02em;
  position:relative;
  z-index:1;
}

.header .subtitle {
  font-family:var(--font-accent);
  font-size:1.35rem;
  font-weight:400;
  line-height:1.4;
  margin-bottom:0.5rem;
  
  position:relative;
  z-index:1;
}

.subtitle-detail {
  font-size:1rem;
  
  max-width:800px;
  line-height:1.8;
  margin-bottom:2rem;
  position:relative;
  z-index:1;
}

.header .meta {
  display:flex;
  gap:16px;
  font-size:0.85rem;
  flex-wrap:wrap;
  align-items:center;
  position:relative;
  z-index:1;
}

.badge {
  display:inline-block;
  padding:6px 16px;
  border-radius:2px;
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.05em;
}
.badge-blue { background:rgba(255,176,0,0.15); color:#D4B483; }
.badge-green { background:rgba(63,224,127,0.2); color:#A8C5B0; }
.badge-placeholder { background:rgba(255,255,255,0.08); color:rgba(232,234,237,0.65); }

/* ─── Navigation ─── */
.nav {
  background:rgba(253,251,247,0.95);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--cr-border);
  position:sticky;
  top:0;
  z-index:100;
  padding:0;
}
.nav-inner {
  display:flex;
  gap:0;
  overflow-x:auto;
  -ms-overflow-style:none;
  scrollbar-width:none;
}
.nav-inner::-webkit-scrollbar { display:none; }
.nav a {
  padding:1.1rem 1.25rem;
  font-size:0.88rem;
  font-weight:500;
  color:var(--cr-text);
  text-decoration:none;
  border-bottom:2px solid transparent;
  white-space:nowrap;
  transition:all 0.3s var(--transition-smooth);
  
}
.nav a:hover {
  opacity:1;
  color:var(--color-bronze);
  border-bottom-color:var(--color-bronze);
}
.nav a.active {
  opacity:1;
  color:var(--cr-text);
  border-bottom-color:var(--color-bronze);
  font-weight:600;
}

/* ─── Sections ─── */
.section {
  padding:5rem 0;
  border-bottom:1px solid var(--cr-border);
}
.section:last-of-type { border-bottom:none; }

.section-title {
  font-family:var(--font-display);
  font-size:2.75rem;
  font-weight:500;
  line-height:1.2;
  color:var(--cr-text);
  margin-bottom:1rem;
  letter-spacing:-0.01em;
}

.section-desc {
  font-size:1.05rem;
  color:var(--cr-text);
  
  margin-bottom:2.5rem;
  max-width:700px;
  line-height:1.8;
}

/* ─── Cards ─── */
.card {
  background:var(--#101317);
  border-radius:4px;
  border:1px solid var(--cr-border);
  padding:2rem;
  margin-bottom:1.5rem;
  transition:all 0.4s var(--transition-smooth);
  position:relative;
  overflow:hidden;
}
.card::before {
  content:'';
  position:absolute;
  top:0; left:0;
  width:4px; height:0;
  background:var(--color-bronze);
  transition:height 0.4s var(--transition-smooth);
}
.card:hover {
  box-shadow:0 12px 40px rgba(0,0,0,0.06);
  transform:translateY(-2px);
}
.card:hover::before { height:100%; }

.card-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:1rem;
  flex-wrap:wrap;
  gap:12px;
}
.card-title {
  font-family:var(--font-accent);
  font-size:1.2rem;
  font-weight:500;
  color:var(--cr-text);
}

/* ─── Stat Boxes ─── */
.stats-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
  gap:1.5rem;
  margin-bottom:2.5rem;
}
.stat-box {
  background:var(--#101317);
  border-radius:4px;
  border:1px solid var(--cr-border);
  padding:1.5rem;
  text-align:center;
  transition:all 0.3s var(--transition-smooth);
}
.stat-box:hover {
  box-shadow:0 8px 24px rgba(0,0,0,0.06);
  transform:translateY(-3px);
}
.stat-value {
  font-family:var(--font-display);
  font-size:2.5rem;
  font-weight:600;
  color:var(--color-bronze);
  line-height:1;
  margin-bottom:0.5rem;
}
.stat-label {
  font-size:0.82rem;
  color:var(--cr-text);
  
  line-height:1.4;
}

/* ─── Tables ─── */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:0.88rem; table-layout:auto; }
th {
  background:#101317;
  padding:12px 16px;
  text-align:left;
  font-weight:600;
  font-size:0.8rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--cr-text);
  
  border-bottom:2px solid var(--cr-border);
}
td {
  padding:10px 16px;
  border-bottom:1px solid var(--cr-border);
  color:var(--cr-text);
  word-wrap:break-word;
  overflow-wrap:anywhere;
  vertical-align:top;
}
tr:hover { background:rgba(255,176,0,.05); }
.rank-cell { font-weight:700; color:var(--color-bronze); width:50px; }
.grade-cell { font-weight:700; min-width:40px; text-align:center; }

/* Grade colors — DataDab palette */
.grade-A\+ { color:var(--cr-text); }
.grade-A { color:var(--cr-text); }
.grade-B\+ { color:var(--cr-text); }
.grade-B { color:#4A6FA5; }
.grade-C\+ { color:var(--color-bronze); }
.grade-C { color:var(--color-rust); }
.grade-D { color:#C0392B; }

/* Score bar */
.score-bar {
  height:6px;
  background:#101317;
  border-radius:2px;
  overflow:hidden;
  width:80px;
  display:inline-block;
  vertical-align:middle;
}
.score-bar-fill { height:100%; border-radius:2px; transition:width 0.5s ease; }
.score-bar-fill.high { background:#16191d; }
.score-bar-fill.mid { background:var(--color-bronze); }
.score-bar-fill.low { background:var(--color-rust); }

/* ─── Chart Container ─── */
.chart-container {
  background:var(--#101317);
  border-radius:4px;
  border:1px solid var(--cr-border);
  padding:2rem;
  margin-bottom:1rem;
  position:relative;
}
.chart-container canvas { width:100% !important; }

/* ─── Notice Banner ─── */
.notice {
  background:#101317;
  border:none;
  border-left:4px solid var(--color-bronze);
  border-radius:0 4px 4px 0;
  padding:1rem 1.5rem;
  margin-bottom:2rem;
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.notice-icon { font-size:1.2rem; flex-shrink:0; }
.notice p { font-size:0.9rem; color:var(--cr-text);  }
.notice strong { color:var(--cr-text); }

/* ─── Findings Grid ─── */
.findings-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(340px, 1fr));
  gap:1.5rem;
  margin-bottom:2rem;
}
.finding-card { position:relative; }
.finding-number {
  font-family:var(--font-display);
  font-size:3.5rem;
  font-weight:600;
  color:rgba(232,234,237,0.65);
  line-height:1;
  margin-bottom:0.5rem;
}
.finding-card h3 {
  font-family:var(--font-accent);
  font-size:1.3rem;
  font-weight:500;
  margin-bottom:0.75rem;
  line-height:1.35;
  color:var(--cr-text);
}
.finding-card p {
  color:var(--cr-text);
  
  line-height:1.75;
  font-size:0.92rem;
}
.finding-implication {
  margin-top:1rem;
  padding:1rem 1.25rem;
  background:#101317;
  border-left:3px solid var(--color-bronze);
  border-radius:0 4px 4px 0;
  font-size:0.88rem !important;
  color:var(--cr-text) !important;
  !important;
}

/* ─── Finding Stats ─── */
.finding-stat {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px;
  margin:1rem 0;
  padding:1rem 1.25rem;
  background:#101317;
  border-radius:4px;
}
.finding-stat-label {
  font-size:0.75rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--gray-400);
}
.finding-stat-value {
  font-family:var(--font-display);
  font-size:1.75rem;
  font-weight:600;
  color:var(--color-bronze);
  margin-left:6px;
}

/* ─── Clean Table (Methodology) ─── */
.clean-table { width:100%; border-collapse:collapse; }
.clean-table td {
  padding:12px 16px;
  border-bottom:1px solid var(--cr-border);
  font-size:0.9rem;
  line-height:1.7;
}
.clean-table tr:last-child td { border-bottom:none; }
.clean-table td:first-child { word-break:break-word; color:var(--cr-text);  }

/* ─── Methodology Grid ─── */
.methodology-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:1.5rem;
}
.method-card {
  background:var(--#101317);
  border-radius:4px;
  border:1px solid var(--cr-border);
  padding:1.5rem;
  transition:all 0.3s var(--transition-smooth);
}
.method-card:hover {
  box-shadow:0 8px 24px rgba(0,0,0,0.06);
  transform:translateY(-2px);
}
.method-card h4 {
  font-family:var(--font-accent);
  font-size:1.15rem;
  font-weight:500;
  margin-bottom:0.5rem;
  color:var(--cr-text);
}
.method-card .weight {
  font-size:0.78rem;
  color:var(--color-bronze);
  font-weight:600;
  letter-spacing:0.05em;
  text-transform:uppercase;
  margin-bottom:0.75rem;
}
.method-card p { font-size:0.9rem;  line-height:1.7; }

/* ─── Footer ─── */
.footer {
  background:#16191d;
  color:var(--cr-text);
  padding:4rem 0 2rem;
  margin-top:3rem;
  position:relative;
}
.footer::before {
  content:'';
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23FDFBF7' fill-opacity='0.015'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.footer a {
  color:#D4B483;
  text-decoration:none;
  transition:all 0.3s var(--transition-smooth);
}
.footer a:hover { color:var(--color-bronze); padding-left:4px; }
.footer-grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:3rem;
  position:relative;
}
.footer h3 {
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:500;
  margin-bottom:1rem;
}
.footer h4 {
  font-size:0.8rem;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--color-bronze);
  margin-bottom:1rem;
}
.footer p {  font-size:0.9rem; line-height:1.7; }

/* ─── Responsive ─── */
@media (max-width:1024px) {
  .container { padding:0 2rem; }
  .header h1 { font-size:2.75rem; }
  .section-title { font-size:2.25rem; }
  .findings-grid { grid-template-columns:1fr 1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width:768px) {
  .container { padding:0 1.5rem; }
  .header { padding:4rem 0 3rem; }
  .header h1 { font-size:2.25rem; }
  .stats-grid { grid-template-columns:repeat(2, 1fr); }
  .findings-grid { grid-template-columns:1fr; }
  .finding-stat { flex-direction:column; gap:8px; }
  .finding-stat-label { margin-left:0 !important; }
  .methodology-grid { grid-template-columns:1fr; }
  .nav a { padding:0.9rem 1rem; font-size:0.82rem; }
  .section { padding:3rem 0; }
  .section-title { font-size:1.85rem; }
  .footer-grid { grid-template-columns:1fr; }
}

@media (max-width:480px) {
  .header h1 { font-size:1.85rem; }
  .stat-value { font-size:2rem; }
  .section-title { font-size:1.5rem; }
}

/* ─── Loading & Utility ─── */
.loading { text-align:center; padding:3rem; color:var(--gray-400); }
.loading-spinner {
  display:inline-block;
  width:32px; height:32px;
  border:3px solid #101317;
  border-top-color:var(--color-bronze);
  border-radius:50%;
  animation:spin 0.8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ─── Fade-in Animation ─── */
.fade-in {
  opacity:0;
  transform:translateY(20px);
  transition:all 0.6s var(--transition-smooth);
}
.fade-in.visible { opacity:1; transform:translateY(0); }

/* ─── Select Dropdowns ─── */
select {
  padding:8px 14px;
  border:1px solid var(--cr-border);
  border-radius:4px;
  font-family:var(--font-body);
  font-size:0.85rem;
  background:var(--#101317);
  color:var(--cr-text);
  cursor:pointer;
  transition:border-color 0.2s;
}
select:hover { border-color:var(--color-bronze); }
select:focus { outline:none; border-color:var(--color-bronze); }

/* ─── Ordered Lists (Methodology) ─── */
ol { line-height:2.2; }
ol li { color:var(--cr-text);  }
ol strong { opacity:1; color:var(--cr-text); }

/* ─── Code ─── */
code {
  font-family:var(--font-mono);
  font-size:0.85em;
  background:#101317;
  padding:2px 6px;
  border-radius:2px;
  color:var(--color-rust);
}

/* ─── Links ─── */
a { color:var(--color-bronze); text-decoration:none; transition:all 0.2s; }
a:hover { color:var(--color-rust); }
/* ═══ Vendor deep-dive cards ("Deep dives" sections) — Control Room ═══ */
.vendor {
  background:var(--cr-surface, #101317);
  border:1px solid #22262B;
  border-top:2px solid #16191d;
  padding:2rem 2.25rem 2.25rem;
  margin:1.75rem 0 2rem;
  position:relative;
}
.vendor::after {
  content:attr(id);
  position:absolute; top:.8rem; right:1rem;
  font-family:'JetBrains Mono', monospace;
  font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  color:#7d848c;
}
.vendor h3 {
  font-family:'Space Grotesk', sans-serif;
  font-size:1.55rem; font-weight:700; letter-spacing:-.02em;
  color:#E8EAED; margin:0 0 1rem;
}
.vendor .tag {
  display:inline-block;
  font-family:'JetBrains Mono', monospace;
  font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  color:#9aa1a9; background:transparent;
  border:1px solid #22262B; border-radius:0;
  padding:.35rem .7rem; margin:0 .4rem .5rem 0;
}
.vendor h4 {
  font-family:'JetBrains Mono', monospace;
  font-size:.72rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:#FFB000;
  margin:2rem 0 .75rem; padding-top:1.25rem;
  border-top:1px solid #22262B;
}
.vendor h4:first-of-type { border-top:none; padding-top:0; margin-top:1.5rem; }
.vendor p { color:#b9b7af; }
.vendor strong { color:#E8EAED; }
.vendor ul { list-style:none; padding:0; margin:0 0 1rem; }
.vendor ul li {
  position:relative; padding-left:1.3rem; margin-bottom:.5rem;
  color:#b9b7af; line-height:1.65;
}
.vendor ul li::before { content:'\25B8'; position:absolute; left:0; top:.15em; color:#FFB000; font-size:.72rem; }

/* Hero content guardrail — some report pages define .hero without a width cap */
.hero-content, .hero-inner { max-width:1200px; margin-left:auto; margin-right:auto; }

/* ─── Hero metrics strip guardrail ───
   Some report pages carry hand-rolled inline hero CSS that partially fails to
   parse; these !important rules guarantee the metrics strip renders correctly. */
.hero-metrics{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:1px!important;background:#22262B!important;border:1px solid #22262B!important;border-radius:6px!important;overflow:hidden;max-width:640px;margin:2rem auto 0}
.hero-metric{background:#101317!important;padding:1.1rem 1.25rem}
.hero-metric .value{display:block;font-family:'Space Grotesk',sans-serif;font-size:1.7rem;font-weight:800;letter-spacing:-.02em;color:#FFB000!important;line-height:1.1}
.hero-metric .metric-label{display:block;font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:#9aa1a9!important;margin-top:.45rem}
@media(max-width:700px){.hero-metrics{grid-template-columns:1fr!important}}


/* ─── Section heading alignment guardrail ─── */
.section-title{text-align:left !important;margin-left:0 !important;margin-right:auto !important}
.section-desc{text-align:left !important;margin-left:0 !important;margin-right:auto !important;max-width:760px}


/* ═══ Control Room panel polish (Phase 4) ═══ */
.card,.score-card,.result-block,.finding-card{
  border-top:2px solid #FFB000;
}
.finding-number{color:#FFB000 !important}
.topbar-logo img{filter:brightness(0) invert(1)}
@media(max-width:700px){
  .card,.score-card,.result-block{padding:1.25rem}
}