/* ── Hardware page ────────────────────────────────────────────────────────
   Page-scoped so it can't disturb the rest of the site. Everything here is
   built from the shared tokens (--glass, --hairline, --grad-3, the mono
   eyebrow) — this is the v3 language, not a second design system.
   ------------------------------------------------------------------------ */

/* two-column product block: artwork one side, the pitch on the other */
.hwsplit{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.hwsplit.flip .hwart{order:2}
.hwart{border:1px solid var(--hairline); border-radius:var(--r-lg); overflow:hidden; background:var(--void-2)}
.hwart img{display:block; width:100%}
.hwart.tall{max-width:420px; margin-inline:auto}

.hwsplit h2{font-size:clamp(30px,4vw,46px); line-height:1.06; letter-spacing:-.025em; margin:14px 0 0}
.hwsplit .kicker{font-size:15px; color:var(--ink-mute); margin-top:9px}
.hwsplit .lead{color:var(--ink-dim); font-size:17px; line-height:1.6; margin-top:18px}

.hwruns{list-style:none; padding:0; margin:20px 0 0; display:grid; gap:9px}
.hwruns li{display:flex; align-items:center; gap:11px; font-size:15px; font-weight:500}
.hwruns svg{flex:0 0 auto; color:var(--c1)}

/* price block */
.hwprice{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:18px; margin-top:26px;
  border:1px solid var(--hairline); border-radius:var(--r-md); background:var(--glass); padding:20px 24px;
}
.hwprice .was{font-size:15px; color:var(--ink-mute); text-decoration:line-through}
.hwprice .now{font-size:38px; font-weight:800; line-height:1; letter-spacing:-.02em}
.hwprice .lab{font-size:13px; color:var(--ink-dim); margin-top:5px; font-weight:500}
.hwbonus{
  display:flex; align-items:center; gap:11px; padding:11px 15px;
  border:1px solid var(--hairline); border-radius:14px; background:var(--glass-2); font-size:14px; line-height:1.35;
}
.hwbonus svg{flex:0 0 auto; color:var(--c3)}
.hwbonus em{font-style:normal; color:var(--ink-mute); display:block}
.hwfine{font-size:13px; color:var(--ink-mute); margin-top:12px; line-height:1.5}

/* spec + accessory cards */
.hwspecs{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:22px}
.hwcard{border:1px solid var(--hairline); border-radius:16px; background:var(--glass); padding:17px}
.hwcard svg{color:var(--c1)}
.hwcard .t{margin-top:9px; font-size:14.5px; font-weight:600; line-height:1.3}
.hwcard .d{margin-top:5px; font-size:13px; line-height:1.4; color:var(--ink-mute)}
.hwcard.need svg{color:var(--c3)}
.hwcard .rec{
  display:inline-block; margin-top:10px; padding:4px 10px; border-radius:10px;
  border:1px solid var(--hairline); background:var(--glass-2);
  font-family:var(--font-mono); font-size:11.5px; color:var(--ink-dim);
}

/* the three posters */
.hwposters{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:8px}
.hwposters div{border:1px solid var(--hairline); border-radius:var(--r-lg); overflow:hidden}
.hwposters img{display:block; width:100%}

/* comparison */
.hwtable{width:100%; border-collapse:collapse; text-align:left; margin-top:8px}
.hwtable th,.hwtable td{padding:15px 18px 15px 0; vertical-align:top; font-size:15px}
.hwtable thead th{border-bottom:1px solid var(--hairline-hi); font-weight:700; font-size:16px}
.hwtable thead th:first-child{width:26%; color:var(--ink-mute); font-weight:500}
.hwtable tbody td{border-bottom:1px solid var(--hairline); color:var(--ink)}
.hwtable tbody td:first-child{color:var(--ink-mute); font-weight:500}
.hwscroll{overflow-x:auto}
.hwscroll table{min-width:620px}

@media(max-width:900px){
  .hwsplit{grid-template-columns:1fr; gap:34px}
  .hwsplit.flip .hwart{order:0}
  .hwart{max-width:420px; margin-inline:auto}
  .hwposters{grid-template-columns:1fr; max-width:420px; margin-inline:auto}
}
@media(max-width:560px){
  .hwspecs{grid-template-columns:1fr}
}