:root{--pad:clamp(20px,6vw,110px);--ink:#191e24;--paper:#e6e8e9;--steel:linear-gradient(125deg,#626e7c 0%,#fafbfc 24%,#a6afb9 42%,#e5e9ec 50%,#848f9b 72%,#f4f7fa 99%)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 Inter,"Segoe UI",Arial,sans-serif}
a{color:inherit;text-decoration:none}
header,footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 var(--pad);min-height:76px}
header{background:linear-gradient(108deg,#b3bbc2,#f0f2f4 35%,#cbd1d6 66%,#e2e5e8);border-bottom:1px solid #8f9ba4}
.brand{font:650 clamp(22px,2.1vw,34px)/1 Arial,sans-serif;letter-spacing:-.085em;display:flex;align-items:center;gap:10px;white-space:nowrap}
.brand i{width:28px;height:22px;transform:skewX(-21deg);background:repeating-linear-gradient(90deg,currentColor 0 5px,transparent 5px 9px)}
nav{display:flex;gap:clamp(15px,2.8vw,40px);font-size:14px} nav a:hover,footer>a:last-child:hover{text-decoration:underline;text-underline-offset:5px}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{line-height:1;font-weight:550;letter-spacing:-.06em}
.hero{position:relative;isolation:isolate;min-height:520px;height:clamp(520px,75svh,840px);display:flex;align-items:center;padding:50px var(--pad);color:#f5f7fa;background:#14171b}
.wheel,.hero:after{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.wheel{object-fit:cover;object-position:70% 56%;filter:grayscale(1)}
.hero:after{content:"";z-index:-1;background:linear-gradient(90deg,#101419f5 3%,#101419de 27%,#10141944 57%,transparent 78%)}
h1{font-size:clamp(68px,7.8vw,130px);line-height:.93}
h1 em{font-family:Georgia,serif;font-weight:400;font-size:1.26em;background:var(--steel);color:transparent;background-clip:text}
.intro>p{max-width:35ch;font-size:clamp(17px,1.45vw,22px);line-height:1.4;margin:24px 0}
.buy{display:flex;gap:18px;align-items:center}
.button{display:inline-flex;align-items:center;gap:24px;padding:13px 19px;color:#151a20;background:linear-gradient(115deg,#f7f8f9,#d5dbe1);border:1px solid #f1f4f6;font-weight:600}.button:hover{background:white}
.credit{position:absolute;bottom:12px;right:var(--pad);background:#171c20ce;color:#eee;padding:2px 8px;font-size:11px}
.inset{padding:clamp(42px,6vw,100px) var(--pad)}
h2{font-size:clamp(40px,4.7vw,82px);line-height:.99}
h2 em{font-family:Georgia,serif;font-weight:400}
h3{font-size:clamp(23px,2.1vw,34px)}
.application,.formats,.process,.finish{display:grid;gap:clamp(26px,5vw,85px);align-items:start}
.application,.process,.formats{grid-template-columns:.85fr 1.25fr}
.uses{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.uses p,.steps p,.finish p,.formats p{margin-top:12px;max-width:48ch}
.finish{grid-template-columns:1.2fr .8fr;align-items:center;background:#cdd2d6}
figure img{display:block;width:100%;height:auto}
figcaption{font:12px/1.5 Consolas,monospace;margin-top:7px}
.finish p{font-size:clamp(16px,1.25vw,20px);margin-top:20px}
.process{background:#22282e;color:#ecf1f5}

.steps p{color:#ced3da}
.formats{background:linear-gradient(106deg,#b5bfc8,#eef1f4 43%,#c6cdd4 85%,#dce1e6)}
.prices>div{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #82909a;padding:14px 0}
.prices h3{font-size:clamp(48px,4.8vw,78px);font-weight:450}
.prices h3 small{font-size:.45em}
.prices div p{margin:0;text-align:right}
.prices b,.prices p small{display:block}
.prices b{font-weight:500;font-size:clamp(24px,2.2vw,38px);letter-spacing:-.04em}
.prices>p{border-top:1px solid #82909a;padding-top:16px;max-width:none}
footer{background:#171d22;color:#edf1f5}
a:focus-visible{outline:3px solid #438bca;outline-offset:4px}
@media(max-width:760px){
header,footer{min-height:62px}nav{font-size:13px}nav a:first-child{display:none}
.hero{height:clamp(520px,76svh,700px);min-height:520px;align-items:flex-end;padding-bottom:48px}
.wheel{height:78%;object-position:68% 25%}
.hero:after{background:linear-gradient(0deg,#14171b 23%,#14171be8 38%,#14171b24 66%,transparent)}
h1{font-size:clamp(52px,10vw,78px)}h1 em{font-size:1.22em}
.intro>p{margin:15px 0 20px}
.application,.finish,.formats,.process{grid-template-columns:1fr}
.uses{gap:22px}.uses p{font-size:15px}
.buy{gap:14px}.button{gap:16px}.finish h2 br{display:none}
}
@media(max-width:480px){.uses{grid-template-columns:1fr}.uses article{border-top:1px solid #a7b0b8;padding-top:15px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.material-copy,.process-note{margin-top:20px;max-width:36ch}
.process-note{color:#ced3da}
.steps{margin:0;padding:0;list-style:none;counter-reset:stage}
.steps li{position:relative;counter-increment:stage;border-top:1px solid #626b75;padding:20px 0 24px 42px}
.steps li::before{content:counter(stage,decimal-leading-zero);position:absolute;top:22px;left:0;color:#b2c0ca;font:14px/1.3 Consolas,monospace}
.steps details{margin-top:14px}
.steps summary{cursor:pointer;width:fit-content;text-decoration:underline;text-underline-offset:4px;font-size:15px}
.steps summary:focus-visible{outline:2px solid #a8cff4;outline-offset:4px}
.steps details p{font-size:15px}nav{align-items:center}
button,input{font:inherit}
button{cursor:pointer;color:inherit}
button:focus-visible,input:focus-visible{outline:3px solid #438bca;outline-offset:3px}
.cart-link,.cart-head button,.line button{background:transparent;border:1px solid #84909a;padding:6px 10px}
#product fieldset{border:0;padding:0;margin:0}
#product legend{margin-bottom:12px}
.variant{display:flex;align-items:center;gap:10px;border:1px solid #8d969e;padding:15px;margin:6px 0;cursor:pointer}
.variant:has(input:checked){background:#eef1f4;border-color:#242b32}
.variant span{margin-left:auto}
.action{background:#20262b;color:white;border:0;padding:13px 18px;font-weight:600}
.purchase,.cart-head,.line,.total{display:flex;align-items:center;justify-content:space-between;gap:10px}
.purchase{flex-wrap:wrap;margin-top:18px}
#quantity{width:65px;padding:6px}
#cart{border:0;color:#20262b;background:#eff1f2;padding:clamp(18px,4vw,38px);width:min(520px,96vw);max-height:90svh}
#cart::backdrop{background:#0b1119ae}
.cart-head{margin-bottom:20px}
.cart-head h2{font-size:36px}
.cart-extras{margin-top:22px;padding-top:16px;border-top:1px solid #b2bac0}
.cart-extras p{font-size:14px;margin-bottom:10px}
.cart-extras>div{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cart-extras button{background:#e0e5e9;border:1px solid #929ea8;padding:12px;text-align:left;font-weight:600;min-height:68px}
.cart-extras button span{display:block;font-size:13px;font-weight:400;margin-top:3px}
.cart-extras button:hover{background:white}
.cart-extras button:disabled{opacity:.5;cursor:default}
#cart-feedback{font-size:13px;color:#425261;margin-top:8px}
.line{display:grid;grid-template-columns:64px 112px minmax(0,1fr);gap:8px 12px;padding:15px 0;border-bottom:1px solid #b2bac0}
.line>strong{grid-column:1;grid-row:1;white-space:nowrap}
.line div{grid-column:2;grid-row:1;display:grid;grid-template-columns:36px 40px 36px;align-items:center;text-align:center;font-variant-numeric:tabular-nums}
.line button{min-height:36px}
.line div button{width:36px;padding:0;display:grid;place-items:center}
.line>b{grid-column:3;grid-row:1;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:15px}
.line>button[data-change="remove"]{grid-column:3;grid-row:2;justify-self:end;border:0;padding:0;min-height:32px;font-size:13px;text-decoration:underline;text-underline-offset:3px}
@media(max-width:480px){
  .line{grid-template-columns:minmax(0,1fr) 112px;gap:8px 12px}
  .line>b{grid-column:1;grid-row:2;text-align:left}
  .line>button[data-change="remove"]{grid-column:2;grid-row:2}
}
.total{font-size:21px;margin:18px 0 0}
#checkout,#order{margin-top:18px}
#order label{display:grid;gap:4px;margin:12px 0}
#order input{width:100%;min-width:0;padding:10px;border:1px solid #929aa1}
#feedback:not(:empty){margin-top:16px}
@media(max-width:760px){header nav a{display:none}.cart-link{font-size:14px}}
#order fieldset{margin:18px 0;padding:0;border:0}
#order legend{font-size:20px;font-weight:600}
#pay-link:not([hidden]){display:inline-block;margin-top:12px}
#order button:disabled{opacity:.55;cursor:default}
.checkout-page{max-width:1100px;margin:auto;padding:clamp(28px,6vw,80px) var(--pad)}
.checkout-page h1{font-size:clamp(38px,6vw,78px);margin-bottom:32px}
#checkout-layout:not([hidden]){display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,5vw,72px);align-items:start}
#checkout-layout aside{grid-column:2;grid-row:1;background:#d5dbe0;padding:24px}
#checkout-layout aside h2{font-size:28px;margin-bottom:16px}
#checkout-layout aside p{margin-block:10px}
#checkout-layout #order{grid-row:1;grid-column:1;margin:0}
#order .carrier label{display:flex;align-items:center;gap:12px;border:1px solid #969fa6;padding:12px;cursor:pointer}
#order .carrier input{width:auto}
#order .carrier label:has(:checked){background:#fff;border-color:#333}
#checkout{display:inline-block;margin-top:16px}
#empty a{text-decoration:underline}
@media(max-width:700px){#checkout-layout:not([hidden]){display:flex;flex-direction:column}#checkout-layout>*{width:100%}}

/* Purchase stays close to the product, with a compact mobile continuation. */
body:has(.hero-product) header{position:sticky;top:0;z-index:10}
#product{scroll-margin-top:100px}
.hero:has(.hero-product){height:auto;min-height:min(780px,calc(100svh - 76px))}
.hero-product{max-width:460px;margin-top:26px}
.hero-product legend{font-size:14px;color:#cad2da}
.hero-product .variant{background:#171d24c9;border-color:#65717e;padding:12px 15px;margin:0}
.hero-product fieldset{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hero-product .variant{display:grid;grid-template-columns:auto 1fr;gap:4px 8px}
.hero-product .variant input{grid-row:span 2;accent-color:#20262b}
.hero-product .variant span{grid-column:2;margin:0;font-size:14px;color:#c9d2dc}
.hero-product .variant:has(input:checked){color:#151a20;background:var(--steel);border-color:#f0f4f8}
.hero-product .variant:has(input:checked) span{color:#313b46}
.hero-product .purchase{gap:14px;margin-top:14px;flex-wrap:nowrap}
.hero-product .purchase label{font-size:12px;color:#c9d2dc}
.hero-product #quantity{display:block;width:66px;background:#222a33;border:1px solid #65717e;color:white;padding:7px;margin-top:4px}
.hero-product .action{flex:1;min-height:52px;background:#edf1f5;color:#151a20}
.quick-buy{display:none}
@media(max-width:760px){
  body:has(.hero-product){padding-bottom:calc(88px + env(safe-area-inset-bottom))}
  .hero:has(.hero-product){min-height:0;padding-top:160px;padding-bottom:38px}
  .hero-product{max-width:100%;margin-top:22px}
  .intro{width:100%}
  .hero-product .variant{padding:10px}
  .credit{bottom:6px}
  .quick-buy{position:fixed;bottom:0;left:0;right:0;z-index:12;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));background:#e6e8e9fa;border-top:1px solid #8c98a3;box-shadow:0 -8px 28px #10141918;visibility:hidden;pointer-events:none}
  .show-quick-buy .quick-buy{visibility:visible;pointer-events:auto}
  .quick-buy label{font-size:11px;color:#4b5661}
  .quick-buy select{font:inherit;font-size:14px;font-weight:600;min-width:0;width:100%;color:#191e24;background:transparent;border:0;padding:3px 18px 3px 0;grid-column:1;min-height:32px}
  .quick-buy button{grid-column:2;grid-row:1 / 3;padding:12px 16px;align-self:center;min-height:48px}
  .quick-buy select:focus-visible{outline:3px solid #438bca;outline-offset:2px}
}