/* Zen premium kit v1 (2026-10-31) — public/kit/zen-premium.css
 * The motion and component layer every Zen web page loads (docs/WEBSITE-PLAYBOOK.md §7).
 * Theme it per site with the --zp-* variables on :root. Without JavaScript (no .zp-js on <html>) or with
 * prefers-reduced-motion (.zp-rm), every element is visible and still. Everything is prefixed zp- so it never
 * collides with a page's own CSS. */
:root{
  --zp-bg:#0f1114;--zp-panel:#171a1f;--zp-panel-2:#1f232a;--zp-ink:#f3efe6;--zp-dim:#b9b4a8;--zp-mute:#8a857b;
  --zp-line:rgba(255,255,255,.09);--zp-line-2:rgba(255,255,255,.17);
  --zp-accent:#ffc62b;--zp-accent-2:#f2a900;--zp-accent-ink:#1a1405;--zp-ok:#4cd39b;--zp-bad:#ff7a6b;
  --zp-radius:16px;--zp-ease:cubic-bezier(.25,1,.5,1);--zp-ease-io:cubic-bezier(.65,0,.35,1);
  --zp-font-h:system-ui,sans-serif;--zp-font-b:system-ui,sans-serif;--zp-font-m:ui-monospace,monospace;
  --zp-glow:0 0 0 1px rgba(255,198,43,.35),0 18px 60px -12px rgba(255,198,43,.28);
  /* surfaces: every fill below goes through these, so a light section only swaps tokens (.zp-light) */
  --zp-fill-1:rgba(255,255,255,.035);--zp-fill-2:rgba(255,255,255,.075);--zp-fill-3:rgba(255,255,255,.14);
  --zp-toast-bg:rgba(15,17,20,.92);--zp-shade:rgba(0,0,0,.7);--zp-accent-text:var(--zp-accent);--zp-ok-text:var(--zp-ok);
  --zp-header-bg:rgba(15,17,20,.72);--zp-header-bg-2:rgba(15,17,20,.92);--zp-nav-bg:rgba(15,17,20,.98);
}
/* A light section (or a whole light site): same components, light tokens. Accent text turns amber so it stays readable. */
.zp-light{--zp-bg:#f4f1ea;--zp-panel:#fff;--zp-panel-2:#fff;--zp-ink:#1b1d21;--zp-dim:#55524b;--zp-mute:#6f6b62;
  --zp-line:rgba(0,0,0,.09);--zp-line-2:rgba(0,0,0,.16);--zp-fill-1:rgba(0,0,0,.025);--zp-fill-2:rgba(0,0,0,.055);--zp-fill-3:rgba(0,0,0,.16);
  --zp-toast-bg:#fff;--zp-shade:rgba(40,32,10,.22);--zp-accent-text:#8a5c00;--zp-ok-text:#16794f;
  --zp-header-bg:rgba(244,241,234,.78);--zp-header-bg-2:rgba(244,241,234,.95);--zp-nav-bg:rgba(244,241,234,.99);
  background:var(--zp-bg);color:var(--zp-ink)}
[hidden]{display:none!important}
/* Decoration layer: orbs, streaks and glows never widen the page (det-widths) */
.zp-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.zp-clip,.zp-grid-bg,:has(>.zp-orb){overflow:hidden;overflow:clip}

/* ---------- 1. Reveal on scroll (motion-reveal) ---------- */
.zp-js:not(.zp-rm) [data-zp-reveal]{opacity:0;transform:translate3d(0,28px,0) scale(.91);
  transition:opacity .48s var(--zp-ease),transform .48s var(--zp-ease);transition-delay:var(--zp-d,0ms);will-change:opacity,transform}
.zp-js:not(.zp-rm) [data-zp-reveal="hero"]{transition-duration:1s,1s;transform:translate3d(0,36px,0) scale(.96)}
.zp-js:not(.zp-rm) [data-zp-reveal="left"]{transform:translate3d(-40px,0,0)}
.zp-js:not(.zp-rm) [data-zp-reveal="right"]{transform:translate3d(40px,0,0)}
.zp-js:not(.zp-rm) [data-zp-reveal="zoom"]{transform:scale(1.08);opacity:0}
.zp-js:not(.zp-rm) [data-zp-reveal].zp-in{opacity:1;transform:none}

/* ---------- 2. Hero: full-bleed photo + parallax (img-cinematic, img-no-boxed-hero, motion-parallax) ---------- */
[data-zp-hero]{position:relative;overflow:hidden;isolation:isolate;min-height:min(94vh,900px);display:flex;align-items:center}
[data-zp-hero] .zp-hero-media{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;z-index:-2;
  object-position:var(--zp-hero-pos,60% 50%);will-change:transform}
[data-zp-hero]::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--zp-hero-shade,linear-gradient(90deg,rgba(10,11,13,.94) 0%,rgba(10,11,13,.78) 38%,rgba(10,11,13,.25) 72%,rgba(10,11,13,.1) 100%),
  linear-gradient(0deg,rgba(10,11,13,.9) 0%,rgba(10,11,13,0) 35%))}
@media (max-width:900px){[data-zp-hero]::after{background:var(--zp-hero-shade-m,linear-gradient(0deg,rgba(10,11,13,.96) 18%,rgba(10,11,13,.55) 60%,rgba(10,11,13,.35) 100%))}
  [data-zp-hero]{align-items:flex-end;min-height:min(100svh,820px)}}
.zp-hero-in{position:relative;width:100%}
/* One photo per trade, following the typing word (X.heroSwap): a slow crossfade and a gentle settle-in zoom */
[data-zp-hero] .zp-hero-media[data-zp-word]{opacity:0;transition:opacity 1.4s var(--zp-ease)}
[data-zp-hero] .zp-hero-media[data-zp-word].zp-on,html:not(.zp-js) [data-zp-hero] .zp-hero-media[data-zp-word="0"]{opacity:1}
.zp-js:not(.zp-rm) [data-zp-hero] .zp-hero-media[data-zp-word].zp-on{animation:zp-settle 8s var(--zp-ease) both}
@keyframes zp-settle{from{scale:1.07}to{scale:1}}
.zp-band{position:relative;overflow:hidden;isolation:isolate;min-height:min(78vh,720px);display:flex;align-items:center}
.zp-band>img.zp-band-media{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover;z-index:-2}
.zp-band::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--zp-band-shade,linear-gradient(180deg,rgba(10,11,13,.82),rgba(10,11,13,.55) 45%,rgba(10,11,13,.88)))}

/* ---------- 3. Type details: accent gradient text, typing word, badge with pulse ---------- */
.zp-grad{background:linear-gradient(92deg,var(--zp-accent),var(--zp-accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
[data-zp-type]{white-space:nowrap}
@media (max-width:600px){[data-zp-type]{white-space:normal}}
[data-zp-type]::after{content:"";display:inline-block;width:.08em;height:.92em;margin-left:.06em;vertical-align:-.08em;background:currentColor;animation:zp-caret 1s steps(1) infinite}
.zp-rm [data-zp-type]::after{display:none}
@keyframes zp-caret{50%{opacity:0}}
.zp-badge{display:inline-flex;align-items:center;gap:9px;padding:7px 14px;border-radius:999px;border:1px solid var(--zp-line-2);
  background:var(--zp-fill-1);font:600 12.5px/1 var(--zp-font-m);letter-spacing:.12em;text-transform:uppercase;color:var(--zp-dim)}
.zp-dot{width:8px;height:8px;border-radius:50%;background:var(--zp-ok);box-shadow:0 0 0 0 rgba(76,211,155,.55);animation:zp-pulse 2s infinite;flex:none}
.zp-dot.zp-y{background:var(--zp-accent);animation-name:zp-pulse-y}
@keyframes zp-pulse{0%{box-shadow:0 0 0 0 rgba(76,211,155,.55)}70%{box-shadow:0 0 0 9px rgba(76,211,155,0)}100%{box-shadow:0 0 0 0 rgba(76,211,155,0)}}
@keyframes zp-pulse-y{0%{box-shadow:0 0 0 0 rgba(255,198,43,.55)}70%{box-shadow:0 0 0 9px rgba(255,198,43,0)}100%{box-shadow:0 0 0 0 rgba(255,198,43,0)}}
.zp-micro{font:600 12px/1.3 var(--zp-font-m);letter-spacing:.16em;text-transform:uppercase;color:var(--zp-accent-text);display:inline-flex;gap:10px;align-items:center}
.zp-micro::before{content:"";width:22px;height:2px;background:currentColor}

/* ---------- 4. Numbers and bars (motion-count) ---------- */
.zp-stats{display:grid;grid-template-columns:repeat(var(--zp-cols,3),1fr)}
.zp-stats>*{padding:10px 26px;text-align:center;border-left:1px solid var(--zp-line)}
.zp-stats>*:first-child{border-left:0}
.zp-stat-n{font:800 clamp(30px,4vw,46px)/1.05 var(--zp-font-h);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.zp-stat-l{color:var(--zp-dim);font-size:14.5px;margin-top:8px}
@media (max-width:700px){.zp-stats{grid-template-columns:1fr}.zp-stats>*{border-left:0;border-top:1px solid var(--zp-line);padding:18px 8px}.zp-stats>*:first-child{border-top:0}}
.zp-bar{height:6px;border-radius:6px;background:var(--zp-fill-2);overflow:hidden}
.zp-bar>i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--zp-accent),var(--zp-accent-2));transition:width 1.4s var(--zp-ease)}
.zp-rm .zp-bar>i,.zp-bar.zp-in>i{width:var(--zp-v,0%)}

/* ---------- 5. Cards, grid background, orbs, streaks, ring portrait ---------- */
.zp-card{background:var(--zp-panel);border:1px solid var(--zp-line);border-radius:var(--zp-radius);transition:transform .35s var(--zp-ease),border-color .35s,box-shadow .35s}
.zp-card:hover{transform:translateY(-4px);border-color:var(--zp-line-2);box-shadow:0 24px 50px -24px var(--zp-shade)}
.zp-grid-bg{position:relative;isolation:isolate}
.zp-grid-bg::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--zp-line) 1px,transparent 1px),linear-gradient(90deg,var(--zp-line) 1px,transparent 1px);
  background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 80%)}
.zp-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.28;pointer-events:none;z-index:-1;
  width:var(--zp-orb-s,420px);height:var(--zp-orb-s,420px);background:var(--zp-orb-c,var(--zp-accent));animation:zp-drift 18s ease-in-out infinite alternate}
@keyframes zp-drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(40px,-30px,0) scale(1.08)}100%{transform:translate3d(-30px,24px,0) scale(.95)}}
.zp-streaks{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;opacity:.55}
.zp-streaks::before,.zp-streaks::after{content:"";position:absolute;width:160%;height:140px;left:-30%;top:30%;
  background:linear-gradient(90deg,transparent,rgba(255,198,43,.0) 20%,rgba(255,198,43,.35) 50%,rgba(242,169,0,0) 80%,transparent);
  filter:blur(18px);transform:rotate(-12deg);animation:zp-streak 14s ease-in-out infinite}
.zp-streaks::after{top:58%;transform:rotate(-8deg);animation-duration:19s;animation-direction:reverse;opacity:.6}
@keyframes zp-streak{0%,100%{translate:-6% 0}50%{translate:6% -14px}}
.zp-ring{position:relative;display:inline-grid;place-items:center;border-radius:50%;padding:6px;isolation:isolate}
.zp-ring::before{content:"";position:absolute;inset:0;border-radius:50%;z-index:-1;
  background:conic-gradient(from 0deg,var(--zp-accent),var(--zp-accent-2),transparent 55%,var(--zp-accent));animation:zp-spin 6s linear infinite;filter:drop-shadow(0 0 18px rgba(255,198,43,.45))}
.zp-ring>img{border-radius:50%;display:block;width:var(--zp-ring-s,220px);height:var(--zp-ring-s,220px);object-fit:cover;border:5px solid var(--zp-bg)}
@keyframes zp-spin{to{transform:rotate(360deg)}}

/* ---------- 6. Header, burger, dropdown (det-burger, det-mobile) ---------- */
.zp-header{position:sticky;top:0;z-index:60;background:var(--zp-header-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
.zp-header.zp-scrolled{background:var(--zp-header-bg-2);border-bottom-color:var(--zp-line)}
.zp-nav{display:flex;align-items:center;gap:clamp(16px,2.2vw,30px)}
.zp-nav>a,.zp-dd>button{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0;border:0;background:none;color:var(--zp-dim);
  font:inherit;text-decoration:none;cursor:pointer;transition:color .2s}
.zp-nav>a:hover,.zp-dd>button:hover,.zp-nav>a[aria-current="page"],.zp-dd.zp-open>button{color:var(--zp-ink)}
.zp-dd>button::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;rotate:45deg;translate:0 -2px;transition:rotate .25s var(--zp-ease),translate .25s var(--zp-ease)}
.zp-dd.zp-open>button::after,.zp-dd:hover>button::after{rotate:225deg;translate:0 2px}
.zp-burger{display:none;width:46px;height:46px;border-radius:12px;border:1px solid var(--zp-line-2);background:transparent;color:var(--zp-ink);cursor:pointer;place-items:center}
.zp-burger span,.zp-burger span::before,.zp-burger span::after{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;position:relative;transition:transform .3s var(--zp-ease),opacity .2s}
.zp-burger span::before,.zp-burger span::after{content:"";position:absolute;left:0}
.zp-burger span::before{top:-6px}.zp-burger span::after{top:6px}
.zp-burger[aria-expanded="true"] span{background:transparent}
.zp-burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.zp-burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:900px){
  .zp-burger{display:grid}
  .zp-nav{position:fixed;inset:var(--zp-header-h,66px) 0 auto 0;max-height:calc(100svh - var(--zp-header-h,66px));overflow:auto;background:var(--zp-nav-bg);
    border-bottom:1px solid var(--zp-line);padding:10px 20px 22px;flex-direction:column;align-items:stretch;gap:2px;
    transform:translateY(-12px);opacity:0;visibility:hidden;transition:transform .3s var(--zp-ease),opacity .25s,visibility 0s .3s}
  .zp-nav.zp-open{transform:none;opacity:1;visibility:visible;transition:transform .3s var(--zp-ease),opacity .25s}
  .zp-nav>a,.zp-nav .zp-dd>button{display:flex;width:100%;justify-content:space-between;min-height:50px;padding:0 6px;font-size:17px;color:var(--zp-ink);border-bottom:1px solid var(--zp-line)}
  html.zp-lock,html.zp-lock body{overflow:hidden}
}
.zp-dd{position:relative}
.zp-dd:has(>.zp-mega){position:static}
.zp-dd-panel{position:absolute;top:calc(100% + 10px);left:50%;translate:-50% 0;min-width:280px;padding:10px;border-radius:14px;background:var(--zp-panel);
  border:1px solid var(--zp-line-2);box-shadow:0 30px 70px -20px var(--zp-shade);opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .22s var(--zp-ease)}
.zp-dd:hover .zp-dd-panel,.zp-dd:focus-within .zp-dd-panel,.zp-dd.zp-open .zp-dd-panel{opacity:1;visibility:visible;transform:none}
@media (max-width:900px){.zp-dd-panel{position:static;translate:none;min-width:0;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 0 12px;background:none}}

/* ---------- 7. Talk button (fn-talk-button) ---------- */
.zp-talk{position:fixed;right:18px;bottom:18px;z-index:70;display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:999px;
  background:var(--zp-panel-2);border:1px solid var(--zp-line-2);color:var(--zp-ink);text-decoration:none;font:700 14.5px/1 var(--zp-font-h);
  box-shadow:0 18px 40px -12px rgba(0,0,0,.6);opacity:0;transform:translateY(16px) scale(.9);transition:opacity .5s var(--zp-ease),transform .5s var(--zp-ease)}
.zp-talk.zp-in,.zp-rm .zp-talk,html:not(.zp-js) .zp-talk{opacity:1;transform:none}
.zp-talk-ic{position:relative;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--zp-accent),var(--zp-accent-2));color:var(--zp-accent-ink)}
.zp-talk-ic::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--zp-accent);animation:zp-ping 2.4s var(--zp-ease) infinite}
@keyframes zp-ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.75);opacity:0}}
@media (max-width:600px){.zp-talk{left:12px;right:12px;bottom:12px;justify-content:center}.zp-talk-lbl{font-size:15px}}
body.zp-has-talk{padding-bottom:0}
@media (max-width:600px){body.zp-has-talk{padding-bottom:76px}}

/* ---------- 8. Sliding rows (marquee) and logos with spotlight ---------- */
[data-zp-marquee]{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.zp-mq-track{display:flex;width:max-content;animation:zp-mq var(--zp-mq-dur,40s) linear infinite}
.zp-mq-track>*{margin-right:var(--zp-mq-gap,14px);flex:none}
[data-zp-dir="right"] .zp-mq-track{animation-direction:reverse}
[data-zp-marquee]:hover .zp-mq-track{animation-play-state:paused}
@keyframes zp-mq{to{transform:translateX(-50%)}}
.zp-rm [data-zp-marquee]{overflow-x:auto}.zp-rm .zp-mq-track{animation:none}
.zp-pill{display:inline-flex;align-items:center;gap:10px;padding:14px 20px;border-radius:14px;background:var(--zp-panel);border:1px solid var(--zp-line);
  white-space:nowrap;font:600 15px/1 var(--zp-font-b);color:var(--zp-ink)}
.zp-pill svg{width:20px;height:20px;flex:none;color:var(--zp-dim)}
.zp-logos{display:grid;grid-template-columns:repeat(var(--zp-cols,4),1fr);border:1px solid var(--zp-line);border-radius:var(--zp-radius);overflow:hidden}
.zp-logos>*{position:relative;display:grid;place-items:center;min-height:120px;border-right:1px solid var(--zp-line);border-bottom:1px solid var(--zp-line);
  filter:grayscale(1);opacity:.62;transition:opacity .3s,filter .3s}
.zp-logos>*::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s;background:radial-gradient(180px circle at var(--x,50%) var(--y,50%),rgba(255,198,43,.16),transparent 70%)}
.zp-logos>*:hover{filter:none;opacity:1}.zp-logos>*:hover::before{opacity:1}
@media (max-width:700px){.zp-logos{grid-template-columns:repeat(2,1fr)}.zp-logos>*{min-height:96px}}

/* ---------- 9. FAQ accordion with a sticky title ---------- */
.zp-faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.zp-faq-head{position:sticky;top:100px}
@media (max-width:900px){.zp-faq{grid-template-columns:1fr;gap:24px}.zp-faq-head{position:static}}
.zp-faq-item{border-bottom:1px solid var(--zp-line)}
.zp-faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:64px;padding:12px 0;font:700 17px/1.35 var(--zp-font-h)}
.zp-faq-item summary::-webkit-details-marker{display:none}
.zp-faq-item summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--zp-line-2);display:grid;place-items:center;
  font:400 20px/1 var(--zp-font-b);color:var(--zp-accent-text);transition:transform .35s var(--zp-ease)}
.zp-faq-item[open] summary::after{transform:rotate(45deg)}
.zp-faq-item .zp-faq-a{overflow:hidden;color:var(--zp-dim);padding:0 0 18px}

/* ---------- 10. Mini-screens (motion-screens): window, phone, chips, toasts, notifications ---------- */
.zp-win{background:linear-gradient(180deg,var(--zp-panel-2),var(--zp-panel));border:1px solid var(--zp-line-2);border-radius:18px;overflow:hidden;
  box-shadow:0 40px 90px -40px var(--zp-shade),0 0 0 1px rgba(0,0,0,.06)}
.zp-win-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--zp-line);font:500 12px/1.2 var(--zp-font-m);color:var(--zp-mute);white-space:nowrap}
.zp-win-bar i{width:9px;height:9px;border-radius:50%;background:var(--zp-fill-3);flex:none}
.zp-win-t{min-width:0;overflow:hidden;text-overflow:ellipsis}
.zp-win-bar .zp-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--zp-ok-text);font-weight:700;letter-spacing:.1em;flex:none}
.zp-win-body{padding:18px;position:relative}
.zp-phone{position:relative;width:min(280px,78vw);aspect-ratio:9/18.5;border-radius:42px;padding:12px;background:#0b0c0e;border:2px solid #2a2e35;
  box-shadow:0 50px 90px -40px rgba(0,0,0,.85),inset 0 0 0 6px #121418}
.zp-phone::before{content:"";position:absolute;top:18px;left:50%;translate:-50% 0;width:34%;height:22px;border-radius:12px;background:#000;z-index:2}
.zp-phone-screen{position:relative;height:100%;border-radius:32px;overflow:hidden;background:linear-gradient(180deg,#15181d,#0f1114);padding:52px 14px 16px}
.zp-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;border:1px solid var(--zp-line-2);font:600 12.5px/1 var(--zp-font-b);color:var(--zp-mute);
  transition:all .45s var(--zp-ease)}
.zp-chip.zp-on{color:var(--zp-accent-ink);background:var(--zp-accent);border-color:var(--zp-accent)}
.zp-chip.zp-ok-chip.zp-on{background:rgba(76,211,155,.14);color:var(--zp-ok-text);border-color:rgba(76,211,155,.5)}
.zp-toast{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--zp-toast-bg);border:1px solid var(--zp-line-2);
  box-shadow:0 20px 50px -20px var(--zp-shade);font-size:14px;line-height:1.35;color:var(--zp-ink)}
.zp-toast b{display:block;font-family:var(--zp-font-h)}
.zp-toast small{color:var(--zp-mute)}
.zp-toast .zp-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;background:rgba(255,198,43,.14);color:var(--zp-accent-text)}
.zp-toast.zp-ok-t .zp-ic{background:rgba(76,211,155,.14);color:var(--zp-ok-text)}
.zp-float{position:absolute;z-index:3}
.zp-bob{animation:zp-bob 5.5s ease-in-out infinite}
@keyframes zp-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.zp-rm .zp-bob{animation:none}

/* ---------- 11. The sequencer ([data-zp-seq]): what « on » means for each part ---------- */
.zp-js:not(.zp-rm) [data-zp-seq] [data-zp-at]:not(.zp-chip):not([data-zp-check]):not(.zp-switch):not([data-zp-moveto]){opacity:0;transform:translateY(10px) scale(.98);transition:opacity .45s var(--zp-ease),transform .45s var(--zp-ease)}
.zp-js:not(.zp-rm) [data-zp-seq] [data-zp-at].zp-on:not(.zp-chip):not([data-zp-check]):not(.zp-switch):not([data-zp-moveto]){opacity:1;transform:none}
.zp-js:not(.zp-rm) [data-zp-seq] [data-zp-at][data-zp-from="left"]{transform:translateX(-16px)}
.zp-js:not(.zp-rm) [data-zp-seq] [data-zp-at][data-zp-from="right"]{transform:translateX(16px)}
.zp-js:not(.zp-rm) [data-zp-seq] [data-zp-at][data-zp-from="pop"]{transform:scale(.8)}
[data-zp-typed].zp-typing::after{content:"";display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-.15em;background:var(--zp-accent);animation:zp-caret .8s steps(1) infinite}
.zp-typing-dots{display:inline-flex;gap:4px;padding:10px 12px;border-radius:14px;background:var(--zp-fill-2)}
.zp-typing-dots i{width:6px;height:6px;border-radius:50%;background:var(--zp-dim);animation:zp-td 1.2s infinite}
.zp-typing-dots i:nth-child(2){animation-delay:.15s}.zp-typing-dots i:nth-child(3){animation-delay:.3s}
@keyframes zp-td{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
[data-zp-check]{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:12px;border:1px solid var(--zp-line);background:var(--zp-fill-1);
  color:var(--zp-mute);transition:color .4s,border-color .4s,background .4s}
[data-zp-check]::before{content:"";width:18px;height:18px;border-radius:50%;flex:none;border:2px solid var(--zp-line-2);border-top-color:var(--zp-accent);animation:zp-spin .8s linear infinite}
[data-zp-check].zp-on{color:var(--zp-ink);border-color:var(--zp-line-2)}
[data-zp-check].zp-on::before{animation:none;border:0;background:var(--zp-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%231a1405' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.zp-rm [data-zp-check]::before{animation:none}
.zp-switch{position:relative;width:42px;height:24px;border-radius:999px;background:var(--zp-fill-3);flex:none;transition:background .4s var(--zp-ease)}
.zp-switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .4s var(--zp-ease)}
.zp-switch.zp-on{background:var(--zp-ok)}.zp-switch.zp-on::after{transform:translateX(18px)}
.zp-rm .zp-switch{background:var(--zp-ok)}.zp-rm .zp-switch::after{transform:translateX(18px)}
[data-zp-moveto]{transition:none}
.zp-eq{display:flex;align-items:center;gap:3px;height:var(--zp-eq-h,46px)}
.zp-eq i{flex:1;min-width:2px;border-radius:2px;background:linear-gradient(180deg,var(--zp-accent),var(--zp-accent-2));height:100%;transform:scaleY(.25);animation:zp-eq 1.1s ease-in-out infinite}
@keyframes zp-eq{0%,100%{transform:scaleY(.22)}50%{transform:scaleY(var(--zp-eq-max,1))}}
.zp-rm .zp-eq i{animation:none;transform:scaleY(.5)}
.zp-ringing{position:relative;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--zp-accent),var(--zp-accent-2));color:var(--zp-accent-ink)}
.zp-ringing::before,.zp-ringing::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--zp-accent);animation:zp-ping 2.6s var(--zp-ease) infinite}
.zp-ringing::after{animation-delay:1.3s}
.zp-ringing svg{animation:zp-shake 2.6s ease-in-out infinite}
@keyframes zp-shake{0%,30%,100%{transform:rotate(0)}5%,15%,25%{transform:rotate(-14deg)}10%,20%{transform:rotate(14deg)}}
.zp-rm .zp-ringing::before,.zp-rm .zp-ringing::after,.zp-rm .zp-ringing svg{animation:none}
.zp-bubble{width:fit-content;max-width:82%;padding:10px 13px;border-radius:16px;font-size:13.5px;line-height:1.4;background:var(--zp-fill-2);color:var(--zp-ink);margin:6px 0}
.zp-bubble.zp-me{margin-left:auto;background:linear-gradient(135deg,var(--zp-accent),var(--zp-accent-2));color:var(--zp-accent-ink);border-bottom-right-radius:5px}
.zp-bubble.zp-them{border-bottom-left-radius:5px}
.zp-field{display:block;padding:10px 12px;border-radius:10px;background:var(--zp-fill-1);border:1px solid var(--zp-line);font-size:13.5px;min-height:38px;color:var(--zp-ink)}
.zp-field-l{display:block;font:600 11px/1 var(--zp-font-m);letter-spacing:.1em;text-transform:uppercase;color:var(--zp-mute);margin:12px 0 6px}

/* ---------- 12. Flow diagram, chain, radar, chart (SVG components built by the script) ---------- */
/* Flow and chain are real text boxes laid out by CSS (readable at any width); .zp-wires is the SVG layer behind them
 * that the script redraws between the boxes. Below ~460px wide they stack top to bottom and the wires follow. */
.zp-chart svg{display:block;width:100%;height:auto;overflow:visible}
.zp-flow,.zp-chain{position:relative;container-type:inline-size}
.zp-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.zp-wire{fill:none;stroke:var(--zp-accent);stroke-opacity:.6;stroke-width:1.6;stroke-linecap:round}
.zp-wire.zp-hi{stroke:var(--zp-ok);stroke-opacity:.8}
.zp-js:not(.zp-rm) .zp-flow:not(.zp-in) .zp-wire,.zp-js:not(.zp-rm) .zp-chain:not(.zp-in) .zp-wire{stroke-dasharray:var(--zp-len,600);stroke-dashoffset:var(--zp-len,600)}
.zp-flow.zp-in .zp-wire,.zp-chain.zp-in .zp-wire{stroke-dasharray:var(--zp-len,600);stroke-dashoffset:0;transition:stroke-dashoffset 1s var(--zp-ease) var(--zp-wd,0s)}
.zp-pk{fill:var(--zp-accent);filter:drop-shadow(0 0 5px var(--zp-accent))}
.zp-flow .zp-pk{opacity:0;transition:opacity .5s}.zp-flow.zp-in .zp-pk{opacity:1;transition-delay:1.5s}
.zp-flow-grid,.zp-chain-grid{position:relative;z-index:1}
.zp-flow-grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:clamp(36px,10cqi,96px);padding:6px 0}
.zp-flow-col{display:grid;gap:10px}
.zp-fnode,.zp-cnode{position:relative;display:flex;align-items:center;justify-content:center;min-height:38px;padding:8px 12px;border-radius:11px;
  background:var(--zp-panel-2);border:1px solid var(--zp-line-2);font:600 13px/1.2 var(--zp-font-b);color:var(--zp-ink);text-align:center;
  box-shadow:0 8px 20px -14px var(--zp-shade);transition:border-color .4s,background .4s,box-shadow .4s}
.zp-fnode.zp-hi{border-color:var(--zp-ok);box-shadow:0 0 0 3px rgba(76,211,155,.14)}
.zp-flow-hub{display:grid;justify-items:center;gap:3px;padding:14px 18px;border-radius:16px;text-align:center;color:var(--zp-accent-ink);
  background:linear-gradient(135deg,var(--zp-accent),var(--zp-accent-2));box-shadow:var(--zp-glow)}
.zp-flow-hub b{font:800 16px/1.1 var(--zp-font-h)}
.zp-flow-hub small{font:600 11.5px/1.25 var(--zp-font-b);opacity:.85;max-width:15ch}
.zp-js:not(.zp-rm) .zp-flow.zp-in .zp-flow-hub{animation:zp-hubp 2.8s ease-in-out 1.4s infinite}
@keyframes zp-hubp{0%,100%{box-shadow:0 0 0 1px rgba(255,198,43,.35),0 18px 60px -12px rgba(255,198,43,.28)}50%{box-shadow:0 0 0 8px rgba(255,198,43,.10),0 18px 74px -6px rgba(255,198,43,.5)}}
@container (max-width:460px){
  .zp-flow-grid{grid-template-columns:minmax(0,1fr);row-gap:40px;justify-items:center}
  .zp-flow-col{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
  .zp-fnode{padding:7px 11px;font-size:12.5px}}
.zp-chain-grid{display:grid;grid-template-columns:repeat(var(--zp-cols,4),minmax(0,1fr));column-gap:clamp(24px,6cqi,60px);align-items:center;padding:10px 0 16px}
.zp-chain-col{display:grid;gap:12px}
.zp-cnode{font-size:12.5px;padding:8px 10px}
.zp-cnode.zp-on{border-color:var(--zp-accent);background:rgba(255,198,43,.1);background:color-mix(in srgb,var(--zp-accent) 12%,var(--zp-panel-2))}
.zp-cnode .zp-tick{position:absolute;top:-7px;right:-7px;width:17px;height:17px;border-radius:50%;opacity:0;transform:scale(.4);transition:opacity .3s,transform .35s var(--zp-ease);
  background:var(--zp-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%230f1114' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat}
.zp-cnode.zp-on .zp-tick{opacity:1;transform:none}
@container (max-width:520px){
  .zp-chain-grid{grid-template-columns:minmax(0,1fr);row-gap:30px;justify-items:center}
  .zp-chain-col{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}}
.zp-chain-foot{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;padding:10px 2px 0;border-top:1px solid var(--zp-line);font:500 12px/1.3 var(--zp-font-m);color:var(--zp-mute)}
.zp-radar{position:relative;width:min(360px,100%);aspect-ratio:1;margin:0 auto}
.zp-radar-rings{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:repeating-radial-gradient(circle,transparent 0 calc(25% - 1px),var(--zp-line-2) calc(25% - 1px) 25%)}
.zp-radar-sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(255,198,43,.45),rgba(255,198,43,0) 22%,transparent 100%);animation:zp-spin 4s linear infinite}
.zp-radar-core{position:absolute;left:50%;top:50%;translate:-50% -50%;display:grid;justify-items:center;gap:6px;font:700 11px/1 var(--zp-font-m);letter-spacing:.1em;text-transform:uppercase;color:var(--zp-dim)}
.zp-radar-core b{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--zp-accent),var(--zp-accent-2));color:var(--zp-accent-ink);box-shadow:var(--zp-glow)}
.zp-radar-node{position:absolute;translate:-50% -50%;padding:7px 11px;border-radius:999px;font:600 12.5px/1 var(--zp-font-b);background:var(--zp-panel-2);border:1px solid var(--zp-line-2);white-space:nowrap;transition:border-color .4s,box-shadow .4s}
.zp-radar-node.zp-on{border-color:var(--zp-accent);box-shadow:0 0 0 4px rgba(255,198,43,.12)}
.zp-rm .zp-radar-sweep{animation:none}
.zp-chart .zp-line{fill:none;stroke:var(--zp-accent);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.zp-chart .zp-grid{stroke:var(--zp-line);stroke-width:1}
.zp-chart .zp-lbl{fill:var(--zp-mute);font:500 11px var(--zp-font-m)}
.zp-chart .zp-end{fill:var(--zp-panel);stroke:var(--zp-accent);stroke-width:3;filter:drop-shadow(0 0 6px var(--zp-accent))}
.zp-js:not(.zp-rm) .zp-chart:not(.zp-in) .zp-line{stroke-dasharray:var(--zp-len,1000);stroke-dashoffset:var(--zp-len,1000)}
.zp-js:not(.zp-rm) .zp-chart:not(.zp-in) .zp-area,.zp-js:not(.zp-rm) .zp-chart:not(.zp-in) .zp-end{opacity:0}
.zp-chart.zp-in .zp-line{stroke-dasharray:var(--zp-len,1000);stroke-dashoffset:0;transition:stroke-dashoffset 1.8s var(--zp-ease)}
.zp-chart .zp-area,.zp-chart .zp-end{transition:opacity .8s 1.2s}

/* ---------- 13. Scroll stories: pinned steps, sticky phone story, timeline ---------- */
/* Pinned steps are stacked by default (no script, phones, reduced motion, a frame that cannot scroll); the script adds
 * .zp-ps-on when the page can pin them, and only then do they slide sideways. Heights are capped (det-embed). */
[data-zp-pinsteps]{position:relative}
.zp-ps-on .zp-ps-sticky{position:sticky;top:0;height:min(100vh,1400px);overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.zp-ps-on .zp-ps-view{overflow:hidden}
.zp-ps-dots{display:none;justify-content:center;gap:0;margin:0 auto 28px;width:min(760px,90%);position:relative}
.zp-ps-on .zp-ps-dots{display:flex}
.zp-ps-dots::before{content:"";position:absolute;left:12.5%;right:12.5%;top:15px;height:2px;background:var(--zp-line-2)}
.zp-ps-dots::after{content:"";position:absolute;left:12.5%;top:15px;height:2px;width:calc(75% * var(--zp-p,0));background:linear-gradient(90deg,var(--zp-accent),var(--zp-accent-2));transition:width .2s linear}
.zp-ps-dot{flex:1;display:grid;justify-items:center;gap:8px;position:relative;z-index:1;font:600 13px/1.2 var(--zp-font-b);color:var(--zp-mute);text-align:center}
.zp-ps-dot b{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--zp-panel-2);border:1px solid var(--zp-line-2);font:700 12px/1 var(--zp-font-m);transition:all .35s var(--zp-ease)}
.zp-ps-dot.zp-on{color:var(--zp-ink)}.zp-ps-dot.zp-on b{background:linear-gradient(135deg,var(--zp-accent),var(--zp-accent-2));color:var(--zp-accent-ink);border-color:transparent;box-shadow:var(--zp-glow)}
.zp-ps-track{display:flex;flex-direction:column;gap:56px}
.zp-ps-step{display:grid;grid-template-columns:1fr;gap:22px;align-items:center;width:100%;max-width:1228px;margin:0 auto;padding:0 20px}
.zp-ps-num{font:800 80px/0.9 var(--zp-font-h);color:transparent;-webkit-text-stroke:1.5px rgba(255,198,43,.45);letter-spacing:-.04em}
@media (min-width:901px){.zp-ps-step{grid-template-columns:.9fr 1.1fr;gap:48px;padding:0 24px}.zp-ps-num{font-size:120px}}
.zp-ps-on .zp-ps-track{flex-direction:row;gap:0;will-change:transform}
.zp-ps-on .zp-ps-step{flex:0 0 100%;max-width:none;margin:0;padding:0 max(24px,calc((100% - 1180px)/2));opacity:.25;transition:opacity .4s}
.zp-ps-on .zp-ps-step.zp-on{opacity:1}
[data-zp-story]{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.zp-story-media{position:sticky;top:clamp(90px,calc(50vh - 300px),260px);display:grid;justify-items:center}
.zp-story-screen{grid-area:1/1;opacity:0;transform:scale(.97);transition:opacity .45s var(--zp-ease),transform .45s var(--zp-ease)}
.zp-story-screen.zp-on{opacity:1;transform:none}
.zp-story-step{min-height:min(62vh,640px);display:flex;align-items:center;opacity:.35;transition:opacity .4s}
.zp-story-step.zp-on{opacity:1}
@media (max-width:900px){[data-zp-story]{grid-template-columns:1fr;gap:0}
  .zp-story-media{top:var(--zp-header-h,66px);z-index:2;margin:0 -20px;padding:8px 20px 22px;background:linear-gradient(180deg,var(--zp-bg) 86%,transparent)}
  .zp-story-media .zp-phone{width:min(230px,54vw);border-radius:34px;padding:9px}
  .zp-story-media .zp-phone-screen{border-radius:26px;padding:44px 10px 12px}
  .zp-story-step{min-height:min(44vh,420px);align-items:flex-start;padding:4px 0 0}.zp-story-step:last-child{min-height:min(62vh,600px)}}
.zp-rm .zp-story-screen{transition:none}
[data-zp-timeline]{position:relative;padding-left:34px}
[data-zp-timeline]::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--zp-line-2)}
.zp-tl-fill{position:absolute;left:9px;top:6px;width:2px;height:calc((100% - 12px) * var(--zp-p,0));background:linear-gradient(180deg,var(--zp-accent),var(--zp-accent-2))}
[data-zp-timeline]>.zp-tl-item{position:relative;padding:0 0 34px}
[data-zp-timeline]>.zp-tl-item::before{content:"";position:absolute;left:-31px;top:4px;width:14px;height:14px;border-radius:50%;background:var(--zp-panel-2);border:2px solid var(--zp-line-2);transition:all .35s}
[data-zp-timeline]>.zp-tl-item.zp-on::before{background:var(--zp-accent);border-color:var(--zp-accent);box-shadow:0 0 0 5px rgba(255,198,43,.15)}

/* ---------- 14. Interactive: tabs, day timeline, quiz, range sliders ---------- */
.zp-tabs-bar{display:inline-flex;flex-wrap:wrap;gap:6px;padding:5px;border-radius:14px;background:var(--zp-fill-1);border:1px solid var(--zp-line)}
.zp-tab{min-height:44px;padding:0 16px;border-radius:10px;border:0;background:transparent;color:var(--zp-dim);font:600 14.5px/1 var(--zp-font-b);cursor:pointer;transition:background .25s,color .25s}
.zp-tab[aria-selected="true"]{background:var(--zp-panel-2);color:var(--zp-ink);box-shadow:inset 0 0 0 1px var(--zp-line-2)}
[data-zp-panel]{animation:zp-fade-in .45s var(--zp-ease)}
[data-zp-panel][hidden]{display:none}
@keyframes zp-fade-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.zp-day-axis{position:relative;height:84px;margin:20px 6px 6px}
.zp-day-axis::before{content:"";position:absolute;left:0;right:0;top:40px;height:2px;background:var(--zp-line-2)}
.zp-day-closed{position:absolute;top:30px;height:22px;border-radius:6px;background:repeating-linear-gradient(-45deg,var(--zp-fill-2) 0 6px,transparent 6px 12px)}
.zp-day-call{position:absolute;top:33px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--zp-bad);box-shadow:0 0 0 4px rgba(255,122,107,.18);transition:background .5s var(--zp-ease),box-shadow .5s}
.zp-day-call.zp-ok{background:var(--zp-ok);box-shadow:0 0 0 4px rgba(76,211,155,.2)}
.zp-day-call.zp-ok.zp-rdv::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--zp-accent)}
.zp-day-h{position:absolute;top:62px;translate:-50% 0;font:500 11px/1 var(--zp-font-m);color:var(--zp-mute);white-space:nowrap}
@media (max-width:600px){.zp-day-h:nth-of-type(even){display:none}}
.zp-toggle{display:inline-flex;align-items:center;gap:12px;cursor:pointer;user-select:none;font:600 14.5px/1 var(--zp-font-b);min-height:44px}
.zp-toggle input{position:absolute;opacity:0;pointer-events:none}
.zp-toggle .zp-switch{background:var(--zp-fill-3)}
.zp-toggle input:checked+.zp-switch{background:var(--zp-ok)}.zp-toggle input:checked+.zp-switch::after{transform:translateX(18px)}
.zp-toggle input:focus-visible+.zp-switch{outline:3px solid var(--zp-accent);outline-offset:2px}
.zp-q{animation:zp-q-in .45s var(--zp-ease)}
.zp-q.zp-back{animation-name:zp-q-back}
@keyframes zp-q-in{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes zp-q-back{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
.zp-opt{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:12px 16px;border-radius:14px;border:1px solid var(--zp-line-2);background:var(--zp-fill-1);
  color:var(--zp-ink);font:600 15px/1.3 var(--zp-font-b);text-align:left;cursor:pointer;transition:border-color .25s,background .25s,transform .25s var(--zp-ease)}
.zp-opt:hover{border-color:var(--zp-accent);transform:translateY(-2px)}
.zp-opt::before{content:"";width:18px;height:18px;border-radius:50%;border:2px solid var(--zp-line-2);flex:none}
.zp-opt[aria-pressed="true"]{border-color:var(--zp-accent);background:rgba(255,198,43,.08)}.zp-opt[aria-pressed="true"]::before{border:5px solid var(--zp-accent)}
.zp-loader{width:46px;height:46px;border-radius:50%;border:3px solid var(--zp-line-2);border-top-color:var(--zp-accent);animation:zp-spin .9s linear infinite;margin:0 auto}
.zp-check-draw{width:64px;height:64px;margin:0 auto}
.zp-check-draw path{fill:none;stroke:var(--zp-accent);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:zp-draw .7s .15s var(--zp-ease) forwards}
.zp-check-draw circle{fill:none;stroke:rgba(255,198,43,.3);stroke-width:3}
@keyframes zp-draw{to{stroke-dashoffset:0}}
.zp-range{-webkit-appearance:none;appearance:none;width:100%;height:44px;border-radius:0;outline:none;cursor:pointer;
  background:linear-gradient(90deg,var(--zp-accent) 0 var(--zp-fill,50%),var(--zp-fill-3) var(--zp-fill,50%) 100%) center/100% 6px no-repeat}
.zp-range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:4px solid var(--zp-accent);box-shadow:0 2px 10px rgba(0,0,0,.4)}
.zp-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:4px solid var(--zp-accent)}
.zp-range:focus-visible{outline:3px solid var(--zp-accent);outline-offset:6px}

/* ---------- 15. Scroll cue, buttons glow ---------- */
.zp-scroll-cue{width:26px;height:42px;border-radius:14px;border:2px solid var(--zp-line-2);position:relative}
.zp-scroll-cue::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--zp-accent);animation:zp-cue 1.8s var(--zp-ease) infinite}
@keyframes zp-cue{0%{transform:translateY(0);opacity:1}80%,100%{transform:translateY(14px);opacity:0}}
.zp-glow-btn{position:relative;isolation:isolate}
.zp-glow-btn::after{content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:-1;background:linear-gradient(90deg,var(--zp-accent),var(--zp-accent-2),var(--zp-accent));
  background-size:200% 100%;filter:blur(12px);opacity:0;transition:opacity .35s;animation:zp-glowmove 4s linear infinite}
.zp-glow-btn:hover::after{opacity:.65}
@keyframes zp-glowmove{to{background-position:200% 0}}

/* Cycling states: one mini-screen, several states in turn ([data-zp-cycle] > .zp-state) */
[data-zp-cycle]{display:grid}
[data-zp-cycle]>.zp-state{grid-area:1/1;display:grid;justify-items:center;align-content:center;gap:6px;text-align:center;min-height:150px;
  opacity:0;transform:translateY(10px) scale(.98);transition:opacity .5s var(--zp-ease),transform .5s var(--zp-ease)}
[data-zp-cycle]>.zp-state.zp-on,html:not(.zp-js) [data-zp-cycle]>.zp-state:first-child{opacity:1;transform:none}
.zp-state b{font:700 17px/1.25 var(--zp-font-h)}.zp-state small{color:var(--zp-mute);font-size:13.5px}
.zp-state-ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:22px;background:rgba(255,198,43,.12);color:var(--zp-accent);margin-bottom:6px}
/* Real inputs styled as kit fields follow the section's light/dark scheme (native calendar included) */
input.zp-field,select.zp-field,textarea.zp-field{width:100%;font:inherit;font-size:14px;color-scheme:dark}
.zp-light input.zp-field,.zp-light select.zp-field,.zp-light textarea.zp-field{color-scheme:light}
[data-zp-hero]>.zp-scroll-cue{position:absolute;left:50%;bottom:28px;margin-left:-13px}
@media (max-width:900px){[data-zp-hero]>.zp-scroll-cue{display:none}}

/* Shine: a light sweep across a button or card every few seconds (one per screen, on the main action) */
.zp-shine{position:relative;overflow:hidden;isolation:isolate}
.zp-shine::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:38%;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);animation:zp-shine 5s ease-in-out 1.6s infinite}
@keyframes zp-shine{0%{left:-60%}24%,100%{left:135%}}
.zp-rm .zp-shine::before{display:none}
/* 50. Call-to-action row closing a section (fn-cta-every-step): a line written for the section + the main action + a second one */
.zp-cta-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;margin-top:44px;padding:22px 26px;border:1px solid var(--zp-line);border-radius:18px;background:rgba(255,255,255,.035)}
.zp-light .zp-cta-row{background:rgba(255,255,255,.55)}
.zp-cta-row>p{margin:0;font:700 clamp(17px,1.6vw,20px)/1.35 var(--zp-font-h);color:var(--zp-ink);max-width:620px}
.zp-cta-row>div{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:600px){.zp-cta-row{padding:18px;margin-top:32px}.zp-cta-row>div,.zp-cta-row>div>*{width:100%}}
/* Voice wave (canvas drawn by the script) */
[data-zp-wave]{position:relative;height:var(--zp-wave-h,64px)}
.zp-wave{display:block}

/* ---------- Reduced motion: everything still and visible ---------- */
@media (prefers-reduced-motion:reduce){
  .zp-dot,.zp-orb,.zp-streaks::before,.zp-streaks::after,.zp-ring::before,.zp-talk-ic::before,.zp-typing-dots i,.zp-loader,.zp-scroll-cue::after,.zp-glow-btn::after{animation:none!important}
  .zp-mq-track{animation:none!important}
}

/* ---------- 16. Services mega-menu (det-services-menu): groups with an icon, a one-line promise, links, badges ---------- */
/* The menu hangs from the header (the .zp-dd that holds it is position:static), centred on the page, so it never runs
 * off the screen whatever the button's place; ::before bridges the gap so the mouse can travel down to it. */
.zp-mega{position:absolute;top:calc(100% + 8px);left:50%;translate:-50% 0;width:min(1040px,calc(100vw - 32px));display:grid;grid-template-columns:repeat(var(--zp-cols,4),minmax(0,1fr));gap:26px;
  padding:26px;border-radius:18px;background:var(--zp-panel);border:1px solid var(--zp-line-2);box-shadow:0 40px 90px -30px var(--zp-shade);
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s var(--zp-ease),transform .25s var(--zp-ease),visibility 0s .25s;z-index:80}
.zp-mega::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:34px}
.zp-dd:hover>.zp-mega,.zp-dd:focus-within>.zp-mega,.zp-dd.zp-open>.zp-mega{opacity:1;visibility:visible;transform:none;transition:opacity .25s var(--zp-ease),transform .25s var(--zp-ease)}
.zp-mega-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--zp-accent),var(--zp-accent-2));color:var(--zp-accent-ink)}
.zp-mega-ic svg{width:20px;height:20px}
.zp-mega-g h4{margin:12px 0 0;font:700 15.5px/1.3 var(--zp-font-h);color:var(--zp-ink)}
.zp-mega-g p{margin:4px 0 10px;padding-bottom:12px;border-bottom:1px solid var(--zp-line);color:var(--zp-mute);font-size:13px;line-height:1.4;min-height:calc(2.8em + 12px)}
.zp-mega-g a{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 8px;margin:0 -8px;border-radius:9px;color:var(--zp-ink);text-decoration:none;font-size:14.5px}
.zp-mega-g a:hover,.zp-mega-g a:focus-visible{background:var(--zp-fill-2)}
.zp-tag{font:700 11px/1 var(--zp-font-m);letter-spacing:.08em;text-transform:uppercase;padding:4px 7px;border-radius:6px;border:1px solid;white-space:nowrap}
.zp-tag-pop{color:var(--zp-accent-text);border-color:rgba(255,198,43,.5);background:rgba(255,198,43,.1)}
.zp-tag-new{color:var(--zp-ok-text);border-color:rgba(76,211,155,.45);background:rgba(76,211,155,.08)}
@media (max-width:900px){.zp-mega{position:static;translate:none;width:auto;display:none;grid-template-columns:1fr;gap:4px;padding:2px 0 10px 10px;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:none}
  .zp-mega::before{display:none}
  .zp-dd.zp-open>.zp-mega{display:grid}
  .zp-mega-g p,.zp-mega-ic{display:none}.zp-mega-g h4{margin:10px 0 4px;color:var(--zp-accent-text);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
  .zp-mega-g a{min-height:46px;font-size:16px;border-bottom:0}}