/* Specifications page specific styles */
.hero { padding: var(--space-12) 0 var(--space-8); }
.hero-grid { grid-template-columns: 1fr; gap: var(--space-8); align-items: center; }
.hero-col { align-self: stretch; }
.hero-figure { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.meta { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-3); }

@media (min-width: 960px) { .hero-grid { grid-template-columns: 1.1fr 0.9fr; } }

.section-nav { position: relative; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-surface) 70%, transparent); }
.section-nav .wrap { flex-wrap: wrap; }
.section-nav a { display: inline-flex; padding: var(--space-3) var(--space-3); color: var(--color-text); }
.section-nav a:hover { background: var(--gray-50); text-decoration: none; }
@media (prefers-color-scheme: dark) { .section-nav a:hover { background: rgba(255,255,255,0.06); } }

.spec-section { padding: var(--space-12) 0; }
.spec-grid { grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 900px) { .spec-grid { grid-template-columns: 1fr 1fr; } }

.connectivity-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .connectivity-grid { grid-template-columns: 1.2fr 0.8fr; } }
.conn-figure, .acc-figure { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }

.access-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .access-grid { grid-template-columns: 1.2fr 0.8fr; } }

.spec-table thead th { background: var(--gray-100); font-weight: 700; }
.spec-table tbody tr:nth-child(even) { background: var(--gray-50); }
@media (prefers-color-scheme: dark) {
  .spec-table thead th { background: #0b1322; }
  .spec-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.04); }
}

.sys-result { margin-top: var(--space-4); font-size: var(--text-sm); }
.sys-result .kv { display: grid; grid-template-columns: 160px 1fr; gap: var(--space-2) var(--space-4); }
@media (max-width: 480px) { .sys-result .kv { grid-template-columns: 1fr; } }

.hero .card { margin-top: var(--space-4); }