/* product samples; notes: NOTES-products.md */
.p-hero{padding:calc(var(--hdr) + clamp(28px,6vw,72px)) 0 clamp(24px,5vw,56px)}
.p-hero h1{font-size:clamp(2rem,7vw,3.6rem);max-width:15em}
.p-hero .lead{font-size:clamp(1.05rem,2.8vw,1.25rem);color:var(--ink-2);max-width:34em}
.steps3,.legend{padding:0;list-style:none}
.legend{display:grid;gap:12px;margin-top:22px;counter-reset:lg;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.legend li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-2)}
.legend li::before{counter-increment:lg;content:counter(lg);flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--brand-soft);color:var(--brand-strong);font:700 .95rem/1 var(--font-display)}
.legend b{display:block;color:var(--ink);font-family:var(--font-display)}
.todo{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:#2a2108;color:#fde68a;vertical-align:middle}
.price{font:600 1.1rem/1.2 var(--font-display);color:var(--brand-strong)}
.wm{font:700 1.7rem/1.1 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.pbx{font-size:clamp(2.6rem,10vw,4.4rem);color:#fff}
.wm-s{font-weight:600;color:var(--ink)}
.logo-img{display:inline-block;height:1.2em;width:auto;margin-right:.35em;vertical-align:-.28em;border-radius:22%;background:#fff}
.logo-img.wide{height:2em;margin:0;border-radius:6px;vertical-align:middle}
.chip .logo-img{height:1.6em}.pbx .logo-img{height:.9em}
.photos{display:grid;gap:14px}
@media (min-width:720px){.photos{grid-template-columns:repeat(3,1fr)}.photos.two{grid-template-columns:1.4fr 1fr}}
.photo{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#05060a}
.photo>picture img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
@media (min-width:720px){.span2{grid-column:span 2}}
.photo.pad{display:grid;place-items:center;padding:48px 16px 76px;background:radial-gradient(120% 90% at 50% 0%,#101327,#05060a 70%)}
.photo .phone{width:min(200px,56vw)}
.photo .hud{left:58px}
.photo .who{font-size:1.1rem}
.phone .snap{margin-top:22px;border-radius:14px;height:auto}
.cloudmark{width:min(300px,80%)}
.laptop{width:100%}
.photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.85));color:#fff;font-size:.9rem}
.photo figcaption b{display:block;font:600 1.05rem/1.2 var(--font-display)}
.pnum{position:absolute;top:12px;left:12px;z-index:1;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fde68a;color:#1d1606;font:700 1.1rem/1 var(--font-display);box-shadow:0 2px 10px rgba(0,0,0,.5)}
.photo>picture .cut{position:absolute;right:10px;top:10px;width:38%;height:auto;aspect-ratio:auto;object-fit:contain;border-radius:14px;background:rgba(255,255,255,.92);padding:8px}

.sbox{position:relative}
.sbox .ov{position:absolute;inset:0;width:100%;height:100%}
.sbox img{width:100%;height:auto}
.photo.wide figcaption{position:static;background:none;padding:12px 16px}