/* Sixty Seconds, Demo page prototype. Same system as Home v4: brand v1.2 tokens, Orizon spacing (ORIZON-SPEC.md).
   Tokens, type, buttons, nav, window kit and footer are copied from ../home/css/home.css (not linked: that file is being edited).
   D1-D3 (27 Oct): the demo lives in the hero. Rules: centred, one container (1248 content), emerald on the action and on state only. Motion: the shared core (css/site-motion.css) plus the MOTION block at the foot of this file; reduced motion gets the still page. */

@font-face{font-family:Cabinet;src:url(../../assets/fonts/CabinetGrotesk-800.woff2?v=118b012bc2) format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:Inter;src:url(../../assets/fonts/Inter-Regular.woff2?v=6097a7ae18) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(../../assets/fonts/Inter-SemiBold.woff2?v=457d6925c7) format('woff2');font-weight:500 600;font-display:swap}
@font-face{font-family:Inter;src:url(../../assets/fonts/Inter-Bold.woff2?v=b077ab6e2e) format('woff2');font-weight:700;font-display:swap}

:root{
  --bg:6 10 20; --ink:245 247 251; --body:200 210 226; --muted:143 156 180; --faint:110 125 155;
  --line:38 50 70; --line-br:70 86 112; --s1:16 24 40; --s2:22 33 53; --s3:30 44 68;
  --emerald:0 228 161;
  --a1:47 184 199; --a2:67 165 208; --a3:88 145 218; --a4:108 126 227; --a5:128 107 236; --a6:149 87 246; --a7:169 68 255;
  --ease:cubic-bezier(.16,1,.3,1);
  --sec:96px; --r1:18px; --r2:28px; --r3:40px;
  --spec:linear-gradient(100deg,#2FB8C7,#6C7EE3 52%,#A944FF);
  --nav:80px;
}
*{box-sizing:border-box}
html{background:rgb(var(--bg));scroll-behavior:auto;overflow-x:clip;scroll-padding-top:var(--nav)}
body{margin:0;background:rgb(var(--bg));color:rgb(var(--body));font:400 16px/1.6 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video,svg,canvas{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,p,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:rgb(var(--s2));color:rgb(var(--ink));padding:10px 16px;border-radius:12px;border:1px solid rgb(var(--line-br))}
.skip:focus{top:12px}
:focus-visible{outline:2px solid rgb(var(--a4));outline-offset:3px;border-radius:6px}

h1,h2,h3{font-family:Cabinet,system-ui,sans-serif;font-weight:800;letter-spacing:-.03em;color:rgb(var(--ink));text-wrap:balance}
h1{font-size:clamp(34px,4.667vw,80px);line-height:1.04}
h2{font-size:clamp(24px,2.223vw,34px);line-height:1.2;letter-spacing:-.02em}
.grad{background:var(--spec);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.cap{font-size:13px;line-height:1.5;color:rgb(var(--muted))}
.eyebrow{display:flex;justify-content:center;align-items:center;gap:16px;font:700 12px/1.4 Inter,system-ui,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:rgb(var(--muted))}
.eyebrow::before,.eyebrow::after{content:"";height:1px;width:clamp(24px,3vw,44px);background:linear-gradient(90deg,transparent,rgb(var(--a2)/.7))}
.eyebrow::after{background:linear-gradient(270deg,transparent,rgb(var(--a6)/.7))}
.eyebrow span{text-align:center;text-wrap:balance}

/* ---------- buttons: emerald is the action colour ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 28px;border-radius:999px;border:0;cursor:pointer;
  background:rgb(var(--emerald));color:#04231a;font:700 16px/1 Inter,system-ui,sans-serif;white-space:nowrap;text-decoration:none;
  transition:transform .25s var(--ease),opacity .25s var(--ease),background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.985)}
.btn.ghost{background:rgb(var(--s1)/.7);color:rgb(var(--ink));border:1px solid rgb(var(--line-br))}
.btn.sm{height:40px;padding:0 18px;font-size:14px}
.btn.lg{height:56px;padding:0 34px;font-size:17px}

.wrap{width:100%;max-width:1312px;margin-inline:auto;padding-inline:clamp(20px,2.5vw,32px)}
.sec{position:relative;padding-block:var(--sec)}
.ic{width:16px;height:16px;flex:none}

/* ---------- nav: 80px, logo left, links centre, actions right (same as ../css/home.css and the other pages) ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--nav)}
.nav::before{content:"";position:absolute;inset:0;background:rgb(var(--bg)/.74);opacity:0;transition:opacity .35s var(--ease);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgb(var(--line)/.7)}
.nav.solid::before{opacity:1}
.nav-in{position:relative;height:100%;max-width:1312px;margin-inline:auto;padding-inline:clamp(20px,2.5vw,32px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.nav .brand img{height:32px;width:auto}
.nav ul{display:flex;gap:32px;font-size:14.5px;font-weight:500}
.nav ul a{text-decoration:none;color:rgb(var(--body));transition:color .25s var(--ease)}
.nav ul a:hover{color:rgb(var(--ink))}
.nav .acts{display:flex;gap:10px;align-items:center;justify-content:flex-end}
.nav .btn.ghost[aria-current="page"]{border-color:rgb(var(--a3)/.7)}

/* ================= 01 HERO + THE LIVE DEMO (D1) =================
   Back to front: the wave's rings and navy lift, a scrim, then the centred stack: heading, a smaller cycle film, and directly under it the email field and
   the primary button. One slot (.console) holds the three states so nothing jumps: field, build bar and steps, Book. The build overlay and the result sit
   inside the film frame. The film is sized from the viewport height so heading, film, field and button always fit above the fold. */
.hero{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:flex-start;justify-content:center;padding:calc(var(--nav) + 20px) 0 56px}
.hero-field{position:absolute;inset:0;z-index:-2;pointer-events:none}
.hero-lift{position:absolute;left:50%;top:44%;width:min(1100px,92vw);height:min(760px,92vw);transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgb(34 52 98/.5),rgb(20 30 62/.22) 55%,rgb(var(--bg)/0))}
.hero-wave{position:absolute;left:50%;top:40%;width:min(1620px,118vw);height:min(1080px,150%);transform:translate(-50%,-50%);
  -webkit-mask-image:radial-gradient(closest-side,#000 40%,rgb(0 0 0/.55) 70%,transparent 100%);mask-image:radial-gradient(closest-side,#000 40%,rgb(0 0 0/.55) 70%,transparent 100%)}
#ssbg{width:100%;height:100%;pointer-events:none}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:84px;z-index:-1;background:linear-gradient(rgb(var(--bg)/0),rgb(var(--bg)));pointer-events:none}
.hero-scrim{position:absolute;left:50%;top:46%;width:min(1100px,100%);height:min(800px,100%);transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgb(var(--bg)/.9),rgb(var(--bg)/.76) 38%,rgb(var(--bg)/.42) 66%,rgb(var(--bg)/0))}
.hero-in{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative}
.hero-in .eyebrow{margin-bottom:16px}
.hero-in h1{max-width:1000px;font-size:clamp(30px,min(4.2vw,6.4svh),64px)}
.hero-in h1 .grad{display:block;width:fit-content;margin-inline:auto}
/* v30: one line that echoes the Meta ad the visitor came from (demo.js, utm_content), hidden when there is no match */
.ad-line{max-width:760px;margin:14px auto 0;font:500 clamp(15px,1.35vw,18px)/1.45 Inter,system-ui,sans-serif;color:rgb(var(--ink)/.86);text-wrap:balance}
.ad-line[hidden]{display:none}

.stage{width:100%;display:flex;flex-direction:column;align-items:center;margin-top:clamp(14px,2.4svh,24px)}
/* the film: 16:9, as large as fits with the field and button still above the fold (1440 x 900: about 640 x 360) */
.film{position:relative;width:min(760px,100%,calc((100svh - 500px) * 16 / 9));min-width:min(440px,100%);aspect-ratio:16/9;border-radius:var(--r1);
  border:1px solid rgb(var(--line-br)/.9);background:#000;overflow:hidden;box-shadow:0 40px 100px -40px rgb(0 0 0/.9),0 0 0 1px rgb(var(--bg)/.5)}
.wall{position:absolute;inset:0;border-radius:inherit;overflow:hidden;isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(#fff,#000)}   /* SSWEB-5352: iOS Safari does not clip a playing video to the card's rounded corners, so its square orange corner showed as a red edge. The wall clips its own videos now */
.wall .col{display:contents}
.wall .col:not(.c){display:none}
.tile{margin:0;min-width:0}
.wall .tile{position:absolute;inset:0}
.wall .tile .fr{position:absolute;inset:0;border:0;border-radius:0;box-shadow:none;background:#000 center/cover no-repeat}
.wall .tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.wall .tile .fr.is-playing video{opacity:1}
.wall .tile figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* building: a dim veil over the film with who it is for and the step in words */
.st-build,.st-result{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;text-align:center;
  opacity:0;visibility:hidden;pointer-events:none}
.st-build{background:linear-gradient(rgb(var(--bg)/.78),rgb(var(--bg)/.78)),#000 url(../../assets/img/v2-priya.jpg?v=d1465d4ac5) center/cover}   /* the Priya sample sits under the build, not whichever loop brand was on screen */
.st-build .who,.st-result .real .who{margin:0}
.st-build .who small,.st-result .real .who small{display:block;font:700 11px/1 Inter,system-ui,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:rgb(var(--muted));margin-bottom:10px}
.st-build .who b,.st-result .real .who b{font:800 clamp(24px,3.4vw,44px)/1.05 Cabinet,system-ui,sans-serif;letter-spacing:-.03em;color:rgb(var(--ink))}
.st-build .now,.st-result .real .now{font-size:clamp(15px,1.5vw,18px);line-height:1.3;color:rgb(var(--body))}
.st-build .url{display:flex;align-items:center;gap:7px;max-width:100%;height:26px;padding:0 12px;border-radius:999px;background:rgb(var(--bg)/.6);border:1px solid rgb(var(--line));
  font:500 12px/1 Inter,sans-serif;color:rgb(var(--muted));white-space:nowrap;overflow:hidden}
.st-build .url span{overflow:hidden;text-overflow:ellipsis}
.st-build .url .ic{width:11px;height:11px}
.stage[data-state="building"] .st-build{opacity:1;visibility:visible}

/* result: the sample video replaces the film */
.st-result{display:block;padding:0;background:#000}
.st-result video{width:100%;height:100%;object-fit:cover}
.stage[data-state="result"] .st-result{opacity:1;visibility:visible;pointer-events:auto}
.st-result .rt{position:absolute;left:12px;right:12px;top:12px;bottom:12px;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;pointer-events:none}
.st-result .rt>*{pointer-events:auto}
.st-result .badge{align-self:flex-end;font:700 11px/1 Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;background:rgb(var(--bg)/.7);padding:9px 13px;border-radius:999px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.st-result .reset{font:600 13px/1 Inter,sans-serif;background:rgb(var(--bg)/.7);border:1px solid rgb(var(--line-br));border-radius:999px;padding:9px 15px;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.vplay{position:absolute;left:50%;top:50%;z-index:2;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;border:0;cursor:pointer;
  background:rgb(var(--bg)/.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgb(var(--ink)/.35);transition:transform .3s var(--ease)}
.vplay::before{content:"";position:absolute;left:28px;top:22px;border-left:19px solid rgb(var(--ink));border-top:12px solid transparent;border-bottom:12px solid transparent}
.vplay:hover{transform:scale(1.06)}
.st-result.playing .vplay{display:none}
/* the real build: "View your page" (or the engine's own stop message) on the same veil as the build, in place of the sample */
.st-result .real{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;text-align:center;
  background:linear-gradient(rgb(var(--bg)/.78),rgb(var(--bg)/.78)),#000 url(../../assets/img/v2-priya.jpg?v=d1465d4ac5) center/cover}
.st-result .real[hidden],.st-result .real .btn[hidden]{display:none}
.st-result .real .now{max-width:520px;margin:0}
.st-result.is-real video,.st-result.is-real .vplay{display:none}

/* the console: one slot under the film; the three states sit in the same grid cell, so the page never jumps */
.console{display:grid;width:min(560px,100%);margin-top:16px}
.console>*{grid-area:1/1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;opacity:0;visibility:hidden;pointer-events:none}
.stage[data-state="idle"] .c-idle,.stage[data-state="building"] .c-build,.stage[data-state="result"] .c-book{opacity:1;visibility:visible;pointer-events:auto}
.hform{display:flex;gap:12px;width:100%}
.hform input{flex:1;min-width:0;height:52px;padding:0 22px;border-radius:999px;border:1px solid rgb(var(--line-br));background:rgb(255 255 255/.04);color:rgb(var(--ink));font:400 16px/1 Inter,system-ui,sans-serif;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hform input::placeholder{color:rgb(var(--faint))}
.hform input:focus{outline:none;border-color:rgb(var(--a3))}
.hint{margin-top:10px;max-width:540px;font-size:13px;line-height:1.5;color:rgb(var(--muted))}

/* build bar and the four steps */
.c-build{gap:14px;width:100%}
.c-build .bar{width:100%;height:3px;border-radius:3px;background:rgb(var(--line))}
.c-build .bar i{display:block;height:100%;border-radius:3px;background:var(--spec);transform-origin:0 50%;transform:scaleX(0)}
.st-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%}
.st-steps li{display:flex;flex-direction:column;align-items:center;gap:8px;padding:2px 4px;font-size:13px;line-height:1.3;color:rgb(var(--faint));text-wrap:balance;transition:color .3s var(--ease)}
.st-steps em{position:relative;flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:1px solid rgb(var(--line-br));transition:background-color .3s var(--ease),border-color .3s var(--ease)}
.st-steps em b{font:700 11px/1 Inter,sans-serif}
.st-steps em .ic{display:none;width:13px;height:13px}
.st-steps li.on{color:rgb(var(--ink))}
.st-steps li.on em{border-color:rgb(var(--a3));background:rgb(var(--a3)/.2)}
.st-steps li.done{color:rgb(var(--body))}
.st-steps li.done em{background:rgb(var(--emerald));border-color:rgb(var(--emerald));color:#04231a}
.st-steps li.done em b{display:none}.st-steps li.done em .ic{display:block}

/* Book a call: emerald, the one action once the result is there */
.c-book{gap:12px;text-align:center}
.c-book .btn{white-space:normal;height:auto;min-height:56px;padding:15px 34px;line-height:1.25;text-align:center}
.c-book .free{font-size:14px;color:rgb(var(--muted))}

/* D3: what the live demo is */
.what{margin-top:14px;max-width:520px;font-size:13px;line-height:1.5;color:rgb(var(--muted))}

/* ================= 02 GOOGLE REVIEWS (D2) ================= */
.reviews{padding-top:48px;padding-bottom:72px}
.rv-head{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;margin-bottom:40px}
.g-badge{display:inline-flex;align-items:center;gap:10px;padding:9px 16px 9px 12px;border-radius:999px;background:rgb(var(--s1)/.8);border:1px solid rgb(var(--line-br))}
.g-badge img{width:22px;height:22px}
.g-badge b{font:700 16px/1 Inter,sans-serif;color:rgb(var(--ink))}
.stars{position:relative;display:inline-block;font-size:17px;line-height:1;letter-spacing:2px;white-space:nowrap}
.stars .s-off{color:rgb(var(--line-br))}
.stars .s-on{position:absolute;left:0;top:0;width:var(--fill,100%);overflow:hidden;color:#FBBC04}
.stars.st-sm{font-size:15px}.stars.st-sm .s-on{position:static;display:block;width:auto}
.rv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}
.rv-card{display:flex;flex-direction:column;gap:16px;padding:26px 24px;border-radius:var(--r1);background:rgb(var(--s1)/.85);border:1px solid rgb(var(--line-br)/.8)}
.rv-card blockquote{margin:0;font-size:15.5px;line-height:1.6;color:rgb(var(--body))}
.rv-card .by{margin-top:auto;display:flex;flex-direction:column;gap:3px;font-size:13px;line-height:1.4;color:rgb(var(--muted))}
.rv-card .by b{font-size:15px;color:rgb(var(--ink))}
.rv-more{margin-top:28px;text-align:center}
.arrow-link{display:inline-flex;align-items:center;gap:8px;font:600 14.5px/1 Inter,sans-serif;color:rgb(var(--ink));text-decoration:none;border-bottom:1px solid rgb(var(--line-br));padding-bottom:4px}
.marks{margin-top:80px;text-align:center}
.marks .mk{font:700 12px/1 Inter,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:rgb(var(--faint));margin-bottom:28px}
.lw{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:24px clamp(32px,4.4vw,64px)}
.lw img{height:30px;width:auto;max-width:140px;object-fit:contain;filter:brightness(0) invert(1);opacity:.6}
.lw img[src*="signs-express"]{height:26px}.lw img[src*="knight-frank"]{height:34px}

/* ---------- footer: minimal ---------- */
footer{padding:44px 0 40px;border-top:1px solid rgb(var(--line)/.8);background:rgb(var(--s1)/.45);text-align:center}
footer .wrap{display:flex;flex-direction:column;align-items:center;gap:20px}
footer .fl img{height:28px;width:auto}
footer nav{display:flex;gap:32px;flex-wrap:wrap;justify-content:center;font-size:14.5px}
footer nav a{text-decoration:none;color:rgb(var(--muted))}footer nav a:hover{color:rgb(var(--ink))}
.ft-legal{font-size:12.5px;line-height:1.6;color:rgb(var(--faint));max-width:560px}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .nav ul{display:none}.nav-in{grid-template-columns:1fr auto}
  .rv-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  :root{--nav:68px}
  .nav .btn.ghost{display:none}
  .hero{padding:calc(var(--nav) + 12px) 0 40px}
  .hero-in .eyebrow{font-size:10.5px;letter-spacing:.18em;margin-bottom:12px}
  .hero-in .eyebrow::before,.hero-in .eyebrow::after{width:16px}
  .hero-in h1{font-size:clamp(27px,7.6vw,38px)}
  .stage{margin-top:14px}
  .film{width:100%;min-width:0;border-radius:14px}
  .console{margin-top:12px}
  .hform{flex-direction:column;gap:10px}
  .hform .btn{width:100%}
  .hform input{flex:none;width:100%;height:50px}
  .hint{margin-top:8px;font-size:12.5px}
  .what{margin-top:10px;font-size:12.5px}
  .st-steps{gap:4px}
  .st-steps li{font-size:11.5px}
  .c-book .btn{padding:15px 22px;font-size:16px;width:100%}
  .st-build .url{display:none}
  .st-build .now,.st-result .real .now{font-size:14px}
  .rv-grid{grid-template-columns:1fr}
  .marks{margin-top:56px}
  .vplay{width:56px;height:56px;margin:-28px 0 0 -28px}.vplay::before{left:23px;top:17px;border-left-width:16px;border-top-width:10px;border-bottom-width:10px}
  .st-result .badge{white-space:nowrap;font-size:9.5px;letter-spacing:.14em;padding:8px 10px}
  .st-result .reset{white-space:nowrap;font-size:12px;padding:8px 12px}
  .st-result .rt{left:8px;right:8px;top:8px;bottom:8px}
  .st-result .real{padding:48px 16px}
}
/* short phones (iPhone SE, 667 high): the eyebrow gives way so the button stays on the first screen */
@media (max-width:760px) and (max-height:760px){.hero-in .eyebrow{display:none}.hero-in h1{font-size:clamp(25px,7vw,30px)}}

/* ================= v28 (5 Nov): pulse, rating channels, how it works, featured review ================= */
/* the build button breathes softly while the form waits; a ring behind it, transform and opacity only */
.btn.pulse{position:relative;isolation:isolate}
.btn.pulse::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:rgb(var(--emerald));opacity:0;pointer-events:none}

/* the three rating channels: Google, Trustpilot, G2 */
.chan{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 22px;margin-top:16px}
.chan li{display:flex;align-items:center}
.chan li+li{padding-left:22px;border-left:1px solid rgb(var(--line-br)/.7)}
.ch-in{display:inline-flex;align-items:center;gap:8px}
.chan img,.chan .tp-mark,.chan .g2-mark{width:18px;height:18px;flex:none}
.chan .g2-mark{width:21px;height:21px}
.chan .tp-w{font:700 14px/1 Inter,sans-serif;letter-spacing:-.01em;color:rgb(var(--ink));margin-left:-3px}
.chan .tp-stars{width:76px;height:14px;flex:none}
.chan .stars{font-size:15px;letter-spacing:1px}
.chan b{font:700 14px/1 Inter,sans-serif;color:rgb(var(--ink))}
.chan.lg{gap:12px;margin-top:6px}
.chan.lg li{padding:10px 16px;border:1px solid rgb(var(--line-br)/.8);border-radius:999px;background:rgb(var(--s1)/.8)}
.chan.lg li+li{border-left:1px solid rgb(var(--line-br)/.8)}

/* how it works: three numbered steps and the two actions */
.steps{padding-top:56px;padding-bottom:40px}
.st-head{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;margin-bottom:40px}
.st-head h2 .grad{display:block;width:fit-content;margin-inline:auto}
.how{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:how}
.how-i{position:relative;display:flex;flex-direction:column;gap:10px;padding:26px 24px 28px;border-radius:var(--r1);background:rgb(var(--s1)/.85);border:1px solid rgb(var(--line-br)/.8)}
.how-i em{display:grid;place-items:center;width:44px;height:44px;margin-bottom:6px;border-radius:50%;font:700 18px/1 Inter,sans-serif;font-style:normal;color:rgb(var(--emerald));
  background:rgb(var(--emerald)/.16);border:1px solid rgb(var(--emerald)/.45)}
.how-i h3{font-size:22px;line-height:1.2;letter-spacing:-.02em}
.how-i p{font-size:16px;line-height:1.6;color:rgb(var(--body))}
.how-i.now{border-color:rgb(var(--emerald)/.45);background:linear-gradient(180deg,rgb(var(--emerald)/.08),rgb(var(--s1)/.85) 70%)}
.how-tag{position:absolute;top:-11px;left:22px;z-index:2;padding:5px 10px;border-radius:999px;font:700 10.5px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:rgb(var(--emerald));background:rgb(var(--s1));border:1px solid rgb(var(--emerald)/.55);white-space:nowrap}
.how-go{margin-top:auto;padding-top:4px;font:600 15px/1.4 Inter,sans-serif;color:rgb(var(--emerald));text-decoration:none;width:fit-content}
.how-go span{display:inline-block;transition:transform 160ms cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){.how-go:hover span{transform:translateY(-2px)}}
.how-acts{display:flex;gap:28px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:40px}

/* v43 (6 Nov): text steps in the How it works page style (numbered ring on the top edge, short connectors);
   step 1 is lit in emerald with its own tag and link so the demo comes first */
.how{grid-template-columns:repeat(4,1fr);gap:24px}
.how-i{margin-top:21px;padding:46px 24px 28px;gap:10px;align-items:center;text-align:center;border-radius:var(--r1);background:rgb(var(--s1)/.6);border:1px solid rgb(var(--line))}
/* v44: badge above the .lift hover glow, so the card border never runs through the circle (matches How it works) */
.how-i .n{z-index:2}
.how-i .n{position:absolute;left:50%;top:-21px;transform:translateX(-50%);width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:rgb(var(--bg));border:1px solid rgb(var(--c));color:rgb(var(--ink));font:800 17px/1 Cabinet,sans-serif;box-shadow:0 0 0 6px rgb(var(--bg)),0 0 24px rgb(var(--c)/.35)}
.how-i .cx{position:absolute;left:100%;top:-.5px;width:24px;height:1px;pointer-events:none;background:linear-gradient(90deg,rgb(var(--c)/.55),rgb(var(--c)/.12))}
.how-i h3{font-size:clamp(18px,1.5vw,21px);line-height:1.25}
.how-i p{font-size:14.5px;line-height:1.55;color:rgb(var(--muted));max-width:28ch;margin-inline:auto}
.how-i.now{border-color:rgb(var(--emerald)/.55);background:linear-gradient(180deg,rgb(var(--emerald)/.1),rgb(var(--s1)/.6) 75%);box-shadow:0 24px 60px -30px rgb(var(--emerald)/.55)}
.how-i.now .n{color:#04231a;background:rgb(var(--emerald));box-shadow:0 0 0 6px rgb(var(--bg)),0 0 30px rgb(var(--emerald)/.55)}
.how-i.now p{color:rgb(var(--body))}
.how-go{margin-top:auto;padding-top:6px;margin-inline:auto;font-size:14.5px}
.how-note{margin-top:auto;padding-top:12px;width:100%;border-top:1px solid rgb(var(--line)/.9);font-size:13px;line-height:1.5;color:rgb(var(--muted))}
.how-link{font:600 16px/1.4 Inter,sans-serif;color:rgb(var(--ink));text-decoration:none;border-bottom:1px solid rgb(var(--line-br))}
.how-link span{display:inline-block;transition:transform 160ms cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){.how-link:hover span{transform:translateX(3px)}}
@media (max-width:1000px){.how{grid-template-columns:repeat(2,1fr);row-gap:44px}.how-i .cx{display:none}}
@media (max-width:640px){.how{grid-template-columns:1fr;row-gap:40px}.how-i{padding:40px 20px 24px}}

/* reviews: head with the channels, the FutureSafe review featured, then four quote cards */
.rv-head{gap:16px}
.rv-feat{position:relative;overflow:hidden;margin:0 0 20px;padding:clamp(28px,4vw,48px) clamp(24px,4vw,52px);border-radius:var(--r2);border:1px solid rgb(var(--line-br)/.8);
  background:radial-gradient(120% 140% at 0% 0%,rgb(var(--a2)/.14),transparent 55%),radial-gradient(120% 140% at 100% 100%,rgb(var(--a6)/.12),transparent 55%),rgb(var(--s1)/.9);
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-areas:"k k" "q m" "by m" "ln m";gap:20px 56px;align-items:start}
.rv-feat::before{content:"";position:absolute;left:8%;right:8%;top:0;height:1px;background:var(--spec);opacity:.7}
.rvf-k{grid-area:k;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.rvf-k img{height:26px;width:auto;filter:brightness(0) invert(1);opacity:.92}
.rvf-stars{display:inline-flex;align-items:center;gap:10px;color:#00B67A;font-size:17px;letter-spacing:.12em}
.rvf-stars small{font:600 12px/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgb(var(--muted))}
.rvf-q{grid-area:q;margin:0;font:800 clamp(24px,2.5vw,34px)/1.22 Cabinet,sans-serif;letter-spacing:-.02em;color:rgb(var(--ink));text-wrap:pretty}
.rvf-more{grid-area:m;display:flex;flex-direction:column;gap:16px;align-self:center}
.rvf-more li{padding-left:18px;border-left:2px solid rgb(var(--a2)/.6);font-size:16px;line-height:1.5;color:rgb(var(--body))}
.rvf-by{grid-area:by;display:flex;gap:10px;align-items:baseline;font-size:14px;color:rgb(var(--muted))}
.rvf-by b{color:rgb(var(--ink));font-weight:600;font-size:15px}
.rvf-by span::before{content:"·";margin-right:10px}
.rvf-link{grid-area:ln;justify-self:start;margin-top:4px}
.rv-grid{grid-template-columns:repeat(2,1fr)}
.rv-card{gap:14px;padding:28px 28px 26px}
.rv-stars{color:#FBBC04;font-size:15px;letter-spacing:2px;line-height:1}
.rv-card blockquote{font-size:16px}
.rv-card .by{flex-direction:row;align-items:center;gap:0;padding-top:16px;border-top:1px solid rgb(var(--line)/.9)}
.rv-card .by-t{display:flex;flex-direction:column;gap:2px}
.rv-card .by-t b{font-size:15px;color:rgb(var(--ink))}

@media (max-width:1000px){.rv-grid{grid-template-columns:1fr 1fr}}
@media (max-width:900px){
  .rv-feat{grid-template-columns:1fr;grid-template-areas:"k" "q" "by" "m" "ln"}
}
@media (max-width:760px){
  .chan{gap:8px 14px;margin-top:12px}
  .chan li+li{padding-left:14px}
  .chan:not(.lg) li:nth-child(3){padding-left:0;border-left:0}
  .chan .stars{font-size:13px}
  .chan .tp-stars{width:64px;height:12px}
  .rv-grid{grid-template-columns:1fr}
  .steps{padding-top:40px;padding-bottom:24px}
  .how-acts{flex-direction:column;align-items:stretch;gap:16px}
  .how-acts .btn{width:100%}
  .how-link{align-self:center}
}
@media (max-width:520px){.rv-feat{padding:24px 20px;gap:18px}.rvf-q{font-size:22px}}

@media (prefers-reduced-motion:no-preference){
  @keyframes btnPulse{0%{opacity:.5;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.06,1.42)}}
  .stage[data-state="idle"] .btn.pulse::after{animation:btnPulse 2.6s cubic-bezier(.23,1,.32,1) infinite}
  .stage[data-state="idle"] .btn.pulse:focus-visible::after{animation:none}
}

/* =====================================================================================================================
   MOTION. Contract: ../motion/MOTION-SPEC.md 5.2. The reviews use the shared core (data-reveal head, data-reveal-cards, .lift). The hero is calm:
   static at first paint, no reveal on it. Here: the film's poster-to-video cross-fade and the form's states, which all transition with the house
   ease cubic-bezier(.16,1,.3,1): opacity and transform only. Reduced motion: none of it applies (the base rules above are the still page).
   ===================================================================================================================== */
@media (prefers-reduced-motion:no-preference){
  .wall .tile video{transition:opacity .6s var(--ease)}

  @keyframes dmPing{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
  @keyframes dmPop{0%{transform:scale(.6)}60%{transform:scale(1.12)}100%{transform:scale(1)}}

  /* form states (field / build / Book) and the film overlays: a short rise and fade, 600ms; the leaving state fades quicker so the two never overlap */
  .console>*{transform:translate3d(0,10px,0);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s linear .35s}
  .stage[data-state="idle"] .c-idle,.stage[data-state="building"] .c-build,.stage[data-state="result"] .c-book{transform:none;transition:opacity .6s var(--ease) .25s,transform .6s var(--ease) .25s,visibility 0s}
  .st-build,.st-result{transition:opacity .6s var(--ease),visibility 0s linear .6s}
  .stage[data-state="building"] .st-build,.stage[data-state="result"] .st-result{transition:opacity .6s var(--ease),visibility 0s}
  .st-result .rt,.st-result .vplay{opacity:0;transition:opacity .6s var(--ease) .4s}
  .stage[data-state="result"] .st-result .rt,.stage[data-state="result"] .st-result .vplay{opacity:1}

  /* P17 build steps: the active step lifts to 1.04 and a ring pings on its dot; the bar steps forward in JS */
  .st-steps li{transition:color .3s var(--ease),transform .5s var(--ease)}
  .st-steps li.on{transform:scale(1.04)}
  .st-steps em::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid rgb(var(--a3));opacity:0;pointer-events:none}
  .st-steps li.on em::after{animation:dmPing 1s var(--ease) infinite}
  .st-steps li.done em{animation:dmPop .6s var(--ease) both}
  .c-build .bar i{will-change:transform}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation:none!important}}

/* ================= THE PRE-DEMO PANEL (ported from live, 29 Sep 2026) =================
   "Build my free video" opens this over the page and plays Andrew's 59s explainer, with sound, on the same tap.
   The real build runs behind it and drives the four steps; nothing redirects. The X comes back to the page,
   #pdvMini brings the panel back. Full screen under 760px, a centred window above it, film left and steps right
   from 900px. Sits under the cookie card (z 210) so consent can always be answered. Colours: this page's tokens,
   emerald on the action and on done state only. */
#pdv{position:fixed;inset:0;z-index:190;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 240ms cubic-bezier(.23,1,.32,1)}
#pdv[hidden]{display:none}
#pdv [hidden],#pdvMini[hidden]{display:none!important}   /* [hidden] always wins inside the panel (.btn and friends set display) */
#pdv.on{opacity:1}
html.pdv-open,html.pdv-open body{overflow:hidden}
.pdv-scrim{position:absolute;inset:0;background:rgb(var(--bg)/.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pdv-card{position:relative;width:min(760px,calc(100% - 48px));max-height:calc(100% - 48px);overflow-y:auto;overscroll-behavior:contain;
  background:rgb(var(--s1));border:1px solid rgb(var(--line-br)/.6);border-radius:var(--r2);box-shadow:0 40px 120px -30px rgb(0 0 0/.8);
  transform:translateY(18px) scale(.98);transition:transform 320ms cubic-bezier(.23,1,.32,1)}
#pdv.on .pdv-card{transform:none}
.pdv-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px 14px 22px}
.pdv-head{min-width:0;display:grid;gap:2px}
.pdv-title{font:800 clamp(18px,2.2vw,24px)/1.2 Cabinet,system-ui,sans-serif;letter-spacing:-.02em;color:rgb(var(--ink));text-wrap:balance}
.pdv-sub{font-size:13.5px;line-height:1.4;color:rgb(var(--muted))}
.pdv-x{width:40px;height:40px;flex-shrink:0;border-radius:50%;border:1px solid rgb(var(--line-br)/.7);background:rgb(var(--s2));color:rgb(var(--ink));
  display:grid;place-items:center;cursor:pointer;transition:transform 160ms cubic-bezier(.23,1,.32,1),border-color 160ms ease-out}
.pdv-x svg{width:16px;height:16px}
.pdv-x:active{transform:scale(.94)}
.pdv-x:focus-visible,.pdv-media:focus-visible,.pdv-sound:focus-visible,.pdv-link:focus-visible,.pdv-cb:focus-visible,#pdvMini:focus-visible{outline:2px solid rgb(var(--a3));outline-offset:2px}
@media (hover:hover) and (pointer:fine){.pdv-x:hover{border-color:rgb(var(--ink)/.5)}.pdv-cb:hover{background:rgb(255 255 255/.1)}}
.pdv-media{position:relative;aspect-ratio:16/9;background:#000;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pdv-media video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;background:#000}
.pdv-media video::cue{font-family:Inter,sans-serif;font-size:15px;background:rgb(0 0 0/.72);color:#fff}
/* nothing on the picture while it plays; one centred glyph when paused; tap anywhere to pause */
.pdv-glyph{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgb(0 0 0/.55);border:1px solid rgb(255 255 255/.35);
  display:grid;place-items:center;opacity:0;transform:scale(.95);transition:opacity 180ms ease-out,transform 180ms cubic-bezier(.23,1,.32,1);pointer-events:none}
.pdv-glyph svg{width:24px;height:24px;margin-left:3px}
.pdv-media.paused .pdv-glyph{opacity:1;transform:none}
.pdv-media.ended .pdv-glyph,#pdv.is-refused .pdv-glyph{opacity:0}
.pdv-sound{position:absolute;left:12px;top:12px;border:0;border-radius:999px;padding:8px 12px;font:600 12.5px/1 Inter,sans-serif;background:rgb(0 0 0/.66);color:#fff;
  cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.pdv-sound svg{width:15px;height:15px}
.pdv-prog{display:none}
/* the controls sit in a slim bar under the film, never on it (the film has its own name captions and presenter circle) */
.pdv-ctl{display:flex;align-items:center;gap:4px;padding:6px 8px;background:rgb(var(--bg)/.9);border-top:1px solid rgb(var(--line)/.8)}
.pdv-cb{width:36px;height:36px;flex-shrink:0;border:0;border-radius:50%;background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer;
  transition:transform 160ms cubic-bezier(.23,1,.32,1),background-color 160ms ease-out}
.pdv-cb:active{transform:scale(.92)}
.pdv-cb svg{width:18px;height:18px}
.pdv-cb .i-pause,.pdv-player.is-playing .pdv-cb .i-play,.pdv-cb .i-off,.pdv-player.is-muted .pdv-cb .i-on{display:none}
.pdv-player.is-playing .pdv-cb .i-pause,.pdv-player.is-muted .pdv-cb .i-off{display:block}
.pdv-player.is-ended .pdv-sound{display:none}
.pdv-player:fullscreen{display:flex;flex-direction:column;background:#000;border:0;border-radius:0;margin:0}
.pdv-player:fullscreen .pdv-media{flex:1;aspect-ratio:auto}
.pdv-time{font:500 12px/1 Inter,sans-serif;color:rgb(var(--body));font-variant-numeric:tabular-nums;white-space:nowrap;padding:0 4px}
.pdv-seek{--fill:0%;flex:1;min-width:40px;height:28px;margin:0 4px;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.pdv-seek::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,rgb(var(--emerald)) var(--fill),rgb(255 255 255/.35) var(--fill))}
.pdv-seek::-moz-range-track{height:4px;border-radius:2px;background:rgb(255 255 255/.35)}
.pdv-seek::-moz-range-progress{height:4px;border-radius:2px;background:rgb(var(--emerald))}
.pdv-seek::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border-radius:50%;background:#fff;border:0}
.pdv-seek::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:0}
@media (max-width:420px){.pdv-time{display:none}}
.pdv-body{padding:20px 22px calc(22px + env(safe-area-inset-bottom,0px));display:grid;gap:16px}
.pdv-live{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:15px;line-height:1.45;color:rgb(var(--body))}
.pdv-live b{color:rgb(var(--ink));font-weight:600}
.pdv-live span{text-wrap:pretty}
.pdv-live i{width:9px;height:9px;margin-top:7px;justify-self:center;border-radius:50%;background:rgb(var(--a3));box-shadow:0 0 0 0 rgb(var(--a3)/.6);animation:pdvPulse 1.6s ease-out infinite}
#pdv.is-ready .pdv-live i{background:rgb(var(--emerald));animation:none}
#pdv.is-failed .pdv-live i{background:rgb(248 113 113);animation:none}
@keyframes pdvPulse{to{box-shadow:0 0 0 8px rgb(var(--a3)/0)}}
.pdv-steps{display:grid;gap:10px}
.pdv-steps li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:center;font-size:14.5px;color:rgb(var(--muted));transition:color 200ms ease-out}
.pdv-steps li span{min-width:0;overflow-wrap:anywhere}
.pdv-steps em{width:22px;height:22px;border-radius:50%;border:1px solid rgb(var(--line-br));display:grid;place-items:center;font:600 11px/1 Inter,sans-serif;font-style:normal;
  color:rgb(var(--muted));transition:background-color 200ms ease-out,border-color 200ms ease-out}
.pdv-steps li.on{color:rgb(var(--ink))}
.pdv-steps li.on em{border-color:rgb(var(--a3));background:rgb(var(--a3)/.2)}
.pdv-steps li.done{color:rgb(var(--body))}
.pdv-steps li.done em{background:rgb(var(--emerald));border-color:rgb(var(--emerald));color:#04231a}
.pdv-steps li.stop em{border-color:rgb(248 113 113/.8);color:rgb(248 113 113)}
#pdv.is-refused .pdv-steps,#pdv.is-sim .pdv-steps{display:none}
.pdv-foot{display:grid;gap:12px}
.pdv-actions{display:grid;gap:10px}
.pdv-actions .btn{width:100%}
#pdvBook{height:auto;min-height:56px;padding:10px 24px;flex-direction:column;gap:2px;text-align:center;line-height:1.25;white-space:normal}
#pdvBook .pdv-bk-q{display:flex;flex-direction:column;align-items:center;gap:3px}
#pdvBook small{font:500 .82em/1.2 Inter,sans-serif;color:rgb(var(--muted))}
#pdvBook .pdv-bk-fail{display:none}
#pdv.is-failed #pdvBook .pdv-bk-q{display:none}
#pdv.is-failed #pdvBook .pdv-bk-fail{display:inline}
.pdv-link{justify-self:center;background:none;border:0;padding:6px;color:rgb(var(--muted));font:500 13.5px Inter,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pdv-note{font-size:13px;line-height:1.5;color:rgb(var(--muted));text-align:center}
#pdv.is-refused .pdv-note,#pdv.is-sim .pdv-note,#pdv.is-failed .pdv-note{display:none}
#pdvMini{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:185;max-width:460px;margin:0 auto;display:flex;align-items:center;gap:10px;
  padding:12px 14px;border-radius:14px;border:1px solid rgb(var(--line-br)/.7);background:rgb(var(--s2));color:rgb(var(--body));font:500 14px/1.3 Inter,sans-serif;text-align:left;cursor:pointer;
  box-shadow:0 18px 40px -12px rgb(0 0 0/.7);transition:transform 280ms cubic-bezier(.23,1,.32,1),opacity 200ms ease-out}
#pdvMini.enter{transform:translateY(16px);opacity:0}
#pdvMini i{width:8px;height:8px;flex-shrink:0;border-radius:50%;background:rgb(var(--a3))}
#pdvMini.ready i{background:rgb(var(--emerald))}
#pdvMini .t{flex:1;min-width:0}
#pdvMini b{flex-shrink:0;color:rgb(var(--emerald));font-weight:600}
#pdvMini:active{transform:scale(.98)}
@media (min-width:761px){#pdvMini{left:auto;right:24px;bottom:24px;width:380px;margin:0}}
@media (min-width:900px){
  .pdv-card{width:min(1080px,calc(100% - 48px));display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr);grid-template-rows:auto 1fr;align-items:stretch}
  .pdv-bar{grid-column:1/-1}
  .pdv-player{align-self:start;margin:0 0 22px 22px;border-radius:14px;overflow:hidden;border:1px solid rgb(var(--line)/.8)}
  .pdv-body{display:flex;flex-direction:column;padding:0 22px 22px}
  .pdv-foot{margin-top:auto;padding-top:8px}
}
@media (max-width:760px){
  .pdv-title{font-size:19px}   /* SSWEB-5352: wraps to two lines on phones; the ellipsis cut "is being built" off mid-word */
  .pdv-card{width:100%;height:100%;max-height:none;border-radius:0;border:0;padding-top:env(safe-area-inset-top,0px);background:rgb(var(--bg));transform:translateY(24px);display:flex;flex-direction:column}
  .pdv-scrim{background:rgb(var(--bg))}
  .pdv-bar{padding:8px 12px 10px 16px}
  .pdv-body{flex:1;display:flex;flex-direction:column;padding-left:16px;padding-right:16px}
  .pdv-foot{margin-top:auto}
}
@media (max-width:960px) and (orientation:landscape) and (max-height:520px){
  .pdv-card{width:100%;height:100%;max-height:none;border-radius:0;border:0;background:#000;transform:none}
  .pdv-bar{position:absolute;top:0;right:0;z-index:2;padding:10px 12px}
  .pdv-head{display:none}
  .pdv-media{aspect-ratio:auto;height:calc(100vh - 49px);height:calc(100dvh - 49px)}
  .pdv-sound{left:50%;transform:translateX(-50%)}
  .pdv-body{background:rgb(var(--bg))}
}
@media (prefers-reduced-motion:reduce){.pdv-card,#pdv.on .pdv-card{transform:none}#pdvMini,#pdvMini.enter{transform:none}}

/* live's run card controls, in the building panel; the bar steps aside while that panel is on screen */
/* live's run card (redesign/5-3 index.html, #pdvInline): it takes the form's place once the panel closes, and the
   showreel above keeps playing; nothing is drawn over the film. Live's amber is --a3 here, its emerald-br is --emerald. */
html.pdv-run .console>.c-idle,html.pdv-run .console>.c-build,html.pdv-run .console>.c-book{opacity:0;visibility:hidden;pointer-events:none}
html.pdv-run:not(.pdv-sim) .stage .st-build,html.pdv-run:not(.pdv-sim) .stage .st-result{opacity:0;visibility:hidden;pointer-events:none}
#pdvInline{grid-area:1/1;display:grid;gap:10px;width:100%;margin:0 0 6px;padding:18px;border-radius:var(--r2,16px);border:1px solid rgb(var(--line-br)/.6);background:rgb(var(--s1)/.9);
  text-align:left;opacity:1;visibility:visible;pointer-events:auto;grid-template-columns:minmax(0,1fr);justify-content:stretch;align-items:stretch;justify-items:stretch}
#pdvInline>.pdc-bar,#pdvInline>.btn{width:100%;align-self:stretch}
#pdvInline[hidden]{display:none!important}
.pdc-k{font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgb(var(--muted))}
.pdc-co{font:800 22px/1.15 Cabinet,Inter,sans-serif;color:rgb(var(--ink));overflow-wrap:anywhere}
.pdc-live{display:grid;grid-template-columns:18px 1fr;gap:8px;align-items:start;margin:0;font-size:15px;line-height:1.45;color:rgb(var(--body))}
.pdc-live i{width:8px;height:8px;border-radius:50%;background:rgb(var(--a3));justify-self:center;margin-top:7px}
#pdvInline.ready .pdc-live i{background:rgb(var(--emerald))}
.pdc-bar{height:4px;border-radius:2px;background:rgb(var(--line-br)/.5);overflow:hidden}
.pdc-bar i{display:block;height:100%;width:0;background:rgb(var(--emerald));transition:width 500ms cubic-bezier(.23,1,.32,1)}
#pdvInline.sim .pdc-bar{display:none}
/* live's .btn.big: Cabinet 800, a green gradient and a soft emerald glow */
#pdvInline .btn{width:100%;height:auto;justify-content:center;padding:17px 32px;font:800 17px/1.2 Cabinet,Inter,sans-serif;white-space:normal;color:rgb(3 32 26);
  background:linear-gradient(135deg,rgb(120 236 194),rgb(16 185 129));box-shadow:0 8px 26px rgb(var(--emerald)/.32);transition:transform 160ms cubic-bezier(.23,1,.32,1),box-shadow .4s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){#pdvInline .btn:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 16px 44px rgb(var(--emerald)/.5),0 0 70px rgb(var(--emerald)/.3)}}
#pdvInline .btn:active{transform:scale(.97)}
#pdvInline .pdv-link{justify-self:center}
html.pdv-form-in-view #pdvMini{opacity:0;transform:translateY(16px);pointer-events:none}