/* Devices page specific styles */
.page-hero { padding: var(--space-14) 0 var(--space-10); background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 6%, transparent), transparent); }
.hero-inner { grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: var(--space-8); }
.hero-content p { color: var(--color-muted); }
.hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }
.hero-media img { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }

.section { padding: var(--space-12) 0; }
.cards-grid { gap: var(--space-4); }
.context-image { margin-top: var(--space-6); }
.context-image img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }

.table-responsive { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.table-responsive table { min-width: 680px; background: var(--color-surface); }

/* Comparison highlight */
.compare-controls { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
#comparison-table th[data-col], #comparison-table td[data-col] { transition: background-color var(--duration-normal) var(--easing-standard); }
#comparison-table.highlight-smartphones td[data-col="smartphones"],
#comparison-table.highlight-smartphones th[data-col="smartphones"],
#comparison-table.highlight-tablets td[data-col="tablets"],
#comparison-table.highlight-tablets th[data-col="tablets"],
#comparison-table.highlight-laptops td[data-col="laptops"],
#comparison-table.highlight-laptops th[data-col="laptops"],
#comparison-table.highlight-desktops td[data-col="desktops"],
#comparison-table.highlight-desktops th[data-col="desktops"] {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}

/* Details (setup) */
details { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); background: var(--color-surface); margin-top: var(--space-3); }
details > summary { cursor: pointer; font-weight: 700; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] { box-shadow: var(--shadow-sm); }

.setup-controls { display: flex; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-4) 0; }

/* CTA at bottom */
.cta { margin-top: var(--space-8); }

@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-media { order: -1; }
}