:root { font-family: Arial, Helvetica, sans-serif; color: #25342e; background: #f4f1e9; font-synthesis: none; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-underline-offset: 0.2em; }
button, input { font: inherit; }
:focus-visible { outline: 3px solid #af3b18; outline-offset: 5px; }
.wrap { width: min(1200px, calc(100% - 5rem)); margin-inline: auto; }
.site-header { min-height: 108px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #d8d9cf; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: 0.65rem; font-size: 1.8rem; font-weight: 800; letter-spacing: -0.06em; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 33px; height: 33px; background: #d34e25; color: #fff9ed; font-size: 1.6rem; border-radius: 7px; padding-bottom: 3px; }
nav { display: flex; gap: 2rem; font-size: 0.9rem; }
nav a { text-decoration: none; }
nav a:hover { text-decoration: underline; }
.hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: center; padding-block: 6rem 5rem; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; font-weight: 700; margin: 0 0 1.5rem; }
.status-dot { display: inline-block; width: 7px; height: 7px; background: #d34e25; border-radius: 50%; margin-right: 0.6rem; }
h1 { font-size: clamp(3rem, 5.4vw, 4.65rem); letter-spacing: -0.065em; line-height: 1.02; margin: 0; max-width: 9.5em; }
h1 span { color: #d34e25; }
.intro { font-size: 1.13rem; line-height: 1.65; max-width: 32rem; margin: 1.7rem 0 1rem; }
.target { color: #627166; font-size: 0.95rem; line-height: 1.6; max-width: 28rem; }
.button { display: inline-flex; gap: 2rem; align-items: center; padding: 0.95rem 1.15rem; background: #263d32; color: #fffdf7; text-decoration: none; margin-top: 1.2rem; border-radius: 3px; font-size: 0.9rem; }
.button:hover { background: #355441; }
.product-figure { margin: 0; min-width: 0; }
.product-figure img { width: 100%; height: auto; display: block; }
figcaption { text-align: center; color: #6c766d; font-size: 0.72rem; line-height: 1.6; }
.section-heading { max-width: 44rem; }
h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); letter-spacing: -0.045em; line-height: 1.12; margin: 0 0 1.2rem; }
h3 { font-size: 1.05rem; letter-spacing: -0.02em; }
.section-heading > p:not(.eyebrow) { color: #5a6a60; line-height: 1.65; }
.process { padding-block: 2rem 5.5rem; }
.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; list-style: none; padding: 1.5rem 0 0; margin: 0; }
.process-steps li { border-top: 1px solid #bec7ba; padding-top: 1.4rem; }
.step-number { font-size: 0.73rem; color: #aa4325; }
.process-steps p { color: #5a6a60; font-size: 0.9rem; line-height: 1.6; max-width: 15rem; }
.simulation-section { background: #e7ebdf; padding-block: 5.5rem; scroll-margin-top: 2rem; }
.simulation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; margin-top: 2.8rem; }
.controls { min-width: 0; }
.controls label { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: 0.85rem; line-height: 1.5; }
.controls output { font-weight: 700; white-space: nowrap; }
.controls input { width: 100%; accent-color: #c74b25; margin: 1rem 0 1.6rem; cursor: pointer; }
.reset { background: none; border: 0; padding: 0.4rem 0; color: #3e5b49; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; font-size: 0.85rem; }
.results { background: #f9f8f1; padding: 2rem; border-radius: 4px; }
.primary-result > p:first-child { font-size: 0.85rem; margin: 0; }
.big-number { font-size: clamp(4rem, 7vw, 6.2rem); line-height: 1; letter-spacing: -0.06em; margin: 0.9rem 0 1.6rem; }
.unit { font-size: 0.35em; letter-spacing: 0; margin-left: 0.4em; color: #67756b; }
.result-details { margin: 0; }
.result-details > div { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid #d6dccf; padding: 0.85rem 0; font-size: 0.85rem; line-height: 1.5; }
.result-details dd { margin: 0; font-weight: 700; white-space: nowrap; }
.charge-time, .fuel-runtime { font-size: 0.8rem; line-height: 1.6; color: #5c6c60; }
.model-notes { border-top: 1px solid #bec7ba; margin-top: 2.6rem; padding-top: 1.3rem; font-size: 0.85rem; line-height: 1.7; color: #4d6154; }
.model-notes summary { cursor: pointer; font-weight: 700; color: #25342e; }
.model-notes p { max-width: 60rem; }
.engineering { padding-block: 5.5rem; scroll-margin-top: 2rem; }
.engineering-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; margin-top: 2.2rem; }
.engineering-columns p { font-size: 0.9rem; color: #5a6a60; line-height: 1.7; }
footer { border-top: 1px solid #d8d9cf; padding-block: 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
footer .brand { font-size: 1.3rem; }
footer p { font-size: 0.75rem; color: #627166; line-height: 1.6; }
.name { font-weight: 700; }
.welcome { line-height: 1.6; }
body:has(> main:only-child) { min-height: 100svh; display: grid; place-items: center; padding: 2rem; }
@media (max-width: 850px) { .hero { grid-template-columns: 1fr; padding-block: 3.5rem; } .hero-copy { max-width: 38rem; } h1 { font-size: clamp(3rem, 8vw, 4.6rem); } .product-figure { width: min(100%, 38rem); margin: 0 auto; } .simulation-grid { gap: 2rem; } .engineering-columns { gap: 1.5rem; } .process-steps { gap: 1.2rem; } }
@media (max-width: 600px) { .wrap { width: calc(100% - 2.5rem); } .site-header { min-height: 85px; gap: 1rem; } .brand { font-size: 1.4rem; gap: 0.4rem; } .brand-mark { width: 27px; height: 27px; font-size: 1.3rem; } nav { gap: 0.85rem; font-size: 0.73rem; } .hero { gap: 1rem; } .intro { font-size: 1rem; } .process-steps { grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; } .simulation-grid, .engineering-columns { grid-template-columns: 1fr; } .simulation-section, .engineering { padding-block: 3.5rem; } .process { padding-bottom: 3.5rem; } .results { padding: 1.5rem; } .big-number { font-size: 5rem; } footer { align-items: flex-start; } footer p { text-align: right; margin-top: 0; max-width: 12rem; } }
@media (prefers-reduced-motion: reduce) { :root { scroll-behavior: auto; } }