/* Detail page component styles — tokens are in shared-header.css */

/* ── Hero ─────────────────────────────────────────────────────── */
.hero-section{padding:clamp(100px,12vw,140px) 0 clamp(48px,6vw,80px)}
.hero-section h1{font-family:var(--font-display);font-size:clamp(2.4rem,5vw,3.5rem);font-weight:700;line-height:1.08;letter-spacing:-0.02em;margin-bottom:16px;text-wrap:balance}
.hero-section h1 em{font-style:normal;color:var(--cs-primary)}
.hero-sub{font-size:1.0625rem;color:var(--cs-text-secondary);max-width:560px;margin-bottom:32px;line-height:1.65}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}

/* ── Stats ────────────────────────────────────────────────────── */
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:0 0 clamp(48px,6vw,80px)}
.stat-card{background:var(--cs-bg-elevated);border:1px solid var(--cs-border-faint);border-radius:8px;padding:28px 24px;text-align:center;transition:border-color 0.2s}
.stat-card:hover{border-color:var(--cs-primary-border)}
.stat-val{font-family:var(--font-mono);font-size:clamp(1.75rem,3vw,2.25rem);font-weight:700;color:var(--cs-primary)}
.stat-label{font-size:0.8125rem;color:var(--cs-text-secondary);margin-top:6px;line-height:1.4}

/* ── Feature sections ─────────────────────────────────────────── */
.feature-section{padding:clamp(48px,6vw,80px) 0}
.feature-section+.feature-section{border-top:1px solid var(--cs-border-faint)}
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
.feature-grid.reversed{direction:rtl}
.feature-grid.reversed>*{direction:ltr}
.feature-block h2{font-family:var(--font-display);font-size:clamp(1.25rem,2.5vw,1.75rem);font-weight:600;margin-bottom:14px;letter-spacing:-0.01em;line-height:1.25;text-wrap:balance}
.feature-block p{font-size:0.9375rem;color:var(--cs-text-secondary);line-height:1.65;max-width:440px}
.feature-visual{background:var(--cs-bg-elevated);border:1px solid var(--cs-border-faint);border-radius:8px;padding:24px;min-height:240px;box-shadow:var(--cs-shadow-sm)}

/* ── Graph nodes ──────────────────────────────────────────────── */
.graph-node{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--cs-bg-base);border:1px solid var(--cs-border-faint);border-radius:6px;font-size:0.8125rem;margin-bottom:8px;transition:border-color 0.15s}
.graph-node:hover{border-color:var(--cs-border-subtle)}
.graph-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.graph-dot.safe{background:var(--cs-success)}
.graph-dot.warn{background:var(--cs-warning)}
.graph-dot.danger{background:var(--cs-danger)}
.graph-name{font-family:var(--font-mono);font-size:0.75rem}
.graph-detail{font-size:0.6875rem;color:var(--cs-text-muted);margin-left:auto}
.connector{width:1px;height:12px;background:var(--cs-border-faint);margin-left:20px}

/* ── Team cards ───────────────────────────────────────────────── */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:0 0 clamp(48px,6vw,80px)}
.team-card{background:var(--cs-bg-elevated);border:1px solid var(--cs-border-faint);border-radius:8px;padding:28px;transition:border-color 0.2s}
.team-card:hover{border-color:var(--cs-primary-border)}
.team-card h3{font-family:var(--font-display);font-size:1.25rem;font-weight:600;margin-bottom:12px}
.team-card p{font-size:0.875rem;color:var(--cs-text-secondary);margin-bottom:16px;line-height:1.55}
.team-card ul{list-style:none;padding:0}
.team-card li{font-size:0.8125rem;color:var(--cs-text-secondary);padding:4px 0 4px 16px;position:relative}
.team-card li::before{content:'\2713';position:absolute;left:0;color:var(--cs-primary);font-weight:700;font-size:0.75rem}

/* ── Data rows ────────────────────────────────────────────────── */
.data-row{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--cs-bg-base);border:1px solid var(--cs-border-faint);border-radius:6px;margin-bottom:8px;transition:border-color 0.15s}
.data-row:hover{border-color:var(--cs-border-subtle)}
.data-row-label{font-size:0.8125rem;font-weight:600}
.data-row-value{font-family:var(--font-mono);font-size:0.6875rem;color:var(--cs-text-muted)}

/* ── CTA section ──────────────────────────────────────────────── */
.cta-section{text-align:center;padding:clamp(64px,8vw,100px) 0}
.cta-section h2{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.25rem);font-weight:700;margin-bottom:12px;letter-spacing:-0.02em;text-wrap:balance}
.cta-section p{color:var(--cs-text-secondary);margin-bottom:28px;font-size:1rem}

/* ── Footer ───────────────────────────────────────────────────── */
.footer{padding:48px 0;border-top:1px solid var(--cs-border-faint);margin-top:64px;text-align:center}
.footer-inner{font-size:0.75rem;color:var(--cs-text-muted)}

/* ── Responsive ───────────────────────────────────────────────── */
@media(max-width:768px){
  .feature-grid,.feature-grid.reversed{grid-template-columns:1fr;gap:24px;direction:ltr}
  .stats-row,.team-grid{grid-template-columns:1fr}
  .hero-section{padding-top:80px}
}