/* =========================================================
   CUSTOM DASHBOARDS — light, minimal page
   Builds on main.css (Archivo + IBM Plex Mono, header, book-a-call).
   Acid is used sparingly here: one highlighter mark and a few dots.
   ========================================================= */
body.db{
  --ink:#0b0b0d; --ink-2:#26262c; --mute:#6b6b74; --faint:#a4a4ad;
  --rule:#ebebe7; --soft:#f6f6f4; --soft-2:#efefec;
  --sky:#0284c7; --sky-2:#38bdf8; --red:#ff5a4f;
  --w:1240px;
  background:#fff;color:var(--ink);
}
.db ::selection{background:var(--ink);color:#fff;}
.db :focus-visible{outline:2px solid var(--sky);outline-offset:3px;}

/* ---------- header on white ---------- */
.db .hdr{color:var(--ink);}
.db .hdr nav a{color:var(--mute);}
.db .hdr nav a:hover{color:var(--ink);}
.db .hdr.docked{background:rgba(8,8,10,.94);border-bottom-color:rgba(255,255,255,.08);color:#fff;}
.db .hdr.docked nav a{color:rgba(255,255,255,.7);opacity:1;}
.db .hdr.docked nav a:hover,.db .hdr.docked .wm:hover{color:#fff;}
.db .hdr.docked .menu-btn{color:#fff;}
.db .hdr.open{color:#fff;}
@media(max-width:700px){.db .hdr.open .wm{color:#fff;}}

/* ---------- layout primitives ---------- */
.dwrap{max-width:var(--w);margin:0 auto;padding:0 var(--pad);}
.dsec{padding:clamp(80px,11vw,150px) 0 0;}
.kick{display:inline-flex;align-items:center;gap:10px;font-family:var(--fm);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);}
.kick i{width:6px;height:6px;border-radius:50%;background:var(--ink);}
.dh2{font-weight:800;font-size:clamp(36px,5vw,64px);line-height:1.02;letter-spacing:-.045em;margin-top:18px;max-width:16ch;}
.lede{font-size:clamp(16px,1.35vw,19px);line-height:1.6;color:var(--mute);margin-top:20px;max-width:56ch;}
.lede b{color:var(--ink);font-weight:500;}
.shead{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end}
.shead .lede{margin-top:0;justify-self:end}
.btn-d{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 24px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;font-size:15px;border:0;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease);font-family:var(--fd);}
.btn-d:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(0,0,0,.45);}
.btn-d svg,.lnk svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.lnk{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--ink);padding:0 4px;height:52px;}
.lnk svg{transition:transform .25s var(--ease);}
.lnk:hover svg{transform:translateX(4px);}
.mark{background:linear-gradient(transparent 62%,var(--acid) 62%,var(--acid) 92%,transparent 92%);padding:0 .06em;}

/* reveal */
.up{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.up.in{opacity:1;transform:none;}
.up.d1{transition-delay:.08s}.up.d2{transition-delay:.16s}.up.d3{transition-delay:.24s}

.dh1{font-weight:800;font-size:clamp(46px,7.6vw,108px);line-height:.98;letter-spacing:-.05em;margin:26px auto 0;max-width:13ch;}
.dh1 .soft{color:var(--faint);}

/* ---------- 1. hero: black stage with a spotlight ---------- */
.dhero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  background:#050506;color:#fff;overflow:hidden;padding:110px 0 120px;}
.spot{position:absolute;inset:0;pointer-events:none}
.spot .beam{position:absolute;left:50%;top:-30%;width:min(1100px,130vw);height:150%;transform:translateX(-50%);
  background:radial-gradient(50% 60% at 50% 0%,rgba(255,255,255,.16),rgba(255,255,255,.05) 45%,transparent 72%);
  -webkit-mask:linear-gradient(180deg,#000 30%,transparent 95%);mask:linear-gradient(180deg,#000 30%,transparent 95%);
  clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);filter:blur(18px);opacity:0;transition:opacity 1.6s var(--ease) .2s}
.spot .pool{position:absolute;left:50%;top:52%;width:min(1000px,120vw);height:min(560px,70vh);transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(255,255,255,.11),rgba(255,255,255,.035) 55%,transparent 100%);opacity:0;transition:opacity 1.8s var(--ease) .4s;animation:breathe 7s ease-in-out infinite}
.spot .dust{position:absolute;inset:0;opacity:.35;background-image:radial-gradient(rgba(255,255,255,.5) 1px,transparent 1.2px);background-size:3px 3px;
  -webkit-mask:radial-gradient(40% 50% at 50% 45%,#000,transparent 75%);mask:radial-gradient(40% 50% at 50% 45%,#000,transparent 75%);mix-blend-mode:overlay}
.dhero.go .spot .beam,.dhero.go .spot .pool{opacity:1}
@keyframes breathe{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.05)}}
.hero-in{position:relative;z-index:1}
.dhero .dh1{margin:0 auto;max-width:14ch;font-size:clamp(48px,8vw,120px);line-height:1;color:#fff}
.dhero .dh1 .hl{display:inline;opacity:0;filter:blur(10px);transition:opacity 1.1s var(--ease),filter 1.1s var(--ease)}
.dhero .dh1 .hl:nth-child(2){transition-delay:.45s}
.dhero.go .dh1 .hl{opacity:1;filter:none}
.dhero .dh1 .acid{color:var(--acid)}
.dhero .dh1 .soft{color:#5d5d66}
.hero-sub{margin:30px auto 0;max-width:34ch;font-size:clamp(17px,1.6vw,22px);line-height:1.5;color:#a9a9b4;
  opacity:0;transform:translateY(14px);transition:opacity 1s var(--ease) .95s,transform 1s var(--ease) .95s}
.hero-act{margin-top:38px;opacity:0;transform:translateY(14px);transition:opacity 1s var(--ease) 1.15s,transform 1s var(--ease) 1.15s}
.dhero.go .hero-sub,.dhero.go .hero-act{opacity:1;transform:none}
.dhero .btn-d{background:#fff;color:#0b0b0d}
.dhero .btn-d:hover{box-shadow:0 0 0 6px rgba(255,255,255,.08),0 18px 40px -14px rgba(255,255,255,.25)}
.cue{position:absolute;left:50%;bottom:clamp(24px,4vh,44px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;
  font-family:var(--fm);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#8a8a94;opacity:0;transition:opacity 1s var(--ease) 1.4s,color .3s}
.dhero.go .cue{opacity:1}
.cue:hover{color:#fff}
.cue i{position:relative;width:26px;height:42px;border-radius:14px;border:1.5px solid rgba(255,255,255,.28)}
.cue i::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:wheel 1.8s var(--ease) infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(-2px)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
/* header sits on the black hero until it docks on white */
.db .hdr:not(.docked):not(.open){color:#fff}
.db .hdr:not(.docked):not(.open) nav a{color:rgba(255,255,255,.6)}
.db .hdr:not(.docked):not(.open) nav a:hover{color:#fff}
@media(prefers-reduced-motion:reduce){.dhero .dh1 .hl,.hero-sub,.hero-act,.cue,.spot i{transition:none!important;animation:none!important;opacity:1!important;filter:none!important;transform:none}.spot .pool{transform:translate(-50%,-50%)!important}}

/* ---------- 2. scattered → connected ---------- */
.scene{margin-top:clamp(40px,5vw,64px);border-radius:32px;background:var(--soft);position:relative;overflow:hidden;}
.scene-top{display:flex;align-items:center;gap:14px;padding:22px 24px 0;position:relative;z-index:3;flex-wrap:wrap}
.tog{display:inline-flex;padding:4px;border-radius:999px;background:#fff;border:1px solid var(--rule);}
.tog button{height:36px;padding:0 18px;border:0;border-radius:999px;background:none;font-family:var(--fd);font-size:14px;font-weight:500;color:var(--mute);cursor:pointer;transition:background .25s,color .25s;}
.tog button[aria-pressed="true"]{background:var(--ink);color:#fff;}
.meter{margin-left:auto;display:flex;gap:22px;font-family:var(--fm);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);}
.meter b{display:block;font-family:var(--fd);font-size:26px;font-weight:700;letter-spacing:-.03em;color:var(--ink);text-transform:none;transition:color .4s}
.scene.joined .meter b{color:var(--sky);}
.dstage{position:relative;height:clamp(520px,52vw,640px);}
.dstage svg.lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.dstage svg.lines line{stroke:var(--sky);stroke-width:1.4;stroke-dasharray:3 7;opacity:0;transition:opacity .6s;animation:flow 1.2s linear infinite;vector-effect:non-scaling-stroke;}
.scene.joined .dstage svg.lines line{opacity:.55;}
@keyframes flow{to{stroke-dashoffset:-20}}
.dchip{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%) rotate(var(--r,0deg));display:flex;align-items:center;gap:9px;padding:9px 14px 9px 9px;border-radius:14px;background:#fff;border:1px solid var(--rule);
  box-shadow:0 10px 24px -14px rgba(15,23,42,.3);font-size:13.5px;font-weight:500;white-space:nowrap;z-index:2;
  transition:left 1.1s var(--ease),top 1.1s var(--ease),transform 1.1s var(--ease),box-shadow .6s,border-color .6s;transition-delay:var(--d,0s);}
.dchip .lg{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-family:var(--fm);font-size:10px;font-weight:500;color:#fff;background:var(--c,#333);}
.dchip .bd{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--red);color:#fff;font-size:10.5px;font-weight:700;display:grid;place-items:center;transition:transform .5s var(--ease),opacity .4s;}
.scene:not(.joined) .dchip{animation:jitter 5s ease-in-out infinite;animation-delay:var(--j,0s);}
@keyframes jitter{0%,100%{translate:0 0}50%{translate:0 -6px}}
.scene.joined .dchip{transform:translate(-50%,-50%);border-color:rgba(2,132,199,.28);box-shadow:0 10px 24px -16px rgba(2,132,199,.5);}
.scene.joined .dchip .bd{transform:scale(0);opacity:0;}
.hub{position:absolute;left:50%;top:50%;width:min(300px,46%);transform:translate(-50%,-50%) scale(.7);opacity:0;z-index:3;transition:transform 1s var(--ease) .5s,opacity .8s var(--ease) .5s;
  border-radius:20px;background:#fff;border:1px solid rgba(2,132,199,.25);box-shadow:0 30px 60px -24px rgba(2,132,199,.45),0 0 0 10px rgba(56,189,248,.08);overflow:hidden;}
.scene.joined .hub{transform:translate(-50%,-50%);opacity:1;}
.hub img{width:100%;display:block;}
.hub p{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;font-weight:600;font-size:14px;border-top:1px solid var(--rule);}
.hub p span{font-family:var(--fm);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--sky);font-weight:500;}
.dcap{position:relative;z-index:3;padding:0 24px 26px;display:flex;justify-content:center}
.dcap p{font-size:clamp(18px,1.8vw,24px);font-weight:600;letter-spacing:-.02em;text-align:center;transition:opacity .4s}
.dcap p.b{color:var(--ink)}
.dcap p.a{position:absolute;opacity:0;color:var(--sky)}
.scene.joined .dcap p.b{opacity:0}.scene.joined .dcap p.a{opacity:1}

/* ---------- 3. connect / organise / act ---------- */
.dsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(40px,5vw,64px);}
.dstep{border-radius:28px;background:var(--soft);padding:28px;display:flex;flex-direction:column;min-height:420px;}
.dstep .n{font-family:var(--fm);font-size:11px;letter-spacing:.16em;color:var(--faint);}
.dstep h3{font-size:28px;font-weight:800;letter-spacing:-.04em;margin-top:8px;}
.dstep p{color:var(--mute);margin-top:10px;font-size:15.5px;line-height:1.55;max-width:32ch}
.ill{margin-top:auto;height:190px;border-radius:20px;background:#fff;border:1px solid var(--rule);position:relative;overflow:hidden;}
/* connect */
.ill-c .src{position:absolute;left:14%;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500}
.ill-c .src i{width:22px;height:22px;border-radius:7px;background:var(--c);}
.ill-c .src:nth-child(1){top:18%}.ill-c .src:nth-child(2){top:44%}.ill-c .src:nth-child(3){top:70%}
.ill-c .tgt{position:absolute;right:12%;top:50%;transform:translateY(-50%);width:62px;height:62px;border-radius:18px;background:var(--ink);display:grid;place-items:center;color:#fff;box-shadow:0 0 0 8px rgba(2,132,199,.08)}
.ill-c .tgt svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ill-c svg.w{position:absolute;inset:0;width:100%;height:100%}
.ill-c svg.w path{fill:none;stroke:var(--sky);stroke-width:1.5;stroke-dasharray:3 6;animation:flow 1.1s linear infinite;opacity:.7}
/* organise */
.ill-o{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px}
.ill-o .colh{font-family:var(--fm);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.ill-o .c{display:flex;flex-direction:column;gap:6px}
.ill-o .it{height:24px;border-radius:7px;background:var(--soft-2);opacity:0;transform:translateY(-10px)}
.ill-o .c:first-child .it{background:rgba(2,132,199,.16)}
.in .ill-o .it{animation:drop .6s var(--ease) forwards}
.in .ill-o .it:nth-of-type(2){animation-delay:.25s}.in .ill-o .it:nth-of-type(3){animation-delay:.5s}.in .ill-o .it:nth-of-type(4){animation-delay:.75s}
@keyframes drop{to{opacity:1;transform:none}}
/* act */
.ill-a{padding:16px;display:flex;flex-direction:column;gap:8px}
.ill-a .bb{max-width:80%;padding:9px 12px;border-radius:14px;font-size:12.5px;line-height:1.4}
.ill-a .q{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:4px}
.ill-a .r{align-self:flex-start;background:var(--soft);border-bottom-left-radius:4px}
.ill-a .ok{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-family:var(--fm);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--sky);opacity:0}
.in .ill-a .ok{animation:drop .6s var(--ease) 1.6s forwards}
.ill-a .r .ty{display:inline-flex;gap:3px}
.ill-a .r .ty i{width:5px;height:5px;border-radius:50%;background:var(--faint);animation:blink 1.1s infinite}
.ill-a .r .ty i:nth-child(2){animation-delay:.15s}.ill-a .r .ty i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,80%,100%{opacity:.3}40%{opacity:1}}

/* ---------- 4. features ---------- */
.dfeat{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(30px,6vw,90px);align-items:center;margin-top:clamp(70px,9vw,120px);}
.dfeat.flip{grid-template-columns:1.25fr 1fr}
.dfeat.flip .fx{order:2}
.dfeat h3{font-size:clamp(30px,3.4vw,46px);font-weight:800;letter-spacing:-.045em;line-height:1.04;margin-top:14px;}
.dfeat .fx p{color:var(--mute);font-size:17px;line-height:1.6;margin-top:16px;max-width:42ch}
.ticks{list-style:none;margin-top:24px;display:flex;flex-direction:column;gap:12px}
.ticks li{display:flex;gap:12px;font-size:15.5px;line-height:1.45}
.ticks li::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;margin-top:1px;background:rgba(2,132,199,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230284c7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;}
.dshot{border-radius:30px;background:#f3f4f6;padding:clamp(18px,3.2vw,44px);position:relative;overflow:hidden}
.dshot img{border-radius:10px;width:100%;height:auto}
.dshot.plain img{box-shadow:none;border-radius:0}
.dshot.center{display:grid;place-items:center}
.dshot.center img{max-width:440px}

/* ---------- 5. time ---------- */
.time{margin-top:clamp(40px,5vw,64px);border-radius:32px;background:var(--soft);padding:clamp(24px,4vw,48px);}
.tl-row+.tl-row{margin-top:30px}
.tl-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.tl-h b{font-weight:700;font-size:16px}
.tl-h span{font-family:var(--fm);font-size:12px;color:var(--mute)}
.dtrack{display:flex;gap:4px;height:58px}
.seg{position:relative;flex:0 0 0;opacity:0;border-radius:12px;background:#fff;border:1px solid var(--rule);overflow:hidden;display:flex;align-items:flex-end;padding:8px 10px;font-size:12px;color:var(--mute);white-space:nowrap;transition:flex-basis 1.2s var(--ease),opacity .4s;}
.seg.grown{opacity:1}
.seg span{overflow:hidden;text-overflow:ellipsis}
.after .seg{background:var(--sky);border-color:var(--sky);color:#fff}
.after .free{background:transparent;border:1.5px dashed rgba(2,132,199,.4);color:var(--sky);font-weight:600;align-items:center;justify-content:center}
.big3{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:24px;margin-top:clamp(36px,4vw,52px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--rule)}
.big3 .hl b{display:block;font-size:clamp(44px,5vw,68px);font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--sky)}
.big3 .hl span{display:block;color:var(--mute);margin-top:8px}
.big3 h4{font-size:18px;font-weight:700;letter-spacing:-.02em}
.big3 p{color:var(--mute);font-size:15px;margin-top:6px;line-height:1.5}
.fine{font-family:var(--fm);font-size:10.5px;letter-spacing:.08em;color:var(--faint);margin-top:18px}

/* ---------- 6. anywhere ---------- */
.devices{position:relative;margin-top:clamp(40px,5vw,64px);padding:clamp(24px,5vw,70px) clamp(20px,6vw,90px) 0;border-radius:32px;background:linear-gradient(180deg,var(--soft),#fff);overflow:hidden}
.laptop{position:relative;max-width:900px;margin:0 auto}
.laptop .scr{border-radius:16px 16px 0 0;border:10px solid #111214;border-bottom:0;background:#111214;overflow:hidden}
.laptop .scr img{display:block;width:100%}
.laptop .base{height:16px;margin:0 -7%;border-radius:0 0 14px 14px;background:linear-gradient(#d9d9dc,#b9b9bd);position:relative}
.laptop .base::before{content:"";position:absolute;left:50%;top:0;width:16%;height:6px;transform:translateX(-50%);border-radius:0 0 8px 8px;background:#a9a9ad}
.phone{position:absolute;right:clamp(10px,6vw,90px);bottom:-6%;width:clamp(130px,18vw,230px);border-radius:34px;border:8px solid #111214;background:#111214;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.5)}
.phone img{display:block;width:100%;border-radius:26px}
.points{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:clamp(36px,4vw,56px)}
.points .ic{width:46px;height:46px;border-radius:14px;background:var(--soft);display:grid;place-items:center;color:var(--ink)}
.points .ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.points h4{font-size:18px;font-weight:700;letter-spacing:-.02em;margin-top:18px}
.points p{color:var(--mute);font-size:15px;line-height:1.55;margin-top:6px}

/* ---------- 7. colours ---------- */
.colours{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,5vw,80px);align-items:center}
.pick{margin-top:30px;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.pick .lbl{font-family:var(--fm);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.sws{display:flex;gap:12px;flex-wrap:wrap}
.sw{width:38px;height:38px;border-radius:50%;border:0;background:var(--c);cursor:pointer;position:relative;transition:transform .2s var(--ease)}
.sw:hover{transform:scale(1.08)}
.sw[aria-pressed="true"]::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--c)}
.swap{position:relative;border-radius:22px;overflow:hidden;box-shadow:0 1px 2px rgba(15,23,42,.05),0 50px 90px -40px rgba(15,23,42,.4);border:1px solid var(--rule);aspect-ratio:16/10;background:#f3f4f6}
.swap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;transition:opacity .6s var(--ease)}
.swap img.off{opacity:0}

/* ---------- 8. start small ---------- */
.plan{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(40px,5vw,64px)}
.plan>div{padding:30px 28px;border-radius:28px;border:1px solid var(--rule);position:relative}
.plan>div:nth-child(2){background:var(--soft);border-color:var(--soft)}
.plan .n{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--ink);color:#fff;font-size:15px}
.plan h4{font-size:22px;font-weight:800;letter-spacing:-.035em;margin-top:22px}
.plan p{color:var(--mute);margin-top:8px;font-size:15.5px;line-height:1.55}
.terms{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.terms span{font-family:var(--fm);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:10px 16px;border-radius:999px;background:var(--soft);color:var(--ink-2)}

/* ---------- 9. faq ---------- */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,6vw,90px);}
.qa details{border-bottom:1px solid var(--rule)}
.qa details:first-child{border-top:1px solid var(--rule)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;font-size:19px;font-weight:600;letter-spacing:-.02em}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{flex:none;width:30px;height:30px;border-radius:50%;background:var(--soft);position:relative;transition:transform .3s var(--ease),background .3s}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.6px;background:var(--ink);transform:translate(-50%,-50%)}
.qa summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s var(--ease)}
.qa details[open] summary i{background:var(--ink)}
.qa details[open] summary i::before,.qa details[open] summary i::after{background:#fff}
.qa details[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.qa details p{color:var(--mute);font-size:16px;line-height:1.65;padding:0 50px 24px 0;max-width:62ch}

/* ---------- 10. cta (the one dark block) ---------- */
.dcta{margin:clamp(90px,12vw,160px) var(--pad) var(--pad);border-radius:36px;background:#0b0b0d;color:#fff;overflow:hidden;position:relative;padding:clamp(48px,8vw,110px) clamp(24px,6vw,90px)}
.dcta::before{content:"";position:absolute;right:-10%;top:-40%;width:70%;height:140%;background:radial-gradient(closest-side,rgba(56,189,248,.22),transparent 70%);pointer-events:none}
.dcta h2{position:relative;font-weight:800;font-size:clamp(40px,6.6vw,96px);line-height:.98;letter-spacing:-.05em;max-width:12ch}
.dcta h2 span{color:#6f6f78}
.dcta p{position:relative;color:#a9a9b4;font-size:clamp(16px,1.35vw,19px);line-height:1.6;max-width:50ch;margin-top:24px}
.dcta .acts{position:relative;display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}
.dcta .btn-d{background:var(--acid);color:#0b0b0d}
.dcta .lnk{color:#fff}
.dcta .lines{position:relative;display:flex;gap:clamp(20px,4vw,56px);flex-wrap:wrap;margin-top:clamp(48px,6vw,80px);padding-top:28px;border-top:1px solid rgba(255,255,255,.12)}
.dcta .lines span{display:block;font-family:var(--fm);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#6f6f78;margin-bottom:6px}
.dcta .lines a,.dcta .lines b{font-weight:500;font-size:16px}
.dcta .lines a:hover{color:var(--acid)}
.dfoot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:0 var(--pad) 28px;font-family:var(--fm);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .dsteps{grid-template-columns:1fr}
  .dstep{min-height:0}.ill{margin-top:24px}
  .points{grid-template-columns:1fr 1fr}
  .big3{grid-template-columns:1fr 1fr}
  .plan{grid-template-columns:1fr}
  .toast.t2{right:0}
}
@media(max-width:860px){
  .shead,.dfeat,.dfeat.flip,.colours,.faq{grid-template-columns:1fr}
  .shead .lede{justify-self:start}
  .dfeat.flip .fx{order:0}
  .toast{display:none}
  .meter{display:none}
  .dchip{font-size:12px;padding:7px 11px 7px 7px;gap:7px}
  .dchip .lg{width:22px;height:22px;font-size:9px}
  .dchip.xtra{display:none}
}
@media(max-width:560px){
  .points,.big3{grid-template-columns:1fr}
  .dstage{height:560px}
  .hub{width:58%}
  .dchip{font-size:11.5px;padding:6px 9px 6px 6px;gap:6px}.dchip .lg{width:20px;height:20px;font-size:8.5px;border-radius:6px}
  .before .seg span{display:none}.after .free{font-size:11px;white-space:normal;text-align:center;line-height:1.3}
  .hub p{font-size:12.5px;padding:10px 12px}
  .qa details p{padding-right:0}
  .browser .bar b{display:none}
  .phone{right:4%;bottom:-4%;border-width:5px;border-radius:24px}.phone img{border-radius:19px}
}
@media(prefers-reduced-motion:reduce){
  .up{opacity:1;transform:none;transition:none}
  .toast.on,.dchip,.dstage svg.lines line{animation:none!important}
  .dchip,.hub,.seg{transition:none!important}
}


/* ---------- alternating bands: white / sky / white / dark / white / stone ... ---------- */
.dsec.band{margin:clamp(80px,11vw,150px) clamp(8px,1.2vw,16px) 0;padding:clamp(72px,9vw,130px) 0;border-radius:clamp(28px,3.2vw,48px);position:relative;overflow:hidden;color:var(--ink)}
.band.sky{background:linear-gradient(180deg,#eaf4fb 0%,#f3f8fc 100%);--soft:#fff;--soft-2:#e6eef5;--rule:#dde8f1}
.band.stone{background:#f3f1ec;--soft:#fff;--soft-2:#ebe8e1;--rule:#e2ded5}
.band.dark{background:radial-gradient(70% 60% at 85% 0%,rgba(56,189,248,.14),transparent 70%),#0b0b0d;
  --ink:#fff;--ink-2:#d6d6dc;--mute:#9a9aa4;--faint:#62626c;--rule:rgba(255,255,255,.1);--soft:#16171b;--soft-2:#222329}
.band.dark .kick i{background:var(--sky-2)}
.band.dark .dtrack .seg:not(.free){background:#1e1f24;border-color:rgba(255,255,255,.06);color:#9a9aa4}
.band.dark .after .seg:not(.free){background:var(--sky);border-color:var(--sky);color:#fff}
.band.dark .after .free{border-color:rgba(56,189,248,.45);color:var(--sky-2)}
.band.dark .big3 .hl b{color:var(--sky-2)}
.band.dark ::selection{background:#fff;color:#0b0b0d}
.band.sky .dstep,.band.stone .swap{box-shadow:0 1px 2px rgba(15,23,42,.04),0 18px 40px -26px rgba(15,23,42,.25)}
.band.sky .ill{background:#f7fafd}
.band.sky .qa summary i{background:#fff}
.band.sky .qa details[open] summary i{background:var(--ink)}

/* ---------- split floating button: Book a call | View demo ---------- */
.dfab{position:fixed;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);z-index:90;display:flex;align-items:stretch;border-radius:999px;background:#0b0b0d;
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 20px 44px -16px rgba(0,0,0,.55);overflow:hidden;font-family:var(--fm);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.dfab .bk-fab{position:static;box-shadow:none;border-radius:0;background:transparent;color:#fff;padding:15px 18px 15px 18px;transform:none}
.dfab .bk-fab:hover{transform:none;box-shadow:none;background:rgba(255,255,255,.08)}
.dfab .bk-fab.booked{background:transparent;color:var(--acid);box-shadow:none}
.dfab-demo{display:inline-flex;align-items:center;gap:8px;padding:15px 20px 15px 18px;color:#0b0b0d;background:#fff;font-weight:500;transition:background .2s}
.dfab-demo:hover{background:var(--acid)}
.dfab-demo svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:560px){.dfab{left:14px;right:14px;justify-content:stretch}.dfab>*{flex:1;justify-content:center}}
.db .menu-btn{color:inherit}
@media(max-width:560px){.cue{bottom:96px}}

/* ---------- book-a-call form, light version for this page ---------- */
.db .bk{width:min(600px,calc(100% - 24px));max-height:calc(100svh - 24px);overflow-x:hidden;overflow-y:auto;border:0;border-radius:28px;background:#fff;color:#0b0b0d;
  box-shadow:0 40px 100px -30px rgba(0,0,0,.55);}
.db .bk::backdrop{background:rgba(8,8,10,.55);backdrop-filter:blur(6px);}
.db .bk-f,.db .bk-done{padding:clamp(24px,4vw,36px);}
.db .bk-x{right:16px;top:16px;width:38px;height:38px;border-radius:50%;background:#f3f3f1;color:#55555e;}
.db .bk-x:hover{background:#e9e9e6;color:#0b0b0d;}
.db .bk-k{color:#8a8a93;letter-spacing:.16em;}
.db .bk h2{font-size:clamp(28px,4vw,34px);font-weight:800;letter-spacing:-.035em;color:#0b0b0d;margin-top:8px;}
.db .bk-p{color:#6b6b74;font-size:15px;margin-top:8px;}
.db .bk fieldset{margin-top:26px;}
.db .bk legend,.db .bk-row label{font-family:var(--fd);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:#0b0b0d;margin-bottom:10px;}
/* days: a simple 6 × 2 grid, no sideways scrolling */
.db .bk-days{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;overflow:visible;padding:0;scroll-snap-type:none;}
.db .bk-days span{width:auto;padding:10px 0 9px;border:1px solid #ebebe7;border-radius:14px;background:#fff;}
.db .bk-days small{font-size:9.5px;letter-spacing:.12em;color:#8a8a93;}
.db .bk-days b{font-size:20px;font-weight:700;color:#0b0b0d;line-height:1.25;}
/* times */
.db .bk-times{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;}
.db .bk-times span{padding:11px 0;border:1px solid #ebebe7;border-radius:999px;font-family:var(--fd);font-size:13.5px;font-weight:500;letter-spacing:0;text-transform:none;color:#0b0b0d;background:#fff;}
.db .bk label:hover span{border-color:#c9c9cf;background:#fafaf9;}
.db .bk input:checked+span,.db .bk input:checked+span b{background:#0b0b0d;border-color:#0b0b0d;color:#fff;}
.db .bk input:checked+span small{color:rgba(255,255,255,.65);}
.db .bk input:focus-visible+span{outline:2px solid var(--sky);outline-offset:2px;}
/* contact fields */
.db .bk-row{margin-top:26px;gap:12px;}
.db .bk-row input{background:#f6f6f4;border:1px solid transparent;border-radius:14px;color:#0b0b0d;font:500 16px var(--fd);padding:14px 16px;transition:border-color .2s,background .2s;}
.db .bk-row input:focus{background:#fff;border-color:#0b0b0d;}
.db .bk-go{margin-top:24px;padding:17px 22px;border-radius:999px;background:#0b0b0d;color:#fff;font:600 16px var(--fd);text-transform:none;letter-spacing:0;transition:background .2s;}
.db .bk-go:hover{background:#26262c;}
.db .bk-err{color:#d93a2f;}
.db .bk-done b{font-size:32px;font-weight:800;text-transform:none;color:#0b0b0d;}
.db .bk-done b span{color:var(--sky);}
.db .bk-done p{color:#6b6b74;}
.db .bk-ok{border:0;border-radius:999px;background:#0b0b0d;color:#fff;}
@media(max-width:620px){
  .db .bk-days{grid-template-columns:repeat(4,minmax(0,1fr));}
  .db .bk-days label:nth-child(n+9){display:none;}
  .db .bk-times{grid-template-columns:repeat(3,minmax(0,1fr));}
}