/* Moved out of research/gen-machine-page.mjs (PP_CSS) on 2026-09-14 so pages share one cached file instead of repeating it inline. */
/* product page v2 — Dennis's 8/25 mockups. Shares mp-kick / mp-cards with the older layout. */
.pp .crumb{margin:0 0 10px}
.pp-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center;padding:28px 0 8px}
.pp-hero--big{grid-template-columns:.9fr 1.1fr}
.pp-hero h1{font-family:var(--display);text-transform:uppercase;font-size:clamp(2rem,4vw,3.2rem);line-height:1;margin:6px 0 0}
.pp-lead{color:#dfe5ef;font-size:1.05rem;margin:14px 0 6px;max-width:48ch}
.pp-tiles{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pp-tiles li{border:1px solid rgba(53,64,127,.55);border-radius:6px;padding:8px 12px;font-family:var(--display);text-transform:uppercase;font-size:.68rem;letter-spacing:.06em;color:var(--text);background:var(--panel)}
.pp-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}
.pp-cta .btn-coin{text-decoration:none;display:inline-block;margin:0;flex-basis:100%;width:max-content}
.pp-from{font-family:var(--display);font-size:.95rem;letter-spacing:.04em;color:var(--amber)}
.pp-more{color:var(--blue-lit);text-decoration:none;font-family:var(--display);text-transform:uppercase;font-size:.76rem;letter-spacing:.06em}
.pp-dims{color:var(--muted);font-family:var(--display);text-transform:uppercase;font-size:.72rem;letter-spacing:.1em;margin:14px 0 0}
.crumb a{text-decoration:underline}
.pp-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pp-hero-photo img,.pp-hero-photo video{width:100%;height:auto;max-height:560px;object-fit:contain;display:block;background:radial-gradient(ellipse at 50% 80%,#141a2e,#0d0f18);border-radius:10px}
.pp-hero-photo--wide img,.pp-hero-photo--wide video{max-height:none;object-fit:cover;background:none;box-shadow:0 22px 55px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.07)}
.pp-sec{margin:38px 0 0;padding-top:30px;border-top:1px solid rgba(53,64,127,.3)}
.pp-sec h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.4rem,2.6vw,1.9rem);margin:0 0 10px}
.pp-sec>p,.pp-split>div>p{color:#dfe5ef;max-width:64ch;margin:0 0 4px}
.pp-sec .btn-ghost,.pp-sec .pp-more{display:inline-block;margin-top:16px;text-decoration:none}
.pp-note{color:var(--muted);font-size:.85rem;margin:12px 0 0}
.pp-split{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.pp-featured{grid-template-columns:.9fr 1.1fr}
.pp-photo{display:block;position:relative;border-radius:10px;overflow:hidden;border:1px solid rgba(41,169,228,.3);text-decoration:none;color:var(--text)}
.pp-photo--room{margin-top:14px}
.pp-photo img{width:100%;aspect-ratio:var(--photo-aspect,4/3);object-fit:cover;object-position:center 25%;display:block}
.pp-photo span{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;background:linear-gradient(180deg,rgba(6,8,13,0),rgba(6,8,13,.9) 60%);font-family:var(--display);text-transform:uppercase;font-size:.72rem;letter-spacing:.06em}
.pp-specs{margin-top:14px;border:1px solid rgba(53,64,127,.5);border-radius:10px;padding:12px 16px;background:var(--panel)}
.pp-specs summary{cursor:pointer;font-family:var(--display);text-transform:uppercase;font-size:.78rem;letter-spacing:.08em;color:var(--blue-lit)}
.pp-specs ul{margin:12px 0 0 1.1rem;color:#C8CEE0;line-height:1.7}.pp-specs .m-spec-opt{color:var(--muted);margin:10px 0 0}
.pp-space-wrap{display:grid;grid-template-columns:minmax(220px,380px) 1fr;gap:24px;align-items:center;margin:8px 0 14px}
.pp-space-wrap--photo{grid-template-columns:1.5fr .9fr}
.pp-space-wrap--photo>*{min-width:0}
.pp-space-wrap--photo .pp-space-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.pp-diagram{width:100%;height:auto;display:block}.pp-diagram rect{fill:rgba(0,136,201,.08);stroke:var(--blue-lit);stroke-width:1.5}.pp-diagram line{stroke:var(--muted);stroke-width:1}.pp-diagram text{fill:var(--muted);font-family:var(--display);font-size:9px;text-transform:uppercase;letter-spacing:.08em}
.pp-space-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pp-dim{border:1px solid rgba(53,64,127,.5);border-radius:8px;padding:12px;text-align:center;background:var(--panel)}
.pp-dim b{display:block;font-family:var(--display);font-size:1.3rem;color:#fff}.pp-dim span{display:block;color:var(--blue-lit);font-family:var(--display);text-transform:uppercase;font-size:.62rem;letter-spacing:.1em;margin-top:2px}
.pp-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:720px}
.pp-opt{border:1px solid rgba(53,64,127,.5);border-radius:10px;padding:18px;background:var(--panel)}.pp-opt.this{border-color:rgba(41,169,228,.55)}
.pp-opt b{display:block;font-family:var(--display);text-transform:uppercase;font-size:1rem}.pp-opt ul{margin:8px 0 12px 1.1rem;color:#C8CEE0;line-height:1.6}
.pp-opt .pp-from{display:block;margin:0 0 4px}.pp-opt .btn-coin,.pp-opt .btn-ghost{text-decoration:none;display:inline-block;margin:8px 0 0}
.pp-steps,.pp-stripcards{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.pp-stripcards{grid-template-columns:repeat(var(--strip-cols,3),minmax(0,1fr))}
/* imgOnly (sheet row 180): the supplied card is the whole tile - its own border, its own wording. */
.pp-stripcards--img li{border:0;background:none;padding:0}
.pp-stripcards--img li img{width:100%;height:auto;aspect-ratio:var(--strip-img-aspect,5/2);object-fit:contain;margin:0;border-radius:10px}
.pp-steps li,.pp-stripcards li{border:1px solid rgba(53,64,127,.5);border-radius:10px;padding:16px;background:var(--panel)}
.pp-stripcards img{width:calc(100% + 32px);margin:-16px -16px 12px;aspect-ratio:var(--strip-img-aspect,4/3);object-fit:cover;display:block;border-radius:10px 10px 0 0}
.pp-steps i,.pp-stripcards i{display:block;font-style:normal;font-family:var(--display);color:var(--blue-lit);font-size:.9rem;margin-bottom:6px}.pp-steps b,.pp-stripcards b{display:block;font-family:var(--display);text-transform:uppercase;font-size:.9rem;margin-bottom:6px}.pp-steps span,.pp-stripcards span{color:#C8CEE0;font-size:.92rem;line-height:1.5}
.pp-faq details{border-top:1px solid rgba(53,64,127,.35);padding:12px 0}.pp-faq summary{cursor:pointer;font-family:var(--display);text-transform:uppercase;font-size:.9rem;letter-spacing:.02em}.pp-faq p{color:#C8CEE0;margin:10px 0 0;max-width:70ch;line-height:1.6}
.pp-close{margin:42px 0 0;padding:34px 28px;border:1px solid rgba(41,169,228,.32);border-radius:10px;background:linear-gradient(90deg,rgba(0,136,201,.1),transparent)}
.pp-close h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.5rem,3vw,2.1rem);margin:0 0 8px}.pp-close p{color:#dfe5ef;margin:0}
@media(max-width:1100px){.pp-steps{grid-template-columns:1fr 1fr}}
@media(max-width:960px){.pp-hero,.pp-split,.pp-featured,.pp-space-wrap{grid-template-columns:1fr}.pp-hero-photo{order:-1}.pp-stripcards{grid-template-columns:1fr}.pp-space-grid{grid-template-columns:repeat(2,1fr)}.pp-compare{grid-template-columns:1fr}.pp-cta .btn-coin{width:100%}}