/* Hub and Security editorial surfaces. Shared brand tokens; no other page overrides. */
.product-page { overflow: clip; }
.product-page section[id] { scroll-margin-top: calc(var(--nav-h) + 20px); }
.product-page .btn { white-space: normal; text-align:center; }
.product-page .split > * { min-width: 0; }
.product-page h2 { margin-bottom: 24px; }
.product-page h3 { line-height:1.15; }
.product-page .split p + p { margin-top: 18px; }
.product-eyebrow { color:var(--deep); font-size:.74rem; font-weight:700; letter-spacing:.16em; margin-bottom:20px; }
.dark .product-eyebrow { color:var(--ice); }
.product-hero { position:relative; min-height:min(840px, calc(100svh - var(--nav-h))); display:flex; align-items:center; isolation:isolate; }
.product-hero-photo { position:absolute; inset:0; z-index:-2; }
.product-hero-photo img { width:100%; height:100%; object-fit:cover; object-position:65% 50%; }
.product-hero-photo::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,10,17,.92),rgba(4,10,17,.65) 40%,rgba(4,10,17,.06) 77%); }
.product-hero-copy { padding-block:100px; }
.product-hero-copy h1 { max-width:9ch; font-size:clamp(3.2rem,6.7vw,6.3rem); line-height:1; margin-bottom:28px; }
.product-hero-copy .lede { max-width:38ch; color:#e0e6ed; }
.product-hero-copy .btn-row { margin-top:32px; }
.security-hero .product-hero-photo img { object-position:50% 44%; }
.security-hero .product-hero-photo::after { background:linear-gradient(90deg,rgba(10,15,22,.91),rgba(10,15,22,.7) 45%,rgba(10,15,22,.14)); }
.security-hero h1 { max-width:10ch; }
.product-heading { max-width:750px; margin:0 auto 52px; text-align:center; }
.product-heading h2 { font-size:clamp(2.2rem,5.5vw,4.2rem); }
.product-heading > p:last-child { margin-inline:auto; font-size:1.08rem; }
.product-benefits { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; }
.product-benefits h3 { margin:22px 0 14px; }
.product-benefits p { font-size:.96rem; }
.product-symbol { color:var(--deep); background:linear-gradient(140deg,#e2f0f7,#f4f8fb); border:1px solid #d8e9f4; width:52px; height:52px; border-radius:17px; display:grid; place-items:center; }
.product-symbol svg { width:25px; height:25px; }
.product-family { background:#f0f3f7; }
.product-versions { display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.product-versions article { padding:clamp(30px,4vw,54px); border-radius:30px; background:#fff; position:relative; overflow:hidden; box-shadow:0 15px 45px #0e4e8e08; }
.product-versions article h3 { font-size:clamp(1.9rem,3vw,2.7rem); max-width:13ch; margin-bottom:24px; }
.product-versions article > p:not(.product-eyebrow) { max-width:42ch; }
.product-version-icon { display:block; margin-bottom:40px; color:var(--deep); }
.product-version-icon svg { width:52px; height:52px; stroke-width:1; }
.product-versions .product-ultra-card { background:radial-gradient(ellipse at 100% 0,#154d70 0,transparent 70%),#0a1420; }
.product-ultra-card .product-version-icon { color:var(--glow); }
.product-link { display:inline-flex; gap:10px; align-items:center; margin-top:32px; font-weight:600; text-decoration:none; color:var(--deep); }
.product-link svg { width:19px; height:19px; }
.dark .product-link { color:var(--ice); }
.product-ultra { background:radial-gradient(ellipse at 12% 50%,#16415855,transparent 65%),#0a0f16; }
.product-ultra h2 { font-size:clamp(2.2rem,4.5vw,3.8rem); }
.product-model-art { position:relative; display:grid; place-items:center; padding:30px 0 72px; isolation:isolate; }
.product-model-art > img { width:82%; border-radius:32px; box-shadow:0 0 80px #32b5ec18; }
.product-model-ring { position:absolute; width:105%; aspect-ratio:1; border:1px solid #61d7ee33; border-radius:50%; z-index:-1; }
.product-model-ring::before,.product-model-ring::after { content:''; position:absolute; inset:8%; border:1px solid #61d7ee22; border-radius:50%; }
.product-model-ring::after { inset:17%; }
.product-model-label { position:absolute; bottom:30px; max-width:95%; display:flex; align-items:center; gap:10px; padding:14px 20px; border-radius:100px; color:#bdeaf3; background:#132735; border:1px solid #54a1c54d; font-size:.83rem; box-shadow:0 12px 40px #0004; }
.product-model-label svg { width:20px; height:20px; flex-shrink:0; }
.product-note { font-size:.83rem!important; line-height:1.65; color:var(--muted); margin-top:24px; }
.dark .product-note { color:#9facba; }
.product-design-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(32px,6vw,76px); align-items:center; }
.product-design-grid .media { aspect-ratio:1; }
.product-design-grid img { height:100%; width:100%; object-fit:cover; }
.product-design-detail article { padding-block:22px; border-bottom:1px solid var(--line); }
.product-design-detail h3 { margin:10px 0; }
.product-step { display:block; color:var(--signal); font-family:var(--mono); font-size:.82rem; margin-bottom:20px; }
.product-protocols { display:grid; gap:0; }
.product-protocols article { display:flex; gap:22px; align-items:start; padding:26px 0; border-bottom:1px solid var(--line); }
.product-protocols article > svg { width:28px; height:28px; color:var(--deep); flex-shrink:0; }
.product-protocols h3 { font-size:1.25rem; margin-bottom:8px; }
.product-protocols p { font-size:.9rem; }
.product-offline { position:relative; isolation:isolate; padding-block:clamp(80px,12vw,160px); }
.product-offline-image { position:absolute; inset:0; z-index:-2; }
.product-offline-image img { width:100%; height:100%; object-fit:cover; }
.product-offline-image::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#080e17f5,#080e17cd 45%,#080e1730); }
.product-offline-copy { max-width:580px; }
.product-offline h2 { font-size:clamp(2.2rem,4.8vw,4rem); }
.product-steps { list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:42px; }
.product-steps li { border-top:1px solid #b8d3e3; padding-top:24px; }
.product-steps h3 { margin-bottom:16px; }
.product-page .spec { margin-top:30px; }
.product-faq h3 { margin-bottom:24px; }
.product-faq details { padding-block:23px; border-bottom:1px solid var(--line); }
.product-faq summary { cursor:pointer; color:var(--ink); font-weight:600; padding-right:20px; }
.product-faq details p { margin-top:15px; font-size:.94rem; }
.product-faq-wide { max-width:900px; }
.product-close { text-align:center; background:radial-gradient(ellipse at bottom,#dceff8,transparent 70%); }
.product-close h2 { max-width:18ch; margin-inline:auto; }
.product-close p { margin:0 auto 28px; }
.product-page + .cta { display:none; }
/* Room coverage is an explicit illustration, never a simulated live alarm. */
.security-inputs { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.security-inputs article { border:1px solid var(--line); border-radius:24px; padding:32px; }
.security-inputs h3 { margin:22px 0 14px; }
.security-inputs p { font-size:.93rem; }
.security-demo { background:#fff; border-radius:32px; padding:clamp(24px,5vw,60px); box-shadow:0 20px 70px #193a6510; }
.security-mode-buttons { display:flex; gap:8px; padding:6px; background:#f1f4f7; border-radius:50px; max-width:540px; margin:0 auto 42px; }
.security-mode-buttons button { flex:1; min-width:0; padding:12px 8px; border-radius:50px; font-size:.9rem; font-weight:600; }
.security-mode-buttons button[aria-pressed=true] { background:var(--deep); color:#fff; box-shadow:0 4px 14px #0e4e8e25; }
.security-demo-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(30px,6vw,80px); align-items:center; }
.security-floorplan { display:grid; grid-template-columns:1.15fr 1fr; gap:9px; border:3px solid #3081b6; padding:10px; border-radius:20px; background:#f5f9fc; transition:border-color .25s; }
.security-room { position:relative; min-height:150px; border:1px solid #a2d3eb; border-radius:9px; padding:23px 16px; display:flex; flex-direction:column; align-items:start; justify-content:center; background:#e4f3fa; transition:background .25s,border-color .25s; }
.security-room svg { width:25px; height:25px; color:var(--deep); margin-bottom:14px; }
.security-room span { font-size:.86rem; font-weight:600; color:var(--ink); }
.security-room small { font-size:.7rem; color:var(--deep); margin-top:4px; }
.security-room i { position:absolute; right:13px; top:13px; width:7px; height:7px; border-radius:50%; background:var(--signal); box-shadow:0 0 0 4px #1e9cd714; }
.security-demo[data-coverage=home] .security-room,.security-demo[data-coverage=off] .security-room,.security-demo[data-coverage=sleep] .security-room[data-room="2"] { background:#f5f6f8; border-color:#d8dce2; }
.security-demo[data-coverage=home] .security-room i,.security-demo[data-coverage=off] .security-room i,.security-demo[data-coverage=sleep] .security-room[data-room="2"] i { background:#a4acb6; box-shadow:none; }
.security-demo[data-coverage=off] .security-floorplan { border-color:#bdc5cc; }
.security-explanation h3 { font-size:clamp(1.8rem,3vw,2.7rem); margin-bottom:20px; }
.security-explanation .product-eyebrow { letter-spacing:.08em; }
.security-example { text-align:center; max-width:none; }
.security-response { background:radial-gradient(ellipse at 50% 100%,#16425a55,transparent 80%),#0a0f16; }
.security-response-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:30px; list-style:none; }
.security-response-steps li { position:relative; padding-top:14px; }
.response-symbol { width:64px; height:64px; border:1px solid #286080; border-radius:22px; background:#142838; color:var(--ice); display:grid; place-items:center; margin-bottom:35px; }
.response-symbol svg { width:28px; height:28px; }
.security-response-steps li:not(:last-child)::after { content:''; height:1px; position:absolute; top:47px; left:80px; right:-12px; background:linear-gradient(90deg,#2b789f,#2b789f22); }
.security-response-steps h3 { margin-bottom:18px; }
.security-response-steps p { font-size:.92rem; color:#b9c4ce; }
.security-screens { background:radial-gradient(ellipse at 75% 50%,#dceef7,transparent 65%),var(--paper); }
.security-screens .media { margin-top:35px; }
.security-phone { width:min(100%,320px); margin:auto; }
.security-phone img { border:6px solid #10151c; border-radius:38px; box-shadow:0 30px 80px #0c274b26; }
.security-phone figcaption { font-size:.74rem; color:var(--muted); margin-top:18px; text-align:center; }
@media(max-width:900px) {
 .product-benefits { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .security-inputs { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .security-response-steps { grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; }
 .security-response-steps li:nth-child(2)::after { display:none; }
 .product-design-grid { grid-template-columns:1fr 1fr; gap:30px; }
}
@media(max-width:759px) {
 .product-hero { min-height:0; display:block; }
 .product-hero-photo { position:relative; height:320px; }
 .product-hero-photo img { object-position:65% 50%; }
 .product-hero-photo::after,.security-hero .product-hero-photo::after { background:linear-gradient(180deg,transparent 55%,#0a0f16); }
 .product-hero-copy { padding-block:12px 60px; }
 .product-hero-copy h1 { font-size:clamp(2.5rem,11.5vw,4.8rem); max-width:12ch; }
 .product-hero-copy .lede { font-size:1.05rem; }
 .product-heading { text-align:left; margin-bottom:35px; }
 .product-heading > p:last-child { font-size:1rem; }
 .product-versions { grid-template-columns:1fr; }
 .product-version-icon { margin-bottom:26px; }
 .product-versions article h3 { max-width:20ch; }
 .product-design-grid { grid-template-columns:1fr; }
 .product-design-grid .media { aspect-ratio:3/2; }
 .product-model-art { max-width:440px; margin:auto; }
 .product-offline-copy { max-width:100%; }
 .product-offline-image::after { background:#080e17c9; }
 .product-steps { grid-template-columns:1fr; gap:30px; }
 .security-demo-grid { grid-template-columns:1fr; }
 .security-mode-buttons { gap:2px; margin-bottom:28px; }
 .security-mode-buttons button { padding:11px 4px; font-size:.78rem; overflow-wrap:anywhere; }
 .security-room { min-height:130px; padding:18px 12px; }
 .security-inputs article { padding:22px; }
 .security-screens .split > div { order:0; }
 .security-phone { order:1; }
 .product-close { text-align:left; }
 .product-close h2,.product-close p { margin-left:0; }
}
@media(max-width:380px) {
 .product-benefits,.security-inputs { grid-template-columns:1fr; }
 .security-response-steps { gap:20px; }
 .security-demo { padding:20px 14px; }
 .security-room span { font-size:.8rem; }
}
@media(prefers-reduced-motion:reduce) { .security-room,.security-floorplan { transition:none; } }

.product-page h1,.product-page h2 { overflow-wrap:anywhere; hyphens:auto; }
