/* Gear comparisons and email signups. Navy and gold, matching the site. */
:root {
  --spc-g-navy: #0b1f3a;
  --spc-g-blue: #1d4e89;
  --spc-g-gold: #ffd166;
  --spc-g-line: #d3dce8;
  --spc-g-soft: #f5f7fa;
  --spc-g-muted: #3a4a5f;
  --spc-g-radius: 14px;
  --spc-g-shadow: 0 1px 2px rgba(11, 31, 58, .06), 0 8px 24px rgba(11, 31, 58, .08);
}

.spc-gear-compare, .spc-gear-picks, .spc-gear-card, .spc-lead { color: var(--spc-g-navy); }
.spc-gear-compare *, .spc-gear-picks *, .spc-gear-card *, .spc-lead *, .spc-gear-bar * { box-sizing: border-box; }
.spc-gear-compare a:focus-visible, .spc-gear-picks a:focus-visible, .spc-gear-card a:focus-visible,
.spc-lead input:focus-visible, .spc-lead select:focus-visible, .spc-lead button:focus-visible,
.spc-gear-bar a:focus-visible, .spc-gear-table-wrap:focus-visible {
  outline: 3px solid var(--spc-g-gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--spc-g-navy);
}

/* Buttons */
.spc-gear-go, .spc-gear-current, .spc-gear-pick-link, .spc-lead .spc-btn, .spc-gear-bar .spc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 18px; border-radius: 10px;
  font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none;
  background: var(--spc-g-navy); color: #fff; border: 2px solid var(--spc-g-navy);
}
.spc-gear-go:hover, .spc-gear-pick-link:hover, .spc-lead .spc-btn:hover { background: var(--spc-g-gold); color: var(--spc-g-navy); border-color: var(--spc-g-gold); }
.spc-gear-current { background: #fff; color: var(--spc-g-navy); }
.spc-gear-current:hover { background: var(--spc-g-soft); color: var(--spc-g-navy); }

/* Disclosure */
.spc-gear-disclosure {
  background: var(--spc-g-soft); border-left: 4px solid var(--spc-g-gold);
  padding: 10px 14px; border-radius: 8px; font-size: .95rem; color: var(--spc-g-muted);
}
.spc-gear-disclosure a { color: var(--spc-g-navy); font-weight: 600; }

/* Page photo */
.spc-page-photo-wrap { margin: 1.25rem 0; }
.spc-page-photo { width: 100%; height: auto; max-height: 420px; object-fit: cover; border-radius: var(--spc-g-radius); display: block; }

/* Best-for picks */
.spc-gear-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 1rem 0 1.5rem; }
.spc-gear-pick, .spc-gear-card {
  background: #fff; border: 1px solid var(--spc-g-line); border-radius: var(--spc-g-radius);
  box-shadow: var(--spc-g-shadow); padding: 18px; display: flex; flex-direction: column; gap: 8px;
}
.spc-gear-pick h3, .spc-gear-card h3 { margin: 4px 0 0; font-size: 1.1rem; line-height: 1.3; }
.spc-gear-pick p { margin: 0 0 6px; color: var(--spc-g-muted); }
.spc-gear-pick .spc-gear-pick-link { margin-top: auto; align-self: flex-start; padding: 8px 14px; font-size: .95rem; }
.spc-gear-pick small { font-weight: 400; color: var(--spc-g-muted); }
.spc-gear-badge {
  align-self: flex-start; background: var(--spc-g-gold); color: var(--spc-g-navy);
  font-size: .8rem; font-weight: 800; letter-spacing: .02em; padding: 4px 10px; border-radius: 12px; line-height: 1.35;
}

/* Product card */
.spc-gear-img { width: 100%; height: auto; border-radius: 10px; }
.spc-gear-keys { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.spc-gear-keys span { display: inline-block; min-width: 92px; color: var(--spc-g-muted); }
.spc-gear-price { margin: 4px 0; }
.spc-gear-price strong { font-size: 1.35rem; }
.spc-gear-price small { display: block; color: var(--spc-g-muted); }
.spc-gear-alert-link { color: var(--spc-g-blue); font-weight: 600; padding: 10px 0; min-height: 44px; }

/* Comparison table */
.spc-gear-compare { margin: 1rem 0 2rem; }
.spc-gear-table-wrap {
  overflow-x: auto; border: 1px solid var(--spc-g-line);
  border-radius: var(--spc-g-radius); box-shadow: var(--spc-g-shadow); background: #fff;
}
.spc-gear-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 640px; font-size: .97rem; }
.spc-gear-table caption { caption-side: top; text-align: left; padding: 14px 16px 6px; color: var(--spc-g-muted); font-size: .9rem; }
.spc-gear-table th, .spc-gear-table td { padding: 12px 14px; border-bottom: 1px solid var(--spc-g-line); text-align: left; vertical-align: top; }
.spc-gear-table thead th {
  position: sticky; top: 0; z-index: 2; background: var(--spc-g-navy); color: #fff; font-weight: 700;
}
.spc-gear-table tbody th[scope="row"] {
  position: sticky; left: 0; z-index: 1; background: var(--spc-g-soft); font-weight: 600; min-width: 150px;
}
.spc-gear-table thead th:first-child { left: 0; z-index: 3; }
.spc-gear-table tbody tr:nth-child(even) td { background: #fbfcfe; }
.spc-gear-table tr:last-child th, .spc-gear-table tr:last-child td { border-bottom: 0; }
.spc-gear-nl, .spc-gear-na { color: var(--spc-g-muted); font-style: italic; }
.spc-gear-actions td { background: #fff; }
.spc-gear-actions td .spc-gear-go { width: 100%; font-size: .95rem; }
.spc-gear-checked { font-size: .9rem; color: var(--spc-g-muted); margin: .6rem 0 0; }

/* Phone cards (shown instead of the table under 768px) */
.spc-gear-cards { display: none; }
@media (max-width: 767.98px) {
  .spc-gear-table-wrap { display: none; }
  .spc-gear-cards {
    display: flex; gap: 12px; list-style: none; margin: 0; padding: 4px 2px 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  }
  .spc-gear-mcard {
    flex: 0 0 86%; scroll-snap-align: start; background: #fff; border: 1px solid var(--spc-g-line);
    border-radius: var(--spc-g-radius); box-shadow: var(--spc-g-shadow); padding: 16px;
  }
  .spc-gear-mcard h3 { margin: 0 0 8px; font-size: 1.1rem; }
  .spc-gear-mcard dl { display: grid; grid-template-columns: 44% 1fr; gap: 6px 10px; margin: 0 0 12px; }
  .spc-gear-mcard dt { color: var(--spc-g-muted); font-size: .9rem; }
  .spc-gear-mcard dd { margin: 0; font-weight: 600; }
  .spc-gear-mcard .spc-gear-go { width: 100%; }
}

/* Sticky bar on phones */
.spc-gear-bar { display: none; }
@media (max-width: 767.98px) {
  .spc-gear-bar {
    display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff;
    border-top: 1px solid var(--spc-g-line); box-shadow: 0 -6px 20px rgba(11, 31, 58, .12);
    transition: transform .2s ease;
  }
  .spc-gear-bar a { flex: 1; }
  .spc-gear-bar .spc-btn-ghost { background: #fff; color: var(--spc-g-navy); }
  .spc-gear-bar.is-hidden { transform: translateY(110%); }
  body:has(.spc-gear-bar) { padding-bottom: 72px; }
}
@media (prefers-reduced-motion: reduce) { .spc-gear-bar { transition: none; } }

/* Email signups */
.spc-lead {
  background: var(--spc-g-navy); color: #fff; border-radius: var(--spc-g-radius);
  padding: 22px; margin: 1.5rem 0; box-shadow: var(--spc-g-shadow);
}
.spc-lead[hidden] { display: none; }
.spc-lead .spc-lead-title { color: #fff; margin: 0 0 12px; font-size: 1.25rem; }
.spc-lead-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.spc-lead .spc-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 220px; }
.spc-lead label { color: #fff; font-weight: 600; }
.spc-lead input[type=email], .spc-lead select {
  height: 48px; padding: 8px 12px; border-radius: 10px; border: 2px solid #fff; font: inherit; color: var(--spc-g-navy); background: #fff; width: 100%;
}
.spc-lead .spc-lead-row .spc-btn { height: 48px; }
.spc-lead .spc-btn { background: var(--spc-g-gold); color: var(--spc-g-navy); border-color: var(--spc-g-gold); }
.spc-lead .spc-btn:hover { background: #fff; border-color: #fff; }
.spc-lead .spc-check { display: flex; gap: 8px; align-items: center; min-height: 44px; flex-basis: 100%; }
.spc-lead .spc-check input { width: 20px; height: 20px; }
.spc-lead-consent { font-size: .85rem; margin: 12px 0 0; color: #dce4ef; }
.spc-lead-consent a { color: var(--spc-g-gold); }
.spc-lead-msg:empty { display: none; }
.spc-lead-msg { margin: 10px 0 0; font-weight: 600; }
.spc-lead-msg.is-ok { color: var(--spc-g-gold); }
.spc-lead-msg.is-error { color: #ffb4b4; }
.spc-lead-off { background: #fff4d6; color: #5a4300; padding: 10px 14px; border-radius: 8px; }

/* Confirmation banner */
.spc-lead-banner {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60;
  background: var(--spc-g-navy); color: #fff; border-bottom: 4px solid var(--spc-g-gold);
  padding: 12px 18px; border-radius: 12px; box-shadow: var(--spc-g-shadow); max-width: calc(100% - 32px);
}

.spc-gear-compare .screen-reader-text, .spc-gear-table .screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}