/* ZapPLC theme. Light only.
   Layout grammar and colour family follow Caséta by Lutron (the owner's chosen reference, measured
   off the live DOM 2026-09-23: blue #006DCC header, orange #CC5400 pills, light-weight headings,
   white and pale sections). Shifted for ZapPLC: blue #0F67C4 and burnt orange #B84D0E (both hold
   4.5:1 with white text), warm cream sections instead of grey, Hanken Grotesk + Figtree.
   2026-09-26: orange retired at the owner's request. The action ramp is now deep blue
   (--act #0B4F97 / --act-deep #083B72 / --act-soft #DCE9F7); --blue stays structural
   (masthead, links, icons, tab bar). Every product photo on the site is a warm lit room,
   so a warm accent competed with the content it sat beside. */

:root {
	--blue: #0F67C4;
	--blue-deep: #0B4F97;
	--act: #0B4F97;
	--act-deep: #083B72;
	--act-soft: #DCE9F7;
	--act-lite: #C9DEF7;
	--act-lite-hi: #DCEBFB;
	--act-line: #9FC6EE;
	--ink: #2E3236;
	--text: #474C52;
	--muted: #666C73;
	--line: #E4DED5;
	--white: #FFFFFF;
	--cream: #F8F5F0;
	--sand: #EFE8DD;
	--bulb: #FFD98A;
	--ok: #1E7A4C;
	--warn: #9A5A00;
	--f-head: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	--f-body: "Figtree", "Helvetica Neue", Arial, sans-serif;
	--gut: 24px;
	--max: 1180px;
	--sec: clamp(56px, 7vw, 96px);
	--r: 6px;
	color-scheme: light;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body.zp { margin: 0; background: var(--white); color: var(--text); font-family: var(--f-body); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: clip; }
.zp h1, .zp h2, .zp h3 { font-family: var(--f-head); margin: 0; color: var(--ink); text-wrap: balance; }
.zp h1 { font-size: clamp(2.3rem, 5vw, 3.9rem); line-height: 1.08; font-weight: 300; letter-spacing: -0.01em; }
.zp h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.12; font-weight: 300; letter-spacing: -0.01em; }
.zp h3 { font-size: 1.14rem; line-height: 1.35; font-weight: 600; letter-spacing: 0; }
.zp p { margin: 0; }
.zp a { color: var(--blue); text-underline-offset: 3px; }
.zp a:hover { color: var(--blue-deep); }
.zp img { max-width: 100%; height: auto; display: block; }
.zp :focus-visible { outline: 3px solid var(--act); outline-offset: 3px; }
.zp .zp-mast :focus-visible { outline-color: #fff; }
.zp-skip { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--ink); color: #fff !important; padding: 10px 14px; }
.zp-skip:focus { left: 8px; }

.zp-main .wp-block-group > *, .zp-main .wp-block-group { margin-block: 0; }
.zp-main .wp-block-image { margin: 0; }
.zp-main .wp-block-image img { width: 100%; }
.zp-main .wp-block-list { margin: 0; }

.zp-wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.zp-sec { padding-block: var(--sec); position: relative; }
.zp-t-white { background: var(--white); }
.zp-t-cream { background-color: #FBF7F1; }
.zp-t-blue { background-color: var(--blue); color: #fff; }
.zp-t-photo { background: #1E2227; }

.zp-eyebrow { font-family: var(--f-body); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--act); }
.zp-lede { font-size: 1.14rem; color: var(--text); max-width: 64ch; }
.zp-note { color: var(--muted); font-size: .98rem; margin-top: 28px !important; }
.zp-note--center { text-align: center; }
.zp-tbc { font-size: .92rem; font-style: italic; color: var(--muted) !important; }
.zp-head { display: flex; flex-direction: column; gap: 14px; max-width: 760px; margin-bottom: 40px !important; }
.zp-head--center { align-items: center; text-align: center; margin-inline: auto; }
.zp-head--center .zp-lede { margin-inline: auto; }

/* Lucide icons as CSS masks (paths in icons.css). */
.zp-ic::before { content: ""; flex: none; display: block; width: 24px; height: 24px; background: var(--blue); -webkit-mask: var(--zp-icon) center / contain no-repeat; mask: var(--zp-icon) center / contain no-repeat; }

/* ---------- buttons: Caséta pills ---------- */
.zp .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.zp .wp-block-buttons.zp-center { justify-content: center; margin-top: 36px; }
.zp .wp-block-button { margin: 0; }
.zp .wp-block-button .wp-block-button__link, .zp .zp-btn {
	display: inline-flex; align-items: center; justify-content: center; text-align: center;
	background: var(--act); color: #fff; border: 2px solid var(--act); border-radius: 999px;
	font-family: var(--f-body); font-weight: 700; font-size: .84rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2;
	padding: 14px 28px; text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.zp .wp-block-button .wp-block-button__link:hover, .zp .zp-btn:hover { background: var(--act-deep); border-color: var(--act-deep); color: #fff; }
.zp .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--blue); border-color: var(--blue); }
.zp .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--blue); color: #fff; }
.zp .wp-block-button.is-style-white .wp-block-button__link { background: #fff; color: var(--act); border-color: #fff; }
.zp .wp-block-button.is-style-white .wp-block-button__link:hover { background: var(--act-soft); border-color: var(--act-soft); color: var(--act-deep); }

/* ---------- header: Caséta blue bar ---------- */
.zp-mast { position: relative; z-index: 50; background: var(--blue); }
.zp-mast-in { max-width: var(--max); margin: 0 auto; padding: 10px var(--gut); display: flex; align-items: center; gap: 22px; min-height: 68px; }
.zp-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.zp-brand-mark { width: 38px; height: 38px; border-radius: 50%; background: #fff; padding: 5px; }
.zp-brand-word { font-family: var(--f-head); font-weight: 700; font-size: 1.4rem; letter-spacing: -0.01em; color: var(--ink); line-height: 1; }
.zp-brand-word b { font-weight: 700; color: var(--blue); }
.zp .zp-mast .zp-brand, .zp-mast .zp-brand-word, .zp-mast .zp-brand-word b { color: #fff; }
.zp-nav { margin-left: auto; }
.zp-nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; align-items: center; }
.zp-item { position: relative; }
.zp-top { font-family: var(--f-body); font-size: .92rem; font-weight: 600; color: #fff; text-decoration: none; background: none; border: 0; cursor: pointer; display: flex; align-items: center; gap: 7px; padding: 10px 12px; line-height: 1; border-radius: 4px; }
.zp .zp-top, .zp .zp-top:hover { color: #fff; }
.zp-top:hover, .zp-item.is-open > .zp-top { background: rgba(255, 255, 255, .14); }
.zp-top[aria-current="page"], .zp-item.is-active > .zp-top { box-shadow: inset 0 -2px 0 #fff; }
.zp-chev { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
/* The panel's top padding is the hover bridge, inside the hover target. */
.zp-sub { position: absolute; top: 100%; left: -6px; padding-top: 10px; min-width: 250px; display: none; z-index: 60; }
.zp-item.is-open > .zp-sub { display: block; }
@media (hover: hover) and (min-width: 1101px) { .zp-item.has-sub:hover > .zp-sub { display: block; } }
html:not(.js) .zp-item.has-sub:focus-within > .zp-sub { display: block; }
.zp-sub-in { list-style: none; margin: 0; padding: 8px 0; background: #fff; border-radius: var(--r); box-shadow: 0 16px 40px rgba(20, 30, 45, .18); }
.zp .zp-sub-in a { display: block; padding: 10px 20px; color: var(--ink); text-decoration: none; font-size: .96rem; white-space: nowrap; }
.zp .zp-sub-in a:hover, .zp .zp-sub-in a[aria-current="page"] { background: var(--cream); color: var(--act); }
.zp-mast-pills { display: flex; gap: 10px; flex: none; }
.zp .zp-pill-link { display: inline-flex; align-items: center; border-radius: 999px; padding: 9px 18px; font-size: .84rem; font-weight: 700; text-decoration: none; white-space: nowrap; border: 2px solid #fff; }
.zp .zp-pill-link--solid { background: #fff; color: var(--act); }
.zp .zp-pill-link--solid:hover { background: var(--act-soft); color: var(--act-deep); }
.zp .zp-pill-link--line { color: #fff; }
.zp .zp-pill-link--line:hover { background: rgba(255, 255, 255, .15); color: #fff; }

.zp-burger { display: none; margin-left: auto; width: 46px; height: 46px; padding: 0; background: none; border: 2px solid rgba(255, 255, 255, .7); border-radius: 6px; color: #fff; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.zp-burger span { display: block; width: 20px; height: 2px; background: currentColor; }

/* Mobile drawer: body-level sibling of the header, fixed, full viewport height, opaque, light. */
.zp-dim { position: fixed; inset: 0; z-index: 90; background: rgba(12, 16, 22, .5); opacity: 0; transition: opacity .2s; }
.zp-dim.is-open { opacity: 1; }
.zp-drawer { position: fixed; inset: 0 0 0 auto; z-index: 100; width: min(92vw, 400px); height: 100dvh; background: #fff; overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); transition: transform .24s ease; box-shadow: -12px 0 40px rgba(0, 0, 0, .18); padding: 0 24px 40px; }
.zp-drawer.is-open { transform: none; }
.zp-drawer-head { display: flex; align-items: center; justify-content: space-between; min-height: 72px; border-bottom: 1px solid var(--line); margin-bottom: 4px; position: sticky; top: 0; background: #fff; z-index: 1; }
.zp-drawer .zp-brand-mark { background: none; padding: 0; }
.zp-close { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); cursor: pointer; position: relative; }
.zp-close::before, .zp-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; background: currentColor; }
.zp-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.zp-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.zp-dgroup { padding: 18px 0; border-bottom: 1px solid var(--line); }
.zp-dhead { display: block; font-family: var(--f-head); font-weight: 700; font-size: 1.14rem; color: var(--ink) !important; text-decoration: none; margin: 0 0 8px !important; }
a.zp-dhead { margin: 0 !important; }
.zp-dhead[aria-current="page"] { color: var(--act) !important; }
.zp-dlist { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); display: flex; flex-direction: column; }
.zp .zp-dlist a { display: block; padding: 8px 0; color: var(--muted); text-decoration: none; font-size: 1rem; }
.zp .zp-dlist a[aria-current="page"] { color: var(--act); font-weight: 600; }
.zp-drawer-ctas { display: flex; flex-direction: column; gap: 10px; padding-top: 22px; }
.zp .zp-drawer-ctas a { display: block; text-align: center; border-radius: 999px; padding: 13px 18px; font-weight: 700; font-size: .9rem; text-decoration: none; border: 2px solid var(--act); }
.zp .zp-drawer-ctas a.zp-dcta--solid { background: var(--act); color: #fff; }
.zp .zp-drawer-ctas a.zp-dcta--line { color: var(--act); }
body.zp-nav-open { overflow: hidden; }

@media (max-width: 1100px) {
	.js .zp-nav { display: none; }
	.zp-mast .zp-mast-pills a.zp-pill-link { display: none; }
	.js .zp-burger { display: inline-flex; }
	html:not(.js) .zp-mast-in { flex-wrap: wrap; }
	html:not(.js) .zp-nav { margin-left: 0; width: 100%; }
	html:not(.js) .zp-nav-list { flex-wrap: wrap; }
}

/* ---------- home hero: full-bleed photo, light centred headline ---------- */
.zp-hero { position: relative; min-height: clamp(600px, 84vh, 780px); display: flex; align-items: center; overflow: hidden; padding-block: 72px 132px; }
.zp-cover, .zp-cover img { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; margin: 0 !important; }
.zp-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 16, 30, .78) 0%, rgba(7, 16, 30, .5) 42%, rgba(7, 16, 30, .08) 75%), linear-gradient(0deg, rgba(7, 16, 30, .35), rgba(7, 16, 30, 0) 40%); pointer-events: none; }
.zp-hero > .zp-wrap { position: relative; z-index: 1; width: 100%; }
/* (hero copy styles: see "Hero, v1.3" below) */

.zp-intro .zp-wrap { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.zp-intro .zp-lede { max-width: 820px; }
.zp-intro--home .zp-wrap { align-items: center; text-align: center; }
.zp-intro--home .zp-lede { font-size: 1.2rem; margin-inline: auto; max-width: 720px; }
.zp-checks { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: center; }
.zp-checks li { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.zp-checks li::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--act) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; flex: none; }

/* ---------- numbered feature tabs ---------- */
.zp-tabs { padding: 0 !important; display: grid; grid-template-columns: 1fr; }
.zp-tab-list { display: grid; grid-template-columns: 1fr 1fr; background: var(--blue); }
.zp-tab-btn { display: flex; align-items: center; gap: 14px; padding: 18px 20px; color: #fff; font-weight: 600; font-size: 1rem; border-bottom: 1px solid rgba(255, 255, 255, .22); cursor: pointer; user-select: none; }
.zp-tab-btn:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, .22); }
.zp-tab-n { font-size: .8rem; font-weight: 700; letter-spacing: .08em; opacity: .8; }
.zp-tab-btn.is-active { background: var(--blue-deep); box-shadow: inset 4px 0 0 #fff; }
.zp-tab-btn:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.zp-tab-panel { position: relative; min-height: 420px; display: flex; align-items: flex-end; overflow: hidden; }
.zp-tab-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 12, 18, .66), rgba(8, 12, 18, .18) 62%, rgba(8, 12, 18, 0)); pointer-events: none; }
.js .zp-tab-panel:not(.is-active) { display: none; }
.zp-tab-copy { position: relative; z-index: 1; padding: 40px 32px; max-width: 560px; display: flex; flex-direction: column; gap: 12px; }
.zp .zp-tab-copy h2 { color: #fff; }
.zp-tab-copy p { color: #F2F4F7; font-size: 1.05rem; }
.zp .zp-tab-copy .zp-eyebrow { color: var(--act-lite); }
@media (min-width: 900px) {
	.zp-tabs { grid-template-columns: 330px 1fr; min-height: 560px; }
	.zp-tab-list { grid-template-columns: 1fr; align-content: stretch; }
	.zp-tab-btn { padding: 0 32px; border-right: 0 !important; font-size: 1.05rem; }
	.zp-tab-panel { min-height: 560px; }
	.zp-tab-copy { padding: 56px; }
}

/* ---------- photo cards (steps), uses, products ---------- */
.zp-ocards, .zp-uses, .zp-products { display: grid; gap: 26px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .zp-ocards, .zp-uses, .zp-products { grid-template-columns: repeat(3, 1fr); } }
.zp-ocard { position: relative; border-radius: var(--r); overflow: hidden; min-height: 440px; display: flex; align-items: flex-end; }
.zp-ocard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 12, 18, 0) 35%, rgba(8, 12, 18, .8)); pointer-events: none; }
.zp-ocard > figure { position: absolute !important; inset: 0; }
.zp-ocard > figure img { width: 100%; height: 100%; object-fit: cover; }
.zp-ocard-copy { position: relative; z-index: 1; padding: 26px; display: flex; flex-direction: column; gap: 8px; }
.zp .zp-ocard-copy h3 { color: #fff; font-size: 1.22rem; }
.zp-ocard-copy p { color: #EEF1F4; }
.zp-ocard-copy p.zp-ocard-n { width: 34px; height: 34px; border-radius: 50%; background: var(--act); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.zp-use { display: flex; flex-direction: column; gap: 14px; }
.zp-use img { aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); }
.zp-product { display: flex; flex-direction: column; gap: 10px; }
.zp-product img { aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); margin-bottom: 8px; }
.zp-product p { color: var(--text); }

/* ---------- full-width photo band ---------- */
.zp-photoband { min-height: clamp(420px, 48vw, 560px); display: flex; align-items: center; overflow: hidden; }
.zp-photoband::after { content: ""; position: absolute; inset: 0; background: rgba(12, 16, 22, .5); pointer-events: none; }
.zp-photoband > .zp-wrap { position: relative; z-index: 1; width: 100%; }
.zp-photoband-copy { max-width: 760px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; gap: 18px; align-items: center; }
.zp .zp-photoband-copy h2 { color: #fff; }
.zp-photoband-copy p { color: #F1F3F6; font-size: 1.12rem; }
.zp .zp-playlink a { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; font-size: .86rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.zp .zp-playlink a::before { content: ""; width: 28px; height: 28px; border-radius: 50%; background: var(--act) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / 14px no-repeat; }
.zp .zp-playlink a:hover { color: var(--act-lite); }

/* ---------- how it works: diagram + benefit row ---------- */
.zp-how .zp-wrap { display: flex; flex-direction: column; align-items: center; }
.zp-figure { margin: 0; width: 100%; max-width: 680px; }
.zp-figure svg { display: block; width: 100%; height: auto; }
.zp-figure figcaption { margin-top: 10px; text-align: center; font-size: .92rem; color: var(--muted); }
.dg-wire path { stroke: var(--ink); stroke-width: 3; fill: none; }
.dg-pulse circle { fill: var(--act); }
.dg-switch rect { fill: #fff; stroke: var(--ink); stroke-width: 2; }
.dg-switch rect.dg-rocker { fill: var(--blue); stroke: none; }
.dg-switch circle { fill: var(--muted); }
.dg-bulb circle { fill: var(--bulb); stroke: var(--ink); stroke-width: 2; }
.dg-glow circle { fill: var(--bulb); opacity: .35; }
.dg-cloud path { fill: none; stroke: var(--muted); stroke-width: 2; }
.dg-link { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 4 4; }
.dg-label text { font-family: var(--f-body); font-size: 12.5px; fill: var(--muted); }
.zp-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 20px; width: 100%; margin-top: 48px !important; }
@media (min-width: 900px) { .zp-benefits { grid-template-columns: repeat(4, 1fr); } }
.zp-benefit { display: flex !important; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.zp-benefit::before { width: 44px; height: 44px; }
.zp-benefit p { color: var(--ink); font-size: .98rem; max-width: 20ch; }

/* ---------- tiles ---------- */
.zp-tiles { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .zp-tiles { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .zp-tiles { grid-template-columns: repeat(4, 1fr); } .zp-tiles.zp-tiles--3 { grid-template-columns: repeat(3, 1fr); } .zp-tiles.zp-tiles--2 { grid-template-columns: 1fr 1fr; } }
.zp-tile { display: flex !important; flex-direction: column; gap: 10px; padding: 30px 28px; background: #fff; border-radius: var(--r); box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(40, 30, 20, .06); }
/* Icon in a round blue badge: the badge is a ::after disc, the icon a white mask on top. */
.zp-tile { position: relative; padding-top: 104px; }
.zp-tile::after { content: ""; position: absolute; top: 30px; left: 28px; width: 54px; height: 54px; border-radius: 50%; background: #E6F0FB; }
.zp-tile::before { position: absolute; top: 45px; left: 43px; z-index: 1; width: 24px; height: 24px; }
.zp-tile p { color: var(--text); font-size: .98rem; }
.zp-tile .zp-more { margin-top: auto !important; padding-top: 6px; }
.zp .zp-more a { color: var(--act); font-weight: 700; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.zp .zp-more a::after { content: " \2192"; }
.zp .zp-more a:hover { color: var(--act-deep); text-decoration: underline; }

/* ---------- splits ---------- */
.zp-split { display: grid; gap: 36px; grid-template-columns: 1fr; align-items: center; }
.zp-split-text { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; min-width: 0; }
.zp-split-text .zp-head { margin-bottom: 8px !important; }
.zp-split-img img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
@media (min-width: 900px) {
	.zp-split { grid-template-columns: 1fr 1fr; gap: 64px; }
	.zp-split--contact { grid-template-columns: 1.35fr .65fr; align-items: start; }
}
.zp-split + .zp-products { margin-top: 64px !important; }

/* ---------- rows ---------- */
.zp-rows { border-top: 1px solid var(--line); width: 100%; }
.zp-row { display: grid !important; grid-template-columns: 1fr; gap: 4px 32px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.zp .zp-row-h { display: flex; align-items: center; gap: 12px; font-size: 1.04rem; }
.zp-row p { color: var(--text); }
@media (min-width: 760px) { .zp-rows:not(.zp-rows--stack):not(.zp-rows--icons) .zp-row { grid-template-columns: 300px 1fr; align-items: baseline; } }
.zp-rows--icons { border-top: 0; }
.zp-rows--icons .zp-row { padding: 16px 0; }
.zp-rows--icons .zp-row p { padding-left: 36px; }
.zp-rows--spec { max-width: 900px; }
.zp-t-cream .zp-rows:not(.zp-rows--icons) { background: #fff; border-radius: var(--r); padding: 0 24px; border-top: 0; }
.zp-t-cream .zp-rows:not(.zp-rows--icons) .zp-row:last-child { border-bottom: 0; }

/* ---------- FAQ ---------- */
.zp-faq { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.zp-qa { background: #fff; border-radius: var(--r); margin: 0; box-shadow: 0 1px 0 var(--line); }
.zp-qa summary { list-style: none; cursor: pointer; padding: 20px 60px 20px 24px; position: relative; font-weight: 600; font-size: 1.06rem; color: var(--ink); }
.zp-qa summary::-webkit-details-marker { display: none; }
.zp-qa summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; background: var(--act-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B4F97' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 12px no-repeat; }
.zp-qa[open] summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B4F97' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); }
.zp-qa p { padding: 0 60px 20px 24px; color: var(--text); }

/* ---------- blue bands ---------- */
.zp-boxes { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .zp-boxes { grid-template-columns: 1fr 1fr; } }
.zp-box { display: flex !important; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 40px 32px; border: 1px solid rgba(255, 255, 255, .6); border-radius: var(--r); }
.zp-box::before { width: 40px; height: 40px; background: #fff; }
.zp .zp-box h3 { color: #fff; font-family: var(--f-head); font-weight: 300; font-size: 1.9rem; line-height: 1.15; }
.zp-box p { color: #EAF2FB; max-width: 46ch; }
.zp-box .wp-block-buttons { margin-top: 8px; justify-content: center; }
.zp-cta { display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; max-width: 720px; margin: 0 auto; }
.zp .zp-t-blue h2 { color: #fff; }
.zp .zp-t-blue .zp-eyebrow { color: var(--act-lite-hi); }
.zp .zp-t-blue .zp-lede { color: #EAF2FB; }

/* ---------- hear it first ---------- */
.zp-hear-in { max-width: 640px; margin: 0 auto; display: flex !important; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.zp-hear-in::before { width: 48px; height: 48px; background: var(--act); margin-bottom: 6px; }
.zp-hear-in .zp-form-wrap, .zp-hear-in .zp-form { align-items: center; }
.zp-hear-in .zp-form-grid { text-align: left; }
.zp-hear-in .zp-pills { justify-content: center; }
.zp-hear-in .zp-fld--products legend { text-align: center; width: 100%; }
.zp-hear-in .zp-fine { margin-inline: auto; }

/* ---------- brand story ---------- */
.zp-story-cols { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .zp-story-cols { grid-template-columns: 1fr 1fr; gap: 64px; } }
.zp-story-col { display: flex; flex-direction: column; gap: 10px; }
.zp-story-col p { color: var(--muted); font-size: .98rem; }

/* ---------- inner banner ---------- */
.zp-crumbbar { background: #fff; border-bottom: 1px solid var(--line); padding-block: 12px; }
.zp-crumb { font-size: .88rem; color: var(--muted); }
.zp .zp-crumb a { color: var(--muted); text-decoration: none; }
.zp .zp-crumb a:hover { color: var(--act); }
.zp-crumb span { margin-inline: 4px; }
.zp-banner-media { position: relative; min-height: clamp(300px, 36vw, 460px); display: flex; align-items: flex-end; overflow: hidden; }
.zp-banner-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 12, 18, .68), rgba(8, 12, 18, .28) 60%, rgba(8, 12, 18, .06)); pointer-events: none; }
.zp-banner-media > .zp-wrap { position: relative; z-index: 1; width: 100%; }
.zp-banner-copy { max-width: 700px; padding-block: 48px; display: flex; flex-direction: column; gap: 12px; }
.zp .zp-banner-media h1 { color: #fff; font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
.zp .zp-banner-media .zp-eyebrow { color: var(--act-lite); }
.zp-banner-media .zp-banner-line { color: #EEF1F4; font-size: 1.1rem; }
.zp-banner--plain { padding-block: 20px 56px; }
.zp-banner--plain .zp-banner-copy { padding-block: 40px 0; }
.zp-banner--plain .zp-banner-line { color: var(--text); font-size: 1.1rem; }

/* ---------- downloads ---------- */
.zp-dl { list-style: none; margin: 0; padding: 0 24px; max-width: 900px; background: #fff; border-radius: var(--r); }
.zp-dl-item { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.zp-dl-item:last-child { border-bottom: 0; }
.zp-dl-name { font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 12px; }
.zp-dl-name::before { content: ""; width: 22px; height: 22px; flex: none; background: var(--blue); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3C/svg%3E") center / contain no-repeat; }
.zp-dl-item.is-pending .zp-dl-name { color: var(--text); font-weight: 500; }
.zp-dl-meta { font-size: .88rem; color: var(--muted); font-style: italic; }
.zp a.zp-dl-meta { color: var(--act); font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }

/* ---------- forms ---------- */
.zp-form-wrap { width: 100%; scroll-margin-top: 20px; display: flex; flex-direction: column; }
.zp-form { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.zp-form-grid { display: grid; gap: 16px 18px; grid-template-columns: 1fr; width: 100%; }
@media (min-width: 640px) { .zp-form--contact .zp-form-grid { grid-template-columns: 1fr 1fr; } .zp-fld--message, .zp-span { grid-column: 1 / -1; } }
.zp-fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; border: 0; margin: 0; padding: 0; }
.zp-fld label, .zp-fld legend { font-size: .92rem; font-weight: 600; color: var(--ink); padding: 0; margin-bottom: 4px; }
.zp-fld input[type="text"], .zp-fld input[type="email"], .zp-fld input[type="tel"], .zp-fld select, .zp-fld textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: #fff; border: 1px solid #CFC8BE; border-radius: 4px; padding: 12px 14px; min-height: 50px; }
.zp-fld textarea { resize: vertical; min-height: 150px; }
.zp-fld input:focus, .zp-fld select:focus, .zp-fld textarea:focus { border-color: var(--blue); outline: 3px solid rgba(15, 103, 196, .18); outline-offset: 0; }
.zp-hint { font-size: .88rem; color: var(--muted); }
.zp-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.zp-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid #CFC8BE; border-radius: 999px; background: #fff; cursor: pointer; font-size: .95rem; color: var(--ink); white-space: nowrap; }
.zp-pill input { width: auto; flex: 0 0 auto; margin: 0; accent-color: var(--act); }
.zp-pill:has(input:checked) { border-color: var(--act); background: var(--act-soft); }
.zp-fine { font-size: .86rem; color: var(--muted); max-width: 60ch; }
.zp-alert { padding: 14px 16px; border-left: 4px solid var(--ok); background: #fff; color: var(--ink); width: 100%; margin-bottom: 16px !important; border-radius: 4px; }
.zp-alert--err { border-left-color: var(--warn); }
.zp-carried { padding: 12px 16px; border-left: 4px solid var(--blue); background: #EEF4FB; color: var(--ink); width: 100%; border-radius: 4px; }
.zp-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- compatibility checker ---------- */
.zp-checker { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 980px) { .zp-checker { grid-template-columns: 1.25fr .75fr; } .zp-chk-out { position: sticky; top: 24px; } }
.zp-chk-form { display: flex; flex-direction: column; gap: 26px; }
.zp-chk-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.zp-chk-step legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-family: var(--f-head); font-weight: 600; font-size: 1.12rem; margin-bottom: 12px; padding: 0; color: var(--ink); }
.zp-chk-step legend em { flex-basis: 100%; padding-left: 42px; font-style: normal; font-family: var(--f-body); font-size: .88rem; font-weight: 500; color: var(--muted); }
.zp-chk-n { width: 30px; height: 30px; border-radius: 50%; background: var(--act); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; font-family: var(--f-body); }
.zp-chk-opts { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .zp-chk-opts { grid-template-columns: 1fr 1fr; } }
.zp-opt { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; cursor: pointer; transition: border-color .15s; }
.zp-opt input { width: auto; flex: 0 0 auto; margin: 4px 0 0; accent-color: var(--act); }
.zp-opt span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zp-opt strong { font-weight: 600; font-size: .98rem; color: var(--ink); }
.zp-opt small { font-size: .88rem; color: var(--muted); }
.zp-opt:has(input:checked) { border-color: var(--act); box-shadow: inset 0 0 0 1px var(--act); }
.zp-chk-out { background: #fff; border-radius: var(--r); box-shadow: 0 10px 30px rgba(40, 30, 20, .08); padding: 28px; display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 20px; }
.zp-chk-wait { color: var(--muted); }
.zp-chk-verdict { font-family: var(--f-head); font-weight: 600; font-size: 1.5rem; padding-left: 14px; border-left: 4px solid var(--ok); color: var(--ink); }
.zp-chk-verdict.is-ask { border-left-color: var(--warn); }
.zp-chk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.zp-chk-list li { padding-left: 18px; position: relative; color: var(--ink); font-weight: 600; font-size: .97rem; }
.zp-chk-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--act); }
.zp-chk-list li span { color: var(--text); display: block; font-weight: 400; font-size: .94rem; }
.zp-chk-out .zp-btn { align-self: flex-start; }

/* ---------- footer (light, like Caséta) ---------- */
.zp-foot { color: var(--text); }
.zp-foot-top { max-width: var(--max); margin: 0 auto; padding: 60px var(--gut) 40px; display: grid; gap: 36px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .zp-foot-top { grid-template-columns: .8fr 2.2fr; } }
.zp-foot-brand { display: flex; flex-direction: column; gap: 14px; }
.zp-foot-brand p { color: var(--text); max-width: 30ch; }
.zp-foot .zp-brand-mark { background: none; padding: 0; }
.zp-foot-cols { display: grid; gap: 28px; grid-template-columns: 1fr 1fr; }
@media (min-width: 700px) { .zp-foot-cols { grid-template-columns: repeat(4, 1fr); } }
.zp-foot-h { font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin: 0 0 12px !important; }
.zp-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.zp .zp-foot ul a { color: var(--text); text-decoration: none; font-size: .96rem; }
.zp .zp-foot ul a:hover { color: var(--act); text-decoration: underline; }
.zp-foot-base { border-top: 1px solid #DDD3C5; }
.zp-foot-base-in { max-width: var(--max); margin: 0 auto; padding: 18px var(--gut); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: .86rem; color: #555A60; }
.zp .zp-foot-base-in a { color: var(--act-deep); text-decoration: none; font-weight: 600; }

/* ---------- other pages ---------- */
.zp-plain-head { padding-block: clamp(40px, 6vw, 72px) 24px; }
.zp-prose { padding-bottom: var(--sec); max-width: 780px; }
.zp-prose > * + * { margin-top: 1em; }
.zp-listing { padding-block: 20px; border-bottom: 1px solid var(--line); }
.zp-404 { padding-block: var(--sec); }
.zp-404 .zp-wrap { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }

.editor-styles-wrapper { background: #fff; color: var(--text); font-family: var(--f-body); }

@media (prefers-reduced-motion: reduce) { .zp-drawer, .zp-dim { transition: none; } }

/* On narrow screens captions span the full width, so shade from the bottom up. */
@media (max-width: 899px) {
	.zp-tab-panel::after, .zp-banner-media::after { background: linear-gradient(180deg, rgba(8, 12, 18, .08) 20%, rgba(8, 12, 18, .8)); }
}

/* =====================================================================
   Engagement layer (2026-09-23): sticky header, motion, room preview,
   facts band, anatomy callouts, install timeline, hover depth.
   ===================================================================== */

/* Sticky header. No backdrop-filter or transform, so the drawer is never clipped. */
.zp-mast { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); box-shadow: 0 2px 14px rgba(8, 40, 80, .18); }

/* Slow settle on the home hero photo. */
@keyframes zp-settle { from { transform: scale(1.08); } to { transform: scale(1); } }
.zp-hero .zp-cover img { animation: zp-settle 14s ease-out both; }
.zp-hero-copy { animation: zp-rise .9s .2s ease-out both; }
@keyframes zp-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Scroll reveals, only once JS has marked the element. */
.js .zp-rv { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js .zp-rv.is-in { opacity: 1; transform: none; }

/* Hover depth. */
.zp-tile, .zp-product img, .zp-use img, .zp-ocard > figure img, .zp-box { transition: transform .35s ease, box-shadow .35s ease, background .35s ease; }
.zp-tile:hover { transform: translateY(-5px); box-shadow: 0 1px 0 var(--line), 0 22px 44px rgba(40, 30, 20, .12); }
.zp-product, .zp-use { overflow: hidden; }
.zp-product figure, .zp-use figure { overflow: hidden; border-radius: var(--r); }
.zp-product:hover img, .zp-use:hover img { transform: scale(1.05); }
.zp-ocard:hover > figure img { transform: scale(1.06); }
.zp-box:hover { background: rgba(255, 255, 255, .08); }
.zp .wp-block-button .wp-block-button__link:hover, .zp .zp-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(184, 77, 14, .28); }

/* Room preview. */
.zp-demo { display: grid; grid-template-columns: 1fr; gap: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 24px 60px rgba(20, 30, 45, .18); background: #fff; }
@media (min-width: 980px) { .zp-demo { grid-template-columns: 1.55fr 1fr; } }
.zp-demo-stage { position: relative; aspect-ratio: 16 / 9; background: #1b1f25; overflow: hidden; }
.zp-demo-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zp-demo-on { transition: opacity .45s ease, filter .45s ease; }
.zp-demo-tint { position: absolute; inset: 0; mix-blend-mode: soft-light; transition: background .45s ease, opacity .45s ease; pointer-events: none; }
.zp-demo-tint.is-hue { mix-blend-mode: color; }
.zp-demo-tag { position: absolute; top: 14px; left: 14px; background: rgba(255, 255, 255, .92); color: var(--ink); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; }
.zp-demo-panel { padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 20px; }
.zp-demo-row { display: flex; flex-direction: column; gap: 10px; }
.zp-demo-row--power { flex-direction: row; align-items: center; justify-content: space-between; }
.zp-demo-label { display: flex; justify-content: space-between; font-weight: 700; color: var(--ink); font-size: .95rem; }
.zp-demo-label output { color: var(--act); font-weight: 700; }
.zp-demo-ends { display: flex; justify-content: space-between; font-size: .8rem; color: var(--muted); margin-top: -4px; }
.zp-demo-note { font-size: .86rem; color: var(--muted); }
.zp-switch { position: relative; width: 108px; height: 44px; border-radius: 999px; border: 0; background: var(--act); color: #fff; cursor: pointer; font-weight: 700; font-size: .9rem; display: flex; align-items: center; padding: 0 52px 0 20px; transition: background .25s ease, padding .25s ease; }
.zp-switch-knob { position: absolute; left: 69px; top: 5px; width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: left .25s ease; }
.zp-switch[aria-pressed="false"] { background: #6B7178; padding: 0 16px 0 50px; }
.zp-switch[aria-pressed="false"] .zp-switch-knob { left: 5px; }
/* Bulb type chooser. Same pill language as the scenes, selected state carries aria-pressed. */
.zp-types { display: flex; flex-wrap: wrap; gap: 8px; }
.zp-types { gap: 10px; }
.zp-types button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; border: 1px solid #CFC8BE; background: #fff; color: var(--ink); border-radius: 12px; padding: 10px 14px; font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; transition: all .2s ease; }
.zp-types button small { font-size: .74rem; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.zp-types button[aria-pressed="true"] small { color: rgba(255,255,255,.85); }
.zp-types button:hover { border-color: var(--act); color: var(--act); }
.zp-types button[aria-pressed="true"] { background: var(--act); border-color: var(--act); color: #fff; }
/* A triac circuit has no colour control. Shown, not hidden, so the reason is readable. */
.zp-demo-row--cct.is-locked { opacity: .55; }
.zp-demo-row--cct.is-locked input[type="range"] { cursor: not-allowed; }
.zp-demo-row--cct.is-locked .zp-demo-label output { font-weight: 600; font-size: .82rem; }
.zp-demo-typenote { margin-top: -10px; }

.zp-scenes { display: flex; flex-wrap: wrap; gap: 8px; }
.zp-scenes button { border: 1px solid #CFC8BE; background: #fff; color: var(--ink); border-radius: 999px; padding: 9px 16px; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; transition: all .2s ease; }
.zp-scenes button:hover { border-color: var(--act); color: var(--act); }
.zp-scenes button.is-active { background: var(--act); border-color: var(--act); color: #fff; }
.zp input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 999px; background: linear-gradient(90deg, #E9E4DC, #CFC8BE); outline-offset: 6px; cursor: pointer; }
.zp input[type="range"].zp-range-cct { background: linear-gradient(90deg, #FFB25B, #FFF3DC 50%, #CFE2FF); }
.zp input[type="range"].zp-range-hue { background: linear-gradient(90deg, hsl(0,85%,58%), hsl(58,85%,58%), hsl(117,85%,58%), hsl(175,85%,58%), hsl(233,85%,58%), hsl(292,85%,58%), hsl(350,85%,58%)); }
.zp input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid var(--act); box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.zp input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--act); }
/* The colour-temperature track ends in blue, so a blue handle would vanish there.
   Neutral ink plus a white ring keeps it findable at both ends. */
.zp input[type="range"].zp-range-cct::-webkit-slider-thumb { border-color: var(--ink); box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(0, 0, 0, .25); }
.zp input[type="range"].zp-range-cct::-moz-range-thumb { border-color: var(--ink); box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(0, 0, 0, .25); }

/* Colour temperature preview on a photo. */
figure.zp-cct { position: relative; }
.zp-cct-layer { position: absolute; inset: 0; border-radius: var(--r); mix-blend-mode: soft-light; pointer-events: none; transition: background .3s ease, opacity .3s ease; }
.zp-cct-ctl { position: absolute; left: 16px; right: 16px; bottom: 16px; background: rgba(255, 255, 255, .94); border-radius: 10px; padding: 12px 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, .15); }
.zp-cct-ctl label { display: flex; flex-direction: column; gap: 8px; font-size: .86rem; font-weight: 700; color: var(--ink); }

/* Anatomy callouts. */
.zp-anatomy { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }
@media (min-width: 860px) { .zp-anatomy { grid-template-columns: .9fr 1.1fr; gap: 64px; } }
.zp-anatomy-fig { position: relative; margin: 0; background: #fff; border-radius: 10px; padding: 24px; box-shadow: 0 16px 40px rgba(40, 30, 20, .08); }
.zp-anatomy--switch .zp-anatomy-fig { max-width: 380px; justify-self: center; width: 100%; }
.zp-anatomy-fig img { width: 100%; height: auto; }
.zp-spot { position: absolute; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; background: var(--act); color: #fff; font-weight: 700; font-size: .9rem; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, .22); }
.zp-spot::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--act); opacity: .5; animation: zp-ping 2.2s ease-out infinite; }
.zp-spot.is-active { background: var(--blue); }
@keyframes zp-ping { from { transform: scale(.7); opacity: .6; } to { transform: scale(1.5); opacity: 0; } }
.zp-anatomy-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: none; }
.zp-anatomy-list li { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; background: #fff; border-radius: var(--r); border: 1px solid var(--line); transition: border-color .2s ease, box-shadow .2s ease; }
.zp-anatomy-list li.is-active { border-color: var(--act); box-shadow: 0 10px 26px rgba(184, 77, 14, .12); }
.zp-anatomy-list li > span:last-child { display: flex; flex-direction: column; gap: 2px; color: var(--text); }
.zp-anatomy-list strong { color: var(--ink); font-size: 1.05rem; }
.zp-anatomy-n { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--act-soft); color: var(--act-deep); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.zp-anatomy-list li.is-active .zp-anatomy-n { background: var(--act); color: #fff; }

/* Install timeline. */
.zp-timeline { display: grid; grid-template-columns: 1fr; gap: 18px; position: relative; }
@media (min-width: 900px) {
	.zp-timeline { grid-template-columns: repeat(4, 1fr); gap: 22px; }
	.zp-timeline::before { content: ""; position: absolute; left: 12%; right: 12%; top: 29px; height: 2px; background: repeating-linear-gradient(90deg, var(--act) 0 8px, transparent 8px 16px); }
}
.zp-tstep { position: relative; display: flex !important; flex-direction: column; gap: 10px; padding: 22px 22px 26px; background: #fff; border-radius: var(--r); box-shadow: 0 10px 30px rgba(40, 30, 20, .06); }
.zp-tstep::before { order: 2; width: 26px; height: 26px; margin-top: 8px; }
.zp-tstep-n { order: 1; position: relative; z-index: 1; width: 58px; height: 58px; margin: 0 0 4px !important; border-radius: 50%; background: var(--act); color: #fff; font-family: var(--f-head); font-size: 1.5rem; font-weight: 600; display: flex; align-items: center; justify-content: center; border: 5px solid var(--cream); }
.zp-tstep h3 { order: 3; }
.zp-tstep p:not(.zp-tstep-n) { order: 4; color: var(--text); }

/* Interactive diagram. */
.zp-diagram .dg-switch { cursor: pointer; }
.zp-diagram .dg-switch:focus-visible { outline: 3px solid var(--act); outline-offset: 4px; }
.zp-diagram .dg-switch rect.dg-rocker { transition: transform .3s ease, fill .3s ease; transform-origin: 66px 143px; }
.zp-diagram svg.is-off .dg-rocker { fill: #9AA0A7; transform: scaleY(-1); }
.zp-diagram .dg-glow circle, .zp-diagram .dg-bulb circle, .zp-diagram .dg-pulse { transition: opacity .35s ease, fill .35s ease; }
.zp-diagram svg.is-off .dg-glow circle, .zp-diagram svg.is-off .dg-pulse { opacity: 0; }
.zp-diagram svg.is-off .dg-bulb circle { fill: #E8E4DD; }
.zp-dg-hint { display: inline-block; margin-left: 6px; color: var(--act); font-weight: 700; }
html:not(.js) .zp-dg-hint { display: none; }

@media (prefers-reduced-motion: reduce) {
	.zp-hero .zp-cover img, .zp-hero-copy, .zp-spot::after { animation: none; }
	.js .zp-rv { opacity: 1; transform: none; transition: none; }
	.zp-tile:hover, .zp-product:hover img, .zp-use:hover img, .zp-ocard:hover > figure img { transform: none; }
}

/* =====================================================================
   v1.3 visual layer (2026-09-23): section backgrounds with depth, new hero,
   benefits card, chandelier preview.
   ===================================================================== */

/* ---------- Section backgrounds (owner, 2026-09-23) ----------
   Plain white sections stay plain. Accent sections (cream tone) and blue bands carry a photo plate
   under a wash: window light on warm white, dusk street under blue. Plates are assigned per section
   by src/build.js (plates.css); none repeats. */
.zp-sec > .zp-wrap, .zp-sec > .zp-wrap > * { position: relative; z-index: 1; }
.zp-t-white { background: #FFFFFF; }
.zp-t-cream { background-color: #FBF7F1; }
.zp-t-white.zp-plate {
	background-color: #FFFFFF;
	background-image: linear-gradient(rgba(255, 255, 255, .965), rgba(255, 255, 255, .965)), var(--plate);
	background-size: cover; background-position: right center;
}
.zp-t-cream.zp-plate {
	background-color: #FBF7F1;
	background-image: linear-gradient(rgba(251, 247, 241, .94), rgba(251, 247, 241, .94)), var(--plate);
	background-size: cover; background-position: left center;
}
.zp-t-blue.zp-plate {
	background-color: #0F67C4;
	background-image: linear-gradient(135deg, rgba(7, 48, 104, .84) 0%, rgba(12, 88, 176, .72) 60%, rgba(15, 103, 196, .62) 100%), var(--plate);
	background-size: cover; background-position: center;
}
.zp-foot-base { border-top-color: rgba(120, 100, 80, .18); }

/* ---------- Hero, v1.3: copy on the photo, the real switch on a card ---------- */
.zp-hero-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 1000px) { .zp-hero-grid { grid-template-columns: 1.25fr .75fr; gap: 64px; } }
.zp-hero-copy { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; max-width: 640px; animation: zp-rise .9s .15s ease-out both; }
.zp .zp-hero h1 { color: #fff; font-size: clamp(2.8rem, 6.2vw, 4.8rem); line-height: 1.02; font-weight: 300; text-shadow: 0 2px 30px rgba(0, 0, 0, .3); }
.zp .zp-hero .zp-eyebrow { color: var(--act-lite); display: inline-flex; align-items: center; gap: 10px; }
.zp .zp-hero .zp-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--act-line); }
.zp-hero-lede { color: #F2F5F9; font-size: 1.22rem; line-height: 1.6; max-width: 34em; }
.zp-hero .zp-checks { justify-content: flex-start; }
.zp .zp-hero .zp-checks li { color: #fff; }
.zp .wp-block-button.is-style-light .wp-block-button__link { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .85); }
.zp .wp-block-button.is-style-light .wp-block-button__link:hover { background: #fff; color: var(--blue); border-color: #fff; }
.zp-hero-card { justify-self: end; align-self: end; width: 100%; max-width: 330px; display: flex; gap: 18px; align-items: center; background: rgba(255, 255, 255, .95); border-radius: 14px; padding: 18px 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, .28); animation: zp-rise .9s .5s ease-out both; }
.zp-hero-card img { width: 72px; height: auto; flex: none; border-radius: 6px; }
.zp-hero-card-txt { display: flex; flex-direction: column; gap: 6px; }
.zp-hero-card-txt p { color: var(--text); font-size: .9rem; line-height: 1.45; }
.zp .zp-hero-card-k { color: var(--ink); font-weight: 700; font-size: 1rem; }
.zp .zp-hero-card a { color: var(--act); font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.zp .zp-hero-card a::after { content: " \2192"; }
@media (max-width: 999px) { .zp-hero-card { display: none; } .zp-hero { padding-block: 64px 120px; min-height: 0; } }

/* ---------- Benefits card, overlapping the hero's lower edge ---------- */
.zp-promise-sec { padding-top: 0 !important; padding-bottom: clamp(48px, 6vw, 80px); }
.zp-promise { position: relative; z-index: 3; margin-top: -76px !important; display: grid; grid-template-columns: 1fr; background: #fff; border-radius: 16px; box-shadow: 0 30px 70px rgba(20, 30, 45, .16); overflow: hidden; }
@media (min-width: 700px) { .zp-promise { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .zp-promise { grid-template-columns: repeat(4, 1fr); } }
.zp-promise-item { display: grid !important; grid-template-columns: 52px 1fr; column-gap: 16px; row-gap: 2px; align-items: center; padding: 26px 26px; border-bottom: 1px solid var(--line); position: relative; }
@media (min-width: 1100px) { .zp-promise-item { border-bottom: 0; border-right: 1px solid var(--line); } .zp-promise-item:last-child { border-right: 0; } }
.zp-promise-item::after { content: ""; grid-row: 1 / span 2; grid-column: 1; width: 52px; height: 52px; border-radius: 50%; background: var(--act-soft); }
.zp-promise-item::before { grid-row: 1 / span 2; grid-column: 1; justify-self: center; z-index: 1; width: 24px; height: 24px; background: var(--act); }
.zp-promise-item p { grid-column: 2; }
.zp-promise-item p:first-of-type strong { color: var(--ink); font-size: 1.05rem; }
.zp-promise-item p + p { color: var(--muted); font-size: .92rem; line-height: 1.45; }

/* ---------- Chandelier preview: extra warm bloom at the fixture ---------- */
.zp-demo-bloom { position: absolute; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; mix-blend-mode: screen; pointer-events: none; transition: opacity .45s ease; background: radial-gradient(circle, rgba(255, 214, 150, .75) 0%, rgba(255, 190, 110, .28) 30%, rgba(255, 170, 90, 0) 65%); }
.zp-demo.is-off .zp-demo-bloom { opacity: 0 !important; }

/* ---------- Inner banners carry the intro and the calls to action (2026-09-23) ---------- */
.zp-banner-media { min-height: clamp(420px, 44vw, 580px); align-items: center; }
.zp-banner-copy { max-width: 720px; padding-block: 64px; gap: 16px; }
.zp .zp-banner-copy .wp-block-buttons { margin-top: 10px; }
.zp-banner-media .zp-banner-line { font-size: 1.15rem; line-height: 1.6; max-width: 36em; color: #F2F5F9; }
.zp-banner-media::after { background: linear-gradient(90deg, rgba(7, 16, 30, .8) 0%, rgba(7, 16, 30, .55) 45%, rgba(7, 16, 30, .12) 80%); }
@media (max-width: 899px) { .zp-banner-media::after { background: linear-gradient(180deg, rgba(7, 16, 30, .45), rgba(7, 16, 30, .82)); } }

/* ---------- Platform logos ---------- */
@media (min-width: 900px) { .zp-split--platforms { grid-template-columns: 1fr 1fr; align-items: center; } }
.zp-platforms { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.zp-platform { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 170px; padding: 26px 18px; background: #fff; border-radius: 14px; box-shadow: 0 1px 0 var(--line), 0 16px 40px rgba(40, 30, 20, .08); transition: transform .3s ease, box-shadow .3s ease; }
.zp-platform:hover { transform: translateY(-4px); box-shadow: 0 1px 0 var(--line), 0 24px 50px rgba(40, 30, 20, .13); }
.zp-platform img { height: 60px; width: auto; max-width: 80%; object-fit: contain; }
.zp-platform--wordmark img { height: 44px; }
.zp-platform span { font-weight: 700; color: var(--ink); font-size: .98rem; }
.zp-platforms-note { grid-column: 1 / -1; margin-top: 14px !important; font-size: .82rem; color: var(--muted); text-align: center; }
.zp-platform img[src*="apple-home"] { height: 86px; margin-block: -12px; }
.zp-platform img[src*="google-home"] { height: 66px; }

/* ---------- Benefits card, v2 (2026-09-23): icon, title, text stacked and top-aligned ---------- */
.zp-promise { align-items: stretch; }
.zp-promise-item { display: flex !important; flex-direction: column; align-items: flex-start; gap: 6px; padding: 96px 30px 30px; position: relative; }
.zp-promise-item::after { content: ""; position: absolute; top: 30px; left: 30px; width: 50px; height: 50px; border-radius: 50%; background: var(--act-soft); }
.zp-promise-item::before { position: absolute; top: 43px; left: 43px; z-index: 1; width: 24px; height: 24px; margin: 0; background: var(--act); }
.zp-promise-item p { grid-column: auto; margin: 0; }
.zp-promise-item p:first-of-type strong { font-size: 1.08rem; line-height: 1.3; }
.zp-promise-item p + p { font-size: .95rem; line-height: 1.5; }
@media (min-width: 1100px) { .zp-promise-item { padding: 96px 28px 32px; } }

/* ---------- Headings, stronger (owner, 2026-09-23: "too weak") ---------- */
.zp h1 { font-weight: 700; letter-spacing: -0.02em; }
.zp h2 { font-weight: 700; letter-spacing: -0.018em; }
.zp h3 { font-weight: 700; }
.zp .zp-hero h1 { font-weight: 700; letter-spacing: -0.025em; }
.zp .zp-banner-media h1 { font-weight: 700; }
.zp .zp-box h3 { font-weight: 700; font-size: 1.7rem; }
.zp .zp-tab-copy h2 { font-weight: 700; }
.zp-dhead { font-weight: 800; }

/* ---------- Footer, v2: white, structured, direct contact ---------- */
.zp-foot { background: #FFFFFF; color: var(--text); border-top: 1px solid var(--line); }
.zp-foot-top { padding: 64px var(--gut) 48px; gap: 48px; }
@media (min-width: 900px) { .zp-foot-top { grid-template-columns: 1.05fr 2fr; } }
.zp-foot-brand { gap: 16px; }
.zp .zp-foot-tag { color: var(--text); font-size: 1rem; max-width: 30ch; line-height: 1.55; }
.zp-foot-contact { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.zp-foot-contact li { display: flex; align-items: center; gap: 10px; font-size: .95rem; }
.zp-foot-contact li::before { width: 18px; height: 18px; background: var(--act); }
.zp .zp-foot-contact a { color: var(--ink); text-decoration: none; font-weight: 600; }
.zp .zp-foot-contact a:hover { color: var(--act); }
.zp-foot-contact span { color: var(--text); }
.zp-foot-h { color: var(--blue); font-size: .78rem; letter-spacing: .14em; margin-bottom: 16px !important; }
.zp .zp-foot ul:not(.zp-foot-contact) a { color: var(--text); font-size: .96rem; }
.zp .zp-foot ul:not(.zp-foot-contact) a:hover { color: var(--act); text-decoration: none; }
.zp-foot-base { background: #06122b; border-top: 0; }
.zp-foot-base-in { color: #EAF2FB; font-size: .86rem; padding-block: 16px; align-items: center; }
.zp-foot-legal { display: flex; gap: 22px; }
.zp .zp-foot-base-in a { color: #FFFFFF; font-weight: 600; text-decoration: none; }
.zp .zp-foot-base-in a:hover { text-decoration: underline; }

/* ---------- Review fixes (2026-09-24) ---------- */
/* 1. The benefits card's negative margin collapsed through its section, dragging the section's white
   background up over the hero. flow-root stops the collapse: the card now floats over the hero's
   lower edge with the photo visible behind its top. */
.zp-promise-sec { display: flow-root; background: transparent !important; }
.zp-promise-sec::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: #fff; z-index: 0; }
.zp-promise { margin-top: -84px !important; }
/* 2. Demo photo fills the full height of the panel beside it (no white gap under the image). */
@media (min-width: 980px) {
	.zp-demo { align-items: stretch; }
	.zp-demo-stage { aspect-ratio: auto; min-height: 100%; height: 100%; }
}