/* Card surfaces, screenshot frames, and the edition chart. Layout and type stay in style.css. */

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3.5rem;
  z-index: 300;
  background: var(--accent-cyan);
  color: #070913;
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  top: 0.75rem;
}

.product-kicker {
  color: var(--accent-cyan);
  font-size: 1.05rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

.disclaimer {
  margin-top: 1rem;
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

.hash-block {
  margin-top: 1.25rem;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--border-subtle);
}

.hash-label {
  display: block;
  color: var(--text-muted);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.hash-value {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--accent-cyan);
  word-break: break-all;
}

.back-studio-link,
.mobile-back-studio-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
}

.back-studio-link:hover,
.mobile-back-studio-link:hover {
  color: #ffffff;
}

.mobile-back-studio-link {
  margin-bottom: 1rem;
}

.comparison-table-wrap {
  border-radius: var(--radius-lg);
}

.comparison-table {
  font-size: 0.92rem;
  background: transparent;
}

.comparison-table thead th {
  vertical-align: bottom;
  padding-top: 1.15rem;
  padding-bottom: 1rem;
}

.comparison-table .cmp-corner {
  width: 30%;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.comparison-table .cmp-col-kicker {
  display: block;
  margin-bottom: 0.2rem;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
}

.comparison-table thead th,
.comparison-table tbody th,
.comparison-table td {
  background: transparent;
}

.comparison-table thead .cmp-col-browser {
  width: 35%;
  color: var(--accent-cyan);
}

.comparison-table thead .cmp-col-windows {
  width: 35%;
  color: var(--accent-amber);
}

.comparison-table tbody th {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.35;
}

.comparison-table td {
  vertical-align: top;
  line-height: 1.5;
}

.comparison-table tr:hover th,
.comparison-table tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}

.comparison-table tr:last-child th,
.comparison-table tr:last-child td {
  border-bottom: none;
}

.cmp-state {
  display: block;
  font-weight: 600;
  color: #ffffff;
}

.cmp-state.is-yes {
  color: #6ee7b7;
}

.cmp-state.is-conditional {
  color: var(--accent-cyan);
}

.cmp-detail,
.cmp-feature-note {
  display: block;
  margin-top: 0.28rem;
  color: var(--text-secondary);
  font-size: 0.84rem;
  font-weight: 400;
  line-height: 1.5;
}

.cmp-feature-note {
  color: var(--text-muted);
  font-size: 0.8rem;
}

@media (max-width: 768px) {
  .comparison-table-wrap {
    overflow: visible;
  }

  .comparison-table {
    min-width: 0;
    display: block;
  }

  .comparison-table thead {
    display: none;
  }

  .comparison-table tbody,
  .comparison-table tr,
  .comparison-table tbody th,
  .comparison-table td {
    display: block;
    width: auto;
  }

  .comparison-table tr {
    padding: 1rem 1.1rem 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .comparison-table tbody th,
  .comparison-table td {
    padding: 0.35rem 0;
    border-bottom: none;
  }

  .comparison-table tbody th,
  .comparison-table td.cmp-browser,
  .comparison-table td.cmp-windows {
    background: transparent;
  }

  .comparison-table td::before {
    content: attr(data-edition);
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .comparison-table td.cmp-browser::before {
    color: var(--accent-cyan);
  }

  .comparison-table td.cmp-windows::before {
    color: var(--accent-amber);
  }
}

@media (max-width: 768px) {
  .back-studio-link.desktop-only {
    display: none !important;
  }

  .hash-value {
    font-size: 0.72rem;
  }
}

/* Body cards share one fill. The diagonal is quieter than the install card,
   and the cyan edge glow stays on these panels only. */
.mode-card,
.pillar-card,
.faq-item,
.glass-card,
.comparison-table-wrap,
.flagship-spotlight-banner,
.x-contact-card,
.catalogue-card,
.dispatch-card,
.story-card,
.roadmap-step,
.download-hub-card,
.download-specs-box,
.kofi-appreciation-strip {
  background:
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.06), transparent 62%),
    linear-gradient(135deg, rgba(13, 18, 33, 0.84) 0%, rgba(11, 15, 26, 0.90) 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(56, 189, 248, 0.25);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 30px rgba(56, 189, 248, 0.12);
}

.flagship-spotlight-banner::before,
.download-hub-card::before {
  content: none;
}

.download-specs-box {
  box-shadow: none;
}

/* Screenshot frames keep the hairline and edge glow. No fill over the picture. */
.hero-visual-card,
.split-visual-wrap,
.cockpit-preview-container {
  background: transparent;
  border: 1px solid rgba(56, 189, 248, 0.25);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 30px rgba(56, 189, 248, 0.12);
}

/* Buttons keep their own fill. No colored halo. */
.btn-primary:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.btn-download-primary,
.btn-download-primary:hover,
.btn-x-dm,
.btn-x-dm:hover,
.btn-kofi-strip,
.btn-kofi-strip:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.lightbox-nav-btn,
.lightbox-nav-btn:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65);
}

.lightbox-nav-btn:hover svg {
  filter: none;
}

.split-visual-wrap.lightbox-trigger:hover .lightbox-hint-badge,
.cockpit-preview-container.lightbox-trigger:hover .lightbox-hint-badge,
.split-visual-wrap.lightbox-trigger:focus-visible .lightbox-hint-badge,
.cockpit-preview-container.lightbox-trigger:focus-visible .lightbox-hint-badge {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

.mode-card:hover,
.mode-card.save-active:hover,
.pillar-card:hover,
.faq-item:hover,
.glass-card:hover,
.catalogue-card:hover,
.dispatch-card:hover,
.roadmap-step:hover,
.x-contact-card:hover {
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 42px rgba(56, 189, 248, 0.22);
}