/* 🖖 GlowBop console theme: the website wears the same look as the app.
   Curved elbow frame, coloured keys, panel boxes with a colour bar, condensed caps and mono readouts.
   Loaded after style.css and overrides it. */
:root{--bg:#05040a;--bg2:#0b0816;--card:#0a0812;--card2:#14101f;--line:#2e2845;--dim:#b9aee0;--label:#9b8cff;
  --orange:#ff7a3d;--lav:#cc99ff;--gold:#ffcc66;--peri:#6677ff;--green:#3ce08a;--red:#ff4d6d;
  --cond:'Saira Condensed','Arial Narrow',sans-serif;--mono:'Saira Condensed','Arial Narrow',sans-serif;--r:0}   /* Oct 24 design audit fix 9: no third typeface; readouts use the condensed face */
body{background:#05040a}
h1,h2,h3,h4{font-family:var(--cond);letter-spacing:.5px;text-transform:uppercase;font-weight:800}
h1{font-size:clamp(40px,6.4vw,76px);line-height:.98;letter-spacing:1px}
h2{font-size:clamp(32px,4.2vw,50px);line-height:1}
h3{font-size:23px;letter-spacing:1px;font-weight:700}
.grad{background:none;color:var(--pink)}
.eyebrow{font:15px/1 var(--mono);letter-spacing:2px;color:var(--c,var(--amber));display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:26px;height:12px;border-radius:0 6px 0 6px;background:currentColor;display:inline-block}
.center .eyebrow{justify-content:center}

/* ── header: elbow + bars + coloured keys ───────────────────────── */
.nav.con-hd{position:sticky;top:0;z-index:60;background:#000;border:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.con-hd .wrap{display:flex;align-items:stretch;gap:0;height:auto;max-width:1240px}
.con-hd .elbow{flex:0 0 auto;width:118px;background:var(--pink);border-top-left-radius:48px;display:flex;align-items:flex-end;justify-content:flex-end;padding:0 10px 10px 0;position:relative;margin-top:10px}
.con-hd .elbow:hover{text-decoration:none;filter:brightness(1.08)}
.con-hd .elbow::after{content:"";position:absolute;left:100%;top:26px;width:22px;height:22px;background:radial-gradient(circle at 100% 100%,transparent 21px,var(--pink) 22px)}
.con-r{flex:1;min-width:0;display:flex;flex-direction:column;padding-top:10px}
.con-r .bars{height:26px;display:flex;gap:6px}
.con-r .bars i{display:block;background:var(--c);width:var(--w,26px);flex:0 0 auto}
.con-r .bars i:first-child{margin-left:0;background:var(--pink);width:40px}
.con-r .bars .grow{flex:1}
.con-r .bars b{display:flex;align-items:center;padding:0 14px;background:var(--pink);color:#000;font:800 22px/1 var(--cond);letter-spacing:5px}
.con-r .row{display:flex;align-items:center;gap:8px;padding:10px 0 10px 30px;min-height:64px}
.con-r .who{display:flex;flex-direction:column;line-height:1.15;margin-right:auto;min-width:0}
.con-r .who .k{font:600 13px var(--cond);letter-spacing:2px;color:var(--label);white-space:nowrap}
.con-r .who .v{font:14px var(--mono);color:var(--cyan);white-space:nowrap}
.con-r .who .v i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:7px;box-shadow:0 0 8px var(--green)}
@keyframes conblink{50%{opacity:.3}}
.nav.con-hd ul{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.nav.con-hd ul a{display:flex;align-items:flex-end;justify-content:flex-end;min-width:84px;height:44px;padding:0 10px 6px 18px;border-radius:0;background:var(--c);color:#000;font:700 15px/1 var(--cond);letter-spacing:1.5px;text-transform:uppercase;opacity:.86;transition:opacity .15s,filter .15s}
.nav.con-hd ul a:hover{opacity:1;background:var(--c);color:#000;filter:brightness(1.12)}
.nav.con-hd ul a.on{opacity:1;box-shadow:inset 0 -5px 0 #fff;background:var(--c);color:#000}
.nav.con-hd ul li:first-child a{border-radius:21px 0 0 21px}
.nav.con-hd .cta{margin-left:6px;white-space:nowrap}
.nav.con-hd .burger{display:none;margin-left:auto;border:0;border-radius:0 18px 0 18px;background:var(--amber);color:#000;font:800 15px var(--cond);letter-spacing:2px;width:auto;height:42px;padding:0 16px}
@media(max-width:1180px){.con-r .who{display:none}.con-r .row{padding-left:26px}}
@media(max-width:1040px){
  .con-hd .elbow{width:88px;border-top-left-radius:38px;padding:0 8px 8px 0}
  .con-r .bars b{font-size:18px;letter-spacing:3px}
  .con-r .row{padding:8px 0 8px 22px;min-height:56px}
  .nav.con-hd .burger{display:block}
  .nav.con-hd .cta{display:inline-flex;margin-left:auto}
  .nav.con-hd ul{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:5px;background:#000;padding:6px 16px 18px;box-shadow:0 30px 40px -20px #000}
  .nav.con-hd.open ul{display:flex}
  .nav.con-hd ul a{height:54px;font-size:18px;min-width:0;padding:0 14px 8px}
  .nav.con-hd ul li:first-child a{border-radius:28px 0 0 0}
  .nav.con-hd ul li:last-child a{border-radius:0 0 0 28px}
  .nav.con-hd .burger{margin-left:8px}
}
@media(max-width:520px){
  .con-hd .elbow{width:70px;border-top-left-radius:30px;margin-top:6px}
  .con-hd .elbow::after{top:20px;width:16px;height:16px;background:radial-gradient(circle at 100% 100%,transparent 15px,var(--pink) 16px)}
  .con-r{padding-top:6px}.con-r .bars{height:20px;gap:4px}.con-r .bars i:not(.grow):not(:first-child){display:none}.con-r .bars b{font-size:15px;padding:0 10px}
  .con-r .row{padding-left:18px;gap:6px}.nav.con-hd .cta{padding:0 12px;font-size:13px;min-height:38px}
  .nav.con-hd .burger{height:38px;padding:0 12px;font-size:13px}
}

/* sparkle logo (same 7x7 Curtain Burst as the app icon) */
.gbsvg{display:block;width:62px;height:62px;border-radius:14px;background:#07060d;line-height:0;filter:drop-shadow(0 0 10px rgba(255,61,154,.6))}
.gbsvg svg{width:100%;height:100%;display:block}
.gbsvg circle{transition:fill .12s}
.gbsvg circle.tw{fill:#fff!important;filter:url(#gbGlow)}
@media(max-width:1040px){.gbsvg{width:52px;height:52px;border-radius:12px}}
@media(max-width:520px){.gbsvg{width:42px;height:42px;border-radius:10px}}

/* ── buttons: console keys ──────────────────────────────────────── */
.btn{font:700 17px/1 var(--cond);letter-spacing:1.5px;text-transform:uppercase;border:0;border-radius:12px;background:var(--card2);min-height:44px;padding:0 24px;box-shadow:none}
.btn:hover{filter:brightness(1.15)}
.btn.primary{background:var(--pink);color:#000;box-shadow:0 0 26px -6px rgba(255,61,154,.8)}
.btn.c{background:var(--c);color:#000}
.btn.small{min-height:40px;padding:0 16px;font-size:14px}

/* ── panels (cards) ─────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-left:10px solid var(--c,var(--violet));border-radius:0 22px 0 22px;padding:20px 20px 22px}
a.card:hover{border-color:var(--line);border-left-color:var(--c,var(--violet));filter:brightness(1.12)}
.card h3{color:var(--c,var(--text));margin-bottom:.35em}
.card .more{font:700 14px var(--cond);letter-spacing:1.5px;text-transform:uppercase;color:var(--c,var(--cyan))}
.grid>.card:nth-child(8n+1),.plans>.plan:nth-child(3n+1){--c:var(--pink)}
.grid>.card:nth-child(8n+2),.plans>.plan:nth-child(3n+2){--c:var(--amber)}
.grid>.card:nth-child(8n+3),.plans>.plan:nth-child(3n+3){--c:var(--cyan)}
.grid>.card:nth-child(8n+4){--c:var(--lav)}
.grid>.card:nth-child(8n+5){--c:var(--orange)}
.grid>.card:nth-child(8n+6){--c:var(--green)}
.grid>.card:nth-child(8n+7){--c:var(--gold)}
.grid>.card:nth-child(8n+8){--c:var(--peri)}
.pill{font:14px var(--mono);letter-spacing:1px;background:#0a0812;border:1px solid var(--line);border-left:8px solid var(--amber);border-radius:0 14px 0 14px;text-transform:uppercase}
.pill b{color:var(--amber)}
.stats{gap:10px}
.stats div{background:var(--card);border-left:6px solid var(--c,var(--cyan));padding:8px 14px 10px;border-radius:0 12px 0 12px;font:600 12px var(--cond);letter-spacing:2px;text-transform:uppercase;color:var(--label)}
.stats div:nth-child(2){--c:var(--pink)}.stats div:nth-child(3){--c:var(--amber)}.stats div:nth-child(4){--c:var(--lav)}.stats div:nth-child(5){--c:var(--green)}
.stats b{font:34px/1 var(--mono);color:var(--c,var(--cyan));margin-bottom:2px}
.alt{background:#05040a;border-color:#1a1628}
.ticks li::before{background:var(--c,var(--pink));border-radius:0 4px 0 4px;box-shadow:0 0 10px var(--c,var(--pink))}
.feat{border-bottom:0;position:relative}
.feat+.feat::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,var(--amber) 0 40px,transparent 40px 46px,var(--lav) 46px 70px,transparent 70px 76px,#1a1628 76px)}
.feat:nth-child(6n+1){--c:var(--pink)}.feat:nth-child(6n+2){--c:var(--cyan)}.feat:nth-child(6n+3){--c:var(--amber)}.feat:nth-child(6n+4){--c:var(--lav)}.feat:nth-child(6n+5){--c:var(--orange)}.feat:nth-child(6n+6){--c:var(--green)}
.feat h2{color:var(--text)}
.feat .eyebrow{color:var(--c)}
.led,.shot{border-radius:0 26px 0 26px;border:2px solid #2e2845}
.led figcaption,.ph-label{font:600 13px var(--mono);letter-spacing:.5px;border-radius:0 8px 0 8px;border-style:solid}
.shot .concept{font:600 13px var(--mono);border-radius:0 8px 0 8px}
.band{border-radius:0 40px 0 40px;border:1px solid var(--line);border-left:14px solid var(--pink);background:#22174F}   /* Oct 24 design audit fix 10: flat violet panel, no colour blobs */
.plan{border-radius:0 26px 0 26px;border-left:10px solid var(--c)}
.plan.best{background:var(--card);border:2px solid var(--c);border-left:10px solid var(--c);box-shadow:0 0 50px -20px var(--c)}
.plan .tag{background:var(--c);border-radius:0 8px 0 8px;font:700 13px var(--cond);letter-spacing:2px}
.plan .price{font:44px/1 var(--mono);color:var(--c)}
details{border-radius:0 16px 0 16px;border-left:8px solid var(--lav);background:var(--card)}
details:nth-of-type(3n+2){border-left-color:var(--cyan)}details:nth-of-type(3n+3){border-left-color:var(--amber)}
summary{font:700 19px var(--cond);letter-spacing:.8px}
summary::after{color:var(--lav)}
.tablewrap{border-radius:0 18px 0 18px}
thead th{font:700 15px var(--cond);letter-spacing:1.5px;text-transform:uppercase;color:var(--label)}
.badge{font:700 12px var(--cond);letter-spacing:1.5px;text-transform:uppercase;border-radius:0 8px 0 8px}
.tip{border-radius:0 14px 0 14px;border-left-width:8px}
.toc a{font:600 15px var(--cond);letter-spacing:1px;text-transform:uppercase;border-radius:0 10px 0 10px;background:var(--card2);border:0;border-left:5px solid var(--lav)}
.toc a:nth-child(4n+2){border-left-color:var(--amber)}.toc a:nth-child(4n+3){border-left-color:var(--cyan)}.toc a:nth-child(4n+4){border-left-color:var(--pink)}
.toc a:hover{color:var(--text);text-decoration:none;filter:brightness(1.2)}
.doc kbd,.k{font:600 14px var(--cond);letter-spacing:1px;text-transform:uppercase;border:0;border-radius:8px;background:var(--card2);box-shadow:inset 0 0 0 1px #3a3352;padding:2px 10px}
.k.rail{border-radius:0;color:#000;background:var(--c);box-shadow:none;padding:2px 10px 0 16px}

/* guide sidebar = the app's side rail */
.side a{border-radius:0;background:var(--c,var(--card2));color:#000;font:700 15px/1 var(--cond);letter-spacing:1px;text-transform:uppercase;justify-content:flex-end;text-align:right;min-height:44px;align-items:flex-end;padding:0 10px 7px;margin-bottom:4px;opacity:.8}
.side a:hover{background:var(--c,var(--card2));color:#000;opacity:1}
.side a.on{opacity:1;border-left:0;box-shadow:inset -6px 0 0 #fff;background:var(--c)}
.side a:first-of-type{border-top-left-radius:26px}
.side h4,.side .sideh{font:13px var(--mono);letter-spacing:2px;color:var(--label)}
.side a:nth-of-type(8n+1){--c:var(--pink)}.side a:nth-of-type(8n+2){--c:var(--amber)}.side a:nth-of-type(8n+3){--c:var(--lav)}.side a:nth-of-type(8n+4){--c:var(--cyan)}
.side a:nth-of-type(8n+5){--c:var(--orange)}.side a:nth-of-type(8n+6){--c:var(--violet)}.side a:nth-of-type(8n+7){--c:var(--green)}.side a:nth-of-type(8n+8){--c:var(--gold)}
.doc h2{color:var(--text);border-top:6px solid #1a1628;padding-top:18px}
.doc h2::before{content:"";display:block;width:60px;height:6px;background:var(--c,var(--amber));margin:-24px 0 18px}
.pager a{border-radius:0 18px 0 18px;border-left:8px solid var(--lav)}
.pager .next{border-left:1px solid var(--line);border-right:8px solid var(--cyan)}
@media(max-width:900px){.side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.side h4,.side .sideh{grid-column:1/-1}.side a{margin:0}.side a:first-of-type{border-top-left-radius:20px}}

/* ── footer: bottom elbow ───────────────────────────────────────── */
footer{background:#000;border-top:0;padding:0 0 30px}
.con-ft{display:flex;height:64px;margin-bottom:40px}
.con-ft .elbow{width:118px;flex:0 0 auto;background:var(--peri);border-bottom-left-radius:44px;position:relative}
.con-ft .elbow::after{content:"";position:absolute;left:100%;bottom:22px;width:22px;height:22px;background:radial-gradient(circle at 100% 0,transparent 21px,var(--peri) 22px)}
.con-ft .bars{flex:1;display:flex;gap:6px;align-items:flex-end}
.con-ft .bars>*{height:22px;background:var(--c);display:flex;align-items:center;color:#000;font:700 13px var(--cond);letter-spacing:2px;padding:0 12px;white-space:nowrap}
.con-ft .bars>:first-child{background:var(--peri);width:40px;padding:0}
.con-ft .bars .grow{flex:1;justify-content:flex-end;overflow:hidden}
footer h4,footer .fth{font:600 14px var(--cond);letter-spacing:2px;color:var(--label)}
footer .fine{border-top:6px solid #1a1628}
@media(max-width:520px){.con-ft .elbow{width:70px;border-bottom-left-radius:30px}.con-ft .bars>:not(.grow):not(:first-child){display:none}}

/* ── 🎛️ the real console, live on the home page (iframe of /try/?embed=1#dj) ── */
.demo-tag{display:inline-flex;gap:8px;align-items:center;font:13px var(--mono);color:#000;background:var(--green);padding:5px 12px;border-radius:0 10px 0 10px;letter-spacing:1px;margin-top:14px}
.tryframe{position:relative;margin:30px 0 0;width:min(1280px,calc(100vw - 32px));margin-left:calc(50% - min(640px,50vw - 16px))}
.tryframe .tf-scr{position:relative;overflow:hidden;background:#000;border:12px solid #17141f;border-radius:26px;aspect-ratio:3/2;max-height:min(90vh,calc(100vh - 110px));max-height:min(90svh,calc(100svh - 110px));
  box-shadow:0 0 0 1px #2a2535,0 34px 100px -40px rgba(155,61,255,.85),0 0 60px -30px rgba(51,214,255,.6)}
.tryframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000;color-scheme:dark}
.tryframe .tf-poster,.tryframe .tf-poster img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:top center}
.tryframe .tf-play{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(ellipse at center,rgba(0,0,0,.15),rgba(0,0,0,.55));text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tryframe .tf-play:hover{text-decoration:none}
.tryframe .tf-btn{display:inline-flex;align-items:center;gap:14px;padding:18px 30px 18px 20px;border-radius:12px;background:var(--pink);color:#000;font:800 24px/1.1 var(--cond);letter-spacing:2px;text-transform:uppercase;text-align:left;
  box-shadow:0 0 0 4px rgba(255,61,154,.35),0 0 46px 6px rgba(255,61,154,.75),0 0 120px 20px rgba(155,61,255,.45)}
.tryframe .tf-btn i{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:#000;color:var(--pink);font-style:normal;font-size:24px;padding-left:4px}
.tryframe .tf-play:hover .tf-btn,.tryframe .tf-play:focus-visible .tf-btn{filter:brightness(1.12)}
.tryframe.loading .tf-btn{animation:none;filter:saturate(.6)}
.tryframe.loading .tf-btn i{animation:tfSpin 1s linear infinite;padding:0}
.tryframe.live .tf-play,.tryframe.live .tf-poster{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s,visibility 0s .35s}
@keyframes tfGlow{50%{box-shadow:0 0 0 7px rgba(255,61,154,.25),0 0 64px 12px rgba(255,61,154,.9),0 0 150px 30px rgba(155,61,255,.55)}}
@keyframes tfSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.tryframe .tf-btn,.tryframe.loading .tf-btn i{animation:none}}
.tryframe .tf-cap{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 18px;margin-top:14px;font:14px/1.4 var(--mono);color:var(--lav);letter-spacing:.3px;text-align:center}
.tryframe .tf-full{display:inline-flex;align-items:center;gap:6px;font:700 15px var(--cond);letter-spacing:1.5px;text-transform:uppercase;color:#000;background:var(--cyan);padding:7px 16px;border-radius:8px;text-decoration:none;white-space:nowrap}
.tryframe .tf-full:hover{text-decoration:none;filter:brightness(1.12)}
/* phones and upright tablets: a tall frame with the phone layout of the console */
@media(max-width:699px),(orientation:portrait) and (max-width:1023px){
  .tryframe .tf-scr{aspect-ratio:auto;height:min(85vh,calc(100vh - 100px));height:min(85svh,calc(100svh - 100px));max-height:none}
}
@media(max-width:699px){
  .tryframe{margin-top:22px;width:calc(100vw - 16px);margin-left:calc(50% - 50vw + 8px)}
  .tryframe .tf-scr{border-width:5px;border-radius:26px}
  .tryframe .tf-cap{padding:0 8px}
  .tryframe .tf-btn{font-size:19px;gap:10px;padding:14px 20px 14px 14px;letter-spacing:1.5px}
  .tryframe .tf-btn i{width:42px;height:42px;font-size:19px}
  .tryframe .tf-cap{font-size:13px}
}
/* screenshots of the app elsewhere on the site: tap one to open that page in the live demo */
a.scr{display:block;color:inherit;text-decoration:none}
a.scr:hover{text-decoration:none}
a.scr .try{position:absolute;right:10px;bottom:10px;z-index:3;font:700 12px var(--cond);letter-spacing:1.2px;text-transform:uppercase;color:#000;background:var(--cyan);padding:4px 10px;border-radius:8px;box-shadow:0 0 18px -2px var(--cyan);opacity:.92;transition:opacity .2s,transform .2s}
a.scr:hover .try,a.scr:focus-visible .try{opacity:1;transform:scale(1.06)}
.dev.phone a.scr .try{right:50%;transform:translateX(50%);bottom:14px}
.dev.phone a.scr:hover .try{transform:translateX(50%) scale(1.06)}

/* ── 📱 real screenshots in device frames ───────────────────────── */
.devices{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(0,1fr);gap:28px;align-items:end;margin-top:34px}
.dev{position:relative;margin:0}
.dev img{display:block;width:100%;height:auto}
.dev figcaption{margin-top:12px;font:13px var(--mono);color:var(--lav);letter-spacing:.5px;text-align:center}
.dev.laptop .scr{border:12px solid #17141f;border-bottom-width:16px;border-radius:18px 18px 4px 4px;background:#000;box-shadow:0 30px 90px -40px rgba(155,61,255,.75);overflow:hidden}
.dev.laptop .base{height:16px;margin:0 -6%;background:linear-gradient(#2a2535,#120f19);border-radius:0 0 18px 18px;position:relative}
.dev.laptop .base::before{content:"";position:absolute;left:50%;top:0;width:16%;height:6px;transform:translateX(-50%);background:#0b0910;border-radius:0 0 8px 8px}
.dev.tablet .scr{border:14px solid #17141f;border-radius:30px;overflow:hidden;background:#000;box-shadow:0 30px 80px -40px rgba(51,214,255,.6)}
.dev.phone .scr{border:10px solid #17141f;border-radius:44px;overflow:hidden;background:#000;position:relative;box-shadow:0 30px 80px -40px rgba(255,61,154,.7)}
.dev.phone .scr::before{content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);width:30%;height:22px;border-radius:14px;background:#000;z-index:2}
.phones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:40px}
.phones .dev .scr{max-height:none}
.dev .tag{position:absolute;top:-12px;left:18px;z-index:3;font:700 13px var(--cond);letter-spacing:2px;color:#000;background:var(--c,var(--amber));padding:4px 12px;border-radius:0 10px 0 10px;text-transform:uppercase}
@media(max-width:900px){.dev.laptop .base{margin:0 -2%}.devices{grid-template-columns:1fr}.phones{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.phones{gap:14px}.dev.phone .scr{border-width:7px;border-radius:30px}}

/* new feature chips on cards */
.new{display:inline-block;font:700 11px var(--cond);letter-spacing:2px;color:#000;background:var(--green);padding:2px 8px;border-radius:0 6px 0 6px;vertical-align:middle;margin-left:6px}
.brand{font:800 26px var(--cond);letter-spacing:2px;text-transform:uppercase}
.brand .gbsvg{width:44px;height:44px;border-radius:10px}
.con-r .who .k{background:none;box-shadow:none;padding:0;border-radius:0;font-weight:600}
.con-ft .bars .grow{min-width:0;text-overflow:ellipsis}
.con-ft .bars{min-width:0}.con-ft .bars .grow{display:block;line-height:22px;overflow:hidden;text-align:right}
.feat .media .dev.phone{max-width:300px;margin:0 auto}.feat .media .dev.tablet,.feat .media .dev.laptop{max-width:560px;margin:0 auto}.doc .dev{margin:26px auto}.doc .dev.phone{max-width:280px}
.grid.mini{gap:10px}.grid.mini .led figcaption{display:none}
.grid.gal>.gtile:last-child:nth-child(3n+1){grid-column:auto}[id]{scroll-margin-top:120px}
.showgrid{gap:12px}.showgrid .led figcaption{display:none}.showgrid h3{font-size:15px;margin:8px 2px 0;color:var(--lav)}
@media(max-width:900px){.showgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.showgrid{max-width:980px;margin-left:auto;margin-right:auto}
.dev .scr{position:relative}
.dev .wallov{position:absolute;display:block;pointer-events:none;object-fit:fill;background:#05040a}
/* iPad portrait and small laptops: the colored keys stay on screen (a second row), no hidden menu */
@media(min-width:700px) and (max-width:1040px){
  .nav.con-hd .burger{display:none!important}
  .con-r .row{flex-wrap:wrap;row-gap:8px}
  .nav.con-hd ul{display:flex;position:static;flex-direction:row;flex-wrap:nowrap;order:3;width:100%;padding:0;background:none;box-shadow:none;gap:5px}
  .nav.con-hd ul li{flex:1 1 0;min-width:0}
  .nav.con-hd ul a{height:42px;font-size:14px;min-width:0;padding:0 8px 6px 4px;letter-spacing:1px}
  .nav.con-hd ul li:first-child a{border-radius:21px 0 0 21px}
  .nav.con-hd ul li:last-child a{border-radius:0}
}
/* phones: the menu key says CLOSE while the menu is open */
.nav.con-hd.open .burger{background:var(--pink)}
.founder{max-width:780px;margin:0 auto 26px;text-align:center;background:var(--card);border:2px solid var(--amber);border-left:12px solid var(--amber);border-radius:0 26px 0 26px;padding:20px 22px;box-shadow:0 0 50px -20px var(--amber)}
.founder .tag{display:inline-block;background:var(--amber);color:#000;font:700 13px var(--cond);letter-spacing:2px;text-transform:uppercase;padding:4px 12px;border-radius:0 8px 0 8px}
.founder h3{font-size:30px;margin:10px 0 4px}.founder h3 b{color:var(--amber);font-family:var(--mono);font-size:38px}.founder h3 s{color:var(--dim);font-size:22px;margin-left:8px}
.founder p{color:var(--dim);margin:0}
.nums{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:26px}
.num{background:var(--card);border-left:8px solid var(--c);border-radius:0 16px 0 16px;padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px}
.num b{font:44px/1 var(--mono);color:var(--c)}
.num span{font:600 13px/1.2 var(--cond);letter-spacing:1.5px;text-transform:uppercase;color:var(--label)}
@media(max-width:1000px){.nums{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){.nums{grid-template-columns:repeat(2,minmax(0,1fr))}.num b{font-size:36px}}
.cloud{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:26px}
.cloud a{font:600 15px var(--cond);letter-spacing:1px;text-transform:uppercase;color:var(--text);background:var(--card2);border-left:5px solid var(--lav);border-radius:0 10px 0 10px;padding:7px 12px}
.cloud a:nth-child(6n+2){border-left-color:var(--pink)}.cloud a:nth-child(6n+3){border-left-color:var(--cyan)}.cloud a:nth-child(6n+4){border-left-color:var(--amber)}.cloud a:nth-child(6n+5){border-left-color:var(--green)}.cloud a:nth-child(6n+6){border-left-color:var(--orange)}
.cloud a:hover{text-decoration:none;filter:brightness(1.25)}

/* 📱 phones + iPads: the first screen is a full LED wall light show, headline on top */
.hero-bg{display:none}
@media(max-width:900px){
  .hero{min-height:100svh;padding-top:30svh}
  .hero::before{display:none}
  .hero-bg{display:block;position:absolute;left:0;right:0;top:0;height:100svh;z-index:0;overflow:hidden;background:#05040a;pointer-events:none}
  .hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,4,10,0) 72%,#05040a 100%)}
  .hero .wrap{z-index:1}
  .hero .lead,.hero h1{text-shadow:0 2px 14px #000,0 0 30px #000}
  .hero h1 .grad{text-shadow:none;filter:drop-shadow(0 2px 10px rgba(0,0,0,.9))}
  .hero .lead{color:#e6e0f5}
}
/* 🏆 Compare chart: the GlowBop column is a lit-up LED lane (rainbow edges that flow, a glowing header key) */
@keyframes usflow{to{background-position:0 300%}}
@keyframes ushue{0%{filter:hue-rotate(0)}100%{filter:hue-rotate(360deg)}}
@keyframes uspulse{0%,100%{box-shadow:0 0 18px -2px var(--pink),0 0 0 2px #fff inset}50%{box-shadow:0 0 34px 2px var(--violet),0 0 0 2px #fff inset}}
table.cmp th.us,table.cmp td.us{position:relative;background:linear-gradient(180deg,rgba(255,61,154,.16),rgba(155,61,255,.14),rgba(51,214,255,.14)) ;color:#fff;font-weight:700;min-width:190px}
table.cmp td.us::before,table.cmp td.us::after,table.cmp th.us::before,table.cmp th.us::after{content:"";position:absolute;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--pink),var(--violet),var(--cyan),var(--amber),var(--pink));background-size:100% 300%;animation:usflow 3s linear infinite}
table.cmp td.us::before,table.cmp th.us::before{left:0}
table.cmp td.us::after,table.cmp th.us::after{right:0}
table.cmp td.us small{color:#e6dcff}
table.cmp td.us .y{color:#7dffb0;text-shadow:0 0 10px rgba(60,224,138,.9)}
table.cmp tbody tr:last-child td.us{box-shadow:inset 0 -4px 0 var(--cyan)}
table.cmp thead th.us{background:#0a0812;padding:14px 12px 16px;text-align:center;vertical-align:bottom}
.us-head{display:flex;flex-direction:column;align-items:center;gap:6px}
.us-head .gbsvg{width:46px;height:46px;border-radius:12px;box-shadow:0 0 18px -2px var(--pink),0 0 0 2px #fff inset}
.us-head b{font:800 20px/1 var(--cond);letter-spacing:4px;background:linear-gradient(90deg,var(--pink),var(--violet),var(--cyan),var(--pink));background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:usflowx 4s linear infinite;text-transform:uppercase}
@keyframes usflowx{to{background-position:300% 0}}
.us-head i{font:700 11px var(--cond);letter-spacing:2px;font-style:normal;color:#000;background:linear-gradient(90deg,var(--amber),var(--pink));padding:3px 10px;border-radius:8px;box-shadow:0 0 14px rgba(255,61,154,.7)}
@media(prefers-reduced-motion:reduce){table.cmp .us::before,table.cmp .us::after,.us-head .gbsvg,.us-head b{animation:none}}
/* compare chart group rows */
table.cmp tr.grp th{background:linear-gradient(90deg,rgba(255,61,154,.22),rgba(155,61,255,.16) 40%,rgba(0,0,0,0));padding:18px 14px 12px;border-top:2px solid rgba(255,61,154,.5)}
table.cmp tr.grp b{font:800 17px var(--cond);letter-spacing:3px;text-transform:uppercase;color:#fff;margin-right:14px}
table.cmp tr.grp span{font-size:14px;color:var(--lav)}

/* ✨ spectacular bits: an angle that spins for the rainbow halos + LED chase lights */
@property --gbA{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes gbspin{to{--gbA:360deg}}

/* 1. pricing: the Best value card and the Founder deal get a live rainbow LED ring + a pulsing glow */
@keyframes bestglow{0%,100%{box-shadow:0 0 40px -6px rgba(255,61,154,.75),0 0 90px -30px rgba(51,214,255,.6)}50%{box-shadow:0 0 60px -4px rgba(155,61,255,.85),0 0 120px -30px rgba(255,204,102,.6)}}
.plan.best,.founder{position:relative;border:0;background:#0d0b16;box-shadow:0 0 40px -6px rgba(255,61,154,.75),0 0 90px -30px rgba(51,214,255,.6)}
.founder{background:radial-gradient(120% 140% at 50% 0%,#2a1430,#0d0b16 60%)}
.plan.best::before,.founder::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:3px;pointer-events:none;
  background:conic-gradient(from var(--gbA),var(--pink),var(--violet),var(--cyan),var(--amber),var(--pink));animation:gbspin 4s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.plan.best .price,.founder h3 b{background:linear-gradient(90deg,var(--pink),var(--violet),var(--cyan),var(--amber),var(--pink));background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:usflowx 4s linear infinite}
.plan.best .tag,.founder .tag{background:linear-gradient(90deg,var(--amber),var(--pink));color:#000;box-shadow:0 0 16px rgba(255,61,154,.8)}

/* 2. GlowBop flash-over: every few seconds a band of LED dots in our colors washes across the main buttons
   (pink → violet → cyan → amber), and the button's glow pulses through the same colors as it passes */
@keyframes gbwash{0%,58%{transform:translateX(-120%)}86%,100%{transform:translateX(120%)}}
@keyframes gbwashglow{0%,56%{box-shadow:0 0 26px -6px rgba(255,61,154,.8)}64%{box-shadow:0 0 34px 0 rgba(155,61,255,.95)}72%{box-shadow:0 0 38px 2px rgba(51,214,255,.95)}80%{box-shadow:0 0 34px 0 rgba(255,178,61,.9)}90%,100%{box-shadow:0 0 26px -6px rgba(255,61,154,.8)}}
.btn.primary,.btn.chase{position:relative;overflow:hidden;isolation:isolate}
.btn.primary::after,.btn.chase::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,var(--pink) 18%,var(--violet) 36%,var(--cyan) 54%,var(--amber) 72%,transparent 90%);
  -webkit-mask-image:radial-gradient(circle,#000 1.6px,transparent 2.1px);mask-image:radial-gradient(circle,#000 1.6px,transparent 2.1px);
  -webkit-mask-size:6px 6px;mask-size:6px 6px;opacity:.95;z-index:-1;filter:brightness(1.4) drop-shadow(0 0 3px #fff);
  animation:gbwash 6.5s cubic-bezier(.45,0,.35,1) infinite}
.btn.chase{background:#0d0b16;color:#fff;border:0;box-shadow:inset 0 0 0 2px rgba(51,214,255,.6)}
.btn.chase::after{animation-delay:3.2s}.btn.chase{animation-delay:3.2s}
@media(prefers-reduced-motion:reduce){.btn.primary::after,.btn.chase::after{animation-duration:14s}}

/* 4. LED ticker strip: dot-matrix letters scrolling like a real wall */
@keyframes tickrun{to{transform:translateX(-50%)}}
.ledtick{overflow:hidden;background:#05040a;border-top:2px solid #1c1730;border-bottom:2px solid #1c1730;padding:12px 0;position:relative;
  background-image:radial-gradient(circle,#1a1528 1.6px,transparent 2px);background-size:9px 9px}
.ledtick::before,.ledtick::after{content:"";position:absolute;top:0;bottom:0;width:60px;z-index:1;pointer-events:none}
.ledtick::before{left:0;background:linear-gradient(90deg,#000,transparent)}.ledtick::after{right:0;background:linear-gradient(-90deg,#000,transparent)}
.ledtick-run{display:flex;width:max-content;align-items:center;gap:26px;animation:tickrun 38s linear infinite;padding-left:26px}
.ledtick span,.ledtick i{font:900 38px/1 var(--cond);letter-spacing:5px;font-style:normal;white-space:nowrap;
  background:linear-gradient(90deg,var(--pink),var(--violet),var(--cyan),var(--amber),var(--pink));background-size:600px 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-mask-image:radial-gradient(circle,#000 1.9px,transparent 2.3px);mask-image:radial-gradient(circle,#000 1.9px,transparent 2.3px);-webkit-mask-size:5px 5px;mask-size:5px 5px;
  filter:drop-shadow(0 0 6px rgba(255,61,154,.55)) brightness(1.25)}
.ledtick i{background:none;color:#fff;-webkit-text-fill-color:#fff}
@media(max-width:600px){.ledtick span,.ledtick i{font-size:28px}}
@media(prefers-reduced-motion:reduce){.ledtick-run{animation-duration:90s}}

.tierjump{display:flex;gap:10px;justify-content:center;margin-top:18px;flex-wrap:wrap}.tierjump a{background:var(--card);border:1px solid #ffffff22;border-radius:0 14px 0 14px;padding:9px 18px;font:700 15px var(--cond);letter-spacing:1px;text-transform:uppercase;color:#fff;text-decoration:none}.tierjump a:hover{border-color:var(--amber)}
.tierh{font-size:clamp(30px,5vw,46px);scroll-margin-top:90px}.plans.pro .plan{border-color:#a855f755}.plans.pro .plan h3::before{content:"🎛️ PRO ";font-size:.7em;color:#c084fc;letter-spacing:2px}

/* Pro DJ: the small tag next to Pro-only features, and the home page teaser strip */
.protag{display:inline-block;font:700 11px/1.5 var(--cond);letter-spacing:1.5px;text-transform:uppercase;color:#000;background:#c084fc;padding:1px 8px;border-radius:0 6px 0 6px;vertical-align:middle;margin-left:6px;white-space:nowrap;box-shadow:0 0 12px rgba(192,132,252,.45)}
h2 .protag,h3 .protag{font-size:12px}
.prostrip{position:relative;border-radius:0 40px 0 40px;border:1px solid #a855f755;border-left:14px solid #c084fc;padding:40px clamp(18px,4vw,48px);
  background:radial-gradient(circle at 88% 18%,rgba(192,132,252,.22),transparent 55%),radial-gradient(circle at 8% 90%,rgba(51,214,255,.12),transparent 50%),var(--card)}
.prostrip h2{margin-top:8px}.prostrip .lead{max-width:62ch}
.prostrip .prochips{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:24px 0}
.prostrip .prochips a{display:block;background:#0d0b16;border:1px solid var(--line);border-top:4px solid var(--c,#c084fc);border-radius:0 14px 0 14px;padding:14px 14px 12px;color:var(--text);text-decoration:none}
.prostrip .prochips a:hover{filter:brightness(1.2);text-decoration:none}
.prostrip .prochips b{display:block;font:700 19px/1.15 var(--cond);letter-spacing:1px;text-transform:uppercase}
.prostrip .prochips span{display:block;font-size:14px;color:var(--dim);margin-top:4px;line-height:1.4}
@media(max-width:900px){.prostrip .prochips{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.prostrip .prochips{grid-template-columns:1fr}.prostrip{border-left-width:8px}}
.railgrp{margin:22px 0 6px;font:700 14px var(--cond);letter-spacing:3px;color:var(--label);text-transform:uppercase}
table.cmp tr.grp.pro th{background:linear-gradient(90deg,rgba(192,132,252,.32),rgba(155,61,255,.12) 40%,rgba(0,0,0,0));border-top-color:#c084fc}
@media(max-width:600px){.dev.laptop .base{margin:0}}

.btn.herotry{font-size:clamp(17px,2.2vw,22px);padding:16px 30px;box-shadow:0 0 0 3px #fff3,0 0 34px var(--pink)}
@keyframes herotry{0%,100%{box-shadow:0 0 0 3px #fff3,0 0 26px var(--pink)}50%{box-shadow:0 0 0 3px #fff6,0 0 52px var(--pink)}}
@media (prefers-reduced-motion:reduce){.btn.herotry{animation:none}}
.tryframe.ready .tf-play{display:none}
#tryLive{scroll-margin-top:90px}

.herologo{display:block;width:min(560px,82vw);height:auto;margin:0 0 18px -6px;filter:drop-shadow(0 6px 30px rgba(0,0,0,.55))}
.ftlogo{display:block;line-height:0}.ftlogo img{width:min(300px,70vw);height:auto;margin-left:-6px}
@media (max-width:700px){.herologo{background:radial-gradient(ellipse at center,rgba(7,6,13,.85),rgba(7,6,13,.55) 70%,rgba(7,6,13,0));padding:10px 14px;margin-left:-14px;border-radius:24px}}

/* the laptop frame's base sticks out past the screen on purpose: never let it widen the page */
html,body{overflow-x:clip}

.works{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 4px}
.works .wk{font:600 13px var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--dim);margin-right:2px}
.works .wb{font:600 13px/1 var(--body,inherit);padding:8px 12px;border-radius:8px;border:1px solid var(--line);background:#0c0a16;color:#fff;text-decoration:none;white-space:nowrap}
.works .wb i{font:600 13px var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--amber);margin-left:6px}
.works .wb.ok{border-color:var(--green)} .works .wb.ok i{color:var(--green)}
.works .wb.more{border-style:dashed;color:var(--cyan)}
@media (max-width:600px){.works .wb{font-size:12px;padding:7px 10px}}

.works .wb.soonx{border-color:var(--pink)} .works .wb.soonx i{color:var(--pink)}
/* ▶ DEMO key in the top bar (right before Pricing): opens the full app with the power-on intro */
.nav.con-hd ul a.navdemo{gap:5px;opacity:1;box-shadow:0 0 12px -3px var(--cyan);animation:demoFlash 3.2s steps(1,end) infinite}
.nav.con-hd ul a.navdemo:hover{animation:none;background:#fff}
.nav.con-hd ul a.navdemo b{font-size:.7em;line-height:1.3}
/* 🚨 console alert blink: steady, then a quick double flash to white every few seconds */
@keyframes demoFlash{0%,72%{background:var(--cyan);box-shadow:0 0 12px -3px var(--cyan)}76%{background:#fff;box-shadow:0 0 26px 2px #bff4ff}81%{background:var(--cyan);box-shadow:0 0 12px -3px var(--cyan)}86%{background:#fff;box-shadow:0 0 26px 2px #bff4ff}91%,100%{background:var(--cyan);box-shadow:0 0 14px -2px var(--cyan)}}
@media(prefers-reduced-motion:reduce){.nav.con-hd ul a.navdemo{animation:none}}
/* room for the 9th key: tuck the "Light show console" label sooner and slim the keys a little on mid-size screens */
@media(min-width:1041px){.con-r .who{display:none}.con-r .row{padding-left:26px}}
@media(max-width:1320px) and (min-width:1041px){.nav.con-hd ul{gap:4px}.nav.con-hd ul a{min-width:66px;padding:0 8px 6px 12px;letter-spacing:1px;font-size:14px}.nav.con-hd .cta{padding-left:12px;padding-right:12px}}
@media(max-width:1140px) and (min-width:1041px){.nav.con-hd ul a{min-width:0;padding:0 7px 6px 9px;font-size:13px}}

/* 📱 phones and tablets: a flashing ▶ DEMO key next to Try free in the header, plus a demo bar that rides along while you scroll */
.nav.con-hd .demo-m{display:none}
@media(max-width:1040px){
  .nav.con-hd .demo-m{display:inline-flex;align-items:center;gap:5px;height:42px;margin-left:auto;padding:0 14px;border-radius:21px;background:var(--cyan);color:#000;font:800 15px/1 var(--cond);letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;white-space:nowrap;animation:demoFlash 3.2s steps(1,end) infinite}
  .nav.con-hd .demo-m b{font-size:.7em}
  .nav.con-hd .demo-m + .cta{margin-left:8px}
}
@media(max-width:560px){.nav.con-hd .ctax{display:none}.nav.con-hd .demo-m{padding:0 12px;letter-spacing:1px}.nav.con-hd .cta{padding-left:12px;padding-right:12px}.nav.con-hd .burger{padding:0 11px;letter-spacing:1px}}
@media(max-width:350px){.nav.con-hd .demo-m{padding:0 9px}.nav.con-hd .demo-m b{display:none}}
.demo-dock{display:none}
@media(max-width:820px){
  .demo-dock{display:flex;align-items:center;justify-content:center;gap:8px;position:fixed;left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:80;height:54px;border-radius:27px;
    background:var(--cyan);color:#000;font:800 18px/1 var(--cond);letter-spacing:2px;text-transform:uppercase;text-decoration:none;
    box-shadow:0 10px 30px -6px #000,0 0 18px -4px var(--cyan);transform:translateY(130%);transition:transform .35s cubic-bezier(.2,1.2,.4,1);animation:demoFlash 3.2s steps(1,end) infinite}
  .demo-dock b{font-size:.75em}
  .demo-dock.show{transform:none}
  .demo-dock:hover{color:#000;text-decoration:none}
}
@media(prefers-reduced-motion:reduce){.nav.con-hd .demo-m,.demo-dock{animation:none}}
/* ▶ drawn as a shape, not a character: iPhones turn the ▶ character into a play-button emoji */
.nav.con-hd ul a.navdemo b,.nav.con-hd .demo-m b,.demo-dock b{display:inline-block;font-size:0;width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;margin:0 2px 0 0;align-self:center}
.nav.con-hd ul a.navdemo b{margin-bottom:2px}
.demo-dock b{border-left-width:12px;border-top-width:8px;border-bottom-width:8px}
@media(max-width:350px){.nav.con-hd .demo-m b{display:inline-block}}
@media(max-width:390px){.nav.con-hd .demo-m{padding:0 10px;font-size:14px;letter-spacing:.5px;gap:4px}.nav.con-hd .cta{padding-left:10px;padding-right:10px;font-size:12px;letter-spacing:.5px}.nav.con-hd .demo-m + .cta{margin-left:6px}.nav.con-hd .burger{margin-left:6px;padding:0 9px}}
/* 📱 calmer demo bar: dark with a cyan outline, no white flashing (iPhone Safari tints its own bottom bar to match whatever is at the bottom of the screen) */
@media(max-width:820px){
  .demo-dock{animation:none;background:rgba(7,5,13,.92);color:var(--cyan);box-shadow:inset 0 0 0 2px var(--cyan),0 10px 30px -6px #000;bottom:calc(22px + env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .demo-dock:hover{color:var(--cyan)}
}
@keyframes dockPulse{0%,100%{box-shadow:inset 0 0 0 2px var(--cyan),0 10px 30px -6px #000}50%{box-shadow:inset 0 0 0 2px var(--cyan),0 0 18px -4px var(--cyan),0 10px 30px -6px #000}}
@media(prefers-reduced-motion:reduce){.demo-dock{animation:none}}
@media(max-width:820px){footer{padding-bottom:calc(90px + env(safe-area-inset-bottom))}}   /* room so the demo bar never covers the footer links */

/* 🌊 a pink wave sweeps through the demo bar's words every few seconds */
.demo-dock span{background:linear-gradient(90deg,var(--cyan) 0%,var(--cyan) 34%,var(--pink) 43%,#ff8fca 50%,var(--pink) 57%,var(--cyan) 66%,var(--cyan) 100%);background-size:300% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:dockWave 3.2s ease-in-out infinite}
@keyframes dockWave{0%,25%{background-position:100% 0}90%,100%{background-position:0 0}}
.demo-dock b{animation:dockTri 3.2s ease-in-out infinite}
@keyframes dockTri{0%,30%,62%,100%{border-left-color:var(--cyan)}42%,50%{border-left-color:var(--pink)}}
@media(prefers-reduced-motion:reduce){.demo-dock span,.demo-dock b{animation:none}}

/* 📱 phones + iPads (Oct 16): see the product working sooner. Headline, one short line, then the pool party video right away;
   the buttons follow, and the "run the whole show" line, the works-with chips and the numbers move below them */
@media(max-width:900px){
  .hero{padding-top:9svh}
  .hero .herotext{display:contents}
  .hero .herologo{order:1}.hero .pill{order:2;justify-self:start}.hero h1{order:3}.hero .herotext>.lead:not(.lead2){order:4}
  .hero .btns{order:5;margin-top:6px}
  .hero .hero-shot{order:6;margin:4px 0 6px}
  .hero .lead2{order:7;margin-top:6px!important}.hero .works,.hero .works1{order:8}.hero .stats{order:9}
  .hero .wrap{gap:14px}
}
@media(max-width:700px){.hero .stats{display:none}}   /* phones: the numbers live further down ("By the numbers"), so the demo comes sooner */
/* 📲 upright iPads (two-row header): one DEMO only (the key in the row, no extra pill), keys sized to their words so nothing spills out */
@media(min-width:700px) and (max-width:1040px){
  .nav.con-hd .demo-m{display:none}
  .nav.con-hd .cta{margin-left:auto}
  .nav.con-hd ul li{flex:1 1 auto}
  .nav.con-hd ul a{font-size:13px;letter-spacing:.5px;padding:0 7px 6px 6px;justify-content:flex-end;white-space:nowrap}
  .nav.con-hd ul li:first-child a{padding-left:18px}
}
@media(min-width:880px) and (max-width:1040px){.nav.con-hd ul a{font-size:14px;letter-spacing:1px}}
@media(min-width:700px) and (max-width:1040px){.nav.con-hd .demo-m + .cta{margin-left:auto}}
/* wide screens: the whole row of keys slides right so Try free sits at the edge, wherever the keys end */
@media(min-width:1041px){.nav.con-hd ul{margin-left:auto}.nav.con-hd .cta{margin-left:8px}}
.nav.con-hd ul a.navdemo b{align-self:flex-end;margin-bottom:3px}
/* 📏 Oct 19 (Graham: "update the website with the new look of our iPad buttons"): the app's button system on the site.
   Three sizes (64 hero, 48 regular, 36 small). Main buttons are solid gradient keys that deepen toward the corner with a soft
   icon behind the words (assets/site.js moves a leading emoji into .bwm). Everyday buttons are slim outline pills in their
   colour that fill in on hover. No grey. */
.btn{min-height:44px;border-radius:12px;padding:0 22px;border:0;background:transparent;color:color-mix(in srgb,var(--c,var(--cyan)) 78%,#fff);box-shadow:inset 0 0 0 1.5px var(--c,var(--cyan));font:800 15px 'Saira Condensed','DM Sans',sans-serif;letter-spacing:1px;text-transform:uppercase;justify-content:center;position:relative;overflow:hidden;isolation:isolate}
.btn:hover{background:color-mix(in srgb,var(--c,var(--cyan)) 16%,transparent);text-decoration:none}
.btn.primary{background:linear-gradient(135deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.12)),var(--pink);color:#000;box-shadow:0 0 26px -6px rgba(255,61,154,.8);min-height:56px}
.btn.c{background:linear-gradient(135deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.34)),var(--c);color:#000;box-shadow:none}
.btn.primary:hover{filter:brightness(1.08)}
.btn.herotry,.btns .btn.primary.big{min-height:64px;font-size:19px;padding:0 30px}
.btn.small{min-height:36px;padding:0 14px;font-size:13px}

/* Oct 22 (Impeccable audit, Graham: "all issues"): squared keys like the app (12 main, 8 chips), no pulsing glows, readable pink keys */
.nav.con-hd .burger,.nav.con-hd .cta,.nav.con-hd .demo-m{min-height:44px;height:44px}
footer li{margin:0}footer li a{display:inline-flex;align-items:center;min-height:44px}
.tryframe .tf-full{min-height:44px}
footer .fth{margin:0 0 6px}
.skip{position:absolute;left:12px;top:-80px;z-index:9999;background:var(--cyan);color:#000;font:800 15px var(--cond);letter-spacing:1px;text-transform:uppercase;padding:12px 16px;border-radius:10px}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
::selection{background:var(--pink);color:#05040a}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:700px){.hero{padding-top:7svh}.hero .pill{font-size:12px;letter-spacing:.5px;padding:7px 10px;line-height:1.5;max-width:100%}.hero h1{margin-top:4px}}
/* Oct 22 (Graham: "are we able to see the words set your lights free? if it is so flashing"): the video behind the headline is darker
   from 18% down, and the words carry a soft dark shadow, so every moment of the loop stays readable */
@media(max-width:900px){.hero h1{text-shadow:0 2px 18px rgba(5,4,10,.9),0 1px 3px rgba(5,4,10,.8)}.hero h1 .grad{filter:drop-shadow(0 2px 12px rgba(5,4,10,.9))}.hero .herotext>.lead,.hero .lead2,.hero .pill{text-shadow:0 1px 10px rgba(5,4,10,.9)}}
/* 🎄 Oct 22: laptops get the season's video too, the wide version behind the whole hero */
@media(min-width:901px){.hero-bg{display:block;position:absolute;inset:0;z-index:0;overflow:hidden;background:#05040a;pointer-events:none}.hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,4,10,0) 72%,#05040a 100%)}.hero .wrap{position:relative;z-index:1}.hero::before{display:none}.hero h1{text-shadow:0 2px 18px rgba(5,4,10,.9),0 1px 3px rgba(5,4,10,.8)}.hero h1 .grad{filter:drop-shadow(0 2px 12px rgba(5,4,10,.9))}.hero .herotext>.lead,.hero .lead2,.hero .pill,.hero .works1{text-shadow:0 1px 10px rgba(5,4,10,.95)}}
.hero h1 .grad{text-shadow:none}
@media(min-width:901px){.hero-bg::after{background:linear-gradient(180deg,rgba(5,4,10,0) 90%,#05040a 100%)}}
/* 🎄 Oct 22 (Graham: "on phones and iPads hide the pool party photo in the Christmas version so the tree shows") */

/* Oct 22 (Impeccable re-run, Graham: "everything"): the light sweep runs faint behind the words, never over them; reduced motion stops it.
   The guide sidebar's picked item is dark text on its colour. Every key and link is at least 44 px tall. */
.btn.primary::after,.btn.chase::after{z-index:-1;opacity:.35}
@media(prefers-reduced-motion:reduce){.btn.primary::after,.btn.chase::after{animation:none;opacity:0}}
.side a.on,.side a.on *{color:#05040a!important}
.btn.small{min-height:44px}footer .fine a{display:inline-flex;align-items:center;min-height:44px}
.hero h1{text-wrap:balance}
:where(img[width][height]){height:auto}
.mainnav{display:contents}
.toc a{min-height:44px;display:inline-flex;align-items:center}
.btn.herotry{min-height:56px;padding:0 28px}

/* 🏡 Oct 23 (Graham: "build the Living room story as the holiday hero"): version C, the family on the lawn watching their window tree */
html[data-hero=living] .hero{background:#0b0612;min-height:min(100svh,920px);display:flex;align-items:flex-end}
.living-pic img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.living-concept{position:absolute;top:12px;right:12px;z-index:1;font:600 13px 'DM Sans',sans-serif;letter-spacing:.4px;color:#e9e6f7;background:rgba(10,10,16,.6);border:1px solid rgba(255,255,255,.15);border-radius:0 8px 0 8px;padding:3px 9px}
html[data-hero=living] .hero::before,html[data-hero=living] .hero-bg,html[data-hero=living] .hero .hero-shot,html[data-hero=living] .hero .lead2{display:none!important}
html[data-hero=living] .hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(11,6,18,.94) 0%,rgba(11,6,18,.62) 40%,rgba(11,6,18,0) 70%),linear-gradient(0deg,#05040a 0%,rgba(11,6,18,0) 32%)}
html[data-hero=living] .hero .wrap{position:relative;z-index:1;display:block;width:100%}
html[data-hero=living] .hero .herotext{max-width:640px;padding-bottom:6vh}
html[data-hero=living] .hero h1{margin:16px 0 18px}
html[data-hero=living] .hero .herotext>.lead{color:#f1e6d6;font-size:20px}
html[data-hero=living] .hero .works1{color:#e4d6c4}
@media(max-width:900px){
  html[data-hero=living] .hero{padding-top:52vw}
  .living-pic img{bottom:auto;height:auto}
  html[data-hero=living] .hero::after{background:linear-gradient(0deg,#05040a 38%,rgba(11,6,18,.6) 62%,rgba(11,6,18,0) 82%)}
  html[data-hero=living] .hero .wrap{display:flex;flex-direction:column}
  html[data-hero=living] .hero h1{font-size:clamp(40px,11vw,60px)}
}
@media(min-width:701px) and (max-width:900px){html[data-hero=living] .hero{padding-top:74vw}html[data-hero=living] .hero::after{background:linear-gradient(0deg,#05040a 26%,rgba(11,6,18,.55) 44%,rgba(11,6,18,0) 60%)}}
/* Oct 24 design audit fix 5: Reduce Motion visitors start the recorded clips themselves */
.vplay{position:absolute;top:10px;right:10px;z-index:3;min-width:72px;min-height:44px;padding:0 14px;border:0;border-radius:0 10px 0 10px;background:rgba(7,5,13,.88);color:var(--cyan);box-shadow:inset 0 0 0 2px var(--cyan);font:800 15px/1 var(--cond);letter-spacing:1.5px;text-transform:uppercase;cursor:pointer}
.shot .vplay{top:auto;bottom:10px}
/* Oct 24 design audit fix 8: favourite features as recorded clips in mixed sizes (4+2, 2+4, 3+3); the wide tile sets the row height */
.ftiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px 18px;margin-top:30px}
.ftile{grid-column:span 2;display:flex;flex-direction:column;color:var(--text)}
.ftile.w4{grid-column:span 4}.ftile.w3{grid-column:span 3}
.ftile .led{flex:1;min-height:170px;aspect-ratio:auto;border-color:var(--line);transition:border-color .2s}
.ftile.w4 .led,.ftile.w3 .led{flex:none;aspect-ratio:40/21}
.ftile .led video{position:absolute;inset:0}
.ftile:hover{text-decoration:none}.ftile:hover .led{border-color:var(--c)}
.ftile h3{margin:14px 0 4px;color:var(--c)}
.ftile p{margin:0;color:var(--dim);font-size:16px}
@media(max-width:700px){.ftile,.ftile.w4,.ftile.w3{grid-column:1/-1}.ftile .led{flex:none;aspect-ratio:40/21;min-height:0}}