:root {
  --paper:#f6f5f1; --ink:#202322; --muted:#555953; --line:#deded6;
  --accent:#f2b544; --accent-hover:#ffc85b; --white:#fff; --dark:#232724;
  color:var(--ink); background:var(--paper); font:16px/1.55 Inter, system-ui, -apple-system, sans-serif;
  color-scheme:light; scroll-behavior:smooth; scroll-padding-top:82px;
}
* {box-sizing:border-box}
body {margin:0}
img {display:block; width:100%; height:auto}
a {color:inherit}
button, input, select {font:inherit}
button, a {touch-action:manipulation}
button {cursor:pointer}
:focus-visible {outline:3px solid #885400; outline-offset:4px}
.wrap {width:min(1224px, calc(100% - 80px)); margin-inline:auto}
.site-header {position:sticky; top:0; z-index:3; background:var(--paper); border-bottom:1px solid var(--line)}
.nav {min-height:72px; display:flex; justify-content:space-between; align-items:center; gap:24px}
.brand {font-weight:850; font-size:25px; letter-spacing:-.065em; display:inline-flex; align-items:center; gap:9px; text-decoration:none}
.brand-symbol {width:27px; height:27px; background:var(--accent); border-radius:6px; display:grid; place-items:center}
.brand-symbol::after {content:""; width:11px; height:17px; background:var(--ink); clip-path:polygon(64% 0, 0 59%, 43% 59%, 30% 100%, 100% 37%, 55% 37%)}
.nav-links {display:flex; align-items:center; gap:28px}
.nav-links a {font-size:.9rem; font-weight:650; text-decoration:none}
.nav-links a:hover, .text-link:hover {text-decoration:underline; text-underline-offset:4px}
.btn {display:inline-flex; align-items:center; justify-content:center; gap:.6rem; min-height:49px; padding:.75rem 1.1rem; background:var(--accent); color:var(--ink); border:1px solid transparent; border-radius:9px; font-size:.92rem; font-weight:750; text-decoration:none; text-align:center; line-height:1.25}
.btn:hover {background:var(--accent-hover)}
.btn.outline {background:transparent; border-color:#bfc0b7}
.btn.outline:hover {background:#ecebe4}
.btn.small {min-height:42px; padding:.55rem .85rem; font-size:.82rem}
h1,h2,h3,p,dl,dd,figure {margin:0}
h1,h2,h3 {line-height:1.08; letter-spacing:-.044em}
h1 {font-size:clamp(2.25rem,5vw,4.65rem); font-weight:830}
h2 {font-size:clamp(1.8rem,3.5vw,3.15rem); font-weight:810}
h3 {font-size:1.55rem; font-weight:780}
.eyebrow {font-size:.76rem; font-weight:790; letter-spacing:.075em; color:var(--muted)}
.lead {font-size:clamp(1rem,1.6vw,1.22rem); color:var(--muted); max-width:39ch; line-height:1.55}
.hero {display:grid; grid-template-columns:1fr 1.1fr; align-items:stretch; margin-top:30px; background:#eeece4; border-radius:18px; overflow:hidden}
.hero-copy {position:relative; z-index:1; padding:clamp(30px,5vw,74px) 0 clamp(30px,5vw,74px) clamp(28px,4.8vw,68px); display:grid; gap:21px; align-content:center}
.hero h1 {font-size:clamp(2.06rem,4.55vw,4.1rem)}
.hero-actions {display:flex; flex-wrap:wrap; gap:10px; margin-top:4px}
.hero-media {position:relative; display:grid; align-items:center; padding:20px 20px 43px 0; background:radial-gradient(ellipse at 53% 49%, #faf7ee 0%, #eae6d9 72%); overflow:hidden}
.hero-media img {mix-blend-mode:multiply; aspect-ratio:1.2; object-fit:cover}
.hero-media figcaption {position:absolute; bottom:20px; right:27px; display:flex; gap:11px; align-items:center; font-size:.82rem; font-weight:730}
.hero-media figcaption span {color:var(--muted); font-weight:540; border-left:1px solid #aaaba2; padding-left:11px}
.section {margin-block:70px}
.section-heading {display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:24px}
.section-heading p {color:var(--muted); max-width:39ch}
.model-grid {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
.model-card {display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); background:var(--white); border:1px solid var(--line); border-radius:14px; overflow:hidden; align-items:center}
.model-card .shot {height:100%; min-height:204px; display:grid; place-items:center; background:#eeece5; overflow:hidden}
.shot img, .product-photo img {mix-blend-mode:multiply; aspect-ratio:1.17; object-fit:cover}
.model-content {padding:19px 20px; display:grid; gap:9px}
.model-content p {font-size:.87rem; color:var(--muted)}
.model-content h3 a {text-decoration:none}
.model-content h3 a:hover {text-decoration:underline; text-underline-offset:4px}
.model-figures {font-size:.83rem; display:flex; flex-wrap:wrap; gap:5px 10px; font-weight:730}
.status {display:inline-flex; align-items:center; gap:7px; font-size:.8rem; font-weight:720; color:#654900}
.status::before {content:""; width:8px; height:8px; border-radius:50%; background:#a97006; flex:none}
.status.ready {color:#255238}
.status.ready::before {background:#32754c}
.text-link {font-weight:730; text-decoration:none; width:fit-content; min-height:36px; display:inline-flex; align-items:center}
.compare {border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff}
.compare table {width:100%; border-collapse:collapse; table-layout:fixed}
.compare td,.compare th {padding:13px 18px; border-bottom:1px solid var(--line); text-align:left; font-size:.92rem; vertical-align:top}
.compare th[scope="row"] {font-weight:600; color:var(--muted)}
.compare thead th {background:#eeece5; font-weight:810}
.compare tr:last-child>* {border-bottom:0}
.runtime {background:var(--dark); color:#f6f5f1; padding:clamp(22px,4vw,51px); border-radius:15px; display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(22px,4vw,54px); align-items:start}
.runtime .intro {display:grid; gap:15px}
.runtime .intro p,.runtime small {color:#d0d3c9}
.runtime form {display:grid; gap:12px}
.runtime label {font-size:.9rem; font-weight:650}
.runtime input,.runtime select {min-height:44px; width:100%; background:#f6f5f1; color:var(--ink); border:1px solid #aaa; border-radius:6px; padding:.4rem .65rem}
.runtime-fields {display:grid; grid-template-columns:1fr 1fr; gap:12px}
.runtime-fields label {display:grid; gap:6px; min-width:0}
.runtime output {font-size:clamp(1.55rem,4vw,2.35rem); color:var(--accent); font-weight:780; line-height:1.16; min-height:1.2em}
.runtime small {line-height:1.5}
.crumbs {font-size:.87rem; color:var(--muted); margin-top:24px; margin-bottom:18px}
.product-main {display:grid; grid-template-columns:1.12fr 1fr; align-items:start; gap:clamp(20px,4vw,62px)}
.product-photo {display:grid; place-items:center; background:#eceae2; border-radius:16px; overflow:hidden}
.product-photo img {aspect-ratio:1.22}
.product-info {display:grid; gap:15px; padding-top:13px}
.product-info h1 {font-size:clamp(2.6rem,5.6vw,5rem)}
.product-info .eyebrow {font-size:.84rem}
.spec-row {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; border-block:1px solid var(--line); padding:16px 0}
.spec-row dt {font-size:.77rem; color:var(--muted)}
.spec-row dd {font-size:clamp(.92rem,2vw,1.45rem); font-weight:790; white-space:nowrap}
.buy-box {display:grid; gap:9px; align-items:start}
.buy-box .btn {justify-self:start}
.buy-box p {font-size:.88rem; color:var(--muted)}
.demo-control {font-size:.82rem; color:var(--muted); margin-top:5px}
.demo-control summary {cursor:pointer; font-weight:620}
.demo-control label {display:flex; gap:8px; align-items:center; width:fit-content; min-height:40px}
.facts {margin:0; background:#fff; border-radius:12px; border:1px solid var(--line); overflow:hidden}
.facts div {display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:11px 20px; border-bottom:1px solid var(--line)}
.facts div:last-child {border-bottom:0}
.facts dt {color:var(--muted)}
.facts dd {font-weight:690}
.site-footer {border-top:1px solid var(--line); padding:27px 0}
.footer-inner {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px 20px}
.footer-inner p {font-size:.82rem; color:var(--muted)}
.footer-links {display:flex; flex-wrap:wrap; gap:8px 20px; font-size:.85rem}
.footer-links a {text-decoration:underline; text-underline-offset:3px}
.info-page {min-height:55vh}
.info-page h1 {font-size:clamp(2rem, 6vw, 3.7rem); margin-bottom:24px}
.info-page h2 {margin:24px 0 8px}
.info-page p {max-width:63ch; margin-bottom:16px}
.cart-consent {display:flex; align-items:start; gap:10px; font-size:.88rem}
.cart-consent input {width:18px; height:18px; margin:2px 0 0; flex:none; accent-color:var(--ink)}
.cart-consent .text-link {display:block; width:fit-content; margin-top:5px}
dialog {max-width:min(460px,calc(100% - 30px)); border:1px solid var(--line); border-radius:14px; padding:24px; color:var(--ink); background:var(--paper); box-shadow:0 15px 55px #0002}
dialog::backdrop {background:#15171499}
.modal-head {display:flex; align-items:start; justify-content:space-between; gap:14px; margin-bottom:13px}
.close {border:1px solid var(--line); background:#fff; font-size:1.2rem; border-radius:6px; width:36px; min-width:36px; height:36px; line-height:1}
dialog p {color:var(--muted); font-size:.91rem; margin-bottom:12px}
dialog form {display:grid; gap:10px}
dialog label {display:grid; gap:5px; font-size:.88rem; font-weight:650}
dialog input {padding:.5rem; min-height:44px; border:1px solid #b7b8b0; border-radius:6px; background:#fff; width:100%}
[hidden] {display:none!important}
.mobile-action {display:none}
@media(max-width:1000px) {
  .wrap {width:calc(100% - 48px)}
  .model-card {grid-template-columns:1fr}
  .model-card .shot {min-height:0}
  .model-card .shot img {width:76%; aspect-ratio:1.55}
}
@media(max-width:650px) {
  :root {scroll-padding-top:65px}
  .wrap {width:calc(100% - 32px)}
  .nav {min-height:58px; gap:10px}
  .brand {font-size:22px; gap:7px}
  .brand-symbol {width:24px; height:24px}
  .nav-links {gap:13px}
  .nav-links a {font-size:.78rem; min-height:42px; display:grid; align-items:center}
  .nav-links .desktop-link {display:none}
  .hero {grid-template-columns:1fr; margin-top:16px; border-radius:13px}
  .hero-copy {padding:26px 20px 9px; gap:13px}
  .hero-actions {margin-top:1px}
  .hero-media {padding:0 10px 33px}
  .hero-media img {aspect-ratio:1.64}
  .hero-media figcaption {bottom:9px; right:13px; font-size:.72rem}
  .section {margin-block:43px}
  .section-heading {display:grid; gap:8px; margin-bottom:17px}
  .model-grid {grid-template-columns:1fr; gap:12px}
  .model-card {grid-template-columns:.85fr 1fr}
  .model-card .shot img {width:100%; aspect-ratio:1; object-fit:contain}
  .model-content {padding:15px 11px}
  .model-content h3 {font-size:1.33rem}
  .model-content p,.model-figures {font-size:.78rem}
  .compare td,.compare th {padding:10px 7px; font-size:.77rem; overflow-wrap:anywhere}
  .runtime {grid-template-columns:1fr}
  .product-main {display:flex; flex-direction:column; gap:0}
  .product-info {display:contents}
  .product-info .eyebrow {order:0}
  .product-info h1 {order:1; font-size:2.6rem; margin:5px 0 10px}
  .product-photo {order:2; width:100%}
  .product-photo img {aspect-ratio:1.52}
  .product-info .lead {order:3; margin:12px 0}
  .spec-row {order:4; width:100%; padding:10px 0}
  .buy-box {order:5; margin-top:12px}
  .buy-box .btn {display:none}
  .demo-control {order:6; margin-top:9px}
  .crumbs {margin:14px 0; font-size:.79rem}
  .mobile-action {display:block; position:fixed; z-index:2; bottom:0; left:0; right:0; background:var(--paper); padding:7px 16px calc(7px + env(safe-area-inset-bottom)); border-top:1px solid var(--line)}
  .mobile-action .btn {width:100%; min-height:44px}
  .product-page .site-footer {padding-bottom:83px}
}
@media(prefers-reduced-motion:reduce) {:root{scroll-behavior:auto}}
.source {margin-top:12px}
.photo-placeholder {min-height:170px; display:grid; place-items:center; padding:20px; color:var(--muted)}

.commerce {display:grid; gap:20px}
.stage-note {padding:12px 15px; color:#593d08; background:#fff1cd; border-radius:8px}
.cart-grid {display:grid; grid-template-columns:1.15fr 1fr; gap:18px; align-items:start}
.cart-panel {padding:clamp(16px,3vw,28px); border:1px solid var(--line); border-radius:14px; background:var(--white)}
.cart-panel h2 {font-size:clamp(1.45rem,2.4vw,2rem)}
.cart-form {display:grid; gap:12px}
.cart-form label {display:grid; gap:5px; font-weight:650; min-width:0}
.cart-form select,.cart-line select {min-height:44px; width:100%; border:1px solid #bfc0b7; border-radius:7px; padding:8px; background:var(--paper); color:var(--ink)}
.cart-buyer {min-width:0; margin:0; border:0; padding:0; display:grid; gap:10px}
.cart-buyer legend {font-weight:750; padding:0 0 8px}
.cart-form input:not([type="checkbox"]) {min-height:44px; width:100%; border:1px solid #bfc0b7; border-radius:7px; padding:8px; background:var(--paper); color:var(--ink)}
.cart-form button:disabled,.order-card button:disabled {opacity:.56; cursor:default}
.cart-add {display:flex; flex-wrap:wrap; gap:8px; padding-top:14px}
.cart-line {display:grid; grid-template-columns:65px minmax(0,1fr) 52px 36px; align-items:center; gap:10px; padding-block:13px; border-bottom:1px solid var(--line)}
.cart-line img {border-radius:8px; background:var(--paper)}
.cart-panel [data-lines]>p {margin-top:12px}
.cart-totals div {display:flex; justify-content:space-between; gap:12px; padding-block:8px; border-bottom:1px solid var(--line)}
.cart-totals dd {font-weight:730; text-align:right; overflow-wrap:anywhere}
.order-card {max-width:760px; display:grid; gap:12px}
.order-card h1 {font-size:clamp(1.6rem,3.5vw,2.8rem); overflow-wrap:anywhere}
.order-lines {padding-left:20px; margin:0}
@media(max-width:650px) {
  .stage-cart-link {order:7; margin-top:12px}
  .cart-grid {grid-template-columns:1fr}
  .cart-line {grid-template-columns:48px minmax(0,1fr) 48px 36px; gap:7px}
}