@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/space-grotesk-400.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/space-grotesk-500.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/space-grotesk-600.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono-400.woff2") format("woff2")}
:root{color-scheme:light;--paper:#E7EBEC;--paper-2:#F0F2F2;--ink:#16181D;--soft:#4A5157;--grid:#CBD2D4;--grid-strong:#B4BEC1;--red:#E5341C;--sans:"Space Grotesk","PingFang SC","Microsoft YaHei",system-ui,sans-serif;--mono:"IBM Plex Mono","PingFang SC","Microsoft YaHei",monospace;--page:min(1160px,calc(100% - 48px))}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased}
body:before{position:fixed;inset:0;z-index:-1;content:"";pointer-events:none;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:36px 36px;opacity:.42}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:4px}
a:hover{color:var(--red)}
a:focus-visible,summary:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.wrap{width:var(--page);margin:0 auto}
.hero{padding:clamp(72px,12vw,150px) 0 70px;min-height:460px;position:relative}
.eyebrow,.label,.meta{font:11px/1.5 var(--mono);letter-spacing:.055em}
.eyebrow{color:var(--red);text-transform:uppercase}
h1,h2,h3,p{margin-top:0}
h1{max-width:15ch;margin:16px 0 22px;font-size:clamp(44px,8vw,92px);line-height:.99;letter-spacing:-.045em;font-weight:600}
h2{font-size:clamp(26px,4vw,46px);line-height:1.08;letter-spacing:-.025em;font-weight:600;margin-bottom:18px}
h3{font-size:20px;line-height:1.25;margin-bottom:10px;font-weight:600}
.lead{max-width:66ch;color:var(--soft);font-size:clamp(17px,2vw,21px);line-height:1.65}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);gap:36px;align-items:end}
.drawing{width:100%;height:auto;margin:0;border:1px solid var(--ink);background:rgba(231,235,236,.78);padding:18px}
.drawing svg{display:block;width:100%;height:auto}
.drawing figcaption{padding-top:12px;border-top:1px solid var(--grid-strong);font:10px var(--mono);color:var(--soft)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.button{display:inline-flex;align-items:center;min-height:46px;padding:10px 18px;border:1px solid var(--ink);font-size:14px;font-weight:500;text-decoration:none}
.button.primary{background:var(--red);border-color:var(--red);color:white}
.button:hover{border-color:var(--red);color:var(--red)}
.button.primary:hover{background:#c82d18;color:white}
.notice{margin:24px 0 0;padding:16px 18px;border-left:3px solid var(--red);background:rgba(240,242,242,.82);color:var(--soft)}
.notice strong{color:var(--ink)}
.section{padding:72px 0;border-top:1px solid var(--grid-strong)}
.section-intro{max-width:65ch;color:var(--soft)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}
.card{padding:22px;border:1px solid var(--grid-strong);background:rgba(240,242,242,.62)}
.card .label{display:block;color:var(--red);margin-bottom:18px}
.card p:last-child{margin-bottom:0}
.card p,.copy{color:var(--soft)}
.specs{width:100%;border-collapse:collapse;margin-top:24px;font-size:14px}
.specs th,.specs td{text-align:left;vertical-align:top;padding:13px 12px;border-bottom:1px solid var(--grid-strong)}
.specs th{font:10px var(--mono);letter-spacing:.04em;color:var(--soft);width:28%}
.list{padding-left:1.2em;color:var(--soft)}
.list li{padding:4px 0}
.flow{counter-reset:step;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}
.flow article{border-top:1px solid var(--ink);padding-top:14px}
.flow article:before{counter-increment:step;content:"0" counter(step);display:block;margin-bottom:22px;font:13px var(--mono);color:var(--red)}
.faq-list{margin-top:26px;border-top:1px solid var(--ink)}
details{border-bottom:1px solid var(--grid-strong);padding:18px 0}
summary{cursor:pointer;font-weight:600}
details p{max-width:72ch;margin:12px 0 0;color:var(--soft)}
.page-head{padding:74px 0 46px}
.page-head h1{font-size:clamp(42px,7vw,76px);max-width:18ch}
.page-body{max-width:850px;padding-bottom:80px}
.page-body .section{padding:42px 0}
.banner{padding:18px 20px;background:var(--ink);color:var(--paper);margin:26px 0}
.banner strong{color:white}
.banner a{color:white}
.price-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:28px 0}
.price-grid.single{grid-template-columns:minmax(0,440px)}
.price{padding:24px;border:1px solid var(--ink);background:rgba(240,242,242,.65)}
.price .amount{font-size:clamp(34px,5vw,54px);font-weight:600;line-height:1.1;margin:12px 0}
.price .meta{color:var(--soft)}
@media(max-width:800px){.hero-grid{grid-template-columns:1fr}.drawing{max-width:540px}.cards,.flow{grid-template-columns:1fr 1fr}}
@media(max-width:560px){:root{--page:calc(100% - 32px)}.hero{padding:70px 0 52px;min-height:0}.cards,.flow,.price-grid{grid-template-columns:1fr}.section{padding:52px 0}.page-head{padding:54px 0 28px}.specs th,.specs td{padding:10px 7px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}