/* Product pages (product.html). */

.pp-hero { padding: clamp(28px, 5vw, 64px) 0 clamp(40px, 6vw, 80px); }
.pp-hero-grid { display: grid; gap: clamp(28px, 5vw, 56px); align-items: center; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 18px; font-size: .95rem; }
.crumbs a { color: #fff; text-underline-offset: 4px; }
.pp-hero h1 { font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.02; letter-spacing: -0.01em; max-width: none; }
.pp-tagline { margin: .9rem 0 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.3rem, 2.6vw, 1.8rem); line-height: 1.15; color: var(--sun); }
.pp-desc { margin: 1.1rem 0 0; font-size: 1.1rem; max-width: 36em; text-align: justify; text-align-last: left; hyphens: auto; hyphenate-limit-chars: 12 4 4; }
.pp-badges { margin: 1.4rem 0 0; }
.pp-hero .badge { border-color: #fff; color: #fff; }
.pp-hero .badge-trial { background: var(--sun); border-color: var(--sun); color: #0B1636; }
.pp-hero .badge-fill { background: #fff; color: var(--hero); }
.pp-stack { margin: 1.4rem 0 0; }
.pp-hero .stack li { background: rgba(255, 255, 255, .14); color: #fff; }
.pp-visual { display: grid; place-items: center; min-height: 220px; border-radius: var(--r-lg); background: var(--plate, #0A1B4D); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); padding: 36px; }
.pp-visual img { width: clamp(110px, 22vw, 160px); height: auto; border-radius: 28px; }
.pp-visual img.pad { padding: 14px; }
.pp-mono { font-family: var(--display); font-weight: 700; font-size: 5rem; color: #fff; line-height: 1; }
.pp-visual.has-video { display: block; padding: 0; min-height: 0; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.pp-visual iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (min-width: 900px) { .pp-hero-grid { grid-template-columns: 1.5fr 1fr; } .pp-hero-grid.has-video { grid-template-columns: 1fr 1fr; } }

.pp-sec { padding: clamp(36px, 4.5vw, 60px) 0; background: var(--ground); color: var(--ink); }
.pp-sec[hidden] { display: none; }
.pp-alt { background: var(--panel); }
.pp-sec h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-bottom: 26px; }
.pp-features { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.pp-features li { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--sky); border-radius: var(--r-md); padding: 20px; }
.pp-features h3 { font-size: 1.15rem; margin-bottom: 8px; }
.pp-features p { margin: 0; text-align: left; }
.pp-screens { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: start; }
.pp-screens figure { margin: 0; }
.pp-screens img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.pp-screens .shot-phone img { max-width: 260px; margin-inline: auto; border-radius: 28px; border-width: 4px; border-color: var(--ink); }
.pp-screens figcaption { margin-top: 8px; font-weight: 700; text-align: center; }
.pp-demo { display: grid; gap: 24px; align-items: center; }
.pp-demo p { max-width: 32em; }
.pp-demo .demo-card { max-width: 30rem; }
@media (min-width: 900px) { .pp-demo { grid-template-columns: 1fr 1fr; } }
.pp-cta-band { padding: clamp(32px, 4.5vw, 52px) 0; }
.pp-cta-band h2 { color: #fff; margin-bottom: 0; }
.pp-others { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.pp-others a { display: grid; gap: 4px; height: 100%; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); text-decoration: none; }
.pp-others a:hover { border-color: var(--ink); }
.pp-others strong { font-family: var(--display); font-size: 1.15rem; }
.pp-others span { font-size: .95rem; }

.pp-sec.pp-cta-band { background: var(--hero); color: #fff; }