/* Product pages: same identity as the home (night cloth, Space Grotesk + JetBrains Mono, maroon accent) */
body.pg{background:var(--cloth);color:var(--snow)}
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2;background:var(--img) center/cover no-repeat;filter:grayscale(1) contrast(1.06) brightness(.7);transform:scale(1.12);animation:hz 2.4s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes hz{to{transform:scale(1)}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0b0c0d80 0%,#0b0c0d33 35%,var(--cloth) 100%)}
.hero-in{width:100%;max-width:1500px;margin:0 auto;padding:0 var(--gx) clamp(40px,8svh,90px)}
.back{display:inline-block;color:#d9dcde;margin-bottom:clamp(30px,8svh,80px);transition:transform .3s}
.back:hover{transform:translateX(-4px)}
.hero .tag{display:flex;align-items:center;gap:10px;color:#d9dcde}
.hero .tag::before{content:"";width:26px;height:6px;background:var(--maroon)}
.hero h1{margin:12px 0 0;font-weight:500;font-size:clamp(40px,7.4vw,124px);line-height:.96;letter-spacing:-.05em;max-width:12ch;text-wrap:balance}
.hero .sb{margin:18px 0 0;font-size:clamp(18px,1.9vw,30px);line-height:1.2;letter-spacing:-.025em;max-width:30ch}
.body{max-width:1500px;margin:0 auto;padding:clamp(50px,8vw,110px) var(--gx) 40px}
.cols{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(30px,6vw,100px);margin-bottom:clamp(60px,8vw,110px)}
.lab{display:block;color:var(--dim);margin-bottom:18px}
.lab::before{content:"";display:inline-block;width:6px;height:6px;background:var(--maroon);margin-right:10px}
.lead{margin:0;font-size:clamp(20px,2.1vw,34px);line-height:1.3;letter-spacing:-.025em;font-weight:500}
.specs{margin:0}
.specs div{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-top:1px solid var(--night-line)}
.specs div:last-child{border-bottom:1px solid var(--night-line)}
.specs dt{color:var(--dim)}.specs dd{margin:0;text-align:right}
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--gx);margin-bottom:clamp(60px,8vw,110px)}
.ft{background:#ffffff0a;border:1px solid var(--night-line);border-radius:0;padding:24px;transition:background .4s,transform .5s cubic-bezier(.2,.8,.2,1)}
.ft:hover{background:#ffffff14;transform:translateY(-4px)}
.ft .n{color:var(--maroon)}
.ft h3{margin:36px 0 8px;font-weight:500;font-size:clamp(18px,1.5vw,23px);letter-spacing:-.02em;line-height:1.15}
.ft p{margin:0;color:#aeb2b6;font-size:14px}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:clamp(60px,8vw,110px)}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:var(--gx)}
.pn a{display:block;padding:24px 0;border-top:1px solid var(--night-line);font-size:clamp(20px,2.4vw,36px);letter-spacing:-.03em;font-weight:500;transition:opacity .3s}
.pn a:hover{opacity:.7}
.pn .mono{display:block;color:var(--dim);margin-bottom:8px;font-size:11px;letter-spacing:.14em}
.rv{transition-delay:var(--d,0s)}
@media(max-width:900px){.cols{grid-template-columns:1fr}}
@media(max-width:560px){.pn{grid-template-columns:1fr}.pn a:last-child{text-align:left!important}}
@media(prefers-reduced-motion:reduce){.hero-bg{animation:none;transform:none}}

/* Extra pages */
.hero.short{min-height:72svh}
.ln{border-bottom:1px solid #ffffff40;transition:border-color .2s}.ln:hover{border-color:var(--maroon)}
.tline{list-style:none;margin:0 0 clamp(60px,8vw,110px);padding:0}
.tline li{display:grid;grid-template-columns:clamp(70px,10vw,160px) 1fr;gap:20px;padding:26px 0;border-top:1px solid var(--night-line)}
.tline li:last-child{border-bottom:1px solid var(--night-line)}
.tline .y{color:var(--maroon);padding-top:6px}
.tline h3{margin:0 0 6px;font-weight:500;font-size:clamp(20px,2vw,32px);letter-spacing:-.03em;line-height:1.1}
.tline p{margin:0;color:#aeb2b6;max-width:60ch}
.form{display:grid;gap:18px;align-content:start}
.form label{display:grid;gap:8px}
.form label>.mono{color:var(--dim)}
.form input,.form select,.form textarea{width:100%;background:#ffffff0a;border:1px solid var(--night-line);border-radius:0;color:var(--snow);font:inherit;font-size:16px;padding:14px 16px;outline:none;transition:border-color .25s,background .25s}
.form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#9b9fa4 50%),linear-gradient(135deg,#9b9fa4 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.form select option{color:#000}
.form textarea{resize:vertical;min-height:140px}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--maroon);background:#ffffff12}
.form .invalid{border-color:var(--maroon-hi)}
.form .btn{justify-self:start}
.form .fine{margin:0;color:var(--dim);font-size:13px}
.empty{padding:clamp(28px,4vw,64px);border:1px solid var(--night-line);background:#ffffff0a;margin-bottom:clamp(60px,8vw,110px)}
.empty h2{margin:0;font-weight:500;font-size:clamp(28px,4vw,64px);line-height:1;letter-spacing:-.045em;max-width:16ch;text-wrap:balance}
.empty p{margin:22px 0 0;color:#cfd2d5;font-size:clamp(16px,1.4vw,21px);max-width:56ch;line-height:1.5}
.lg2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gx);margin-bottom:var(--gx)}
.lgp{display:flex;align-items:center;gap:18px;justify-content:center;min-height:clamp(200px,24vw,340px);border:1px solid var(--night-line)}
.lgp img{width:clamp(44px,5vw,72px);height:auto}
.lgp b{font-weight:600;letter-spacing:.26em;font-size:clamp(18px,2.2vw,32px)}
.lgp.dark{background:var(--night)}
.lgp.light{background:var(--white);color:var(--ink);border-color:var(--white)}
.lgp.light img{filter:invert(1)}
.rules{list-style:none;margin:0;padding:0}
.rules li{display:flex;gap:18px;padding:14px 0;border-top:1px solid var(--night-line);color:#cfd2d5}
.rules li:last-child{border-bottom:1px solid var(--night-line)}
.rules .mono{flex:none;width:56px}.rules .ok{color:#fff}.rules .no{color:var(--maroon-hi)}
.sws{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--gx);margin-bottom:clamp(60px,8vw,110px)}
.sw{display:flex;flex-direction:column;justify-content:space-between;min-height:clamp(150px,15vw,240px);padding:18px;border:1px solid var(--night-line)}
.sw b{font-weight:500;font-size:clamp(18px,1.6vw,26px);letter-spacing:-.02em}
.type{display:grid;grid-template-columns:1fr 1fr;gap:var(--gx)}
.type>div{padding:clamp(20px,2.4vw,36px);border:1px solid var(--night-line)}
.type .mono{color:var(--dim)}
.spec1{margin:30px 0 0;font-weight:500;font-size:clamp(34px,4.6vw,76px);letter-spacing:-.045em;line-height:1}
.spec2{margin:14px 0 0;color:#aeb2b6;font-size:clamp(16px,1.4vw,22px)}
.spec1.m,.spec2.m{font-family:var(--f-m);letter-spacing:-.04em}
.legal{display:grid;grid-template-columns:minmax(220px,.5fr) 1.5fr;gap:clamp(30px,6vw,100px);align-items:start}
.toc{position:sticky;top:96px;display:flex;flex-direction:column}
.toc a{display:flex;gap:14px;padding:11px 0;border-top:1px solid var(--night-line);color:#aeb2b6;font-size:15px;transition:color .2s,padding .3s}
.toc a:hover{color:#fff;padding-left:6px}
.toc a .mono{color:var(--maroon);flex:none}
.prose section{padding:0 0 clamp(30px,4vw,56px);scroll-margin-top:100px}
.prose h2{display:flex;gap:16px;align-items:baseline;margin:0 0 14px;font-weight:500;font-size:clamp(22px,2.3vw,36px);letter-spacing:-.03em;line-height:1.1}
.prose h2 .mono{color:var(--maroon);flex:none}
.prose p{margin:0;color:#cfd2d5;font-size:clamp(16px,1.25vw,19px);line-height:1.65;max-width:68ch}
@media(max-width:900px){.lg2,.type,.legal{grid-template-columns:1fr}.toc{position:static}}
