/* October 15 platform presentation, scoped to leave the current site intact. */
body[data-page="product"] {
  --platform-ease: cubic-bezier(.22,1,.36,1);
  --platform-display: var(--ink);
  overflow-x: clip;
}
:root[data-theme="night"] body[data-page="product"] { --platform-display: #f1f6f8; }
body[data-page="product"] main p { line-height: 1.75; }
body[data-page="product"] main :is(h1,h2,h3) { font-weight: 600; letter-spacing: -.045em; }
body[data-page="product"] main h1 { color: var(--platform-display); line-height: 1.05; font-size: clamp(42px,5.6vw,78px); }
body[data-page="product"] main h2 { color: var(--platform-display); line-height: 1.1; font-size: clamp(32px,4vw,56px); }
body[data-page="product"] main h3 { letter-spacing: -.025em; }
body[data-page="product"] main .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; line-height: 1.5; }
body[data-page="product"] .intro { font-size: 19px; color: var(--muted); max-width: 720px; }
body[data-page="product"] main .wrap { max-width: 1240px; padding: 100px 48px; }
body[data-page="product"] main > .wrap:first-child { padding-top: 100px; padding-bottom: 90px; }
body[data-page="product"] main > .wrap:first-child h1 { max-width: 950px; }
body[data-page="product"] main > .wrap:first-child .intro { margin-top: 24px; }
body[data-page="product"] main .btn { min-height: 50px; border-radius: 999px; padding: 14px 25px; font-size: 14px; line-height: 1.4; font-weight: 600; transition: transform .22s var(--platform-ease),background-color .2s,border-color .2s,box-shadow .25s; }
body[data-page="product"] main .btn:hover { transform: translateY(-3px); box-shadow: 0 7px 20px #0a203013; }
body[data-page="product"] main .btn:active { transform: translateY(0) scale(.97); }
body[data-page="product"] main .btn.primary:hover { background: #b7e73b; border-color: #b7e73b; }
body[data-page="product"] main .actions { align-items: center; gap: 14px; }
body[data-page="product"] main .product-section { gap: 80px; align-items: center; padding-block: 120px; }
body[data-page="product"] .product-section h2 { font-size: clamp(34px,3.8vw,52px); }
body[data-page="product"] .product-gallery .caption { font-size: 11px; color: var(--muted); }
body[data-page="product"] .device-heading { font-size: 14px; }
body[data-page="product"] .rule > .wrap > h2 { max-width: 850px; }
body[data-page="product"] .lighting-experience h2 { font-weight: 600; }
body[data-page="product"].room-effects-on :is(.room-intro,.lighting-layout,.platform-demo-tabs) { background: var(--bg); box-shadow: none; }
body[data-page="product"].room-effects-on .room-intro { border: 0; }
body[data-page="product"].room-effects-on .lighting-layout { gap: 45px; }
body[data-page="product"].room-effects-on .lighting-experience > .wrap { padding-top: 35px; }
body[data-page="product"].room-effects-on .room-view-space { height: 150px; }
body[data-page="product"].room-effects-on .room-intro h2 { margin-bottom: 8px; }
body[data-page="product"] .room-effects-toggle { min-height: 44px; }
body[data-page="product"] .platform-demo-tabs button { min-height: 52px; }
body[data-page="product"] main .platform-demo-title { font-weight: 500; letter-spacing: -.03em; }
body[data-page="product"] .lighting-stage { border-radius: 20px; }
body[data-page="product"].room-effects-on header { background: var(--bg); }
/* Restore the real screenshot inside the perspective laptop, not a baked image. */
body[data-page="product"] .installer .device-stage { padding: 28px 8px 32px; perspective: 1400px; }
@media(max-width:760px) {
  body[data-page="product"] main .wrap { padding: 70px 24px; }
  body[data-page="product"] main > .wrap:first-child { padding-block: 60px; }
  body[data-page="product"] main .product-section { padding-block: 75px; gap: 45px; }
  body[data-page="product"] .product-section h2 { max-width: none; font-size: 35px; }
  body[data-page="product"].room-effects-on .lighting-layout { gap: 28px; }
  body[data-page="product"].room-effects-on .room-view-space { height: 120px; }
  body[data-page="product"] .platform-demo-tabs button { padding: 14px 12px; }
  body[data-page="product"] .lighting-stage { padding: 18px 6px; }
  body[data-page="product"].room-effects-on .room-intro { padding: 20px; }
  body[data-page="product"].room-effects-on .lighting-experience > .wrap { padding: 20px 0; }
  body[data-page="product"] .lighting-layout > .lighting-stage { grid-row: 1; }
  body[data-page="product"] .installer .device-stage { padding: 20px 8px 28px; }
}
@media(prefers-reduced-motion:reduce) {
  body[data-page="product"] main .btn { transition: none; }
}