/* Support > Requirements: Windows spec sheet v2 (2026-10-06). CSS-only Minimum / Recommended / Optimal switch, gold accents. */
.spec-sheet { --spec-gold: linear-gradient(110deg, #f0d9a8 0%, #c9a15e 55%, #a07c45 100%); position: relative; margin-top: 30px; padding: clamp(22px, 3vw, 34px); border-radius: 22px; background: #19150f; border: 1px solid #393126; overflow: hidden; }
.spec-sheet::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--spec-gold); opacity: .35; transition: opacity .4s; }
.spec-sheet > input { position: absolute; opacity: 0; pointer-events: none; }
.spec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.spec-eyebrow { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .09em; color: var(--gold); }
.spec-head h3 { margin: 0; font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.spec-switch { display: inline-flex; padding: 4px; gap: 4px; border-radius: 12px; background: #120f0b; border: 1px solid #393126; }
.spec-switch label { cursor: pointer; padding: 9px 16px; border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--muted); transition: background .25s, color .25s; user-select: none; white-space: nowrap; }
.spec-switch label:hover { color: var(--ink); }
#spec-min:checked ~ .spec-head label[for="spec-min"],
#spec-rec:checked ~ .spec-head label[for="spec-rec"],
#spec-opt:checked ~ .spec-head label[for="spec-opt"] { background: #f0ebdf; color: #15120d; }
#spec-opt:checked ~ .spec-head label[for="spec-opt"] { background: var(--spec-gold); color: #1a140b; }
#spec-min:focus-visible ~ .spec-head label[for="spec-min"],
#spec-rec:focus-visible ~ .spec-head label[for="spec-rec"],
#spec-opt:focus-visible ~ .spec-head label[for="spec-opt"] { outline: 2px solid var(--gold-soft); outline-offset: 2px; }
.spec-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.spec-tile { position: relative; display: flex; flex-direction: column; min-height: 228px; padding: 22px; border-radius: 16px; background: #15110c; border: 1px solid #2f281e; transition: border-color .4s, background .4s, box-shadow .4s; }
.spec-tile .ico-tile { display: inline-flex; align-self: flex-start; margin-bottom: 20px; padding: 10px; border-radius: 10px; background: #241e15; border: 1px solid #493b29; color: var(--gold-soft); }
.spec-label { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.spec-swap { display: grid; }
.spec-swap > span { grid-area: 1 / 1; transition: opacity .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1); }
.spec-value { font-size: clamp(30px, 2.7vw, 42px); font-weight: 800; line-height: 1.05; letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.spec-note { margin-top: auto; padding-top: 14px; font-size: 14.5px; line-height: 1.55; color: #c5b698; }
.spec-note > span { align-self: end; }
.spec-sheet .v-rec, .spec-sheet .v-opt { opacity: 0; transform: translateY(10px); pointer-events: none; }
#spec-rec:checked ~ .spec-grid .v-min, #spec-opt:checked ~ .spec-grid .v-min { opacity: 0; transform: translateY(-10px); pointer-events: none; }
#spec-rec:checked ~ .spec-grid .v-rec, #spec-opt:checked ~ .spec-grid .v-opt { opacity: 1; transform: none; pointer-events: auto; }
#spec-rec:checked ~ .spec-grid .spec-tile { border-color: #5a4a33; background: #1a150e; }
#spec-opt:checked ~ .spec-grid .spec-tile { border-color: #7a6440; background: #1d170e; box-shadow: inset 0 1px 0 #f0d9a826, 0 18px 40px -28px #c9a15e80; }
#spec-rec:checked ~ .spec-grid .spec-value .v-rec,
#spec-opt:checked ~ .spec-grid .spec-value .v-opt { background: var(--spec-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.spec-sheet:has(#spec-rec:checked)::before, .spec-sheet:has(#spec-opt:checked)::before { opacity: 1; }
.spec-extras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.spec-extra { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 14px; border: 1px dashed #3a3125; }
.spec-extra svg { flex: none; margin-top: 2px; color: var(--gold-soft); }
.spec-extra p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #c5b698; }
.spec-extra strong { display: block; margin-bottom: 2px; font-size: 14px; font-weight: 600; color: var(--ink); }
@media (max-width: 1080px) { .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .spec-extras { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .spec-grid { grid-template-columns: 1fr; } .spec-tile { min-height: 0; } .spec-head { align-items: flex-start; } .spec-switch { display: flex; width: 100%; } .spec-switch label { flex: 1; text-align: center; padding: 9px 4px; font-size: 13.5px; } }
@media (prefers-reduced-motion: reduce) { .spec-swap > span, .spec-tile, .spec-sheet::before { transition: none; } }