:root {
  --ink: #161814;
  --paper: #ece9e0;
  --muted: #777871;
  --line: rgba(22, 24, 20, 0.16);
  --line-dark: rgba(236, 233, 224, 0.2);
  --amber: #f4b64f;
  --amber-dark: #9f5c29;
  --night: #191b18;
  --white: #f6f3ea;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 16px; line-height: 1.5; }
a { color: inherit; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 10; padding: .6rem .8rem; background: var(--amber); color: var(--ink); }
.skip-link:focus { top: 1rem; }
.site-header { height: 76px; padding: 0 5vw; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; font-size: .72rem; letter-spacing: .16em; font-weight: 800; }
.brand-mark { width: 24px; height: 24px; position: relative; display: inline-block; border: 1px solid var(--ink); border-radius: 50%; }
.brand-mark::before, .brand-mark::after, .brand-mark span { content: ''; position: absolute; left: 5px; right: 5px; height: 1px; background: var(--ink); transform: rotate(45deg); }
.brand-mark::before { top: 7px; } .brand-mark::after { top: 12px; transform: rotate(-45deg); } .brand-mark span { top: 16px; }
.nav { display: flex; align-items: center; gap: 1.6rem; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; }
.nav a { text-decoration: none; color: var(--muted); } .nav a:hover { color: var(--ink); }
.review-badge { padding: .35rem .55rem; border: 1px solid var(--line); color: var(--muted); font-size: .62rem; letter-spacing: .08em; }

.hero { min-height: calc(100svh - 76px); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); overflow: hidden; background: var(--night); color: var(--white); }
.hero-copy { padding: clamp(4rem, 9vw, 8rem) 6vw 4rem; align-self: center; position: relative; z-index: 1; }
.eyebrow { margin: 0 0 1.2rem; text-transform: uppercase; letter-spacing: .16em; font-size: .68rem; font-weight: 800; color: var(--muted); }
.hero .eyebrow { color: #b8b9ad; }
.eyebrow-dot { width: 7px; height: 7px; display: inline-block; margin-right: .45rem; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 5px rgba(244,182,79,.14); }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { letter-spacing: -.055em; line-height: .98; font-weight: 500; }
h1 { max-width: 10ch; margin-bottom: 1.6rem; font-size: clamp(3.8rem, 7vw, 7.7rem); }
h1 em, h2 em { color: var(--amber); font-family: var(--serif); font-weight: 400; }
.hero-lede { max-width: 30rem; margin-bottom: 2.2rem; color: #c1c2b9; font-size: clamp(1rem, 1.5vw, 1.18rem); }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 2.5rem; min-height: 3.1rem; padding: .8rem 1rem .8rem 1.1rem; text-decoration: none; text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; font-weight: 800; transition: transform .25s ease, background .25s ease, color .25s ease; }
.button:hover { transform: translateY(-3px); }
.button-primary { background: var(--amber); color: var(--ink); } .button-primary:hover { background: #ffd281; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 3.5rem; color: #8c8e86; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.hero-meta strong { display: block; margin-bottom: .2rem; color: var(--white); font-size: 1.2rem; letter-spacing: 0; font-weight: 500; }
.hero-visual { min-height: 520px; position: relative; overflow: hidden; background: radial-gradient(circle at 35% 44%, #4f5148 0, #252822 42%, #191b18 75%); }
.visual-sun { position: absolute; top: 15%; right: 21%; width: 10rem; height: 10rem; border-radius: 50%; background: var(--amber); opacity: .14; filter: blur(24px); }
.visual-grid { position: absolute; inset: 0; opacity: .15; background-image: linear-gradient(rgba(236,233,224,.25) 1px, transparent 1px), linear-gradient(90deg, rgba(236,233,224,.25) 1px, transparent 1px); background-size: 62px 62px; mask-image: linear-gradient(120deg, transparent 10%, #000 45%, transparent 92%); }
.power-illustration { width: 90%; max-width: 600px; position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); }
.station-shadow { fill: #050605; opacity: .5; filter: blur(10px); } .station-shell { fill: url(#shell); stroke: rgba(246,243,234,.2); stroke-width: 2; }
.station-top { fill: #707169; stroke: rgba(246,243,234,.2); } .station-screen { fill: #141613; stroke: rgba(246,243,234,.16); stroke-width: 2; }
.screen-line { stroke: #9f5c29; stroke-width: 3; stroke-linecap: round; } .screen-text { fill: #f4b64f; font: 600 27px var(--sans); } .screen-unit { fill: #9b9d91; font: 11px var(--sans); }
.power-button { fill: #282b26; stroke: #f4b64f; stroke-width: 2; } .power-icon { fill: none; stroke: #f4b64f; stroke-width: 2.5; stroke-linecap: round; }
.ports rect { fill: #181a17; stroke: rgba(246,243,234,.14); } .port-lights circle { fill: #f4b64f; opacity: .8; }
.wire { fill: none; stroke: #f4b64f; stroke-width: 2; stroke-dasharray: 2 11; opacity: .8; } .wire-node { fill: #f4b64f; }
.orbit circle { fill: #f4b64f; } .visual-caption { position: absolute; bottom: 2rem; left: 7%; margin: 0; color: #a3a49b; font-size: .75rem; letter-spacing: .05em; } .visual-caption span { margin-right: .6rem; color: var(--amber); }

.section { padding: clamp(4rem, 8vw, 8rem) 8vw; }
.section-intro { max-width: 44rem; } h2 { margin-bottom: 1.4rem; font-size: clamp(2.8rem, 5vw, 5.6rem); } .section-intro > p:last-child, .evidence-copy > p { max-width: 35rem; color: var(--muted); }
.calculator-section { background: #e1ded5; }
.controls { max-width: 75rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 3.2rem; }
.field { display: flex; flex-direction: column; gap: .45rem; padding-bottom: .65rem; border-bottom: 1px solid var(--line); } .field-wide { grid-column: span 3; }
.field span { display: flex; justify-content: space-between; text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; font-weight: 800; color: var(--muted); } .field b { color: var(--amber-dark); font-weight: 800; }
select, input[type=number] { width: 100%; border: 0; outline: 0; appearance: none; background: transparent; color: var(--ink); font: 500 1.3rem var(--sans); padding: .35rem 0; border-radius: 0; }
select { cursor: pointer; } input[type=number]:focus, select:focus { box-shadow: 0 2px 0 var(--amber-dark); }
input[type=range] { width: 100%; accent-color: var(--amber-dark); cursor: pointer; } output { color: var(--ink); font-size: .8rem; letter-spacing: 0; }
.assumption-note { max-width: 55rem; margin: 2.4rem 0 0; color: #6b6d66; font-size: .82rem; } .assumption-note span { color: var(--amber-dark); font-size: 1.2rem; margin-right: .4rem; }
.results-section { background: var(--paper); } .results-head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; } .result-summary { max-width: 22rem; margin-bottom: 1.5rem; color: var(--muted); text-align: right; font-size: .9rem; }
.product-rail { margin-top: 3rem; border-top: 1px solid var(--line); } .product-row { display: grid; grid-template-columns: 4rem 1fr 9rem; gap: 2rem; padding: 2.2rem 0; border-bottom: 1px solid var(--line); align-items: start; }
.product-index { color: var(--amber-dark); font: 2.5rem var(--serif); } .product-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; } .product-kicker { margin: 0 0 .3rem; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; font-weight: 800; } h3 { margin-bottom: 1.2rem; font-size: 1.5rem; font-weight: 500; letter-spacing: -.04em; }
.source-link { padding-top: .2rem; color: var(--muted); font-size: .75rem; text-decoration: none; white-space: nowrap; } .source-link:hover { color: var(--amber-dark); }
.product-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .product-metrics div { display: flex; flex-direction: column; gap: .25rem; } .product-metrics span, .runtime-line span { color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-size: .62rem; font-weight: 800; } .product-metrics strong { font-size: 1.1rem; font-weight: 500; }
.runtime-track { height: 5px; margin-top: 1.4rem; background: #d1cec5; overflow: hidden; } .runtime-bar { display: block; width: 0; height: 100%; background: var(--amber-dark); transition: width .45s cubic-bezier(.2,.8,.2,1); }
.runtime-line { display: flex; justify-content: space-between; gap: 1rem; margin-top: .65rem; } .runtime-line strong { color: var(--amber-dark); font-weight: 700; }
.product-verdict { align-self: center; justify-self: end; max-width: 8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; text-align: right; font-size: .68rem; font-weight: 800; } .product-verdict.pass { color: #4e6b48; } .product-verdict.warn { color: var(--amber-dark); }
.evidence-section { background: var(--night); color: var(--white); } .evidence-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; } .evidence-section .eyebrow { color: #b8b9ad; } .evidence-section h2 em { color: var(--amber); } .evidence-copy { align-self: end; } .evidence-copy > p { color: #c1c2b9; }
details { margin: 2rem 0; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); } summary { cursor: pointer; padding: 1rem 0; color: var(--amber); text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; font-weight: 800; } details ul { margin: 0 0 1.3rem; padding-left: 1.2rem; color: #c1c2b9; font-size: .86rem; } details li { margin: .5rem 0; }
.disclosure-placeholder { padding: 1rem; border-left: 2px solid var(--amber); color: #c1c2b9 !important; font-size: .84rem; } .disclosure-placeholder strong { color: var(--white); }
.site-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1.3rem 5vw; background: #111310; color: #8d8e86; text-transform: uppercase; letter-spacing: .1em; font-size: .62rem; }

@media (max-width: 800px) {
  .site-header { height: 64px; padding: 0 1.2rem; } .nav a { display: none; } .review-badge { font-size: .55rem; }
  .hero { min-height: auto; grid-template-columns: 1fr; } .hero-copy { padding: 4.5rem 1.4rem 3rem; } .hero-visual { min-height: 360px; } .power-illustration { width: 108%; }
  .hero-meta { margin-top: 2.5rem; gap: 1rem; } .section { padding: 4.5rem 1.4rem; } .controls { grid-template-columns: 1fr 1fr; } .field-wide { grid-column: span 2; }
  .results-head { display: block; } .result-summary { margin-top: 1.5rem; text-align: left; } .product-row { grid-template-columns: 2rem 1fr; gap: .8rem; } .product-verdict { grid-column: 2; justify-self: start; text-align: left; }
  .product-heading { display: block; } .source-link { display: inline-block; margin-bottom: 1.2rem; } .product-metrics { grid-template-columns: 1fr 1fr; }
  .evidence-grid { grid-template-columns: 1fr; gap: 2rem; } .site-footer { display: block; } .site-footer span { display: block; margin: .35rem 0; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }