/* Theme E: Product showcase. Headline + hero visual, then a stepped explanation. */
html.t-product{--radius:4px;--ink:var(--text);--paper:var(--bg)}
.t-product .site-head{position:sticky;top:0;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
.t-product.is-preview .site-head{top:2.2rem}
.t-product .head-cta{border:0;background:var(--text);color:var(--bg);padding:.5rem .9rem;border-radius:var(--radius);font-weight:600}
.t-product .hero-product{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,5rem);align-items:center;padding:clamp(3rem,7vw,6rem) var(--pad) clamp(3rem,6vw,5rem);max-width:90rem;margin:0 auto}
.t-product .title{font-size:clamp(2.4rem,5.2vw,4.6rem);font-weight:800;letter-spacing:-.03em;line-height:1;font-stretch:88%}
.t-product .lede{margin-top:1.4rem;color:color-mix(in srgb,var(--text) 78%,var(--bg));font-size:clamp(1.05rem,1.4vw,1.2rem)}
.t-product .status{margin-top:1.5rem;font-size:.875rem}
.t-product .showcase{margin:0}
.t-product .stage{position:relative;aspect-ratio:5/4;background:var(--surface);border:1px solid color-mix(in srgb,var(--text) 12%,transparent);border-radius:var(--radius);overflow:hidden}
.t-product .stage canvas.fx{z-index:0}
.t-product .caption{margin-top:.75rem;font-size:.8125rem;color:var(--muted);min-height:1.3em}
.t-product .how{max-width:90rem;margin:0 auto;border-top:1px solid color-mix(in srgb,var(--text) 12%,transparent)}
.t-product .how h2{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:800;letter-spacing:-.02em}
.t-product .steps{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:clamp(1.5rem,3vw,3rem);counter-reset:step}
.t-product .step{counter-increment:step;padding-top:1.25rem;border-top:3px solid var(--text)}
.t-product .step::before{content:counter(step);display:block;font:800 clamp(2.4rem,4vw,3.4rem)/1 var(--f-display);font-stretch:70%;color:var(--accent);margin-bottom:.9rem}
.t-product .step h3{font-size:1.25rem;font-weight:700;margin-bottom:.5rem}
.t-product .step p{color:color-mix(in srgb,var(--text) 78%,var(--bg))}
.t-product .connect{background:var(--ink);--text:var(--paper);--surface:color-mix(in srgb,var(--ink) 80%,#fff);--muted:color-mix(in srgb,var(--paper) 62%,var(--ink));color:var(--text)}
.t-product .connect .btn-primary{color:var(--on-accent)}
.t-product .connect .connect-inner{max-width:40rem}
@media (max-width:860px){.t-product .hero-product{grid-template-columns:1fr}}
.t-product .features .step::before{content:none}
.t-product .features .step{border-top-color:var(--accent)}