.hardware-page { --hardware-panel: #0d222a; }
.hardware-page .section { padding-top: 60px; padding-bottom: 64px; }
.hardware-page .hardware-hero { padding-top: 76px; }
.hardware-page .page-title { max-width: 980px; font-size: clamp(3rem, 5.7vw, 5.8rem); }
.hardware-lead { max-width: 800px; color: var(--muted); font-size: 1.12rem; line-height: 1.8; }
.hardware-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); border-block: 1px solid var(--line); margin: 36px 0 28px; }
.hardware-stats > div { padding: 22px 14px; border-right: 1px solid var(--line); }
.hardware-stats > div:first-child { padding-left: 0; }
.hardware-stats > div:last-child { border-right: 0; }
.hardware-stats strong { display: block; color: var(--mint); font-family: var(--mono); font-weight: 400; font-size: 2.2rem; }
.hardware-stats span { display: block; margin-top: 8px; color: var(--muted); font-size: .86rem; }
.hardware-notice { padding: 22px 26px; border: 1px solid rgba(217,163,120,.35); border-left: 3px solid var(--orange); background: rgba(217,163,120,.04); }
.hardware-notice strong { color: var(--text); }
.hardware-notice p { margin: 10px 0 0; color: var(--muted); line-height: 1.75; font-size: .93rem; }
.hardware-date { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 18px; color: var(--muted); font-family: var(--mono); font-size: .72rem; }
.hardware-guide,.hardware-catalog,.hardware-acceptance { border-top: 1px solid var(--line); }
.hardware-section-head h2 { font-size: clamp(2.25rem, 3.4vw, 3.8rem); }
.hardware-section-head > p { max-width: 780px; line-height: 1.75; color: var(--muted); margin: 20px 0 0; }
.hardware-setups { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-top: 30px; }
.hardware-setups article { padding: 24px; border: 1px solid var(--line); background: var(--hardware-panel); }
.hardware-setups article > span { color: var(--aqua); font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; }
.hardware-setups h3 { margin: 22px 0 14px; font-family: var(--heading); font-size: 1.4rem; letter-spacing: -.03em; line-height: 1.25; }
.hardware-setups p { line-height: 1.75; color: var(--muted); font-size: .9rem; }
.hardware-setups a { display: inline-block; color: var(--mint); margin: 8px 14px 0 0; font-size: .84rem; }
.hardware-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 18px; margin-top: 26px; padding: 26px; border: 1px solid var(--line); }
.hardware-flow div { min-width: 0; }
.hardware-flow div span { display: block; color: var(--aqua); font-family: var(--mono); font-size: .67rem; margin-bottom: 9px; }
.hardware-flow > span { color: var(--mint); }
.hardware-flow strong { font-size: .92rem; font-weight: 500; }
.hardware-filters { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; padding: 24px; margin-top: 30px; border: 1px solid var(--line); background: var(--hardware-panel); }
.hardware-filters label { display: flex; flex-direction: column; gap: 9px; font-size: .79rem; color: var(--muted); min-width: 0; }
.hardware-filters .hardware-search { grid-column: 1 / 4; }
.hardware-filters input,.hardware-filters select { width: 100%; min-width: 0; min-height: 46px; padding: 10px 12px; color: var(--text); border: 1px solid #3c5b62; border-radius: 3px; background: #091a22; font: inherit; font-size: .87rem; }
.hardware-filters input::placeholder { color: #92adaa; opacity: 1; }
.hardware-filters input:focus-visible,.hardware-filters select:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }
.hardware-filters button { align-self: end; min-height: 46px; padding: 10px 14px; color: var(--mint); border: 1px solid #62857a; border-radius: 3px; background: transparent; font: inherit; font-size: .85rem; cursor: pointer; }
.hardware-filters button:hover { background: rgba(182,239,202,.08); }
.hardware-result-bar { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 20px 0; }
.hardware-result-bar p { margin: 0; color: var(--mint); font-family: var(--mono); font-size: .8rem; }
.hardware-result-bar a,.hardware-result-bar > span { color: var(--muted); font-size: .85rem; }
.hardware-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 20px; }
.hardware-card { min-width: 0; padding: 26px; border: 1px solid var(--line); background: var(--hardware-panel); scroll-margin-top: 32px; }
.hardware-card[hidden],.hardware-empty[hidden] { display: none; }
.hardware-card-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--aqua); font-family: var(--mono); font-size: .64rem; letter-spacing: .05em; }
.hardware-card h3 { margin: 22px 0 10px; font-family: var(--heading); font-size: 1.55rem; line-height: 1.25; letter-spacing: -.035em; overflow-wrap: anywhere; }
.hardware-platform { color: var(--muted); font-family: var(--mono); font-size: .75rem; line-height: 1.6; }
.hardware-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.hardware-tags > span { padding: 6px 9px; border: 1px solid #37545c; border-radius: 3px; font-size: .66rem; line-height: 1.4; color: var(--muted); }
.hardware-tags .hardware-role-host { color: var(--mint); border-color: #4c7462; }
.hardware-tags .hardware-role-target { color: #edba92; border-color: #89694f; }
.hardware-tags .hardware-role-control { color: #a9dce3; border-color: #547a81; }
.hardware-fit { color: var(--text); font-size: .92rem; line-height: 1.7; }
.hardware-card dl { margin: 20px 0; }
.hardware-card dl > div { padding: 14px 0; border-top: 1px solid var(--line); }
.hardware-card dt { color: var(--aqua); text-transform: uppercase; font-family: var(--mono); font-size: .64rem; letter-spacing: .04em; }
.hardware-card dd { margin: 8px 0 0; color: var(--muted); font-size: .86rem; line-height: 1.75; }
.hardware-detail { padding: 14px 0; border-block: 1px solid var(--line); }
.hardware-detail summary { cursor: pointer; color: var(--text); font-size: .85rem; line-height: 1.6; }
.hardware-detail p { color: var(--muted); font-size: .86rem; line-height: 1.75; margin: 14px 0 0; }
.hardware-source { display: inline-block; margin-top: 20px; color: var(--mint); font-size: .84rem; }
.hardware-source + .hardware-source { display: block; margin-top: 12px; }
.hardware-empty { padding: 24px; background: var(--hardware-panel); border: 1px solid var(--line); color: var(--text); }
.hardware-requirements { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; margin-top: 32px; }
.hardware-requirements article { padding: 24px; border-top: 1px solid var(--line); }
.hardware-requirements article > span { color: var(--mint); font-family: var(--mono); font-size: .8rem; }
.hardware-requirements h3 { font-family: var(--heading); font-size: 1.25rem; margin: 18px 0 12px; }
.hardware-requirements p,.hardware-priority p,.hardware-footnote { color: var(--muted); font-size: .9rem; line-height: 1.8; }
.hardware-priority { border: 1px solid #456859; background: rgba(182,239,202,.03); padding: 24px; margin-top: 24px; }
.hardware-priority strong { color: var(--mint); }
.hardware-priority p { margin: 12px 0 0; }
.hardware-footnote { margin-top: 24px; }
.hardware-purchase { padding-top: 18px; }
.hardware-purchase > strong { color: var(--aqua); font: .7rem var(--mono); }
.hardware-price-guide { margin-top: 24px; padding: 22px 26px; border: 1px solid #456859; background: rgba(182,239,202,.03); }
.hardware-price-guide > strong { color: var(--mint); font-size: .95rem; }
.hardware-price-guide p { max-width: 800px; color: var(--muted); font-size: .88rem; line-height: 1.75; }
.hardware-price-guide a { display: inline-block; color: var(--mint); font-size: .84rem; margin: 8px 20px 0 0; }
.hardware-price { padding: 18px; margin: 20px 0; border: 1px solid #456859; background: rgba(182,239,202,.035); min-width: 0; }
.hardware-price > span,.hardware-budget-total > span { display: block; color: var(--aqua); font: .67rem var(--mono); line-height: 1.7; }
.hardware-price > strong,.hardware-budget-total > strong { display: block; margin-top: 8px; color: var(--mint); font: clamp(1.4rem,2.5vw,1.8rem) var(--mono); overflow-wrap: anywhere; }
.hardware-price p { margin: 12px 0 8px; color: var(--muted); font-size: .8rem; line-height: 1.7; }
.hardware-price small,.hardware-budget-total small { display: block; color: var(--muted); font-size: .71rem; line-height: 1.7; }
.hardware-price a { display: inline-block; margin-top: 12px; color: var(--mint); font-size: .78rem; line-height: 1.6; overflow-wrap: anywhere; }
.hardware-price-missing { border-color: var(--line); background: transparent; }
.hardware-price-missing > strong { color: var(--muted); font-family: inherit; font-size: .96rem; line-height: 1.65; }
.hardware-offer-price { margin-top: 9px; }
.hardware-offer-price > strong { display: block; color: var(--text); font: .91rem var(--mono); line-height: 1.6; }
.hardware-offer-price > span { display: block; margin-top: 4px; color: var(--aqua); font-size: .71rem; line-height: 1.65; }
.hardware-offer-price > p { margin: 6px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.7; }
.hardware-budget { margin: 28px 0 36px; padding: 22px; border: 1px solid #456859; }
.hardware-budget h3 { margin-top: 0; }
.hardware-budget > p { color: var(--muted); line-height: 1.75; font-size: .87rem; }
.hardware-budget-total { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.hardware-budget-parts { padding: 0; margin: 20px 0; list-style: none; }
.hardware-budget-parts li { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px 20px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.hardware-budget-parts a { color: var(--mint); font-size: .85rem; line-height: 1.7; overflow-wrap: anywhere; }
.hardware-budget-parts strong { color: var(--text); font: .86rem var(--mono); line-height: 1.7; }
.hardware-budget-parts li > span { grid-column: 1 / -1; color: var(--aqua); font-size: .74rem; line-height: 1.65; }
.hardware-budget-exclusions > strong { color: var(--text); }
@media (max-width:760px) { .hardware-budget { padding: 16px; } .hardware-budget-parts li { grid-template-columns: minmax(0,1fr); } .hardware-price-guide { padding: 20px; } }
.hardware-buy-links { list-style: none; padding: 0; margin: 14px 0 0; }
.hardware-buy-links li { padding: 12px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.hardware-buy-links a { color: var(--mint); font-size: .88rem; line-height: 1.6; overflow-wrap: anywhere; }
.hardware-buy-links li > span { display: block; margin-top: 6px; color: var(--muted); font-size: .77rem; line-height: 1.65; }
.hardware-supply-missing { color: var(--muted); font-size: .82rem; line-height: 1.7; }
.hardware-build-link { display: block; padding: 13px 16px; margin-top: 18px; color: var(--mint); border: 1px solid #456859; font-size: .86rem; }
.hardware-result-bar button { color: var(--mint); border: 1px solid #456859; background: transparent; padding: 10px 14px; font: inherit; font-size: .8rem; cursor: pointer; }
.hardware-builds { border-top: 1px solid var(--line); }
.hardware-build-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0; }
.hardware-build-nav a { border: 1px solid var(--line); padding: 10px 12px; color: var(--mint); font-size: .75rem; line-height: 1.5; }
.hardware-build { border: 1px solid var(--line); background: var(--hardware-panel); margin: 16px 0; scroll-margin-top: 24px; }
.hardware-build > summary { cursor: pointer; padding: 26px; }
.hardware-build > summary::marker { color: var(--mint); }
.hardware-build > summary > span:first-child { display: block; margin: 0 0 12px 20px; color: var(--aqua); font: .67rem var(--mono); }
.hardware-build > summary strong { font-family: var(--heading); font-size: clamp(1.3rem,2.7vw,2rem); line-height: 1.35; letter-spacing: -.025em; }
.hardware-build-hint { display: block; color: var(--muted); margin: 12px 0 0 20px; font-size: .8rem; line-height: 1.6; }
.hardware-build[open] > summary { border-bottom: 1px solid var(--line); }
.hardware-build-body { padding: 28px; }
.hardware-build-lead,.hardware-common > p { color: var(--muted); font-size: .95rem; line-height: 1.8; margin-top: 0; }
.hardware-build-body h3,.hardware-common > h3 { font-family: var(--heading); font-size: 1.6rem; line-height: 1.4; margin: 26px 0 16px; }
.hardware-spec-group { margin: 32px 0; }
.hardware-spec-group h4,.hardware-common > h4 { color: var(--text); font-family: var(--heading); font-size: 1.22rem; line-height: 1.5; margin: 0 0 18px; }
.hardware-spec-group dl { margin: 0; }
.hardware-spec-group dl > div { display: grid; grid-template-columns: minmax(140px, .7fr) minmax(0,2fr); gap: 20px; padding: 16px 0; border-top: 1px solid var(--line); }
.hardware-spec-group dt { color: var(--aqua); font: .75rem var(--mono); line-height: 1.7; }
.hardware-spec-group dd { color: var(--muted); margin: 0; font-size: .87rem; line-height: 1.85; overflow-wrap: anywhere; }
.hardware-spec-sources { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 16px; }
.hardware-spec-sources a,.hardware-common-link { color: var(--mint); font-size: .8rem; line-height: 1.7; }
.hardware-common-link { display: block; margin-top: 14px; }
.hardware-common { margin-top: 36px; border: 1px solid var(--line); padding: 30px; scroll-margin-top: 24px; }
.hardware-common > h3 { margin-top: 0; }
.hardware-build summary:focus-visible,.hardware-build-nav a:focus-visible,.hardware-buy-links a:focus-visible,.hardware-result-bar button:focus-visible { outline: 3px solid var(--mint); outline-offset: 4px; }
@media (max-width:760px) { .hardware-build-body,.hardware-common { padding: 20px; } .hardware-build > summary { padding: 22px 64px 22px 20px; } .hardware-spec-group dl > div { grid-template-columns: 1fr; gap: 8px; } }
/* Model cards and technical sections share the native accordion interaction. */
.hardware-grid { grid-template-columns: 1fr; align-items: start; }
.hardware-card { padding: 0; }
.hardware-grid > .hardware-build { margin: 0; }
.hardware-card > summary,.hardware-build > summary,.hardware-spec-group > summary { list-style: none; cursor: pointer; position: relative; }
.hardware-card > summary::-webkit-details-marker,.hardware-build > summary::-webkit-details-marker,.hardware-spec-group > summary::-webkit-details-marker { display: none; }
.hardware-card > summary,.hardware-build > summary { padding: 26px 76px 26px 26px; }
.hardware-card > summary::after,.hardware-build > summary::after,.hardware-spec-group > summary::after { content: '+'; position: absolute; right: 24px; top: 24px; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #456859; color: var(--mint); font: 1.3rem var(--mono); }
.hardware-card[open] > summary::after,.hardware-build[open] > summary::after,.hardware-spec-group[open] > summary::after { content: '−'; }
.hardware-card[open] > summary { border-bottom: 1px solid var(--line); }
.hardware-card-title { display: block; margin: 16px 0 10px; font-family: var(--heading); font-size: clamp(1.3rem,2.7vw,2rem); line-height: 1.35; letter-spacing: -.025em; }
.hardware-card-hint { display: block; color: var(--muted); font-size: .8rem; line-height: 1.7; }
.hardware-card-body { padding: 26px; }
.hardware-summary-price { display: block; margin-top: 18px; }
.hardware-summary-price > small { display: block; color: var(--aqua); font: .65rem var(--mono); line-height: 1.7; }
.hardware-card > summary .hardware-summary-price > strong,.hardware-build > summary .hardware-summary-price > strong { display: block; margin-top: 5px; color: var(--mint); font: clamp(1.2rem,2.3vw,1.65rem) var(--mono); line-height: 1.5; overflow-wrap: anywhere; letter-spacing: 0; }
.hardware-build > summary > span:first-child { margin-left: 0; }
.hardware-build-hint { margin-left: 0; }
.hardware-spec-group { margin: 14px 0; border: 1px solid var(--line); background: var(--hardware-panel); }
.hardware-spec-group > summary { padding: 20px 64px 20px 20px; color: var(--text); font-family: var(--heading); font-size: 1.12rem; line-height: 1.5; }
.hardware-spec-group > summary::after { right: 18px; top: 20px; width: 26px; height: 26px; font-size: 1.1rem; }
.hardware-spec-group > summary small { display: block; margin-top: 8px; color: var(--aqua); font: .7rem var(--mono); line-height: 1.7; }
.hardware-spec-group[open] > summary { border-bottom: 1px solid var(--line); }
.hardware-spec-body { padding: 20px; }
.hardware-spec-body .hardware-budget { margin: 0; border: 0; padding: 0; }
.hardware-spec-body .hardware-buy-links { margin-top: 0; }
.hardware-card > summary:focus-visible,.hardware-spec-group > summary:focus-visible { outline: 3px solid var(--mint); outline-offset: 4px; }
@media (max-width:760px) { .hardware-card > summary,.hardware-build > summary { padding: 22px 64px 22px 20px; } .hardware-card > summary::after,.hardware-build > summary::after { right: 18px; top: 22px; } .hardware-spec-body { padding: 16px; } }
@media (max-width:1100px) { .hardware-setups,.hardware-requirements { grid-template-columns: 1fr; } .hardware-setups article { padding: 22px; } .hardware-card-body { padding: 22px; } .hardware-filters { grid-template-columns: repeat(2,minmax(0,1fr)); } .hardware-filters .hardware-search { grid-column: 1 / -1; } }
@media (max-width:760px) { .hardware-page .section { padding-top: 42px; padding-bottom: 46px; } .hardware-page .hardware-hero { padding-top: 46px; } .hardware-stats { grid-template-columns: repeat(2,minmax(0,1fr)); } .hardware-stats > div { padding: 18px; } .hardware-stats > div:first-child { padding-left: 18px; } .hardware-stats > div:nth-child(2) { border-right: 0; } .hardware-stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); } .hardware-stats > div:last-child:nth-child(odd) { grid-column: 1 / -1; } .hardware-notice { padding: 20px; } .hardware-flow { grid-template-columns: 1fr; gap: 14px; } .hardware-flow > span { transform: rotate(90deg); width: 16px; } .hardware-grid { grid-template-columns: 1fr; } .hardware-filters { padding: 18px; } .hardware-page .page-title { font-size: clamp(2.8rem,9vw,4.8rem); } }
@media (max-width:420px) { .hardware-filters { grid-template-columns: 1fr; } .hardware-card-body { padding: 20px; } .hardware-stats strong { font-size: 1.8rem; } }
